mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-12-14 19:42:14 +03:00
10f5ceee35
Updated setting display to show mulitple number inputs under one heading group. Updated settings to use general number field form view template. Updated translations to match display changes, and to advise on counts. Added page count control for search results. Added setting service method, to get settings as integers, with min/max/default control. Updating sorting group to be names "Lists & Sorting". Added tests to cover.
604 lines
12 KiB
SCSS
604 lines
12 KiB
SCSS
@use "sass:math";
|
|
|
|
@use "mixins";
|
|
@use "vars";
|
|
|
|
|
|
.input-base {
|
|
border-radius: 3px;
|
|
border: 1px solid #D4D4D4;
|
|
@include mixins.lightDark(background-color, #fff, #333);
|
|
@include mixins.lightDark(border-color, #d4d4d4, #111);
|
|
@include mixins.lightDark(color, #666, #AAA);
|
|
display: inline-block;
|
|
font-size: vars.$fs-m;
|
|
padding: vars.$xs*1.8;
|
|
height: 40px;
|
|
width: 250px;
|
|
max-width: 100%;
|
|
|
|
&.neg, &.invalid {
|
|
border: 1px solid var(--color-negative);
|
|
}
|
|
&.pos, &.valid {
|
|
border: 1px solid var(--color-positive);
|
|
}
|
|
&.disabled, &[disabled] {
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
|
|
}
|
|
&[readonly] {
|
|
background-color: #f8f8f8;
|
|
}
|
|
&:focus {
|
|
border-color: var(--color-primary);
|
|
outline: 1px solid var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.input-fill-width {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.fake-input {
|
|
@extend .input-base;
|
|
overflow: auto;
|
|
}
|
|
|
|
#html-editor {
|
|
display: none;
|
|
}
|
|
|
|
#markdown-editor {
|
|
position: relative;
|
|
z-index: 5;
|
|
#markdown-editor-input {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
padding: vars.$xs vars.$m;
|
|
@include mixins.lightDark(color, #444, #aaa);
|
|
@include mixins.lightDark(background-color, #fff, #222);
|
|
border-radius: 0;
|
|
height: 100%;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
max-height: 100%;
|
|
flex: 1;
|
|
border: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
&.fullscreen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.markdown-editor-wrap {
|
|
border-top: 1px solid #DDD;
|
|
border-bottom: 1px solid #DDD;
|
|
@include mixins.lightDark(border-color, #ddd, #000);
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.markdown-editor-wrap + .markdown-editor-wrap {
|
|
flex-basis: 50%;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.markdown-editor-wrap .cm-editor {
|
|
flex: 1;
|
|
max-width: 100%;
|
|
border: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.markdown-panel-divider {
|
|
width: 2px;
|
|
@include mixins.lightDark(background-color, #ddd, #000);
|
|
cursor: col-resize;
|
|
}
|
|
|
|
@include mixins.smaller-than(vars.$bp-m) {
|
|
#markdown-editor {
|
|
flex-direction: column;
|
|
}
|
|
#markdown-editor .markdown-editor-wrap {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
flex-grow: 1;
|
|
flex-basis: auto !important;
|
|
min-height: 0;
|
|
}
|
|
.editor-toolbar-label {
|
|
float: none !important;
|
|
@include mixins.lightDark(border-color, #DDD, #555);
|
|
display: block;
|
|
}
|
|
.markdown-editor-wrap:not(.active) .editor-toolbar + div,
|
|
.markdown-editor-wrap:not(.active) .editor-toolbar .buttons,
|
|
.markdown-editor-wrap:not(.active) .markdown-display {
|
|
display: none;
|
|
}
|
|
#markdown-editor .markdown-editor-wrap:not(.active) {
|
|
flex-grow: 0;
|
|
flex: none;
|
|
}
|
|
}
|
|
|
|
.markdown-editor-display {
|
|
background-color: #fff;
|
|
body {
|
|
display: block;
|
|
background-color: #fff;
|
|
padding-inline-start: 12px;
|
|
padding-inline-end: 12px;
|
|
max-width: 864px;
|
|
}
|
|
[drawio-diagram]:hover {
|
|
outline: 2px solid var(--color-primary);
|
|
}
|
|
}
|
|
|
|
html.markdown-editor-display.dark-mode {
|
|
background-color: #222;
|
|
body {
|
|
background-color: #222;
|
|
}
|
|
}
|
|
|
|
.editor-toolbar {
|
|
height: 32px;
|
|
width: 100%;
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
border-bottom: 1px solid #CCC;
|
|
@include mixins.lightDark(background-color, #FFF, #333);
|
|
@include mixins.lightDark(border-color, #CCC, #000);
|
|
flex: none;
|
|
@include mixins.whenDark {
|
|
button {
|
|
color: #AAA;
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor-toolbar .buttons {
|
|
font-size: vars.$fs-m;
|
|
.dropdown-menu {
|
|
padding: 0;
|
|
}
|
|
.toggle-switch {
|
|
margin: vars.$s 0;
|
|
}
|
|
}
|
|
|
|
.editor-toolbar .buttons button {
|
|
font-size: .9rem;
|
|
width: 2rem;
|
|
text-align: center;
|
|
border-left: 1px solid;
|
|
@include mixins.lightDark(border-color, #DDD, #555);
|
|
svg {
|
|
margin-inline-end: 0;
|
|
}
|
|
&:hover {
|
|
@include mixins.lightDark(background-color, #DDD, #222);
|
|
}
|
|
}
|
|
|
|
|
|
label {
|
|
@include mixins.lightDark(color, #666, #ddd);
|
|
display: block;
|
|
line-height: 1.4em;
|
|
font-size: 0.94em;
|
|
font-weight: 400;
|
|
padding-bottom: 2px;
|
|
margin-bottom: 0.2em;
|
|
&.inline {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
label.radio, label.checkbox {
|
|
font-weight: 400;
|
|
user-select: none;
|
|
input[type="radio"], input[type="checkbox"] {
|
|
margin-inline-end: vars.$xs;
|
|
}
|
|
}
|
|
|
|
label.inline.checkbox {
|
|
margin-inline-end: vars.$m;
|
|
}
|
|
|
|
label + p.small {
|
|
margin-bottom: 0.8em;
|
|
}
|
|
|
|
table.form-table {
|
|
max-width: 100%;
|
|
td {
|
|
overflow: hidden;
|
|
padding: math.div(vars.$xxs, 2) 0;
|
|
}
|
|
}
|
|
|
|
input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"],
|
|
input[type="color"], input[type="password"], select, textarea {
|
|
@extend .input-base;
|
|
}
|
|
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23666666'><polygon points='0,0 100,0 50,50'/></svg>");
|
|
background-size: 10px 12px;
|
|
background-position: calc(100% - 20px) 64%;
|
|
background-repeat: no-repeat;
|
|
|
|
@include mixins.rtl {
|
|
background-position: 20px 70%;
|
|
}
|
|
}
|
|
|
|
input[type=date] {
|
|
width: 190px;
|
|
}
|
|
|
|
input[type=color] {
|
|
height: 60px;
|
|
&.small {
|
|
height: 42px;
|
|
width: 60px;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
|
|
.toggle-switch {
|
|
user-select: none;
|
|
display: inline-grid;
|
|
grid-template-columns: (16px + vars.$s) 1fr;
|
|
align-items: center;
|
|
margin: vars.$m 0;
|
|
.custom-checkbox {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
border: 2px solid currentColor;
|
|
overflow: hidden;
|
|
fill: currentColor;
|
|
.svg-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
bottom: auto;
|
|
top: -1.5px;
|
|
left: 0;
|
|
transition: transform ease-in-out 120ms;
|
|
transform: scale(0);
|
|
transform-origin: center center;
|
|
}
|
|
}
|
|
input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
input[type=checkbox]:checked + .custom-checkbox .svg-icon {
|
|
transform: scale(1);
|
|
}
|
|
.custom-checkbox:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
opacity: 0.8;
|
|
}
|
|
input[type=checkbox][disabled] ~ * {
|
|
opacity: 0.8;
|
|
cursor: not-allowed;
|
|
}
|
|
input[type=checkbox][disabled] ~ .custom-checkbox {
|
|
border-color: #999;
|
|
color: #999 !important;
|
|
background: #f2f2f2;
|
|
}
|
|
}
|
|
.toggle-switch-list {
|
|
.toggle-switch {
|
|
margin: vars.$xs 0;
|
|
}
|
|
&.compact .toggle-switch {
|
|
margin: 1px 0;
|
|
}
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: vars.$s;
|
|
}
|
|
|
|
.setting-list > div {
|
|
border-bottom: 1px solid #DDD;
|
|
padding: vars.$xl 0;
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
.setting-list-label {
|
|
@include mixins.lightDark(color, #222, #DDD);
|
|
color: #222;
|
|
font-size: 1rem;
|
|
}
|
|
.setting-list-label + p.small {
|
|
margin-bottom: 0;
|
|
}
|
|
.setting-list-label + .grid {
|
|
margin-top: vars.$m;
|
|
}
|
|
|
|
.setting-list .grid, .stretch-inputs {
|
|
input[type=text], input[type=email], input[type=password], select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.small-inputs input {
|
|
width: 150px;
|
|
}
|
|
|
|
.simple-code-input {
|
|
background-color: #F8F8F8;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
min-height: 100px;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-group {
|
|
div.text-pos, div.text-neg, p.text-post, p.text-neg {
|
|
padding: vars.$xs 0;
|
|
}
|
|
}
|
|
|
|
.form-group.collapsible {
|
|
padding: 0 vars.$m;
|
|
border: 1px solid;
|
|
@include mixins.lightDark(border-color, #DDD, #000);
|
|
border-radius: 4px;
|
|
.collapse-title {
|
|
margin-inline-start: -(vars.$m);
|
|
margin-inline-end: -(vars.$m);
|
|
padding: vars.$s vars.$m;
|
|
display: block;
|
|
width: calc(100% + 32px);
|
|
text-align: start;
|
|
}
|
|
.collapse-title, .collapse-title label {
|
|
cursor: pointer;
|
|
}
|
|
.collapse-title label {
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
color: inherit;
|
|
}
|
|
.collapse-title label:before {
|
|
display: inline-block;
|
|
content: '▸';
|
|
margin-inline-end: vars.$m;
|
|
transition: all ease-in-out 400ms;
|
|
transform: rotate(0);
|
|
}
|
|
.collapse-content {
|
|
display: none;
|
|
padding-bottom: vars.$m;
|
|
}
|
|
&.open .collapse-title label:before {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.form-group.ambrosia-container, .form-group.ambrosia-container * {
|
|
position:absolute !important;
|
|
height:1px !important;
|
|
width:1px !important;
|
|
margin:-1px !important;
|
|
padding:0 !important;
|
|
background:transparent !important;
|
|
color:transparent !important;
|
|
border:none !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0,0,0,0) !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.title-input input[type="text"] {
|
|
display: block;
|
|
width: 100%;
|
|
padding: vars.$s;
|
|
margin-top: 0;
|
|
font-size: 2em;
|
|
height: auto;
|
|
}
|
|
|
|
.description-input textarea {
|
|
display: block;
|
|
width: 100%;
|
|
padding: vars.$s;
|
|
font-size: vars.$fs-m;
|
|
color: #666;
|
|
height: auto;
|
|
}
|
|
|
|
.description-input > .tox-tinymce {
|
|
border: 1px solid #DDD !important;
|
|
@include mixins.lightDark(border-color, #DDD !important, #000 !important);
|
|
border-radius: 3px;
|
|
.tox-toolbar__primary {
|
|
justify-content: end;
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
max-width: 100%;
|
|
position: relative;
|
|
button[tabindex="-1"] {
|
|
background-color: transparent;
|
|
border: none;
|
|
@include mixins.lightDark(color, #666, #AAA);
|
|
padding: 0;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
inset-inline-start: 8px;
|
|
top: 10px;
|
|
}
|
|
input {
|
|
display: block;
|
|
padding: vars.$xs * 1.5;
|
|
padding-inline-start: vars.$l + 4px;
|
|
width: 300px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
&.flexible input {
|
|
width: 100%;
|
|
}
|
|
button.search-box-cancel {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.contained-search-box {
|
|
display: flex;
|
|
height: 38px;
|
|
z-index: -1;
|
|
&.floating {
|
|
box-shadow: vars.$bs-med;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
@include mixins.whenDark {
|
|
border: 1px solid #000;
|
|
}
|
|
}
|
|
input, button {
|
|
height: 100%;
|
|
border-radius: 0;
|
|
border: 1px solid #ddd;
|
|
@include mixins.lightDark(border-color, #ddd, #000);
|
|
margin-inline-start: -1px;
|
|
&:last-child {
|
|
border-inline-end: 0;
|
|
}
|
|
}
|
|
input {
|
|
border: 0;
|
|
flex: 5;
|
|
padding: vars.$xs vars.$s;
|
|
&:focus, &:active {
|
|
outline: 1px dotted var(--color-primary);
|
|
outline-offset: -2px;
|
|
border: 0;
|
|
}
|
|
}
|
|
button {
|
|
border: 0;
|
|
width: 48px;
|
|
border-inline-start: 1px solid #DDD;
|
|
background-color: #FFF;
|
|
@include mixins.lightDark(background-color, #FFF, #333);
|
|
@include mixins.lightDark(color, #444, #AAA);
|
|
}
|
|
button:focus {
|
|
outline: 1px dotted var(--color-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
svg {
|
|
margin: 0;
|
|
}
|
|
@include mixins.smaller-than(vars.$bp-s) {
|
|
width: 180px;
|
|
}
|
|
}
|
|
|
|
.outline > input {
|
|
border: 0;
|
|
border-bottom: 2px solid #DDD;
|
|
border-radius: 0;
|
|
&:focus, &:active {
|
|
border: 0;
|
|
border-bottom: 2px solid #AAA;
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.image-picker img {
|
|
background-color: #BBB;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.custom-file-input {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
height: 1px;
|
|
border: 0;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
.custom-file-input:focus + label {
|
|
border-color: var(--color-primary);
|
|
outline: 1px solid var(--color-primary);
|
|
}
|
|
|
|
.custom-simple-file-input {
|
|
max-width: 100%;
|
|
border: 1px solid;
|
|
@include mixins.lightDark(border-color, #DDD, #666);
|
|
border-radius: 4px;
|
|
padding: vars.$s vars.$m;
|
|
}
|
|
.custom-simple-file-input::file-selector-button {
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
line-height: 1.4em;
|
|
padding: vars.$xs vars.$s;
|
|
border: 1px solid;
|
|
font-weight: 400;
|
|
outline: 0;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-right: vars.$m;
|
|
@include mixins.lightDark(color, #666, #AAA);
|
|
@include mixins.lightDark(border-color, #CCC, #666);
|
|
&:hover, &:focus, &:active {
|
|
@include mixins.lightDark(color, #444, #BBB);
|
|
border: 1px solid #CCC;
|
|
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
|
|
background-color: #F2F2F2;
|
|
@include mixins.lightDark(background-color, #f8f8f8, #444);
|
|
filter: none;
|
|
}
|
|
&:active {
|
|
border-color: #BBB;
|
|
background-color: #DDD;
|
|
color: #666;
|
|
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
input.shortcut-input {
|
|
width: auto;
|
|
max-width: 120px;
|
|
height: auto;
|
|
}
|