You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
548 lines
14 KiB
Stylus
548 lines
14 KiB
Stylus
$color-1 = #222
|
|
$color-2 = #c0c0c0
|
|
$color-3 = #000
|
|
$color-4 = #fff
|
|
$color-5 = #808080
|
|
|
|
$surface=#c0c0c0;
|
|
$button-highlight=#ffffff;
|
|
$button-face=#dfdfdf;
|
|
$button-shadow=#808080;
|
|
$window-frame=#0a0a0a;
|
|
$dialog-blue=#000080;
|
|
$dialog-blue-light=#1084d0;
|
|
$dialog-gray=#808080;
|
|
$dialog-gray-light=#b5b5b5;
|
|
$link-blue=#0000ff;
|
|
|
|
/* Spacing */
|
|
$element-spacing=8px;
|
|
$grouped-button-spacing=4px;
|
|
$grouped-element-spacing=6px;
|
|
$radio-width=12px;
|
|
$checkbox-width=13px;
|
|
$radio-label-spacing=6px;
|
|
$range-track-height=4px;
|
|
$range-spacing=10px;
|
|
|
|
/* Some detailed computations for radio buttons and checkboxes */
|
|
$radio-total-width-precalc=$radio-width + $radio-label-spacing;
|
|
$radio-total-width=calc($radio-total-width-precalc);
|
|
$radio-left=calc(-1 * $radio-total-width-precalc);
|
|
$radio-dot-width=4px;
|
|
$radio-dot-top=calc($radio-width / 2 - $radio-dot-width / 2);
|
|
$radio-dot-left=calc(-1 * ($radio-total-width-precalc) + $radio-width / 2 - $radio-dot-width / 2);
|
|
$checkbox-total-width-precalc=$checkbox-width +$radio-label-spacing;
|
|
$checkbox-total-width=calc($checkbox-total-width-precalc);
|
|
$checkbox-left=calc(-1 * $checkbox-total-width-precalc);
|
|
$checkmark-width=7px;
|
|
$checkmark-top=3px;
|
|
$checkmark-left=3px;
|
|
|
|
/* Borders */
|
|
$border-width=1px;
|
|
$border-raised-outer=inset -1px -1px $window-frame, inset 1px 1px $button-highlight;
|
|
$border-raised-inner=inset -2px -2px $button-shadow, inset 2px 2px $button-face;
|
|
$border-sunken-outer=inset -1px -1px $button-highlight, inset 1px 1px $window-frame;
|
|
$border-sunken-inner=inset -2px -2px $button-face, inset 2px 2px $button-shadow;
|
|
|
|
/* Window borders flip button-face and button-highlight */
|
|
$border-window-outer=inset -1px -1px $window-frame, inset 1px 1px $button-face;
|
|
$border-window-inner=inset -2px -2px $button-shadow, inset 2px 2px $button-highlight;
|
|
|
|
/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
|
|
$border-field=inset -1px -1px $button-highlight, inset 1px 1px $button-shadow, inset -2px -2px $button-face, inset 2px 2px $window-frame;
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"]
|
|
-webkit-appearance: none
|
|
-moz-appearance: none
|
|
appearance: none
|
|
border: none
|
|
margin: 0
|
|
background: 0
|
|
opacity: 0
|
|
position: fixed
|
|
|
|
@font-face
|
|
font-family "Pixelated MS Sans Serif"
|
|
src url("98.css/fonts/converted/ms_sans_serif.woff") format("woff")
|
|
src url("98.css/fonts/converted/ms_sans_serif.woff2") format("woff2")
|
|
font-weight normal
|
|
font-style normal
|
|
|
|
@font-face
|
|
font-family "Pixelated MS Sans Serif"
|
|
src url("98.css/fonts/converted/ms_sans_serif_bold.woff") format("woff")
|
|
src url("98.css/fonts/converted/ms_sans_serif_bold.woff2") format("woff2")
|
|
font-weight bold
|
|
font-style normal
|
|
|
|
body
|
|
font-family Arial
|
|
color $color-1
|
|
|
|
button
|
|
label
|
|
input
|
|
textarea
|
|
select
|
|
option
|
|
ul.tree-view
|
|
.window
|
|
.help-text
|
|
font-family "Pixelated MS Sans Serif", Arial
|
|
font-smoothing none
|
|
|
|
u
|
|
text-decoration none
|
|
border-bottom 0.5px solid $color-1
|
|
|
|
.vertical-bar
|
|
width 4px
|
|
height 20px
|
|
background $color-2
|
|
box-shadow var($border-raised-outer), var($border-raised-inner)
|
|
|
|
button
|
|
&:not(:disabled)
|
|
&:hover
|
|
box-shadow var($border-sunken-outer), var($border-sunken-inner)
|
|
|
|
button
|
|
&:focus
|
|
outline 1px dotted #000000
|
|
outline-offset -4px
|
|
|
|
button::-moz-focus-inner
|
|
border 0
|
|
|
|
:disabled
|
|
:disabled+label
|
|
color var($button-shadow)
|
|
text-shadow 1px 1px 0 var($button-highlight)
|
|
|
|
.window
|
|
box-shadow var($border-window-outer), var($border-window-inner)
|
|
background var($surface)
|
|
padding 3px
|
|
|
|
.title-bar-controls
|
|
display flex
|
|
|
|
button
|
|
padding 0
|
|
display block
|
|
min-width 16px
|
|
min-height 14px
|
|
|
|
&:active
|
|
padding 0
|
|
|
|
&:focus
|
|
outline none
|
|
|
|
button[aria-label="Minimize"]
|
|
background-image svg-load("98.css/icon/minimize.svg")
|
|
background-repeat no-repeat
|
|
background-position bottom 3px left 4px
|
|
|
|
button[aria-label="Maximize"]
|
|
background-image svg-load("98.css/icon/maximize.svg")
|
|
background-repeat no-repeat
|
|
background-position top 2px left 3px
|
|
|
|
button[aria-label="Restore"]
|
|
background-image svg-load("98.css/icon/restore.svg")
|
|
background-repeat no-repeat
|
|
background-position top 2px left 3px
|
|
|
|
button[aria-label="Help"]
|
|
background-image svg-load("98.css/icon/help.svg")
|
|
background-repeat no-repeat
|
|
background-position top 2px left 5px
|
|
|
|
button[aria-label="Close"]
|
|
margin-left 2px
|
|
background-image svg-load("98.css/icon/close.svg")
|
|
background-repeat no-repeat
|
|
background-position top 3px left 4px
|
|
|
|
.window-body
|
|
margin var($element-spacing)
|
|
|
|
fieldset
|
|
border none
|
|
box-shadow var($border-sunken-outer), var($border-raised-inner)
|
|
padding calc(2 * var($border-width) + var($element-spacing))
|
|
padding-block-start var($element-spacing)
|
|
margin 0
|
|
|
|
legend
|
|
background var($surface)
|
|
|
|
.field-row
|
|
display flex
|
|
align-items center
|
|
|
|
>*
|
|
+*
|
|
margin-left var($grouped-element-spacing)
|
|
|
|
[class^="field-row"]
|
|
+[class^="field-row"]
|
|
margin-top var($grouped-element-spacing)
|
|
|
|
.field-row-stacked
|
|
display flex
|
|
flex-direction column
|
|
|
|
*
|
|
+*
|
|
margin-top var($grouped-element-spacing)
|
|
|
|
input[type="radio"]+label
|
|
input[type="checkbox"]+label
|
|
line-height 13px
|
|
|
|
input[type="radio"]
|
|
+label
|
|
position relative
|
|
margin-left var($radio-total-width)
|
|
|
|
+label::before
|
|
content ""
|
|
position absolute
|
|
top 0
|
|
left calc(-1 * (var($radio-total-width-precalc)))
|
|
display inline-block
|
|
width var($radio-width)
|
|
height var($radio-width)
|
|
margin-right var($radio-label-spacing)
|
|
background svg-load("98.css/icon/radio-border.svg")
|
|
|
|
input[type="radio"]:active
|
|
+label::before
|
|
background svg-load("98.css/icon/radio-border-disabled.svg")
|
|
|
|
input[type="radio"]:checked
|
|
+label::after
|
|
content ""
|
|
display block
|
|
width var($radio-dot-width)
|
|
height var($radio-dot-width)
|
|
top var($radio-dot-top)
|
|
left var($radio-dot-left)
|
|
position absolute
|
|
background svg-load("98.css/icon/radio-dot.svg")
|
|
|
|
input[type="radio"]:focus+label
|
|
input[type="checkbox"]:focus+label
|
|
outline 1px dotted #000000
|
|
|
|
input[type="radio"][disabled]
|
|
+label::before
|
|
background svg-load("98.css/icon/radio-border-disabled.svg")
|
|
|
|
input[type="radio"][disabled]:checked
|
|
+label::after
|
|
background svg-load("98.css/icon/radio-dot-disabled.svg")
|
|
|
|
input[type="checkbox"]
|
|
+label
|
|
position relative
|
|
margin-left var($checkbox-total-width)
|
|
|
|
+label::before
|
|
content ""
|
|
position absolute
|
|
left calc(-1 * (var($checkbox-total-width-precalc)))
|
|
display inline-block
|
|
width var($checkbox-width)
|
|
height var($checkbox-width)
|
|
background var($button-highlight)
|
|
box-shadow var($border-field)
|
|
margin-right var($radio-label-spacing)
|
|
|
|
input[type="checkbox"]:active
|
|
+label::before
|
|
background var($surface)
|
|
|
|
input[type="checkbox"]:checked
|
|
+label::after
|
|
content ""
|
|
display block
|
|
width var($checkmark-width)
|
|
height var($checkmark-width)
|
|
position absolute
|
|
top var($checkmark-top)
|
|
left calc(-1 * (var($checkbox-total-width-precalc)) + var($checkmark-left))
|
|
background svg-load("98.css/icon/checkmark.svg")
|
|
|
|
input[type="checkbox"][disabled]
|
|
+label::before
|
|
background var($surface)
|
|
|
|
input[type="checkbox"][disabled]:checked
|
|
+label::after
|
|
background svg-load("98.css/icon/checkmark-disabled.svg")
|
|
|
|
input[type="text"]
|
|
input[type="password"]
|
|
input[type="email"]
|
|
select
|
|
textarea
|
|
padding 3px 4px
|
|
border none
|
|
box-shadow var($border-field)
|
|
background-color var($button-highlight)
|
|
box-sizing border-box
|
|
appearance none
|
|
border-radius 0
|
|
|
|
select
|
|
appearance none
|
|
position relative
|
|
padding-right 32px
|
|
background-image svg-load("98.css/icon/button-down.svg")
|
|
background-position top 2px right 2px
|
|
background-repeat no-repeat
|
|
border-radius 0
|
|
|
|
&:focus
|
|
color var($button-highlight)
|
|
background-color var($dialog-blue)
|
|
|
|
option
|
|
color $color-3
|
|
background-color $color-4
|
|
|
|
&:active
|
|
background-image svg-load("98.css/icon/button-down-active.svg")
|
|
|
|
select:focus
|
|
input[type="text"]:focus
|
|
input[type="password"]:focus
|
|
input[type="email"]:focus
|
|
textarea:focus
|
|
outline none
|
|
|
|
input[type="range"]
|
|
appearance none
|
|
width 100%
|
|
background transparent
|
|
|
|
input[type="range"]:focus
|
|
outline none
|
|
|
|
input[type="range"]::-webkit-slider-thumb
|
|
appearance none
|
|
height 21px
|
|
width 11px
|
|
background svg-load("98.css/icon/indicator-horizontal.svg")
|
|
transform translateY(-8px)
|
|
|
|
input[type="range"].has-box-indicator::-webkit-slider-thumb
|
|
background svg-load("98.css/icon/indicator-rectangle-horizontal.svg")
|
|
transform translateY(-10px)
|
|
|
|
input[type="range"]::-moz-range-thumb
|
|
height 21px
|
|
width 11px
|
|
border 0
|
|
border-radius 0
|
|
background svg-load("98.css/icon/indicator-horizontal.svg")
|
|
transform translateY(2px)
|
|
|
|
input[type="range"].has-box-indicator::-moz-range-thumb
|
|
background svg-load("98.css/icon/indicator-rectangle-horizontal.svg")
|
|
transform translateY(0px)
|
|
|
|
input[type="range"]::-webkit-slider-runnable-track
|
|
width 100%
|
|
background black
|
|
border-right 1px solid grey
|
|
border-bottom 1px solid grey
|
|
box-shadow 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
|
|
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
|
|
|
|
input[type="range"]::-moz-range-track
|
|
width 100%
|
|
background black
|
|
border-right 1px solid grey
|
|
border-bottom 1px solid grey
|
|
box-shadow 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
|
|
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
|
|
|
|
.is-vertical
|
|
display inline-block
|
|
width 4px
|
|
height 150px
|
|
transform translateY(50%)
|
|
|
|
>input[type="range"]
|
|
width 150px
|
|
height 4px
|
|
margin 0 calc(var($grouped-element-spacing) + var($range-spacing)) 0 var($range-spacing)
|
|
transform-origin left
|
|
transform rotate(270deg) translateX(calc(-50% + var($element-spacing)))
|
|
|
|
>input[type="range"]::-webkit-slider-runnable-track
|
|
border-left 1px solid grey
|
|
border-right 0
|
|
border-bottom 1px solid grey
|
|
box-shadow -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
|
|
1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey
|
|
|
|
>input[type="range"]::-moz-range-track
|
|
border-left 1px solid grey
|
|
border-right 0
|
|
border-bottom 1px solid grey
|
|
box-shadow -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
|
|
1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey
|
|
|
|
>input[type="range"]::-webkit-slider-thumb
|
|
transform translateY(-8px) scaleX(-1)
|
|
|
|
>input[type="range"].has-box-indicator::-webkit-slider-thumb
|
|
transform translateY(-10px) scaleX(-1)
|
|
|
|
>input[type="range"]::-moz-range-thumb
|
|
transform translateY(2px) scaleX(-1)
|
|
|
|
>input[type="range"].has-box-indicator::-moz-range-thumb
|
|
transform translateY(0px) scaleX(-1)
|
|
|
|
a
|
|
&:focus
|
|
outline 1px dotted var($link-blue)
|
|
|
|
ul
|
|
&.tree-view
|
|
display block
|
|
background var($button-highlight)
|
|
box-shadow var($border-field)
|
|
padding 6px
|
|
margin 0
|
|
|
|
li
|
|
list-style-type none
|
|
|
|
a
|
|
text-decoration none
|
|
color $color-3
|
|
|
|
&:focus
|
|
background-color var($dialog-blue)
|
|
color var($button-highlight)
|
|
|
|
ul
|
|
margin-left 16px
|
|
padding-left 16px
|
|
border-left 1px dotted $color-5
|
|
|
|
>li
|
|
position relative
|
|
|
|
>li::before
|
|
content ""
|
|
display block
|
|
position absolute
|
|
left -16px
|
|
top 6px
|
|
width 12px
|
|
border-bottom 1px dotted $color-5
|
|
|
|
>li::after
|
|
&:last-child
|
|
content ""
|
|
display block
|
|
position absolute
|
|
left -20px
|
|
top 7px
|
|
bottom 0px
|
|
width 8px
|
|
background var($button-highlight)
|
|
|
|
details
|
|
>summary
|
|
&:before
|
|
margin-left -22px
|
|
position relative
|
|
z-index 1
|
|
|
|
details
|
|
margin-top 0
|
|
|
|
>summary
|
|
&:before
|
|
text-align center
|
|
display block
|
|
float left
|
|
content "+"
|
|
border 1px solid $color-5
|
|
width 8px
|
|
height 9px
|
|
line-height 8px
|
|
margin-right 5px
|
|
padding-left 1px
|
|
background-color $color-4
|
|
|
|
details[open]
|
|
summary
|
|
margin-bottom 0
|
|
|
|
>summary
|
|
&:before
|
|
content "-"
|
|
|
|
ul.tree-view ul
|
|
ul.tree-view li
|
|
margin-top 3px
|
|
|
|
pre
|
|
background var($button-highlight)
|
|
box-shadow var($border-field)
|
|
|
|
summary
|
|
&:focus
|
|
outline 1px dotted #000000
|
|
|
|
::-webkit-scrollbar
|
|
width 16px
|
|
|
|
::-webkit-scrollbar:horizontal
|
|
height 17px
|
|
|
|
::-webkit-scrollbar-corner
|
|
background var($button-face)
|
|
|
|
::-webkit-scrollbar-track
|
|
background-image svg-load("98.css/icon/scrollbar-background.svg")
|
|
|
|
::-webkit-scrollbar-thumb
|
|
background-color var($button-face)
|
|
box-shadow var($border-raised-outer), var($border-raised-inner)
|
|
|
|
::-webkit-scrollbar-button:horizontal:start:decrement
|
|
::-webkit-scrollbar-button:horizontal:end:increment
|
|
::-webkit-scrollbar-button:vertical:start:decrement
|
|
::-webkit-scrollbar-button:vertical:end:increment
|
|
display block
|
|
|
|
::-webkit-scrollbar-button:vertical:start
|
|
height 17px
|
|
background-image svg-load("98.css/icon/button-up.svg")
|
|
|
|
::-webkit-scrollbar-button:vertical:end
|
|
height 17px
|
|
background-image svg-load("98.css/icon/button-down.svg")
|
|
|
|
::-webkit-scrollbar-button:horizontal:start
|
|
width 16px
|
|
background-image svg-load("98.css/icon/button-left.svg")
|
|
|
|
::-webkit-scrollbar-button:horizontal:end
|
|
width 16px
|
|
background-image svg-load("98.css/icon/button-right.svg")
|