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