forked from MapComplete/MapComplete
More style tweaks
This commit is contained in:
parent
63a6fb2dd5
commit
07f9f1bb15
18 changed files with 304 additions and 188 deletions
|
@ -825,11 +825,6 @@ video {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
@ -1024,6 +1019,10 @@ video {
|
|||
height: fit-content;
|
||||
}
|
||||
|
||||
.h-7 {
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.h-11 {
|
||||
height: 2.75rem;
|
||||
}
|
||||
|
@ -1048,8 +1047,8 @@ video {
|
|||
height: 20rem;
|
||||
}
|
||||
|
||||
.max-h-32 {
|
||||
max-height: 8rem;
|
||||
.max-h-12 {
|
||||
max-height: 3rem;
|
||||
}
|
||||
|
||||
.max-h-7 {
|
||||
|
@ -1060,14 +1059,6 @@ video {
|
|||
max-height: 6rem;
|
||||
}
|
||||
|
||||
.max-h-12 {
|
||||
max-height: 3rem;
|
||||
}
|
||||
|
||||
.min-h-\[8rem\] {
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -1114,6 +1105,10 @@ video {
|
|||
width: fit-content;
|
||||
}
|
||||
|
||||
.w-7 {
|
||||
width: 1.75rem;
|
||||
}
|
||||
|
||||
.w-11 {
|
||||
width: 2.75rem;
|
||||
}
|
||||
|
@ -1290,6 +1285,20 @@ video {
|
|||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-x-0\.5 {
|
||||
-webkit-column-gap: 0.125rem;
|
||||
column-gap: 0.125rem;
|
||||
}
|
||||
|
||||
.gap-x-0 {
|
||||
-webkit-column-gap: 0px;
|
||||
column-gap: 0px;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
@ -1533,6 +1542,11 @@ video {
|
|||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
|
@ -1702,11 +1716,6 @@ video {
|
|||
color: rgb(22 163 74 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-\[\#999\] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(153 153 153 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
|
@ -1761,6 +1770,12 @@ video {
|
|||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.drop-shadow-md {
|
||||
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
--tw-grayscale: grayscale(100%);
|
||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
|
@ -1845,7 +1860,7 @@ video {
|
|||
--interactive-background: #dddddd;
|
||||
--interactive-foreground: black;
|
||||
--interactive-contrast: #ff00ff;
|
||||
--button-background: #737373;
|
||||
--button-background: black;
|
||||
--button-foreground: white;
|
||||
/**
|
||||
* Base colour of interactive elements, mainly the 'subtle button'
|
||||
|
@ -2120,6 +2135,31 @@ label.checked {
|
|||
border: 2px solid var(--foreground-color);
|
||||
}
|
||||
|
||||
.active-links a{
|
||||
/*
|
||||
* Let a 'link' mimick a secondary button, but not entirely
|
||||
*/
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background: var(--low-interaction-background);
|
||||
color: var(--low-interaction-foreground);
|
||||
border: 2px solid var(--interactive-background);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.active-links a:hover {
|
||||
background-color: var(--interactive-background);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
border-color: var(--catch-detail-color-contrast);
|
||||
}
|
||||
|
||||
.active-links a:hover svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
/************************* OTHER CATEGORIES ********************************/
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue