Mercurial > gemma

comparison client/src/assets/application.css @ 5629:84d01a536bec 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Transformed scss and sass styles into css
author Luisa Beerboom <lbeerboom@intevation.de>
date Thu, 11 May 2023 13:23:52 +0200
parents client/src/assets/application.scss@7768f14f6535
children
comparison
equal deleted inserted replaced
5628:a985f8c46cf3 5629:84d01a536bec
1 /* This is Free Software under GNU Affero General Public License v >= 3.0;
2 * without warranty, see README.md and license for details.
3 *
4 * SPDX-License-Identifier: AGPL-3.0-or-later
5 * License-Filename: LICENSES/AGPL-3.0.txt
6 *
7 * Copyright (C) 2018 by via donau
8 * – Österreichische Wasserstraßen-Gesellschaft mbH
9 * Software engineering by Intevation GmbH
10 *
11 * Author(s):
12 * Thomas Junk <thomas.junk@intevation.de>
13 * Markus Kottländer <markus.kottlaender@intevation>
14 */
15 @import "tooltip.css";
16
17 :root {
18 --shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
19 --border-radius: 0.25rem;
20 --icon-height: 2rem;
21 --icon-width: 2rem;
22 --large-offset: 2rem;
23 --offset: 1rem;
24 --sidebar-width: 13rem;
25 --slight-transparent: 0.96;
26 --small-offset: 0.5rem;
27 --smaller: 0.9rem;
28 --transition-fast: 0.3s;
29 --x-large-offset: 3rem;
30 --xx-large-offset: 5rem;
31
32 --color-info: #17a2b8;
33 --color-info-h: 188;
34 --color-info-s: 78%;
35 --color-info-l: 41%;
36 }
37
38
39 ::placeholder {
40 color: #ccc !important;
41 font-size: smaller;
42 font-weight: bold;
43 }
44
45 html {
46 overflow: hidden;
47 }
48
49 a {
50 color: var(--color-info);
51 }
52
53 a:hover,
54 a:active,
55 a:focus {
56 color: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 13%));
57 }
58
59 .w-90 {
60 width: 90%;
61 }
62
63 .w-95 {
64 width: 95%;
65 }
66
67 .debug {
68 border: 1px solid red;
69 }
70
71 .debug2 {
72 border: 1px solid magenta;
73 }
74
75 .debug3 {
76 border: 1px solid greenyellow;
77 }
78
79 .header {
80 font-weight: bold;
81 font-size: 0.9em;
82 }
83
84 .ui-element {
85 pointer-events: auto;
86 }
87
88 .shadow-xs {
89 box-shadow: var(--shadow-xs);
90 }
91
92 .box {
93 opacity: var(--slight-transparent);
94 max-height: 0;
95 max-width: 0;
96 overflow: hidden;
97 margin: 0;
98 box-shadow: var(--shadow-xs);
99 transition: max-width 0.4s, max-height 0.4s, margin 0.4s;
100 }
101
102 .box h6,
103 .contextbox h6 {
104 color: var(--color-info);
105 font-weight: bold;
106 }
107
108 .box-control {
109 display: flex;
110 color: #888;
111 padding: 4px 7px;
112 border-radius: 0.25rem;
113 cursor: pointer;
114 transition: background-color 0.3s, color 0.3s;
115 }
116
117 .box-control .small {
118 padding: 4px;
119 }
120
121 .box-control:hover {
122 color: #666;
123 background-color: #eee;
124 }
125
126 .expanded {
127 max-height: 999px;
128 max-width: 999px;
129 margin: 0 0.05rem 0.5rem 0.25rem;
130 }
131
132 .box-body {
133 padding: 0.75rem;
134 text-align: left;
135 position: relative;
136 }
137
138 /* needed to fix the whitespace problem of
139 // https://github.com/Polyconseil/vue-gettext/issues/80;
140 // use like
141 // <a href="..">link</a>
142 // <span v-translate class="fix-trans-space">contributors.</span>
143 //
144 // done centrally, so we can fix it centrally for better vue-gettext version */
145 .fix-trans-space,
146 .fix-trans-space:before {
147 content: " ";
148 }
149
150 .closebutton {
151 position: absolute;
152 right: var(--offset);
153 }
154
155 .headline {
156 font-weight: bold;
157 }
158
159 .fade-enter-active,
160 .fade-leave-active {
161 transition: opacity 0.3s;
162 }
163 .fade-enter,
164 .fade-leave-to {
165 opacity: 0;
166 }
167
168 .pointer {
169 cursor: pointer;
170 }
171
172 .btn:disabled,
173 .btn.disabled {
174 opacity: 0.4;
175 }
176
177 .btn-xs {
178 padding: 0.3rem 0.4rem;
179 font-size: 0.75rem;
180 line-height: 1;
181 }
182
183 .snotifyToast {
184 text-align: left;
185 border-radius: 0.25rem;
186 box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
187 border-left: 0 !important;
188 }
189 .snotifyToast .snotifyToast__title {
190 font-size: 1.2rem;
191 }
192 .snotifyToast .snotifyToast__body {
193 white-space: pre-line;
194 }
195 .snotifyToast.snotify-info {
196 border-top: 4px solid var(--color-info);
197 }
198 .snotifyToast.snotify-info .snotify-icon--info {
199 background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E");
200 }
201 .snotifyToast.snotify-error {
202 border-top: 4px solid #f44336;
203 }
204
205 select.form-control-sm.small {
206 padding: 0.25rem 0.1rem;
207 font-size: 0.75rem;
208 }
209
210 input.form-control-sm.small {
211 padding: 0.25rem 0.2rem;
212 font-size: 0.75rem;
213 }
214
215 .truncate {
216 white-space: nowrap;
217 overflow: hidden;
218 text-overflow: ellipsis;
219 }
220
221 .wh-100 {
222 width: 100% !important;
223 height: 100% !important;
224 }
225
226 .wh-50 {
227 width: 50% !important;
228 height: 50% !important;
229 }
230
231 .custom-control-input:checked ~ .custom-control-label::before {
232 border-color: var(--color-info);
233 background-color: var(--color-info);
234 }