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

1 .page-editor {

2 display: flex;

3 flex-direction: column;

4 align-items: stretch;

5 overflow: hidden;

7 .edit-area {

8 flex: 1;

9 flex-direction: column;

10 z-index: 10;

11 }

13 .mce-tinymce {

14 box-shadow: none;

15 }

17 .mce-top-part::before {

18 box-shadow: none;

19 }

20 }

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

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

24 z-index: 12;

25 }

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

28 .page-editor, .flex-fill {

29 overflow: visible;

30 }

31 }

33 @include smaller-than($s) {

34 .page-edit-toolbar {

35 overflow-x: scroll;

36 overflow-y: visible;

37 }

38 .page-edit-toolbar .grid.third {

39 display: block;

40 white-space: nowrap;

41 > div {

42 display: inline-block;

43 }

44 }

45 }

47 .page-save-mobile-button {

48 position: fixed;

49 z-index: 30;

50 border-radius: 50%;

51 width: 56px;

52 height: 56px;

53 font-size: 24px;

54 right: $-m;

55 bottom: $-s;

56 box-shadow: $bs-hover;

57 background-color: currentColor;

58 text-align: center;

59 svg {

60 fill: #FFF;

61 margin-inline-end: 0;

62 }

63 }

65 .draft-notification {

66 pointer-events: none;

67 transform: scale(0);

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

69 transform-origin: 50% 50%;

70 &.visible {

71 transform: scale(1);

72 }

73 }

75 .page-style.editor {

76 padding: 0 !important;

77 }

79 .page-content {

80 width: 100%;

81 max-width: 840px;

82 margin: 0 auto;

83 overflow-wrap: break-word;

84 .align-left {

85 text-align: left;

86 }

87 img.align-left, table.align-left {

88 float: left !important;

89 margin: $-xs $-m $-m 0;

90 }

91 .align-right {

92 text-align: right !important;

93 }

94 img.align-right, table.align-right {

95 float: right !important;

96 margin: $-xs 0 $-xs $-s;

97 }

98 .align-center {

99 text-align: center;

100 }

101 img.align-center {

102 display: block;

103 }

104 img.align-center, table.align-center {

105 margin-left: auto;

106 margin-right: auto;

107 }

108 img {

109 max-width: 100%;

110 height:auto;

111 }

112 h1, h2, h3, h4, h5, h6, pre {

113 clear: left;

114 }

115 hr {

116 clear: both;

117 margin: $-m 0;

118 }

119 table {

120 hyphens: auto;

121 table-layout: fixed;

122 max-width: 100%;

123 height: auto !important;

124 }

125

126 // diffs

127 ins,

128 del {

129 text-decoration: none;

130 }

131 ins {

132 background: #dbffdb;

133 }

134 del {

135 background: #FFECEC;

136 }

137

138 details {

139 border: 1px solid;

140 @include lightDark(border-color, #DDD, #555);

141 margin-bottom: 1em;

142 padding: $-s;

143 }

144 details > summary {

145 margin-top: -$-s;

146 margin-left: -$-s;

147 margin-right: -$-s;

148 margin-bottom: -$-s;

149 font-weight: bold;

150 @include lightDark(background-color, #EEE, #333);

151 padding: $-xs $-s;

152 }

153 details[open] > summary {

154 margin-bottom: $-s;

155 border-bottom: 1px solid;

156 @include lightDark(border-color, #DDD, #555);

157 }

158 details > summary + * {

159 margin-top: .2em;

160 }

161 details:after {

162 content: '';

163 display: block;

164 clear: both;

165 }

166

167 li > input[type="checkbox"] {

168 vertical-align: top;

169 margin-top: 0.3em;

170 }

171

172 p:empty {

173 min-height: 1.6em;

174 }

175

176 &.page-revision {

177 pre code {

178 white-space: pre-wrap;

179 }

180 }

181

182 .cm-editor {

183 margin-bottom: 1.375em;

184 }

185 }

186

187 // Page content pointers

188 .pointer-container {

189 position: fixed;

190 display: none;

191 left: 0;

192 z-index: 10;

193 }

194 .pointer {

195 border: 1px solid #CCC;

196 @include lightDark(border-color, #ccc, #000);

197 display: flex;

198 align-items: center;

199 justify-items: center;

200 padding: $-s $-s;

201 border-radius: 4px;

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

203 @include lightDark(background-color, #fff, #333);

204 width: 275px;

205

206 &.is-page-editable {

207 width: 328px;

208 }

209

210 &:before {

211 position: absolute;

212 left: 50%;

213 bottom: -9px;

214 width: 16px;

215 height: 16px;

216 margin-inline-start: -8px;

217 content: '';

218 display: block;

219 transform: rotate(45deg);

220 transform-origin: 50% 50%;

221 border-block-end: 1px solid #CCC;

222 border-inline-end: 1px solid #CCC;

223 z-index: 56;

224 @include lightDark(background-color, #fff, #333);

225 @include lightDark(border-color, #ccc, #000);

226 }

227 input, button, a {

228 position: relative;

229 border-radius: 0;

230 height: 28px;

231 font-size: 12px;

232 vertical-align: top;

233 padding: 5px 16px;

234 }

235 input {

236 background-color: #FFF;

237 border: 1px solid #DDD;

238 @include lightDark(border-color, #ddd, #000);

239 color: #666;

240 width: 172px;

241 z-index: 40;

242 padding: 5px 10px;

243 }

244 span.icon {

245 fill: #444;

246 cursor: pointer;

247 user-select: none;

248 display: inline-block;

249 line-height: 1;

250 }

251 .input-group .button {

252 line-height: 1;

253 margin: 0 0 0 -4px;

254 box-shadow: none;

255 }

256 a.button {

257 margin: 0;

258 }

259 .svg-icon {

260 width: 1.2em;

261 height: 1.2em;

262 }

263 .button {

264 @include lightDark(border-color, #ddd, #000);

265 }

266 }

267

268 // Attribute form

269 .floating-toolbox {

270 border: 1px solid #DDD;

271 @include lightDark(background-color, #fff, #222);

272 @include lightDark(border-color, #DDD, #000);

273 right: $-xl*2;

274 width: 48px;

275 overflow: hidden;

276 align-items: stretch;

277 flex-direction: row;

278 display: flex;

279 transition: width ease-in-out 180ms;

280 margin-top: -1px;

281 min-height: 0;

282 &.open {

283 width: 480px;

284 }

285 .toolbox-toggle svg {

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

287 }

288 .toolbox-toggle {

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

290 }

291 &.open .toolbox-toggle {

292 background-color: rgba(255, 0, 0, 0.29);

293 }

294 &.open .toolbox-toggle svg {

295 transform: rotate(180deg);

296 }

297 > div {

298 flex: 1;

299 position: relative;

300 }

301 .tabs {

302 display: block;

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

304 @include lightDark(border-color, #ddd, #000);

305 width: 48px;

306 flex: 0 1 auto;

307 }

308 .tabs svg {

309 padding: 0;

310 margin: 0;

311 }

312 .tabs > button {

313 @include lightDark(color, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));

314 display: block;

315 cursor: pointer;

316 padding: $-s $-m;

317 font-size: 16px;

318 line-height: 1.6;

319 border-bottom: 1px solid rgba(255, 255, 255, 0.3);

320 }

321 &.open .tabs > button.active {

322 @include lightDark(color, #444, #EEE);

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

324 }

325 h4 {

326 font-size: 24px;

327 margin: $-m 0 0 0;

328 padding: 0 $-l $-s $-l;

329 }

330 .tags input {

331 max-width: 100%;

332 width: 100%;

333 min-width: 50px;

334 }

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

336 padding-inline-end: $-s;

337 padding-top: $-s;

338 position: relative;

339 }

340 .handle {

341 user-select: none;

342 cursor: move;

343 fill: #999;

344 }

345 form {

346 display: flex;

347 flex: 1;

348 flex-direction: column;

349 overflow-y: scroll;

350 }

351 table td, table th {

352 overflow: visible;

353 }

354 }

355

356 .toolbox-tab-content {

357 display: none;

358 overflow-y: auto;

359 padding-bottom: 45px;

360 }

361

362 .suggestion-box {

363 top: auto;

364 margin: -4px 0 0;

365 right: auto;

366 left: 0;

367 padding: 0;

368 li {

369 display: block;

370 border-bottom: 1px solid #DDD;

371 &:last-child {

372 border-bottom: 0;

373 }

374 }

375 }

376

377 .comments-container h5 {

378 color: #888;

379 font-weight: normal;

380 margin-top: 0.5em;

381 }

382

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

384 min-height: 175px;

385 }

386

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

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

389 .mce-open {

390 display: none;

391 }

392 }

393

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

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

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

397 .chapter-expansion > .icon {

398 font-size: 0.8rem;

399 width: 1.88em;

400 height: 1.88em;

401 flex-shrink: 0;

402 display: flex;

403 align-items: center;

404 justify-content: center;

405 text-align: center;

406 border-radius: 1em;

407 position: relative;

408 overflow: hidden;

409 svg {

410 margin: 0;

411 bottom: 0;

412 }

413 &:after {

414 content: '';

415 position: absolute;

416 background-color: currentColor;

417 opacity: 0.2;

418 left: 0;

419 top: 0;

420 width: 100%;

421 height: 100%;

422 }

423 }

424

425 .entity-chip {

426 display: inline-block;

427 align-items: center;

428 justify-content: center;

429 text-align: center;

430 font-size: 0.9em;

431 border-radius: 3px;

432 position: relative;

433 overflow: hidden;

434 padding: $-xs $-s;

435 fill: currentColor;

436 opacity: 0.85;

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

438 &:after {

439 content: '';

440 position: absolute;

441 background-color: currentColor;

442 opacity: 0.15;

443 left: 0;

444 top: 0;

445 width: 100%;

446 height: 100%;

447 }

448 &:hover {

449 text-decoration: none;

450 opacity: 1;

451 }

452 @media (prefers-contrast: more) {

453 opacity: 1;

454 }

455 }