+
// System wide notifications
-[notification] {
+.notification {
position: fixed;
top: 0;
right: 0;
}
}
-[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;
}
}
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;
float: left;
margin: 0;
cursor: pointer;
- width: (100%/6);
+ width: math.div(100%, 6);
height: auto;
@include lightDark(border-color, #ddd, #000);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
@include smaller-than($xl) {
- width: (100%/4);
+ width: math.div(100%, 4);
}
@include smaller-than($m) {
.image-meta {
}
}
-.image-manager .corner-button {
- margin: 0;
- border-radius: 0;
- padding: $-m;
-}
-
// Dropzone
/*
* The MIT License
}
-.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;
- @include lightDark(color, #666, #999);
- &.selected {
- border-bottom-width: 3px;
- }
- }
}
-.nav-tabs {
- text-align: center;
- a, .tab-item {
- padding: $-m;
- display: inline-block;
- @include lightDark(color, #666, #999);
- cursor: pointer;
- border-right: 1px solid rgba(0, 0, 0, 0.1);
- border-bottom: 2px solid transparent;
- &.selected {
- border-bottom: 2px solid var(--color-primary);
- }
- &:last-child {
- border-right: 0;
- }
+.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;
+ height: auto;
+ min-height: 50vh;
+ border-bottom: 0;
}
.code-editor .lang-options {
- max-width: 480px;
- margin-bottom: $-s;
- a {
- margin-inline-end: $-xs;
- text-decoration: underline;
+ overflow-y: scroll;
+ flex-basis: 200px;
+ flex-grow: 1;
+}
+
+.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-body-wrap {
+ height: 80vh;
+}
+
+@include smaller-than($s) {
+ .code-editor .lang-options {
+ display: none;
+ }
+ .code-editor-body-wrap {
+ flex-direction: column;
}
- .code-editor .CodeMirror {
- height: 200px;
+ .code-editor-language-list, .code-editor-language-list input {
+ width: 100%;
}
}
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;
display: none;
position: absolute;
z-index: 80;
- right: -$-m;
+ right: 0;
+ top: 0;
+ margin-top: $-m;
@include rtl {
right: auto;
left: -$-m;
text-decoration: none;
}
}
- input {
+ 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) {
}
}
-.custom-select-input {
- max-width: 280px;
- border: 1px solid #DDD;
+.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