-
Notifications
You must be signed in to change notification settings - Fork 96
Expand file tree
/
Copy pathdefault.css
More file actions
144 lines (139 loc) Ā· 6.57 KB
/
default.css
File metadata and controls
144 lines (139 loc) Ā· 6.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/** SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors */
/** SPDX-License-Identifier: AGPL-3.0-or-later */
: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;
--color-text-error: #bf0000;
--color-text-success: #066e03;
--color-border: #ededed;
--color-border-dark: #dbdbdb;
--color-border-maxcontrast: #7d7d7d;
--color-border-error: var(--color-element-error);
--color-border-success: var(--color-element-success);
--color-element-error: #c90000;
--color-element-info: #0077C7;
--color-element-success: #099f05;
--color-element-warning: #BF7900;
--color-error: #FFE7E7;
--color-error-hover: #ffc3c3;
--color-error-text: #8A0000;
--color-warning: #FFEEC5;
--color-warning-hover: #ffe4a1;
--color-warning-text: #664700;
--color-success: #D8F3DA;
--color-success-hover: #bdebc0;
--color-success-text: #005416;
--color-info: #D5F1FA;
--color-info-hover: #b5e6f6;
--color-info-text: #0066AC;
--color-favorite: #A37200;
--color-mark: #fff0c7;
--color-background-selection: rgb(from var(--color-primary-element) r g b / 0.2);
--color-text-selection: var(--color-main-text);
/** @deprecated use css color functions */
--color-error-rgb: 255,231,231;
/** @deprecated use css color functions */
--color-warning-rgb: 255,238,197;
/** @deprecated use css color functions */
--color-success-rgb: 216,243,218;
/** @deprecated use css color functions */
--color-info-rgb: 213,241,250;
--color-loading-light: #cccccc;
--color-loading-dark: #444444;
--color-scrollbar: var(--color-border-maxcontrast) transparent;
--color-box-shadow-rgb: 77,77,77;
--color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
/* Assistant colors */
/* Background for AI generated content */
--color-background-assistant: #F6F5FF;
/* Border for AI generated content */
--color-border-assistant: linear-gradient(125deg, #7398FE 50%, #6104A4 125%);
/* Background for primary buttons to interact with the Assistant (e.g. generate content) */
--color-element-assistant: linear-gradient(214deg, #A569D3 12%, #00679E 39%, #422083 86%);
/* Icon color only to be used for the Assistant icon */
--color-element-assistant-icon: linear-gradient(214deg, #9669D3 15%, #00679E 40%, #492083 80%);
--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;
--font-size-small: 13px;
/* Default text font weight */
--font-weight-default: 400;
/* Font weight for interactive elements */
--font-weight-element: 500;
/* Weight for titles and headings */
--font-weight-heading: 600;
/* 1.5 x font-size for accessibility */
--default-line-height: 1.5;
--animation-quick: 100ms;
--animation-slow: 300ms;
/** Border width for input elements such as text fields and selects */
--border-width-input: 1px;
--border-width-input-focused: 2px;
/* Border radii (new values) */
--border-radius-small: 4px; /* For smaller elements */
--border-radius-element: 8px; /* For interactive elements such as buttons, input, navigation and list items */
--border-radius-container: 12px; /* For smaller containers like action menus */
--border-radius-container-large: 16px; /* For larger containers like body or modals */
/* Border radii (deprecated) */
--border-radius: var(--border-radius-small);
--border-radius-large: var(--border-radius-element);
--border-radius-rounded: 28px;
--border-radius-pill: 100px;
--default-clickable-area: 34px;
--clickable-area-large: 48px;
--clickable-area-small: 24px;
--default-grid-baseline: 4px;
--header-height: 50px;
--header-menu-item-height: 44px;
/* An alpha mask to be applied to all icons on the navigation bar (header menu).
* Icons are have a size of 20px but usually we use MDI which have a content of 16px so 2px padding top bottom,
* for better gradient we must at first begin at those 2px (10% of height) as start and stop positions.
*/
--header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha;
--navigation-width: 300px;
--sidebar-min-width: 300px;
--sidebar-max-width: 500px;
/* Border radius of the body container */
--body-container-radius: var(--border-radius-container-large);
/* Margin of the body container */
--body-container-margin: calc(var(--default-grid-baseline) * 2);
/* Height of the body container to fully fill the view port */
--body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin));
--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-text: #ffffff;
--color-primary-hover: #3285b1;
--color-primary-element: #00679e;
--color-primary-element-hover: #00507a;
--color-primary-element-text: #ffffff;
--color-primary-element-text-dark: #ededed;
--color-primary-light: #e5eff5;
--color-primary-light-hover: #d9e3e8;
--color-primary-light-text: #00293f;
--color-primary-element-light: var(--color-primary-light);
--color-primary-element-light-text: var(--color-primary-light-text);
--color-primary-element-light-hover: var(--color-primary-light-hover);
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
--color-background-plain: #00679e;
--color-background-plain-text: #ffffff;
--image-background: url('./img/background/jo-myoung-hee-fluid.webp');
}