mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 07:32:39 +01:00
f9e087330b
Editor popup will now reflect the direction of the opened code block. This also updates in-editor codemirror instances to correcly reflect/use the direction if set on the inner code elem. This also defaults new code blocks, when in RTL languages, to be started in LTR, which can then be changed via in-editor direction controls if needed. This is on the assumption that most code will be LTR (could not find much examples of RTL code use). Fixes #4943
1110 lines
21 KiB
SCSS
1110 lines
21 KiB
SCSS
|
|
// System wide notifications
|
|
.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;
|
|
z-index: 999999;
|
|
cursor: pointer;
|
|
max-width: 360px;
|
|
transition: transform ease-in-out 280ms;
|
|
transform: translateX(580px);
|
|
display: grid;
|
|
grid-template-columns: 42px 1fr 12px;
|
|
color: #444;
|
|
font-weight: 700;
|
|
span, svg {
|
|
vertical-align: middle;
|
|
justify-self: center;
|
|
align-self: center;
|
|
}
|
|
svg {
|
|
width: 2.8rem;
|
|
height: 2.8rem;
|
|
padding-inline-end: $-s;
|
|
fill: currentColor;
|
|
}
|
|
.dismiss {
|
|
margin-top: -8px;
|
|
svg {
|
|
height: 1.0rem;
|
|
@include lightDark(color, #444, #888);
|
|
}
|
|
}
|
|
span {
|
|
vertical-align: middle;
|
|
line-height: 1.3;
|
|
@include whenDark {
|
|
color: #BBB;
|
|
}
|
|
}
|
|
&.pos {
|
|
color: var(--color-positive);
|
|
}
|
|
&.neg {
|
|
color: var(--color-negative);
|
|
}
|
|
&.warning {
|
|
color: var(--color-warning);
|
|
}
|
|
&.showing {
|
|
transform: translateX(0);
|
|
}
|
|
&.showing:hover {
|
|
transform: translate3d(0, -2px, 0);
|
|
}
|
|
}
|
|
|
|
.chapter-contents-toggle {
|
|
cursor: pointer;
|
|
margin: 0;
|
|
transition: all ease-in-out 180ms;
|
|
user-select: none;
|
|
svg[data-icon="caret-right"] {
|
|
margin-inline-end: 0;
|
|
font-size: 1rem;
|
|
transition: all ease-in-out 180ms;
|
|
transform: rotate(0deg);
|
|
transform-origin: 50% 50%;
|
|
}
|
|
&.open svg[data-icon="caret-right"] {
|
|
transform: rotate(90deg);
|
|
}
|
|
svg[data-icon="caret-right"] + * {
|
|
margin-inline-start: $-xxs;
|
|
}
|
|
}
|
|
|
|
[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%;
|
|
height: 100%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: none;
|
|
}
|
|
|
|
.popup-body-wrap {
|
|
display: flex;
|
|
}
|
|
|
|
.popup-body {
|
|
@include lightDark(background-color, #fff, #333);
|
|
max-height: 90%;
|
|
max-width: 1200px;
|
|
width: 90%;
|
|
height: auto;
|
|
margin: 2% auto;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
|
|
overflow: hidden;
|
|
z-index: 999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
&.small {
|
|
margin: 2% auto;
|
|
width: 800px;
|
|
max-width: 90%;
|
|
}
|
|
&.very-small {
|
|
margin: 2% auto;
|
|
width: 600px;
|
|
max-width: 90%;
|
|
}
|
|
&:before {
|
|
display: flex;
|
|
align-self: flex-start;
|
|
}
|
|
.popup-content {
|
|
overflow-y: auto;
|
|
}
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.popup-header button, .popup-footer button {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
color: #FFF;
|
|
padding: $-xs $-m;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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 {
|
|
border: 0;
|
|
color: #FFF;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
svg {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.popup-header, .popup-footer {
|
|
display: flex;
|
|
position: relative;
|
|
height: 40px;
|
|
flex: 0;
|
|
.popup-title {
|
|
color: #FFF;
|
|
margin-inline-end: auto;
|
|
padding: 8px $-m;
|
|
}
|
|
&.flex-container-row {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|
height: 444px;
|
|
min-height: 444px;
|
|
}
|
|
#entity-selector-wrap .popup-body .form-group {
|
|
margin: 0;
|
|
}
|
|
.popup-body .entity-selector-container {
|
|
flex: 1;
|
|
}
|
|
|
|
.dropzone-overlay {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.333rem;
|
|
width: 98%;
|
|
height: 98%;
|
|
left: 1%;
|
|
top: 1%;
|
|
border-radius: 4px;
|
|
border: 1px dashed var(--color-primary);
|
|
font-style: italic;
|
|
box-sizing: content-box;
|
|
background-clip: padding-box;
|
|
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");
|
|
background-color: var(--color-primary);
|
|
color: #FFF;
|
|
opacity: .8;
|
|
z-index: 9;
|
|
pointer-events: none;
|
|
animation: dzAnimIn 240ms ease-in-out;
|
|
}
|
|
|
|
.dropzone-landing-area {
|
|
background-color: var(--color-primary-light);
|
|
padding: $-m $-l;
|
|
width: 100%;
|
|
border: 1px dashed var(--color-primary);
|
|
color: var(--color-primary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@keyframes dzAnimIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(.7);
|
|
}
|
|
60% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
@keyframes dzFileItemIn {
|
|
0% {
|
|
opacity: .5;
|
|
transform: translateY(28px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes dzFileItemOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
opacity: .5;
|
|
transform: translateY(28px);
|
|
}
|
|
}
|
|
|
|
.dropzone-file-item {
|
|
width: 260px;
|
|
height: 80px;
|
|
position: relative;
|
|
display: flex;
|
|
margin: 1rem;
|
|
flex-direction: row;
|
|
@include lightDark(background, #FFF, #444);
|
|
box-shadow: $bs-large;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
padding-bottom: 3px;
|
|
animation: dzFileItemIn ease-in-out 240ms;
|
|
transition: transform ease-in-out 120ms, box-shadow ease-in-out 120ms;
|
|
cursor: pointer;
|
|
&:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 3px 8px 1px rgba(22, 22, 22, 0.2);
|
|
}
|
|
}
|
|
.dropzone-file-item.dismiss {
|
|
animation: dzFileItemOut ease-in-out 240ms;
|
|
}
|
|
.dropzone-file-item .loading-container {
|
|
text-align: start !important;
|
|
margin: 0;
|
|
}
|
|
.dropzone-file-item-image-wrap {
|
|
width: 80px;
|
|
position: relative;
|
|
background-color: var(--color-primary-light);
|
|
img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: .8;
|
|
}
|
|
}
|
|
.dropzone-file-item-text-wrap {
|
|
flex: 1;
|
|
display: block;
|
|
padding: 1rem;
|
|
overflow: auto;
|
|
}
|
|
.dropzone-file-item-progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
font-size: 0;
|
|
height: 3px;
|
|
background-color: var(--color-primary);
|
|
transition: width ease-in-out 240ms;
|
|
}
|
|
.dropzone-file-item-label,
|
|
.dropzone-file-item-status {
|
|
align-items: center;
|
|
font-size: .8rem;
|
|
font-weight: 700;
|
|
}
|
|
.dropzone-file-item-status[data-status] {
|
|
display: flex;
|
|
font-size: .6rem;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
}
|
|
.dropzone-file-item-status[data-status="success"] {
|
|
color: var(--color-positive);
|
|
}
|
|
.dropzone-file-item-status[data-status="error"] {
|
|
color: var(--color-negative);
|
|
}
|
|
.dropzone-file-item-status[data-status] + .dropzone-file-item-label {
|
|
display: none;
|
|
}
|
|
|
|
.image-manager-body {
|
|
min-height: 70vh;
|
|
}
|
|
.image-manager-filter-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
@include lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85));
|
|
}
|
|
.image-manager-filter-bar-bg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: .15;
|
|
z-index: -1;
|
|
}
|
|
|
|
.image-manager-filters {
|
|
box-shadow: $bs-med;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
border-bottom: 0 !important;
|
|
@include whenDark {
|
|
border: 1px solid #000 !important;
|
|
}
|
|
button {
|
|
line-height: 0;
|
|
@include lightDark(background-color, #FFF, #333);
|
|
}
|
|
svg {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.image-manager-list {
|
|
padding: 3px;
|
|
display: grid;
|
|
grid-template-columns: repeat( auto-fill, minmax(max(140px, 17%), 1fr) );
|
|
gap: 3px;
|
|
z-index: 3;
|
|
> div {
|
|
aspect-ratio: 1;
|
|
}
|
|
}
|
|
|
|
.image-manager-list .image {
|
|
display: block;
|
|
position: relative;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
text-align: start;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
aspect-ratio: 1;
|
|
@include lightDark(border-color, #ddd, #000);
|
|
transition: all linear 80ms;
|
|
overflow: hidden;
|
|
&.selected {
|
|
background-color: var(--color-primary-light);
|
|
outline: currentColor 3px solid;
|
|
border-radius: 3px;
|
|
transform: scale3d(0.95, 0.95, 0.95);
|
|
}
|
|
img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
height: auto;
|
|
}
|
|
.image-meta {
|
|
opacity: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
color: #EEE;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
font-size: 10px;
|
|
padding: 3px 4px;
|
|
pointer-events: none;
|
|
transition: opacity ease-in-out 80ms;
|
|
span {
|
|
display: block;
|
|
}
|
|
}
|
|
&.selected .image-meta,
|
|
&:hover .image-meta,
|
|
&:focus .image-meta {
|
|
opacity: 1;
|
|
}
|
|
@include smaller-than($m) {
|
|
.image-meta {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-manager .load-more {
|
|
text-align: center;
|
|
padding: $-s $-m;
|
|
clear: both;
|
|
.loading-container {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.image-manager .loading-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.image-manager-list .image-manager-list-warning {
|
|
grid-column: 1 / -1;
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.image-manager-warning {
|
|
@include lightDark(background, #FFF, #333);
|
|
color: var(--color-warning);
|
|
font-weight: bold;
|
|
border-inline: 3px solid var(--color-warning);
|
|
}
|
|
|
|
.image-manager-sidebar {
|
|
width: 300px;
|
|
margin: 0 auto;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
border-inline-start: 1px solid #DDD;
|
|
@include lightDark(border-color, #ddd, #000);
|
|
.inner {
|
|
min-height: auto;
|
|
padding: $-m;
|
|
}
|
|
.image-manager-viewer img {
|
|
max-width: 100%;
|
|
max-height: 180px;
|
|
display: block;
|
|
margin: 0 auto $-m auto;
|
|
box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
|
|
}
|
|
.image-manager-viewer {
|
|
height: 196px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
a {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
@include smaller-than($m) {
|
|
.image-manager-sidebar {
|
|
border-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
.image-manager-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
.full-tab {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.tab-container.bordered [role="tablist"] button[role="tab"] {
|
|
border-inline-end: 1px solid #DDD;
|
|
@include lightDark(border-inline-end-color, #DDD, #000);
|
|
&:last-child {
|
|
border-inline-end: none;
|
|
}
|
|
}
|
|
|
|
.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-container [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;
|
|
outline: 0 !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));
|
|
}
|
|
&:focus {
|
|
outline: 1px dotted var(--color-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
.tab-container [role="tablist"].controls-card {
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
padding: 0 $-xs;
|
|
}
|
|
|
|
.image-picker .none {
|
|
display: none;
|
|
}
|
|
|
|
.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 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: var(--font-code);
|
|
font-size: 0.7rem;
|
|
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 $-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;
|
|
.cm-editor {
|
|
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-language-list, .code-editor-language-list input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.comments-container {
|
|
padding-inline: $-xl;
|
|
@include smaller-than($m) {
|
|
padding-inline: $-xs;
|
|
}
|
|
}
|
|
.comment-box {
|
|
border-radius: 4px;
|
|
border: 1px solid #DDD;
|
|
@include lightDark(border-color, #ddd, #000);
|
|
@include lightDark(background-color, #FFF, #222);
|
|
.content {
|
|
font-size: 0.666em;
|
|
padding: $-xs $-s;
|
|
p, ul, ol {
|
|
font-size: $fs-m;
|
|
margin: .5em 0;
|
|
}
|
|
}
|
|
.actions {
|
|
opacity: 0;
|
|
transition: opacity ease-in-out 120ms;
|
|
}
|
|
&:hover .actions, &:focus-within .actions {
|
|
opacity: 1;
|
|
}
|
|
.actions button:focus {
|
|
outline: 1px dotted var(--color-primary);
|
|
}
|
|
@include smaller-than($m) {
|
|
.actions {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-box .header {
|
|
border-bottom: 1px solid #DDD;
|
|
padding: $-xs $-s;
|
|
@include lightDark(border-color, #DDD, #000);
|
|
a {
|
|
color: inherit;
|
|
}
|
|
.text-muted {
|
|
color: #999;
|
|
}
|
|
.meta a, .meta span {
|
|
white-space: nowrap;
|
|
}
|
|
.right-meta .text-muted {
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
.comment-thread-indicator {
|
|
border-inline-start: 3px dotted #DDD;
|
|
@include lightDark(border-color, #DDD, #444);
|
|
margin-inline-start: $-xs;
|
|
width: $-l;
|
|
height: calc(100% - $-m);
|
|
}
|
|
|
|
.comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.comment-reply {
|
|
display: none;
|
|
margin: 0 !important;
|
|
margin-bottom: -$-xxs !important;
|
|
}
|
|
|
|
.comment-branch .comment-branch .comment-branch .comment-branch .comment-reply {
|
|
display: block;
|
|
}
|
|
|
|
.comment-container-compact .comment-box {
|
|
.meta {
|
|
font-size: 0.8rem;
|
|
}
|
|
.header {
|
|
padding: $-xs;
|
|
}
|
|
.right-meta {
|
|
display: none;
|
|
}
|
|
.content {
|
|
padding: $-xs $-s;
|
|
}
|
|
}
|
|
.comment-container-compact .comment-thread-indicator {
|
|
width: $-m;
|
|
}
|
|
|
|
#tag-manager .drag-card {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.template-item {
|
|
cursor: pointer;
|
|
position: relative;
|
|
&:hover, .template-item-actions button:hover {
|
|
background-color: #F2F2F2;
|
|
}
|
|
.template-item-actions {
|
|
position: absolute;
|
|
top: 0;
|
|
inset-inline-end: 0;
|
|
width: 50px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-inline-start: 1px solid;
|
|
@include lightDark(border-color, #ddd, #000);
|
|
}
|
|
.template-item-actions button {
|
|
cursor: pointer;
|
|
flex: 1;
|
|
@include lightDark(background-color, #FFF, #222);
|
|
border: 0;
|
|
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($l) {
|
|
.dropdown-search-dropdown {
|
|
inset-inline: $-m auto;
|
|
}
|
|
.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: var(--color-positive);
|
|
}
|
|
.status-indicator-inactive {
|
|
background-color: var(--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;
|
|
} |