More style tweaks

This commit is contained in:
Pieter Vander Vennet 2023-05-11 17:29:25 +02:00
parent 63a6fb2dd5
commit 07f9f1bb15
18 changed files with 304 additions and 188 deletions

View file

@ -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 ********************************/
/**