feat: Ghost Shell v2 — AGS v3 statusbar + violet-chaton v2 palette
- AGS v3.1.0 (Astal/GTK3) Ghost Shell avec ghost mode (heartbeat + hover reveal) - Modules : clock, battery, volume (interactif), network, MPRIS, CPU/RAM, systray - Brain Power panel (Super + B) — lecture live focus/todos/session - tetardtek_ prompt avec curseur clignotant - Palette violet-chaton v2 documentée (Mitsuri Kanroji gradient magenta → green) - Autostart COSMIC via .desktop - Archive AGS v1 conservée pour référence
This commit is contained in:
Tetardtek-Cortex
385
ags-v1/css/style.css
Normal file
385
ags-v1/css/style.css
Normal file
@@ -0,0 +1,385 @@
|
||||
/* ── violet-chaton v2 — AGS stylesheet ────────────────────────────────────────
|
||||
*
|
||||
* Palette :
|
||||
* crust #1a0e27
|
||||
* base #261537
|
||||
* mantle #341c4a
|
||||
* surface0 #3d2454
|
||||
* surface1 #493161
|
||||
* surface2 #5a3875
|
||||
* magenta #ff4da6 accent primaire
|
||||
* lilac #c9a0ff accent secondaire
|
||||
* mitsuri #9adba8 vert pastel
|
||||
* lavande #a4b4ff bleu-violet
|
||||
* champagne #e8c87a or chaud
|
||||
* danger #f25c7a
|
||||
* text #f0eaf8
|
||||
* subtext1 #c4b8d4
|
||||
* subtext0 #9a8fad
|
||||
* muted #716686
|
||||
*
|
||||
* ─────────────────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* ── Reset ───────────────────────────────────────────────────────────────── */
|
||||
|
||||
* {
|
||||
font-family: "Maple Mono NF", "MapleMono Nerd Font", monospace;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
* BAR — 3 pills glassmorphism (island floating)
|
||||
* ══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.bar .modules-left,
|
||||
.bar .modules-center,
|
||||
.bar .modules-right {
|
||||
background: alpha(#261537, 0.88);
|
||||
border-radius: 14px;
|
||||
border: 3px solid alpha(#ff4da6, 0.60);
|
||||
margin: 8px 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.bar .modules-left:hover,
|
||||
.bar .modules-center:hover,
|
||||
.bar .modules-right:hover {
|
||||
border-color: #ff4da6;
|
||||
box-shadow: 0 4px 28px alpha(#c9a0ff, 0.18);
|
||||
}
|
||||
|
||||
/* ── Launcher button ─────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .launcher-btn {
|
||||
color: #ff4da6;
|
||||
font-size: 19px;
|
||||
padding: 0 14px 0 18px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.bar .launcher-btn:hover {
|
||||
color: #c9a0ff;
|
||||
}
|
||||
|
||||
/* ── Separator ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .separator {
|
||||
color: alpha(#f0eaf8, 0.12);
|
||||
font-size: 11px;
|
||||
padding: 0 4px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* ── Clock ───────────────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .clock {
|
||||
color: #ff4da6;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.bar .clock:hover {
|
||||
color: #c9a0ff;
|
||||
}
|
||||
|
||||
/* ── Date ────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .date {
|
||||
color: #a4b4ff;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
padding: 0 10px 0 2px;
|
||||
}
|
||||
|
||||
/* ── System modules ──────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .cpu { color: #a4b4ff; }
|
||||
.bar .cpu.warning { color: #e8c87a; }
|
||||
.bar .cpu.critical { color: #f25c7a; }
|
||||
|
||||
.bar .ram { color: #ff4da6; }
|
||||
.bar .ram.warning { color: #e8c87a; }
|
||||
.bar .ram.critical { color: #f25c7a; }
|
||||
|
||||
.bar .temp {
|
||||
color: alpha(#a4b4ff, 0.60);
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.bar .temp.warning { color: #e8c87a; }
|
||||
.bar .temp.critical { color: #f25c7a; }
|
||||
|
||||
/* ── Network ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .network {
|
||||
color: #a4b4ff;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.bar .network.disconnected { color: #f25c7a; }
|
||||
.bar .network.wifi { color: alpha(#a4b4ff, 0.80); }
|
||||
|
||||
/* ── Volume ──────────────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .volume { color: #ff4da6; }
|
||||
.bar .volume.muted { color: alpha(#ff4da6, 0.30); }
|
||||
|
||||
/* ── Battery ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .battery { color: #ff4da6; }
|
||||
.bar .battery.charging { color: #9adba8; }
|
||||
.bar .battery.low { color: #f25c7a; }
|
||||
.bar .battery.warning { color: #e8c87a; }
|
||||
|
||||
/* ── Media (MPRIS) ───────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .media {
|
||||
color: #c9a0ff;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.bar .media.paused {
|
||||
color: alpha(#c9a0ff, 0.50);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Systray ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .systray { padding: 0 8px; }
|
||||
.bar .systray .passive { opacity: 0.5; }
|
||||
|
||||
/* ── Workspaces (Hyprland only) ──────────────────────────────────────────── */
|
||||
|
||||
.bar .workspaces button {
|
||||
background: transparent;
|
||||
color: #716686;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
border-radius: 8px;
|
||||
margin: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bar .workspaces button.active {
|
||||
background: alpha(#ff4da6, 0.20);
|
||||
color: #ff4da6;
|
||||
border: 1px solid alpha(#ff4da6, 0.40);
|
||||
}
|
||||
|
||||
.bar .workspaces button.occupied {
|
||||
color: #c9a0ff;
|
||||
}
|
||||
|
||||
.bar .workspaces button:hover {
|
||||
background: alpha(#c9a0ff, 0.12);
|
||||
color: #c9a0ff;
|
||||
}
|
||||
|
||||
/* ── Power button ────────────────────────────────────────────────────────── */
|
||||
|
||||
.bar .power-btn {
|
||||
color: #f25c7a;
|
||||
font-size: 15px;
|
||||
padding: 0 14px 0 8px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.bar .power-btn:hover { color: #ff4da6; }
|
||||
|
||||
/* ── Hover global modules ────────────────────────────────────────────────── */
|
||||
|
||||
.bar .cpu:hover,
|
||||
.bar .ram:hover,
|
||||
.bar .temp:hover,
|
||||
.bar .network:hover,
|
||||
.bar .volume:hover,
|
||||
.bar .battery:hover {
|
||||
color: #c9a0ff;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
* OSD — volume / brightness overlay
|
||||
* ══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.osd {
|
||||
background: alpha(#261537, 0.92);
|
||||
border-radius: 14px;
|
||||
border: 2px solid alpha(#ff4da6, 0.40);
|
||||
padding: 12px 20px;
|
||||
margin: 0 0 40px 0;
|
||||
}
|
||||
|
||||
.osd .icon {
|
||||
color: #ff4da6;
|
||||
font-size: 24px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.osd progressbar trough {
|
||||
background: #3d2454;
|
||||
border-radius: 8px;
|
||||
min-height: 8px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.osd progressbar progress {
|
||||
border-radius: 8px;
|
||||
min-height: 8px;
|
||||
background: linear-gradient(to right, #ff4da6, #c9a0ff, #a4b4ff, #9adba8);
|
||||
}
|
||||
|
||||
.osd .label {
|
||||
color: #f0eaf8;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
* LAUNCHER — app search
|
||||
* ══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.launcher {
|
||||
background: alpha(#1a0e27, 0.94);
|
||||
border-radius: 14px;
|
||||
border: 2px solid alpha(#ff4da6, 0.38);
|
||||
padding: 10px;
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.launcher .search {
|
||||
background: alpha(#261537, 0.75);
|
||||
border-radius: 12px;
|
||||
border: 1px solid alpha(#5a3875, 0.50);
|
||||
padding: 9px 14px;
|
||||
color: #f0eaf8;
|
||||
caret-color: #ff4da6;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.launcher .search:focus {
|
||||
border-color: alpha(#ff4da6, 0.60);
|
||||
}
|
||||
|
||||
.launcher .app-item {
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
color: #f0eaf8;
|
||||
}
|
||||
|
||||
.launcher .app-item:hover,
|
||||
.launcher .app-item:focus {
|
||||
background: alpha(#ff4da6, 0.16);
|
||||
border: 1px solid alpha(#ff4da6, 0.32);
|
||||
}
|
||||
|
||||
.launcher .app-item:hover label,
|
||||
.launcher .app-item:focus label {
|
||||
color: #ff4da6;
|
||||
}
|
||||
|
||||
.launcher .app-item image {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.launcher .no-results {
|
||||
color: #716686;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
* NOTIFICATIONS
|
||||
* ══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.notification {
|
||||
background: alpha(#261537, 0.94);
|
||||
border-radius: 14px;
|
||||
border: 2px solid alpha(#c9a0ff, 0.30);
|
||||
padding: 12px;
|
||||
margin: 8px;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.notification .title {
|
||||
color: #ff4da6;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.notification .body {
|
||||
color: #c4b8d4;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.notification .app-name {
|
||||
color: #716686;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.notification .time {
|
||||
color: #716686;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.notification .close-btn {
|
||||
color: #716686;
|
||||
font-size: 14px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.notification .close-btn:hover {
|
||||
color: #f25c7a;
|
||||
background: alpha(#f25c7a, 0.12);
|
||||
}
|
||||
|
||||
.notification .actions button {
|
||||
background: alpha(#5a3875, 0.50);
|
||||
color: #c9a0ff;
|
||||
border-radius: 8px;
|
||||
padding: 4px 12px;
|
||||
margin: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.notification .actions button:hover {
|
||||
background: alpha(#ff4da6, 0.20);
|
||||
color: #ff4da6;
|
||||
}
|
||||
|
||||
/* ── Urgency levels ──────────────────────────────────────────────────────── */
|
||||
|
||||
.notification.critical {
|
||||
border-color: alpha(#f25c7a, 0.60);
|
||||
}
|
||||
|
||||
.notification.critical .title {
|
||||
color: #f25c7a;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
* TOOLTIP — shared
|
||||
* ══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
tooltip {
|
||||
background: alpha(#1a0e27, 0.96);
|
||||
border: 1px solid alpha(#ff4da6, 0.30);
|
||||
border-radius: 10px;
|
||||
color: #f0eaf8;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user