thinlauncher/launcher/style.css

/* Dull grey window background */
window {
  background-color: #18181b;
  color: #f4f4f5;
  font-family: sans-serif;
}

/* Startup Messages */
.startup-message {
  padding: 32px;
}

.startup-message-title {
  font-size: 55px;
  font-weight: 700;
}

.startup-message-description {
  font-size: 28px;
  opacity: 0.7;
}

/* Large, prominent clock */
label.date-display {
    font-size: 28px;
    opacity: 0.75;
    margin-right: 16px;
}
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;
}