kageru/kodeshare
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor CSS

Browse Source
This commit is contained in:
kageru 2019-09-29 15:56:22 +02:00
parent df6d3e34e8
commit facb408e89
1 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/main/kotlin/moe/kageru/kodeshare/pages/Css.kt
View File

@ -2,6 +2,7 @@ package moe.kageru.kodeshare.pages
import kotlinx.css.*
import kotlinx.css.properties.*
import kotlin.math.ceil
object Css {
const val FLOATY_CLASS = "floatything"
@ -9,7 +10,20 @@ object Css {
private val accent2 = Color("#a6e22e")
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 fun StyledElement.defaultBorder() = border(borderpixels.px, BorderStyle.solid, accent1)
val default = CSSBuilder().apply {
rule("html, body, form") {
height = (100 - ceil(bodyPadding.toDouble() / 8)).pct
}
body {
fontFamily = "Hack, Fira Code, Noto Mono, monospace"
fontSize = 13.pt
@ -17,22 +31,27 @@ object Css {
margin = "auto"
backgroundColor = bgcolor
color = fontcolor
padding(
top = bodyPadding.px,
left = bodyPadding.px,
right = (bodyShift).px,
bottom = bodyPadding.px
)
}
form {
marginTop = 1.em
width = 100.pct
marginTop = 0.px
}
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
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") {
@ -46,24 +65,25 @@ object Css {
}
rule("input[type=\"submit\"]") {
backgroundColor = accent1
borderColor = accent1
borderWidth = 2.px
defaultBorder()
borderRadius = 5.px
borderStyle = BorderStyle.solid
color = Color.black
fontWeight = FontWeight.w600
padding = "5px 10em"
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"
border(2.px, BorderStyle.solid, accent1)
borderRadius = 3.px
defaultBorder()
borderRadius = 5.px
color = accent1
top = 1.em
right = 1.em
// 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") {
@ -88,7 +108,6 @@ object Css {
color = accent2
}
rule("textarea:focus") {
borderColor = accent2
outline = Outline.none
}
rule("::selection") {