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

183 // Page content pointers

184 .pointer-container {

185 position: fixed;

186 display: none;

187 left: 0;

188 z-index: 10;

189 }

190 .pointer {

191 border: 1px solid #CCC;

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

193 display: flex;

194 align-items: center;

195 justify-items: center;

196 padding: $-s $-s;

197 border-radius: 4px;

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

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

200 width: 275px;

201

202 &.is-page-editable {

203 width: 328px;

204 }

205

206 &:before {

207 position: absolute;

208 left: 50%;

209 bottom: -9px;

210 width: 16px;

211 height: 16px;

212 margin-inline-start: -8px;

213 content: '';

214 display: block;

215 transform: rotate(45deg);

216 transform-origin: 50% 50%;

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

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

219 z-index: 56;

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

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

222 }

223 input, button, a {

224 position: relative;

225 border-radius: 0;

226 height: 28px;

227 font-size: 12px;

228 vertical-align: top;

229 padding: 5px 16px;

230 }

231 input {

232 background-color: #FFF;

233 border: 1px solid #DDD;

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

235 color: #666;

236 width: 172px;

237 z-index: 40;

238 padding: 5px 10px;

239 }

240 span.icon {

241 fill: #444;

242 cursor: pointer;

243 user-select: none;

244 display: inline-block;

245 line-height: 1;

246 }

247 .input-group .button {

248 line-height: 1;

249 margin: 0 0 0 -4px;

250 box-shadow: none;

251 }

252 a.button {

253 margin: 0;

254 }

255 .svg-icon {

256 width: 1.2em;

257 height: 1.2em;

258 }

259 .button {

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

261 }

262 }

263

264 // Attribute form

265 .floating-toolbox {

266 border: 1px solid #DDD;

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

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

269 right: $-xl*2;

270 width: 48px;

271 overflow: hidden;

272 align-items: stretch;

273 flex-direction: row;

274 display: flex;

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

276 margin-top: -1px;

277 min-height: 0;

278 &.open {

279 width: 480px;

280 }

281 .toolbox-toggle svg {

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

283 }

284 .toolbox-toggle {

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

286 }

287 &.open .toolbox-toggle {

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

289 }

290 &.open .toolbox-toggle svg {

291 transform: rotate(180deg);

292 }

293 > div {

294 flex: 1;

295 position: relative;

296 }

297 .tabs {

298 display: block;

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

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

301 width: 48px;

302 flex: 0 1 auto;

303 }

304 .tabs svg {

305 padding: 0;

306 margin: 0;

307 }

308 .tabs > button {

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

310 display: block;

311 cursor: pointer;

312 padding: $-s $-m;

313 font-size: 16px;

314 line-height: 1.6;

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

316 }

317 &.open .tabs > button.active {

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

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

320 }

321 h4 {

322 font-size: 24px;

323 margin: $-m 0 0 0;

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

325 }

326 .tags input {

327 max-width: 100%;

328 width: 100%;

329 min-width: 50px;

330 }

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

332 padding-inline-end: $-s;

333 padding-top: $-s;

334 position: relative;

335 }

336 .handle {

337 user-select: none;

338 cursor: move;

339 fill: #999;

340 }

341 form {

342 display: flex;

343 flex: 1;

344 flex-direction: column;

345 overflow-y: scroll;

346 }

347 table td, table th {

348 overflow: visible;

349 }

350 }

351

352 .toolbox-tab-content {

353 display: none;

354 overflow-y: auto;

355 padding-bottom: 45px;

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,

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

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

393 .chapter-expansion > .icon {

394 font-size: 0.8rem;

395 width: 1.88em;

396 height: 1.88em;

397 flex-shrink: 0;

398 display: flex;

399 align-items: center;

400 justify-content: center;

401 text-align: center;

402 border-radius: 1em;

403 position: relative;

404 overflow: hidden;

405 svg {

406 margin: 0;

407 bottom: 0;

408 }

409 &:after {

410 content: '';

411 position: absolute;

412 background-color: currentColor;

413 opacity: 0.2;

414 left: 0;

415 top: 0;

416 width: 100%;

417 height: 100%;

418 }

419 }

420

421 .entity-chip {

422 display: inline-block;

423 align-items: center;

424 justify-content: center;

425 text-align: center;

426 font-size: 0.9em;

427 border-radius: 3px;

428 position: relative;

429 overflow: hidden;

430 padding: $-xs $-s;

431 fill: currentColor;

432 opacity: 0.85;

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

434 &:after {

435 content: '';

436 position: absolute;

437 background-color: currentColor;

438 opacity: 0.15;

439 left: 0;

440 top: 0;

441 width: 100%;

442 height: 100%;

443 }

444 &:hover {

445 text-decoration: none;

446 opacity: 1;

447 }

448 @media (prefers-contrast: more) {

449 opacity: 1;

450 }

451 }