/** Global **/ body { background: url("../assets/imgs/background.webp") no-repeat center; background-size: cover; > * { scrollbar-width: thin; } } /* Windows */ .window-app { .window-content { z-index: 1; position: relative; background: url("../assets/imgs/bgL5R.webp") no-repeat; background-size: cover; scrollbar-width: thin; } .window-resizable-handle { z-index: 2; background: $black-light; } } /* Focus, Active */ * { transition-property: background, color, border-color, text-shadow, box-shadow; transition-duration: 0.5s; transition-timing-function: ease; } input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus { box-shadow: 0 0 6px $red; } .tabs .item.active { text-shadow: 0 0 10px $red; } #controls .scene-control.active, #controls .control-tool.active, #controls .scene-control:hover, #controls .control-tool:hover { box-shadow: 0 0 10px $red; } button:hover { box-shadow: 0 0 10px $red; } button:focus { box-shadow: 0 0 10px $red; } /* lists */ ul, li { list-style-type: none; margin: 0; padding: 0; } .item-list { > li { padding: 0.25rem; border: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 0 none; &:nth-child(odd) { background: $l5r5e-odd; } &:nth-child(even) { background: $l5r5e-even; } &:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } } } // Fieldset fieldset { flex: 1; display: flex; margin: 0 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid $l5r5e-title; &:last-child { margin: 0 0 0 0.5rem; } legend { color: $l5r5e-label; } .editor { height: calc(100% - 1.5rem); } } // inputs input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="time"] { text-align: center; padding: 0.25rem; background: $l5r5e-white; border: 1px solid $l5r5e-title; color: $l5r5e-bold; &[disabled] { background: $l5r5e-white-light; } } // Editors .editor { flex: 1; height: 100%; } // Elements Colors .earth { color: $l5r5e-earth; } .air { color: $l5r5e-air; } .water { color: $l5r5e-water; } .fire { color: $l5r5e-fire; } .void { color: $l5r5e-void; } table { text-align: center; background: transparent; border: 1px solid $l5r5e-title; thead { background: $l5r5e-title; color: $l5r5e-label; text-shadow: none; border-bottom: $l5r5e-title; } tbody { } tr { &:nth-child(odd) { background: $l5r5e-odd; } &:nth-child(even) { background: $l5r5e-even; } } }