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.*
import kotlinx.css.properties.* import kotlinx.css.properties.*
import kotlin.math.ceil
object Css { object Css {
const val FLOATY_CLASS = "floatything" const val FLOATY_CLASS = "floatything"
@ -9,7 +10,20 @@ object Css {
private val accent2 = Color("#a6e22e") private val accent2 = Color("#a6e22e")
private val fontcolor = Color.lightGrey private val fontcolor = Color.lightGrey
private val bgcolor = Color("#23241f") 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 { val default = CSSBuilder().apply {
rule("html, body, form") {
height = (100 - ceil(bodyPadding.toDouble() / 8)).pct
}
body { body {
fontFamily = "Hack, Fira Code, Noto Mono, monospace" fontFamily = "Hack, Fira Code, Noto Mono, monospace"
fontSize = 13.pt fontSize = 13.pt
@ -17,22 +31,27 @@ object Css {
margin = "auto" margin = "auto"
backgroundColor = bgcolor backgroundColor = bgcolor
color = fontcolor color = fontcolor
padding(
top = bodyPadding.px,
left = bodyPadding.px,
right = (bodyShift).px,
bottom = bodyPadding.px
)
} }
form { form {
marginTop = 1.em width = 100.pct
marginTop = 0.px
} }
textarea { textarea {
fontFamily = "Hack, Fira Code, Noto Mono, monospace" fontFamily = "Hack, Fira Code, Noto Mono, monospace"
backgroundColor = bgcolor backgroundColor = bgcolor
color = Color.white color = Color.white
fontSize = 13.pt fontSize = 13.pt
borderColor = accent1
borderWidth = 3.px
borderRadius = 8.px borderRadius = 8.px
borderStyle = BorderStyle.solid defaultBorder()
padding = "5px" padding = "${inputPadding}px"
minWidth = 70.pct width = 100.pct
maxWidth = 97.pct height = 90.pct
} }
// this doesn’t inherit the style from anything else for some reason // this doesn’t inherit the style from anything else for some reason
rule(".hljs, pre, code") { rule(".hljs, pre, code") {
@ -46,24 +65,25 @@ object Css {
} }
rule("input[type=\"submit\"]") { rule("input[type=\"submit\"]") {
backgroundColor = accent1 backgroundColor = accent1
borderColor = accent1 defaultBorder()
borderWidth = 2.px
borderRadius = 5.px borderRadius = 5.px
borderStyle = BorderStyle.solid
color = Color.black color = Color.black
fontWeight = FontWeight.w600 fontWeight = FontWeight.w600
padding = "5px 10em" padding = "0.2em"
cursor = Cursor.pointer cursor = Cursor.pointer
transition(duration = 500.ms) transition(duration = 500.ms)
marginRight = (-bodyShift).px
width = 80.pct
} }
rule("div.$FLOATY_CLASS") { rule("div.$FLOATY_CLASS") {
position = Position.absolute position = Position.absolute
padding = "5px" padding = "5px"
border(2.px, BorderStyle.solid, accent1) defaultBorder()
borderRadius = 3.px borderRadius = 5.px
color = accent1 color = accent1
top = 1.em // I have no idea where this one pixel is coming from
right = 1.em top = (bodyPadding + 1).px
right = bodyPadding.px
zIndex = 1 zIndex = 1
} }
rule("div.$FLOATY_CLASS:hover") { rule("div.$FLOATY_CLASS:hover") {
@ -88,7 +108,6 @@ object Css {
color = accent2 color = accent2
} }
rule("textarea:focus") { rule("textarea:focus") {
borderColor = accent2
outline = Outline.none outline = Outline.none
} }
rule("::selection") { rule("::selection") {