129 lines
2.6 KiB
SCSS
129 lines
2.6 KiB
SCSS
/*
|
|
* SPDX-FileCopyrightText: 2022 Johannes Loher
|
|
*
|
|
* SPDX-License-Identifier: MIT
|
|
*/
|
|
|
|
.ds4-form-group,
|
|
.ds4-item-sheet .form-group {
|
|
clear: both;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin: 8px 0;
|
|
align-items: center;
|
|
|
|
&--start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
& > * {
|
|
flex: 3;
|
|
}
|
|
|
|
&__label {
|
|
flex: 2;
|
|
line-height: var(--input-height);
|
|
}
|
|
|
|
// Add spacing between form groups
|
|
& + & {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
// Style for slim form groups (input + select combinations)
|
|
&.slim {
|
|
margin: 6px 0;
|
|
|
|
.form-fields {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
|
|
input {
|
|
flex: 1;
|
|
min-width: 60px;
|
|
}
|
|
|
|
select {
|
|
flex: 0 0 auto;
|
|
min-width: 120px;
|
|
width: auto !important;
|
|
}
|
|
|
|
label {
|
|
flex: 0 0 auto;
|
|
margin-right: 8px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Style standard Foundry form-fields containers
|
|
.ds4-item-sheet .form-fields {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
|
|
input, select, textarea {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 3px;
|
|
padding: 4px 8px;
|
|
color: var(--color-text-primary);
|
|
|
|
&:focus {
|
|
border-color: var(--color-text-accent);
|
|
box-shadow: 0 0 3px var(--color-text-accent);
|
|
}
|
|
}
|
|
|
|
select {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23efe6d8' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
|
|
background-repeat: no-repeat;
|
|
background-position: right 8px center;
|
|
background-size: 8px;
|
|
padding-right: 24px;
|
|
width: auto !important;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
// Dark mode: try to achieve dark background for select options
|
|
.theme-dark .ds4-item-sheet .form-fields select {
|
|
color-scheme: dark;
|
|
|
|
option {
|
|
background-color: var(--color-cool-4) !important;
|
|
background: var(--color-cool-4) !important;
|
|
color: var(--color-light-2) !important;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
option:checked {
|
|
background-color: var(--color-cool-3) !important;
|
|
background: var(--color-cool-3) !important;
|
|
color: var(--color-light-1) !important;
|
|
}
|
|
|
|
option:hover {
|
|
background-color: var(--color-cool-3) !important;
|
|
background: var(--color-cool-3) !important;
|
|
}
|
|
}
|
|
|
|
// Improve label styling
|
|
.ds4-item-sheet .form-group > label {
|
|
flex: 0 0 160px;
|
|
font-weight: bold;
|
|
color: var(--color-form-label);
|
|
line-height: var(--input-height);
|
|
margin-right: 12px;
|
|
}
|