Skip to content

Commit 481755b

Browse files
EkaterinaVuEkaterinaVu
committed
Green css theme moved to the separate file
1 parent 741ef64 commit 481755b

File tree

2 files changed

+267
-60
lines changed

2 files changed

+267
-60
lines changed

‎examples/questionnaire/branding.css‎

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/*
2-
Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
3-
https://www.ditdot.hr/en
4-
*/
5-
61
/*
72
basic theme color and font styles
83
*/
@@ -180,61 +175,6 @@ p.description,
180175
color: var(--secondary-text-color);
181176
}
182177

183-
/*
184-
vue.js like theme with green background
185-
*/
186-
187-
/*
188-
189-
:root {
190-
--bg-color: #41B883;
191-
--main-text-color: #fff;
192-
--secondary-text-color: #CFEDE0;
193-
--tertiary-text-color: #67C69C;
194-
--main-accent-color: #111;
195-
}
196-
197-
header{
198-
background-color: transparent;
199-
}
200-
201-
.f-footer .footer-inner-wrap{
202-
background-color: transparent;
203-
}
204-
205-
header svg.logo{
206-
fill: var(--main-accent-color);
207-
}
208-
209-
.v-form textarea,
210-
.v-form input,
211-
.v-form select option{
212-
color: var(--main-accent-color);;
213-
}
214-
215-
ul.f-radios li.f-selected, ul.f-radios li:active {
216-
border-color: var(--main-text-color);
217-
background-color: var(--tertiary-text-color);
218-
}
219-
220-
.text-alert,
221-
.f-invalid{
222-
color: red
223-
}
224-
225-
p.text-success{
226-
color: yellow;
227-
}
228-
229-
.f-progress-bar-inner {
230-
background-color: var(--main-accent-color);
231-
}
232-
.f-progress {
233-
opacity: 0.7;
234-
}
235-
*/
236-
237-
238178
/*
239179
dark mode styles
240180
*/

‎src/assets/css/themes/green-theme.css‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
/*
2+
Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
3+
https://www.ditdot.hr/en
4+
*/
5+
6+
/*
7+
vue.js like theme with green background
8+
*/
9+
10+
:root {
11+
--bg-color: #41B883;
12+
--main-text-color: #fff;
13+
--secondary-text-color: #CFEDE0;
14+
--tertiary-text-color: #67C69C;
15+
--main-accent-color: #111;
16+
--secondary-accent-color: #BBEBD5;
17+
}
18+
19+
body,
20+
textarea,
21+
input,
22+
select,
23+
select option {
24+
font-family: 'Poppins', sans-serif;
25+
}
26+
27+
body {
28+
background-color: var(--bg-color);
29+
color: var(--main-text-color);
30+
}
31+
/*header*/
32+
header {
33+
background-color: transparent;
34+
}
35+
36+
header svg.logo {
37+
fill: var(--main-accent-color);
38+
}
39+
/* footer */
40+
.f-footer .footer-inner-wrap {
41+
background-color: transparent;
42+
}
43+
44+
.v-form textarea,
45+
.v-form input,
46+
.v-form select option {
47+
color: var(--main-accent-color);
48+
}
49+
50+
.v-form input[type=text],
51+
.v-form input[type=number],
52+
.v-form input[type=tel],
53+
.v-form input[type=email],
54+
.v-form input[type=url],
55+
.v-form textarea,
56+
.v-form span.faux-form {
57+
border-bottom-color: var(--secondary-text-color);
58+
}
59+
60+
a,
61+
a:active {
62+
color: var(--main-text-color);
63+
}
64+
65+
/*placeholder*/
66+
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
67+
color: var(--secondary-text-color);
68+
opacity: 1;
69+
font-weight: 300;
70+
}
71+
72+
::-moz-placeholder { /* Firefox 19+ */
73+
color: var(--secondary-text-color);
74+
opacity: 1;
75+
font-weight: 300;
76+
}
77+
78+
:-ms-input-placeholder { /* IE 10+ */
79+
color: var(--secondary-text-color)!important;
80+
opacity: 1!important;
81+
font-weight: 300!important;
82+
}
83+
84+
:-moz-placeholder { /* Firefox 18- */
85+
color: #999;
86+
opacity: 1;
87+
font-weight: 300;
88+
}
89+
90+
/*field-multiplechoicetype*/
91+
ul.f-radios li {
92+
border: 1px solid var(--secondary-text-color);
93+
}
94+
95+
ul.f-radios li.f-other.f-selected input {
96+
color: inherit;
97+
}
98+
99+
ul.f-radios li.f-selected, ul.f-radios li:active {
100+
border-color: var(--main-text-color);
101+
background-color: var(--tertiary-text-color);
102+
}
103+
104+
.f-key{
105+
color: var(--secondary-text-color);
106+
}
107+
108+
/*field-dropdowntype*/
109+
span.f-empty {
110+
color: var(--secondary-text-color);
111+
}
112+
113+
span.f-answered{
114+
color: var(--main-text-color);
115+
}
116+
117+
.f-arrow-down svg {
118+
fill: var(--main-text-color);
119+
}
120+
121+
/*buttons*/
122+
.o-btn-action {
123+
color: var(--bg-color);
124+
background-color: var(--main-text-color);
125+
}
126+
127+
.o-btn-action:hover,
128+
.o-btn-action:focus {
129+
background-color: var(--main-text-color);
130+
opacity: .9;
131+
}
132+
133+
/* progress bar */
134+
.f-footer .f-prev svg,
135+
.f-footer .f-next svg {
136+
fill: var(--main-text-color);
137+
}
138+
139+
.f-progress {
140+
color: var(--secondary-text-color);
141+
}
142+
143+
.f-progress-bar {
144+
background-color: var(--secondary-text-color);
145+
filter: brightness(1.2);
146+
}
147+
148+
.f-progress-bar-inner {
149+
background-color: var(--main-accent-color);
150+
}
151+
152+
.f-progress {
153+
opacity: 0.7;
154+
}
155+
156+
.f-prev:hover,
157+
.f-next:hover{
158+
background-color: rgba(0,0,0,0.07);
159+
}
160+
161+
/*text-muted*/
162+
span.f-title,
163+
span.f-sub,
164+
p.description,
165+
.text-muted {
166+
color: var(--secondary-text-color);
167+
}
168+
169+
.text-alert,
170+
.f-invalid {
171+
color: red
172+
}
173+
174+
p.text-success {
175+
color: yellow;
176+
}
177+
178+
179+
/*
180+
dark mode styles
181+
*/
182+
183+
@media (prefers-color-scheme: dark) {
184+
:root {
185+
--bg-color: #313640;
186+
--main-text-color: #fff;
187+
--secondary-text-color: #AEB6BF;
188+
--tertiary-text-color: #41464F;
189+
--main-accent-color: #41B883;
190+
--secondary-accent-color: #A0DBC1;
191+
}
192+
193+
header{
194+
background-color: transparent;
195+
}
196+
197+
header svg.logo{
198+
fill: var(--main-accent-color);
199+
}
200+
201+
.v-form textarea,
202+
.v-form input,
203+
.v-form select option {
204+
color: var(--main-accent-color);
205+
}
206+
207+
span.f-answered{
208+
color: var(--main-accent-color);
209+
}
210+
211+
.f-arrow-down svg {
212+
fill: var(--main-accent-color);
213+
}
214+
215+
.text-success{
216+
color: var(--main-accent-color);
217+
}
218+
219+
/*footer*/
220+
.f-footer .footer-inner-wrap{
221+
background-color: var(--bg-color);
222+
}
223+
224+
.f-footer .f-prev svg,
225+
.f-footer .f-next svg {
226+
fill: var(--main-accent-color);
227+
}
228+
229+
.f-footer .f-prev.f-disabled svg,
230+
.f-footer .f-next.f-disabled svg {
231+
fill: var(--main-text-color);
232+
}
233+
234+
.f-footer .footer-inner-wrap{
235+
background-color: var(--bg-color);
236+
}
237+
238+
.f-prev:hover,
239+
.f-next:hover{
240+
background-color: rgba(0,0,0,0.2);
241+
}
242+
243+
.f-progress-bar {
244+
background-color: var(--secondary-text-color);
245+
filter: brightness(1);
246+
}
247+
248+
.f-progress-bar-inner {
249+
background-color: var(--main-accent-color);
250+
}
251+
252+
/*field-multiplechoicetype*/
253+
ul.f-radios li.f-selected{
254+
color: var(--main-accent-color);
255+
}
256+
257+
ul.f-radios li{
258+
font-weight: 900;
259+
color: var(--secondary-text-color);
260+
}
261+
262+
.f-key{
263+
font-weight: 400;
264+
color: var(--main-accent-color);
265+
}
266+
267+
}

0 commit comments

Comments
 (0)