forked from MapComplete/MapComplete
More styling
This commit is contained in:
parent
6a67b9f2f2
commit
08ab5a58fb
38 changed files with 474 additions and 493 deletions
|
|
@ -941,11 +941,6 @@ video {
|
|||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -956,6 +951,11 @@ video {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
|
|
@ -2027,6 +2027,10 @@ video {
|
|||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-4 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
|
@ -2039,10 +2043,6 @@ video {
|
|||
column-gap: 0px;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-1 {
|
||||
column-gap: 0.25rem;
|
||||
}
|
||||
|
|
@ -2258,10 +2258,6 @@ video {
|
|||
align-self: stretch;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
|
@ -3453,10 +3449,6 @@ video {
|
|||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.pr-1 {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
|
@ -3493,6 +3485,10 @@ video {
|
|||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-1\.5 {
|
||||
padding-bottom: 0.375rem;
|
||||
}
|
||||
|
|
@ -4408,9 +4404,10 @@ video {
|
|||
--interactive-background: #dddddd;
|
||||
--interactive-foreground: black;
|
||||
--interactive-contrast: #ff00ff;
|
||||
--button-background: #383838;
|
||||
--button-background: #282828;
|
||||
--button-background-hover: #686868;
|
||||
--button-foreground: white;
|
||||
--button-border-color: #F7F7F7;
|
||||
--disabled: #DBDBDB;
|
||||
/**
|
||||
* Base colour of interactive elements, mainly the 'subtle button'
|
||||
|
|
@ -4559,9 +4556,9 @@ button, .button {
|
|||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
margin: 0.25rem;
|
||||
border: 1px solid var(--foreground-color);
|
||||
border: 1px solid var(--button-background-hover);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 30px;
|
||||
border-radius: 15px;
|
||||
background: var(--background-color);
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
|
@ -4578,9 +4575,14 @@ button:focus, .button:focus {
|
|||
border-color: var(--interactive-contrast);
|
||||
}
|
||||
|
||||
.focus {
|
||||
border: 2px solid var(--interactive-contrast);
|
||||
}
|
||||
|
||||
button.primary, .button.primary {
|
||||
color: var(--button-foreground);
|
||||
background-color: var(--button-background);
|
||||
border-color: var(--button-border-color);
|
||||
}
|
||||
|
||||
button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
|
||||
|
|
@ -4592,6 +4594,12 @@ button.disabled {
|
|||
color: var(--disabled);
|
||||
}
|
||||
|
||||
button.disabled svg path {
|
||||
transition: all 200ms;
|
||||
fill: var(--disabled);
|
||||
stroke: var(--disabled);
|
||||
}
|
||||
|
||||
button.primary.disabled, .button.primary.disabled {
|
||||
color: var(--button-foreground);
|
||||
background-color: var(--disabled);
|
||||
|
|
@ -4648,12 +4656,11 @@ label:not(.neutral-label):not(.button) {
|
|||
/**
|
||||
* Label should _contain_ the input element
|
||||
*/
|
||||
border: 2px solid var(--interactive-background);
|
||||
padding: 0.25rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin:0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--low-interaction-background);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: all 250ms;
|
||||
|
|
@ -4664,27 +4671,12 @@ label.button {
|
|||
}
|
||||
|
||||
label:hover:not(.neutral-label) {
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
border: 2px solid var(--interactive-contrast);
|
||||
}
|
||||
|
||||
label:not(.no-image-background):not(.neutral-label) img {
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
label:not(.neutral-label) svg path {
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
label:hover:not(.no-image-background):not(.neutral-label) svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
background-color: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
label.checked:not(.neutral-label) {
|
||||
border: 2px solid var(--foreground-color);
|
||||
color: var(--foreground-color);
|
||||
background-color: var(--low-interaction-background);
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -4924,10 +4916,6 @@ svg.apply-fill path {
|
|||
}
|
||||
}
|
||||
|
||||
.glowing-shadow {
|
||||
animation: glowing 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/************************* LEGACY MARKER - CLEANUP BELOW ********************************/
|
||||
|
||||
.slideshow-item img {
|
||||
|
|
@ -7170,6 +7158,10 @@ svg.apply-fill path {
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.sm\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sm\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -7269,6 +7261,10 @@ svg.apply-fill path {
|
|||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.sm\:pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\:pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
|
@ -7335,6 +7331,10 @@ svg.apply-fill path {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.md\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.md\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -7537,6 +7537,10 @@ svg.apply-fill path {
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.md\:pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.md\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -1,36 +1,4 @@
|
|||
|
||||
/**
|
||||
Some utility functions which are only used to render data
|
||||
*/
|
||||
|
||||
.question .form-text-field > input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.question {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
background-color: var(--subtle-detail-color);
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
padding: 1em;
|
||||
border-radius: 0.75rem;
|
||||
font-size: larger !important;
|
||||
overflow-wrap: initial;
|
||||
}
|
||||
|
||||
.question form {
|
||||
display: inline-block;
|
||||
max-width: 90vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.question svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.mapping-icon-small-height {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue