ui: init windows 98 theme

This commit is contained in:
undefined committed 2021-04-05 17:35:36 +08:00
1 parent 6cae5cb7d1
commit 9524e56d01
12 files changed
+731 -58

No files matched your search

@@ -0,0 +1,32 @@
@import './var.inc.styl'
.button
box-sizing: border-box
border: none
background: #c0c0c0
border-radius: 0
min-width: 75px;
min-height: 23px;
padding: 0 12px;
&:not(:disabled)
&:active
box-shadow: --border-sunken-outer, --border-sunken-inner
padding: 2px 11px 0 13px;
.button.inverse
line-height: rem($form-control-height - 4)
border: 2px solid #FFF
background: none
&, &:visited
&, .typo &
color: #FFF
&:not(.disabled)
&:hover, &:focus
border-color: $immersive-primary-color
background: none
box-shadow: none
&, .typo &
color: $immersive-primary-color
@@ -0,0 +1,58 @@
@import './var.inc.styl'
.button
background-color: lighten($default-color, 50%)
border: 1px solid $default-color
transition: background-color .2s, box-shadow .5s
transition-timing-function: ease-out-sine
&, &:visited, &:hover
&, .typo &
color: $text-1-color
&:not(.disabled)
&:hover, &:focus
background-color: darken($default-color, 5%)
border-color: darken($default-color, 5%)
box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
&:focus
border-color: $input-focus-color
&.rounded
border-radius: rem($form-control-height / 2)
&.primary
border-color: $primary-color
background-color: $primary-color
&, &:visited, &:hover
&, .typo &
color: #FFF
&:not(.disabled)
&:hover
background-color: lighten(saturate($primary-color, 30%), 10%)
border-color: saturate($primary-color, 70%)
box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
&.disabled
cursor: default
opacity: 0.5
.button.inverse
line-height: rem($form-control-height - 4)
border: 2px solid #FFF
background: none
&, &:visited
&, .typo &
color: #FFF
&:not(.disabled)
&:hover, &:focus
border-color: $immersive-primary-color
background: none
box-shadow: none
&, .typo &
color: $immersive-primary-color
@@ -3,61 +3,22 @@
.button
font-size: rem($font-size-secondary)
line-height: rem($form-control-height - 2)
background-color: lighten($default-color, 50%)
border: 1px solid $default-color
height: rem($form-control-height)
padding: rem(0 25px)
display: inline-block
outline: 0
margin: 0 0 1rem
transition: background-color .2s, box-shadow .5s
transition-timing-function: ease-out-sine
cursor: pointer
user-select: none
&, &:visited, &:hover
&, .typo &
color: $text-1-color
&:hover, &:focus
text-decoration: none
&:not(.disabled)
&:hover, &:focus
background-color: darken($default-color, 5%)
border-color: darken($default-color, 5%)
box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
&:focus
border-color: $input-focus-color
&.expanded
padding-left: 0
padding-right: 0
text-align: center
width: 100%
&.rounded
border-radius: rem($form-control-height / 2)
&.primary
border-color: $primary-color
background-color: $primary-color
&, &:visited, &:hover
&, .typo &
color: #FFF
&:not(.disabled)
&:hover
background-color: lighten(saturate($primary-color, 30%), 10%)
border-color: saturate($primary-color, 70%)
box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
&.disabled
cursor: default
opacity: 0.5
&.compact
margin-bottom: 0
height: rem($compact-control-height)
@@ -72,11 +33,3 @@
&, &:visited
&, .typo &
color: #FFF
&:not(.disabled)
&:hover, &:focus
border-color: $immersive-primary-color
background: none
box-shadow: none
&, .typo &
color: $immersive-primary-color