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.mce-fullscreen .page-editor .edit-area,

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

24 z-index: 12;

25 }

27 body.mce-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 .align-justify {

109 text-align: justify;

110 }

111 img {

112 max-width: 100%;

113 height:auto;

114 }

115 h1, h2, h3, h4, h5, h6, pre {

116 clear: left;

117 }

118 hr {

119 clear: both;

120 margin: $-m 0;

121 }

122 table {

123 hyphens: auto;

124 table-layout: fixed;

125 max-width: 100%;

126 height: auto !important;

127 }

128

129 // diffs

130 ins,

131 del {

132 text-decoration: none;

133 }

134 ins {

135 background: #dbffdb;

136 }

137 del {

138 background: #FFECEC;

139 }

140

141 &.page-revision {

142 pre code {

143 white-space: pre-wrap;

144 }

145 }

146 }

147

148 // Page content pointers

149 .pointer-container {

150 position: relative;

151 display: none;

152 left: 0;

153 z-index: 10;

154 }

155 .pointer {

156 border: 1px solid #CCC;

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

158 display: flex;

159 align-items: center;

160 justify-items: center;

161 padding: $-s $-s;

162 border-radius: 4px;

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

164 position: absolute;

165 top: -60px;

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

167 width: 275px;

168 z-index: 55;

169

170 &.is-page-editable {

171 width: 328px;

172 }

173

174 &:before {

175 position: absolute;

176 left: 50%;

177 bottom: -9px;

178 width: 16px;

179 height: 16px;

180 margin-inline-start: -8px;

181 content: '';

182 display: block;

183 transform: rotate(45deg);

184 transform-origin: 50% 50%;

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

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

187 z-index: 56;

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

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

190 }

191 input, button, a {

192 position: relative;

193 border-radius: 0;

194 height: 28px;

195 font-size: 12px;

196 vertical-align: top;

197 padding: 5px 16px;

198 }

199 input {

200 background-color: #FFF;

201 border: 1px solid #DDD;

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

203 color: #666;

204 width: 172px;

205 z-index: 40;

206 padding: 5px 10px;

207 }

208 span.icon {

209 fill: #444;

210 cursor: pointer;

211 user-select: none;

212 display: inline-block;

213 line-height: 1;

214 }

215 .input-group .button {

216 line-height: 1;

217 margin: 0 0 0 -4px;

218 box-shadow: none;

219 }

220 a.button {

221 margin: 0;

222 }

223 .svg-icon {

224 width: 1.2em;

225 height: 1.2em;

226 }

227 .button {

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

229 }

230 }

231

232 // Attribute form

233 .floating-toolbox {

234 border: 1px solid #DDD;

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

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

237 right: $-xl*2;

238 width: 48px;

239 overflow: hidden;

240 align-items: stretch;

241 flex-direction: row;

242 display: flex;

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

244 margin-top: -1px;

245 min-height: 0;

246 &.open {

247 width: 480px;

248 }

249 [toolbox-toggle] svg {

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

251 }

252 [toolbox-toggle] {

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

254 }

255 &.open [toolbox-toggle] {

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

257 }

258 &.open [toolbox-toggle] svg {

259 transform: rotate(180deg);

260 }

261 > div {

262 flex: 1;

263 position: relative;

264 }

265 .tabs {

266 display: block;

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

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

269 width: 48px;

270 flex: 0 1 auto;

271 }

272 .tabs svg {

273 padding: 0;

274 margin: 0;

275 }

276 .tabs > button {

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

278 display: block;

279 cursor: pointer;

280 padding: $-s $-m;

281 font-size: 16px;

282 line-height: 1.6;

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

284 }

285 &.open .tabs > button.active {

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

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

288 }

289 div[toolbox-tab-content] {

290 padding-bottom: 45px;

291 display: flex;

292 flex: 1;

293 flex-direction: column;

294 min-height: 0;

295 overflow-y: scroll;

296 }

297 h4 {

298 font-size: 24px;

299 margin: $-m 0 0 0;

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

301 }

302 .tags input {

303 max-width: 100%;

304 width: 100%;

305 min-width: 50px;

306 }

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

308 padding-inline-end: $-s;

309 padding-top: $-s;

310 position: relative;

311 }

312 .handle {

313 user-select: none;

314 cursor: move;

315 fill: #999;

316 }

317 form {

318 display: flex;

319 flex: 1;

320 flex-direction: column;

321 overflow-y: scroll;

322 }

323 table td, table th {

324 overflow: visible;

325 }

326 }

327

328 [toolbox-tab-content] {

329 display: none;

330 }

331

332 .suggestion-box {

333 top: auto;

334 margin: -4px 0 0;

335 right: auto;

336 left: 0;

337 padding: 0;

338 li {

339 display: block;

340 border-bottom: 1px solid #DDD;

341 &:last-child {

342 border-bottom: 0;

343 }

344 }

345 }

346

347 .comments-container h5 {

348 color: #888;

349 font-weight: normal;

350 margin-top: 0.5em;

351 }

352

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

354 min-height: 175px;

355 }

356

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

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

359 .mce-open {

360 display: none;

361 }

362 }

363

364 .entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {

365 font-size: 0.8rem;

366 width: 1.88em;

367 height: 1.88em;

368 display: flex;

369 align-items: center;

370 justify-content: center;

371 text-align: center;

372 border-radius: 1em;

373 position: relative;

374 overflow: hidden;

375 svg {

376 margin: 0;

377 bottom: 0;

378 }

379 &:after {

380 content: '';

381 position: absolute;

382 background-color: currentColor;

383 opacity: 0.2;

384 left: 0;

385 top: 0;

386 width: 100%;

387 height: 100%;

388 }

389 }

390

391 .entity-chip {

392 display: inline-block;

393 align-items: center;

394 justify-content: center;

395 text-align: center;

396 font-size: 0.9em;

397 border-radius: 3px;

398 position: relative;

399 overflow: hidden;

400 padding: $-xs $-s;

401 fill: currentColor;

402 opacity: 0.85;

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

404 &:after {

405 content: '';

406 position: absolute;

407 background-color: currentColor;

408 opacity: 0.15;

409 left: 0;

410 top: 0;

411 width: 100%;

412 height: 100%;

413 }

414 &:hover {

415 text-decoration: none;

416 opacity: 1;

417 }

418 @media (prefers-contrast: more) {

419 opacity: 1;

420 }

421 }