+
// System wide notifications
-[notification] {
+.notification {
position: fixed;
top: 0;
right: 0;
margin: $-xl;
padding: $-m $-l;
background-color: #FFF;
+ @include lightDark(background-color, #fff, #444);
border-radius: 4px;
border-inline-start: 6px solid currentColor;
box-shadow: $bs-large;
margin-top: -8px;
svg {
height: 1.0rem;
- color: #444;
+ @include lightDark(color, #444, #888);
}
}
span {
vertical-align: middle;
line-height: 1.3;
+ @include whenDark {
+ color: #BBB;
+ }
}
&.pos {
color: $positive;
}
}
-[chapter-toggle] {
+.chapter-contents-toggle {
cursor: pointer;
margin: 0;
transition: all ease-in-out 180ms;
transform: rotate(90deg);
}
svg[data-icon="caret-right"] + * {
- margin-inline-start: $-xs;
+ margin-inline-start: $-xxs;
}
}
-[overlay] {
- background-color: rgba(0, 0, 0, 0.333);
+[overlay], .popup-background {
+ @include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
position: fixed;
z-index: 95536;
width: 100%;
}
.popup-body {
- background-color: #FFF;
+ @include lightDark(background-color, #fff, #333);
max-height: 90%;
max-width: 1200px;
width: 90%;
width: 800px;
max-width: 90%;
}
+ &.very-small {
+ margin: 2% auto;
+ width: 600px;
+ max-width: 90%;
+ }
&:before {
display: flex;
align-self: flex-start;
}
}
-.popup-footer button, .popup-header-close {
- position: absolute;
- top: 0;
- right: 0;
+.popup-header button, .popup-footer button {
margin: 0;
- height: 40px;
border-radius: 0;
box-shadow: none;
- &:active {
- outline: 0;
+ color: #FFF;
+ padding: $-xs $-m;
+}
+
+.popup-header button:not(.popup-header-close) {
+ font-size: 0.8rem;
+}
+
+.popup-header button:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.popup-footer {
+ justify-content: end;
+ background-color: var(--color-primary-light);
+ min-height: 41px;
+ button {
+ padding: 10px $-m;
}
}
+
.popup-header-close {
- background-color: transparent;
border: 0;
color: #FFF;
font-size: 16px;
- padding: 0 $-m;
+ cursor: pointer;
+ svg {
+ margin-right: 0;
+ }
}
.popup-header, .popup-footer {
- display: block !important;
+ display: flex;
position: relative;
height: 40px;
- flex: none !important;
+ flex: 0;
.popup-title {
color: #FFF;
+ margin-right: auto;
padding: 8px $-m;
}
+ &.flex-container-row {
+ display: flex !important;
+ }
}
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: 444px;
.dropzone-container {
position: relative;
- background-color: #EEE;
+ @include lightDark(background-color, #eee, #222);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
float: left;
margin: 0;
cursor: pointer;
- width: (100%/6);
+ width: math.div(100%, 6);
height: auto;
- border: 1px solid #DDD;
+ @include lightDark(border-color, #ddd, #000);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
overflow: hidden;
&.selected {
- //transform: scale3d(0.92, 0.92, 0.92);
- border: 4px solid #FFF;
- overflow: hidden;
- border-radius: 8px;
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+ transform: scale3d(0.92, 0.92, 0.92);
+ outline: currentColor 2px solid;
}
img {
width: 100%;
}
}
@include smaller-than($xl) {
- width: (100%/4);
+ width: math.div(100%, 4);
}
@include smaller-than($m) {
.image-meta {
}
}
-#image-manager .load-more {
+.image-manager .load-more {
display: block;
text-align: center;
- background-color: #EEE;
+ @include lightDark(background-color, #EEE, #444);
padding: $-s $-m;
color: #AAA;
clear: both;
font-style: italic;
}
+.image-manager .loading-container {
+ text-align: center;
+}
+
.image-manager-sidebar {
width: 300px;
overflow-y: auto;
overflow-x: hidden;
border-inline-start: 1px solid #DDD;
+ @include lightDark(border-color, #ddd, #000);
.inner {
+ min-height: auto;
padding: $-m;
}
img {
}
.dropzone-container {
border-bottom: 1px solid #DDD;
+ @include lightDark(border-color, #ddd, #000);
}
}
*/
.dz-message {
font-size: 1em;
- line-height: 2.35;
+ line-height: 2.85;
font-style: italic;
color: #888;
text-align: center;
}
-.tab-container .nav-tabs {
+.tab-container [role="tablist"] {
+ display: flex;
+ align-items: end;
+ justify-items: start;
text-align: start;
border-bottom: 1px solid #DDD;
+ @include lightDark(border-color, #ddd, #444);
margin-bottom: $-m;
- .tab-item {
- padding: $-s;
- color: #666;
- &.selected {
- border-bottom-width: 3px;
- }
- }
}
-.nav-tabs {
- text-align: center;
- a, .tab-item {
- padding: $-m;
- display: inline-block;
- color: #666;
- fill: #666;
- cursor: pointer;
- &.selected {
- border-bottom: 2px solid var(--color-primary);
- }
+.tab-container [role="tablist"] button[role="tab"],
+.image-manager [role="tablist"] button[role="tab"] {
+ display: inline-block;
+ padding: $-s;
+ @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ margin-bottom: -1px;
+ &[aria-selected="true"] {
+ color: var(--color-link) !important;
+ border-bottom-color: var(--color-link) !important;
+ }
+ &:hover, &:focus {
+ @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
+ @include lightDark(border-bottom-color, rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
}
}
+.tab-container [role="tablist"].controls-card {
+ margin-bottom: 0;
+ border-bottom: 0;
+ padding: 0 $-xs;
+}
.image-picker .none {
display: none;
}
-#code-editor .CodeMirror {
- height: 400px;
+.code-editor .CodeMirror {
+ height: auto;
+ min-height: 50vh;
+ border-bottom: 0;
+}
+
+.code-editor .lang-options {
+ overflow-y: scroll;
+ flex-basis: 200px;
+ flex-grow: 1;
}
-#code-editor .lang-options {
- max-width: 480px;
- margin-bottom: $-s;
- a {
- margin-inline-end: $-xs;
- text-decoration: underline;
+.code-editor .lang-options button {
+ display: block;
+ padding: $-xs $-m;
+ border-bottom: 1px solid;
+ @include lightDark(color, #333, #AAA);
+ @include lightDark(border-bottom-color, #EEE, #000);
+ cursor: pointer;
+ width: 100%;
+ text-align: left;
+ font-family: $mono;
+ font-size: 0.7rem;
+ padding-left: 24px + $-xs;
+ &:hover, &.active {
+ background-color: var(--color-primary-light);
+ color: var(--color-primary);
}
}
-@include smaller-than($m) {
- #code-editor .lang-options {
+.code-editor button.lang-option-favorite-toggle {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 28px;
+ font-size: 1rem;
+ border: 0;
+ line-height: 1;
+ padding: 2px;
+ z-index: 2;
+ height: 100%;
+ text-align: center;
+ color: var(--color-primary);
+ svg {
+ margin: 0;
+ }
+}
+
+.code-editor button[data-favourite="true"] ~ .action-favourite,
+.code-editor button[data-favourite="false"] ~ .action-unfavourite {
+ display: none;
+}
+
+.code-editor .action-favourite {
+ opacity: 0.5;
+}
+.code-editor button:hover ~ .action-favourite {
+ opacity: 1;
+}
+
+.code-editor label {
+ background-color: var(--color-primary-light);
+ width: 100%;
+ color: var(--color-primary);
+ padding: $-xxs $-s;
+ margin-bottom: 0;
+}
+
+.code-editor-language-list {
+ position: relative;
+ width: 160px;
+ z-index: 2;
+ align-items: stretch;
+}
+
+.code-editor-language-list input {
+ border-radius: 0;
+ border: 0;
+ border-bottom: 1px solid #DDD;
+ padding: $-xs $-s;
+ height: auto;
+}
+
+.code-editor-main {
+ flex: 1;
+ min-width: 0;
+ .CodeMirror {
+ margin-bottom: 0;
+ z-index: 1;
max-width: 100%;
+ width: 100%;
}
- #code-editor .CodeMirror {
- height: 200px;
+}
+
+.code-editor-body-wrap {
+ height: 80vh;
+}
+
+@include smaller-than($s) {
+ .code-editor .lang-options {
+ display: none;
+ }
+ .code-editor-body-wrap {
+ flex-direction: column;
+ }
+ .code-editor-language-list, .code-editor-language-list input {
+ width: 100%;
}
}
.comment-box {
- border: 1px solid #DDD;
border-radius: 4px;
- background-color: #FFF;
+ border: 1px solid #DDD;
+ @include lightDark(border-color, #ddd, #000);
+ @include lightDark(background-color, #FFF, #222);
.content {
font-size: 0.666em;
p, ul, ol {
max-width: 500px;
}
-.permissions-table [permissions-table-toggle-all-in-row] {
- display: none;
-}
-.permissions-table tr:hover [permissions-table-toggle-all-in-row] {
- display: inline;
-}
-
.template-item {
cursor: pointer;
position: relative;
.template-item-actions {
position: absolute;
top: 0;
- right: 0;
+ inset-inline-end: 0;
width: 50px;
height: 100%;
display: flex;
flex-direction: column;
- border-inline-start: 1px solid #DDD;
+ border-inline-start: 1px solid;
+ @include lightDark(border-color, #ddd, #000);
}
.template-item-actions button {
cursor: pointer;
flex: 1;
- background: #FFF;
+ @include lightDark(background-color, #FFF, #222);
border: 0;
- border-top: 1px solid #DDD;
+ border-top: 1px solid;
+ @include lightDark(border-color, #DDD, #000);
+ }
+ .template-item-actions button svg {
+ margin: 0;
}
.template-item-actions button:first-child {
border-top: 0;
}
+}
+
+
+.dropdown-search {
+ position: relative;
+}
+.dropdown-search-toggle-breadcrumb {
+ border: 1px solid transparent;
+ border-radius: 4px;
+ line-height: normal;
+ padding: $-xs;
+ &:hover {
+ border-color: #DDD;
+ }
+ .svg-icon {
+ margin-inline-end: 0;
+ }
+}
+.dropdown-search-toggle-select {
+ display: flex;
+ gap: $-s;
+ line-height: normal;
+ .svg-icon {
+ height: 26px;
+ width: 26px;
+ margin: 0;
+ }
+ .avatar {
+ height: 22px;
+ width: 22px;
+ }
+ .avatar + span {
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .dropdown-search-toggle-caret {
+ font-size: 1.15rem;
+ }
+}
+.dropdown-search-toggle-select-label {
+ min-width: 0;
+ white-space: nowrap;
+}
+.dropdown-search-toggle-select-caret {
+ line-height: 0;
+ margin-left: auto;
+ margin-top: -2px;
+ display: flex;
+ align-items: center;
+}
+
+.dropdown-search-dropdown {
+ box-shadow: $bs-med;
+ overflow: hidden;
+ min-height: 100px;
+ width: 240px;
+ display: none;
+ position: absolute;
+ z-index: 80;
+ right: 0;
+ top: 0;
+ margin-top: $-m;
+ @include rtl {
+ right: auto;
+ left: -$-m;
+ }
+ .dropdown-search-search .svg-icon {
+ position: absolute;
+ left: $-s;
+ @include rtl {
+ right: $-s;
+ left: auto;
+ }
+ top: 11px;
+ fill: #888;
+ pointer-events: none;
+ }
+ .dropdown-search-list {
+ max-height: 400px;
+ overflow-y: scroll;
+ text-align: start;
+ }
+ .dropdown-search-item {
+ padding: $-s $-m;
+ &:hover,&:focus {
+ background-color: #F2F2F2;
+ text-decoration: none;
+ }
+ }
+ input, input:focus {
+ padding-inline-start: $-xl;
+ border-radius: 0;
+ border: 0;
+ border-bottom: 1px solid #DDD;
+ }
+ input:focus {
+ outline: 0;
+ }
+}
+
+@include smaller-than($m) {
+ .dropdown-search-dropdown {
+ position: fixed;
+ right: auto;
+ left: $-m;
+ }
+ .dropdown-search-dropdown .dropdown-search-list {
+ max-height: 240px;
+ }
+}
+
+.item-list {
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+.item-list-row {
+ border: 1.5px solid;
+ @include lightDark(border-color, #E2E2E2, #444);
+ border-bottom-width: 0;
+ label {
+ padding-bottom: 0;
+ }
+ &:hover {
+ @include lightDark(background-color, #F6F6F6, #333);
+ }
+}
+.item-list-row:first-child {
+ border-radius: 4px 4px 0 0;
+}
+.item-list-row:last-child {
+ border-radius: 0 0 4px 4px;
+ border-bottom-width: 1.5px;
+}
+.item-list-row:first-child:last-child {
+ border-radius: 4px;
+}
+.item-list-row-toggle-all {
+ visibility: hidden;
+}
+.item-list-row:hover .item-list-row-toggle-all {
+ visibility: visible;
+}
+
+.status-indicator-active, .status-indicator-inactive {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ display: inline-block;
+}
+.status-indicator-active {
+ background-color: $positive;
+}
+.status-indicator-inactive {
+ background-color: $negative;
+}
+
+.shortcut-container {
+ background-color: rgba(0, 0, 0, 0.25);
+ pointer-events: none;
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 99;
+}
+.shortcut-linkage {
+ position: fixed;
+ box-shadow: 0 0 4px 0 #FFF;
+ border-radius: 3px;
+}
+.shortcut-hint {
+ position: fixed;
+ padding: $-xxs $-xxs;
+ font-size: .85rem;
+ font-weight: 700;
+ line-height: 1;
+ background-color: #eee;
+ border-radius: 3px;
+ border: 1px solid #b4b4b4;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
+ color: #333;
+}
+
+// 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;
+ }
+}
+
+// Sortable scroll boxes
+.scroll-box {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ max-height: 280px;
+ 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;
+ align-items: flex-start;
+ padding: 1px;
+ &:last-child {
+ border-bottom: 0;
+ }
+ &:hover {
+ cursor: pointer;
+ @include lightDark(background-color, #f8f8f8, #333);
+ }
+ .handle {
+ color: #AAA;
+ cursor: grab;
+ }
+ button {
+ opacity: .6;
+ }
+ .handle svg {
+ margin: 0;
+ }
+ > * {
+ padding: $-xs $-m;
+ }
+ .handle + * {
+ padding-left: 0;
+ }
+ &:hover .handle {
+ @include lightDark(color, #444, #FFF);
+ }
+ &:hover button {
+ opacity: 1;
+ }
+ a:hover {
+ text-decoration: none;
+ }
+}
+
+input.scroll-box-search, .scroll-box-header-item {
+ font-size: 0.8rem;
+ 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;
+}
+
+.scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] {
+ display: none;
+}
+.scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"],
+.scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_up"],
+.scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_down"],
+{
+ display: none;
}
\ No newline at end of file
projects / bookstack / blobdiff