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