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

1 @use "mixins";

2 @use "vars";

4 .page-editor {

5 display: flex;

6 flex-direction: column;

7 align-items: stretch;

9 .edit-area {

10 flex: 1;

11 flex-direction: column;

12 z-index: 10;

13 border-radius: 0 0 8px 8px;

14 }

16 .mce-tinymce {

17 box-shadow: none;

18 }

20 .mce-top-part::before {

21 box-shadow: none;

22 }

23 }

25 .page-editor-page-area {

26 width: 100%;

27 border-radius: 8px;

28 box-shadow: vars.$bs-card;

29 min-width: 300px;

30 @include mixins.lightDark(background-color, #FFF, #333)

31 }

33 .page-edit-toolbar {

34 width: 100%;

35 margin: 0 auto;

36 display: grid;

37 grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);

38 align-items: center;

39 }

41 @include mixins.larger-than(vars.$bp-xxl) {

42 .page-editor-wysiwyg2024 .page-edit-toolbar,

43 .page-editor-wysiwyg2024 .page-editor-page-area,

44 .page-editor-wysiwyg .page-edit-toolbar,

45 .page-editor-wysiwyg .page-editor-page-area {

46 max-width: 1140px;

47 }

49 .page-editor-wysiwyg .floating-toolbox,

50 .page-editor-wysiwyg2024 .floating-toolbox {

51 position: absolute;

52 }

53 }

55 @include mixins.smaller-than(vars.$bp-m) {

56 .page-edit-toolbar {

57 display: flex;

58 flex-direction: row;

59 justify-content: space-between;

60 }

61 }

63 .title-input.page-title {

64 font-size: 0.8em;

65 .input {

66 border: 0;

67 margin-bottom: -1px;

68 }

69 input[type="text"] {

70 max-width: 840px;

71 margin: 0 auto;

72 border: none;

73 height: auto;

74 display: block;

75 width: 100%;

76 font-size: 20px;

77 border-radius: 8px;

78 }

79 input[type="text"]:focus {

80 position: relative;

81 outline-offset: -1px;

82 outline: 1px dashed var(--color-primary);

83 box-shadow: vars.$bs-card;

84 z-index: 50;

85 }

86 }

88 .page-editor-markdown .title-input.page-title input[type="text"] {

89 max-width: 100%;

90 }

92 body.tox-fullscreen .page-editor .edit-area,

93 body.markdown-fullscreen .page-editor .edit-area {

94 z-index: 12;

95 }

97 body.tox-fullscreen, body.markdown-fullscreen {

98 .page-editor, .flex-fill {

99 overflow: visible;

100 }

101 }

102

103 @include mixins.smaller-than(vars.$bp-s) {

104 .page-edit-toolbar {

105 overflow-x: scroll;

106 overflow-y: visible;

107 }

108 .page-edit-toolbar {

109 white-space: nowrap;

110 > div {

111 display: inline-block;

112 }

113 }

114 }

115

116 .page-save-mobile-button {

117 position: fixed;

118 z-index: 30;

119 border-radius: 50%;

120 width: 52px;

121 height: 52px;

122 font-size: 26px;

123 inset-inline-end: vars.$xs;

124 bottom: vars.$s;

125 box-shadow: vars.$bs-hover;

126 background-color: currentColor;

127 text-align: center;

128 svg {

129 fill: #FFF;

130 margin-inline-end: 0;

131 }

132 }

133

134 .draft-notification {

135 pointer-events: none;

136 transform: scale(0);

137 transition: transform ease-in-out 120ms;

138 transform-origin: 50% 50%;

139 &.visible {

140 transform: scale(1);

141 }

142 }

143

144 .page-style.editor {

145 padding: 0 !important;

146 }

147

148 // Page content pointers

149 .pointer-container {

150 position: fixed;

151 display: none;

152 left: 0;

153 z-index: 10;

154 }

155 .pointer {

156 border: 1px solid #CCC;

157 @include mixins.lightDark(border-color, #ccc, #000);

158 border-radius: 4px;

159 box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);

160 @include mixins.lightDark(background-color, #fff, #333);

161 width: 328px;

162

163 &:before {

164 position: absolute;

165 left: 50%;

166 bottom: -9px;

167 width: 16px;

168 height: 16px;

169 margin-inline-start: -8px;

170 content: '';

171 display: block;

172 transform: rotate(45deg);

173 transform-origin: 50% 50%;

174 border-right: 1px solid #CCC;

175 border-bottom: 1px solid #CCC;

176 z-index: 56;

177 @include mixins.lightDark(background-color, #fff, #333);

178 @include mixins.lightDark(border-color, #ccc, #000);

179 }

180 input, button, a {

181 position: relative;

182 height: 28px;

183 font-size: 12px;

184 vertical-align: top;

185 padding: 5px 16px;

186 }

187 input {

188 background-color: #FFF;

189 border: 1px solid #DDD;

190 @include mixins.lightDark(border-color, #ddd, #000);

191 color: #666;

192 width: auto;

193 flex: 1;

194 z-index: 58;

195 padding: 5px;

196 border-radius: 0;

197 }

198 .text-button {

199 @include mixins.lightDark(color, #444, #AAA);

200 }

201 .input-group .button {

202 line-height: 1;

203 margin-inline-start: -1px;

204 margin-block: 0;

205 box-shadow: none;

206 border-radius: 0;

207 }

208 a.button {

209 margin: 0;

210 }

211 .svg-icon {

212 width: 1.2em;

213 height: 1.2em;

214 }

215 .button {

216 @include mixins.lightDark(border-color, #ddd, #000);

217 }

218 }

219

220 // Page inline comments

221 .content-comment-highlight {

222 position: absolute;

223 left: 0;

224 top: 0;

225 width: 0;

226 height: 0;

227 user-select: none;

228 pointer-events: none;

229 &:after {

230 content: '';

231 position: absolute;

232 left: 0;

233 top: 0;

234 width: 100%;

235 height: 100%;

236 background-color: var(--color-primary);

237 opacity: 0.25;

238 }

239 }

240 .content-comment-window {

241 font-size: vars.$fs-m;

242 line-height: 1.4;

243 position: absolute;

244 top: calc(100% + 3px);

245 left: 0;

246 z-index: 92;

247 pointer-events: all;

248 min-width: min(340px, 80vw);

249 @include mixins.lightDark(background-color, #FFF, #222);

250 box-shadow: vars.$bs-hover;

251 border-radius: 4px;

252 overflow: hidden;

253 }

254 .content-comment-window-actions {

255 background-color: var(--color-primary);

256 color: #FFF;

257 display: flex;

258 align-items: center;

259 justify-content: end;

260 gap: vars.$xs;

261 button {

262 color: #FFF;

263 font-size: 12px;

264 padding: vars.$xs;

265 line-height: 1;

266 cursor: pointer;

267 }

268 button[data-action="jump"] {

269 text-decoration: underline;

270 }

271 svg {

272 fill: currentColor;

273 width: 12px;

274 }

275 }

276 .content-comment-window-content {

277 padding: vars.$xs vars.$s vars.$xs vars.$xs;

278 max-height: 200px;

279 overflow-y: scroll;

280 }

281 .content-comment-window-content .comment-reference-indicator-wrap {

282 display: none;

283 }

284 .content-comment-marker {

285 position: absolute;

286 right: -16px;

287 top: -16px;

288 pointer-events: all;

289 width: min(1.5em, 32px);

290 height: min(1.5em, 32px);

291 border-radius: min(calc(1.5em / 2), 32px);

292 display: flex;

293 align-items: center;

294 justify-content: center;

295 background-color: var(--color-primary);

296 box-shadow: vars.$bs-hover;

297 color: #FFF;

298 cursor: pointer;

299 z-index: 90;

300 transform: scale(1);

301 transition: transform ease-in-out 120ms;

302 svg {

303 fill: #FFF;

304 width: 80%;

305 }

306 }

307 .page-content [id^="bkmrk-"]:hover .content-comment-marker {

308 transform: scale(1.15);

309 }

310

311 // Page editor sidebar toolbox

312 .floating-toolbox {

313 @include mixins.lightDark(background-color, #FFF, #222);

314 overflow: hidden;

315 align-items: stretch;

316 flex-direction: row;

317 display: flex;

318 max-height: 100%;

319 border-radius: 8px;

320 box-shadow: vars.$bs-card;

321 margin-bottom: auto;

322 margin-inline-start: vars.$l;

323 position: relative;

324 &.open {

325 position: relative;

326 right: 0;

327 max-width: 480px;

328 margin-bottom: 0;

329 }

330 &:not(.open) .toolbox-tab-content {

331 display: none !important;

332 }

333 .toolbox-toggle svg {

334 transition: transform ease-in-out 180ms;

335 }

336 .toolbox-toggle {

337 transition: background-color ease-in-out 180ms;

338 }

339 &.open .toolbox-toggle {

340 background-color: rgba(255, 0, 0, 0.20);

341 }

342 &.open .toolbox-toggle svg {

343 transform: rotate(180deg);

344 }

345 > div {

346 flex: 1;

347 position: relative;

348 }

349 .tabs {

350 border-inline-end: 1px solid #DDD;

351 @include mixins.lightDark(border-inline-end-color, #DDD, #000);

352 width: 40px;

353 flex: 0 1 auto;

354 margin-inline-end: -1px;

355 }

356 .tabs-inner {

357 @include mixins.lightDark(background-color, #FFFFFF, #222);

358 }

359 .tabs svg {

360 padding: 0;

361 margin: 0;

362 }

363 .tabs-inner > button {

364 @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));

365 display: block;

366 cursor: pointer;

367 padding: 10px vars.$xs;

368 font-size: 18px;

369 line-height: 1.6;

370 }

371 .tabs-inner > button:hover, &.open .tabs-inner > button.active {

372 color: var(--color-link) !important;

373 position: relative;

374 &:after {

375 content: '';

376 display: block;

377 position: absolute;

378 left: 0;

379 width: 100%;

380 top: 0;

381 height: 100%;

382 background-color: currentColor;

383 opacity: .075;

384 }

385 }

386 &.open .tabs-inner > button.active {

387 border-inline-end: 1px solid var(--color-link);

388 margin-inline-end: -1px;

389 }

390 h4 {

391 font-size: 24px;

392 margin: vars.$m 0 0 0;

393 padding: 0 vars.$l vars.$s vars.$l;

394 }

395 .tags input {

396 max-width: 100%;

397 width: 100%;

398 min-width: 50px;

399 }

400 .tags td, .inline-start-table > div > div > div {

401 padding-inline-end: vars.$s;

402 padding-top: vars.$s;

403 position: relative;

404 }

405 .handle {

406 user-select: none;

407 cursor: move;

408 fill: #999;

409 }

410 form {

411 display: flex;

412 flex: 1;

413 flex-direction: column;

414 overflow-y: scroll;

415 }

416 table td, table th {

417 overflow: visible;

418 }

419 }

420

421 @include mixins.smaller-than(vars.$bp-xxl) {

422 .floating-toolbox {

423 margin-inline-start: vars.$s;

424 }

425 }

426

427 @include mixins.smaller-than(vars.$bp-s) {

428 .page-editor-page-area-wrap {

429 margin: 4px !important;

430 }

431 .floating-toolbox {

432 margin-inline-start: 4px;

433 }

434 .floating-toolbox .tabs {

435 width: 32px;

436 }

437 .floating-toolbox .tabs-inner > button {

438 font-size: 12px;

439 }

440 .page-edit-toolbar {

441 padding-block: 0 !important;

442 }

443 .page-editor.toolbox-open .page-editor-page-area {

444 display: none;

445 }

446 }

447

448 .toolbox-tab-content {

449 display: none;

450 overflow-y: auto;

451 padding-bottom: 45px;

452 }

453

454 .suggestion-box {

455 top: auto;

456 margin: -4px 0 0;

457 right: auto;

458 left: 0;

459 padding: 0;

460 li {

461 display: block;

462 border-bottom: 1px solid #DDD;

463 &:last-child {

464 border-bottom: 0;

465 }

466 }

467 }

468

469 .comments-container h5 {

470 color: #888;

471 font-weight: normal;

472 margin-top: 0.5em;

473 }

474

475 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {

476 min-height: 175px;

477 }

478

479 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */

480 .mce-floatpanel[aria-label="Insert/edit media"] {

481 .mce-open {

482 display: none;

483 }

484 }

485

486 .entity-list-item > span:first-child,

487 .icon-list-item > span:first-child,

488 .split-icon-list-item > a > .icon,

489 .chapter-expansion > .icon {

490 font-size: 0.8rem;

491 width: 1.88em;

492 height: 1.88em;

493 flex-shrink: 0;

494 display: flex;

495 align-items: center;

496 justify-content: center;

497 text-align: center;

498 border-radius: 1em;

499 position: relative;

500 overflow: hidden;

501 svg {

502 margin: 0;

503 bottom: 0;

504 }

505 &:after {

506 content: '';

507 position: absolute;

508 background-color: currentColor;

509 opacity: 0.2;

510 left: 0;

511 top: 0;

512 width: 100%;

513 height: 100%;

514 }

515 }

516

517 .entity-chip {

518 display: inline-block;

519 align-items: center;

520 justify-content: center;

521 text-align: center;

522 font-size: 0.9em;

523 border-radius: 3px;

524 position: relative;

525 overflow: hidden;

526 padding: vars.$xs vars.$s;

527 fill: currentColor;

528 opacity: 0.85;

529 transition: opacity ease-in-out 120ms;

530 &:after {

531 content: '';

532 position: absolute;

533 background-color: currentColor;

534 opacity: 0.15;

535 left: 0;

536 top: 0;

537 width: 100%;

538 height: 100%;

539 }

540 &:hover {

541 text-decoration: none;

542 opacity: 1;

543 }

544 @media (prefers-contrast: more) {

545 opacity: 1;

546 }

547 }