X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/067cb9c5b7b020da6dda398773cd7236fa3b51f2..refs/pull/5313/head:/resources/sass/styles.scss diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss index 74e4a4fde..636367e3a 100644 --- a/resources/sass/styles.scss +++ b/resources/sass/styles.scss @@ -1,7 +1,10 @@ +@use "sass:math"; + @import "reset"; @import "variables"; @import "mixins"; @import "spacing"; +@import "opacity"; @import "html"; @import "text"; @import "colors"; @@ -12,15 +15,17 @@ @import "forms"; @import "animations"; @import "tinymce"; +@import "editor"; @import "codemirror"; @import "components"; @import "header"; +@import "footer"; @import "lists"; @import "pages"; +@import "content"; -[v-cloak] { - display: none; opacity: 0; - animation-name: none !important; +@media print { + @import "print"; } // Jquery Sortable Styles @@ -36,7 +41,7 @@ body.dragging, body.dragging * { // User Avatar Images .avatar { border-radius: 100%; - background-color: #EEE; + @include lightDark(background-color, #eee, #000); width: 30px; height: 30px; &.med { @@ -54,6 +59,11 @@ body.dragging, body.dragging * { &.square { border-radius: 3px; } + &[src$="user_avatar.png"] { + @include whenDark { + filter: invert(1); + } + } } // Loading icon @@ -76,17 +86,17 @@ $loadingSize: 10px; animation-timing-function: cubic-bezier(.62, .28, .23, .99); margin-inline-end: 4px; background-color: var(--color-page); - animation-delay: 0.3s; + animation-delay: -300ms; } > div:first-child { left: -($loadingSize+$-xs); background-color: var(--color-book); - animation-delay: 0s; + animation-delay: -600ms; } > div:last-of-type { left: $loadingSize+$-xs; background-color: var(--color-chapter); - animation-delay: 0.6s; + animation-delay: 0ms; } > span { margin-inline-start: $-s; @@ -96,66 +106,20 @@ $loadingSize: 10px; } } -// Back to top link -$btt-size: 40px; -[back-to-top] { - background-color: var(--color-primary); +.skip-to-content-link { position: fixed; - bottom: $-m; - right: $-l; - padding: 5px 7px; - cursor: pointer; - color: #FFF; - fill: #FFF; - svg { - width: $btt-size / 1.5; - height: $btt-size / 1.5; - margin-inline-end: 4px; - } - width: $btt-size; - height: $btt-size; - border-radius: $btt-size; - transition: all ease-in-out 180ms; - opacity: 0; - z-index: 999; - overflow: hidden; - &:hover { - width: $btt-size*3.4; - opacity: 1 !important; - } - .inner { - width: $btt-size*3.4; - } - span { - position: relative; - vertical-align: top; - line-height: 2; - } -} - -.contained-search-box { - display: flex; - input, button { - border-radius: 0; - border: 1px solid #DDD; - margin-inline-start: -1px; - } - input { - flex: 5; - padding: $-xs $-s; - &:focus, &:active { - outline: 0; - } - } - button { - width: 60px; - } - button i { - padding: 0; - } - button.cancel.active { - background-color: $negative; - color: #EEE; + top: -52px; + left: 0; + background-color: #FFF; + z-index: 15; + border-radius: 0 4px 4px 0; + display: block; + box-shadow: $bs-dark; + font-weight: bold; + &:focus { + top: $-xl; + outline-offset: -10px; + outline: 2px dotted var(--color-link); } } @@ -187,53 +151,28 @@ $btt-size: 40px; .entity-list-item p { margin-bottom: 0; } + .entity-list-item:focus { + outline: 2px dotted var(--color-primary); + outline-offset: -4px; + } .entity-list-item.selected { - background-color: rgba(0, 0, 0, 0.05) !important; + @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); } .loading { height: 400px; padding-top: $-l; } - .entity-selector-add button { - margin: 0; - display: block; - width: 100%; - border: 0; - border-top: 1px solid #DDD; - } &.compact { font-size: 10px; .entity-item-snippet { display: none; } - } -} - -.scroll-box { - max-height: 250px; - overflow-y: scroll; - border: 1px solid #DDD; - border-radius: 3px; - .scroll-box-item { - padding: $-xs $-m; - border-bottom: 1px solid #DDD; - border-top: 1px solid #DDD; - margin-top: -1px; - &:last-child { - border-bottom: 0; + h4 { + font-size: 14px; } } } -.scroll-box[data-instruction]:before { - content: attr(data-instruction); - padding: $-xs $-m; - border-bottom: 1px solid #DDD; - display: block; - font-size: 0.75rem; - color: #666; -} - .fullscreen { border:0; position:fixed; @@ -246,6 +185,14 @@ $btt-size: 40px; z-index: 150; } +@include between($s, $m) { + #home-default > .grid.third { + display: block; + columns: 2; + column-gap: $-l !important; + } +} + .list-sort-container { display: inline-block; form { @@ -257,12 +204,13 @@ $btt-size: 40px; grid-template-columns: minmax(120px, max-content) 40px; font-size: 0.9rem; border: 2px solid #DDD; + @include lightDark(border-color, #ddd, #444); border-radius: 4px; } .list-sort-label { font-weight: bold; display: inline-block; - color: #555; + @include lightDark(color, #555, #888); } .list-sort-type { text-align: start; @@ -273,7 +221,8 @@ $btt-size: 40px; } .list-sort-dir { border-inline-start: 2px solid #DDD; - fill: #888; + color: #888; + @include lightDark(border-color, #ddd, #444); .svg-icon { transition: transform ease-in-out 120ms; }