135 lines
4.2 KiB
Kotlin
135 lines
4.2 KiB
Kotlin
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()
|
|
}
|