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