Styling: style most buttons
This commit is contained in:
parent
e04430b428
commit
83f3662b9a
46 changed files with 720 additions and 671 deletions
166
index.css
166
index.css
|
|
@ -88,7 +88,7 @@ li::marker {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: x-large;
|
||||
font-size: xx-large;
|
||||
margin-top: 0.6em;
|
||||
margin-bottom: 0.4em;
|
||||
font-weight: bold;
|
||||
|
|
@ -96,7 +96,7 @@ h1 {
|
|||
|
||||
|
||||
h2 {
|
||||
font-size: large;
|
||||
font-size: x-large;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.3em;
|
||||
font-weight: bold;
|
||||
|
|
@ -157,31 +157,6 @@ input {
|
|||
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
||||
*/
|
||||
|
||||
button.disabled {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
color: unset;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button.disabled:hover {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border: 2px solid var(--catch-detail-color-contrast);
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
}
|
||||
|
||||
button:hover img {
|
||||
background: var(--low-interaction-background);
|
||||
border-radius: 100rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
|
|
@ -192,16 +167,17 @@ button {
|
|||
padding-right: 0.6rem;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
color: var(--button-foreground);
|
||||
background: var(--button-background);
|
||||
/*-- invisible border: rendered on hover*/
|
||||
border: 2px solid var(--button-background);
|
||||
border-radius: 0.5rem;
|
||||
transition: all 250ms;
|
||||
--tw-text-opacity: 1;
|
||||
--tw-bg-opacity: 1;
|
||||
background: var(--low-interaction-background);
|
||||
color: var(--low-interaction-foreground);
|
||||
}
|
||||
|
||||
|
||||
button .button-shadow {
|
||||
box-shadow: 0 5px 10px #88888888;
|
||||
}
|
||||
|
|
@ -217,14 +193,71 @@ button.selected svg path {
|
|||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
button svg path {
|
||||
button:not(.no-image-background) svg path {
|
||||
fill: var(--interactive-foreground) !important;;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
.interactive button {
|
||||
background: var(--interactive-background);
|
||||
color: var(--interactive-foreground);
|
||||
}
|
||||
|
||||
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 {
|
||||
background: var(--low-interaction-background);
|
||||
border-radius: 100rem;
|
||||
}
|
||||
|
||||
|
||||
button:hover:not(.no-image-background) svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;;
|
||||
}
|
||||
|
||||
button.disabled:hover:not(.no-image-background) svg path {
|
||||
fill: var(--low-interaction-foreground) !important;;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button.primary {
|
||||
color: var(--button-foreground);
|
||||
background: var(--button-background);
|
||||
}
|
||||
|
||||
button.primary:not(.no-image-background) svg path {
|
||||
fill: var(--button-foreground) !important;;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
|
||||
button.disabled {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
color: unset;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
button.disabled:hover {
|
||||
cursor: default;
|
||||
border: 2px dashed var(--button-background);
|
||||
background: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.interactive button.disabled svg path {
|
||||
fill: var(--interactive-foreground) !important;;
|
||||
}
|
||||
|
||||
|
||||
.low-interaction button.disabled svg path {
|
||||
fill: var(--low-interaction-foreground) !important;;
|
||||
}
|
||||
|
|
@ -233,49 +266,7 @@ button svg path {
|
|||
fill: var(--foreground-color) !important;
|
||||
}
|
||||
|
||||
button.disabled.secondary:hover {
|
||||
background: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: var(--low-interaction-background);
|
||||
color: var(--low-interaction-foreground);
|
||||
border-color: var(--button-background);
|
||||
}
|
||||
|
||||
.interactive button.secondary {
|
||||
background: var(--interactive-background);
|
||||
color: var(--interactive-foreground);
|
||||
}
|
||||
|
||||
button.secondary svg path {
|
||||
fill: var(--low-interaction-foreground) !important;
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
button.secondary.disabled {
|
||||
background: unset;
|
||||
color: var(--low-interaction-foreground);
|
||||
}
|
||||
|
||||
button.secondary.disabled svg path {
|
||||
fill: var(--low-interaction-foreground) !important;
|
||||
}
|
||||
|
||||
button.secondary:hover {
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--catch-detail-foregroundcolor);
|
||||
border-color: var(--catch-detail-color-contrast);
|
||||
}
|
||||
|
||||
button.secondary:hover svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;;
|
||||
}
|
||||
|
||||
button.secondary.disabled:hover svg path {
|
||||
fill: var(--low-interaction-foreground) !important;;
|
||||
}
|
||||
|
||||
label {
|
||||
/**
|
||||
|
|
@ -317,15 +308,18 @@ label.checked {
|
|||
border: 2px solid var(--foreground-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.active-links a{
|
||||
/*
|
||||
* Let a 'link' mimick a secondary button, but not entirely
|
||||
*/
|
||||
display: block;
|
||||
.links-w-full a {
|
||||
display: flex;
|
||||
column-gap: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.links-as-button a{
|
||||
/*
|
||||
* Let a 'link' mimick a button, but not entirely
|
||||
*/
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background: var(--low-interaction-background);
|
||||
|
|
@ -335,13 +329,13 @@ label.checked {
|
|||
}
|
||||
|
||||
|
||||
.active-links a:hover {
|
||||
.links-as-button 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 {
|
||||
.links-as-button a:hover svg path {
|
||||
fill: var(--catch-detail-foregroundcolor) !important;
|
||||
}
|
||||
|
||||
|
|
@ -354,12 +348,15 @@ label.checked {
|
|||
|
||||
.thanks {
|
||||
/* The class to indicate 'operation successful' or 'thank you for contributing' */
|
||||
background-color: #43d904;
|
||||
font-weight: bold;
|
||||
border-radius: 1em;
|
||||
margin: 0.25em;
|
||||
text-align: center;
|
||||
padding: 0.15em 0.3em;
|
||||
padding: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
border: 3px dotted #58cd27;
|
||||
background-color: #58cd2722;
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
|
@ -371,6 +368,7 @@ label.checked {
|
|||
margin: 0.25em;
|
||||
text-align: center;
|
||||
padding: 0.15em 0.3em;
|
||||
border: 2px dotted #ff9143;
|
||||
}
|
||||
|
||||
.subtle {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue