Project

General

Profile

« Previous | Next » 

Revision 61745

PRIVATE new look and feel to match the graph.openaire.eu layout

View differences:

develop-custom.css
1 1
:root {
2
    --portal-main-color: #DA65AB;
3
    --portal-main-contrast: white;
4
    --portal-dark-color: #4687E6;
5
    --openaire-main-color: #313179;
2
	--portal-main-color: #da65ab;
3
	--portal-main-contrast: white;
4
	--portal-dark-color: #4687e6;
5
	--openaire-main-color: #313179;
6 6

  
7
    --explore-portal-color: #D95F2D;
8
    --provide-portal-color: #37C7E9;
9
    --monitor-portal-color: #9ABB55;
10
    --connect-portal-color: #EBB13E;
11
    --develop-portal-color: #DA65AB;
7
	--explore-portal-color: #d95f2d;
8
	--provide-portal-color: #37c7e9;
9
	--monitor-portal-color: #9abb55;
10
	--connect-portal-color: #ebb13e;
11
	--develop-portal-color: #da65ab;
12 12

  
13
    --explore-portal-lower-tone: #a0462c;
14
    --provide-portal-lower-tone: #3A8FA3;
15
    --monitor-portal-lower-tone: #b48536;
16
    --connect-portal-lower-tone: #7c9144;
17
    --develop-portal-lower-tone: #9f4e7e;
18

  
13
	--explore-portal-lower-tone: #a0462c;
14
	--provide-portal-lower-tone: #3a8fa3;
15
	--monitor-portal-lower-tone: #b48536;
16
	--connect-portal-lower-tone: #7c9144;
17
	--develop-portal-lower-tone: #9f4e7e;
19 18
}
20 19

  
21

  
22 20
.custom-develop-li {
23
   background:var(--portal-main-color) !important;
21
	background: var(--portal-main-color) !important;
24 22
}
25 23

  
26
.custom-footer{
27
   position:relative;
28
   bottom:0;
29
   left:0;
24
.custom-footer {
25
	position: relative;
26
	bottom: 0;
27
	left: 0;
30 28
}
31 29

  
32 30
/* from library css */
33 31

  
34 32
.explore-heading-bullet::before {
35
    border-left-color: var(--explore-portal-color) !important;
33
	border-left-color: var(--explore-portal-color) !important;
36 34
}
37 35
.provide-heading-bullet::before {
38
    border-left-color: var(--provide-portal-color) !important;
36
	border-left-color: var(--provide-portal-color) !important;
39 37
}
40 38
.connect-heading-bullet::before {
41
    border-left-color: var(--connect-portal-color) !important;
39
	border-left-color: var(--connect-portal-color) !important;
42 40
}
43 41
.develop-heading-bullet::before {
44
    border-left-color: var(--develop-portal-color) !important;
42
	border-left-color: var(--develop-portal-color) !important;
45 43
}
46 44
.monitor-heading-bullet::before {
47
    border-left-color: var(--monitor-portal-color) !important;
45
	border-left-color: var(--monitor-portal-color) !important;
48 46
}
49 47

  
50

  
51

  
52 48
.explore .uk-h4 {
53
  color: var(--explore-portal-color);
54
  font-weight: bold;
49
	color: var(--explore-portal-color);
50
	font-weight: bold;
55 51
}
56 52

  
57 53
.explore .el-content {
58
  font-size: 18px;
54
	font-size: 18px;
59 55
}
60 56

  
61 57
.explore a {
62
  background-color: var(--explore-portal-color);
63
  color: #fff;
64
  font-weight: bold;
65
  border-color: var(--explore-portal-color);
58
	background-color: var(--explore-portal-color);
59
	color: #fff;
60
	font-weight: bold;
61
	border-color: var(--explore-portal-color);
66 62
}
67 63

  
68 64
.explore a:hover {
69
  background-color: var(--explore-portal-lower-tone);
70
  border-color: var(--explore-portal-lower-tone);
65
	background-color: var(--explore-portal-lower-tone);
66
	border-color: var(--explore-portal-lower-tone);
71 67
}
72 68
.provide .uk-h4 {
73
  color: var(--provide-portal-color);
74
  font-weight: bold;
69
	color: var(--provide-portal-color);
70
	font-weight: bold;
75 71
}
76 72

  
77 73
.provide .el-content {
78
  font-size: 18px;
74
	font-size: 18px;
79 75
}
80 76

  
81 77
.provide a {
82
  background-color: var(--provide-portal-color);
83
  color: #fff;
84
  font-weight: bold;
85
  border-color: var(--provide-portal-color);
78
	background-color: var(--provide-portal-color);
79
	color: #fff;
80
	font-weight: bold;
81
	border-color: var(--provide-portal-color);
86 82
}
87 83

  
88 84
.provide a:hover {
89
  background-color: var(--provide-portal-lower-tone);
90
  border-color: var(--provide-portal-lower-tone);
85
	background-color: var(--provide-portal-lower-tone);
86
	border-color: var(--provide-portal-lower-tone);
91 87
}
92 88

  
93 89
.monitor .uk-h4 {
94
  color: var(--monitor-portal-color);
95
  font-weight: bold;
90
	color: var(--monitor-portal-color);
91
	font-weight: bold;
96 92
}
97 93

  
98 94
.monitor .el-content {
99
  font-size: 18px;
95
	font-size: 18px;
100 96
}
101 97

  
102 98
.monitor a {
103
  background-color: var(--monitor-portal-color);
104
  color: #fff;
105
  font-weight: bold;
106
  border-color: var(--monitor-portal-color) ;
99
	background-color: var(--monitor-portal-color);
100
	color: #fff;
101
	font-weight: bold;
102
	border-color: var(--monitor-portal-color);
107 103
}
108 104

  
109 105
.monitor a:hover {
110
  background-color: var(--monitor-portal-lower-tone);
111
  border-color: var(--monitor-portal-lower-tone);
106
	background-color: var(--monitor-portal-lower-tone);
107
	border-color: var(--monitor-portal-lower-tone);
112 108
}
113 109

  
114 110
.connect .uk-h4 {
115
  color: var(--connect-portal-color);
116
  font-weight: bold;
111
	color: var(--connect-portal-color);
112
	font-weight: bold;
117 113
}
118 114

  
119 115
.connect .el-content {
120
  font-size: 18px;
116
	font-size: 18px;
121 117
}
122 118

  
123 119
.connect a {
124
  background-color: var(--connect-portal-color);
125
  color: #fff;
126
  font-weight: bold;
127
    border-color: var(--connect-portal-color) ;
120
	background-color: var(--connect-portal-color);
121
	color: #fff;
122
	font-weight: bold;
123
	border-color: var(--connect-portal-color);
128 124
}
129 125

  
130 126
.connect a:hover {
131
  background-color: var(--connect-portal-lower-tone);
132
  border-color: var(--connect-portal-lower-tone);
133

  
127
	background-color: var(--connect-portal-lower-tone);
128
	border-color: var(--connect-portal-lower-tone);
134 129
}
135 130

  
136 131
.develop .uk-h4 {
137
  color: var(--develop-portal-color);
138
  font-weight: bold;
132
	color: var(--develop-portal-color);
133
	font-weight: bold;
139 134
}
140 135

  
141 136
.develop .el-content {
142
  font-size: 18px;
137
	font-size: 18px;
143 138
}
144 139

  
145 140
.develop a {
146
  background-color: var(--develop-portal-color);
147
  color: #fff;
148
  font-weight: bold;
149
    border-color: var(--develop-portal-color) ;
141
	background-color: var(--develop-portal-color);
142
	color: #fff;
143
	font-weight: bold;
144
	border-color: var(--develop-portal-color);
150 145
}
151 146

  
152 147
.develop a:hover {
153
  background-color: var(--develop-portal-lower-tone) !important;
154
  border-color: var(--develop-portal-lower-tone);
148
	background-color: var(--develop-portal-lower-tone) !important;
149
	border-color: var(--develop-portal-lower-tone);
155 150
}
156
.portal-hr{
157
  border-bottom: 1px solid var(--portal-main-color) !important;
158
  padding: 5px 0px;
151
.portal-hr {
152
	border-bottom: 1px solid var(--portal-main-color) !important;
153
	padding: 5px 0px;
159 154
}
160 155

  
161
.tm-toolbar .uk-subnav-line li:hover, .tm-toolbar .uk-subnav li:hover {
162
    background:  var(--portal-main-color) !important;
156
.tm-toolbar .uk-subnav-line li:hover,
157
.tm-toolbar .uk-subnav li:hover {
158
	background: var(--portal-main-color) !important;
163 159
}
164 160

  
165
.tm-toolbar .uk-subnav-line li a:hover, .tm-toolbar .uk-subnav li a:hover, .tm-toolbar .uk-subnav-line li:hover a, .tm-toolbar .uk-subnav li:hover a {
166
  background:  var(--portal-main-color) !important;
167
  color:white !important;
161
.tm-toolbar .uk-subnav-line li a:hover,
162
.tm-toolbar .uk-subnav li a:hover,
163
.tm-toolbar .uk-subnav-line li:hover a,
164
.tm-toolbar .uk-subnav li:hover a {
165
	background: var(--portal-main-color) !important;
166
	color: white !important;
168 167
}
169 168

  
170

  
171
#footer\#9 a,  #footer\#11 a,  #footer\#13 a {
172
  color: #dedede;
173
  line-height: 22px;
174
  padding: 2px 0;
169
#footer\#9 a,
170
#footer\#11 a,
171
#footer\#13 a {
172
	color: #dedede;
173
	line-height: 22px;
174
	padding: 2px 0;
175 175
}
176 176

  
177
#footer\#9 a:hover,#footer\#11 a:hover, #footer\#13 a:hover {
178
    color: rgba(255, 255, 255, 0.5);
177
#footer\#9 a:hover,
178
#footer\#11 a:hover,
179
#footer\#13 a:hover {
180
	color: rgba(255, 255, 255, 0.5);
179 181
}
180 182

  
181 183
@media all and (min-width: 640px) {
184
	#footer\#3 {
185
		margin-right: 280px;
186
	}
187
}
182 188

  
183
  #footer\#3 {
184
      margin-right: 280px;
185
  }
189
#footer\#7 a {
190
	color: rgba(255, 255, 255, 0.7) !important;
191
	text-align: left;
192
	font-size: 14px;
193
}
186 194

  
195
/* More custom css to match Graph styles */
196

  
197
.tm-header .uk-navbar-transparent {
198
	padding-top: unset;
187 199
}
188 200

  
189
#footer\#7 a {
190
    color: rgba(255, 255, 255, 0.7) !important;
191
    text-align: left;
192
    font-size: 14px;
201
.uk-navbar-nav > li > a {
202
	font-size: 14px;
193 203
}
204

  
205
#footer\#5 {
206
	line-height: 21px;
207
}
208

  
209
.footer-light-background {
210
	color: #000;
211
	background-color: #fff;
212
}
213

  
214
.footer-light-background a {
215
	color: #000;
216
	background-color: #fff;
217
}
218

  
219
.uk-grid-small {
220
	margin-left: -15px;
221
}
222

  
223
.uk-grid-small > * {
224
	padding-left: 15px;
225
}
226

  
227
.uk-icon-button {
228
	border-color: rgba(0, 0, 0, 0.5);
229
}
230

  
231
.newsletter .el-title {
232
	font-size: 18px;
233
}
234

  
235
.newsletter .uk-icon {
236
	padding: 0;
237
}
238

  
239
.uk-totop {
240
	color: #444 !important;
241
	background-color: unset;
242
}
243

  
244
.uk-totop:active,
245
.uk-totop:hover {
246
	color: #000 !important;
247
	background-color: unset;
248
}
249

  
250
#footer\#22 {
251
	font-size: 14px;
252
}
253

  
254
#footer\#22 a:hover {
255
	text-decoration: underline;
256
}
257

  
258
/* more styles from graph - styles.css file */
259

  
260
/* You can add global styles to this file, and also import other style files */
261
/* @import "assets/common-assets/common/theme.css";
262
@import "assets/common-assets/common/custom.css";
263
@import "assets/common-assets/library.css"; */
264

  
265
:root {
266
	--portal-main-color: #ee2540;
267
	--portal-main-contrast: white;
268
	--portal-dark-color: #e63946;
269
	--explore-color: #d95f2d;
270
	--explore-dark-color: #a0462c;
271
}
272

  
273
.graphApp {
274
	background-color: #fafafa;
275
	color: #1a1a1a;
276

  
277
	min-height: calc(100vh - 100px);
278
	line-height: 25px;
279
	letter-spacing: 0.16px;
280
	font-size: 16px;
281
	/* font-family: 'Open Sans', sans-serif; */
282
}
283

  
284
.panel {
285
	border-radius: 15px;
286
	background-color: #fde8ea;
287
	color: #292929;
288
	font-size: 14px;
289
	padding: 20px;
290
}
291

  
292
.image-front-topbar {
293
	margin-top: -100px;
294
	padding-top: 100px;
295
}
296

  
297
/* main {
298
	min-height: calc(100vh - 100px);
299
	line-height: 25px;
300
	letter-spacing: 0.16px;
301
	font-size: 16px;
302
	font-family: 'Open Sans', sans-serif;
303
} */
304

  
305
.uk-text-large {
306
	font-size: 18px;
307
}
308

  
309
.uk-text-small {
310
	font-size: 14px;
311
	line-height: 20px;
312
	letter-spacing: 0;
313
}
314
/* Unordered list*/
315
ul.portal-circle {
316
	list-style: none;
317
	padding-left: 30px;
318
}
319

  
320
ul.portal-circle li {
321
	margin: 0 0 15px 0;
322
	position: relative;
323
}
324

  
325
ul.portal-circle.small li {
326
	margin: 0 0 5px 0;
327
	position: relative;
328
}
329

  
330
ul.portal-circle li:before {
331
	content: '';
332
	border: 5px var(--portal-main-color) solid !important;
333
	border-radius: 50px;
334
	line-height: 30px;
335
	margin-left: -20px;
336
	position: absolute;
337
	top: 10px;
338
}
339

  
340
ul.uk-text-small.portal-circle li:before {
341
	top: 6px;
342
}
343

  
344
.footer,
345
.footer .uk-section-primary {
346
	background-color: #ffffff;
347
	color: #000000 !important;
348
	font-family: 'Open Sans', sans-serif !important;
349
	font-size: 14px !important;
350
	font-weight: 400 !important;
351
}
352

  
353
.footer svg .stroke_line {
354
	stroke: #000000 !important;
355
}
356

  
357
.footer svg .fill_text {
358
	fill: #000000 !important;
359
}
360

  
361
.footer .uk-h6:not(.ignoreFooter),
362
.footer .uk-h5:not(.ignoreFooter),
363
.footer .uk-h4:not(.ignoreFooter),
364
.footer .uk-h3:not(.ignoreFooter),
365
.footer .uk-h2:not(.ignoreFooter),
366
.footer .uk-h1:not(.ignoreFooter) {
367
	color: #000000 !important;
368
}
369

  
370
.footer .uk-link:not(.ignoreFooter),
371
.footer a:not(.uk-button):not(.uk-button-text):not(.ignoreFooter) {
372
	color: #000000 !important;
373
	font-family: 'Open Sans', sans-serif !important;
374
	font-size: 14px !important;
375
}
376

  
377
.footer .uk-icon-button {
378
	border-color: rgba(0, 0, 0, 0.5);
379
}
380

  
381
.footer .uk-totop {
382
	background-color: #ffffff;
383
}
384

  
385
.footer .uk-totop svg {
386
	color: rgba(0, 0, 0, 0.5);
387
}
388

  
389
.footer .uk-totop:hover svg {
390
	color: black;
391
}
392

  
393
.footer .uk-link:not(.ignoreFooter):hover,
394
.footer a:not(.uk-button):not(.uk-button-text):not(.ignoreFooter):hover {
395
	color: #000000 !important;
396
}
397

  
398
.footer .uk-label:not(.ignoreFooter) a {
399
	border-color: #000000;
400
	border-bottom: 1px solid;
401
}
402

  
403
.footer .uk-label:not(.ignoreFooter) a:hover {
404
	border-color: rgba(0, 0, 0, 0.5);
405
}
406

  
407
.footer .uk-button:not(.ignoreFooter) {
408
	background-color: #ffffff !important;
409
	color: black !important;
410
	border-color: #ffffff !important;
411
	border-style: solid !important;
412
	border-width: 1px !important;
413
}
414

  
415
.footer .uk-button:not(.ignoreFooter):hover {
416
	background-color: #eeeeee !important;
417
	/*color: var(--portal-main-color) !important;*/
418
	color: black !important;
419
	border-color: #eeeeee !important;
420
}
421

  
422
.numbers-background {
423
	background: transparent url('/assets/graph-assets/home/5.svg') repeat-x center
424
		bottom;
425
}
426

  
427
.number {
428
	color: #1a1a1a;
429
}
430

  
431
a.number:hover,
432
a.number:focus,
433
a.number:active {
434
	color: #4687e6;
435
}
436

  
437
.uk-card {
438
	border-radius: 36px;
439
}

Also available in: Unified diff