+
// System wide notifications
-[notification] {
+.notification {
position: fixed;
top: 0;
right: 0;
}
}
-.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 {
}
}
-.image-manager .corner-button {
- margin: 0;
- border-radius: 0;
- padding: $-m;
-}
-
// Dropzone
/*
* The MIT License
}
.code-editor .CodeMirror {
- height: 400px;
+ 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 button {
display: block;
padding: $-xs $-m;
- border-bottom: 1px solid #eee;
+ 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;
- &:hover {
+ padding-left: 24px + $-xs;
+ &:hover, &.active {
background-color: var(--color-primary-light);
color: var(--color-primary);
}
}
+.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 $-m;
+ padding: $-xxs $-s;
+ margin-bottom: 0;
}
.code-editor-language-list {
- flex-basis: 200px;
- border-right: 1px solid #DDD;
- box-shadow: $bs-card;
+ 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;
- height: 100%;
- overflow-y: scroll;
+ min-width: 0;
+ .CodeMirror {
+ margin-bottom: 0;
+ z-index: 1;
+ max-width: 100%;
+ width: 100%;
+ }
}
-@include smaller-than($m) {
+.code-editor-body-wrap {
+ height: 80vh;
+}
+
+@include smaller-than($s) {
.code-editor .lang-options {
- max-width: 100%;
+ display: none;
}
- .code-editor .CodeMirror {
- height: 200px;
+ .code-editor-body-wrap {
+ flex-direction: column;
+ }
+ .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;
gap: $-s;
line-height: normal;
.svg-icon {
- height: 16px;
+ height: 26px;
+ width: 26px;
margin: 0;
}
.avatar {
white-space: nowrap;
}
.dropdown-search-toggle-select-caret {
- font-size: 1.5rem;
line-height: 0;
margin-left: auto;
margin-top: -2px;
+ display: flex;
+ align-items: center;
}
.dropdown-search-dropdown {
.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;
+ }
}
\ No newline at end of file
projects / bookstack / blobdiff