forked from MapComplete/MapComplete
Add some support for foldable devices
This commit is contained in:
parent
00ab3a1b77
commit
06e978ff49
GPG key ID:
53956B3252478F0D
4 changed files with 444 additions and 404 deletions
|
|
@ -781,10 +781,6 @@ video {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-8 {
|
|
||||||
margin: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-4 {
|
.m-4 {
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -797,6 +793,10 @@ video {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.m-8 {
|
||||||
|
margin: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.m-2 {
|
.m-2 {
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -900,10 +900,6 @@ video {
|
||||||
margin-right: 4rem;
|
margin-right: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-4 {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-4 {
|
.mt-4 {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -936,6 +932,10 @@ video {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mb-4 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.ml-1 {
|
.ml-1 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
@ -2351,7 +2351,7 @@ input {
|
||||||
color: var(--foreground-color);
|
color: var(--foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=text] {
|
input[type="text"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2374,12 +2374,12 @@ input[type=text] {
|
||||||
|
|
||||||
.low-interaction {
|
.low-interaction {
|
||||||
background: var(--low-interaction-background);
|
background: var(--low-interaction-background);
|
||||||
color: var(--low-interaction-foreground)
|
color: var(--low-interaction-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive {
|
.interactive {
|
||||||
background: var(--interactive-background);
|
background: var(--interactive-background);
|
||||||
color: var(--interactive-foreground)
|
color: var(--interactive-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-interactive {
|
.border-interactive {
|
||||||
|
|
@ -2398,7 +2398,8 @@ input[type=text] {
|
||||||
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button.small, .button.small {
|
button.small,
|
||||||
|
.button.small {
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
|
|
@ -2419,7 +2420,8 @@ button.small, .button.small {
|
||||||
color: var(--low-interaction-foreground);
|
color: var(--low-interaction-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
button, .button {
|
button,
|
||||||
|
.button {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
|
|
@ -2442,56 +2444,67 @@ button, .button {
|
||||||
box-shadow: 0 5px 10px #88888888;
|
box-shadow: 0 5px 10px #88888888;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.selected, .button.selected {
|
button.selected,
|
||||||
|
.button.selected {
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
border-color: var(--catch-detail-color);
|
border-color: var(--catch-detail-color);
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.selected svg path, .button.selected svg path {
|
button.selected svg path,
|
||||||
|
.button.selected svg path {
|
||||||
fill: var(--catch-detail-foregroundcolor) !important;
|
fill: var(--catch-detail-foregroundcolor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-background):not(.soft) svg path {
|
button:not(.no-image-background):not(.soft) svg path,
|
||||||
|
.button:not(.no-image-background):not(.soft) svg path {
|
||||||
fill: var(--interactive-foreground) !important;
|
fill: var(--interactive-foreground) !important;
|
||||||
transition: all 250ms;
|
transition: all 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive button, .interactive .button {
|
.interactive button,
|
||||||
|
.interactive .button {
|
||||||
background: var(--interactive-background);
|
background: var(--interactive-background);
|
||||||
color: var(--interactive-foreground);
|
color: var(--interactive-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover, .button:hover {
|
button:hover,
|
||||||
|
.button:hover {
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
border: 2px solid var(--catch-detail-color-contrast);
|
border: 2px solid var(--catch-detail-color-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
|
button:hover:not(.no-image-background) img,
|
||||||
|
.button:hover:not(.no-image-background) img {
|
||||||
background: var(--low-interaction-background);
|
background: var(--low-interaction-background);
|
||||||
border-radius: 100rem;
|
border-radius: 100rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path {
|
button:hover:not(.no-image-background) svg path,
|
||||||
|
.button:hover:not(.no-image-background) svg path {
|
||||||
fill: var(--catch-detail-foregroundcolor) !important;
|
fill: var(--catch-detail-foregroundcolor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path {
|
button.disabled:hover:not(.no-image-background) svg path,
|
||||||
|
.button.disabled:hover:not(.no-image-background) svg path {
|
||||||
fill: var(--low-interaction-foreground) !important;
|
fill: var(--low-interaction-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.primary, .button.primary {
|
button.primary,
|
||||||
|
.button.primary {
|
||||||
color: var(--button-foreground);
|
color: var(--button-foreground);
|
||||||
background: var(--button-background);
|
background: var(--button-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path {
|
button.primary:not(.no-image-background) svg path,
|
||||||
|
.button.primary:not(.no-image-background) svg path {
|
||||||
fill: var(--button-foreground) !important;
|
fill: var(--button-foreground) !important;
|
||||||
transition: all 250ms;
|
transition: all 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.disabled, .button.disabled {
|
button.disabled,
|
||||||
|
.button.disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
border: 2px dashed var(--button-background);
|
border: 2px dashed var(--button-background);
|
||||||
background: unset;
|
background: unset;
|
||||||
|
|
@ -2499,7 +2512,8 @@ button.disabled, .button.disabled {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.disabled:hover, .button.disabled:hover {
|
button.disabled:hover,
|
||||||
|
.button.disabled:hover {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
border: 2px dashed var(--button-background);
|
border: 2px dashed var(--button-background);
|
||||||
background: unset;
|
background: unset;
|
||||||
|
|
@ -2513,18 +2527,21 @@ button.link {
|
||||||
}
|
}
|
||||||
|
|
||||||
button.link:hover {
|
button.link:hover {
|
||||||
color:unset;
|
color: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive button.disabled svg path, .interactive .button.disabled svg path {
|
.interactive button.disabled svg path,
|
||||||
|
.interactive .button.disabled svg path {
|
||||||
fill: var(--interactive-foreground) !important;
|
fill: var(--interactive-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path {
|
.low-interaction button.disabled svg path,
|
||||||
|
.low-interaction .button.disabled svg path {
|
||||||
fill: var(--low-interaction-foreground) !important;
|
fill: var(--low-interaction-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal-background button.disabled svg path, .normal-background .button.disabled svg path {
|
.normal-background button.disabled svg path,
|
||||||
|
.normal-background .button.disabled svg path {
|
||||||
fill: var(--foreground-color) !important;
|
fill: var(--foreground-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2537,12 +2554,14 @@ button.link:hover {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.soft, .button.soft {
|
button.soft,
|
||||||
|
.button.soft {
|
||||||
border: 2px solid var(--interactive-background);
|
border: 2px solid var(--interactive-background);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.soft:hover, .button.soft:hover {
|
button.soft:hover,
|
||||||
|
.button.soft:hover {
|
||||||
background-color: var(--interactive-background);
|
background-color: var(--interactive-background);
|
||||||
color: var(--interactive-foreground);
|
color: var(--interactive-foreground);
|
||||||
border: 2px solid var(--catch-detail-color-contrast);
|
border: 2px solid var(--catch-detail-color-contrast);
|
||||||
|
|
@ -2580,7 +2599,7 @@ select:hover {
|
||||||
border-color: var(--catch-detail-color-contrast);
|
border-color: var(--catch-detail-color-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.neutral-label{
|
.neutral-label {
|
||||||
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
|
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
|
||||||
* Placed here for autocompletion
|
* Placed here for autocompletion
|
||||||
*/
|
*/
|
||||||
|
|
@ -2608,7 +2627,7 @@ label.button {
|
||||||
label:hover:not(.neutral-label) {
|
label:hover:not(.neutral-label) {
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
border: 2px solid var(--interactive-contrast)
|
border: 2px solid var(--interactive-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
label:not(.no-image-background):not(.neutral-label) img {
|
label:not(.no-image-background):not(.neutral-label) img {
|
||||||
|
|
@ -2839,18 +2858,18 @@ a.link-underline {
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.apply-fill path {
|
svg.apply-fill path {
|
||||||
fill: var(--svg-color)
|
fill: var(--svg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.compass_arrow {
|
.compass_arrow {
|
||||||
width: calc( 2.5rem - 1px ) ;
|
width: calc(2.5rem - 1px);
|
||||||
height: calc( 2.5rem - 1px )
|
height: calc(2.5rem - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.compass_arrow {
|
.compass_arrow {
|
||||||
width: calc( 2.75rem - 1px ) ;
|
width: calc(2.75rem - 1px);
|
||||||
height: calc( 2.75rem - 1px )
|
height: calc(2.75rem - 1px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2931,6 +2950,16 @@ svg.apply-fill path {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/************************* Experimental support for foldable devices ********************************/
|
||||||
|
|
||||||
|
@media (horizontal-viewport-segments: 2) {
|
||||||
|
.theme-list {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hover\:bg-indigo-200:hover {
|
.hover\:bg-indigo-200:hover {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
|
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
role="dialog"
|
role="dialog"
|
||||||
style="max-width: 100vw; max-height: 100vh"
|
style="max-width: 100vw; max-height: 100vh"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
|
id="modal-right"
|
||||||
use:trapFocus
|
use:trapFocus
|
||||||
>
|
>
|
||||||
<slot name="close-button">
|
<slot name="close-button">
|
||||||
|
|
@ -30,3 +31,12 @@
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Experimental support for foldable devices -->
|
||||||
|
<style lang="scss">
|
||||||
|
@media (horizontal-viewport-segments: 2) {
|
||||||
|
#modal-right {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
<section class="w-full">
|
<section class="w-full">
|
||||||
<slot name="title" />
|
<slot name="title" />
|
||||||
<div class="gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
|
<div class="theme-list gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
|
||||||
{#each filteredThemes as theme (theme.id)}
|
{#each filteredThemes as theme (theme.id)}
|
||||||
{#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
|
{#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
|
||||||
<!-- TODO: doesn't work if first theme is hidden -->
|
<!-- TODO: doesn't work if first theme is hidden -->
|
||||||
|
|
|
||||||
127
src/index.css
127
src/index.css
|
|
@ -45,12 +45,10 @@
|
||||||
--subtle-detail-color-contrast: black;
|
--subtle-detail-color-contrast: black;
|
||||||
--subtle-detail-color-light-contrast: lightgrey;
|
--subtle-detail-color-light-contrast: lightgrey;
|
||||||
|
|
||||||
|
|
||||||
--catch-detail-color: black; /*#3a3aeb;*/
|
--catch-detail-color: black; /*#3a3aeb;*/
|
||||||
--catch-detail-foregroundcolor: white;
|
--catch-detail-foregroundcolor: white;
|
||||||
--catch-detail-color-contrast: #fb3afb;
|
--catch-detail-color-contrast: #fb3afb;
|
||||||
|
|
||||||
|
|
||||||
--image-carousel-height: 350px;
|
--image-carousel-height: 350px;
|
||||||
|
|
||||||
/** Technical value, used by icon.svelte
|
/** Technical value, used by icon.svelte
|
||||||
|
|
@ -97,7 +95,6 @@ h1 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: x-large;
|
font-size: x-large;
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
|
|
@ -120,7 +117,7 @@ input {
|
||||||
color: var(--foreground-color);
|
color: var(--foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=text] {
|
input[type="text"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -131,7 +128,6 @@ input[type=text] {
|
||||||
* and some interactive elements
|
* and some interactive elements
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
.subtle-background {
|
.subtle-background {
|
||||||
background: var(--subtle-detail-color);
|
background: var(--subtle-detail-color);
|
||||||
color: var(--subtle-detail-color-contrast);
|
color: var(--subtle-detail-color-contrast);
|
||||||
|
|
@ -144,12 +140,12 @@ input[type=text] {
|
||||||
|
|
||||||
.low-interaction {
|
.low-interaction {
|
||||||
background: var(--low-interaction-background);
|
background: var(--low-interaction-background);
|
||||||
color: var(--low-interaction-foreground)
|
color: var(--low-interaction-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive {
|
.interactive {
|
||||||
background: var(--interactive-background);
|
background: var(--interactive-background);
|
||||||
color: var(--interactive-foreground)
|
color: var(--interactive-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-interactive {
|
.border-interactive {
|
||||||
|
|
@ -168,7 +164,8 @@ input[type=text] {
|
||||||
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button.small, .button.small {
|
button.small,
|
||||||
|
.button.small {
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
|
|
@ -187,7 +184,8 @@ button.small, .button.small {
|
||||||
color: var(--low-interaction-foreground);
|
color: var(--low-interaction-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
button, .button {
|
button,
|
||||||
|
.button {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
|
|
@ -210,62 +208,68 @@ button, .button {
|
||||||
box-shadow: 0 5px 10px #88888888;
|
box-shadow: 0 5px 10px #88888888;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.selected,
|
||||||
|
.button.selected {
|
||||||
button.selected, .button.selected {
|
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
border-color: var(--catch-detail-color);
|
border-color: var(--catch-detail-color);
|
||||||
|
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.selected svg path, .button.selected svg path {
|
button.selected svg path,
|
||||||
|
.button.selected svg path {
|
||||||
fill: var(--catch-detail-foregroundcolor) !important;
|
fill: var(--catch-detail-foregroundcolor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-background):not(.soft) svg path {
|
button:not(.no-image-background):not(.soft) svg path,
|
||||||
fill: var(--interactive-foreground) !important;;
|
.button:not(.no-image-background):not(.soft) svg path {
|
||||||
|
fill: var(--interactive-foreground) !important;
|
||||||
transition: all 250ms;
|
transition: all 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive button, .interactive .button {
|
.interactive button,
|
||||||
|
.interactive .button {
|
||||||
background: var(--interactive-background);
|
background: var(--interactive-background);
|
||||||
color: var(--interactive-foreground);
|
color: var(--interactive-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover, .button:hover {
|
button:hover,
|
||||||
|
.button:hover {
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
border: 2px solid var(--catch-detail-color-contrast);
|
border: 2px solid var(--catch-detail-color-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
|
button:hover:not(.no-image-background) img,
|
||||||
|
.button:hover:not(.no-image-background) img {
|
||||||
background: var(--low-interaction-background);
|
background: var(--low-interaction-background);
|
||||||
border-radius: 100rem;
|
border-radius: 100rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button:hover:not(.no-image-background) svg path,
|
||||||
button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path {
|
.button:hover:not(.no-image-background) svg path {
|
||||||
fill: var(--catch-detail-foregroundcolor) !important;;
|
fill: var(--catch-detail-foregroundcolor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path {
|
button.disabled:hover:not(.no-image-background) svg path,
|
||||||
fill: var(--low-interaction-foreground) !important;;
|
.button.disabled:hover:not(.no-image-background) svg path {
|
||||||
|
fill: var(--low-interaction-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.primary,
|
||||||
button.primary, .button.primary {
|
.button.primary {
|
||||||
color: var(--button-foreground);
|
color: var(--button-foreground);
|
||||||
background: var(--button-background);
|
background: var(--button-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path {
|
button.primary:not(.no-image-background) svg path,
|
||||||
fill: var(--button-foreground) !important;;
|
.button.primary:not(.no-image-background) svg path {
|
||||||
|
fill: var(--button-foreground) !important;
|
||||||
transition: all 250ms;
|
transition: all 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.disabled,
|
||||||
button.disabled, .button.disabled {
|
.button.disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
border: 2px dashed var(--button-background);
|
border: 2px dashed var(--button-background);
|
||||||
background: unset;
|
background: unset;
|
||||||
|
|
@ -273,8 +277,8 @@ button.disabled, .button.disabled {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.disabled:hover,
|
||||||
button.disabled:hover, .button.disabled:hover {
|
.button.disabled:hover {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
border: 2px dashed var(--button-background);
|
border: 2px dashed var(--button-background);
|
||||||
background: unset;
|
background: unset;
|
||||||
|
|
@ -288,23 +292,24 @@ button.link {
|
||||||
}
|
}
|
||||||
|
|
||||||
button.link:hover {
|
button.link:hover {
|
||||||
color:unset;
|
color: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive button.disabled svg path, .interactive .button.disabled svg path {
|
.interactive button.disabled svg path,
|
||||||
fill: var(--interactive-foreground) !important;;
|
.interactive .button.disabled svg path {
|
||||||
|
fill: var(--interactive-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.low-interaction button.disabled svg path,
|
||||||
.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path {
|
.low-interaction .button.disabled svg path {
|
||||||
fill: var(--low-interaction-foreground) !important;;
|
fill: var(--low-interaction-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal-background button.disabled svg path, .normal-background .button.disabled svg path {
|
.normal-background button.disabled svg path,
|
||||||
|
.normal-background .button.disabled svg path {
|
||||||
fill: var(--foreground-color) !important;
|
fill: var(--foreground-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.links-w-full a:not(.weblate-link) {
|
.links-w-full a:not(.weblate-link) {
|
||||||
display: flex;
|
display: flex;
|
||||||
column-gap: 0.25rem;
|
column-gap: 0.25rem;
|
||||||
|
|
@ -313,12 +318,14 @@ button.link:hover {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.soft, .button.soft {
|
button.soft,
|
||||||
|
.button.soft {
|
||||||
border: 2px solid var(--interactive-background);
|
border: 2px solid var(--interactive-background);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.soft:hover, .button.soft:hover {
|
button.soft:hover,
|
||||||
|
.button.soft:hover {
|
||||||
background-color: var(--interactive-background);
|
background-color: var(--interactive-background);
|
||||||
color: var(--interactive-foreground);
|
color: var(--interactive-foreground);
|
||||||
border: 2px solid var(--catch-detail-color-contrast);
|
border: 2px solid var(--catch-detail-color-contrast);
|
||||||
|
|
@ -356,8 +363,7 @@ select:hover {
|
||||||
border-color: var(--catch-detail-color-contrast);
|
border-color: var(--catch-detail-color-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.neutral-label {
|
||||||
.neutral-label{
|
|
||||||
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
|
/** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
|
||||||
* Placed here for autocompletion
|
* Placed here for autocompletion
|
||||||
*/
|
*/
|
||||||
|
|
@ -385,7 +391,7 @@ label.button {
|
||||||
label:hover:not(.neutral-label) {
|
label:hover:not(.neutral-label) {
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
border: 2px solid var(--interactive-contrast)
|
border: 2px solid var(--interactive-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
label:not(.no-image-background):not(.neutral-label) img {
|
label:not(.no-image-background):not(.neutral-label) img {
|
||||||
|
|
@ -442,7 +448,6 @@ textarea {
|
||||||
border: 2px dotted #ff9143;
|
border: 2px dotted #ff9143;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.warning {
|
.warning {
|
||||||
/* The class to convey important information, but not as grave as 'alert' */
|
/* The class to convey important information, but not as grave as 'alert' */
|
||||||
background-color: var(--low-interaction-background);
|
background-color: var(--low-interaction-background);
|
||||||
|
|
@ -493,7 +498,6 @@ textarea {
|
||||||
color: #7193bb;
|
color: #7193bb;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.literal-code {
|
.literal-code {
|
||||||
/* A codeblock */
|
/* A codeblock */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -517,7 +521,6 @@ textarea {
|
||||||
* Utility classes are there for a specific function to pin down browser behaviour (and cannot be changed)
|
* Utility classes are there for a specific function to pin down browser behaviour (and cannot be changed)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
.text-white a {
|
.text-white a {
|
||||||
/* Used solely in 'imageAttribution' and in many themes*/
|
/* Used solely in 'imageAttribution' and in many themes*/
|
||||||
color: var(--background-color);
|
color: var(--background-color);
|
||||||
|
|
@ -531,7 +534,6 @@ textarea {
|
||||||
display: block ruby;
|
display: block ruby;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.rounded-left-full {
|
.rounded-left-full {
|
||||||
border-bottom-left-radius: 999rem;
|
border-bottom-left-radius: 999rem;
|
||||||
border-top-left-radius: 999rem;
|
border-top-left-radius: 999rem;
|
||||||
|
|
@ -542,7 +544,6 @@ textarea {
|
||||||
border-top-right-radius: 999rem;
|
border-top-right-radius: 999rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.no-images img {
|
.no-images img {
|
||||||
/* Used solely in 'imageAttribution' and in many themes for the label*/
|
/* Used solely in 'imageAttribution' and in many themes for the label*/
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -560,7 +561,6 @@ textarea {
|
||||||
backdrop-filter: var(--low-interaction-background);
|
backdrop-filter: var(--low-interaction-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.no-weblate .weblate-link {
|
.no-weblate .weblate-link {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
@ -595,12 +595,10 @@ a.link-underline {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.zebra-table tr:nth-child(even) {
|
.zebra-table tr:nth-child(even) {
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/************************* MISC ELEMENTS *************************/
|
/************************* MISC ELEMENTS *************************/
|
||||||
|
|
||||||
.selected svg:not(.noselect *) path.selectable {
|
.selected svg:not(.noselect *) path.selectable {
|
||||||
|
|
@ -621,24 +619,21 @@ a.link-underline {
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.apply-fill path {
|
svg.apply-fill path {
|
||||||
fill: var(--svg-color)
|
fill: var(--svg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.compass_arrow {
|
.compass_arrow {
|
||||||
width: calc( 2.5rem - 1px ) ;
|
width: calc(2.5rem - 1px);
|
||||||
height: calc( 2.5rem - 1px )
|
height: calc(2.5rem - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.compass_arrow {
|
.compass_arrow {
|
||||||
width: calc( 2.75rem - 1px ) ;
|
width: calc(2.75rem - 1px);
|
||||||
height: calc( 2.75rem - 1px )
|
height: calc(2.75rem - 1px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@-webkit-keyframes glowing-drop-shadow {
|
@-webkit-keyframes glowing-drop-shadow {
|
||||||
from {
|
from {
|
||||||
filter: drop-shadow(5px 5px 60px rgb(128 128 128 / 0.6));
|
filter: drop-shadow(5px 5px 60px rgb(128 128 128 / 0.6));
|
||||||
|
|
@ -674,10 +669,8 @@ svg.apply-fill path {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/************************* LEGACY MARKER - CLEANUP BELOW ********************************/
|
/************************* LEGACY MARKER - CLEANUP BELOW ********************************/
|
||||||
|
|
||||||
|
|
||||||
.slideshow-item img {
|
.slideshow-item img {
|
||||||
/* Legacy: should be replace when the image element is ported to Svelte*/
|
/* Legacy: should be replace when the image element is ported to Svelte*/
|
||||||
height: var(--image-carousel-height);
|
height: var(--image-carousel-height);
|
||||||
|
|
@ -690,7 +683,6 @@ svg.apply-fill path {
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.min-h-32 {
|
.min-h-32 {
|
||||||
min-height: 8rem;
|
min-height: 8rem;
|
||||||
}
|
}
|
||||||
|
|
@ -698,3 +690,12 @@ svg.apply-fill path {
|
||||||
.max-w-full {
|
.max-w-full {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/************************* Experimental support for foldable devices ********************************/
|
||||||
|
@media (horizontal-viewport-segments: 2) {
|
||||||
|
.theme-list {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue