]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_text.scss
Add `ja` locale to config
[bookstack] / resources / assets / sass / _text.scss
1 /*
2  * Header Styles
3  */
4
5 h1 {
6   font-size: 3.425em;
7   line-height: 1.22222222em;
8   margin-top: 0.48888889em;
9   margin-bottom: 0.48888889em;
10 }
11 h2 {
12   font-size: 2.8275em;
13   line-height: 1.294117647em;
14   margin-top: 0.8627451em;
15   margin-bottom: 0.43137255em;
16 }
17 h3 {
18   font-size: 2.333em;
19   line-height: 1.221428572em;
20   margin-top: 0.78571429em;
21   margin-bottom: 0.43137255em;
22 }
23 h4 {
24   font-size: 1.666em;
25   line-height: 1.375em;
26   margin-top: 0.78571429em;
27   margin-bottom: 0.43137255em;
28 }
29
30 h1, h2, h3, h4, h5, h6 {
31   font-weight: 400;
32   position: relative;
33   display: block;
34   color: #555;
35   .subheader {
36     font-size: 0.5em;
37     line-height: 1em;
38     color: lighten($text-dark, 32%);
39   }
40 }
41
42 h5 {
43   font-size: 1.4em;
44 }
45
46 h5, h6 {
47   font-weight: 500;
48   line-height: 1.2em;
49   margin-top: 0.78571429em;
50   margin-bottom: 0.66em;
51 }
52
53 /*
54  * Link styling
55  */
56 a, .link {
57   color: $primary;
58   cursor: pointer;
59   text-decoration: none;
60   transition: color ease-in-out 80ms;
61   font-family: $text;
62   line-height: 1.6;
63   &:hover {
64     text-decoration: underline;
65     color: darken($primary, 20%);
66   }
67   i {
68     padding-right: $-s;
69   }
70   i.zmdi-hc-flip-horizontal {
71     padding-right: 0;
72     padding-left: $-s;
73   }
74   &.icon {
75     display: inline-block;
76   }
77   svg {
78     position: relative;
79     display: inline-block;
80   }
81 }
82
83 /*
84  * Other HTML Text Elements
85  */
86 p, ul, ol, pre, table, blockquote {
87   margin-top: 0.3em;
88   margin-bottom: 1.375em;
89 }
90
91 hr {
92   border: 0;
93   height: 1px;
94   background: #EAEAEA;
95   margin-bottom: $-l;
96   &.faded {
97     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
98   }
99   &.margin-top, &.even {
100     margin-top: $-l;
101   }
102 }
103
104 strong, b, .bold, .strong {
105   font-weight: bold;
106   > strong, > b, > .bold, > .strong {
107     font-weight: bolder;
108   }
109 }
110
111 em, i, .italic {
112   font-style: italic;
113 }
114
115 small, p.small, span.small, .text-small {
116   font-size: 0.8em;
117   color: lighten($text-dark, 20%);
118   small, p.small, span.small, .text-small {
119     font-size: 1em;
120   }
121 }
122
123 sup, .superscript {
124   vertical-align: super;
125   font-size: 0.8em;
126 }
127
128 sub, .subscript {
129   vertical-align: sub;
130   font-size: 0.8em;
131 }
132
133 pre {
134   font-family: monospace;
135   font-size: 12px;
136   background-color: #f5f5f5;
137   border: 1px solid #DDD;
138 }
139
140
141 blockquote {
142   display: block;
143   position: relative;
144   border-left: 4px solid $primary;
145   background-color: #F8F8F8;
146   padding: $-s $-m $-s $-xl;
147   &:before {
148     content: "\201C";
149     font-size: 2em;
150     font-weight: bold;
151     position: absolute;
152     top: $-s;
153     left: $-s;
154     color: lighten($text-dark, 20%);
155   }
156 }
157
158 .code-base {
159     background-color: #F8F8F8;
160     font-family: monospace;
161     font-size: 0.80em;
162     border: 1px solid #DDD;
163     border-radius: 3px;
164 }
165
166 code {
167   @extend .code-base;
168   display: inline;
169   padding: 1px 3px;
170   white-space:pre;
171   line-height: 1.2em;
172   margin-bottom: 1.2em;
173 }
174
175 span.code {
176   @extend .code-base;
177   padding: 1px $-xs;
178 }
179
180 pre code {
181   background-color: transparent;
182   border: 0;
183   font-size: 1em;
184   display: block;
185 }
186 /*
187  * Text colors
188  */
189 p.pos, p .pos, span.pos, .text-pos {
190   color: $positive;
191   &:hover {
192     color: $positive;
193   }
194 }
195
196 p.neg, p .neg, span.neg, .text-neg {
197   color: $negative;
198   &:hover {
199     color: $negative;
200   }
201 }
202
203 p.muted, p .muted, span.muted, .text-muted {
204         color: lighten($text-dark, 26%);
205     &.small, .small {
206       color: lighten($text-dark, 32%);
207     }
208 }
209
210 p.primary, p .primary, span.primary, .text-primary {
211         color: $primary;
212   &:hover {
213     color: $primary;
214   }
215 }
216
217 p.secondary, p .secondary, span.secondary, .text-secondary {
218         color: $secondary;
219   &:hover {
220     color: $secondary;
221   }
222 }
223
224 .text-book {
225   color: $color-book;
226   &:hover {
227     color: $color-book;
228   }
229 }
230 .text-page {
231   color: $color-page;
232   &:hover {
233     color: $color-page;
234   }
235   &.draft {
236     color: $color-page-draft;
237   }
238   &.draft:hover {
239     color: $color-page-draft;
240   }
241 }
242 .text-chapter {
243   color: $color-chapter;
244   &:hover {
245     color: $color-chapter;
246   }
247 }
248 .faded .text-book:hover {
249   color: $color-book !important;
250 }
251 .faded .text-chapter:hover {
252   color: $color-chapter !important;
253 }
254 .faded .text-page:hover {
255   color: $color-page !important;
256 }
257
258 span.highlight {
259   //background-color: rgba($primary, 0.2);
260   font-weight: bold;
261   padding: 2px 4px;
262 }
263
264 /*
265  * Lists
266  */
267 ul, ol {
268   overflow: hidden;
269   p {
270     margin: 0;
271   }
272 }
273 ul {
274   padding-left: $-m * 1.3;
275   list-style: disc;
276   ul {
277     list-style: circle;
278     margin-top: 0;
279     margin-bottom: 0;
280   }
281   label {
282     margin: 0;
283   }
284 }
285
286 ol {
287   list-style: decimal;
288   padding-left: $-m * 2;
289 }
290
291 li.checkbox-item, li.task-list-item {
292   list-style: none;
293   margin-left: - ($-m * 1.3);
294   input[type="checkbox"] {
295     margin-right: $-xs;
296   }
297 }
298
299 /*
300  * Generic text styling classes
301  */
302 .underlined {
303   text-decoration: underline;
304 }
305
306 .text-center {
307   text-align: center;
308 }
309
310 .text-left {
311   text-align: left;
312 }
313
314 .text-right {
315   text-align: right;
316 }
317
318 .text-bigger {
319   font-size: 1.1em;
320 }
321
322 .text-large {
323   font-size: 1.6666em;
324 }
325
326 .no-color {
327   color: inherit;
328 }
329
330 /**
331  * Grouping
332  */
333 .header-group {
334   margin: $-m 0;
335   h1, h2, h3, h4, h5, h6 {
336     margin: 0;
337   }
338 }
339
340 span.sep {
341   color: #BBB;
342   padding: 0 $-xs;
343 }
344
345 .list > * {
346   display: block;
347 }
348
349 .action-header {
350   h1 {
351     margin-top: $-m;
352   }
353 }
354
355 /**
356   * Icons
357   */
358 i {
359   padding-right: $-xs;
360 }
361