initial commit

launcher/style.css

@@ -0,0 +1,181 @@
+/* Dull grey window background */
+window {
+  background-color: #18181b;
+  color: #f4f4f5;
+  font-family: sans-serif;
+}
+
+/* Large, prominent clock */
+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;
+}