Skip to main content

LIBRARY_CSS

Constant LIBRARY_CSS 

Source
const LIBRARY_CSS: &str = r#"
@keyframes mimick-pulse {
    0%   { background-color: alpha(@view_fg_color, 0.06); }
    50%  { background-color: alpha(@view_fg_color, 0.14); }
    100% { background-color: alpha(@view_fg_color, 0.06); }
}

picture.mimick-thumbnail-loading {
    background-color: alpha(@view_fg_color, 0.08);
    animation: mimick-pulse 1.4s ease-in-out infinite;
}

picture.mimick-thumbnail-loaded {
}

picture.mimick-thumbnail-error {
    background-color: alpha(@error_color, 0.18);
}

overlay.mimick-cell {
}

box.mimick-empty {
    padding: 32px;
}

label.mimick-empty-title {
    font-size: 1.2em;
    font-weight: bold;
}

label.mimick-empty-subtitle {
    opacity: 0.65;
}

label.mimick-timeline-banner {
    font-size: 1.05em;
    font-weight: 600;
    padding: 4px 8px;
    background-color: alpha(@accent_bg_color, 0.10);
    border-bottom: 1px solid alpha(@view_fg_color, 0.10);
}

image.mimick-status-badge {
    opacity: 0.90;
    color: white;
    -gtk-icon-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

image.mimick-video-badge {
    opacity: 0.92;
    color: white;
    -gtk-icon-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

picture.mimick-person-avatar {
    border-radius: 9999px;
    background-color: alpha(@view_fg_color, 0.08);
}

picture.mimick-explore-tile,
overlay.mimick-explore-tile {
    border-radius: 6px;
    background-color: alpha(@view_fg_color, 0.08);
}

box.mimick-explore-spacer {
    min-width: 130px;
    min-height: 100px;
}

window.mimick-wide box.mimick-explore-spacer {
    min-width: 220px;
    min-height: 150px;
}

overlay.mimick-see-more-tile {
    border-radius: 6px;
    background-color: alpha(@view_fg_color, 0.06);
    border: 1px dashed alpha(@view_fg_color, 0.2);
}

box.mimick-stat-card {
    border-radius: 12px;
    padding: 14px;
    background: alpha(@accent_bg_color, 0.08);
}

box.mimick-stat-card.photo-card {
    background: alpha(#6a9fc7, 0.14);
}

box.mimick-stat-card.video-card {
    background: alpha(#d16c96, 0.14);
}

box.mimick-stat-card.storage-card {
    background: alpha(#7bb876, 0.14);
}

label.mimick-stat-value {
    font-size: 1.6em;
    font-weight: 800;
}

label.mimick-stat-label {
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.60;
}

progressbar.mimick-quota-bar trough {
    min-height: 6px;
    border-radius: 999px;
    background: alpha(@window_fg_color, 0.10);
}

progressbar.mimick-quota-bar progress {
    min-height: 6px;
    border-radius: 999px;
    background: mix(@accent_bg_color, #d16c96, 0.45);
}

box.mimick-version-badge {
    border-radius: 999px;
    padding: 4px 12px;
    background: alpha(@accent_bg_color, 0.12);
}

.mimick-masonry-canvas {
    background-color: @view_bg_color;
}

/* Hide the horizontal scrollbar on the search form.  hscrollbar_policy
   is Automatic (not Never) so the scrolled window's minimum width is
   decoupled from the wide AdwEntryRow children (~434px).  The scrollbar
   itself is never needed visually. */
scrolledwindow.mimick-search-scroll scrollbar.horizontal {
    min-height: 0;
    opacity: 0;
}

picture.mimick-grid-thumb {
    min-width: 80px;
    min-height: 60px;
}

window.mimick-wide picture.mimick-grid-thumb {
    min-width: 356px;
    min-height: 200px;
}

picture.mimick-thumbnail-square,
picture.mimick-thumbnail-square.mimick-thumbnail-loading,
picture.mimick-thumbnail-square.mimick-thumbnail-loaded,
picture.mimick-thumbnail-square.mimick-thumbnail-error {
    border-radius: 0;
}

box.mimick-transfer-shell {
    min-height: 36px;
    border-top: 1px solid alpha(@window_fg_color, 0.08);
    background: alpha(@window_fg_color, 0.03);
}

box.mimick-transfer-shell.active {
    background: alpha(@accent_bg_color, 0.04);
}

progressbar.mimick-transfer-progress {
    min-width: 100px;
    min-height: 18px;
}

progressbar.mimick-transfer-progress trough {
    min-height: 18px;
    border-radius: 999px;
    background: alpha(@window_fg_color, 0.12);
}

progressbar.mimick-transfer-progress progress {
    min-height: 18px;
    border-radius: 999px;
    background: mix(@accent_bg_color, #d16c96, 0.45);
}

/* ── Press feedback ───────────────────────────────────────────────
   Subtle scale-down on press for all interactive elements.
   GTK4 natively skips CSS transitions when gtk-enable-animations
   is off, so accessibility is respected automatically.

   Covers: header-bar buttons, dialog buttons, sidebar rows,
   settings switch/action/spin rows, lightbox actions, grid tiles,
   explore/album tiles, and any widget with .mimick-pressable.  */

button,
.mimick-pressable,
menubutton > button,
row.activatable {
    transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

button:active,
.mimick-pressable:active,
menubutton > button:active,
row.activatable:active {
    transform: scale(0.97);
    opacity: 0.88;
}

overlay.mimick-cell {
    transition: transform 80ms ease-out, opacity 80ms ease-out;
}

overlay.mimick-cell:active {
    transform: scale(0.96);
    opacity: 0.90;
}

picture.mimick-explore-tile,
overlay.mimick-explore-tile,
picture.mimick-person-avatar {
    transition: transform 80ms ease-out, opacity 80ms ease-out;
}

picture.mimick-explore-tile:active,
overlay.mimick-explore-tile:active,
picture.mimick-person-avatar:active {
    transform: scale(0.95);
    opacity: 0.88;
}

/* Details-pane group accents. The icon classes paint just the prefix icon,
   keeping the row text in the standard foreground for legibility. */
.mimick-detail-icon {
    min-width: 28px;
    min-height: 28px;
    padding: 6px;
    border-radius: 10px;
    margin: 2px 0;
    -gtk-icon-size: 16px;
}

.mimick-accent-camera {
    color: @accent_color;
    background-color: alpha(@accent_bg_color, 0.18);
}

.mimick-accent-image {
    color: @success_color;
    background-color: alpha(@success_bg_color, 0.20);
}

.mimick-accent-location {
    color: @warning_color;
    background-color: alpha(@warning_bg_color, 0.22);
}

scrolledwindow.mimick-details-pane {
    background: alpha(@window_bg_color, 0.30);
}

scrolledwindow.mimick-details-pane > viewport > box {
    padding: 4px;
}

/* Lightbox image-load spinner. The Mimick app icon eases in from slow
   rotation, accelerates through the middle of the cycle, then eases back
   out — giving the breathing rhythm requested for "ramp up / ramp down". */
@keyframes mimick-icon-spin {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(40deg); }
    50%  { transform: rotate(220deg); }
    80%  { transform: rotate(320deg); }
    100% { transform: rotate(360deg); }
}

image.mimick-loader-icon {
    opacity: 0.85;
    -gtk-icon-shadow: 0 2px 12px alpha(black, 0.45);
    animation: mimick-icon-spin 2.4s ease-in-out infinite;
}

picture.mimick-lightbox-picture {
    background-color: alpha(@view_fg_color, 0.05);
}

box.mimick-preview-unavailable {
    min-width: 240px;
    padding: 20px;
    border-radius: 8px;
    background-color: alpha(@window_bg_color, 0.92);
    border: 1px solid alpha(@view_fg_color, 0.16);
}

/* ── Drag-and-drop overlay ───────────────────────────────────────
   Shown when files are dragged over the window.  */

box.mimick-drop-overlay {
    background: alpha(@accent_bg_color, 0.50);
    border: none;
    border-radius: 0;
    margin: 0;
    transition: opacity 200ms ease-in-out;
}

box.mimick-drop-overlay image {
    -gtk-icon-size: 48px;
    opacity: 0.85;
    color: @accent_fg_color;
}

box.mimick-drop-overlay label {
    font-size: 1.1em;
    font-weight: 600;
    opacity: 0.9;
    color: @accent_fg_color;
}

/* ── Drag badge (multi-file count) ─────────────────────────────── */

box.mimick-drag-badge {
    background: @accent_bg_color;
    color: @accent_fg_color;
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: bold;
    font-size: 11px;
    min-width: 20px;
    min-height: 20px;
}

/* ── Album sidebar row drop-hover ──────────────────────────────── */

row.mimick-album-drop-hover {
    background: alpha(@accent_bg_color, 0.25);
    border-radius: 6px;
    transition: background 150ms ease-in-out, transform 150ms ease-in-out;
    transform: scale(1.03);
}
"#;