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

1 @use "mixins";

2 @use "vars";

4 .page-editor {

5 display: flex;

6 flex-direction: column;

7 align-items: stretch;

9 .edit-area {

10 flex: 1;

11 flex-direction: column;

12 z-index: 10;

13 border-radius: 0 0 8px 8px;

14 }

16 .mce-tinymce {

17 box-shadow: none;

18 }

20 .mce-top-part::before {

21 box-shadow: none;

22 }

23 }

25 .page-editor-page-area {

26 width: 100%;

27 border-radius: 8px;

28 box-shadow: vars.$bs-card;

29 @include mixins.lightDark(background-color, #FFF, #333)

30 }

32 .page-edit-toolbar {

33 width: 100%;

34 margin: 0 auto;

35 display: grid;

36 grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);

37 align-items: center;

38 }

40 @include mixins.larger-than(vars.$bp-xxl) {

41 .page-editor-wysiwyg2024 .page-edit-toolbar,

42 .page-editor-wysiwyg2024 .page-editor-page-area,

43 .page-editor-wysiwyg .page-edit-toolbar,

44 .page-editor-wysiwyg .page-editor-page-area {

45 max-width: 1140px;

46 }

48 .page-editor-wysiwyg .floating-toolbox,

49 .page-editor-wysiwyg2024 .floating-toolbox {

50 position: absolute;

51 }

52 }

54 @include mixins.smaller-than(vars.$bp-m) {

55 .page-edit-toolbar {

56 display: flex;

57 flex-direction: row;

58 justify-content: space-between;

59 }

60 }

62 .title-input.page-title {

63 font-size: 0.8em;

64 .input {

65 border: 0;

66 margin-bottom: -1px;

67 }

68 input[type="text"] {

69 max-width: 840px;

70 margin: 0 auto;

71 border: none;

72 height: auto;

73 display: block;

74 width: 100%;

75 font-size: 20px;

76 border-radius: 8px;

77 }

78 input[type="text"]:focus {

79 position: relative;

80 outline-offset: -1px;

81 outline: 1px dashed var(--color-primary);

82 box-shadow: vars.$bs-card;

83 z-index: 50;

84 }

85 }

87 .page-editor-markdown .title-input.page-title input[type="text"] {

88 max-width: 100%;

89 }

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

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

93 z-index: 12;

94 }

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

97 .page-editor, .flex-fill {

98 overflow: visible;

99 }

100 }

101

102 @include mixins.smaller-than(vars.$bp-s) {

103 .page-edit-toolbar {

104 overflow-x: scroll;

105 overflow-y: visible;

106 }

107 .page-edit-toolbar {

108 white-space: nowrap;

109 > div {

110 display: inline-block;

111 }

112 }

113 }

114

115 .page-save-mobile-button {

116 position: fixed;

117 z-index: 30;

118 border-radius: 50%;

119 width: 52px;

120 height: 52px;

121 font-size: 26px;

122 inset-inline-end: vars.$xs;

123 bottom: vars.$s;

124 box-shadow: vars.$bs-hover;

125 background-color: currentColor;

126 text-align: center;

127 svg {

128 fill: #FFF;

129 margin-inline-end: 0;

130 }

131 }

132

133 .draft-notification {

134 pointer-events: none;

135 transform: scale(0);

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

137 transform-origin: 50% 50%;

138 &.visible {

139 transform: scale(1);

140 }

141 }

142

143 .page-style.editor {

144 padding: 0 !important;

145 }

146

147 // Page content pointers

148 .pointer-container {

149 position: fixed;

150 display: none;

151 left: 0;

152 z-index: 10;

153 }

154 .pointer {

155 border: 1px solid #CCC;

156 @include mixins.lightDark(border-color, #ccc, #000);

157 border-radius: 4px;

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

159 @include mixins.lightDark(background-color, #fff, #333);

160 width: 275px;

161

162 &.is-page-editable {

163 width: 328px;

164 }

165

166 &:before {

167 position: absolute;

168 left: 50%;

169 bottom: -9px;

170 width: 16px;

171 height: 16px;

172 margin-inline-start: -8px;

173 content: '';

174 display: block;

175 transform: rotate(45deg);

176 transform-origin: 50% 50%;

177 border-right: 1px solid #CCC;

178 border-bottom: 1px solid #CCC;

179 z-index: 56;

180 @include mixins.lightDark(background-color, #fff, #333);

181 @include mixins.lightDark(border-color, #ccc, #000);

182 }

183 input, button, a {

184 position: relative;

185 border-radius: 0;

186 height: 28px;

187 font-size: 12px;

188 vertical-align: top;

189 padding: 5px 16px;

190 }

191 input {

192 background-color: #FFF;

193 border: 1px solid #DDD;

194 @include mixins.lightDark(border-color, #ddd, #000);

195 color: #666;

196 width: 160px;

197 z-index: 40;

198 padding: 5px 10px;

199 }

200 .text-button {

201 @include mixins.lightDark(color, #444, #AAA);

202 }

203 .input-group .button {

204 line-height: 1;

205 margin: 0 0 0 -4px;

206 box-shadow: none;

207 }

208 a.button {

209 margin: 0;

210 }

211 .svg-icon {

212 width: 1.2em;

213 height: 1.2em;

214 }

215 .button {

216 @include mixins.lightDark(border-color, #ddd, #000);

217 }

218 }

219

220 // Page editor sidebar toolbox

221 .floating-toolbox {

222 @include mixins.lightDark(background-color, #FFF, #222);

223 overflow: hidden;

224 align-items: stretch;

225 flex-direction: row;

226 display: flex;

227 max-height: 100%;

228 border-radius: 8px;

229 box-shadow: vars.$bs-card;

230 margin-bottom: auto;

231 margin-inline-start: vars.$l;

232 position: relative;

233 &.open {

234 position: relative;

235 right: 0;

236 max-width: 480px;

237 margin-bottom: 0;

238 }

239 &:not(.open) .toolbox-tab-content {

240 display: none !important;

241 }

242 .toolbox-toggle svg {

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

244 }

245 .toolbox-toggle {

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

247 }

248 &.open .toolbox-toggle {

249 background-color: rgba(255, 0, 0, 0.20);

250 }

251 &.open .toolbox-toggle svg {

252 transform: rotate(180deg);

253 }

254 > div {

255 flex: 1;

256 position: relative;

257 }

258 .tabs {

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

260 @include mixins.lightDark(border-inline-end-color, #DDD, #000);

261 width: 40px;

262 flex: 0 1 auto;

263 margin-inline-end: -1px;

264 }

265 .tabs-inner {

266 @include mixins.lightDark(background-color, #FFFFFF, #222);

267 }

268 .tabs svg {

269 padding: 0;

270 margin: 0;

271 }

272 .tabs-inner > button {

273 @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));

274 display: block;

275 cursor: pointer;

276 padding: 10px vars.$xs;

277 font-size: 18px;

278 line-height: 1.6;

279 }

280 .tabs-inner > button:hover, &.open .tabs-inner > button.active {

281 color: var(--color-link) !important;

282 position: relative;

283 &:after {

284 content: '';

285 display: block;

286 position: absolute;

287 left: 0;

288 width: 100%;

289 top: 0;

290 height: 100%;

291 background-color: currentColor;

292 opacity: .075;

293 }

294 }

295 &.open .tabs-inner > button.active {

296 border-inline-end: 1px solid var(--color-link);

297 margin-inline-end: -1px;

298 }

299 h4 {

300 font-size: 24px;

301 margin: vars.$m 0 0 0;

302 padding: 0 vars.$l vars.$s vars.$l;

303 }

304 .tags input {

305 max-width: 100%;

306 width: 100%;

307 min-width: 50px;

308 }

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

310 padding-inline-end: vars.$s;

311 padding-top: vars.$s;

312 position: relative;

313 }

314 .handle {

315 user-select: none;

316 cursor: move;

317 fill: #999;

318 }

319 form {

320 display: flex;

321 flex: 1;

322 flex-direction: column;

323 overflow-y: scroll;

324 }

325 table td, table th {

326 overflow: visible;

327 }

328 }

329

330 @include mixins.smaller-than(vars.$bp-xxl) {

331 .floating-toolbox {

332 margin-inline-start: vars.$s;

333 }

334 }

335

336 @include mixins.smaller-than(vars.$bp-s) {

337 .page-editor-page-area-wrap {

338 margin: 4px !important;

339 }

340 .floating-toolbox {

341 margin-inline-start: 4px;

342 }

343 .floating-toolbox .tabs {

344 width: 32px;

345 }

346 .floating-toolbox .tabs-inner > button {

347 font-size: 12px;

348 }

349 .page-edit-toolbar {

350 padding-block: 0 !important;

351 }

352 .page-editor.toolbox-open .page-editor-page-area {

353 display: none;

354 }

355 }

356

357 .toolbox-tab-content {

358 display: none;

359 overflow-y: auto;

360 padding-bottom: 45px;

361 }

362

363 .suggestion-box {

364 top: auto;

365 margin: -4px 0 0;

366 right: auto;

367 left: 0;

368 padding: 0;

369 li {

370 display: block;

371 border-bottom: 1px solid #DDD;

372 &:last-child {

373 border-bottom: 0;

374 }

375 }

376 }

377

378 .comments-container h5 {

379 color: #888;

380 font-weight: normal;

381 margin-top: 0.5em;

382 }

383

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

385 min-height: 175px;

386 }

387

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

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

390 .mce-open {

391 display: none;

392 }

393 }

394

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

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

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

398 .chapter-expansion > .icon {

399 font-size: 0.8rem;

400 width: 1.88em;

401 height: 1.88em;

402 flex-shrink: 0;

403 display: flex;

404 align-items: center;

405 justify-content: center;

406 text-align: center;

407 border-radius: 1em;

408 position: relative;

409 overflow: hidden;

410 svg {

411 margin: 0;

412 bottom: 0;

413 }

414 &:after {

415 content: '';

416 position: absolute;

417 background-color: currentColor;

418 opacity: 0.2;

419 left: 0;

420 top: 0;

421 width: 100%;

422 height: 100%;

423 }

424 }

425

426 .entity-chip {

427 display: inline-block;

428 align-items: center;

429 justify-content: center;

430 text-align: center;

431 font-size: 0.9em;

432 border-radius: 3px;

433 position: relative;

434 overflow: hidden;

435 padding: vars.$xs vars.$s;

436 fill: currentColor;

437 opacity: 0.85;

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

439 &:after {

440 content: '';

441 position: absolute;

442 background-color: currentColor;

443 opacity: 0.15;

444 left: 0;

445 top: 0;

446 width: 100%;

447 height: 100%;

448 }

449 &:hover {

450 text-decoration: none;

451 opacity: 1;

452 }

453 @media (prefers-contrast: more) {

454 opacity: 1;

455 }

456 }