mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-07-16 16:22:44 +00:00
ccbc68b560
Updates book drag handling to be limited to the handle so scrolling can be done on the items themselves. Increased handling area and improved styling to support
366 lines
6.9 KiB
SCSS
366 lines
6.9 KiB
SCSS
@use "sass:math";
|
|
|
|
@import "reset";
|
|
@import "variables";
|
|
@import "mixins";
|
|
@import "spacing";
|
|
@import "html";
|
|
@import "text";
|
|
@import "colors";
|
|
@import "layout";
|
|
@import "blocks";
|
|
@import "buttons";
|
|
@import "tables";
|
|
@import "forms";
|
|
@import "animations";
|
|
@import "tinymce";
|
|
@import "codemirror";
|
|
@import "components";
|
|
@import "header";
|
|
@import "footer";
|
|
@import "lists";
|
|
@import "pages";
|
|
|
|
// Jquery Sortable Styles
|
|
.dragged {
|
|
position: absolute;
|
|
opacity: 0.5;
|
|
z-index: 2000;
|
|
}
|
|
body.dragging, body.dragging * {
|
|
cursor: move !important;
|
|
}
|
|
|
|
// User Avatar Images
|
|
.avatar {
|
|
border-radius: 100%;
|
|
@include lightDark(background-color, #eee, #000);
|
|
width: 30px;
|
|
height: 30px;
|
|
&.med {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
&.large {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
&.huge {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
&.square {
|
|
border-radius: 3px;
|
|
}
|
|
&[src$="user_avatar.png"] {
|
|
@include whenDark {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Loading icon
|
|
$loadingSize: 10px;
|
|
.loading-container {
|
|
position: relative;
|
|
display: block;
|
|
margin: $-xl auto;
|
|
> div {
|
|
width: $loadingSize;
|
|
height: $loadingSize;
|
|
border-radius: $loadingSize;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
transform: translate3d(-10px, 0, 0);
|
|
margin-top: $-xs;
|
|
animation-name: loadingBob;
|
|
animation-duration: 1.4s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
|
|
margin-inline-end: 4px;
|
|
background-color: var(--color-page);
|
|
animation-delay: -300ms;
|
|
}
|
|
> div:first-child {
|
|
left: -($loadingSize+$-xs);
|
|
background-color: var(--color-book);
|
|
animation-delay: -600ms;
|
|
}
|
|
> div:last-of-type {
|
|
left: $loadingSize+$-xs;
|
|
background-color: var(--color-chapter);
|
|
animation-delay: 0ms;
|
|
}
|
|
> span {
|
|
margin-inline-start: $-s;
|
|
font-style: italic;
|
|
color: #888;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
// Back to top link
|
|
$btt-size: 40px;
|
|
[back-to-top] {
|
|
background-color: var(--color-primary);
|
|
position: fixed;
|
|
bottom: $-m;
|
|
right: $-l;
|
|
padding: 5px 7px;
|
|
cursor: pointer;
|
|
color: #FFF;
|
|
fill: #FFF;
|
|
svg {
|
|
width: math.div($btt-size, 1.5);
|
|
height: math.div($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;
|
|
}
|
|
}
|
|
|
|
.skip-to-content-link {
|
|
position: fixed;
|
|
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-primary);
|
|
}
|
|
}
|
|
|
|
.contained-search-box {
|
|
display: flex;
|
|
height: 38px;
|
|
input, button {
|
|
border-radius: 0;
|
|
border: 1px solid #ddd;
|
|
@include lightDark(border-color, #ddd, #000);
|
|
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;
|
|
}
|
|
svg {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.entity-selector {
|
|
border: 1px solid #DDD;
|
|
@include lightDark(border-color, #ddd, #111);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
font-size: 0.8em;
|
|
input[type="text"] {
|
|
width: 100%;
|
|
display: block;
|
|
border-radius: 0;
|
|
border: 0;
|
|
border-bottom: 1px solid #DDD;
|
|
font-size: 16px;
|
|
padding: $-s $-m;
|
|
}
|
|
.entity-list {
|
|
overflow-y: scroll;
|
|
height: 400px;
|
|
@include lightDark(background-color, #eee, #222);
|
|
margin-inline-end: 0;
|
|
margin-inline-start: 0;
|
|
}
|
|
.entity-list-item {
|
|
@include lightDark(background-color, #fff, #222);
|
|
}
|
|
.entity-list-item p {
|
|
margin-bottom: 0;
|
|
}
|
|
.entity-list-item:focus {
|
|
outline: 2px dotted var(--color-primary);
|
|
outline-offset: -4px;
|
|
}
|
|
.entity-list-item.selected {
|
|
@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;
|
|
@include lightDark(border-color, #DDD, #000);
|
|
border-radius: 3px;
|
|
min-height: 20px;
|
|
@include lightDark(background-color, #EEE, #000);
|
|
}
|
|
.scroll-box-item {
|
|
border-bottom: 1px solid;
|
|
border-top: 1px solid;
|
|
@include lightDark(border-color, #DDD, #000);
|
|
margin-top: -1px;
|
|
@include lightDark(background-color, #FFF, #222);
|
|
display: flex;
|
|
padding: 1px;
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
&:hover {
|
|
cursor: pointer;
|
|
@include lightDark(background-color, #f8f8f8, #333);
|
|
}
|
|
.handle {
|
|
color: #AAA;
|
|
cursor: grab;
|
|
}
|
|
.handle svg {
|
|
margin: 0;
|
|
}
|
|
> * {
|
|
padding: $-xs $-m;
|
|
}
|
|
.handle + * {
|
|
padding-left: 0;
|
|
}
|
|
&:hover .handle {
|
|
@include lightDark(color, #444, #FFF);
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
input.scroll-box-search, .scroll-box-header-item {
|
|
font-size: 0.8rem;
|
|
padding: $-xs $-m;
|
|
border: 1px solid;
|
|
@include lightDark(border-color, #DDD, #000);
|
|
@include lightDark(background-color, #FFF, #222);
|
|
margin-bottom: -1px;
|
|
border-radius: 3px 3px 0 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
line-height: 1.4;
|
|
color: #666;
|
|
}
|
|
|
|
.scroll-box-search + .scroll-box,
|
|
.scroll-box-header-item + .scroll-box {
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
|
|
.fullscreen {
|
|
border:0;
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
width:100%;
|
|
height:100%;
|
|
z-index: 150;
|
|
}
|
|
|
|
.list-sort-container {
|
|
display: inline-block;
|
|
form {
|
|
display: inline-block;
|
|
}
|
|
.list-sort {
|
|
display: inline-grid;
|
|
margin-inline-start: $-s;
|
|
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;
|
|
@include lightDark(color, #555, #888);
|
|
}
|
|
.list-sort-type {
|
|
text-align: start;
|
|
}
|
|
.list-sort-type, .list-sort-dir {
|
|
padding: $-xs $-s;
|
|
cursor: pointer;
|
|
}
|
|
.list-sort-dir {
|
|
border-inline-start: 2px solid #DDD;
|
|
color: #888;
|
|
@include lightDark(border-color, #ddd, #444);
|
|
.svg-icon {
|
|
transition: transform ease-in-out 120ms;
|
|
}
|
|
&:hover .svg-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
table.table .table-user-item {
|
|
display: grid;
|
|
grid-template-columns: 42px 1fr;
|
|
align-items: center;
|
|
}
|
|
table.table .table-entity-item {
|
|
display: grid;
|
|
grid-template-columns: 36px 1fr;
|
|
align-items: center;
|
|
} |