almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-28 19:42:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: update colors

Browse source 
Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-04-14 17:45:11 +02:00
parent 82dcd90405
commit ae4e7eb3e2
3 changed files with 50 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
umap/static/umap/css/form.css
View file

@ -6,7 +6,7 @@ input[type="text"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="email"], input[type="number"], input[type="datetime-local"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"], input[type="file"], input[type="search"], input[type="tel"], input[type="time"], input[type="file"],
input[type="url"], textarea { input[type="url"], textarea {
background-color: white; background-color: var(--color-light);
border: 2px solid var(--color-darkBlue); border: 2px solid var(--color-darkBlue);
color: var(--text-color); color: var(--text-color);
display: block; display: block;
@ -47,7 +47,7 @@ input[type=checkbox]:checked:after {
} }
input[data-modified=true] { input[data-modified=true] {
background-color: var(--color-lightCyan); background-color: var(--color-lightCyan);
border: 1px solid var(--color-darkGray); border: 1px solid var(--color-veryDarkGray);
} }
input + select, input + select,
select + input, select + input,
@ -71,7 +71,7 @@ select {
.dark select { .dark select {
color: var(--text-color); color: var(--text-color);
background-color: var(--color-darkGray); background-color: var(--color-darkGray);
border-color: var(--color-dark); border-color: var(--color-veryDarkGray);
border-width: 1px; border-width: 1px;
} }
select[multiple="multiple"] { select[multiple="multiple"] {
@ -89,7 +89,7 @@ input[type="submit"] {
text-decoration: none; text-decoration: none;
justify-content: center; justify-content: center;
background-color: var(--color-darkBlue); background-color: var(--color-darkBlue);
color: white; color: var(--color-light);
font-weight: normal; font-weight: normal;
min-height: 40px; min-height: 40px;
} }
@ -97,21 +97,21 @@ input[type="submit"] {
.dark [type="button"] { .dark [type="button"] {
background-color: var(--color-darkerGray); background-color: var(--color-darkerGray);
color: var(--text-color); color: var(--text-color);
border: 1px solid #1b1f20; border: 1px solid var(--color-veryDarkGray);
} }
.button.primary { .button.primary {
font-weight: bold; font-weight: bold;
} }
.dark .button.primary:not([disabled]), .dark .button.primary:not([disabled]),
.dark [type="button"].primary:not([disabled]) { .dark [type="button"].primary:not([disabled]) {
background-color: var(--color-brightCyan); background-color: var(--color-verySoftCyan);
color: var(--color-dark); color: var(--color-dark);
border: 1px solid #1b1f20; border: 1px solid var(--color-veryDarkGray);
} }
.dark .button:hover, .dark .button:hover,
.dark [type="button"]:hover, .dark [type="button"]:hover,
.dark input[type="submit"]:hover { .dark input[type="submit"]:hover {
background-color: #2e3436; background-color: var(--color-darkerGray);
} }
.dark a { .dark a {
color: var(--text-color); color: var(--text-color);
@ -151,14 +151,14 @@ button.round.small {
display: block; display: block;
padding: 7px 7px; padding: 7px 7px;
margin-bottom: 14px; margin-bottom: 14px;
background: #393F3F; background: var(--color-mediumGray);
color: var(--color-lightGray); color: var(--color-lightGray);
font-size: 10px; font-size: 10px;
border-radius: 0 2px; border-radius: 0 2px;
} }
.content .helptext { .content .helptext {
background-color: #eee; background-color: var(--color-lightGray);
color: #000; color: var(--color-dark);
} }
input + .help-text { input + .help-text {
margin-top: -14px; margin-top: -14px;
@ -205,8 +205,8 @@ input + .error {
margin-top: -14px; margin-top: -14px;
margin-bottom: 14px; margin-bottom: 14px;
background: var(--color-lightGray); background: var(--color-lightGray);
color: #fff; color: var(--color-light);
background-color: #cc0000; background-color: var(--color-red);
font-size: 11px; font-size: 11px;
border-radius: 0 2px; border-radius: 0 2px;
} }
@ -214,14 +214,14 @@ input[type="file"] + .error {
margin-top: 0; margin-top: 0;
} }
input[value]:invalid { input[value]:invalid {
border-color: red; border-color: var(--color-red);
background-color: darkred; background-color: var(--color-darkRed);
} }
.dark input, .dark textarea { .dark input, .dark textarea {
background-color: var(--color-darkerGray); background-color: var(--color-darkerGray);
border-color: var(--color-dark); border-color: var(--color-veryDarkGray);
border-width: 1px; border-width: 1px;
color: #efefef; color: var(--color-lightGray);
} }
details { details {
margin-bottom: 5px; margin-bottom: 5px;
@ -229,7 +229,7 @@ details {
border-start-end-radius: 4px; border-start-end-radius: 4px;
} }
.dark details { .dark details {
border: 1px solid #222; border: 1px solid var(--color-veryDarkGray);
} }
details fieldset { details fieldset {
overflow: hidden; overflow: hidden;
@ -245,8 +245,8 @@ details summary {
padding: 0 5px; padding: 0 5px;
} }
.dark details summary { .dark details summary {
background-color: #232729; background-color: var(--color-darkerGray);
color: #fff; color: var(--color-light);
} }
.dark details fieldset { .dark details fieldset {
border: 1px solid var(--color-darkGray); border: 1px solid var(--color-darkGray);
@ -311,33 +311,34 @@ input.switch:empty ~ label:after {
width: 6em; width: 6em;
-webkit-transition: all 100ms ease-in; -webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in; transition: all 100ms ease-in;
color: #c9c9c7; color: var(--color-mediumGray);
font-weight: bold; font-weight: bold;
background-color: #ededed; background-color: var(--color-lighterGray);
} }
.dark input.switch:empty ~ label:before, .dark input.switch:empty ~ label:before,
.dark input.switch:empty ~ label:after { .dark input.switch:empty ~ label:after {
background-color: #272c2e; background-color: var(--color-darkerGray);
} }
input.switch:empty ~ label:after { input.switch:empty ~ label:after {
width: 3em; width: 3em;
margin-inline-start: 0.1em; margin-inline-start: 0.1em;
background-color: #ededed; background-color: var(--color-lightGray);
content: "OFF"; content: "OFF";
text-indent: 3.5em; text-indent: 3.5em;
border: 1px solid #374E75; border: 1px solid var(--color-darkerGray);
font-weight: bold; font-weight: bold;
} }
.dark input.switch:empty ~ label:after { .dark input.switch:empty ~ label:after {
border: 1px solid #202425; border: 1px solid var(--color-veryDarkGray);
background-color: #2c3233; background-color: var(--color-darkerGray);
color: var(--color-lightGray);
} }
input.switch:checked:empty ~ label:after { input.switch:checked:empty ~ label:after {
content: ' '; content: ' ';
} }
.dark input.switch:checked ~ label:before, .dark input.switch:checked ~ label:before,
input.switch:checked ~ label:before { input.switch:checked ~ label:before {
background-color: var(--color-lightCyan); background-color: var(--color-verySoftCyan);
border: 1px solid var(--color-lightGray); border: 1px solid var(--color-lightGray);
color: var(--color-darkGray); color: var(--color-darkGray);
content: "ON"; content: "ON";
@ -347,7 +348,7 @@ input.switch:checked ~ label:before {
} }
.dark input.switch:checked ~ label:before { .dark input.switch:checked ~ label:before {
border: none; border: none;
background-color: var(--color-accent); background-color: var(--color-verySoftCyan);
} }
input.switch:checked ~ label:after { input.switch:checked ~ label:after {
margin-inline-start: 3em; margin-inline-start: 3em;
@ -387,9 +388,9 @@ input.switch:checked ~ label:after {
display: none; display: none;
} }
.umap-multiplechoice label { .umap-multiplechoice label {
border: 1px solid #374E75; border: 1px solid var(--color-veryDarkGray);
cursor: pointer; cursor: pointer;
background-color: #c9c9c7; background-color: var(--color-lightGray);
min-height: 30px; min-height: 30px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
@ -397,12 +398,11 @@ input.switch:checked ~ label:after {
display: inline-block; display: inline-block;
} }
.dark .umap-multiplechoice label { .dark .umap-multiplechoice label {
border: 1px solid black; border: 1px solid var(--color-veryDarkGray);
background-color: #2c3233; background-color: var(--color-darkGray);
} }
.umap-multiplechoice input[type='radio']:checked + label { .umap-multiplechoice input[type='radio']:checked + label {
background-color: var(--color-accent); background-color: var(--color-verySoftCyan);
box-shadow: inset 0 0 6px 0px #2c3233;
color: var(--color-darkGray); color: var(--color-darkGray);
} }
.inheritable .header .buttons { .inheritable .header .buttons {
@ -420,7 +420,7 @@ input.switch:checked ~ label:after {
width: initial; width: initial;
} }
.inheritable + .inheritable { .inheritable + .inheritable {
border-top: 1px solid #222; border-top: 1px solid var(--color-darkerGray);
padding-top: 5px; padding-top: 5px;
margin-top: 5px; margin-top: 5px;
} }
@ -504,7 +504,7 @@ i.info {
justify-content: space-around; justify-content: space-around;
font-size: 1.2em; font-size: 1.2em;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #bebebe; border-bottom: 1px solid var(--color-lighterGray);
} }
.flat-tabs button { .flat-tabs button {
padding: 10px; padding: 10px;
@ -515,14 +515,14 @@ i.info {
.flat-tabs button:hover, .flat-tabs button:hover,
.flat-tabs .on { .flat-tabs .on {
font-weight: bold; font-weight: bold;
border-bottom: 1px solid #444; border-bottom: 1px solid var(--color-mediumGray);
} }
.dark .flat-tabs button { .dark .flat-tabs button {
color: #fff; color: var(--color-light);
} }
.dark .flat-tabs button:hover, .dark .flat-tabs button:hover,
.dark .flat-tabs .on { .dark .flat-tabs .on {
border-bottom: 1px solid #fff; border-bottom: 1px solid var(--color-light);
} }
.umap-pictogram-category h6 { .umap-pictogram-category h6 {
font-size: 1.3em; font-size: 1.3em;
@ -538,11 +538,11 @@ i.info {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
cursor: pointer; cursor: pointer;
background-color: #999; background-color: var(--color-lightGray);
text-align: center; text-align: center;
margin-bottom: 5px; margin-bottom: 5px;
display: inline-block; display: inline-block;
color: black; color: var(--color-dark);
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
} }
@ -552,10 +552,10 @@ i.info {
} }
.umap-pictogram-choice:hover, .umap-pictogram-choice:hover,
.umap-color-picker span:hover { .umap-color-picker span:hover {
background-color: #bebebe; background-color: var(--color-lighterGray);
} }
.umap-pictogram-choice.selected { .umap-pictogram-choice.selected {
box-shadow: inset 0 0 0 1px #e9e9e9; box-shadow: inset 0 0 0 1px var(--color-lighterGray);
} }
.umap-pictogram-choice .leaflet-marker-icon { .umap-pictogram-choice .leaflet-marker-icon {

4
umap/static/umap/map.css
View file

@ -990,9 +990,9 @@ a.umap-control-caption,
height: var(--control-size); height: var(--control-size);
line-height: var(--control-size); line-height: var(--control-size);
} }
/* Links are blue by default */ /* Links are dark cyan by default */
.leaflet-container a { .leaflet-container a {
color: #0078a8; color: var(--color-veryDarkCyan);
} }
/* But not in controls */ /* But not in controls */
.leaflet-bar a { .leaflet-bar a {

4
umap/static/umap/vars.css
View file

@ -6,12 +6,15 @@
--color-mediumGray: #3e4444; --color-mediumGray: #3e4444;
--color-darkGray: #323737; --color-darkGray: #323737;
--color-darkerGray: #2a2e30; --color-darkerGray: #2a2e30;
--color-veryDarkGray: #1e2121;
--color-light: white; --color-light: white;
--color-dark: black; --color-dark: black;
--color-limeGreen: #b9f5d2; --color-limeGreen: #b9f5d2;
--color-verySoftCyan: #a1eeeb;
--color-brightCyan: #46ece6; --color-brightCyan: #46ece6;
--color-lightCyan: #d4fbf9; --color-lightCyan: #d4fbf9;
--color-darkCyan: #009099; --color-darkCyan: #009099;
--color-veryDarkCyan: #046460;
--color-red: #c60f13; --color-red: #c60f13;
--color-darkRed: #5b2a2a; --color-darkRed: #5b2a2a;
@ -64,6 +67,7 @@
.dark { .dark {
--background-color: var(--color-darkGray); --background-color: var(--color-darkGray);
--text-color: #efefef; --text-color: #efefef;
--color-verySoftCyan: #8cdcd9;
} }
@media only screen and (max-width:770px) { @media only screen and (max-width:770px) {