package moe.kageru.kodeshare.pages

import kotlinx.css.*
import kotlinx.css.properties.*

object Css {
    const val FLOATY_CLASS = "floatything"
    private val accent1 = Color("#e6db74")
    private val accent2 = Color("#a6e22e")
    private val fontcolor = Color.lightGrey
    private val bgcolor = Color("#23241f")
    val default = CSSBuilder().apply {
        body {
            fontFamily = "Hack, Fira Code, Noto Mono, monospace"
            fontSize = 13.pt
            textAlign = TextAlign.center
            margin = "auto"
            backgroundColor = bgcolor
            color = fontcolor
        }
        form {
            marginTop = 1.em
        }
        textarea {
            fontFamily = "Hack, Fira Code, Noto Mono, monospace"
            backgroundColor = bgcolor
            color = Color.white
            fontSize = 13.pt
            borderColor = accent1
            borderWidth = 3.px
            borderRadius = 8.px
            borderStyle = BorderStyle.solid
            padding = "5px"
            minWidth = 70.pct
            maxWidth = 97.pct
        }
        // this doesn’t inherit the style from anything else for some reason
        rule(".hljs, pre, code") {
            width = 95.pct
            height = 100.pct
            textAlign = TextAlign.left
            fontFamily = "Hack, Fira Code, Noto Mono, monospace"
            fontSize = 13.pt
            display = Display.inline
            position = Position.relative
        }
        rule("input[type=\"submit\"]") {
            backgroundColor = accent1
            borderColor = accent1
            borderWidth = 2.px
            borderRadius = 5.px
            borderStyle = BorderStyle.solid
            color = Color.black
            fontWeight = FontWeight.w600
            padding = "5px 10em"
            cursor = Cursor.pointer
            transition(duration = 500.ms)
        }
        rule("div.$FLOATY_CLASS") {
            position = Position.absolute
            padding = "5px"
            border(2.px, BorderStyle.solid, accent1)
            borderRadius = 3.px
            color = accent1
            top = 1.em
            right = 1.em
            zIndex = 1
        }
        rule("div.$FLOATY_CLASS:hover") {
            color = accent2
            borderColor = accent2
        }
        rule("div.wrapper") {
            margin = "auto"
            lineHeight = LineHeight("140%")
            width = 70.pct
            textAlign = TextAlign.left
        }
        rule(".framed") {
            border(1.px, BorderStyle.solid, fontcolor)
            padding = "0.3em"
            margin = "0.5em"
            marginBottom = 1.em
        }
        rule("input[type=\"submit\"]:hover") {
            backgroundColor = Color.transparent
            borderColor = accent2
            color = accent2
        }
        rule("textarea:focus") {
            borderColor = accent2
            outline = Outline.none
        }
        rule("::selection") {
            color = accent1
        }
        a {
            color = accent1
            textDecoration = TextDecoration.none
        }
        rule("a:visited") {
            color = accent1
        }
        rule("a:focus") {
            color = accent2
        }
    }.toString()
}