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: relative;

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 position: absolute;

200 top: -60px;

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

202 width: 275px;

203 z-index: 55;

204

205 &.is-page-editable {

206 width: 328px;

207 }

208

209 &:before {

210 position: absolute;

211 left: 50%;

212 bottom: -9px;

213 width: 16px;

214 height: 16px;

215 margin-inline-start: -8px;

216 content: '';

217 display: block;

218 transform: rotate(45deg);

219 transform-origin: 50% 50%;

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

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

222 z-index: 56;

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

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

225 }

226 input, button, a {

227 position: relative;

228 border-radius: 0;

229 height: 28px;

230 font-size: 12px;

231 vertical-align: top;

232 padding: 5px 16px;

233 }

234 input {

235 background-color: #FFF;

236 border: 1px solid #DDD;

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

238 color: #666;

239 width: 172px;

240 z-index: 40;

241 padding: 5px 10px;

242 }

243 span.icon {

244 fill: #444;

245 cursor: pointer;

246 user-select: none;

247 display: inline-block;

248 line-height: 1;

249 }

250 .input-group .button {

251 line-height: 1;

252 margin: 0 0 0 -4px;

253 box-shadow: none;

254 }

255 a.button {

256 margin: 0;

257 }

258 .svg-icon {

259 width: 1.2em;

260 height: 1.2em;

261 }

262 .button {

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

264 }

265 }

266

267 // Attribute form

268 .floating-toolbox {

269 border: 1px solid #DDD;

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

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

272 right: $-xl*2;

273 width: 48px;

274 overflow: hidden;

275 align-items: stretch;

276 flex-direction: row;

277 display: flex;

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

279 margin-top: -1px;

280 min-height: 0;

281 &.open {

282 width: 480px;

283 }

284 [toolbox-toggle] svg {

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

286 }

287 [toolbox-toggle] {

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

289 }

290 &.open [toolbox-toggle] {

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

292 }

293 &.open [toolbox-toggle] svg {

294 transform: rotate(180deg);

295 }

296 > div {

297 flex: 1;

298 position: relative;

299 }

300 .tabs {

301 display: block;

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

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

304 width: 48px;

305 flex: 0 1 auto;

306 }

307 .tabs svg {

308 padding: 0;

309 margin: 0;

310 }

311 .tabs > button {

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

313 display: block;

314 cursor: pointer;

315 padding: $-s $-m;

316 font-size: 16px;

317 line-height: 1.6;

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

319 }

320 &.open .tabs > button.active {

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

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

323 }

324 div[toolbox-tab-content] {

325 padding-bottom: 45px;

326 display: flex;

327 flex: 1;

328 flex-direction: column;

329 min-height: 0;

330 overflow-y: scroll;

331 }

332 h4 {

333 font-size: 24px;

334 margin: $-m 0 0 0;

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

336 }

337 .tags input {

338 max-width: 100%;

339 width: 100%;

340 min-width: 50px;

341 }

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

343 padding-inline-end: $-s;

344 padding-top: $-s;

345 position: relative;

346 }

347 .handle {

348 user-select: none;

349 cursor: move;

350 fill: #999;

351 }

352 form {

353 display: flex;

354 flex: 1;

355 flex-direction: column;

356 overflow-y: scroll;

357 }

358 table td, table th {

359 overflow: visible;

360 }

361 }

362

363 [toolbox-tab-content] {

364 display: none;

365 }

366

367 .suggestion-box {

368 top: auto;

369 margin: -4px 0 0;

370 right: auto;

371 left: 0;

372 padding: 0;

373 li {

374 display: block;

375 border-bottom: 1px solid #DDD;

376 &:last-child {

377 border-bottom: 0;

378 }

379 }

380 }

381

382 .comments-container h5 {

383 color: #888;

384 font-weight: normal;

385 margin-top: 0.5em;

386 }

387

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

389 min-height: 175px;

390 }

391

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

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

394 .mce-open {

395 display: none;

396 }

397 }

398

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

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

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

402 .chapter-expansion > .icon {

403 font-size: 0.8rem;

404 width: 1.88em;

405 height: 1.88em;

406 flex-shrink: 0;

407 display: flex;

408 align-items: center;

409 justify-content: center;

410 text-align: center;

411 border-radius: 1em;

412 position: relative;

413 overflow: hidden;

414 svg {

415 margin: 0;

416 bottom: 0;

417 }

418 &:after {

419 content: '';

420 position: absolute;

421 background-color: currentColor;

422 opacity: 0.2;

423 left: 0;

424 top: 0;

425 width: 100%;

426 height: 100%;

427 }

428 }

429

430 .entity-chip {

431 display: inline-block;

432 align-items: center;

433 justify-content: center;

434 text-align: center;

435 font-size: 0.9em;

436 border-radius: 3px;

437 position: relative;

438 overflow: hidden;

439 padding: $-xs $-s;

440 fill: currentColor;

441 opacity: 0.85;

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

443 &:after {

444 content: '';

445 position: absolute;

446 background-color: currentColor;

447 opacity: 0.15;

448 left: 0;

449 top: 0;

450 width: 100%;

451 height: 100%;

452 }

453 &:hover {

454 text-decoration: none;

455 opacity: 1;

456 }

457 @media (prefers-contrast: more) {

458 opacity: 1;

459 }

460 }