+
// System wide notifications
[notification] {
position: fixed;
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 {
text-align: start;
border-bottom: 1px solid #DDD;
+ @include lightDark(border-color, #ddd, #444);
margin-bottom: $-m;
.tab-item {
padding: $-s;
- color: #666;
+ @include lightDark(color, #666, #999);
&.selected {
border-bottom-width: 3px;
}
a, .tab-item {
padding: $-m;
display: inline-block;
- color: #666;
- fill: #666;
+ @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;
+ }
}
}
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;
+ &:hover, &.active {
+ background-color: var(--color-primary-light);
+ color: var(--color-primary);
}
}
-@include smaller-than($m) {
- #code-editor .lang-options {
+.code-editor label {
+ background-color: var(--color-primary-light);
+ width: 100%;
+ color: var(--color-primary);
+ padding: $-xxs $-m;
+ 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 $-m;
+}
+
+.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;
+}
+
+@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 {
.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: 16px;
+ 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 {
+ font-size: 1.5rem;
+ line-height: 0;
+ margin-left: auto;
+ margin-top: -2px;
+}
+
+.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;
+ }
}
\ No newline at end of file
projects / bookstack / blobdiff