From 5674688e02601e4cbb5545439b6862c8be03f1d9 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Tue, 21 Apr 2026 11:18:20 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20ajouter=20styles=20Background=20Studio?= =?UTF-8?q?=20panel=20avec=20layout=20fixed=20360px=C3=97560px=20max=20(pa?= =?UTF-8?q?nel-bg=20+=20border=20+=20shadow),=20header=20flex=20title/clos?= =?UTF-8?q?e-btn=2028px=20circle=20hover=2010%=20text-main,=20gallery=20sc?= =?UTF-8?q?rollable=20200px=20max=20avec=20thumbs=2058=C3=9744px=20border?= =?UTF-8?q?=202px=20primary=20active=20+=20shadow=20ring=2040%,=20color=20?= =?UTF-8?q?swatches=2022px=20dots=20avec=20scale=201.15=20hover=20+=20acti?= =?UTF-8?q?ve=20ring=20primary,=20filter=20buttons=2030px=20square=20avec?= =?UTF-8?q?=208%/12%=20mix=20hover/active,=20search=20bar=20bottom=20avec?= =?UTF-8?q?=20transparent=20input=20+=20clear=20button=2020px=20circle,=20?= =?UTF-8?q?et=20tokens=20s=C3=A9mantiques=20--special-view-*?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shaarli-pro/css/custom_views.css | 292 +++++++++++++++++++++++++++++++ 1 file changed, 292 insertions(+) diff --git a/shaarli-pro/css/custom_views.css b/shaarli-pro/css/custom_views.css index 2c0c252..68f2d18 100644 --- a/shaarli-pro/css/custom_views.css +++ b/shaarli-pro/css/custom_views.css @@ -1288,4 +1288,296 @@ body.view-notes .notes-masonry:empty::after { margin: 0; color: inherit; word-break: break-word; +} + +/* ========================================================= + Background Studio Panel — #shaarli-bg-studio + ========================================================= */ +.bg-studio-panel { + position: fixed; + z-index: 1200; + width: min(360px, calc(100vw - 24px)); + max-height: min(560px, calc(100vh - 24px)); + overflow: hidden; + display: flex; + flex-direction: column; + background: var(--special-view-panel-bg); + border: 1px solid var(--special-view-border); + border-radius: 14px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.12); + color: var(--special-view-strong); + font-family: inherit; + font-size: 0.9rem; +} + +/* Header row: title + close button */ +.bg-studio-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 12px 16px 8px; + flex-shrink: 0; + border-bottom: 1px solid var(--special-view-divider); +} + +.bg-studio-title { + font-weight: 600; + font-size: 0.95rem; + flex: 1; +} + +.bg-studio-close { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: none; + border-radius: 50%; + background: transparent; + color: inherit; + cursor: pointer; + padding: 0; + font-size: 1rem; + flex-shrink: 0; + transition: background 0.15s ease; +} + +.bg-studio-close:hover { + background: color-mix(in srgb, var(--text-main) 10%, transparent); +} + +/* Thumbnail gallery */ +.bg-studio-gallery { + overflow-y: auto; + flex: 0 1 auto; + max-height: 200px; + display: flex; + flex-wrap: wrap; + gap: 6px; + padding: 10px 14px; +} + +.bg-studio-tile { + display: flex; + flex-direction: column; + align-items: center; + gap: 3px; +} + +.bg-studio-thumb { + width: 58px; + height: 44px; + border-radius: 8px; + border: 2px solid transparent; + cursor: pointer; + padding: 0; + background-size: cover; + background-position: center; + overflow: hidden; + background-color: var(--special-view-panel-alt); + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} + +.bg-studio-thumb:hover { + border-color: var(--primary); +} + +.bg-studio-thumb.is-active { + border-color: var(--primary); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); +} + +.bg-studio-thumb-solid { + display: block; + width: 100%; + height: 100%; + background: var(--special-view-panel-alt); +} + +.bg-studio-thumb-label { + font-size: 0.65rem; + color: var(--special-view-muted); + text-align: center; + max-width: 58px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Color / filter rows section */ +.bg-studio-rows { + padding: 8px 14px 6px; + flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 8px; + border-bottom: 1px solid var(--special-view-divider); + overflow-y: auto; +} + +.bg-studio-row { + display: flex; + flex-direction: column; + gap: 5px; +} + +.bg-studio-row-heading { + display: flex; + align-items: center; + justify-content: space-between; +} + +.bg-studio-row-label { + font-size: 0.75rem; + font-weight: 600; + color: var(--special-view-muted); + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.bg-studio-reset { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border: none; + background: transparent; + color: var(--special-view-muted); + cursor: pointer; + padding: 0; + border-radius: 50%; + font-size: 0.9rem; + transition: background 0.15s ease, color 0.15s ease; +} + +.bg-studio-reset:hover { + background: color-mix(in srgb, var(--text-main) 10%, transparent); + color: var(--special-view-strong); +} + +/* Swatches (color dots) */ +.bg-studio-swatches { + display: flex; + flex-wrap: wrap; + gap: 5px; +} + +.bg-studio-swatch { + width: 22px; + height: 22px; + border-radius: 50%; + border: 2px solid transparent; + cursor: pointer; + padding: 0; + flex-shrink: 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); + transition: border-color 0.15s ease, transform 0.1s ease; +} + +.bg-studio-swatch:hover { + transform: scale(1.15); +} + +.bg-studio-swatch.is-active { + border-color: var(--primary); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); +} + +.bg-studio-swatch-custom { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--special-view-panel-alt); + border-color: var(--special-view-border); + font-size: 0.75rem; + color: var(--special-view-muted); +} + +/* Filter buttons */ +.bg-studio-filters { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.bg-studio-filter-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border: 1px solid var(--special-view-border); + border-radius: 8px; + background: transparent; + color: var(--special-view-muted); + cursor: pointer; + padding: 0; + font-size: 0.95rem; + transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; +} + +.bg-studio-filter-btn:hover { + background: color-mix(in srgb, var(--text-main) 8%, transparent); + color: var(--special-view-strong); +} + +.bg-studio-filter-btn.is-active { + background: color-mix(in srgb, var(--primary) 12%, transparent); + border-color: var(--primary); + color: var(--primary); +} + +/* Search bar at the bottom */ +.bg-studio-search { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 14px; + border-top: 1px solid var(--special-view-divider); + flex-shrink: 0; +} + +.bg-studio-search > i { + color: var(--special-view-muted); + font-size: 1rem; + flex-shrink: 0; +} + +.bg-studio-search-input { + flex: 1; + border: none; + background: transparent; + color: var(--special-view-strong); + font-family: inherit; + font-size: 0.85rem; + outline: none; + min-width: 0; +} + +.bg-studio-search-input::placeholder { + color: var(--special-view-muted); +} + +.bg-studio-clear { + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + border: none; + background: transparent; + color: var(--special-view-muted); + cursor: pointer; + padding: 0; + border-radius: 50%; + font-size: 0.85rem; + transition: background 0.15s ease, color 0.15s ease; +} + +.bg-studio-clear:hover { + background: color-mix(in srgb, var(--text-main) 10%, transparent); + color: var(--special-view-strong); } \ No newline at end of file