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 right: $-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-block-end: 1px solid #CCC;

174 border-inline-end: 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-left: $-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-right: 1px solid #DDD;

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

257 width: 40px;

258 flex: 0 1 auto;

259 margin-right: -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 background-color: var(--color-primary-light);

278 color: var(--color-primary);

279 }

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

281 border-inline-end: 1px solid var(--color-primary);

282 margin-inline-end: -1px;

283 }

284 h4 {

285 font-size: 24px;

286 margin: $-m 0 0 0;

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

288 }

289 .tags input {

290 max-width: 100%;

291 width: 100%;

292 min-width: 50px;

293 }

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

295 padding-inline-end: $-s;

296 padding-top: $-s;

297 position: relative;

298 }

299 .handle {

300 user-select: none;

301 cursor: move;

302 fill: #999;

303 }

304 form {

305 display: flex;

306 flex: 1;

307 flex-direction: column;

308 overflow-y: scroll;

309 }

310 table td, table th {

311 overflow: visible;

312 }

313 }

314

315 @include smaller-than($xxl) {

316 .floating-toolbox {

317 margin-left: $-s;

318 }

319 }

320

321 @include smaller-than($s) {

322 .page-editor-page-area-wrap {

323 margin: 4px !important;

324 }

325 .floating-toolbox {

326 margin-left: 4px;

327 }

328 .floating-toolbox .tabs {

329 width: 32px;

330 }

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

332 font-size: 12px;

333 }

334 .page-edit-toolbar {

335 padding-block: 0 !important;

336 }

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

338 display: none;

339 }

340 }

341

342 .toolbox-tab-content {

343 display: none;

344 overflow-y: auto;

345 padding-bottom: 45px;

346 }

347

348 .suggestion-box {

349 top: auto;

350 margin: -4px 0 0;

351 right: auto;

352 left: 0;

353 padding: 0;

354 li {

355 display: block;

356 border-bottom: 1px solid #DDD;

357 &:last-child {

358 border-bottom: 0;

359 }

360 }

361 }

362

363 .comments-container h5 {

364 color: #888;

365 font-weight: normal;

366 margin-top: 0.5em;

367 }

368

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

370 min-height: 175px;

371 }

372

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

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

375 .mce-open {

376 display: none;

377 }

378 }

379

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

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

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

383 .chapter-expansion > .icon {

384 font-size: 0.8rem;

385 width: 1.88em;

386 height: 1.88em;

387 flex-shrink: 0;

388 display: flex;

389 align-items: center;

390 justify-content: center;

391 text-align: center;

392 border-radius: 1em;

393 position: relative;

394 overflow: hidden;

395 svg {

396 margin: 0;

397 bottom: 0;

398 }

399 &:after {

400 content: '';

401 position: absolute;

402 background-color: currentColor;

403 opacity: 0.2;

404 left: 0;

405 top: 0;

406 width: 100%;

407 height: 100%;

408 }

409 }

410

411 .entity-chip {

412 display: inline-block;

413 align-items: center;

414 justify-content: center;

415 text-align: center;

416 font-size: 0.9em;

417 border-radius: 3px;

418 position: relative;

419 overflow: hidden;

420 padding: $-xs $-s;

421 fill: currentColor;

422 opacity: 0.85;

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

424 &:after {

425 content: '';

426 position: absolute;

427 background-color: currentColor;

428 opacity: 0.15;

429 left: 0;

430 top: 0;

431 width: 100%;

432 height: 100%;

433 }

434 &:hover {

435 text-decoration: none;

436 opacity: 1;

437 }

438 @media (prefers-contrast: more) {

439 opacity: 1;

440 }

441 }