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

1 .page-editor {

2 display: flex;

3 flex-direction: column;

4 align-items: stretch;

6 .edit-area {

7 flex: 1;

8 flex-direction: column;

9 z-index: 10;

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

11 }

13 .mce-tinymce {

14 box-shadow: none;

15 }

17 .mce-top-part::before {

18 box-shadow: none;

19 }

20 }

22 .page-editor-page-area {

23 width: 100%;

24 border-radius: 8px;

25 box-shadow: $bs-card;

26 @include lightDark(background-color, #FFF, #333)

27 }

29 .page-edit-toolbar {

30 width: 100%;

31 margin: 0 auto;

32 display: grid;

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

34 align-items: center;

35 }

37 @include larger-than($xxl) {

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

39 .page-editor-wysiwyg2024 .page-editor-page-area,

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

41 .page-editor-wysiwyg .page-editor-page-area {

42 max-width: 1140px;

43 }

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

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

47 position: absolute;

48 }

49 }

51 @include smaller-than($m) {

52 .page-edit-toolbar {

53 display: flex;

54 flex-direction: row;

55 justify-content: space-between;

56 }

57 }

59 .title-input.page-title {

60 font-size: 0.8em;

61 .input {

62 border: 0;

63 margin-bottom: -1px;

64 }

65 input[type="text"] {

66 max-width: 840px;

67 margin: 0 auto;

68 border: none;

69 height: auto;

70 display: block;

71 width: 100%;

72 font-size: 20px;

73 border-radius: 8px;

74 }

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

76 position: relative;

77 outline-offset: -1px;

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

79 box-shadow: $bs-card;

80 z-index: 50;

81 }

82 }

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

85 max-width: 100%;

86 }

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

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

90 z-index: 12;

91 }

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

94 .page-editor, .flex-fill {

95 overflow: visible;

96 }

97 }

99 @include smaller-than($s) {

100 .page-edit-toolbar {

101 overflow-x: scroll;

102 overflow-y: visible;

103 }

104 .page-edit-toolbar {

105 white-space: nowrap;

106 > div {

107 display: inline-block;

108 }

109 }

110 }

111

112 .page-save-mobile-button {

113 position: fixed;

114 z-index: 30;

115 border-radius: 50%;

116 width: 52px;

117 height: 52px;

118 font-size: 26px;

119 inset-inline-end: $-xs;

120 bottom: $-s;

121 box-shadow: $bs-hover;

122 background-color: currentColor;

123 text-align: center;

124 svg {

125 fill: #FFF;

126 margin-inline-end: 0;

127 }

128 }

129

130 .draft-notification {

131 pointer-events: none;

132 transform: scale(0);

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

134 transform-origin: 50% 50%;

135 &.visible {

136 transform: scale(1);

137 }

138 }

139

140 .page-style.editor {

141 padding: 0 !important;

142 }

143

144 // Page content pointers

145 .pointer-container {

146 position: fixed;

147 display: none;

148 left: 0;

149 z-index: 10;

150 }

151 .pointer {

152 border: 1px solid #CCC;

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

154 border-radius: 4px;

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

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

157 width: 275px;

158

159 &.is-page-editable {

160 width: 328px;

161 }

162

163 &:before {

164 position: absolute;

165 left: 50%;

166 bottom: -9px;

167 width: 16px;

168 height: 16px;

169 margin-inline-start: -8px;

170 content: '';

171 display: block;

172 transform: rotate(45deg);

173 transform-origin: 50% 50%;

174 border-right: 1px solid #CCC;

175 border-bottom: 1px solid #CCC;

176 z-index: 56;

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

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

179 }

180 input, button, a {

181 position: relative;

182 border-radius: 0;

183 height: 28px;

184 font-size: 12px;

185 vertical-align: top;

186 padding: 5px 16px;

187 }

188 input {

189 background-color: #FFF;

190 border: 1px solid #DDD;

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

192 color: #666;

193 width: 160px;

194 z-index: 40;

195 padding: 5px 10px;

196 }

197 .text-button {

198 @include lightDark(color, #444, #AAA);

199 }

200 .input-group .button {

201 line-height: 1;

202 margin: 0 0 0 -4px;

203 box-shadow: none;

204 }

205 a.button {

206 margin: 0;

207 }

208 .svg-icon {

209 width: 1.2em;

210 height: 1.2em;

211 }

212 .button {

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

214 }

215 }

216

217 // Page editor sidebar toolbox

218 .floating-toolbox {

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

220 overflow: hidden;

221 align-items: stretch;

222 flex-direction: row;

223 display: flex;

224 max-height: 100%;

225 border-radius: 8px;

226 box-shadow: $bs-card;

227 margin-bottom: auto;

228 margin-inline-start: $-l;

229 position: relative;

230 &.open {

231 position: relative;

232 right: 0;

233 max-width: 480px;

234 margin-bottom: 0;

235 }

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

237 display: none !important;

238 }

239 .toolbox-toggle svg {

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

241 }

242 .toolbox-toggle {

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

244 }

245 &.open .toolbox-toggle {

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

247 }

248 &.open .toolbox-toggle svg {

249 transform: rotate(180deg);

250 }

251 > div {

252 flex: 1;

253 position: relative;

254 }

255 .tabs {

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

257 @include lightDark(border-inline-end-color, #DDD, #000);

258 width: 40px;

259 flex: 0 1 auto;

260 margin-inline-end: -1px;

261 }

262 .tabs-inner {

263 @include lightDark(background-color, #FFFFFF, #222);

264 }

265 .tabs svg {

266 padding: 0;

267 margin: 0;

268 }

269 .tabs-inner > button {

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

271 display: block;

272 cursor: pointer;

273 padding: 10px $-xs;

274 font-size: 18px;

275 line-height: 1.6;

276 }

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

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

279 position: relative;

280 &:after {

281 content: '';

282 display: block;

283 position: absolute;

284 left: 0;

285 width: 100%;

286 top: 0;

287 height: 100%;

288 background-color: currentColor;

289 opacity: .075;

290 }

291 }

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

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

294 margin-inline-end: -1px;

295 }

296 h4 {

297 font-size: 24px;

298 margin: $-m 0 0 0;

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

300 }

301 .tags input {

302 max-width: 100%;

303 width: 100%;

304 min-width: 50px;

305 }

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

307 padding-inline-end: $-s;

308 padding-top: $-s;

309 position: relative;

310 }

311 .handle {

312 user-select: none;

313 cursor: move;

314 fill: #999;

315 }

316 form {

317 display: flex;

318 flex: 1;

319 flex-direction: column;

320 overflow-y: scroll;

321 }

322 table td, table th {

323 overflow: visible;

324 }

325 }

326

327 @include smaller-than($xxl) {

328 .floating-toolbox {

329 margin-inline-start: $-s;

330 }

331 }

332

333 @include smaller-than($s) {

334 .page-editor-page-area-wrap {

335 margin: 4px !important;

336 }

337 .floating-toolbox {

338 margin-inline-start: 4px;

339 }

340 .floating-toolbox .tabs {

341 width: 32px;

342 }

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

344 font-size: 12px;

345 }

346 .page-edit-toolbar {

347 padding-block: 0 !important;

348 }

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

350 display: none;

351 }

352 }

353

354 .toolbox-tab-content {

355 display: none;

356 overflow-y: auto;

357 padding-bottom: 45px;

358 }

359

360 .suggestion-box {

361 top: auto;

362 margin: -4px 0 0;

363 right: auto;

364 left: 0;

365 padding: 0;

366 li {

367 display: block;

368 border-bottom: 1px solid #DDD;

369 &:last-child {

370 border-bottom: 0;

371 }

372 }

373 }

374

375 .comments-container h5 {

376 color: #888;

377 font-weight: normal;

378 margin-top: 0.5em;

379 }

380

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

382 min-height: 175px;

383 }

384

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

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

387 .mce-open {

388 display: none;

389 }

390 }

391

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

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

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

395 .chapter-expansion > .icon {

396 font-size: 0.8rem;

397 width: 1.88em;

398 height: 1.88em;

399 flex-shrink: 0;

400 display: flex;

401 align-items: center;

402 justify-content: center;

403 text-align: center;

404 border-radius: 1em;

405 position: relative;

406 overflow: hidden;

407 svg {

408 margin: 0;

409 bottom: 0;

410 }

411 &:after {

412 content: '';

413 position: absolute;

414 background-color: currentColor;

415 opacity: 0.2;

416 left: 0;

417 top: 0;

418 width: 100%;

419 height: 100%;

420 }

421 }

422

423 .entity-chip {

424 display: inline-block;

425 align-items: center;

426 justify-content: center;

427 text-align: center;

428 font-size: 0.9em;

429 border-radius: 3px;

430 position: relative;

431 overflow: hidden;

432 padding: $-xs $-s;

433 fill: currentColor;

434 opacity: 0.85;

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

436 &:after {

437 content: '';

438 position: absolute;

439 background-color: currentColor;

440 opacity: 0.15;

441 left: 0;

442 top: 0;

443 width: 100%;

444 height: 100%;

445 }

446 &:hover {

447 text-decoration: none;

448 opacity: 1;

449 }

450 @media (prefers-contrast: more) {

451 opacity: 1;

452 }

453 }