forked from MapComplete/MapComplete
Refactoring: More cleanup of index.css
This commit is contained in:
Pieter Vander Vennet
parent
23b26c4197
commit
4548689a28
3 changed files with 10 additions and 299 deletions
|
|
@ -14,7 +14,6 @@ export default abstract class BaseUIElement {
|
|||
|
||||
public onClick(f: () => void) {
|
||||
this._onClick = f
|
||||
this.SetClass("clickable")
|
||||
if (this._constructedHtmlElement !== undefined) {
|
||||
this._constructedHtmlElement.onclick = f
|
||||
}
|
||||
|
|
|
|||
|
|
@ -755,14 +755,6 @@ video {
|
|||
isolation: isolate;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.z-0 {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -945,10 +937,6 @@ video {
|
|||
margin-top: -3rem;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -1045,14 +1033,6 @@ video {
|
|||
height: 16rem;
|
||||
}
|
||||
|
||||
.h-96 {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
|
@ -1065,10 +1045,6 @@ video {
|
|||
height: 20rem;
|
||||
}
|
||||
|
||||
.max-h-20vh {
|
||||
max-height: 20vh;
|
||||
}
|
||||
|
||||
.max-h-32 {
|
||||
max-height: 8rem;
|
||||
}
|
||||
|
|
@ -1172,10 +1148,6 @@ video {
|
|||
flex: none;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
|
@ -1274,10 +1246,6 @@ video {
|
|||
place-content: center;
|
||||
}
|
||||
|
||||
.content-center {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
|
@ -1340,10 +1308,6 @@ video {
|
|||
overflow: scroll;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -1514,11 +1478,6 @@ video {
|
|||
background-color: rgb(224 231 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
|
|
@ -1550,14 +1509,14 @@ video {
|
|||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.p-0\.5 {
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -1593,18 +1552,6 @@ video {
|
|||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-20 {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
|
@ -1649,18 +1596,10 @@ video {
|
|||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pl-6 {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1866,12 +1805,6 @@ video {
|
|||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.ease-in-out {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
|
@ -1880,10 +1813,6 @@ video {
|
|||
z-index: 10000;
|
||||
}
|
||||
|
||||
.z-above-controls {
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.bg-subtle {
|
||||
background-color: var(--subtle-detail-color);
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
|
|
@ -1949,58 +1878,24 @@ img {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.titleicon img {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.titleicon svg {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.svg-catch svg path {
|
||||
fill: var(--catch-detail-color) !important;
|
||||
stroke: var(--catch-detail-color) !important;
|
||||
}
|
||||
|
||||
.svg-unsubtle svg path {
|
||||
fill: var(--unsubtle-detail-color) !important;
|
||||
stroke: var(--unsubtle-detail-color) !important;
|
||||
}
|
||||
|
||||
.svg-subtle svg path {
|
||||
fill: var(--subtle-detail-color) !important;
|
||||
stroke: var(--subtle-detail-color) !important;
|
||||
}
|
||||
|
||||
.svg-foreground svg path {
|
||||
fill: var(--foreground-color) !important;
|
||||
stroke: var(--foreground-color) !important;
|
||||
}
|
||||
|
||||
.no-images img {
|
||||
/* Used solely in 'imageAttribution' */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text-white a {
|
||||
/* Used solely in 'imageAttribution' */
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
.weblate-link {
|
||||
/* Weblate-links are the little translation icon next to translatable sentences. Due to their special nature, they are exempt from some rules */
|
||||
}
|
||||
|
||||
.mapcontrol svg path {
|
||||
fill: var(--subtle-detail-color-contrast) !important;
|
||||
}
|
||||
|
||||
.red-svg svg path {
|
||||
stroke: #d71010 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.text-white a {
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
.btn {
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
|
|
@ -2046,11 +1941,6 @@ a {
|
|||
border: 3px solid var(--unsubtle-detail-color);
|
||||
}
|
||||
|
||||
.h-min {
|
||||
height: -webkit-min-content;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
/* slider */
|
||||
|
||||
input[type="range"].vertical {
|
||||
|
|
@ -2079,15 +1969,6 @@ input[type="range"].vertical {
|
|||
}
|
||||
}
|
||||
|
||||
.border-detail {
|
||||
border-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.w-min {
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.rounded-left-full {
|
||||
border-bottom-left-radius: 999rem;
|
||||
border-top-left-radius: 999rem;
|
||||
|
|
@ -2098,18 +1979,6 @@ input[type="range"].vertical {
|
|||
border-top-right-radius: 999rem;
|
||||
}
|
||||
|
||||
.w-16-imp {
|
||||
width: 4rem !important;
|
||||
}
|
||||
|
||||
.w-32-imp {
|
||||
width: 8rem !important;
|
||||
}
|
||||
|
||||
.w-48-imp {
|
||||
width: 12rem !important;
|
||||
}
|
||||
|
||||
.link-underline a {
|
||||
-webkit-text-decoration: underline 1px var(--foreground-color);
|
||||
text-decoration: underline 1px var(--foreground-color);
|
||||
|
|
@ -2171,10 +2040,6 @@ li::marker {
|
|||
border: 5px solid var(--catch-detail-color);
|
||||
}
|
||||
|
||||
.border-invisible {
|
||||
border: 5px solid #00000000;
|
||||
}
|
||||
|
||||
.border-attention {
|
||||
border-color: var(--catch-detail-color);
|
||||
}
|
||||
|
|
@ -2183,23 +2048,6 @@ li::marker {
|
|||
fill: var(--catch-detail-color) !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.block-ruby {
|
||||
display: block ruby;
|
||||
}
|
||||
|
|
@ -2278,14 +2126,6 @@ li::marker {
|
|||
padding: 0.15em 0.3em;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.unclickable {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide {
|
||||
/* This is the animation on the marker to add a new point - it slides through all the possible presets */
|
||||
|
||||
|
|
@ -2320,13 +2160,6 @@ input {
|
|||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.floating-element-width {
|
||||
max-width: calc(100vw - 5em);
|
||||
width: 40em;
|
||||
}
|
||||
|
||||
/****** ShareScreen *****/
|
||||
|
||||
.literal-code {
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
|
|
@ -2336,15 +2169,6 @@ input {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.code {
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
padding: 0.5em;
|
||||
word-break: break-word;
|
||||
color: black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/** Switch layout **/
|
||||
|
||||
.small-image img {
|
||||
|
|
@ -2371,10 +2195,6 @@ input {
|
|||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.layer-toggle {
|
||||
/* The checkbox that toggles a single layer */
|
||||
}
|
||||
|
||||
.glowing-shadow {
|
||||
-webkit-animation: glowing 1s ease-in-out infinite alternate;
|
||||
animation: glowing 1s ease-in-out infinite alternate;
|
||||
|
|
@ -2451,10 +2271,6 @@ input {
|
|||
color: rgb(30 64 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:opacity-100:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover\:shadow-xl:hover {
|
||||
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
||||
|
|
@ -2532,11 +2348,6 @@ input {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.sm\:text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.sm\:text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
|
|
@ -2549,10 +2360,6 @@ input {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.md\:m-1 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
|
@ -2573,10 +2380,6 @@ input {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -2585,10 +2388,6 @@ input {
|
|||
display: grid;
|
||||
}
|
||||
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
|
@ -2601,10 +2400,6 @@ input {
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.md\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.md\:grid-flow-row {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
|
@ -2613,10 +2408,6 @@ input {
|
|||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.md\:border-t-2 {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
|
@ -2629,23 +2420,6 @@ input {
|
|||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.md\:pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.md\:pt-0 {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.md\:pb-0 {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.md\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.md\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
|
|
|
|||
62
index.css
62
index.css
|
|
@ -209,18 +209,6 @@ input[type="range"].vertical {
|
|||
border-top-right-radius: 999rem;
|
||||
}
|
||||
|
||||
.w-16-imp {
|
||||
width: 4rem !important;
|
||||
}
|
||||
|
||||
.w-32-imp {
|
||||
width: 8rem !important;
|
||||
}
|
||||
|
||||
.w-48-imp {
|
||||
width: 12rem !important;
|
||||
}
|
||||
|
||||
.link-underline a {
|
||||
text-decoration: underline 1px var(--foreground-color);
|
||||
}
|
||||
|
|
@ -286,10 +274,6 @@ li::marker {
|
|||
border: 5px solid var(--catch-detail-color);
|
||||
}
|
||||
|
||||
.border-invisible {
|
||||
border: 5px solid #00000000;
|
||||
}
|
||||
|
||||
.border-attention {
|
||||
border-color: var(--catch-detail-color);
|
||||
}
|
||||
|
|
@ -298,24 +282,6 @@ li::marker {
|
|||
fill: var(--catch-detail-color) !important;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.block-ruby {
|
||||
display: block ruby;
|
||||
}
|
||||
|
|
@ -392,14 +358,6 @@ li::marker {
|
|||
padding: 0.15em 0.3em;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.unclickable {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
/* This is the animation on the marker to add a new point - it slides through all the possible presets */
|
||||
from {
|
||||
|
|
@ -419,14 +377,6 @@ input {
|
|||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.floating-element-width {
|
||||
max-width: calc(100vw - 5em);
|
||||
width: 40em;
|
||||
}
|
||||
|
||||
|
||||
/****** ShareScreen *****/
|
||||
|
||||
.literal-code {
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
|
|
@ -436,15 +386,6 @@ input {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.code {
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
padding: 0.5em;
|
||||
word-break: break-word;
|
||||
color: black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/** Switch layout **/
|
||||
.small-image img {
|
||||
height: 1em;
|
||||
|
|
@ -470,9 +411,6 @@ input {
|
|||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.layer-toggle {
|
||||
/* The checkbox that toggles a single layer */
|
||||
}
|
||||
|
||||
.glowing-shadow {
|
||||
-webkit-animation: glowing 1s ease-in-out infinite alternate;
|
||||
|
|
|
|||
Loading…
Reference in a new issue