contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Extract variables from html, add black theme to surveillance cameras, use svgs directly in the frontend

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-11-14 02:54:33 +01:00
parent 3183dec830
commit 3fdb84e481
26 changed files with 402 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

10
css/mobile.css
View file

@ -4,6 +4,8 @@ Contains tweaks for small screens
.only-on-mobile {
display: none;
background-color: var(--background-color);
color: var(--foreground-color);
}
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
@ -14,6 +16,8 @@ Contains tweaks for small screens
.only-on-mobile {
display: unset;
background-color: var(--background-color);
color: var(--foreground-color);
}
.hidden-on-mobile {
@ -22,6 +26,8 @@ Contains tweaks for small screens
#messagesbox {
display: none;
background-color: var(--background-color);
color: var(--foreground-color);
}
#help-button-mobile{
@ -57,15 +63,15 @@ Contains tweaks for small screens
#messagesboxmobile {
display: block;
position: absolute;
z-index: 10000;
background-color: white;
width: 100vw;
}
#welcomeMessage {
display: inline-block;
background-color: white;
background-color: var(--background-color);
border-radius: 0;
width: 100%;
max-width: 100%;

25
css/openinghourstable.css
View file

@ -5,7 +5,6 @@
text-align: center;
word-break: normal;
}
.oh-table th {
padding: 0;
margin: 0;
@ -34,22 +33,22 @@
}
.oh-timecell:hover {
background-color: #92b1ff !important;
background-color: var(--catch-detail-color) !important;
}
.oh-timecell-selected {
background-color: #0048ff;
background-color: var(--catch-detail-color);
}
.oh-timecell-half {
border-bottom: 1px solid #ddd;
background-color: aliceblue;
background-color: var(--subtle-detail-color);
}
.oh-timecell-half.oh-timecell-selected {
background-color: #0048ff;
background-color: var(--catch-detail-color);
}
.oh-table tr {
@ -75,12 +74,12 @@
}
.oh-timecol-selected {
border-right: #0048ff;
border-right: var(--catch-detail-color);
}
.oh-timecol-selected > span {
background-color: #0048ff;
color: white;
background-color: var(--catch-detail-color);
color: var(--background-color);
width: 100%;
display: block;
}
@ -96,11 +95,11 @@
}
.oh-timerow-selected .oh-timecell-0 {
border-left: 10px solid #0048ff !important;
border-left: 10px solid var(--catch-detail-color) !important;
}
.oh-timerow-selected .oh-timecell-6 {
border-right: 10px solid #0048ff !important;
border-right: 10px solid var(--catch-detail-color) !important;
}
@ -117,7 +116,7 @@
top: 0;
left: 0;
width: calc(100% - 4px);
background: #0048ff;
background: var(--catch-detail-color);
z-index: 1;
box-sizing: border-box;
}
@ -276,7 +275,7 @@
.ohviz-today {
background-color: #e5f5ff;
background-color: var(--subtle-detail-color);
}
.ohviz-weekday {
@ -290,7 +289,7 @@
}
.ohviz-container {
border: 0.5em solid #e5f5ff;
border: 0.5em solid var(--subtle-detail-color);
border-radius: 1em;
display: block;
}

42
css/tabbedComponent.css
View file

@ -7,7 +7,7 @@
flex-wrap: nowrap;
justify-content: flex-start;
align-items: start;
background-color: white;
background-color: var(--background-color);
max-width: 100vw;
overflow-x: auto;
}
@ -21,10 +21,19 @@
margin:auto;
}
.tab-single-header svg {
height: 3em;
max-width: 3em;
padding: 0.5em;
display:block;
margin:auto;
}
.tab-content {
z-index: 5002;
background-color: white;
background-color: var(--background-color);
color: var(--foreground-color);
position: relative;
padding: 1em;
display: inline-block;
@ -41,19 +50,36 @@
}
.tab-active {
background-color: white;
background-color: var(--background-color);
color: var(--foreground-color);
z-index: 5001;
box-shadow: 0 0 10px black;
border: 1px solid white;
box-shadow: 0 0 10px var(--shadow-color);
border: 1px solid var(--background-color);
min-width: 4em;
}
.tab-active svg {
fill: var(--foreground-color);
stroke: var(--foreground-color);
}
.tab-non-active {
background-color: #e5f5ff;
background-color: var(--subtle-detail-color);
color: var(--foreground-color);
opacity: 0.5;
border-left: 1px solid gray;
border-right:1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid lightgray;
min-width: 4em;
}
.tab-non-active svg {
fill: var(--foreground-color) !important;
stroke: var(--foreground-color) !important;
}
.tab-non-active svg path{
fill: var(--foreground-color) !important;
stroke: var(--foreground-color) !important;
}

27
css/tagrendering.css
View file

@ -30,7 +30,7 @@
.question {
display: block;
margin-top: 1em;
background-color: #e5f5ff;
background-color: var(--subtle-detail-color);
padding: 1em;
border-radius: 1em;
font-size: larger;
@ -72,7 +72,7 @@ input:checked + label .question-option-with-border {
.save {
display: inline-block;
border: solid white 2px;
background-color: #3a3aeb;
background-color: var(--catch-detail-color);
color: white;
padding: 0.2em 0.6em;
font-size: x-large;
@ -90,8 +90,8 @@ input:checked + label .question-option-with-border {
.login-button-friendly {
display: inline-block;
border: solid white 2px;
background-color: #3a3aeb;
color: white;
background-color:var(--catch-detail-color);
color: var(--catch-detail-color-contrast);
padding: 0.2em 0.6em;
font-size: large;
font-weight: bold;
@ -115,7 +115,24 @@ input:checked + label .question-option-with-border {
height: 1.3em;
padding: 0.5em;
border-radius: 0.65em;
border: solid black 1px;
border: solid var(--popup-border) 1px;
font-size: medium;
float: right;
}
.edit-button svg {
width: 1.3em;
height: 1.3em;
padding: 0.5em;
border-radius: 0.65em;
border: solid var(--popup-border) 1px;
stroke: var(--popup-border) !important;
fill: var(--popup-border) !important;
font-size: medium;
float: right;
}
.edit-button svg path{
stroke: var(--popup-border) !important;
fill: var(--popup-border) !important;
}

22
css/userbadge.css
View file

@ -1,6 +1,7 @@
#userbadge {
display: inline-block;
background-color: white;
background-color: var(--background-color);
color: var(--foreground-color);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
@ -15,7 +16,7 @@
#userbadge a {
text-decoration: none;
color: black;
color: var(--foreground-color);
}
@ -42,14 +43,19 @@
margin-bottom: 0.2em;
}
.userstats img {
.userstats svg {
width: 1em;
height: 1em;
fill: black;
border-radius: 0;
border-radius: 0;
display: block;
}
.userstats img {
width: 1em;
height: 1em;
border-radius: 0;
display: block;
}
#profile-pic {
float: left;
@ -76,7 +82,8 @@
height: 2.2em; /*SHould equal profile-pic height - padding*/
z-index: 5000;
text-align: left;
background-color: white;
background-color: var(--background-color);
color: var(--foreground-color);
background-size: 100%;
line-height: 0.75em;
@ -88,7 +95,8 @@
.userbadge-login {
font-weight: bold;
font-size: large;
background-color: #e5f5ff !important;
background-color: var(--subtle-detail-color) !important;
color: var(--subtle-detail-color-contrast);
height:3em;
display: inline-block;