kodeshare/src/main/kotlin/moe/kageru/kodeshare/pages/Css.kt

package moe.kageru.kodeshare.pages

import kotlinx.css.*
import kotlinx.css.properties.*
import kotlin.math.ceil

object Css {
    const val FLOATY_CLASS = "floatything"
    private val accent1 = Color("#e6db74") // monokai yellow
    private val accent2 = Color("#a6e22e") // monokai green
    private val selection = accent1
    private val fontcolor = Color.lightGrey
    private val bgcolor = Color("#23241f")

    private const val borderpixels = 3
    private const val bodyPadding = 20
    private const val inputPadding = 8

    // Text areas apparently grow beyond their parent element if padding and/or borders are added.
    // They always grow to the right, so we simply add more padding to shift everything back (see usage of this).
    private const val bodyShift = bodyPadding + 2 * borderpixels + 2 * inputPadding
    private const val fonts = """Hack, "Jetbrains Mono", "Fira Code", "Noto Mono", monospace"""

    private fun StyledElement.defaultBorder() = border(borderpixels.px, BorderStyle.solid, accent1)

    val default = CSSBuilder().apply {
        rule("html, body, form") {
            height = (100 - ceil(bodyPadding.toDouble() / 8)).pct
        }
        not(textarea.tagName) {
            transition(duration = 400.ms)
        }
        body {
            fontFamily = fonts
            fontSize = 13.pt
            margin = "auto"
            backgroundColor = bgcolor
            color = fontcolor
            padding(
                top = bodyPadding.px,
                left = bodyPadding.px,
                right = (bodyShift).px,
                bottom = bodyPadding.px
            )
        }
        form {
            width = 100.pct
            marginTop = 0.px
            textAlign = TextAlign.center
        }
        textarea {
            fontFamily = fonts
            backgroundColor = bgcolor
            color = Color.white
            fontSize = 13.pt
            borderRadius = 8.px
            defaultBorder()
            padding = "${inputPadding}px"
            width = 100.pct
            height = 90.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 = fonts
            fontSize = 13.pt
            display = Display.inline
            position = Position.relative
        }
        rule("input[type=\"submit\"]") {
            backgroundColor = accent1
            defaultBorder()
            borderRadius = 5.px
            color = Color.black
            fontWeight = FontWeight.w600
            padding = "0.2em"
            cursor = Cursor.pointer
            transition(duration = 500.ms)
            marginRight = (-bodyShift).px
            width = 80.pct
        }
        rule("div.$FLOATY_CLASS") {
            position = Position.absolute
            padding = "5px"
            defaultBorder()
            borderRadius = 5.px
            color = accent1
            // I have no idea where this one pixel is coming from
            top = (bodyPadding + 1).px
            right = bodyPadding.px
            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") {
            outline = Outline.none
        }
        rule("::selection") {
            backgroundColor = selection
            color = bgcolor
        }
        a {
            color = accent1
            textDecoration = TextDecoration.none
        }
        rule("a:visited") {
            color = accent1
        }
        rule("a:focus") {
            color = accent2
        }
    }.toString()
}