forked from MapComplete/MapComplete
4068931bba
- remove custom styles - add new button styles based on Tailwind classes using @apply - extend config to allow hover:ring-blue-200 and such - update the js-files to use new classes - Only unsure about the `.review-form .save-non-active`, this might need additional Tailwind helper classes in this specific situation. Don't know where it shows up, so could not test.
524 lines
9.2 KiB
CSS
524 lines
9.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer utilities {
|
|
@variants responsive {
|
|
.max-h-65vh {
|
|
max-height: 65vh;
|
|
}
|
|
|
|
.max-h-20vh {
|
|
max-height: 20vh;
|
|
}
|
|
.btn {
|
|
@apply inline-flex justify-center;
|
|
@apply py-2 px-4;
|
|
@apply border border-transparent shadow-sm;
|
|
@apply shadow-sm rounded-3xl;
|
|
@apply ring-2 ring-blue-200 hover:ring-blue-300;
|
|
@apply mt-1 mr-1;
|
|
@apply text-sm font-medium text-white;
|
|
@apply bg-blue-600 hover:bg-blue-700;
|
|
@apply focus:outline-none focus:ring-blue-700;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-gray-600 hover:bg-gray-700;
|
|
}
|
|
|
|
.btn-disabled {
|
|
@apply bg-gray-500 hover:bg-gray-500;
|
|
@apply text-gray-300;
|
|
@apply ring-gray-200 hover:ring-gray-200 focus:ring-gray-200;
|
|
@apply cursor-default;
|
|
}
|
|
}
|
|
|
|
|
|
:root {
|
|
--subtle-detail-color: #e5f5ff;
|
|
--subtle-detail-color-contrast: black;
|
|
--subtle-detail-color-light-contrast: lightgrey;
|
|
|
|
--catch-detail-color: #3a3aeb;
|
|
--catch-detail-color-contrast: white;
|
|
--alert-color: #fee4d1;
|
|
--background-color: white;
|
|
--foreground-color: black;
|
|
--popup-border: white;
|
|
--shadow-color: #00000066;
|
|
--variable-title-height: 0px; /* Set by javascript */
|
|
--return-to-the-map-height: 2em;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
svg, img {
|
|
box-sizing: content-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
a {
|
|
color: var(--foreground-color)
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#topleft-tools svg {
|
|
fill: var(--foreground-color) !important;
|
|
stroke: var(--foreground-color) !important;
|
|
}
|
|
|
|
#topleft-tools svg path {
|
|
fill: var(--foreground-color) !important;
|
|
stroke: var(--foreground-color) !important;
|
|
}
|
|
|
|
.direction-svg svg path {
|
|
fill: var(--catch-detail-color) !important;
|
|
}
|
|
|
|
|
|
#leafletDiv {
|
|
height: 100%;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper {
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
border: 2px solid var(--popup-border);
|
|
box-shadow: 0 3px 14px var(--shadow-color) !important;
|
|
}
|
|
|
|
.leaflet-container {
|
|
background-color: var(--background-color) !important;
|
|
}
|
|
|
|
.leaflet-popup-tip {
|
|
background-color: var(--popup-border) !important;
|
|
color: var(--popup-border) !important;
|
|
box-shadow: 0 3px 14px var(--shadow-color) !important;
|
|
}
|
|
|
|
#geolocate-button {
|
|
position: absolute;
|
|
bottom: 25px;
|
|
right: 50px;
|
|
}
|
|
|
|
#geolocate-button img {
|
|
width: 31px;
|
|
height: 31px;
|
|
margin: 6px;
|
|
}
|
|
|
|
#geolocate-button > .uielement {
|
|
display: block;
|
|
}
|
|
|
|
|
|
#help-button-mobile {
|
|
display: none;
|
|
}
|
|
|
|
#layer-selection {
|
|
z-index: 9000;
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px var(--shadow-color);
|
|
}
|
|
|
|
.single-layer-selection-toggle {
|
|
position: relative;
|
|
width: 2em;
|
|
height: 2em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.single-layer-selection-toggle img {
|
|
max-height: 2em !important;
|
|
max-width: 2em !important;
|
|
}
|
|
|
|
.single-layer-selection-toggle svg {
|
|
max-height: 2em !important;
|
|
max-width: 2em !important;
|
|
}
|
|
|
|
.simple-add-ui-icon {
|
|
position: relative;
|
|
display: block;
|
|
width: 4em;
|
|
height: 3.5em;
|
|
}
|
|
|
|
.simple-add-ui-icon img {
|
|
max-height: 3.5em !important;
|
|
max-width: 3.5em !important;
|
|
}
|
|
|
|
.simple-add-ui-icon svg {
|
|
max-height: 3.5em !important;
|
|
max-width: 3.5em !important;
|
|
}
|
|
|
|
.layer-selection-toggle {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
background: var(--subtle-detail-color);
|
|
}
|
|
|
|
.layer-selection-toggle svg {
|
|
display: block;
|
|
width: 2em;
|
|
height: 2em;
|
|
padding: 0.75em;
|
|
}
|
|
|
|
/**************** GENERIC ****************/
|
|
|
|
|
|
.alert {
|
|
background-color: var(--alert-color);
|
|
font-weight: bold;
|
|
border-radius: 1em;
|
|
margin: 0.25em;
|
|
text-align: center;
|
|
padding: 0.15em 0.3em;
|
|
}
|
|
|
|
.question form {
|
|
display: inline-block;
|
|
max-width: 90vw;
|
|
width: 100%;
|
|
}
|
|
|
|
.invalid {
|
|
box-shadow: 0 0 10px #ff5353;
|
|
height: min-content;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0 0 10px var(--shadow-color);
|
|
}
|
|
|
|
.title-font span {
|
|
font-size: xx-large !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.soft {
|
|
background-color: var(--subtle-detail-color);
|
|
color: var(--subtle-detail-color-contrast);
|
|
font-weight: bold;
|
|
border-radius: 1em;
|
|
margin: 0.25em;
|
|
text-align: center;
|
|
padding: 0.15em 0.3em;
|
|
}
|
|
|
|
|
|
.subtle {
|
|
color: #999;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.thanks {
|
|
background-color: #43d904;
|
|
font-weight: bold;
|
|
border-radius: 1em;
|
|
margin: 0.25em;
|
|
text-align: center;
|
|
padding: 0.15em 0.3em;
|
|
}
|
|
|
|
.clickable {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.unclickable {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.page-split {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.activate-osm-authentication {
|
|
cursor: pointer;
|
|
color: blue;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
#searchbox {
|
|
display: inline-block;
|
|
text-align: left;
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
|
|
transition: all 500ms linear;
|
|
pointer-events: all;
|
|
margin: 0 0 0.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
.search {
|
|
position: relative;
|
|
float: left;
|
|
height: 2em;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
#searchbox {
|
|
width: 100%
|
|
}
|
|
|
|
#searchbox .form-text-field {
|
|
position: relative;
|
|
float: left;
|
|
margin-top: 0.2em;
|
|
margin-left: 1em;
|
|
width: calc(100% - 4em)
|
|
}
|
|
|
|
#searchbox input[type="text"] {
|
|
background: transparent;
|
|
border: none;
|
|
font-size: large;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
color: var(--foreground-color);
|
|
}
|
|
|
|
|
|
.add-popup-all-buttons {
|
|
max-height: 50vh;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/**************************************/
|
|
|
|
|
|
#topleft-tools {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 5000;
|
|
transition: all 500ms linear;
|
|
pointer-events: none;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.welcomeMessage {
|
|
display: block;
|
|
margin-left: 4em;
|
|
max-width: calc(100vw - 5em);
|
|
width: 40em;
|
|
max-height: calc(100vh - 15em);
|
|
overflow-y: auto;
|
|
border-top-right-radius: 1em;
|
|
border-bottom-right-radius: 1em;
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
}
|
|
|
|
.close-welcome-button {
|
|
position: absolute;
|
|
display: inline-block;
|
|
height: 100%;
|
|
background-color: var(--subtle-detail-color);
|
|
color: var(--subtle-detail-color-contrast);
|
|
box-sizing: border-box;
|
|
width: 4em;
|
|
padding: 1em;
|
|
border-top-left-radius: 1em;
|
|
border-bottom-left-radius: 1em;
|
|
}
|
|
|
|
.close-welcome-button svg {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
.open-welcome-button {
|
|
box-sizing: border-box;
|
|
background: var(--subtle-detail-color);
|
|
color: var(--foreground-color);
|
|
|
|
height: 3.5em;
|
|
width: 3.5em;
|
|
padding: 0.75em;
|
|
}
|
|
|
|
.open-welcome-button svg {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
#messagesbox {
|
|
/*Only shown on big screens*/
|
|
position: relative;
|
|
padding: 0;
|
|
pointer-events: all;
|
|
box-shadow: 0 0 10px var(--shadow-color);
|
|
width: min-content;
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
}
|
|
|
|
|
|
#centermessage {
|
|
z-index: 4000;
|
|
pointer-events: none;
|
|
transition: opacity 500ms linear;
|
|
}
|
|
|
|
|
|
.imgWithAttr {
|
|
max-height: 20em;
|
|
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.attribution {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: smaller;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 6em; /* Offset for the go left button*/
|
|
padding: 0.25em;
|
|
margin-bottom: 0.25em;
|
|
border-radius: 0.5em;
|
|
|
|
}
|
|
|
|
.attribution img {
|
|
height: 1.2em !important;
|
|
padding-right: 0.5em;
|
|
padding-left: 0.2em;
|
|
|
|
}
|
|
|
|
.attribution-author {
|
|
display: inline-block;
|
|
}
|
|
|
|
.license {
|
|
font-size: small;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
.attribution a {
|
|
color: white;
|
|
}
|
|
|
|
|
|
/***************** Info box (box containing features and questions ******************/
|
|
|
|
|
|
.map-attribution img {
|
|
width: 1em;
|
|
height: 1em;
|
|
fill: black;
|
|
border-radius: 0;
|
|
display: inline;
|
|
}
|
|
|
|
.leaflet-popup-content {
|
|
width: 45em !important;
|
|
}
|
|
|
|
.leaflet-div-icon {
|
|
background-color: unset !important;
|
|
border: unset !important;
|
|
}
|
|
|
|
|
|
.leaflet-div-icon svg {
|
|
width: calc(100%);
|
|
height: calc(100%);
|
|
}
|
|
|
|
/****** ShareScreen *****/
|
|
|
|
.literal-code {
|
|
display: inline-block;
|
|
background-color: lightgray;
|
|
padding: 0.5em;
|
|
word-break: break-word;
|
|
color: black;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.iframe-escape {
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
|
|
border-radius: 2em;
|
|
display: block;
|
|
width: min-content;
|
|
}
|
|
|
|
.iframe-escape img {
|
|
padding: 1em;
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
/** Switch layout **/
|
|
.small-image img {
|
|
height: 1em;
|
|
max-width: 1em;
|
|
}
|
|
|
|
|
|
.ornament {
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
display: flex;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ornament svg {
|
|
height: 2.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
.ornament svg path {
|
|
stroke: var(--subtle-detail-color-light-contrast);
|
|
}
|
|
|
|
.ornament svg polygon {
|
|
fill: var(--subtle-detail-color-light-contrast);
|
|
}
|