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

2 #editor.bs-editor {

3 padding-top: 0;

4 }

6 //.bs-editor .menubar {

7 // border-bottom: 1px solid #DDD;

8 // padding: 2px;

9 //}

10 //

11 //.bs-editor .menuicon {

12 // cursor: pointer;

13 // padding: 4px;

14 // min-width: 2rem;

15 // border-radius: 3px;

16 // border: 1px solid transparent;

17 // &:hover {

18 // background-color: #EEE;

19 // border: 1px solid #DDD;

20 // }

21 //}

23 // The below originated from https://github.com/ProseMirror/prosemirror-menu

24 // and is therefore subject to the MIT license found here:

25 // https://github.com/ProseMirror/prosemirror-menu/blob/master/LICENSE

27 .ProseMirror {

28 position: relative;

29 }

31 .ProseMirror {

32 word-wrap: break-word;

33 white-space: pre-wrap;

34 white-space: break-spaces;

35 -webkit-font-variant-ligatures: none;

36 font-variant-ligatures: none;

37 font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */

38 }

40 .ProseMirror pre {

41 white-space: pre-wrap;

42 }

44 .ProseMirror li {

45 position: relative;

46 }

48 .ProseMirror table td, .ProseMirror table th {

49 min-height: 1rem;

50 }

52 .ProseMirror-hideselection *::selection {

53 background: transparent;

54 }

56 .ProseMirror-hideselection *::-moz-selection {

57 background: transparent;

58 }

60 .ProseMirror-hideselection {

61 caret-color: transparent;

62 }

64 .ProseMirror-selectednode {

65 outline: 2px solid #8cf;

66 }

68 /* Make sure li selections wrap around markers */

70 li.ProseMirror-selectednode {

71 outline: none;

72 }

74 li.ProseMirror-selectednode:after {

75 content: "";

76 position: absolute;

77 left: -32px;

78 right: -2px;

79 top: -2px;

80 bottom: -2px;

81 border: 2px solid #8cf;

82 pointer-events: none;

83 }

85 /* Protect against generic img rules */

87 img.ProseMirror-separator {

88 display: inline !important;

89 border: none !important;

90 margin: 0 !important;

91 }

93 .ProseMirror-textblock-dropdown {

94 min-width: 3em;

95 }

97 .ProseMirror-menu {

98 margin: 0 -4px;

99 line-height: 1;

100 }

101

102 .ProseMirror-tooltip .ProseMirror-menu {

103 width: -webkit-fit-content;

104 width: fit-content;

105 white-space: pre;

106 }

107

108 .ProseMirror-menuitem {

109 margin-right: 3px;

110 display: inline-block;

111 }

112

113 .ProseMirror-menuseparator {

114 border-right: 1px solid #ddd;

115 margin-right: 3px;

116 }

117

118 .ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {

119 font-size: 90%;

120 white-space: nowrap;

121 }

122

123 .ProseMirror-menu-dropdown {

124 vertical-align: 1px;

125 cursor: pointer;

126 position: relative;

127 padding-right: 15px;

128 }

129

130 .ProseMirror-menu-dropdown-wrap {

131 padding: 1px 0 1px 4px;

132 display: inline-block;

133 position: relative;

134 }

135

136 .ProseMirror-menu-dropdown:after {

137 content: "";

138 border-left: 4px solid transparent;

139 border-right: 4px solid transparent;

140 border-top: 4px solid currentColor;

141 opacity: .6;

142 position: absolute;

143 right: 4px;

144 top: calc(50% - 2px);

145 }

146

147 .ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {

148 position: absolute;

149 background: white;

150 color: #666;

151 border: 1px solid #aaa;

152 padding: 2px;

153 }

154

155 .ProseMirror-menu-dropdown-menu {

156 z-index: 15;

157 min-width: 6em;

158 }

159

160 .ProseMirror-menu-dropdown-item {

161 cursor: pointer;

162 padding: 2px 8px 2px 4px;

163 }

164

165 .ProseMirror-menu-dropdown-item:hover {

166 background: #f2f2f2;

167 }

168

169 .ProseMirror-menu-submenu-wrap {

170 position: relative;

171 margin-right: 4px;

172 }

173

174 .ProseMirror-menu-submenu-label {

175 padding-inline-end: 12px;

176 padding-inline-start: 4px;

177 }

178

179 .ProseMirror-menu-submenu-label:after {

180 content: "";

181 border-top: 4px solid transparent;

182 border-bottom: 4px solid transparent;

183 border-left: 4px solid currentColor;

184 opacity: .6;

185 position: absolute;

186 right: 4px;

187 top: calc(50% - 4px);

188 }

189

190 .ProseMirror-menu-submenu {

191 display: none;

192 min-width: 10em;

193 left: 100%;

194 top: -3px;

195 }

196

197 .ProseMirror-menu-active {

198 background: #eee;

199 border-radius: 4px;

200 }

201

202 .ProseMirror-menu-disabled {

203 opacity: .3;

204 }

205

206 .ProseMirror-menu-submenu-wrap:hover > .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active > .ProseMirror-menu-submenu {

207 display: block;

208 }

209

210 .ProseMirror-menubar {

211 border-top-left-radius: inherit;

212 border-top-right-radius: inherit;

213 position: relative;

214 min-height: 1em;

215 color: #666;

216 padding: 1px 6px;

217 top: 0;

218 left: 0;

219 right: 0;

220 border-bottom: 1px solid silver;

221 background: white;

222 z-index: 10;

223 -moz-box-sizing: border-box;

224 box-sizing: border-box;

225 overflow: visible;

226 }

227

228 .ProseMirror-icon {

229 display: inline-block;

230 line-height: .8;

231 vertical-align: -2px; /* Compensate for padding */

232 padding: 2px 8px;

233 cursor: pointer;

234 }

235

236 .ProseMirror-menu-disabled.ProseMirror-icon {

237 cursor: default;

238 }

239

240 .ProseMirror-icon svg {

241 fill: currentColor;

242 height: 1em;

243 }

244

245 .ProseMirror-icon span {

246 vertical-align: text-top;

247 }

248

249 .ProseMirror-gapcursor {

250 display: none;

251 pointer-events: none;

252 position: absolute;

253 }

254

255 .ProseMirror-gapcursor:after {

256 content: "";

257 display: block;

258 position: absolute;

259 top: -2px;

260 width: 20px;

261 border-top: 1px solid black;

262 animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;

263 }

264

265 @keyframes ProseMirror-cursor-blink {

266 to {

267 visibility: hidden;

268 }

269 }

270

271 .ProseMirror-focused .ProseMirror-gapcursor {

272 display: block;

273 }

274

275 /* Add space around the hr to make clicking it easier */

276

277 .ProseMirror-example-setup-style hr {

278 border-top: 3px solid #FFF;

279 border-bottom: 3px solid #FFF;

280 box-sizing: content-box;

281 }

282

283 .ProseMirror ul, .ProseMirror ol {

284 padding-left: 30px;

285 }

286

287 .ProseMirror blockquote {

288 padding-left: 1em;

289 border-left: 3px solid #eee;

290 margin-left: 0;

291 margin-right: 0;

292 }

293

294 .ProseMirror-example-setup-style img {

295 cursor: default;

296 }

297

298 .ProseMirror-prompt {

299 background: white;

300 padding: 5px 10px 5px 15px;

301 border: 1px solid silver;

302 position: fixed;

303 border-radius: 3px;

304 z-index: 11;

305 box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);

306 }

307

308 .ProseMirror-prompt h5 {

309 margin: 0;

310 font-weight: normal;

311 font-size: 100%;

312 color: #444;

313 }

314

315 .ProseMirror-prompt input[type="text"],

316 .ProseMirror-prompt textarea {

317 background: #eee;

318 border: none;

319 outline: none;

320 }

321

322 .ProseMirror-prompt input[type="text"] {

323 padding: 0 4px;

324 }

325

326 .ProseMirror-prompt-close {

327 position: absolute;

328 left: 2px;

329 top: 1px;

330 color: #666;

331 border: none;

332 background: transparent;

333 padding: 0;

334 }

335

336 .ProseMirror-prompt-close:after {

337 content: "âœ•";

338 font-size: 12px;

339 }

340

341 .ProseMirror-invalid {

342 background: #ffc;

343 border: 1px solid #cc7;

344 border-radius: 4px;

345 padding: 5px 10px;

346 position: absolute;

347 min-width: 10em;

348 }

349

350 .ProseMirror-prompt-buttons {

351 margin-top: 5px;

352 display: none;

353 }

354

355 #editor, .editor {

356 background: white;

357 color: black;

358 background-clip: padding-box;

359 border-radius: 4px;

360 border: 2px solid rgba(0, 0, 0, 0.2);

361 padding: 5px 0;

362 margin-bottom: 23px;

363 }

364

365 .ProseMirror > p:first-child,

366 .ProseMirror > h1:first-child,

367 .ProseMirror > h2:first-child,

368 .ProseMirror > h3:first-child,

369 .ProseMirror > h4:first-child,

370 .ProseMirror > h5:first-child,

371 .ProseMirror > h6:first-child {

372 margin-top: 10px;

373 }

374

375 .ProseMirror {

376 padding: 4px 8px 4px 14px;

377 line-height: 1.2;

378 outline: none;

379 }

380

381 .ProseMirror > p {

382 margin-bottom: 1em

383 }

384

385 .ProseMirror-menu-color-grid-container {

386 display: grid;

387 grid-template-columns: repeat(8, 1fr);

388 }

389

390 .ProseMirror-menu-color-grid-item {

391 width: 20px;

392 height: 20px;

393 border: 2px solid #FFF;

394 display: block;

395 }

396

397 .ProseMirror-menu-table-creator-grid {

398 display: grid;

399 gap: 2px;

400 }

401

402 .ProseMirror-menu-table-creator-grid-item {

403 width: 14px;

404 height: 14px;

405 border: 2px solid #BBB;

406 display: block;

407 cursor: pointer;

408 }

409

410 .ProseMirror-menu-table-creator-grid-item-active {

411 border: 2px solid #555;

412 background-color: #DDD;

413 }

414

415 .ProseMirror-menu-table-creator-grid-label {

416 padding: $-xs;

417 text-align: center;

418 }

419

420 .ProseMirror-menu-dialog-wrap {

421 position: fixed;

422 top: 0;

423 left: 0;

424 width: 100%;

425 height: 100%;

426 background-color: rgba(0, 0, 0, 0.1);

427 z-index: 50;

428 display: grid;

429 }

430

431 .ProseMirror-menu-dialog-title {

432 padding: $-xs $-s;

433 border-bottom: 1px solid #DDD;

434 font-weight: bold;

435 position: relative;

436 margin-bottom: $-xs;

437 }

438

439 .ProseMirror-menu-dialog-footer {

440 padding: $-xs $-s;

441 border-top: 1px solid #DDD;

442 display: flex;

443 justify-content: end;

444 margin-top: $-xs;

445 }

446

447 .ProseMirror-menu-dialog-title-close {

448 color: #FFF;

449 position: absolute;

450 top: $-xs + 2px;

451 right: $-s;

452 border-radius: 9px;

453 height: 18px;

454 width: 18px;

455 text-align: center;

456 line-height: 0;

457 vertical-align: top;

458 display: flex;

459 justify-content: center;

460 align-items: center;

461 }

462

463 .ProseMirror-menu-dialog {

464 background-color: #FFF;

465 border: 1px solid #DDD;

466 border-radius: 3px;

467 box-shadow: $bs-large;

468 width: fit-content;

469 min-width: 300px;

470 min-height: 100px;

471 margin: auto;

472 }

473

474 .ProseMirror-menu-dialog-button {

475 border: 1px solid #DDD;

476 padding: $-xs $-s;

477 color: #666;

478 min-width: 80px;

479 cursor: pointer;

480

481 &:hover {

482 background-color: #EEE;

483 }

484 }

485

486 .ProseMirror-menu-dialog-button + .ProseMirror-menu-dialog-button {

487 margin-left: $-xs;

488 }

489

490 .ProseMirror-menu-dialog-form-row {

491 display: grid;

492 grid-template-columns: 1fr 2fr;

493 align-items: center;

494 padding: $-xs 0;

495

496 label {

497 padding: 0 $-s;

498 font-size: .9rem;

499 }

500

501 input {

502 margin: 0 $-s;

503 }

504 }

505

506 .ProseMirror-menu-dialog-textarea-wrap {

507 padding: $-xs $-s;

508

509 label {

510 padding: 0 $-s;

511 font-size: .9rem;

512 }

513

514 textarea {

515 width: 100%;

516 font-size: 0.8rem;

517 }

518 }

519

520 .ProseMirror-imagewrap, .ProseMirror-iframewrap {

521 display: inline-block;

522 line-height: 0;

523 font-size: 0;

524 position: relative;

525 }

526

527 .ProseMirror-imagewrap.ProseMirror-selectednode {

528 outline: 0;

529 }

530

531 .ProseMirror img[data-show-handles] {

532 outline: 4px solid #000;

533 }

534

535 .ProseMirror .ProseMirror-iframewrap iframe {

536 pointer-events: none !important;

537 }

538

539 .ProseMirror-dragdummy {

540 position: absolute;

541 z-index: 2;

542 left: 0;

543 top: 0;

544 max-width: none !important;

545 max-height: none !important;

546 }

547

548 .ProseMirror-grabhandle {

549 width: 12px;

550 height: 12px;

551 border: 2px solid #000;

552 z-index: 4;

553 position: absolute;

554 background-color: #FFF;

555 }

556

557 .ProseMirror-grabhandle-left-top {

558 cursor: nw-resize;

559 }

560

561 .ProseMirror-grabhandle-right-top {

562 cursor: ne-resize;

563 }

564

565 .ProseMirror-grabhandle-right-bottom {

566 cursor: se-resize;

567 }

568

569 .ProseMirror-grabhandle-left-bottom {

570 cursor: sw-resize;

571 }

572

573 .ProseMirror .tableWrapper {

574 overflow-x: auto;

575 }

576 .ProseMirror table {

577 border-collapse: collapse;

578 table-layout: fixed;

579 width: 100%;

580 overflow: hidden;

581 }

582 .ProseMirror td, .ProseMirror th {

583 vertical-align: top;

584 box-sizing: border-box;

585 position: relative;

586 }

587 .ProseMirror .column-resize-handle {

588 position: absolute;

589 right: -2px; top: 0; bottom: 0;

590 width: 4px;

591 z-index: 20;

592 background-color: #adf;

593 pointer-events: none;

594 }

595 .ProseMirror.resize-cursor {

596 cursor: ew-resize;

597 cursor: col-resize;

598 }

599 /* Give selected cells a blue overlay */

600 .ProseMirror .selectedCell:after {

601 z-index: 2;

602 position: absolute;

603 content: "";

604 left: 0; right: 0; top: 0; bottom: 0;

605 background: rgba(200, 200, 255, 0.4);

606 pointer-events: none;

607 }