230 lines
3.5 KiB
CSS
230 lines
3.5 KiB
CSS
#bar-inner,
|
|
#bar-inner.pills {
|
|
margin: 8px;
|
|
opacity: 1;
|
|
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
#bar-inner.dense,
|
|
#bar-inner.edge,
|
|
#bar-inner.edge.vertical,
|
|
#bar-inner.edgecenter.vertical {
|
|
padding: 4px;
|
|
background-color: var(--shadow);
|
|
border-style: solid;
|
|
border-color: var(--surface);
|
|
}
|
|
|
|
#bar-inner.dense {
|
|
border-width: 2px;
|
|
}
|
|
|
|
#bar-inner.edge {
|
|
border-width: 0 0 2px 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* #bar-inner.edge.vertical { */
|
|
/* border-width: 0 2px 0 0; */
|
|
/* border-radius: 0; */
|
|
/* } */
|
|
|
|
#bar-inner.edge.bottom {
|
|
border-width: 2px 0 0 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#bar-inner.edge.vertical.right {
|
|
border-width: 0 0 0 2px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#bar-inner.edge.vertical.left {
|
|
border-width: 0 2px 0 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#bar-inner.edgecenter.vertical {
|
|
border-width: 2px;
|
|
border-left-width: 0;
|
|
border-radius: 0 16px 16px 0;
|
|
}
|
|
|
|
#bar-inner.edge.vertical.right {
|
|
border-width: 0 0 0 2px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#bar-inner.edgecenter.vertical.right {
|
|
border-width: 2px;
|
|
border-right-width: 0;
|
|
border-radius: 16px 0 0 16px;
|
|
}
|
|
|
|
#bar-inner.hidden {
|
|
margin: 8px;
|
|
margin-top: -40px;
|
|
opacity: 0;
|
|
}
|
|
|
|
#date-time {
|
|
background-color: var(--shadow);
|
|
min-height: 36px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
#date-time.vertical {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
#date-time.invert {
|
|
background-color: var(--surface);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
menu > menuitem > label,
|
|
#date-time > label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#language {
|
|
min-height: 36px;
|
|
background-color: var(--shadow);
|
|
padding: 0 8px;
|
|
}
|
|
|
|
#language.invert {
|
|
background-color: var(--surface);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
#lang-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#lang-label.icon {
|
|
color: var(--primary);
|
|
font-size: 20px;
|
|
}
|
|
|
|
#weather {
|
|
background-color: var(--shadow);
|
|
padding: 0 8px;
|
|
min-height: 36px;
|
|
}
|
|
|
|
#weather.invert {
|
|
background-color: var(--surface);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
#weather-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#systray {
|
|
background-color: var(--shadow);
|
|
padding: 8px;
|
|
}
|
|
|
|
#systray.invert {
|
|
background-color: var(--surface);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
menu {
|
|
border: solid 1px;
|
|
border-radius: 16px;
|
|
border-color: var(--surface);
|
|
background-color: var(--shadow);
|
|
padding: 6px;
|
|
}
|
|
|
|
menu > menuitem {
|
|
border-radius: 10px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
menu > menuitem:hover {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
menu > menuitem:hover > label {
|
|
color: var(--shadow);
|
|
}
|
|
|
|
tooltip {
|
|
border: solid 1px;
|
|
border-color: var(--surface);
|
|
background-color: var(--shadow);
|
|
animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
|
}
|
|
|
|
@keyframes tooltipShow {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
tooltip > * {
|
|
padding: 6px 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#button-bar {
|
|
padding: 4px;
|
|
min-width: 28px;
|
|
min-height: 28px;
|
|
background-color: var(--shadow);
|
|
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
#button-bar.invert {
|
|
background-color: var(--surface);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
#button-bar-label {
|
|
color: var(--primary);
|
|
font-size: 20px;
|
|
padding: 4px;
|
|
border-radius: 40px;
|
|
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
#button-bar:hover #button-bar-label {
|
|
border-radius: 12px;
|
|
background-color: var(--surface_bright);
|
|
}
|
|
|
|
#button-bar:active #button-bar-label {
|
|
border-radius: 40px;
|
|
color: var(--shadow);
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
#corner {
|
|
background-color: var(--shadow);
|
|
border-radius: 0;
|
|
}
|
|
|
|
#corner-container {
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
#button-corner {
|
|
border-radius: 0px;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
#notch,
|
|
#bar {
|
|
border-radius: 0px;
|
|
}
|