mirror of
https://github.com/sissbruecker/linkding
synced 2024-11-29 14:50:20 +00:00
3ae9cf0420
* start converting * small fixes * reorganize theme files * cleanup search bar * increase spacing * small tweaks * fix select styles in Chrome * cleanup menus * improve button icons * restore badges * remove unused classes * restore some overrides * restore bookmark form * add summary outline * avoid layout shifts * restore bookmark details * increase border radius for modals * improve details modal * restore reader mode * restore settings * cleanup variables * start with dark theme * more dark theme... * more light theme... * more dark theme... * add postcss build * remove sass processor * update docker build * fix alt color * remove endless symbol * fix tests * update assets * remove sass files * fix docker build * cleanup spacing * improve theme * update test scripts * update CI workflow * fix test
515 lines
13 KiB
CSS
515 lines
13 KiB
CSS
/* Forms */
|
|
:root {
|
|
--input-bg-color: var(--body-color);
|
|
--input-disabled-bg-color: var(--gray-100);
|
|
--input-text-color: var(--text-color);
|
|
--input-hint-color: var(--secondary-text-color);
|
|
--input-border-color: var(--border-color);
|
|
--input-placeholder-color: var(--tertiary-text-color);
|
|
--input-box-shadow: var(--box-shadow-xs);
|
|
|
|
--checkbox-bg-color: var(--body-color);
|
|
--checkbox-checked-bg-color: var(--primary-color);
|
|
--checkbox-disabled-bg-color: var(--gray-100);
|
|
--checkbox-border-color: var(--border-color);
|
|
--checkbox-icon-color: #fff;
|
|
|
|
--switch-bg-color: var(--gray-300);
|
|
--switch-border-color: var(--gray-400);
|
|
--switch-toggle-color: #fff;
|
|
}
|
|
|
|
.form-group {
|
|
&:first-of-type {
|
|
margin-top: var(--unit-4);
|
|
}
|
|
&:not(:last-child) {
|
|
margin-bottom: var(--unit-4);
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
margin-bottom: var(--layout-spacing-lg);
|
|
}
|
|
|
|
legend {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 500;
|
|
margin-bottom: var(--layout-spacing-lg);
|
|
}
|
|
|
|
/* Form element: Label */
|
|
.form-label {
|
|
display: block;
|
|
line-height: var(--line-height);
|
|
margin-bottom: var(--unit-2);
|
|
font-weight: 500;
|
|
}
|
|
|
|
details summary .form-label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
details[open] summary .form-label {
|
|
margin-bottom: var(--unit-2);
|
|
}
|
|
|
|
/* Form element: Input */
|
|
.form-input {
|
|
appearance: none;
|
|
background: var(--input-bg-color);
|
|
background-image: none;
|
|
border: var(--border-width) solid var(--input-border-color);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--input-box-shadow);
|
|
color: var(--input-text-color);
|
|
display: block;
|
|
font-size: var(--font-size);
|
|
height: var(--control-size);
|
|
line-height: var(--line-height);
|
|
max-width: 100%;
|
|
outline: none;
|
|
padding: var(--control-padding-y) var(--control-padding-x);
|
|
position: relative;
|
|
transition: background 0.2s, border 0.2s, color 0.2s;
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
outline: var(--focus-outline);
|
|
outline-offset: calc(var(--focus-outline-offset) * -1);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--input-placeholder-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Input sizes */
|
|
|
|
&.input-sm {
|
|
font-size: var(--font-size-sm);
|
|
height: var(--control-size-sm);
|
|
padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
|
|
}
|
|
|
|
&.input-lg {
|
|
font-size: var(--font-size-lg);
|
|
height: var(--control-size-lg);
|
|
padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
|
|
}
|
|
|
|
&.input-inline {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: auto;
|
|
}
|
|
|
|
/* Input types */
|
|
|
|
&[type="file"] {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
/* Form element: Textarea */
|
|
textarea.form-input {
|
|
&,
|
|
&.input-lg,
|
|
&.input-sm {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
/* Form element: Input hint */
|
|
.form-input-hint {
|
|
color: var(--input-hint-color);
|
|
font-size: var(--font-size-sm);
|
|
margin-top: var(--unit-1);
|
|
|
|
.has-success &,
|
|
.is-success + & {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.has-error &,
|
|
.is-error + & {
|
|
color: var(--error-color);
|
|
}
|
|
}
|
|
|
|
/* Form element: Select */
|
|
.form-select {
|
|
appearance: none;
|
|
background: var(--input-bg-color);
|
|
border: var(--border-width) solid var(--input-border-color);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--input-box-shadow);
|
|
color: var(--input-text-color);
|
|
font-size: var(--font-size);
|
|
height: var(--control-size);
|
|
line-height: var(--line-height);
|
|
outline: none;
|
|
padding: var(--control-padding-y) var(--control-padding-x);
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
outline: var(--focus-outline);
|
|
outline-offset: calc(var(--focus-outline-offset) * -1);
|
|
}
|
|
|
|
/* Select sizes */
|
|
|
|
&.select-sm {
|
|
font-size: var(--font-size-sm);
|
|
height: var(--control-size-sm);
|
|
padding: var(--control-padding-y-sm) calc(var(--control-icon-size) + var(--control-padding-x-sm)) var(--control-padding-y-sm) var(--control-padding-x-sm);
|
|
}
|
|
|
|
&.select-lg {
|
|
font-size: var(--font-size-lg);
|
|
height: var(--control-size-lg);
|
|
padding: var(--control-padding-y-lg) calc(var(--control-icon-size) + var(--control-padding-x-lg)) var(--control-padding-y-lg) var(--control-padding-x-lg);
|
|
}
|
|
|
|
/* Multiple select */
|
|
|
|
&[size],
|
|
&[multiple] {
|
|
height: auto;
|
|
padding: var(--control-padding-y) var(--control-padding-x);
|
|
|
|
& option {
|
|
padding: var(--unit-h) var(--unit-1);
|
|
}
|
|
}
|
|
|
|
&:not([multiple]):not([size]) {
|
|
background: var(--input-bg-color) url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
|
|
padding-right: calc(var(--control-icon-size) + var(--control-padding-x));
|
|
}
|
|
}
|
|
|
|
/* Form element: Checkbox and Radio */
|
|
.form-checkbox,
|
|
.form-radio,
|
|
.form-switch {
|
|
display: block;
|
|
line-height: var(--line-height);
|
|
margin: calc((var(--control-size) - var(--control-size-sm)) / 2) 0;
|
|
min-height: var(--control-size-sm);
|
|
padding: calc((var(--control-size-sm) - var(--line-height)) / 2) var(--control-padding-x) calc((var(--control-size-sm) - var(--line-height)) / 2) calc(var(--control-icon-size) + var(--control-padding-x));
|
|
position: relative;
|
|
|
|
input {
|
|
clip: rect(0, 0, 0, 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
width: 1px;
|
|
|
|
&:focus-visible + .form-icon {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
|
|
&:checked + .form-icon {
|
|
background: var(--checkbox-checked-bg-color);
|
|
border-color: var(--checkbox-checked-bg-color);
|
|
}
|
|
}
|
|
|
|
.form-icon {
|
|
border: var(--border-width) solid var(--checkbox-border-color);
|
|
box-shadow: var(--input-box-shadow);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: absolute;
|
|
transition: background .2s, border .2s, color .2s;
|
|
}
|
|
|
|
/* Input checkbox, radio, and switch sizes */
|
|
|
|
&.input-sm {
|
|
font-size: var(--font-size-sm);
|
|
margin: 0;
|
|
}
|
|
|
|
&.input-lg {
|
|
font-size: var(--font-size-lg);
|
|
margin: calc((var(--control-size-lg) - var(--control-size-sm)) / 2) 0;
|
|
}
|
|
}
|
|
|
|
.form-checkbox,
|
|
.form-radio {
|
|
.form-icon {
|
|
background: var(--checkbox-bg-color);
|
|
height: var(--control-icon-size);
|
|
left: 0;
|
|
top: calc((var(--control-size-sm) - var(--control-icon-size)) / 2);
|
|
width: var(--control-icon-size);
|
|
}
|
|
}
|
|
|
|
.form-checkbox {
|
|
font-weight: 500;
|
|
|
|
.form-icon {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
input {
|
|
&:checked + .form-icon {
|
|
&::before {
|
|
background-clip: padding-box;
|
|
border: var(--border-width-lg) solid var(--checkbox-icon-color);
|
|
border-left-width: 0;
|
|
border-top-width: 0;
|
|
content: "";
|
|
height: 9px;
|
|
left: 50%;
|
|
margin-left: -3px;
|
|
margin-top: -6px;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: rotate(45deg);
|
|
width: 6px;
|
|
}
|
|
}
|
|
|
|
&:indeterminate + .form-icon {
|
|
background: var(--checkbox-checked-bg-color);
|
|
border-color: var(--checkbox-checked-bg-color);
|
|
|
|
&::before {
|
|
background: var(--checkbox-icon-color);
|
|
content: "";
|
|
height: 2px;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
margin-top: -1px;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-radio {
|
|
.form-icon {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input {
|
|
&:checked + .form-icon {
|
|
&::before {
|
|
background: var(--checkbox-icon-color);
|
|
border-radius: 50%;
|
|
content: "";
|
|
height: 6px;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Form element: Switch */
|
|
.form-switch {
|
|
padding-left: calc(var(--unit-8) + var(--control-padding-x));
|
|
|
|
.form-icon {
|
|
background: var(--switch-bg-color);
|
|
background-clip: padding-box;
|
|
border-color: var(--switch-border-color);
|
|
border-radius: calc(var(--unit-2) + var(--border-width));
|
|
height: calc(var(--unit-4) + var(--border-width) * 2);
|
|
left: 0;
|
|
top: calc((var(--control-size-sm) - var(--unit-4)) / 2 - var(--border-width));
|
|
width: var(--unit-8);
|
|
|
|
&::before {
|
|
background: var(--switch-toggle-color);
|
|
border-radius: 50%;
|
|
content: "";
|
|
display: block;
|
|
height: var(--unit-4);
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: background .2s, border .2s, color .2s, left .2s;
|
|
width: var(--unit-4);
|
|
}
|
|
}
|
|
|
|
input {
|
|
&:checked + .form-icon {
|
|
&::before {
|
|
left: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Form Icons */
|
|
.has-icon-left,
|
|
.has-icon-right {
|
|
position: relative;
|
|
|
|
.form-icon {
|
|
height: var(--control-icon-size);
|
|
margin: 0 var(--control-padding-y);
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: var(--control-icon-size);
|
|
z-index: calc(var(--zindex-0) + 1);
|
|
}
|
|
}
|
|
|
|
.has-icon-left {
|
|
& .form-icon {
|
|
left: var(--border-width);
|
|
}
|
|
|
|
& .form-input {
|
|
padding-left: calc(var(--control-icon-size) + var(--control-padding-y) * 2);
|
|
}
|
|
}
|
|
|
|
.has-icon-right {
|
|
& .form-icon {
|
|
right: var(--border-width);
|
|
}
|
|
|
|
& .form-input {
|
|
padding-right: calc(var(--control-icon-size) + var(--control-padding-y) * 2);
|
|
}
|
|
}
|
|
|
|
|
|
/* Form element: Input groups */
|
|
.input-group {
|
|
display: flex;
|
|
|
|
.input-group-addon {
|
|
background: var(--body-color);
|
|
border: var(--border-width) solid var(--input-border-color);
|
|
border-radius: var(--border-radius);
|
|
line-height: var(--line-height);
|
|
padding: var(--control-padding-y) var(--control-padding-x);
|
|
white-space: nowrap;
|
|
|
|
&.addon-sm {
|
|
font-size: var(--font-size-sm);
|
|
padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
|
|
}
|
|
|
|
&.addon-lg {
|
|
font-size: var(--font-size-lg);
|
|
padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
|
|
}
|
|
}
|
|
|
|
.form-input,
|
|
.form-select {
|
|
flex: 1 1 auto;
|
|
width: 1%;
|
|
}
|
|
|
|
.input-group-btn {
|
|
z-index: var(--zindex-0);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.input-group-addon,
|
|
.input-group-btn {
|
|
&:first-child:not(:last-child) {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
&:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
margin-left: calc(-1 * var(--border-width));
|
|
}
|
|
|
|
&:last-child:not(:first-child) {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
margin-left: calc(-1 * var(--border-width));
|
|
}
|
|
|
|
&:focus {
|
|
z-index: calc(var(--zindex-0) + 1);
|
|
}
|
|
}
|
|
|
|
.form-select {
|
|
width: auto;
|
|
}
|
|
|
|
&.input-inline {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
/* Form validation states */
|
|
.form-input,
|
|
.form-select {
|
|
.has-success &,
|
|
&.is-success {
|
|
background: var(--success-color-shade);
|
|
border-color: var(--success-color);
|
|
|
|
&:focus {
|
|
outline-color: var(--success-color);
|
|
}
|
|
}
|
|
|
|
.has-error &,
|
|
&.is-error {
|
|
background: var(--error-color-shade);
|
|
border-color: var(--error-color);
|
|
|
|
&:focus {
|
|
outline-color: var(--error-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Form disabled and readonly */
|
|
.form-input,
|
|
.form-select {
|
|
&:disabled,
|
|
&.disabled {
|
|
background-color: var(--input-disabled-bg-color);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
input {
|
|
&:disabled,
|
|
&.disabled {
|
|
& + .form-icon {
|
|
background: var(--checkbox-disabled-bg-color);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Increase input font size on small viewports to prevent zooming on focus the input */
|
|
/* on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max */
|
|
/* viewport size */
|
|
@media screen and (max-width: 430px) {
|
|
.form-input {
|
|
font-size: 16px;
|
|
}
|
|
}
|