Merge develop
This commit is contained in:
commit
d9a64dc3a8
157 changed files with 3657 additions and 1552 deletions
|
|
@ -900,6 +900,10 @@ video {
|
|||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
@ -932,10 +936,6 @@ video {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
|
@ -2356,7 +2356,7 @@ input {
|
|||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -2379,12 +2379,12 @@ input[type=text] {
|
|||
|
||||
.low-interaction {
|
||||
background: var(--low-interaction-background);
|
||||
color: var(--low-interaction-foreground)
|
||||
color: var(--low-interaction-foreground);
|
||||
}
|
||||
|
||||
.interactive {
|
||||
background: var(--interactive-background);
|
||||
color: var(--interactive-foreground)
|
||||
color: var(--interactive-foreground);
|
||||
}
|
||||
|
||||
.border-interactive {
|
||||
|
|
@ -2403,7 +2403,8 @@ input[type=text] {
|
|||
* 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;
|
||||
margin: 0;
|
||||
margin-left: 0.5rem;
|
||||
|
|
@ -2424,7 +2425,30 @@ button.small, .button.small {
|
|||
color: var(--low-interaction-foreground);
|
||||
}
|
||||
|
||||
button, .button {
|
||||
.button.theme-button {
|
||||
margin: 0;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
/* Margin should be removed on larger screens */
|
||||
@media (min-width: 768px) {
|
||||
margin: 0;
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* Experimental support for foldable devices */
|
||||
@media (horizontal-viewport-segments: 2) {
|
||||
margin: 0;
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
line-height: 1.25rem;
|
||||
|
|
@ -2447,60 +2471,72 @@ button, .button {
|
|||
box-shadow: 0 5px 10px #88888888;
|
||||
}
|
||||
|
||||
button.selected, .button.selected {
|
||||
button.selected,
|
||||
.button.selected {
|
||||
background-color: var(--catch-detail-color);
|
||||
border-color: var(--catch-detail-color);
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
.interactive button, .interactive .button {
|
||||
.interactive button,
|
||||
.interactive .button {
|
||||
background: var(--interactive-background);
|
||||
color: var(--interactive-foreground);
|
||||
}
|
||||
|
||||
button:hover, .button:hover {
|
||||
button:hover,
|
||||
.button:hover {
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
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);
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
button.primary, .button.primary {
|
||||
button.primary,
|
||||
.button.primary {
|
||||
color: var(--button-foreground);
|
||||
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;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
button.disabled.low-interaction, .button.disabled.low-interaction {
|
||||
button.disabled.low-interaction,
|
||||
.button.disabled.low-interaction {
|
||||
background-color: var(--low-interaction-background-50);
|
||||
}
|
||||
|
||||
button.disabled, .button.disabled {
|
||||
button.disabled,
|
||||
.button.disabled {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
|
|
@ -2508,7 +2544,8 @@ button.disabled, .button.disabled {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
button.disabled:hover, .button.disabled:hover {
|
||||
button.disabled:hover,
|
||||
.button.disabled:hover {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
|
|
@ -2522,18 +2559,21 @@ button.link {
|
|||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -2546,12 +2586,14 @@ button.link:hover {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
button.soft, .button.soft {
|
||||
button.soft,
|
||||
.button.soft {
|
||||
border: 2px solid var(--interactive-background);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.soft:hover, .button.soft:hover {
|
||||
button.soft:hover,
|
||||
.button.soft:hover {
|
||||
background-color: var(--interactive-background);
|
||||
color: var(--interactive-foreground);
|
||||
border: 2px solid var(--catch-detail-color-contrast);
|
||||
|
|
@ -2589,7 +2631,7 @@ select:hover {
|
|||
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.
|
||||
* Placed here for autocompletion
|
||||
*/
|
||||
|
|
@ -2617,7 +2659,7 @@ label.button {
|
|||
label:hover:not(.neutral-label) {
|
||||
background-color: var(--catch-detail-color);
|
||||
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 {
|
||||
|
|
@ -2725,7 +2767,8 @@ textarea {
|
|||
color: #7193bb;
|
||||
}
|
||||
|
||||
.literal-code, code {
|
||||
.literal-code,
|
||||
code {
|
||||
/* A codeblock */
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
|
|
@ -2848,18 +2891,18 @@ a.link-underline {
|
|||
}
|
||||
|
||||
svg.apply-fill path {
|
||||
fill: var(--svg-color)
|
||||
fill: var(--svg-color);
|
||||
}
|
||||
|
||||
.compass_arrow {
|
||||
width: calc( 2.5rem - 1px ) ;
|
||||
height: calc( 2.5rem - 1px )
|
||||
width: calc(2.5rem - 1px);
|
||||
height: calc(2.5rem - 1px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.compass_arrow {
|
||||
width: calc( 2.75rem - 1px ) ;
|
||||
height: calc( 2.75rem - 1px )
|
||||
width: calc(2.75rem - 1px);
|
||||
height: calc(2.75rem - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2940,6 +2983,16 @@ svg.apply-fill path {
|
|||
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 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue