Skip to content
This repository was archived by the owner on Jun 21, 2022. It is now read-only.

Commit 636bd55

Browse files
committed
Update wrapper.tt to BS5, use now BS5 alerts for messages
1 parent fb95328 commit 636bd55

File tree

5 files changed

+251
-467
lines changed

5 files changed

+251
-467
lines changed

root/static/css/local_bootstrap_modifications.css

Lines changed: 12 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
21
/*
32
BOOSTRAP LOCAL CUSTOMIZATION
43
*/
54

6-
7-
/*
8-
highlight fontcolor to white in case of navbar-light
9-
*/
10-
.navbar-light .navbar-nav .active > .nav-link,
11-
.navbar-light .navbar-nav .nav-link.active,
12-
.navbar-light .navbar-nav .nav-link.show,
13-
.navbar-light .navbar-nav .show > .nav-link {
14-
color: rgba(220,220,220,1);
5+
:root {
6+
--cc-green: #4CAF50;
7+
--cc-green-dark: #3A8E3D;
8+
--cc-green-light: #6CBF6F;
159
}
1610

1711

12+
1813
/*
1914
redefined list -> non-indended
2015
*/
@@ -60,15 +55,6 @@ smaller font-size of text similar class small
6055
font-size: 65%;
6156
}
6257

63-
64-
65-
66-
input[type="number"] {
67-
text-align: left;
68-
}
69-
70-
71-
7258
/*===========================================================================
7359
align material icons vertical: https://stackoverflow.com/questions/56171473/different-material-icons-styles-do-not-align
7460
===========================================================================*/
@@ -95,50 +81,24 @@ input.with-markdown-preview {
9581
}
9682

9783

98-
/*===========================================================================
99-
overwrite behavior of navbar-dark nav-links
100-
===========================================================================*/
101-
102-
.navbar-dark .navbar-nav .nav-link {
103-
color: rgba(255, 255, 255, 0.99);
104-
}
105-
106-
.navbar-dark .navbar-nav .nav-link:hover,
107-
.navbar-dark .navbar-nav .nav-link:focus {
108-
color: rgba(255, 255, 255, 0.75);
109-
}
110-
111-
11284
/*===========================================================================
11385
login logout header color
11486
===========================================================================*/
115-
.login_logout input[name="logout"],
116-
.login_logout button,
117-
.login_logout a {
118-
background-color: rgba(255,255,255,0.0);
87+
.login-logout-btn {
88+
background-color: transparent;
11989
color: #333333;
12090
border: 0px;
121-
12291
-webkit-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
12392
-moz-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
12493
box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
12594
}
12695

127-
.login_logout input[name="logout"]:active,
128-
.login_logout input[name="logout"]:hover,
129-
.login_logout button:active,
130-
.login_logout button:hover,
131-
.login_logout a:active,
132-
.login_logout a:hover {
133-
color: #f5f5ef;
134-
background-color:rgba(255,255,255,0.0);
135-
border: 0px;
136-
137-
-webkit-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
138-
-moz-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
139-
box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
96+
.login-logout-btn:active,
97+
.login-logout-btn:hover,
98+
.login-logout-btn:focus {
99+
color: var(--bs-light);
140100
}
141101

142102
.bg-header {
143-
background-color: #4CAF50;
103+
background-color: var(--cc-green);
144104
}

root/static/css/style.css

Lines changed: 45 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -16,161 +16,69 @@ html {
1616
body {
1717
margin: 0;
1818
position: relative;
19-
height: 100%;
20-
color: #333333;
21-
}
22-
23-
#container {
24-
min-height: 100%;
25-
position: relative;
26-
}
27-
28-
/******** header part ********/
29-
30-
/*** general part ***/
31-
32-
header {
33-
margin: 0;
34-
background-color: #4CAF50;
35-
}
36-
37-
header nav ul {
38-
list-style-type: none;
39-
padding-left: 0;
40-
}
41-
42-
header nav li {
43-
display: inline;
44-
}
45-
46-
/* "Logout" must be button for POST request but style like link */
47-
header nav input[name="logout"]:hover,
48-
header nav input[name="logout"] {
49-
border: 0;
50-
font-family: inherit;
51-
font-size: inherit;
52-
cursor: pointer;
53-
}
54-
55-
/*
56-
* stop Firefox adding 2px to the submit button's height
57-
* see https://stackoverflow.com/questions/12288175/firefox-adds-2px-padding-in-a-submit-button
58-
*/
59-
header nav input[name="logout"]::-moz-focus-inner { border:0; padding:0 }
60-
61-
header h1 {
62-
font-size: 2.5em;
63-
}
64-
65-
header p {
66-
margin: 0;
67-
padding: 0 0.5em 0 0.5em;
68-
color: #f5f5ef;
69-
}
70-
71-
header p a[href] {
72-
color: #f5f5ef;
73-
}
74-
75-
/*** user nav ***/
76-
header #user_nav {
77-
height: 7em;
78-
padding: 0 1.5em 0 1.5em;
79-
display: flex;
80-
justify-content: space-between;
81-
}
82-
83-
header #h1-div {
84-
align-self: center;
85-
}
86-
87-
header #user_nav li {
88-
padding-left: 1em;
89-
}
90-
91-
header #user_nav a {
92-
padding: 0;
93-
}
94-
95-
header #user_nav h4 a:hover,
96-
header #user_nav h4 a:active {
97-
color: #333333;
98-
}
99-
100-
header #user_nav a:hover,
101-
header #user_nav a:active {
102-
color: #f5f5ef;
103-
}
104-
105-
header #user_nav ul {
19+
color: var(--bs-dark);
20+
min-height: 100vh;
10621
display: flex;
10722
flex-direction: column;
108-
align-items: flex-end;
10923
}
11024

111-
header #user_nav ul p + div {
112-
margin-top: 1em;
25+
a {
26+
text-decoration: none;
27+
color: var(--bs-dark);
11328
}
11429

115-
header #user_nav ul div:only-child {
116-
margin-top: 3em;
30+
a.hov-under:hover,
31+
a.hov-under:focus,
32+
button.alert-link:hover,
33+
button.alert-link:focus,
34+
a.alert-link:hover,
35+
a.alert-link:focus {
36+
text-decoration: underline;
11737
}
11838

119-
header #user_nav h4 {
120-
margin: 0;
121-
padding: 0 0.5em 0 0.5em;
122-
color: #f5f5ef;
123-
}
39+
/******** header part ********/
12440

125-
header #user_nav h4 a {
126-
color: #f5f5ef;
41+
/*** general part ***/
42+
header h1 {
43+
font-size: 2.5em;
12744
}
12845

129-
header nav input[name="logout"] {
130-
background-color: #4CAF50;
131-
color: #333333;
46+
header a {
47+
color: inherit;
13248
}
13349

134-
header nav input[name="logout"]:active,
135-
header nav input[name="logout"]:hover {
136-
color: #f5f5ef;
137-
138-
box-shadow: 0px 0px 0px grey !important;
50+
header a:hover,
51+
header a:focus {
52+
color: inherit;
13953
}
14054

14155
/*** project nav ***/
56+
#project_nav .nav-link {
57+
color: var(--bs-light);
58+
}
14259

143-
header #project_nav a:hover {
144-
background-color:#f5f5ef;
145-
color: #333333;
60+
#project_nav a:hover,
61+
#project_nav a:focus {
62+
background: var(--bs-light);
63+
color: var(--bs-dark);
14664
}
14765

14866
/*** submenu nav ***/
149-
header #submenu_nav a:hover,
150-
header #submenu_nav a.current {
151-
color: #f5f5ef !important;
67+
#submenu_nav a:hover,
68+
#submenu_nav a.active,
69+
#submenu_nav a:focus {
70+
color: var(--bs-light) !important;
71+
background: var(--cc-green-dark);
15272
}
15373

15474
/******** content part ********/
155-
156-
main {
157-
padding: 1.5em;
158-
padding-bottom: 12em; /*necessary for position of footer*/
75+
main a {
76+
color: var(--cc-green);
15977
}
16078

161-
a[href] {
162-
text-decoration:none;
163-
color: #333333;
164-
}
165-
166-
main a[href] {
167-
text-decoration:none;
168-
color: #4CAF50;
169-
}
170-
171-
main a[href]:hover,
172-
main a[href]:active {
173-
color: #333333;
79+
main a:hover,
80+
main a:focus {
81+
color: var(--bs-dark);
17482
}
17583

17684
a.btn-secondary {
@@ -202,18 +110,12 @@ code {
202110
padding: 0.25em;
203111
}
204112

205-
.message {
206-
border: 2px solid;
207-
border-radius: 0.5em;
208-
padding: 0 0.5em;
209-
margin: 0.5em 0;
113+
button.alert-link {
114+
background: transparent;
115+
border: none;
116+
padding: 0;
210117
}
211118

212-
.message-debug { background-color: #f5f5ef; color: DarkGrey; }
213-
.message-info { background-color: #dfd; color: DarkGreen; }
214-
.message-warn { background-color: orange; border-color: DarkOrange; color: black; }
215-
.message-error { background-color: #f55; border-color: DarkRed; color: black; }
216-
217119
.inline,
218120
.inline * {
219121
display: inline;
@@ -329,37 +231,11 @@ input[type=number].editable-content:not(:focus) {
329231
}
330232

331233
/******** footer part ********/
332-
333-
footer {
334-
background-color: #333333;
335-
color: #f5f5ef;
336-
position: absolute; /*necessary to position it at the bottom in all cases*/
337-
bottom: 0;
338-
width: 100%;
339-
padding: 0.5em 1em 0.5em 1em;
340-
margin: 0 auto;
341-
display: inline-block;
342-
line-height: 1.5;
343-
height: 12em; /*adjust if there are additional links in the footer*/
344-
}
345-
346-
footer nav ul {
347-
list-style-type: none;
348-
float: left;
349-
}
350-
351-
footer nav ul:first-child {
352-
padding-left: 10px;
353-
}
354-
355-
footer nav h4 {
356-
margin: 0;
357-
}
358-
359-
footer a[href] {
234+
footer a {
360235
color: inherit;
361236
}
362237

363-
footer a[href]:hover {
238+
footer a:hover {
364239
text-decoration: underline;
240+
color: inherit;
365241
}

0 commit comments

Comments
 (0)