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 overflow: hidden;

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

13 }

15 .mce-tinymce {

16 box-shadow: none;

17 }

19 .mce-top-part::before {

20 box-shadow: none;

21 }

22 }

24 .page-editor-page-area {

25 width: 100%;

26 border-radius: 8px;

27 box-shadow: $bs-card;

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

29 }

31 .page-edit-toolbar {

32 width: 100%;

33 margin: 0 auto;

34 display: grid;

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

36 align-items: center;

37 }

39 @include larger-than($xxl) {

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

47 }

48 }

50 @include smaller-than($m) {

51 .page-edit-toolbar {

52 display: flex;

53 flex-direction: row;

54 justify-content: space-between;

55 }

56 }

58 .title-input.page-title {

59 font-size: 0.8em;

60 .input {

61 border: 0;

62 margin-bottom: -1px;

63 }

64 input[type="text"] {

65 max-width: 840px;

66 margin: 0 auto;

67 border: none;

68 height: auto;

69 display: block;

70 width: 100%;

71 font-size: 20px;

72 border-radius: 8px;

73 }

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

75 position: relative;

76 outline-offset: -1px;

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

78 box-shadow: $bs-card;

79 z-index: 50;

80 }

81 }

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

84 max-width: 100%;

85 }

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

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

89 z-index: 12;

90 }

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

93 .page-editor, .flex-fill {

94 overflow: visible;

95 }

96 }

98 @include smaller-than($s) {

99 .page-edit-toolbar {

100 overflow-x: scroll;

101 overflow-y: visible;

102 }

103 .page-edit-toolbar {

104 white-space: nowrap;

105 > div {

106 display: inline-block;

107 }

108 }

109 }

110

111 .page-save-mobile-button {

112 position: fixed;

113 z-index: 30;

114 border-radius: 50%;

115 width: 52px;

116 height: 52px;

117 font-size: 26px;

118 inset-inline-end: $-xs;

119 bottom: $-s;

120 box-shadow: $bs-hover;

121 background-color: currentColor;

122 text-align: center;

123 svg {

124 fill: #FFF;

125 margin-inline-end: 0;

126 }

127 }

128

129 .draft-notification {

130 pointer-events: none;

131 transform: scale(0);

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

133 transform-origin: 50% 50%;

134 &.visible {

135 transform: scale(1);

136 }

137 }

138

139 .page-style.editor {

140 padding: 0 !important;

141 }

142

143 // Page content pointers

144 .pointer-container {

145 position: fixed;

146 display: none;

147 left: 0;

148 z-index: 10;

149 }

150 .pointer {

151 border: 1px solid #CCC;

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

153 border-radius: 4px;

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

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

156 width: 275px;

157

158 &.is-page-editable {

159 width: 328px;

160 }

161

162 &:before {

163 position: absolute;

164 left: 50%;

165 bottom: -9px;

166 width: 16px;

167 height: 16px;

168 margin-inline-start: -8px;

169 content: '';

170 display: block;

171 transform: rotate(45deg);

172 transform-origin: 50% 50%;

173 border-right: 1px solid #CCC;

174 border-bottom: 1px solid #CCC;

175 z-index: 56;

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

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

178 }

179 input, button, a {

180 position: relative;

181 border-radius: 0;

182 height: 28px;

183 font-size: 12px;

184 vertical-align: top;

185 padding: 5px 16px;

186 }

187 input {

188 background-color: #FFF;

189 border: 1px solid #DDD;

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

191 color: #666;

192 width: 160px;

193 z-index: 40;

194 padding: 5px 10px;

195 }

196 .text-button {

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

198 }

199 .input-group .button {

200 line-height: 1;

201 margin: 0 0 0 -4px;

202 box-shadow: none;

203 }

204 a.button {

205 margin: 0;

206 }

207 .svg-icon {

208 width: 1.2em;

209 height: 1.2em;

210 }

211 .button {

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

213 }

214 }

215

216 // Page editor sidebar toolbox

217 .floating-toolbox {

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

219 overflow: hidden;

220 align-items: stretch;

221 flex-direction: row;

222 display: flex;

223 max-height: 100%;

224 border-radius: 8px;

225 box-shadow: $bs-card;

226 margin-bottom: auto;

227 margin-inline-start: $-l;

228 position: relative;

229 &.open {

230 position: relative;

231 right: 0;

232 max-width: 480px;

233 margin-bottom: 0;

234 }

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

236 display: none !important;

237 }

238 .toolbox-toggle svg {

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

240 }

241 .toolbox-toggle {

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

243 }

244 &.open .toolbox-toggle {

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

246 }

247 &.open .toolbox-toggle svg {

248 transform: rotate(180deg);

249 }

250 > div {

251 flex: 1;

252 position: relative;

253 }

254 .tabs {

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

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

257 width: 40px;

258 flex: 0 1 auto;

259 margin-inline-end: -1px;

260 }

261 .tabs-inner {

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

263 }

264 .tabs svg {

265 padding: 0;

266 margin: 0;

267 }

268 .tabs-inner > button {

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

270 display: block;

271 cursor: pointer;

272 padding: 10px $-xs;

273 font-size: 18px;

274 line-height: 1.6;

275 }

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

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

278 position: relative;

279 &:after {

280 content: '';

281 display: block;

282 position: absolute;

283 left: 0;

284 width: 100%;

285 top: 0;

286 height: 100%;

287 background-color: currentColor;

288 opacity: .075;

289 }

290 }

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

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

293 margin-inline-end: -1px;

294 }

295 h4 {

296 font-size: 24px;

297 margin: $-m 0 0 0;

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

299 }

300 .tags input {

301 max-width: 100%;

302 width: 100%;

303 min-width: 50px;

304 }

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

306 padding-inline-end: $-s;

307 padding-top: $-s;

308 position: relative;

309 }

310 .handle {

311 user-select: none;

312 cursor: move;

313 fill: #999;

314 }

315 form {

316 display: flex;

317 flex: 1;

318 flex-direction: column;

319 overflow-y: scroll;

320 }

321 table td, table th {

322 overflow: visible;

323 }

324 }

325

326 @include smaller-than($xxl) {

327 .floating-toolbox {

328 margin-inline-start: $-s;

329 }

330 }

331

332 @include smaller-than($s) {

333 .page-editor-page-area-wrap {

334 margin: 4px !important;

335 }

336 .floating-toolbox {

337 margin-inline-start: 4px;

338 }

339 .floating-toolbox .tabs {

340 width: 32px;

341 }

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

343 font-size: 12px;

344 }

345 .page-edit-toolbar {

346 padding-block: 0 !important;

347 }

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

349 display: none;

350 }

351 }

352

353 .toolbox-tab-content {

354 display: none;

355 overflow-y: auto;

356 padding-bottom: 45px;

357 }

358

359 .suggestion-box {

360 top: auto;

361 margin: -4px 0 0;

362 right: auto;

363 left: 0;

364 padding: 0;

365 li {

366 display: block;

367 border-bottom: 1px solid #DDD;

368 &:last-child {

369 border-bottom: 0;

370 }

371 }

372 }

373

374 .comments-container h5 {

375 color: #888;

376 font-weight: normal;

377 margin-top: 0.5em;

378 }

379

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

381 min-height: 175px;

382 }

383

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

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

386 .mce-open {

387 display: none;

388 }

389 }

390

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

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

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

394 .chapter-expansion > .icon {

395 font-size: 0.8rem;

396 width: 1.88em;

397 height: 1.88em;

398 flex-shrink: 0;

399 display: flex;

400 align-items: center;

401 justify-content: center;

402 text-align: center;

403 border-radius: 1em;

404 position: relative;

405 overflow: hidden;

406 svg {

407 margin: 0;

408 bottom: 0;

409 }

410 &:after {

411 content: '';

412 position: absolute;

413 background-color: currentColor;

414 opacity: 0.2;

415 left: 0;

416 top: 0;

417 width: 100%;

418 height: 100%;

419 }

420 }

421

422 .entity-chip {

423 display: inline-block;

424 align-items: center;

425 justify-content: center;

426 text-align: center;

427 font-size: 0.9em;

428 border-radius: 3px;

429 position: relative;

430 overflow: hidden;

431 padding: $-xs $-s;

432 fill: currentColor;

433 opacity: 0.85;

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

435 &:after {

436 content: '';

437 position: absolute;

438 background-color: currentColor;

439 opacity: 0.15;

440 left: 0;

441 top: 0;

442 width: 100%;

443 height: 100%;

444 }

445 &:hover {

446 text-decoration: none;

447 opacity: 1;

448 }

449 @media (prefers-contrast: more) {

450 opacity: 1;

451 }

452 }