Modus/src/styles/widgets/desktop-widgets.css

#weather-container {
  margin: 0px;
  min-width: 170px;
  min-height: 170px;
  border-radius: apply(radius-lg);
  transition: all apply(transition-slow);
  background: @glass-widget;
  border: 1px solid @glass-border-soft;
}

/* Base Weather Layout */
#weather-widget {
  padding: 12px 14px;
}

#city {
  color: @glass-text;
  font-weight: 600;
  font-size: 18px;
}

#temperature {
  font-size: 64px;
  font-weight: 600;
  color: white;
  margin-top: -5px;
  margin-bottom: -5px;
}

#condition-emoji {
  margin-top: -2px;
}

#condition {
  font-size: apply(font-lg);
  font-weight: 600;
  color: white;
}

#feels-like {
  font-weight: 500;
  font-size: 15px;
  color: @glass-text;
}

/* Weather Condition Gradients */
.weather-clear {
  background: linear-gradient(135deg, @glass-accent 0%, @cyan 100%);
}

.weather-mostly-clear {
  background: linear-gradient(135deg, @glass-accent 0%, @glass-accent 100%);
}

.weather-partly-cloudy {
  background: linear-gradient(135deg, @glass-border 0%, #bac8e0 100%);
}

.weather-overcast {
  background: linear-gradient(135deg, @glass-surface-4 0%, @glass-surface-4 100%);
}

.weather-fog {
  background: linear-gradient(135deg, @glass-border 0%, @glass-text 100%);
}

.weather-light-rain {
  background: linear-gradient(135deg, @on-primary 0%, @glass-dialog 100%);
}

.weather-rain {
  background: linear-gradient(135deg, @glass-surface-3 0%, @on-tertiary 100%);
}

.weather-heavy-rain {
  background: linear-gradient(135deg, @surface 0%, @glass-dialog 100%);
}

.weather-snow,
.weather-heavy-snow {
  background: linear-gradient(135deg, @glass-success 0%, @cyan 100%);
}

.weather-storm {
  background: linear-gradient(135deg, @background 0%, @surface-bright 50%, @glass-border 100%);
}

/* Calendar Widget */
#calendar-box-widget {
  background: @glass-widget;
  margin: 0px;
  min-width: 170px;
  min-height: 170px;
  border-radius: apply(radius-lg);
  border: 1px solid @glass-border-soft;
}

#calendar-widget {
  margin: 5px 10px 0px 10px;
}

#calendar-month {
  font-size: apply(font-lg);
  font-weight: 600;
  color: @glass-accent;
  margin-bottom: 6px;
}

#calendar-days-header {
  margin-bottom: 4px;
}

#calendar-day-header {
  font-size: apply(font-sm);
  font-weight: 600;
  color: @glass-text;
  min-width: 18px;
  min-height: 10px;
}

#calendar-day-header-weekend {
  font-size: apply(font-sm);
  font-weight: 600;
  color: @glass-text-secondary;
  min-width: 18px;
  min-height: 10px;
}

#calendar-day {
  font-size: apply(font-sm);
  margin: 1.4px 0px 1.4px 0px;
  font-weight: 500;
  color: @glass-text;
  min-width: 18px;
  min-height: 10px;
}

#calendar-day-weekend {
  font-size: apply(font-sm);
  font-weight: 500;
  color: @glass-text-secondary;
  min-width: 18px;
  min-height: 16px;
}

#calendar-day-today {
  font-size: apply(font-sm);
  font-weight: 700;
  color: @on-primary;
  background-color: @glass-accent;
  border-radius: apply(radius-full);
  min-width: 18px;
  min-height: 16px;
  padding: 2px;
}

#calendar-day-empty {
  min-width: 18px;
  min-height: 16px;
}

#calendar-grid {
  margin-top: 2px;
}

/* Date Widget CSS */
#date-widget label {
  margin-top: 10px;
}

#day label,
#month label {
  color: @glass-text;
  padding: 5px;
  margin-top: 10px;
  font-size: 30px;
  color: @glass-text;
  font-weight: 600;
}

#date label {
  color: @glass-text;

  margin-top: -10px;
  font-size: 90px;
  font-weight: 600;
}

#day label {
  color: alpha(@glass-accent, 0.9);
}

#date-container {
  background: @glass-widget;
  margin: 0px;
  min-width: 170px;
  min-height: 170px;
  border-radius: apply(radius-lg);
  border: 1px solid @glass-border-soft;
}

/* System Info Widget CSS  */
#info-box-widget {
  background: @glass-widget;
  margin: 0px;
  min-width: 170px;
  min-height: 170px;
  border-radius: apply(radius-lg);
  border: 1px solid @glass-border-soft;
}

#progress-label {
  font-weight: 600;
  font-size: apply(font-md);
}

#progress {
  background-color: transparent;
  border: solid 8px @glass-accent;
}


/* Info text styling */
#info-text {
  font-size: apply(font-md);
  font-weight: 500;
  color: @glass-text-secondary;
  min-width: 32px;
}

#info-value {
  font-size: apply(font-sm);
  font-weight: 600;
  color: @glass-text;
}

#info-container {
  margin-left: -8px;
  margin-top: 5px;
}

#info {
  margin-left: -13px;
  margin-top: 5px;
  font-size: apply(font-base);
  font-weight: 600;
}

/* Desktop widget edit mode & DnD */
.edit-mode {
  border: 2px dashed @glass-accent;
  border-radius: apply(radius-lg);
  transition: all apply(transition-fast);
}

.edit-mode:hover {
  border-color: @glass-text;
  background-color: alpha(@glass-accent, 0.08);
}