]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_pages.scss
Finished migration of last angular code
[bookstack] / resources / assets / sass / _pages.scss
1 .page-editor {
2   display: flex;
3   flex-direction: column;
4   align-items: stretch;
5   .faded-small {
6     height: auto;
7   }
8   .edit-area {
9     flex: 1;
10     flex-direction: column;
11   }
12 }
13
14 .draft-notification {
15   pointer-events: none;
16   transform: scale(0);
17   transition: transform ease-in-out 120ms;
18   transform-origin: 50% 50%;
19   &.visible {
20     transform: scale(1);
21   }
22 }
23
24 .page-style.editor {
25   padding: 0 !important;
26 }
27
28 .page-content {
29   max-width: 840px;
30   margin: 0 auto;
31   margin-top: $-xxl;
32   overflow-wrap: break-word;
33   .align-left {
34     text-align: left;
35   }
36   img.align-left, table.align-left {
37     float: left !important;
38     margin: $-xs $-s $-xs 0;
39   }
40   .align-right {
41     float: right !important;
42   }
43   img.align-right, table.align-right {
44     text-align: right;
45     margin: $-xs 0 $-xs $-s;
46   }
47   .align-center {
48     text-align: center;
49   }
50   img {
51     max-width: 100%;
52     height:auto;
53   }
54   h1, h2, h3, h4, h5, h6, pre {
55     clear: left;
56   }
57   hr {
58     clear: both;
59     margin: $-m 0;
60   }
61   table {
62     hyphens: auto;
63     table-layout: fixed;
64     max-width: 100%;
65     height: auto !important;
66   }
67
68   // diffs
69   ins,
70   del {
71     text-decoration: none;
72   }
73   ins {
74     background: #dbffdb;
75   }
76   del {
77     background: #FFECEC;
78   }
79 }
80
81 // Page content pointers
82 .pointer-container {
83   position: relative;
84   display: none;
85   left: 0;
86   z-index: 10;
87 }
88 .pointer {
89   border: 1px solid #CCC;
90   display: inline-block;
91   padding: $-s $-s;
92   border-radius: 4px;
93   box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);
94   position: absolute;
95   top: -60px;
96   background-color:#FFF;
97   width: 272px;
98   z-index: 55;
99   &:before {
100     position: absolute;
101     left: 50%;
102     bottom: -9px;
103     width: 16px;
104     height: 16px;
105     margin-left: -8px;
106     content: '';
107     display: block;
108     background-color:#FFF;
109     transform: rotate(45deg);
110     transform-origin: 50% 50%;
111     border-bottom: 1px solid #CCC;
112     border-right: 1px solid #CCC;
113     z-index: 56;
114   }
115   input {
116     background-color: #FFF;
117     border: 1px solid #DDD;
118     color: #666;
119     width: 172px;
120     z-index: 40;
121   }
122   input, button {
123     position: relative;
124     border-radius: 0;
125     height: 28px;
126     font-size: 12px;
127     vertical-align: top;
128   }
129   > i {
130     color: #888;
131     font-size: 18px;
132     padding-top: 4px;
133   }
134   span.icon {
135     cursor: pointer;
136     user-select: none;
137   }
138   .button {
139     line-height: 1;
140     margin: 0 0 0 -4px;
141     box-shadow: none;
142   }
143 }
144
145 // Attribute form
146 .floating-toolbox {
147   background-color: #FFF;
148   border: 1px solid #DDD;
149   right: $-xl*2;
150   width: 48px;
151   overflow: hidden;
152   align-items: stretch;
153   flex-direction: row;
154   display: flex;
155   transition: width ease-in-out 180ms;
156   margin-top: -1px;
157   min-height: 0px;
158   &.open {
159     width: 480px;
160   }
161   [toolbox-toggle] i {
162     transition: transform ease-in-out 180ms;
163   }
164   [toolbox-toggle] {
165     transition: background-color ease-in-out 180ms;
166   }
167   &.open [toolbox-toggle] {
168     background-color: rgba(255, 0, 0, 0.29);
169   }
170   &.open [toolbox-toggle] i {
171     transform: rotate(180deg);
172   }
173   > div {
174     flex: 1;
175     position: relative;
176   }
177   .tabs {
178     display: block;
179     border-right: 1px solid #DDD;
180     width: 48px;
181     flex: 0 1 auto;
182   }
183   .tabs i {
184     color: rgba(0, 0, 0, 0.5);
185     padding: 0;
186     margin: 0;
187   }
188   .tabs > span {
189     display: block;
190     cursor: pointer;
191     padding: $-s $-m;
192     font-size: 13.5px;
193     line-height: 1.6;
194     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
195   }
196   &.open .tabs > span.active {
197     color: #444;
198     background-color: rgba(0, 0, 0, 0.1);
199   }
200   div[toolbox-tab-content] {
201     padding-bottom: 45px;
202     display: flex;
203     flex: 1;
204     flex-direction: column;
205     min-height: 0px;
206     overflow-y: scroll;
207   }
208   div[toolbox-tab-content] .padded {
209     flex: 1;
210     padding-top: 0;
211   }
212   h4 {
213     font-size: 24px;
214     margin: $-m 0 0 0;
215     padding: 0 $-l $-s $-l;
216   }
217   .tags input {
218     max-width: 100%;
219     width: 100%;
220     min-width: 50px;
221   }
222   .tags td, .tag-table > div > div > div {
223     padding-right: $-s;
224     padding-top: $-s;
225     position: relative;
226   }
227   .handle {
228     user-select: none;
229     cursor: move;
230     color: #999;
231   }
232   form {
233     display: flex;
234     flex: 1;
235     flex-direction: column;
236     overflow-y: scroll;
237   }
238   table td, table th {
239     overflow: visible;
240   }
241 }
242
243 [toolbox-tab-content] {
244   display: none;
245 }
246
247 .tag-display {
248   position: relative;
249   table {
250     width: 100%;
251     margin: 0;
252     padding: 0;
253   }
254   tr:first-child td {
255     padding-top: 0;
256   }
257   .heading th {
258     padding: $-xs $-s;
259     color: rgba(100, 100, 100, 0.7);
260     border: 0;
261     font-weight: 400;
262   }
263   td {
264     border: 0;
265     border-bottom: 1px solid #EEE;
266     padding: $-xs $-s;
267     color: #444;
268   }
269   tr td:first-child {
270     padding-left:0;
271   }
272   .tag-value {
273     color: #888;
274   }
275   tr:last-child td {
276     border-bottom: none;
277   }
278   .tag {
279     padding: $-s;
280   }
281 }
282
283 .suggestion-box {
284   position: absolute;
285   background-color: #FFF;
286   border: 1px solid #BBB;
287   box-shadow: $bs-light;
288   list-style: none;
289   z-index: 100;
290   padding: 0;
291   margin: 0;
292   border-radius: 3px;
293   li {
294     display: block;
295     padding: $-xs $-s;
296     border-bottom: 1px solid #DDD;
297     &:last-child {
298       border-bottom: 0;
299     }
300     &.active {
301       background-color: #EEE;
302     }
303   }
304 }
305
306 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
307   min-height: 175px;
308 }