replace the old dotfiles with the sakura line rice
The bare $HOME repo is gone. This is now the rice: install.sh, rice-* scripts in bin/, configs in home/ linked into $HOME, theme templates, st and the particle wallpaper. Clone to ~/rice and run install.sh. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BLLuuQfeDiqFHHSgd2VWrQ
This commit is contained in:
Sarthak
commit
4b203d06bd
104 changed files with 8077 additions and 0 deletions
217
home/.config/eww/eww.scss
Normal file
217
home/.config/eww/eww.scss
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
// Sakura Line - eww design system.
|
||||
// The same tokens as polybar, rofi and dunst: the theme's alpha, 1px border,
|
||||
// 12px radius, rows with an 8px radius and a 17% accent tint on hover.
|
||||
// colors.scss is a link to ~/.local/state/rice/theme/eww-colors.scss.
|
||||
@import "colors";
|
||||
|
||||
$tint: rgba($accent, 0.17);
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
font-family: $font, "Symbols Nerd Font";
|
||||
}
|
||||
|
||||
window, .closer { background-color: transparent; }
|
||||
|
||||
tooltip {
|
||||
background-color: rgba($bg, 0.95);
|
||||
border: $border-width solid $border;
|
||||
border-radius: $radius-small;
|
||||
padding: 6px 10px;
|
||||
color: $fg;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------ panel
|
||||
.panel {
|
||||
background-color: rgba($bg, $alpha);
|
||||
border: $border-width solid $border;
|
||||
border-radius: $radius;
|
||||
padding: 4px 8px 10px 8px;
|
||||
color: $fg;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.head {
|
||||
padding: 10px 10px 12px 10px;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: $border-width solid $border;
|
||||
}
|
||||
.title { font-weight: bold; font-size: 14px; }
|
||||
|
||||
.head-action {
|
||||
color: $dim;
|
||||
font-size: 15px;
|
||||
padding: 2px 7px;
|
||||
margin-left: 2px;
|
||||
border-radius: $radius-small;
|
||||
}
|
||||
.head-action:hover { color: $fg; background-color: $tint; }
|
||||
.head-action.active { color: $accent; }
|
||||
|
||||
.section {
|
||||
color: $dim;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 10px 10px 4px 10px;
|
||||
}
|
||||
|
||||
.sep {
|
||||
min-height: 1px;
|
||||
margin: 6px 4px;
|
||||
background-color: $border;
|
||||
}
|
||||
|
||||
.empty { color: $dim; padding: 8px 10px; }
|
||||
|
||||
// -------------------------------------------------------------------- rows
|
||||
.row {
|
||||
padding: 8px 10px;
|
||||
border-radius: $radius-small;
|
||||
}
|
||||
.row:hover { background-color: $tint; }
|
||||
.row.active .row-title, .row.active .glyph { color: $accent; }
|
||||
.row.dimmed .row-title, .row.dimmed .glyph { color: $dim; }
|
||||
|
||||
.glyph { font-size: 15px; min-width: 24px; margin-right: 10px; }
|
||||
.row-title { color: $fg; }
|
||||
.row-sub { color: $dim; font-size: 11px; margin-top: 1px; }
|
||||
.row-value { color: $dim; margin-left: 10px; }
|
||||
.chev { color: $dim; margin-left: 8px; font-size: 15px; }
|
||||
|
||||
.accent { color: $accent; }
|
||||
.urgent { color: $urgent; }
|
||||
.good { color: $green; }
|
||||
.warn { color: $yellow; }
|
||||
.dim { color: $dim; }
|
||||
|
||||
// ---------------------------------------------------------------- controls
|
||||
.slider-row:hover { background-color: transparent; }
|
||||
.slider-row .glyph { padding: 2px 0; border-radius: $radius-small; }
|
||||
.slider-row .glyph:hover { color: $accent; }
|
||||
.slider-value { min-width: 48px; }
|
||||
|
||||
scale trough {
|
||||
min-height: 6px;
|
||||
min-width: 140px;
|
||||
margin: 0 4px;
|
||||
border-radius: 3px;
|
||||
background-color: $selection;
|
||||
}
|
||||
scale highlight {
|
||||
border-radius: 3px;
|
||||
background-color: $accent;
|
||||
}
|
||||
scale slider {
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
margin: -3px;
|
||||
border-radius: 6px;
|
||||
background-color: $fg;
|
||||
}
|
||||
|
||||
.switch {
|
||||
min-width: 30px;
|
||||
min-height: 16px;
|
||||
padding: 2px;
|
||||
border-radius: 10px;
|
||||
background-color: $selection;
|
||||
}
|
||||
.switch.on { background-color: rgba($accent, 0.55); }
|
||||
.knob {
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
border-radius: 6px;
|
||||
background-color: $dim;
|
||||
}
|
||||
.switch.on .knob { background-color: $fg; }
|
||||
|
||||
.pill {
|
||||
padding: 4px 10px;
|
||||
margin: 0 3px;
|
||||
border-radius: $radius-small;
|
||||
color: $dim;
|
||||
}
|
||||
.pills { padding: 2px 6px 6px 6px; }
|
||||
.pill:hover { color: $fg; background-color: $tint; }
|
||||
.pill.active { color: $accent; background-color: $tint; }
|
||||
|
||||
.field {
|
||||
padding: 8px 10px;
|
||||
border-radius: $radius-small;
|
||||
background-color: rgba($surface, 0.8);
|
||||
color: $fg;
|
||||
caret-color: $accent;
|
||||
}
|
||||
|
||||
progressbar trough {
|
||||
min-height: 4px;
|
||||
border-radius: 2px;
|
||||
background-color: $selection;
|
||||
}
|
||||
progressbar progress {
|
||||
min-height: 4px;
|
||||
border-radius: 2px;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- calendar
|
||||
.cal-title { font-weight: bold; }
|
||||
.cal-grid { margin: 4px 4px 2px 4px; }
|
||||
.cal-dow, .cal-wk { color: $dim; font-size: 10px; font-weight: bold; min-height: 22px; }
|
||||
.cal-wk { min-width: 26px; }
|
||||
.cal-day {
|
||||
min-width: 34px;
|
||||
min-height: 30px;
|
||||
border-radius: $radius-small;
|
||||
color: $fg;
|
||||
}
|
||||
.cal-day:hover { background-color: $tint; }
|
||||
.cal-day.other { color: $muted; }
|
||||
.cal-day.weekend { color: $fg-alt; }
|
||||
.cal-day.selected { background-color: $tint; color: $accent; }
|
||||
.cal-day.today { background-color: $accent; color: $bg; font-weight: bold; }
|
||||
.cal-dot { color: $magenta; font-size: 8px; min-height: 8px; }
|
||||
.cal-day.today .cal-dot { color: $bg; }
|
||||
|
||||
.event-time { color: $accent; min-width: 52px; font-size: 12px; }
|
||||
.event-bar { min-width: 3px; border-radius: 2px; margin-right: 10px; background-color: $magenta; }
|
||||
.event-bar.reminder { background-color: $yellow; }
|
||||
|
||||
// ------------------------------------------------------------------- media
|
||||
.art {
|
||||
min-width: 72px;
|
||||
min-height: 72px;
|
||||
border-radius: $radius-small;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: $surface;
|
||||
}
|
||||
.media-title { font-weight: bold; }
|
||||
.media-artist { color: $dim; font-size: 12px; }
|
||||
.media-btn {
|
||||
font-size: 18px;
|
||||
padding: 4px 12px;
|
||||
border-radius: $radius-small;
|
||||
}
|
||||
.media-btn:hover { background-color: $tint; color: $accent; }
|
||||
.media-time { color: $dim; font-size: 10px; }
|
||||
|
||||
// ----------------------------------------------------------- notifications
|
||||
// The event box takes the hover tint; GTK ignores padding on event boxes,
|
||||
// so the box inside it carries the padding.
|
||||
.notif-hit { border-radius: $radius-small; }
|
||||
.notif-hit:hover { background-color: $tint; }
|
||||
.notif { padding: 8px 10px; }
|
||||
.notif.critical .notif-summary { color: $urgent; }
|
||||
.notif-app { color: $dim; font-size: 10px; font-weight: bold; }
|
||||
.notif-summary { font-weight: bold; }
|
||||
.notif-body { color: $fg-alt; font-size: 12px; }
|
||||
.notif-ago { color: $dim; font-size: 10px; }
|
||||
.notif-close {
|
||||
color: $dim;
|
||||
padding: 0 6px;
|
||||
border-radius: $radius-small;
|
||||
font-size: 13px;
|
||||
}
|
||||
.notif-close:hover { color: $urgent; background-color: rgba($urgent, 0.15); }
|
||||
Loading…
Add table
Add a link
Reference in a new issue