mirror of
https://github.com/nextcloud/server.git
synced 2026-02-19 02:38:40 -05:00
de938bb401
While the primary color is intended to highlight elements, it can not always be used as the background color. So now primary is independent from background a user set, the background color is, if not set directly, calculated as the mean color of the background image. That color is then used as a fallback if the background image could not be loaded and for calculating the color of the text used on the app menu and dashboard (they render directly on the background). Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
91 lines
3.8 KiB
CSS
91 lines
3.8 KiB
CSS
:root {
|
|
--color-main-background: #ffffff;
|
|
--color-main-background-rgb: 255,255,255;
|
|
--color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
|
|
--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
|
|
--filter-background-blur: blur(25px);
|
|
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
|
|
--color-background-hover: #f5f5f5;
|
|
/** Can be used e.g. to colorize selected table rows */
|
|
--color-background-dark: #ededed;
|
|
/** This should only be used for elements, not as a text background! Otherwise it will not work for accessibility. */
|
|
--color-background-darker: #dbdbdb;
|
|
--color-placeholder-light: #e6e6e6;
|
|
--color-placeholder-dark: #cccccc;
|
|
--color-main-text: #222222;
|
|
--color-text-maxcontrast: #6b6b6b;
|
|
--color-text-maxcontrast-default: #6b6b6b;
|
|
--color-text-maxcontrast-background-blur: #595959;
|
|
/** @deprecated use ` --color-main-text` instead */
|
|
--color-text-light: var(--color-main-text);
|
|
/** @deprecated use `--color-text-maxcontrast` instead */
|
|
--color-text-lighter: var(--color-text-maxcontrast);
|
|
--color-scrollbar: rgba(34,34,34, .15);
|
|
--color-error: #DB0606;
|
|
--color-error-rgb: 219,6,6;
|
|
--color-error-hover: #df2525;
|
|
--color-error-text: #c20505;
|
|
--color-warning: #A37200;
|
|
--color-warning-rgb: 163,114,0;
|
|
--color-warning-hover: #8a6000;
|
|
--color-warning-text: #7f5900;
|
|
--color-success: #2d7b41;
|
|
--color-success-rgb: 45,123,65;
|
|
--color-success-hover: #428854;
|
|
--color-success-text: #286c39;
|
|
--color-info: #0071ad;
|
|
--color-info-rgb: 0,113,173;
|
|
--color-info-hover: #197fb5;
|
|
--color-info-text: #006499;
|
|
--color-favorite: #A37200;
|
|
--color-loading-light: #cccccc;
|
|
--color-loading-dark: #444444;
|
|
--color-box-shadow-rgb: 77,77,77;
|
|
--color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
|
|
--color-border: #ededed;
|
|
--color-border-dark: #dbdbdb;
|
|
--color-border-maxcontrast: #7d7d7d;
|
|
--font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--default-font-size: 15px;
|
|
--animation-quick: 100ms;
|
|
--animation-slow: 300ms;
|
|
--border-radius: 3px;
|
|
--border-radius-large: 10px;
|
|
--border-radius-rounded: 28px;
|
|
--border-radius-pill: 100px;
|
|
--default-clickable-area: 44px;
|
|
--default-line-height: 24px;
|
|
--default-grid-baseline: 4px;
|
|
--header-height: 50px;
|
|
--navigation-width: 300px;
|
|
--sidebar-min-width: 300px;
|
|
--sidebar-max-width: 500px;
|
|
--list-min-width: 200px;
|
|
--list-max-width: 300px;
|
|
--header-menu-item-height: 44px;
|
|
--header-menu-profile-item-height: 66px;
|
|
--breakpoint-mobile: 1024px;
|
|
--background-invert-if-dark: no;
|
|
--background-invert-if-bright: invert(100%);
|
|
--background-image-invert-if-bright: no;
|
|
--primary-invert-if-bright: no;
|
|
--primary-invert-if-dark: invert(100%);
|
|
--color-primary: #00679e;
|
|
--color-primary-default: #0082c9;
|
|
--color-primary-text: #ffffff;
|
|
--color-primary-hover: #3285b1;
|
|
--color-primary-light: #e5eff5;
|
|
--color-primary-light-text: #00293f;
|
|
--color-primary-light-hover: #dbe4ea;
|
|
--color-primary-element: #00679e;
|
|
--color-primary-element-hover: #005a8a;
|
|
--color-primary-element-text: #ffffff;
|
|
--color-primary-element-text-dark: #f5f5f5;
|
|
--color-primary-element-light: #e5eff5;
|
|
--color-primary-element-light-hover: #dbe4ea;
|
|
--color-primary-element-light-text: #00293f;
|
|
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
|
|
--image-background-default: url('/apps/theming/img/background/kamil-porembinski-clouds.jpg');
|
|
--color-background-plain: #0082c9;
|
|
--color-background-plain-text: #ffffff;
|
|
}
|