187 lines
3.8 KiB
CSS
187 lines
3.8 KiB
CSS
/* Dull grey window background */
|
|
window {
|
|
background-color: #18181b;
|
|
color: #f4f4f5;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
/* Large, prominent clock */
|
|
label.date-display {
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
color: #fafafa;
|
|
padding-right: 30px;
|
|
}
|
|
label.clock-display {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #fafafa;
|
|
}
|
|
|
|
/* Bottom status bar pill container */
|
|
box.status-bar {
|
|
background-color: rgba(24, 24, 27, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 12px;
|
|
padding: 10px 18px;
|
|
}
|
|
|
|
label.error-label {
|
|
color: #f87171;
|
|
font-weight: 600;
|
|
}
|
|
|
|
label.ok-label {
|
|
color: #4ade80;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Card Container */
|
|
/* Card Container */
|
|
button.image-card {
|
|
padding: 0px;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
min-width: 300px;
|
|
min-height: 160px;
|
|
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Explicitly round the inner picture/overlay container */
|
|
button.image-card overlay,
|
|
button.image-card picture,
|
|
button.image-card box {
|
|
border-radius: 15px;
|
|
}
|
|
|
|
button.image-card:focus,
|
|
button.image-card:hover,
|
|
button.image-card:active {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 0 2px #6366f1;
|
|
border-color: #6366f1;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Fallback background if asset path is missing */
|
|
.card-fallback-bg {
|
|
background-color: #27272a;
|
|
}
|
|
|
|
/* Dark gradient tint over the image for high text contrast */
|
|
.card-tint-overlay {
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(24, 24, 27, 0.95) 0%,
|
|
rgba(24, 24, 27, 0.5) 60%,
|
|
rgba(24, 24, 27, 0.15) 100%
|
|
);
|
|
}
|
|
|
|
.card-content-box {
|
|
padding: 16px;
|
|
}
|
|
|
|
/* Shadowed Typography for Image Backgrounds */
|
|
.card-title-shadowed {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.card-desc-shadowed {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #d4d4d8;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
|
|
/* Power Menu Button in the Status Bar - Pure Icon Only */
|
|
menubutton.flat {
|
|
background: transparent;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
}
|
|
|
|
menubutton.flat > button {
|
|
background: transparent;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
color: #a1a1aa;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 8px;
|
|
padding: 6px 12px; /* Expands the clickable hit target across the full box */
|
|
transition: all 200ms ease;
|
|
}
|
|
|
|
menubutton.flat:hover > button,
|
|
menubutton.flat > button:hover {
|
|
background-color: #27272a;
|
|
color: #ffffff;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* When the popover menu is open (:checked or :active) */
|
|
menubutton.flat:checked > button,
|
|
menubutton.flat:active > button,
|
|
menubutton.flat > button:checked,
|
|
menubutton.flat > button:active {
|
|
background-color: #3f3f46;
|
|
color: #ffffff;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Popover Container Styling */
|
|
popover > contents {
|
|
background-color: #18181b;
|
|
border: 1px solid #3f3f46;
|
|
border-radius: 12px;
|
|
padding: 4px;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Popover Action Buttons */
|
|
popover button {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
color: #f4f4f5;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 8px;
|
|
padding: 8px 16px;
|
|
font-weight: 500;
|
|
text-shadow: none;
|
|
transition: background-color 150ms ease;
|
|
}
|
|
|
|
popover button:hover {
|
|
background-color: #27272a;
|
|
color: #ffffff;
|
|
border: none;
|
|
}
|
|
|
|
popover button:active {
|
|
background-color: #3f3f46;
|
|
}
|
|
|
|
/* Shutdown Action Button */
|
|
popover button.error-label {
|
|
color: #f87171; /* Coral red for destructive shutdown action */
|
|
}
|
|
|
|
popover button.error-label:hover {
|
|
background-color: rgba(248, 113, 113, 0.15);
|
|
color: #fca5a5;
|
|
} |