mirror of
https://github.com/wekan/wekan.git
synced 2026-11-08 11:25:19 -05:00
Lauri Ojansivu
772ae061f1
Feedback fixes to the Select Color picker:
- Apply IMMEDIATELY on clicking a swatch (and when a custom-color wheel is
committed) via a shared applySelection(); removed the Save button/handler.
- Category titles (Flat/Clear/Dark/Special) are left-aligned and clear: both,
so they drop below the previous group swatches (which float: inline-start)
instead of the 2nd/3rd/4th title sitting mid-row.
- Remove the empty band above the first (Flat) title (first-child margin-top:0)
and tighten the Default row.
- Member Settings Change Color popup now has a header: added changeColorPopup-title
("Change Color" / fi "Vaihda väri"), matching Board Settings.
Tests updated in tests/themeColorPicker.test.cjs.
50 lines
1.9 KiB
CSS
50 lines
1.9 KiB
CSS
/* Custom theme colors (docs/Theme/Theme.md) — the flat/clear categories let the
|
|
* user pick their own colors, applied as CSS variables on :root by
|
|
* globalThemeColor.js and consumed here. This is the initial, highest-impact
|
|
* surface (the header bars, primary buttons, sidebar button); deeper theming can
|
|
* grow from here. dark/special themes never set these variables. */
|
|
|
|
/* Flat: a single accent recolors the header bars and primary controls. The class
|
|
* lives on <body>; #header / #header-quick-access are descendants. */
|
|
.has-custom-theme-color #header,
|
|
.has-custom-theme-color #header-quick-access {
|
|
background: var(--theme-accent) !important;
|
|
}
|
|
|
|
.has-custom-theme-color button[type=submit].primary,
|
|
.has-custom-theme-color input[type=submit].primary,
|
|
.has-custom-theme-color .sidebar .sidebar-content .sidebar-btn {
|
|
background-color: var(--theme-accent) !important;
|
|
}
|
|
|
|
/* Clear: a two-color slide (gradient) across the header bars. */
|
|
.has-custom-theme-slide #header,
|
|
.has-custom-theme-slide #header-quick-access {
|
|
background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2)) !important;
|
|
}
|
|
|
|
/* Select Color picker: category groups with a visible name above each group of
|
|
* colour swatches (docs/Theme/Theme.md). */
|
|
.theme-color-picker .theme-category-group {
|
|
margin-bottom: 8px;
|
|
clear: both; /* start below the previous group's floated swatches */
|
|
}
|
|
.theme-color-picker .theme-category-label {
|
|
display: block;
|
|
width: 100%;
|
|
clear: both; /* drop below the previous group's floats... */
|
|
text-align: left; /* ...so Flat/Clear/Dark/Special all sit at the left */
|
|
font-weight: bold;
|
|
margin: 2px 0 4px;
|
|
text-transform: capitalize;
|
|
}
|
|
/* No empty band above the first (Flat) title. */
|
|
.theme-color-picker .theme-category-group:first-child .theme-category-label {
|
|
margin-top: 0;
|
|
}
|
|
/* Tighten the Default (no override) row above the groups (Member Settings). */
|
|
.theme-color-picker ul.pop-over-list {
|
|
margin: 0 0 4px;
|
|
padding: 0;
|
|
}
|