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