215 lines
4.5 KiB
CSS
215 lines
4.5 KiB
CSS
#bar {
|
|
padding: 0px 5px 0px 5px;
|
|
margin: 1px;
|
|
transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
|
|
background-color: var(--surface);
|
|
/* Bar background */
|
|
}
|
|
|
|
#start-container,
|
|
#center-container,
|
|
#end-container {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
#bar-corner * {
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
/**
|
|
* ── Workspace ─────────────────────────────────────────────────────────
|
|
*/
|
|
#workspaces {
|
|
font-style: normal;
|
|
background-color: var(--surface-container);
|
|
padding: 4px;
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/**
|
|
* ── Update ────────────────────────────────────────────────────────────
|
|
*/
|
|
#update {
|
|
background-color: var(--surface-container);
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
border-radius: 8px;
|
|
padding: 1px;
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
#update:hover {
|
|
background-color: var(--surface-bright);
|
|
}
|
|
|
|
#update:active {
|
|
color: var(--shadow);
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
#update-icon {
|
|
color: var(--primary);
|
|
font-size: 20px;
|
|
padding: 1px;
|
|
border-radius: 11px;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
#updated-icon {
|
|
color: var(--primary);
|
|
font-size: 20px;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
#update-label {
|
|
color: var(--primary);
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
padding: 0px;
|
|
margin-right: 4px;
|
|
border-radius: 8px;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
/**
|
|
* ── Clock ─────────────────────────────────────────────────────────────
|
|
*/
|
|
#datetime {
|
|
background-color: var(--surface-container);
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#datetime:hover {
|
|
background-color: var(--surface-bright);
|
|
}
|
|
|
|
/**
|
|
* ── Tray ──────────────────────────────────────────────────────────────
|
|
*/
|
|
#tray {
|
|
background-color: var(--surface-container);
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#tray > button {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
menu {
|
|
border: solid 1px var(--outline-variant);
|
|
border-radius: 16px;
|
|
background-color: var(--surface);
|
|
padding: 6px;
|
|
}
|
|
|
|
menu > menuitem {
|
|
border-radius: 10px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
menu > menuitem:hover {
|
|
background-color: var(--surface-bright);
|
|
}
|
|
|
|
menu > menuitem:hover > label {
|
|
color: var(--on-surface);
|
|
}
|
|
|
|
/**
|
|
* ── Logo ──────────────────────────────────────────────────────────────
|
|
*/
|
|
#button-bar {
|
|
background-color: var(--surface-container);
|
|
margin-top: 1px;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
margin-bottom: 1px;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
#button-bar-label {
|
|
color: var(--primary);
|
|
font-size: 24px;
|
|
border-radius: 8px;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
#button-bar:hover #button-bar-label {
|
|
background-color: var(--surface_bright);
|
|
}
|
|
|
|
#button-bar:active #button-bar-label {
|
|
color: var(--shadow);
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
/**
|
|
* ── System Indicator ─────────────────────────────────────────────────
|
|
*/
|
|
#system-indicator {
|
|
background-color: var(--surface-container);
|
|
margin-top: 1px;
|
|
padding: 4px;
|
|
margin-bottom: 1px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#system-indicator-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
#system-notif-label {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/**
|
|
* ── Metric ────────────────────────────────────────────────────────────
|
|
*/
|
|
#metrics {
|
|
background-color: var(--surface-container);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#metrics-circle {
|
|
color: var(--surface-bright);
|
|
border: 3px solid var(--primary);
|
|
}
|
|
|
|
#metrics-circle.bat {
|
|
border: 3px solid var(--green);
|
|
}
|
|
|
|
#metrics-circle.alert {
|
|
border: 3px solid var(--red-dim);
|
|
}
|
|
|
|
#metrics-icon {
|
|
font-size: 15px;
|
|
}
|
|
|
|
#metrics-icon.alert {
|
|
color: var(--red-dim);
|
|
}
|
|
|
|
#metrics-level {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#metrics-sep {
|
|
min-width: 6px;
|
|
}
|