initial commit
This commit is contained in:
parent
f7cee9391e
commit
1e95f6533f
3 changed files with 1046 additions and 0 deletions
399
style.css
Normal file
399
style.css
Normal file
|
@ -0,0 +1,399 @@
|
|||
* {
|
||||
all: unset;
|
||||
font-family: "JetBrainsMono Nerd Font";
|
||||
}
|
||||
|
||||
.popup {
|
||||
background-color: #282a36;
|
||||
color: #50fa7b;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
menu {
|
||||
padding: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
.bar, tooltip {
|
||||
background-color: #282a36;
|
||||
border-radius: 16px;
|
||||
margin: 2px 1rem 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reboot-button {
|
||||
font-size: 28px;
|
||||
color: #6272a4;
|
||||
}
|
||||
|
||||
.sleep-button {
|
||||
font-size: 28px;
|
||||
color: #6272a4;
|
||||
}
|
||||
|
||||
.lock-button {
|
||||
font-size: 22px;
|
||||
color: #6272a4;
|
||||
}
|
||||
|
||||
.exit-button {
|
||||
font-size: 28px;
|
||||
color: #6272a4;
|
||||
}
|
||||
|
||||
.power-button {
|
||||
font-size: 25px;
|
||||
color: #ff5555;
|
||||
}
|
||||
|
||||
.system-confirm {
|
||||
color: #50fa7b;
|
||||
}
|
||||
|
||||
trough {
|
||||
border-radius: 3px;
|
||||
border-width: 1px;
|
||||
border-style: none;
|
||||
background-color: #44475a;
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
}
|
||||
|
||||
slider {
|
||||
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;
|
||||
min-width: 6px;
|
||||
min-height: 6px;
|
||||
}
|
||||
|
||||
.audio-icon {
|
||||
font-size: 24px;
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
.audio-volume {
|
||||
font-size: 16px;
|
||||
color: #ffb86c;
|
||||
}
|
||||
.audio-volume trough {
|
||||
background-color: #44475a;
|
||||
}
|
||||
.audio-volume slider {
|
||||
background-color: transparent;
|
||||
}
|
||||
.audio-volume highlight {
|
||||
background-color: #ffb86c;
|
||||
}
|
||||
|
||||
.mic-icon {
|
||||
font-size: 24px;
|
||||
color: #bd93f9;
|
||||
}
|
||||
|
||||
.mic-volume {
|
||||
font-size: 16px;
|
||||
color: #bd93f9;
|
||||
}
|
||||
.mic-volume trough {
|
||||
background-color: #44475a;
|
||||
}
|
||||
.mic-volume slider {
|
||||
background-color: transparent;
|
||||
}
|
||||
.mic-volume highlight {
|
||||
background-color: #bd93f9;
|
||||
}
|
||||
|
||||
.package-outofdate {
|
||||
margin: -5px -5px -5px -5px;
|
||||
font-size: 24px;
|
||||
color: #ff5555;
|
||||
}
|
||||
|
||||
.bt-num {
|
||||
font-size: 16px;
|
||||
color: #1793D1;
|
||||
}
|
||||
|
||||
.bt-label-on {
|
||||
font-size: 20px;
|
||||
color: #1793D1;
|
||||
}
|
||||
|
||||
.bt-label-off {
|
||||
font-size: 24px;
|
||||
color: #1793D1;
|
||||
}
|
||||
|
||||
.bt-label-connected {
|
||||
font-size: 28px;
|
||||
color: #1793D1;
|
||||
}
|
||||
|
||||
.disk-widget * {
|
||||
color: #bd93f9;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.disk-util-progress {
|
||||
background-color: #44475a;
|
||||
}
|
||||
|
||||
.vram-widget * {
|
||||
color: #ffb86c;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.vram-util-progress {
|
||||
background-color: #44475a;
|
||||
}
|
||||
|
||||
.ram-widget * {
|
||||
color: #f1fa8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ram-util-progress {
|
||||
background-color: #44475a;
|
||||
}
|
||||
|
||||
.gpu-widget * {
|
||||
color: #8be9fd;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.gpu-util-progress {
|
||||
background-color: #44475a;
|
||||
}
|
||||
|
||||
.cpu-widget * {
|
||||
color: #50fa7b;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cpu-util-progress {
|
||||
background-color: #44475a;
|
||||
}
|
||||
|
||||
.battery-widget * {
|
||||
color: #ff79c6;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.battery-util-progress {
|
||||
background-color: #44475a;
|
||||
}
|
||||
|
||||
.battery-charging {
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
.battery-warning {
|
||||
color: #ff5555;
|
||||
}
|
||||
|
||||
.network-data-text {
|
||||
color: #50fa7b;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.network-up-under {
|
||||
color: #44475a;
|
||||
}
|
||||
|
||||
.network-up-low {
|
||||
color: #50fa7b;
|
||||
}
|
||||
|
||||
.network-up-mid-low {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
.network-up-mid-high {
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
.network-up-high {
|
||||
color: #bd93f9;
|
||||
}
|
||||
|
||||
.network-up-over {
|
||||
color: #ff5555;
|
||||
}
|
||||
|
||||
.network-down-under {
|
||||
color: #44475a;
|
||||
}
|
||||
|
||||
.network-down-low {
|
||||
color: #50fa7b;
|
||||
}
|
||||
|
||||
.network-down-mid-low {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
.network-down-mid-high {
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
.network-down-high {
|
||||
color: #bd93f9;
|
||||
}
|
||||
|
||||
.network-down-over {
|
||||
color: #ff5555;
|
||||
}
|
||||
|
||||
.ws-dead {
|
||||
color: #44475a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ws-inactive {
|
||||
color: #6272a4;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ws-visible {
|
||||
color: #8be9fd;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ws-current {
|
||||
color: #f1fa8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ws-active {
|
||||
color: #50fa7b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes connectanim {
|
||||
from {
|
||||
background-image: radial-gradient(circle farthest-side at center, #1793D1 0%, transparent 0%, transparent 100%);
|
||||
}
|
||||
to {
|
||||
background-image: radial-gradient(circle farthest-side at center, #1793D1 0%, #1793D1 100%, transparent 100%);
|
||||
}
|
||||
}
|
||||
@keyframes disconnectanim {
|
||||
from {
|
||||
background-image: radial-gradient(circle farthest-side at center, transparent 0%, #1793D1 0%, #1793D1 100%);
|
||||
}
|
||||
to {
|
||||
background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, #1793D1 100%);
|
||||
}
|
||||
}
|
||||
@keyframes scanonanim {
|
||||
from {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
to {
|
||||
color: #50fa7b;
|
||||
}
|
||||
}
|
||||
@keyframes scanoffanim {
|
||||
from {
|
||||
color: #50fa7b;
|
||||
}
|
||||
to {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
}
|
||||
.bt-bg {
|
||||
background-color: #282a36;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.bt-header-box {
|
||||
margin-top: 4px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
font-size: 24px;
|
||||
color: #1793D1;
|
||||
}
|
||||
|
||||
.bt-body-box {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.bt-button {
|
||||
border-radius: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 4px;
|
||||
margin-top: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.bt-button.active {
|
||||
animation-name: connectanim;
|
||||
animation-duration: 50ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.bt-button.inactive {
|
||||
animation-name: disconnectanim;
|
||||
animation-duration: 50ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.bt-button.failed {
|
||||
color: #ff5555;
|
||||
}
|
||||
|
||||
.bt-close {
|
||||
color: #ff5555;
|
||||
background-color: #44475a;
|
||||
border-radius: 16px;
|
||||
padding: 0px 8px 0px 7px;
|
||||
margin: 0px 0px 0px 8px;
|
||||
}
|
||||
|
||||
.bt-scan {
|
||||
color: #f1fa8c;
|
||||
background-color: #44475a;
|
||||
border-radius: 16px;
|
||||
padding: 2px 11px 0px 7px;
|
||||
margin: 0px 0px 0px 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.bt-scan.active {
|
||||
animation-name: scanonanim;
|
||||
animation-duration: 50ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.bt-scan.inactive {
|
||||
animation-name: scanoffanim;
|
||||
animation-duration: 50ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
Loading…
Add table
Add a link
Reference in a new issue