initial commit
This commit is contained in:
pika
parent
f7cee9391e
commit
1e95f6533f
3 changed files with 1046 additions and 0 deletions
434
style.scss
Normal file
434
style.scss
Normal file
|
|
@ -0,0 +1,434 @@
|
|||
// colorscheme(dracula)
|
||||
// See https://github.com/dracula/dracula-theme/blob/master/LICENSE or dracula/LICENSE for the license
|
||||
$bg: #26272a;
|
||||
$fg: #f8f8f2;
|
||||
$inactive: #44475a;
|
||||
$darkblue: #6272a4;
|
||||
$cyan: #8be9fd;
|
||||
$green: #85dd5f;
|
||||
$orange: #eb895f;
|
||||
$pink: #ff79c6;
|
||||
$purple: #c98fe8;
|
||||
$red: #ff5555;
|
||||
$update: #e62c57;
|
||||
$yellow: #e6d62c;
|
||||
|
||||
|
||||
$btblue: #146dad;
|
||||
|
||||
$textsize: 1rem;
|
||||
|
||||
*{
|
||||
all: unset;
|
||||
font-family: "MartianMono Nerd Font";
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.popup {
|
||||
background-color: $bg;
|
||||
color: #50fa7b;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
menu {
|
||||
padding: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
// debug
|
||||
.cpu-box{
|
||||
// background-color: #00cc00
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bar,tooltip{
|
||||
background-color: $bg;
|
||||
border-radius: 16px;
|
||||
margin: 2px 0.5rem 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: $textsize;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: $textsize;
|
||||
}
|
||||
|
||||
.reboot-button {
|
||||
font-size: 28px;
|
||||
|
||||
color: $darkblue;
|
||||
}
|
||||
.sleep-button {
|
||||
font-size: 28px;
|
||||
|
||||
color: $darkblue;
|
||||
}
|
||||
.lock-button {
|
||||
font-size: 22px;
|
||||
|
||||
color: $darkblue;
|
||||
}
|
||||
.exit-button {
|
||||
font-size: 28px;
|
||||
|
||||
color: $darkblue;
|
||||
}
|
||||
|
||||
.power-button {
|
||||
font-size: 25px;
|
||||
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.power-box {
|
||||
}
|
||||
|
||||
.power-box-expand {
|
||||
}
|
||||
|
||||
.system-confirm {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
// Common slider settings
|
||||
trough {
|
||||
border-radius: 3px;
|
||||
border-width: 1px;
|
||||
border-style: none;
|
||||
background-color: $inactive;
|
||||
// margin-top: 2px;
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
}
|
||||
|
||||
slider {
|
||||
// Controls the size of the control area (set border-style to solid to see)
|
||||
border-radius: 0%;
|
||||
border-width: 1px;
|
||||
border-style: none;
|
||||
margin: -9px -9px -9px -9px;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
highlight {
|
||||
border-radius: 3px;
|
||||
border-width: 1px;
|
||||
border-style: none;
|
||||
// For vertical we need width, for horizontal we need height
|
||||
// Both can coexist though
|
||||
min-width: 6px;
|
||||
min-height: 6px;
|
||||
}
|
||||
|
||||
.audio-icon {
|
||||
font-size: 24px;
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.audio-volume {
|
||||
trough {
|
||||
background-color: $inactive;
|
||||
}
|
||||
|
||||
slider {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
highlight {
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
font-size: 16px;
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.mic-icon {
|
||||
font-size: 24px;
|
||||
color: $purple;
|
||||
// margin-right: 0px;
|
||||
}
|
||||
|
||||
.mic-volume {
|
||||
trough {
|
||||
background-color: $inactive;
|
||||
}
|
||||
|
||||
slider {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
highlight {
|
||||
background-color: $purple;
|
||||
}
|
||||
|
||||
font-size: 16px;
|
||||
color: $purple;
|
||||
}
|
||||
|
||||
.package-outofdate {
|
||||
margin: -5px -5px -5px -5px;
|
||||
font-size: 24px;
|
||||
color: $update;
|
||||
}
|
||||
|
||||
.bt-num {
|
||||
font-size: $textsize;
|
||||
color: $btblue;
|
||||
}
|
||||
.bt-label-on {
|
||||
font-size: 20px;
|
||||
color: $btblue;
|
||||
}
|
||||
.bt-label-off {
|
||||
font-size: 24px;
|
||||
color: $btblue;
|
||||
}
|
||||
.bt-label-connected {
|
||||
font-size: 28px;
|
||||
color: $btblue;
|
||||
}
|
||||
|
||||
.disk-widget * {
|
||||
color: $purple;
|
||||
font-size: $textsize;
|
||||
}
|
||||
.disk-util-progress {
|
||||
background-color: $inactive;
|
||||
}
|
||||
|
||||
.vram-widget * {
|
||||
color: $orange;
|
||||
font-size: $textsize;
|
||||
}
|
||||
.vram-util-progress {
|
||||
background-color: $inactive;
|
||||
}
|
||||
|
||||
.ram-widget * {
|
||||
color: $yellow;
|
||||
font-size: $textsize;
|
||||
}
|
||||
.ram-util-progress {
|
||||
background-color: $inactive;
|
||||
}
|
||||
|
||||
.gpu-widget * {
|
||||
color: $cyan;
|
||||
font-size: $textsize;
|
||||
}
|
||||
.gpu-util-progress {
|
||||
background-color: $inactive;
|
||||
}
|
||||
|
||||
.cpu-widget * {
|
||||
color: $green;
|
||||
font-size: $textsize;
|
||||
}
|
||||
.cpu-util-progress {
|
||||
background-color: $inactive;
|
||||
}
|
||||
|
||||
.battery-widget * {
|
||||
color: $pink;
|
||||
font-size: $textsize;
|
||||
}
|
||||
.battery-util-progress {
|
||||
background-color: $inactive;
|
||||
}
|
||||
|
||||
.battery-charging {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.battery-warning {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.network-data-text {
|
||||
color: $green;
|
||||
font-size: $textsize;
|
||||
}
|
||||
|
||||
// <= 0% (Below MinUploadBytes)
|
||||
.network-up-under {
|
||||
color: $inactive;
|
||||
}
|
||||
// <= 25%
|
||||
.network-up-low {
|
||||
color: $green;
|
||||
}
|
||||
// <= 50%
|
||||
.network-up-mid-low {
|
||||
color: $yellow;
|
||||
}
|
||||
// <= 75%
|
||||
.network-up-mid-high {
|
||||
color: $orange;
|
||||
}
|
||||
// <= 100%
|
||||
.network-up-high {
|
||||
color: $purple;
|
||||
}
|
||||
// > 100% (Above MaxUploadBytes)
|
||||
.network-up-over {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
// <= 0% (Below MinDownloadBytes)
|
||||
.network-down-under {
|
||||
color: $inactive;
|
||||
}
|
||||
// <= 25%
|
||||
.network-down-low {
|
||||
color: $green;
|
||||
}
|
||||
// <= 50%
|
||||
.network-down-mid-low {
|
||||
color: $yellow;
|
||||
}
|
||||
// <= 75%
|
||||
.network-down-mid-high {
|
||||
color: $orange;
|
||||
}
|
||||
// <= 100%
|
||||
.network-down-high {
|
||||
color: $purple;
|
||||
}
|
||||
// > 100% (Above MaxDownloadBytes)
|
||||
.network-down-over {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.ws-dead {
|
||||
color: $inactive;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ws-inactive {
|
||||
color: $darkblue;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ws-visible {
|
||||
color: $cyan;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ws-current {
|
||||
color: $yellow;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ws-active {
|
||||
color: $green;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// Bluetooth Widget
|
||||
@keyframes connectanim {
|
||||
from {
|
||||
background-image: radial-gradient(circle farthest-side at center, $btblue 0%, transparent 0%, transparent 100%)
|
||||
}
|
||||
to {
|
||||
background-image: radial-gradient(circle farthest-side at center, $btblue 0%, $btblue 100%, transparent 100%)
|
||||
}
|
||||
}
|
||||
@keyframes disconnectanim {
|
||||
from {
|
||||
background-image: radial-gradient(circle farthest-side at center, transparent 0%, $btblue 0%, $btblue 100%)
|
||||
}
|
||||
to {
|
||||
background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, $btblue 100%)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanonanim {
|
||||
from {
|
||||
color: $yellow;
|
||||
}
|
||||
to {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
@keyframes scanoffanim {
|
||||
from {
|
||||
color: $green;
|
||||
}
|
||||
to {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.bt-bg {
|
||||
background-color: $bg;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.bt-header-box {
|
||||
margin-top: 4px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
font-size: 24px;
|
||||
color: $btblue;
|
||||
}
|
||||
.bt-body-box {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.bt-button {
|
||||
&.active {
|
||||
animation-name: connectanim;
|
||||
animation-duration: 50ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&.inactive {
|
||||
animation-name: disconnectanim;
|
||||
animation-duration: 50ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&.failed {
|
||||
color: $red;
|
||||
}
|
||||
border-radius: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
margin-bottom: 4px;
|
||||
margin-top: 4px;
|
||||
|
||||
font-size: 16px;
|
||||
// color: $green;
|
||||
}
|
||||
.bt-close {
|
||||
color: $red;
|
||||
background-color: $inactive;
|
||||
border-radius: 16px;
|
||||
padding: 0px 8px 0px 7px;
|
||||
margin: 0px 0px 0px 8px;
|
||||
}
|
||||
.bt-scan {
|
||||
&.active {
|
||||
animation-name: scanonanim;
|
||||
animation-duration: 50ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&.inactive {
|
||||
animation-name: scanoffanim;
|
||||
animation-duration: 50ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
color: $yellow;
|
||||
background-color: $inactive;
|
||||
border-radius: 16px;
|
||||
padding: 2px 11px 0px 7px;
|
||||
margin: 0px 0px 0px 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue