|
|
@ -4,25 +4,25 @@ $icon-size: 18px; |
|
|
|
$logo-size: 22px; |
|
|
|
$logo-size: 22px; |
|
|
|
|
|
|
|
|
|
|
|
// Basic colors |
|
|
|
// Basic colors |
|
|
|
|
|
|
|
$blue: #81a2be; |
|
|
|
|
|
|
|
$cyan: #add9ff; |
|
|
|
$black: #1d1f21; |
|
|
|
$black: #1d1f21; |
|
|
|
$red: #c82829; |
|
|
|
$red: #cc6666; |
|
|
|
$green: #718c00; |
|
|
|
$green: #b5bd68; |
|
|
|
$yellow: #eab700; |
|
|
|
$yellow: #f0c674; |
|
|
|
$blue: #4271ae; |
|
|
|
$magenta: #b294bb; |
|
|
|
$magenta: #8959a8; |
|
|
|
$white: #c5c8c6; |
|
|
|
$cyan: #66bdc3; |
|
|
|
|
|
|
|
$white: #d6d6d6; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Colors |
|
|
|
// Colors |
|
|
|
$bg-color: #fff; |
|
|
|
$bg-color: #1d1f21; |
|
|
|
$bg-alt-color: #d6d6d6; |
|
|
|
$bg-alt-color: #131519; |
|
|
|
$fg-color: #4d4d4c; |
|
|
|
$fg-color: #c5c8c6; |
|
|
|
$fg-alt-color: #4d4d4c; |
|
|
|
$fg-alt-color: #5f5f5f; |
|
|
|
$fg-sel-color: $blue; |
|
|
|
$fg-sel-color: $cyan; |
|
|
|
$fg-desel-color: #c9c9c9; |
|
|
|
$fg-desel-color: $fg-alt-color; |
|
|
|
$border-color: #d6d6d6; |
|
|
|
$border-color: #434549; |
|
|
|
|
|
|
|
|
|
|
|
$fg-accent: $blue; |
|
|
|
$fg-accent: $cyan; |
|
|
|
|
|
|
|
|
|
|
|
// Misc |
|
|
|
// Misc |
|
|
|
$anim-transition: 150ms; |
|
|
|
$anim-transition: 150ms; |
|
|
@ -41,9 +41,8 @@ tooltip { |
|
|
|
.bar-1, |
|
|
|
.bar-1, |
|
|
|
.bar-2 { |
|
|
|
.bar-2 { |
|
|
|
background-color: $bg-color; |
|
|
|
background-color: $bg-color; |
|
|
|
color: $fg-color; |
|
|
|
color: $fg-alt-color; |
|
|
|
border-right: solid 1px $border-color; |
|
|
|
border-right: solid 1px $border-color; |
|
|
|
padding: 0.3rem; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.segment-end { |
|
|
|
.segment-end { |
|
|
@ -57,10 +56,7 @@ button { |
|
|
|
|
|
|
|
|
|
|
|
// Workspaces |
|
|
|
// Workspaces |
|
|
|
.workspaces { |
|
|
|
.workspaces { |
|
|
|
// background-color: $bg-alt-color; |
|
|
|
|
|
|
|
// padding: .3rem; |
|
|
|
// padding: .3rem; |
|
|
|
// border: solid 1px $black; |
|
|
|
|
|
|
|
// border-radius: $font-size; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.workspaces > button { |
|
|
|
.workspaces > button { |
|
|
@ -77,6 +73,7 @@ button.active { |
|
|
|
// font-weight: bold; |
|
|
|
// font-weight: bold; |
|
|
|
color: $fg-sel-color; |
|
|
|
color: $fg-sel-color; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
button.inactive { |
|
|
|
button.inactive { |
|
|
|
color: $fg-desel-color; |
|
|
|
color: $fg-desel-color; |
|
|
|
} |
|
|
|
} |
|
|
@ -107,7 +104,7 @@ scale trough { |
|
|
|
|
|
|
|
|
|
|
|
// Colors for the buttons |
|
|
|
// Colors for the buttons |
|
|
|
.lock:hover { |
|
|
|
.lock:hover { |
|
|
|
color: $white; |
|
|
|
color: $blue; |
|
|
|
} |
|
|
|
} |
|
|
|
.quit:hover { |
|
|
|
.quit:hover { |
|
|
|
color: $green; |
|
|
|
color: $green; |
|
|
@ -131,11 +128,9 @@ scale trough { |
|
|
|
// Control |
|
|
|
// Control |
|
|
|
.control { |
|
|
|
.control { |
|
|
|
margin-bottom: $logo-size; |
|
|
|
margin-bottom: $logo-size; |
|
|
|
padding: 0.5rem; |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
margin: 0; |
|
|
|
|
|
|
|
font-family: Material Icons; |
|
|
|
font-family: Material Icons; |
|
|
|
font-size: 1.6em; |
|
|
|
font-size: 1.6em; |
|
|
|
border-radius: 5px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
.icon { |
|
|
@ -157,11 +152,11 @@ scale trough { |
|
|
|
|
|
|
|
|
|
|
|
// Time |
|
|
|
// Time |
|
|
|
.time { |
|
|
|
.time { |
|
|
|
|
|
|
|
// color: $fg-alt-color; |
|
|
|
font-size: 11px; |
|
|
|
font-size: 11px; |
|
|
|
font-weight: bold; |
|
|
|
font-weight: bold; |
|
|
|
border-top: solid 2px $border-color; |
|
|
|
border-top: solid 2px $fg-alt-color; |
|
|
|
padding: 1rem 0; |
|
|
|
padding-top: 1rem; |
|
|
|
padding-bottom: 0rem; |
|
|
|
|
|
|
|
margin-bottom: 0.5rem; |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -170,7 +165,6 @@ scale trough { |
|
|
|
margin: 0 0.8rem; |
|
|
|
margin: 0 0.8rem; |
|
|
|
margin-top: 6px; |
|
|
|
margin-top: 6px; |
|
|
|
font-size: $logo-size; |
|
|
|
font-size: $logo-size; |
|
|
|
// opacity: 0.6; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.logo-seperator { |
|
|
|
.logo-seperator { |
|
|
|