]> BookStack Code Mirror - bookstack/blob - resources/sass/_pages.scss
Comments: Started logic for content references
[bookstack] / resources / sass / _pages.scss
1 @use "mixins";
2 @use "vars";
3
4 .page-editor {
5   display: flex;
6   flex-direction: column;
7   align-items: stretch;
8
9   .edit-area {
10     flex: 1;
11     flex-direction: column;
12     z-index: 10;
13     border-radius: 0 0 8px 8px;
14   }
15
16   .mce-tinymce {
17         box-shadow: none;
18   }
19
20   .mce-top-part::before {
21     box-shadow: none;
22   }
23 }
24
25 .page-editor-page-area {
26   width: 100%;
27   border-radius: 8px;
28   box-shadow: vars.$bs-card;
29   min-width: 300px;
30   @include mixins.lightDark(background-color, #FFF, #333)
31 }
32
33 .page-edit-toolbar {
34   width: 100%;
35   margin: 0 auto;
36   display: grid;
37   grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);
38   align-items: center;
39 }
40
41 @include mixins.larger-than(vars.$bp-xxl) {
42   .page-editor-wysiwyg2024 .page-edit-toolbar,
43   .page-editor-wysiwyg2024 .page-editor-page-area,
44   .page-editor-wysiwyg .page-edit-toolbar,
45   .page-editor-wysiwyg .page-editor-page-area {
46     max-width: 1140px;
47   }
48
49   .page-editor-wysiwyg .floating-toolbox,
50   .page-editor-wysiwyg2024 .floating-toolbox {
51     position: absolute;
52   }
53 }
54
55 @include mixins.smaller-than(vars.$bp-m) {
56   .page-edit-toolbar {
57     display: flex;
58     flex-direction: row;
59     justify-content: space-between;
60   }
61 }
62
63 .title-input.page-title {
64   font-size: 0.8em;
65   .input {
66     border: 0;
67     margin-bottom: -1px;
68   }
69   input[type="text"] {
70     max-width: 840px;
71     margin: 0 auto;
72     border: none;
73     height: auto;
74     display: block;
75     width: 100%;
76     font-size: 20px;
77     border-radius: 8px;
78   }
79   input[type="text"]:focus {
80     position: relative;
81     outline-offset: -1px;
82     outline: 1px dashed var(--color-primary);
83     box-shadow: vars.$bs-card;
84     z-index: 50;
85   }
86 }
87
88 .page-editor-markdown .title-input.page-title input[type="text"] {
89   max-width: 100%;
90 }
91
92 body.tox-fullscreen .page-editor .edit-area,
93 body.markdown-fullscreen .page-editor .edit-area {
94   z-index: 12;
95 }
96
97 body.tox-fullscreen, body.markdown-fullscreen {
98   .page-editor, .flex-fill {
99     overflow: visible;
100   }
101 }
102
103 @include mixins.smaller-than(vars.$bp-s) {
104   .page-edit-toolbar {
105     overflow-x: scroll;
106     overflow-y: visible;
107   }
108   .page-edit-toolbar {
109     white-space: nowrap;
110     > div {
111       display: inline-block;
112     }
113   }
114 }
115
116 .page-save-mobile-button {
117   position: fixed;
118   z-index: 30;
119   border-radius: 50%;
120   width: 52px;
121   height: 52px;
122   font-size: 26px;
123   inset-inline-end: vars.$xs;
124   bottom: vars.$s;
125   box-shadow: vars.$bs-hover;
126   background-color: currentColor;
127   text-align: center;
128   svg {
129     fill: #FFF;
130     margin-inline-end: 0;
131   }
132 }
133
134 .draft-notification {
135   pointer-events: none;
136   transform: scale(0);
137   transition: transform ease-in-out 120ms;
138   transform-origin: 50% 50%;
139   &.visible {
140     transform: scale(1);
141   }
142 }
143
144 .page-style.editor {
145   padding: 0 !important;
146 }
147
148 // Page content pointers
149 .pointer-container {
150   position: fixed;
151   display: none;
152   left: 0;
153   z-index: 10;
154 }
155 .pointer {
156   border: 1px solid #CCC;
157   @include mixins.lightDark(border-color, #ccc, #000);
158   border-radius: 4px;
159   box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
160   @include mixins.lightDark(background-color, #fff, #333);
161   width: 275px;
162
163   &.is-page-editable {
164     width: 328px;
165   }
166
167   &:before {
168     position: absolute;
169     left: 50%;
170     bottom: -9px;
171     width: 16px;
172     height: 16px;
173     margin-inline-start: -8px;
174     content: '';
175     display: block;
176     transform: rotate(45deg);
177     transform-origin: 50% 50%;
178     border-right: 1px solid #CCC;
179     border-bottom: 1px solid #CCC;
180     z-index: 56;
181     @include mixins.lightDark(background-color, #fff, #333);
182     @include mixins.lightDark(border-color, #ccc, #000);
183   }
184   input, button, a {
185     position: relative;
186     height: 28px;
187     font-size: 12px;
188     vertical-align: top;
189     padding: 5px 16px;
190   }
191   input {
192     background-color: #FFF;
193     border: 1px solid #DDD;
194     @include mixins.lightDark(border-color, #ddd, #000);
195     color: #666;
196     width: 180px;
197     z-index: 58;
198     padding: 5px;
199     border-radius: 0;
200   }
201   .text-button {
202     @include mixins.lightDark(color, #444, #AAA);
203   }
204   .input-group .button {
205     line-height: 1;
206     margin: 0 0 0 -5px;
207     box-shadow: none;
208     border-radius: 0;
209   }
210   a.button {
211     margin: 0;
212   }
213   .svg-icon {
214     width: 1.2em;
215     height: 1.2em;
216   }
217   .button {
218     @include mixins.lightDark(border-color, #ddd, #000);
219   }
220 }
221
222 // Page editor sidebar toolbox
223 .floating-toolbox {
224   @include mixins.lightDark(background-color, #FFF, #222);
225   overflow: hidden;
226   align-items: stretch;
227   flex-direction: row;
228   display: flex;
229   max-height: 100%;
230   border-radius: 8px;
231   box-shadow: vars.$bs-card;
232   margin-bottom: auto;
233   margin-inline-start: vars.$l;
234   position: relative;
235   &.open {
236     position: relative;
237     right: 0;
238     max-width: 480px;
239     margin-bottom: 0;
240   }
241   &:not(.open) .toolbox-tab-content {
242     display: none !important;
243   }
244   .toolbox-toggle svg {
245     transition: transform ease-in-out 180ms;
246   }
247   .toolbox-toggle {
248     transition: background-color ease-in-out 180ms;
249   }
250   &.open .toolbox-toggle {
251     background-color: rgba(255, 0, 0, 0.20);
252   }
253   &.open .toolbox-toggle svg {
254     transform: rotate(180deg);
255   }
256   > div {
257     flex: 1;
258     position: relative;
259   }
260   .tabs {
261     border-inline-end: 1px solid #DDD;
262     @include mixins.lightDark(border-inline-end-color, #DDD, #000);
263     width: 40px;
264     flex: 0 1 auto;
265     margin-inline-end: -1px;
266   }
267   .tabs-inner {
268     @include mixins.lightDark(background-color, #FFFFFF, #222);
269   }
270   .tabs svg {
271     padding: 0;
272     margin: 0;
273   }
274   .tabs-inner > button {
275     @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
276     display: block;
277     cursor: pointer;
278     padding: 10px vars.$xs;
279     font-size: 18px;
280     line-height: 1.6;
281   }
282   .tabs-inner > button:hover,  &.open .tabs-inner > button.active {
283     color: var(--color-link) !important;
284     position: relative;
285     &:after {
286       content: '';
287       display: block;
288       position: absolute;
289       left: 0;
290       width: 100%;
291       top: 0;
292       height: 100%;
293       background-color: currentColor;
294       opacity: .075;
295     }
296   }
297   &.open .tabs-inner > button.active {
298     border-inline-end: 1px solid var(--color-link);
299     margin-inline-end: -1px;
300   }
301   h4 {
302     font-size: 24px;
303     margin: vars.$m 0 0 0;
304     padding: 0 vars.$l vars.$s vars.$l;
305   }
306   .tags input {
307     max-width: 100%;
308     width: 100%;
309     min-width: 50px;
310   }
311   .tags td, .inline-start-table > div > div > div {
312     padding-inline-end: vars.$s;
313     padding-top: vars.$s;
314     position: relative;
315   }
316   .handle {
317     user-select: none;
318     cursor: move;
319     fill: #999;
320   }
321   form {
322     display: flex;
323     flex: 1;
324     flex-direction: column;
325     overflow-y: scroll;
326   }
327   table td, table th {
328     overflow: visible;
329   }
330 }
331
332 @include mixins.smaller-than(vars.$bp-xxl) {
333   .floating-toolbox {
334     margin-inline-start: vars.$s;
335   }
336 }
337
338 @include mixins.smaller-than(vars.$bp-s) {
339   .page-editor-page-area-wrap {
340     margin: 4px !important;
341   }
342   .floating-toolbox {
343     margin-inline-start: 4px;
344   }
345   .floating-toolbox .tabs {
346     width: 32px;
347   }
348   .floating-toolbox .tabs-inner > button {
349     font-size: 12px;
350   }
351   .page-edit-toolbar {
352     padding-block: 0 !important;
353   }
354   .page-editor.toolbox-open .page-editor-page-area {
355     display: none;
356   }
357 }
358
359 .toolbox-tab-content {
360   display: none;
361   overflow-y: auto;
362   padding-bottom: 45px;
363 }
364
365 .suggestion-box {
366   top: auto;
367   margin: -4px 0 0;
368   right: auto;
369   left: 0;
370   padding: 0;
371   li {
372     display: block;
373     border-bottom: 1px solid #DDD;
374     &:last-child {
375       border-bottom: 0;
376     }
377   }
378 }
379
380 .comments-container h5 {
381   color: #888;
382   font-weight: normal;
383   margin-top: 0.5em;
384 }
385
386 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
387   min-height: 175px;
388 }
389
390 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
391 .mce-floatpanel[aria-label="Insert/edit media"] {
392   .mce-open {
393     display: none;
394   }
395 }
396
397 .entity-list-item > span:first-child,
398 .icon-list-item > span:first-child,
399 .split-icon-list-item > a > .icon,
400 .chapter-expansion > .icon {
401   font-size: 0.8rem;
402   width: 1.88em;
403   height: 1.88em;
404   flex-shrink: 0;
405   display: flex;
406   align-items: center;
407   justify-content: center;
408   text-align: center;
409   border-radius: 1em;
410   position: relative;
411   overflow: hidden;
412   svg {
413     margin: 0;
414     bottom: 0;
415   }
416   &:after {
417     content: '';
418     position: absolute;
419     background-color: currentColor;
420     opacity: 0.2;
421     left: 0;
422     top: 0;
423     width: 100%;
424     height: 100%;
425   }
426 }
427
428 .entity-chip {
429   display: inline-block;
430   align-items: center;
431   justify-content: center;
432   text-align: center;
433   font-size: 0.9em;
434   border-radius: 3px;
435   position: relative;
436   overflow: hidden;
437   padding: vars.$xs vars.$s;
438   fill: currentColor;
439   opacity: 0.85;
440   transition: opacity ease-in-out 120ms;
441   &:after {
442     content: '';
443     position: absolute;
444     background-color: currentColor;
445     opacity: 0.15;
446     left: 0;
447     top: 0;
448     width: 100%;
449     height: 100%;
450   }
451   &:hover {
452     text-decoration: none;
453     opacity: 1;
454   }
455   @media (prefers-contrast: more) {
456     opacity: 1;
457   }
458 }