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

1 // Common variables

2 :root {

3 --editor-color-primary: #206ea7;

4 }

6 // Main UI elements

7 .editor-container {

8 background-color: #FFF;

9 position: relative;

10 &.fullscreen {

11 z-index: 500;

12 }

13 }

14 .editor-toolbar-main {

15 display: flex;

16 flex-wrap: wrap;

17 justify-content: center;

18 border-top: 1px solid #DDD;

19 border-bottom: 1px solid #DDD;

20 }

22 body.editor-is-fullscreen {

23 overflow: hidden;

24 .edit-area {

25 z-index: 20;

26 }

27 }

28 .editor-content-area {

29 min-height: 100%;

30 padding-block: 1rem;

31 &:focus {

32 outline: 0;

33 }

34 }

35 .editor-content-wrap {

36 position: relative;

37 overflow-y: scroll;

38 flex: 1;

39 }

41 // Buttons

42 .editor-button {

43 font-size: 12px;

44 padding: 4px;

45 color: #444;

46 border-radius: 4px;

47 display: flex;

48 align-items: center;

49 justify-content: center;

50 margin: 2px;

51 }

52 .editor-button:hover {

53 background-color: #EEE;

54 cursor: pointer;

55 color: #000;

56 }

57 .editor-button[disabled] {

58 pointer-events: none;

59 cursor: not-allowed;

60 opacity: .6;

61 }

62 .editor-button-active, .editor-button-active:hover {

63 background-color: #ceebff;

64 color: #000;

65 }

66 .editor-button-long {

67 display: flex !important;

68 flex-direction: row;

69 align-items: center;

70 justify-content: start;

71 gap: .5rem;

72 }

73 .editor-button-text {

74 font-weight: 400;

75 color: #000;

76 font-size: 14px;

77 flex: 1;

78 padding-inline-end: 4px;

79 }

80 .editor-button-format-preview {

81 padding: 4px 6px;

82 display: block;

83 }

84 .editor-button-long .editor-button-icon {

85 width: 24px;

86 height: 24px;

87 }

88 .editor-button-icon svg {

89 width: 24px;

90 height: 24px;

91 color: inherit;

92 fill: currentColor;

93 display: block;

94 }

95 .editor-menu-button-icon {

96 width: 24px;

97 height: 24px;

98 svg {

99 fill: #888;

100 }

101 }

102 .editor-container[dir="rtl"] .editor-menu-button-icon {

103 rotate: 180deg;

104 }

105 .editor-button-with-menu-container {

106 display: flex;

107 flex-direction: row;

108 gap: 0;

109 align-items: stretch;

110 border-radius: 4px;

111 .editor-dropdown-menu-container {

112 display: flex;

113 }

114 .editor-dropdown-menu-container > .editor-dropdown-menu {

115 top: 100%;

116 }

117 .editor-dropdown-menu-container > .editor-button {

118 padding-inline: 4px;

119 margin-inline-start: -3px;

120 svg {

121 width: 12px;

122 height: 12px;

123 }

124 }

125 &:hover {

126 outline: 1px solid #DDD;

127 outline-offset: -3px;

128 }

129 }

130

131 // Containers

132 .editor-dropdown-menu-container {

133 position: relative;

134 }

135 .editor-dropdown-menu {

136 position: absolute;

137 background-color: #FFF;

138 box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);

139 z-index: 99;

140 display: flex;

141 flex-direction: row;

142 }

143 .editor-dropdown-menu-vertical {

144 display: flex;

145 flex-direction: column;

146 align-items: stretch;

147 min-width: 160px;

148 }

149 .editor-dropdown-menu-vertical .editor-button {

150 border-bottom: 0;

151 text-align: start;

152 display: block;

153 width: 100%;

154 }

155 .editor-dropdown-menu-vertical > .editor-dropdown-menu-container .editor-dropdown-menu {

156 inset-inline-start: 100%;

157 top: 0;

158 }

159

160 .editor-separator {

161 display: block;

162 height: 1px;

163 background-color: #DDD;

164 opacity: .8;

165 }

166

167 .editor-format-menu-toggle {

168 width: 130px;

169 height: 32px;

170 font-size: 13px;

171 overflow: hidden;

172 padding-inline: 12px;

173 justify-content: start;

174 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23666" d="M7.41 8L12 12.58 16.59 8 18 9.41l-6 6-6-6z"/></svg>');

175 background-repeat: no-repeat;

176 background-position: 98% 50%;

177 background-size: 28px;

178 }

179 .editor-container[dir="rtl"] .editor-format-menu-toggle {

180 background-position: 2% 50%;

181 }

182 .editor-format-menu .editor-dropdown-menu {

183 min-width: 300px;

184 .editor-dropdown-menu {

185 min-width: 220px;

186 }

187 .editor-button-icon {

188 display: none;

189 }

190 }

191 .editor-format-menu .editor-dropdown-menu .editor-dropdown-menu-container > .editor-button {

192 padding: 8px 10px;

193 }

194

195 .editor-overflow-container {

196 display: flex;

197 border-inline: 1px solid #DDD;

198 padding-inline: 4px;

199 &:first-child {

200 border-inline-start: none;

201 }

202 &:last-child {

203 border-inline-end: none;

204 }

205 + .editor-overflow-container {

206 border-inline-start: none;

207 }

208 }

209

210 .editor-context-toolbar {

211 position: fixed;

212 background-color: #FFF;

213 border: 1px solid #DDD;

214 padding: .2rem;

215 border-radius: 4px;

216 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);

217 display: flex;

218 flex-direction: row;

219 &:before {

220 content: '';

221 z-index: -1;

222 display: block;

223 width: 8px;

224 height: 8px;

225 position: absolute;

226 background-color: #FFF;

227 border-top: 1px solid #DDD;

228 border-left: 1px solid #DDD;

229 transform: rotate(45deg);

230 left: 50%;

231 margin-left: -4px;

232 top: -5px;

233 }

234 &.is-above:before {

235 top: calc(100% - 5px);

236 transform: rotate(225deg);

237 }

238 }

239

240 // Modals

241 .editor-modal-wrapper {

242 position: fixed;

243 display: flex;

244 align-items: center;

245 justify-content: center;

246 z-index: 999;

247 background-color: rgba(0, 0, 0, 0.5);

248 width: 100%;

249 height: 100%;

250 }

251 .editor-modal {

252 background-color: #FFF;

253 border-radius: 4px;

254 overflow: hidden;

255 box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);

256 }

257 .editor-modal-header {

258 display: flex;

259 justify-content: space-between;

260 align-items: stretch;

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

262 color: #FFF;

263 }

264 .editor-modal-title {

265 padding: 8px $-m;

266 }

267 .editor-modal-close {

268 color: #FFF;

269 padding: 8px $-m;

270 align-items: center;

271 justify-content: center;

272 cursor: pointer;

273 &:hover {

274 background-color: rgba(255, 255, 255, 0.1);

275 }

276 svg {

277 width: 1rem;

278 height: 1rem;

279 fill: currentColor;

280 display: block;

281 }

282 }

283 .editor-modal-body {

284 padding: $-m;

285 }

286

287 // Specific UI elements

288 .editor-color-select-row {

289 display: flex;

290 }

291 .editor-color-select-option {

292 width: 28px;

293 height: 28px;

294 cursor: pointer;

295 display: flex;

296 align-items: center;

297 justify-content: center;

298 }

299 .editor-color-select-option:hover {

300 border-radius: 3px;

301 box-sizing: border-box;

302 z-index: 3;

303 box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);

304 }

305 .editor-color-select-option[data-color=""] svg {

306 width: 20px;

307 height: 20px;

308 fill: #888;

309 }

310 .editor-table-creator-row {

311 display: flex;

312 }

313 .editor-table-creator-cell {

314 border: 1px solid #DDD;

315 width: 15px;

316 height: 15px;

317 cursor: pointer;

318 &.active {

319 background-color: var(--editor-color-primary);

320 }

321 }

322 .editor-table-creator-display {

323 text-align: center;

324 padding: 0.2em;

325 }

326

327 // In-editor elements

328 .editor-image-wrap {

329 position: relative;

330 display: inline-flex;

331 }

332 .editor-node-resizer {

333 position: absolute;

334 left: 0;

335 right: auto;

336 display: inline-block;

337 outline: 2px dashed var(--editor-color-primary);

338 direction: ltr;

339 }

340 .editor-node-resizer-handle {

341 position: absolute;

342 display: block;

343 width: 10px;

344 height: 10px;

345 border: 2px solid var(--editor-color-primary);

346 z-index: 3;

347 background-color: #FFF;

348 user-select: none;

349 &.nw {

350 inset-inline-start: -5px;

351 inset-block-start: -5px;

352 cursor: nw-resize;

353 }

354 &.ne {

355 inset-inline-end: -5px;

356 inset-block-start: -5px;

357 cursor: ne-resize;

358 }

359 &.se {

360 inset-inline-end: -5px;

361 inset-block-end: -5px;

362 cursor: se-resize;

363 }

364 &.sw {

365 inset-inline-start: -5px;

366 inset-block-end: -5px;

367 cursor: sw-resize;

368 }

369 }

370 .editor-node-resizer-ghost {

371 opacity: 0.5;

372 display: none;

373 position: absolute;

374 left: 0;

375 top: 0;

376 width: 100%;

377 height: 100%;

378 z-index: 2;

379 pointer-events: none;

380 background-color: var(--editor-color-primary);

381 }

382 .editor-node-resizer.active .editor-node-resizer-ghost {

383 display: block;

384 }

385

386 .editor-table-marker {

387 position: fixed;

388 background-color: var(--editor-color-primary);

389 z-index: 99;

390 user-select: none;

391 opacity: 0;

392 &:hover, &.active {

393 opacity: 0.4;

394 }

395 }

396 .editor-table-marker-column {

397 width: 4px;

398 cursor: col-resize;

399 }

400 .editor-table-marker-row {

401 height: 4px;

402 cursor: row-resize;

403 }

404

405 .editor-code-block-wrap {

406 user-select: none;

407 > * {

408 pointer-events: none;

409 }

410 &.selected .cm-editor {

411 border: 1px dashed var(--editor-color-primary);

412 }

413 }

414 .editor-diagram.selected {

415 outline: 2px dashed var(--editor-color-primary);

416 }

417

418 .editor-media-wrap {

419 display: inline-block;

420 cursor: not-allowed;

421 iframe {

422 pointer-events: none;

423 }

424 &.align-left {

425 float: left;

426 }

427 &.align-right {

428 float: right;

429 }

430 &.align-center {

431 display: block;

432 margin-inline: auto;

433 }

434 }

435

436 /**

437 * Fake task list checkboxes

438 */

439 .editor-content-area .task-list-item {

440 margin-left: 0;

441 position: relative;

442 }

443 .editor-content-area .task-list-item > input[type="checkbox"] {

444 display: none;

445 }

446 .editor-content-area .task-list-item:before {

447 content: '';

448 display: inline-block;

449 border: 2px solid #CCC;

450 width: 12px;

451 height: 12px;

452 border-radius: 2px;

453 margin-right: 8px;

454 vertical-align: text-top;

455 cursor: pointer;

456 position: absolute;

457 left: -24px;

458 top: 4px;

459 }

460 .editor-content-area .task-list-item[checked]:before {

461 background-color: #CCC;

462 background-image: url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.4856 20.274-6.736-6.736 2.9287-2.7823 3.8073 3.8073 10.836-10.836 2.9287 2.9287z" stroke-width="1.4644"/></svg>');

463 background-position: 50% 50%;

464 background-size: 100% 100%;

465 }

466

467 /**

468 * Form elements

469 */

470 .editor-form-field-wrapper {

471 margin-bottom: .5rem;

472 }

473 .editor-form-field-input {

474 display: block;

475 width: 100%;

476 min-width: 250px;

477 border: 1px solid #DDD;

478 padding: .5rem;

479 border-radius: 4px;

480 color: #444;

481 }

482 textarea.editor-form-field-input {

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

484 width: 350px;

485 height: 250px;

486 font-size: 12px;

487 }

488 .editor-form-field-label {

489 color: #444;

490 font-weight: 700;

491 font-size: 12px;

492 }

493 .editor-form-actions {

494 display: flex;

495 justify-content: end;

496 gap: $-s;

497 margin-top: $-m;

498 }

499 .editor-form-actions > button {

500 display: block;

501 font-size: 0.85rem;

502 line-height: 1.4em;

503 padding: $-xs*1.3 $-m;

504 font-weight: 400;

505 border-radius: 4px;

506 cursor: pointer;

507 box-shadow: none;

508 &:focus {

509 outline: 1px dotted currentColor;

510 outline-offset: -$-xs;

511 box-shadow: none;

512 filter: brightness(90%);

513 }

514 }

515 .editor-form-action-primary {

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

517 color: #FFF;

518 border: 1px solid var(--color-primary);

519 &:hover {

520 @include lightDark(box-shadow, $bs-light, $bs-dark);

521 filter: brightness(110%);

522 }

523 }

524 .editor-form-action-secondary {

525 border: 1px solid;

526 @include lightDark(border-color, #CCC, #666);

527 @include lightDark(color, #666, #AAA);

528 &:hover, &:focus, &:active {

529 @include lightDark(color, #444, #BBB);

530 border: 1px solid #CCC;

531 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

532 background-color: #F2F2F2;

533 @include lightDark(background-color, #f8f8f8, #444);

534 filter: none;

535 }

536 &:active {

537 border-color: #BBB;

538 background-color: #DDD;

539 color: #666;

540 box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

541 }

542 }

543 .editor-form-tab-container {

544 display: flex;

545 flex-direction: row;

546 gap: 2rem;

547 }

548 .editor-form-tab-controls {

549 display: flex;

550 flex-direction: column;

551 align-items: stretch;

552 gap: .25rem;

553 }

554 .editor-form-tab-control {

555 font-weight: bold;

556 font-size: 14px;

557 color: #444;

558 border-bottom: 2px solid transparent;

559 position: relative;

560 cursor: pointer;

561 padding: .25rem .5rem;

562 text-align: start;

563 &[aria-selected="true"] {

564 border-color: var(--editor-color-primary);

565 color: var(--editor-color-primary);

566 }

567 &[aria-selected="true"]:after, &:hover:after {

568 background-color: var(--editor-color-primary);

569 opacity: .15;

570 content: '';

571 display: block;

572 position: absolute;

573 left: 0;

574 top: 0;

575 width: 100%;

576 height: 100%;

577 }

578 }

579 .editor-form-tab-contents {

580 width: 360px;

581 }

582 .editor-action-input-container {

583 display: flex;

584 flex-direction: row;

585 align-items: end;

586 justify-content: space-between;

587 gap: .1rem;

588 .editor-button {

589 margin-bottom: 12px;

590 }

591 }

592

593 // Editor theme styles

594 .editor-theme-bold {

595 font-weight: bold;

596 }

597 .editor-theme-italic {

598 font-style: italic;

599 }

600 .editor-theme-strikethrough {

601 text-decoration-line: line-through;

602 }

603 .editor-theme-underline {

604 text-decoration-line: underline;

605 }

606 .editor-theme-underline-strikethrough {

607 text-decoration: underline line-through;

608 }