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 &.page-revision {

168 pre code {

169 white-space: pre-wrap;

170 }

171 }

172 }

173

174 // Page content pointers

175 .pointer-container {

176 position: relative;

177 display: none;

178 left: 0;

179 z-index: 10;

180 }

181 .pointer {

182 border: 1px solid #CCC;

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

184 display: flex;

185 align-items: center;

186 justify-items: center;

187 padding: $-s $-s;

188 border-radius: 4px;

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

190 position: absolute;

191 top: -60px;

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

193 width: 275px;

194 z-index: 55;

195

196 &.is-page-editable {

197 width: 328px;

198 }

199

200 &:before {

201 position: absolute;

202 left: 50%;

203 bottom: -9px;

204 width: 16px;

205 height: 16px;

206 margin-inline-start: -8px;

207 content: '';

208 display: block;

209 transform: rotate(45deg);

210 transform-origin: 50% 50%;

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

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

213 z-index: 56;

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

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

216 }

217 input, button, a {

218 position: relative;

219 border-radius: 0;

220 height: 28px;

221 font-size: 12px;

222 vertical-align: top;

223 padding: 5px 16px;

224 }

225 input {

226 background-color: #FFF;

227 border: 1px solid #DDD;

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

229 color: #666;

230 width: 172px;

231 z-index: 40;

232 padding: 5px 10px;

233 }

234 span.icon {

235 fill: #444;

236 cursor: pointer;

237 user-select: none;

238 display: inline-block;

239 line-height: 1;

240 }

241 .input-group .button {

242 line-height: 1;

243 margin: 0 0 0 -4px;

244 box-shadow: none;

245 }

246 a.button {

247 margin: 0;

248 }

249 .svg-icon {

250 width: 1.2em;

251 height: 1.2em;

252 }

253 .button {

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

255 }

256 }

257

258 // Attribute form

259 .floating-toolbox {

260 border: 1px solid #DDD;

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

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

263 right: $-xl*2;

264 width: 48px;

265 overflow: hidden;

266 align-items: stretch;

267 flex-direction: row;

268 display: flex;

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

270 margin-top: -1px;

271 min-height: 0;

272 &.open {

273 width: 480px;

274 }

275 [toolbox-toggle] svg {

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

277 }

278 [toolbox-toggle] {

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

280 }

281 &.open [toolbox-toggle] {

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

283 }

284 &.open [toolbox-toggle] svg {

285 transform: rotate(180deg);

286 }

287 > div {

288 flex: 1;

289 position: relative;

290 }

291 .tabs {

292 display: block;

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

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

295 width: 48px;

296 flex: 0 1 auto;

297 }

298 .tabs svg {

299 padding: 0;

300 margin: 0;

301 }

302 .tabs > button {

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

304 display: block;

305 cursor: pointer;

306 padding: $-s $-m;

307 font-size: 16px;

308 line-height: 1.6;

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

310 }

311 &.open .tabs > button.active {

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

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

314 }

315 div[toolbox-tab-content] {

316 padding-bottom: 45px;

317 display: flex;

318 flex: 1;

319 flex-direction: column;

320 min-height: 0;

321 overflow-y: scroll;

322 }

323 h4 {

324 font-size: 24px;

325 margin: $-m 0 0 0;

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

327 }

328 .tags input {

329 max-width: 100%;

330 width: 100%;

331 min-width: 50px;

332 }

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

334 padding-inline-end: $-s;

335 padding-top: $-s;

336 position: relative;

337 }

338 .handle {

339 user-select: none;

340 cursor: move;

341 fill: #999;

342 }

343 form {

344 display: flex;

345 flex: 1;

346 flex-direction: column;

347 overflow-y: scroll;

348 }

349 table td, table th {

350 overflow: visible;

351 }

352 }

353

354 [toolbox-tab-content] {

355 display: none;

356 }

357

358 .suggestion-box {

359 top: auto;

360 margin: -4px 0 0;

361 right: auto;

362 left: 0;

363 padding: 0;

364 li {

365 display: block;

366 border-bottom: 1px solid #DDD;

367 &:last-child {

368 border-bottom: 0;

369 }

370 }

371 }

372

373 .comments-container h5 {

374 color: #888;

375 font-weight: normal;

376 margin-top: 0.5em;

377 }

378

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

380 min-height: 175px;

381 }

382

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

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

385 .mce-open {

386 display: none;

387 }

388 }

389

390 .entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {

391 font-size: 0.8rem;

392 width: 1.88em;

393 height: 1.88em;

394 display: flex;

395 align-items: center;

396 justify-content: center;

397 text-align: center;

398 border-radius: 1em;

399 position: relative;

400 overflow: hidden;

401 svg {

402 margin: 0;

403 bottom: 0;

404 }

405 &:after {

406 content: '';

407 position: absolute;

408 background-color: currentColor;

409 opacity: 0.2;

410 left: 0;

411 top: 0;

412 width: 100%;

413 height: 100%;

414 }

415 }

416

417 .entity-chip {

418 display: inline-block;

419 align-items: center;

420 justify-content: center;

421 text-align: center;

422 font-size: 0.9em;

423 border-radius: 3px;

424 position: relative;

425 overflow: hidden;

426 padding: $-xs $-s;

427 fill: currentColor;

428 opacity: 0.85;

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

430 &:after {

431 content: '';

432 position: absolute;

433 background-color: currentColor;

434 opacity: 0.15;

435 left: 0;

436 top: 0;

437 width: 100%;

438 height: 100%;

439 }

440 &:hover {

441 text-decoration: none;

442 opacity: 1;

443 }

444 @media (prefers-contrast: more) {

445 opacity: 1;

446 }

447 }