Jason Zimdars
a3b81af1da
* main: (284 commits) Polish closed stamp Add new card button to considering column Let's leave inside the menu for now Improve terminal history behavior More space between Add a navigation hint, make "All collections" link navigate like the others Reorder methods Fix: dismiss notifications from comments Fix card icons Filter collections menus, add keyboard shortcuts Style Space between Remove debug Consistent sizing Configure deployment for load balancing Configure the autoclose period at the collection level Rename to avoid using the same name Add brakeman rule Collections can be private now too Not used outside the class anymore ...
263 lines
6.3 KiB
CSS
263 lines
6.3 KiB
CSS
@layer components {
|
|
/* Text inputs */
|
|
.input {
|
|
accent-color: var(--input-accent-color, var(--color-ink));
|
|
background-color: var(--input-background, transparent);
|
|
border-radius: var(--input-border-radius, 0.5em);
|
|
border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
|
|
color: var(--input-color, var(--color-ink));
|
|
font-size: max(16px, 1em);
|
|
inline-size: 100%;
|
|
line-height: inherit;
|
|
max-inline-size: 100%;
|
|
padding: var(--input-padding, 0.5em 0.8em);
|
|
resize: none;
|
|
|
|
&:autofill,
|
|
&:-webkit-autofill,
|
|
&:-webkit-autofill:hover,
|
|
&:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: var(--color-ink);
|
|
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
|
}
|
|
|
|
&:where(:not(:active)):focus {
|
|
--input-border-color: var(--color-selected-dark);
|
|
--hover-color: var(--color-selected-dark);
|
|
--outline-size: 0;
|
|
--outline-color: transparent;
|
|
|
|
filter: var(--hover-filter);
|
|
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
|
|
}
|
|
}
|
|
|
|
.input--file {
|
|
border: 0;
|
|
cursor: pointer;
|
|
display: grid;
|
|
inline-size: auto;
|
|
place-items: center;
|
|
|
|
> * {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
img {
|
|
border-radius: 0.4em;
|
|
}
|
|
|
|
input[type="file"] {
|
|
--input-border-color: transparent;
|
|
--input-border-radius: 8px;
|
|
|
|
block-size: 100%;
|
|
cursor: pointer;
|
|
font-size: 0;
|
|
inline-size: 100%;
|
|
overflow: clip;
|
|
|
|
&::file-selector-button {
|
|
appearance: none;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
}
|
|
|
|
&:focus,
|
|
&:focus-visible {
|
|
--input-border-color: var(--color-selected-dark);
|
|
--input-border-radius: 8px;
|
|
--input-border-size: 0.15rem;
|
|
}
|
|
}
|
|
|
|
&:is(.avatar) {
|
|
img,
|
|
input[type="file"] {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input--select {
|
|
--input-border-radius: 2em;
|
|
--input-padding: 0.5em 1.8em 0.5em 1.2em;
|
|
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
|
|
background-size: 0.5em;
|
|
background-position: center right 0.9em;
|
|
background-repeat: no-repeat;
|
|
text-align: start;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
option {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-ink);
|
|
}
|
|
}
|
|
|
|
.input--textarea {
|
|
--input-padding: 0;
|
|
|
|
line-height: inherit;
|
|
min-block-size: calc(3lh + (2 * var(--input-padding)));
|
|
min-inline-size: 100%;
|
|
padding-block: var(--input-padding);
|
|
padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2));
|
|
|
|
@supports (field-sizing: content) {
|
|
field-sizing: content;
|
|
max-block-size: calc(3lh + (2 * var(--input-padding)));
|
|
min-block-size: calc(1lh + (2 * var(--input-padding)));
|
|
}
|
|
}
|
|
|
|
.input--invisible {
|
|
background-color: transparent;
|
|
block-size: 5px;
|
|
border: none;
|
|
inline-size: 5px;
|
|
opacity: 0.1;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
/* Switches */
|
|
.switch {
|
|
block-size: 1.75em;
|
|
border-radius: 2em;
|
|
display: inline-flex;
|
|
inline-size: 3em;
|
|
position: relative;
|
|
|
|
&:has(:focus-visible) {
|
|
.switch__btn {
|
|
box-shadow:
|
|
0 0 0 var(--outline-size) var(--color-canvas),
|
|
0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
|
|
}
|
|
}
|
|
}
|
|
|
|
.switch__input {
|
|
block-size: 0;
|
|
inline-size: 0;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.switch__btn {
|
|
background-color: var(--color-ink-medium);
|
|
border-radius: 2em;
|
|
cursor: pointer;
|
|
inset: 0;
|
|
position: absolute;
|
|
transition: 150ms ease;
|
|
|
|
&::before {
|
|
background-color: var(--color-ink-inverted);
|
|
block-size: 1.35em;
|
|
border-radius: 50%;
|
|
content: "";
|
|
inline-size: 1.35em;
|
|
inset-block-end: 0.2em;
|
|
inset-inline-start: 0.2em;
|
|
position: absolute;
|
|
transition: 150ms ease;
|
|
}
|
|
|
|
.switch__input:disabled + & {
|
|
background-color: var(--color-ink-medium) !important;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.switch__input:checked + & {
|
|
background-color: var(--color-link);
|
|
|
|
&::before {
|
|
transform: translateX(1.2em);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Containers that act like (and contain) inputs */
|
|
.input--actor {
|
|
transition: box-shadow 150ms ease, outline-offset 150ms ease;
|
|
|
|
&:focus-within {
|
|
--input-border-color: var(--color-selected-dark);
|
|
--hover-color: var(--color-selected-dark);
|
|
--outline-size: 0;
|
|
|
|
filter: var(--hover-filter);
|
|
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
|
|
}
|
|
|
|
.input {
|
|
--input-padding: 0;
|
|
--input-border-radius: 0;
|
|
--input-background: transparent;
|
|
--input-border-size: 0;
|
|
--hover-size: 0;
|
|
--outline-size: 0;
|
|
--outline-color: transparent;
|
|
|
|
inline-size: 100%;
|
|
outline: 0;
|
|
}
|
|
|
|
&:has(.input:is(
|
|
:autofill,
|
|
:-webkit-autofill,
|
|
:-webkit-autofill:hover,
|
|
:-webkit-autofill:focus)) {
|
|
-webkit-text-fill-color: var(--color-text);
|
|
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
|
}
|
|
}
|
|
|
|
.input--hidden {
|
|
block-size: 0;
|
|
inline-size: 0;
|
|
opacity: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.input.boost__input {
|
|
--hover-size: 0;
|
|
--input-border-radius: 0;
|
|
--input-border-size: 0;
|
|
--input-padding: 0;
|
|
--outline-size: 0;
|
|
|
|
color: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
inline-size: min-content;
|
|
max-inline-size: 3ch;
|
|
min-inline-size: 1ch;
|
|
outline: none;
|
|
|
|
@supports (field-sizing: content) {
|
|
field-sizing: content;
|
|
max-inline-size: unset;
|
|
}
|
|
|
|
&:focus {
|
|
background-color: var(--color-highlight);
|
|
}
|
|
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|