BookStack Code Mirror - bookstack/blob - resources/sass/

1 /**

2 * Fonts

3 */

5 body, button, input, select, label, textarea {

6 font-family: var(--font-body);

7 }

8 pre, #markdown-editor-input, .text-mono, .code-base {

9 font-family: var(--font-code);

10 }

12 /*

13 * Header Styles

14 */

16 h1 {

17 font-size: 3.425em;

18 line-height: 1.22222222em;

19 margin-top: 0.48888889em;

20 margin-bottom: 0.48888889em;

21 }

22 h2 {

23 font-size: 2.8275em;

24 line-height: 1.294117647em;

25 margin-top: 0.8627451em;

26 margin-bottom: 0.43137255em;

27 }

28 h3 {

29 font-size: 2.333em;

30 line-height: 1.221428572em;

31 margin-top: 0.78571429em;

32 margin-bottom: 0.43137255em;

33 }

34 h4 {

35 font-size: 1.666em;

36 line-height: 1.375em;

37 margin-top: 0.78571429em;

38 margin-bottom: 0.43137255em;

39 }

41 h1, h2, h3, h4, h5, h6 {

42 font-weight: 400;

43 position: relative;

44 display: block;

45 font-family: var(--font-heading, var(--font-body));

46 @include lightDark(color, #222, #BBB);

47 .subheader {

48 font-size: 0.5em;

49 line-height: 1em;

50 color: lighten($text-dark, 32%);

51 }

52 }

54 h5 {

55 font-size: 1.4em;

56 }

58 h5, h6 {

59 line-height: 1.2em;

60 margin-top: 0.78571429em;

61 margin-bottom: 0.66em;

62 }

64 @include smaller-than($s) {

65 h1 {

66 font-size: 2.8275em;

67 }

68 h2 {

69 font-size: 2.333em;

70 }

71 h3 {

72 font-size: 1.666em;

73 }

74 h4 {

75 font-size: 1.333em;

76 }

77 h5 {

78 font-size: 1.161616em;

79 }

80 }

82 .list-heading {

83 font-size: 2rem;

84 }

86 h2.list-heading {

87 font-size: 1.333rem;

88 }

90 /*

91 * Link styling

92 */

93 a {

94 color: var(--color-link);

95 fill: currentColor;

96 cursor: pointer;

97 text-decoration: none;

98 transition: filter ease-in-out 80ms;

99 line-height: 1.6;

100 &:hover {

101 text-decoration: underline;

102 }

103 &.icon {

104 display: inline-block;

105 }

106 svg {

107 position: relative;

108 display: inline-block;

109 }

110 &:focus img:only-child {

111 outline: 2px dashed var(--color-link);

112 outline-offset: 2px;

113 }

114 }

115

116 a.no-link-style {

117 color: inherit;

118 &:hover {

119 text-decoration: none;

120 }

121 }

122

123 .blended-links a {

124 color: inherit;

125 svg {

126 fill: currentColor;

127 }

128 }

129

130 /*

131 * Other HTML Text Elements

132 */

133 p, ul, ol, pre, table, blockquote {

134 margin-top: 0.3em;

135 margin-bottom: 1.375em;

136 }

137

138 hr {

139 border: 0;

140 height: 1px;

141 @include lightDark(background, #eaeaea, #555);

142 margin-bottom: $-l;

143 &.faded {

144 background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);

145 }

146 &.darker {

147 @include lightDark(background, #DDD, #666);

148 }

149 &.margin-top, &.even {

150 margin-top: $-l;

151 }

152 }

153

154 strong, b, .bold, .strong {

155 font-weight: bold;

156 > strong, > b, > .bold, > .strong {

157 font-weight: bolder;

158 }

159 }

160

161 em, i, .italic {

162 font-style: italic;

163 }

164

165 small, p.small, span.small, .text-small {

166 font-size: 0.75rem;

167 }

168

169 sup, .superscript {

170 vertical-align: super;

171 font-size: 0.8em;

172 }

173

174 sub, .subscript {

175 vertical-align: sub;

176 font-size: 0.8em;

177 }

178

179 pre {

180 font-size: 12px;

181 border: 1px solid #DDD;

182 @include lightDark(background-color, #FFF, #2B2B2B);

183 @include lightDark(border-color, #DDD, #111);

184 border-radius: 4px;

185 padding-inline-start: 26px;

186 position: relative;

187 padding-top: 3px;

188 padding-bottom: 3px;

189 &:before {

190 content: '';

191 display: block;

192 position: absolute;

193 top: 0;

194 width: 22.4px;

195 inset-inline-start: 0;

196 height: 100%;

197 @include lightDark(background-color, #f5f5f5, #313335);

198 @include lightDark(border-inline-end, 1px solid #DDD, none);

199 }

200 }

201

202 @media print {

203 pre {

204 padding-left: 12px;

205 }

206 pre:before {

207 display: none;

208 }

209 }

210

211 blockquote {

212 display: block;

213 position: relative;

214 border-left: 4px solid transparent;

215 border-left-color: var(--color-primary);

216 @include lightDark(background-color, #f8f8f8, #333);

217 padding: $-s $-m $-s $-xl;

218 overflow: auto;

219 &:before {

220 content: "\201C";

221 font-size: 2em;

222 font-weight: bold;

223 position: absolute;

224 top: $-s;

225 left: $-s;

226 color: lighten($text-dark, 20%);

227 }

228 }

229

230 .text-mono {

231 font-family: var(--font-code);

232 }

233

234 .text-uppercase {

235 text-transform: uppercase;

236 }

237

238 .text-capitals {

239 text-transform: capitalize;

240 }

241

242 .code-base {

243 font-size: 0.84em;

244 border: 1px solid #DDD;

245 border-radius: 3px;

246 @include lightDark(background-color, #f8f8f8, #2b2b2b);

247 @include lightDark(border-color, #DDD, #444);

248 }

249

250 code {

251 @extend .code-base;

252 display: inline;

253 padding: 1px 3px;

254 white-space:pre-wrap;

255 line-height: 1.2em;

256 }

257

258 span.code {

259 @extend .code-base;

260 padding: 1px $-xs;

261 }

262

263 pre code {

264 background-color: transparent;

265 border: 0;

266 font-size: 1em;

267 display: block;

268 line-height: 1.6;

269 }

270

271 span.highlight {

272 font-weight: bold;

273 padding: 2px 4px;

274 }

275

276 /*

277 * Lists

278 */

279 ul, ol {

280 padding-left: $-m * 2.0;

281 padding-right: $-m * 2.0;

282 display: flow-root;

283 p {

284 margin: 0;

285 }

286 }

287 ul {

288 list-style: disc;

289 ul {

290 list-style: circle;

291 }

292 label {

293 margin: 0;

294 }

295 }

296

297 ol {

298 list-style: decimal;

299 }

300

301 li > ol, li > ul {

302 margin-top: 0;

303 margin-bottom: 0;

304 margin-block-end: 0;

305 margin-block-start: 0;

306 padding-block-end: 0;

307 padding-block-start: 0;

308 padding-left: $-m * 1.2;

309 padding-right: $-m * 1.2;

310 }

311

312 li.checkbox-item, li.task-list-item {

313 display: list-item;

314 list-style: none;

315 margin-left: -($-m * 1.2);

316 input[type="checkbox"] {

317 margin-right: $-xs;

318 }

319 li.checkbox-item, li.task-list-item {

320 margin-left: $-xs;

321 }

322 }

323

324 /*

325 * Generic text styling classes

326 */

327 .underlined {

328 text-decoration: underline;

329 }

330

331 .text-center {

332 text-align: center;

333 }

334 .text-left {

335 text-align: start;

336 }

337 .text-right {

338 text-align: end;

339 }

340

341 @each $sizeLetter, $size in $screen-sizes {

342 @include larger-than($size) {

343 .text-#{$sizeLetter}-center {

344 text-align: center;

345 }

346 .text-#{$sizeLetter}-left {

347 text-align: start;

348 }

349 .text-#{$sizeLetter}-right {

350 text-align: end;

351 }

352 }

353 }

354

355 .text-bigger {

356 font-size: 1.1em;

357 }

358

359 .text-large {

360 font-size: 1.6666em;

361 }

362

363 .no-color {

364 color: inherit;

365 }

366

367 .break-text {

368 white-space: normal;

369 word-wrap: break-word;

370 overflow-wrap: break-word;

371 }

372

373 .text-limit-lines-1 {

374 white-space: nowrap;

375 overflow: hidden;

376 text-overflow: ellipsis;

377 }

378

379 .text-limit-lines-2 {

380 // -webkit use here is actually standardised cross-browser:

381 // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

382 display: -webkit-box;

383 -webkit-box-orient: vertical;

384 -webkit-line-clamp: 2;

385 overflow: hidden;

386 }

387

388 /**

389 * Grouping

390 */

391 .header-group {

392 margin: $-m 0;

393 h1, h2, h3, h4, h5, h6 {

394 margin: 0;

395 }

396 }

397

398 span.sep {

399 color: #BBB;

400 padding: 0 $-xs;

401 }

402

403 .list > * {

404 display: block;

405 }

406

407 /**

408 * Icons

409 */

410 .svg-icon {

411 width: 1em;

412 height: 1em;

413 display: inline-block;

414 position: relative;

415 bottom: -0.105em;

416 margin-inline-end: $-xs;

417 pointer-events: none;

418 fill: currentColor;

419 }