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

1 .page-editor {

2 display: flex;

3 flex-direction: column;

4 align-items: stretch;

5 overflow: hidden;

6 background-color: #FFF;

8 .edit-area {

9 flex: 1;

10 flex-direction: column;

11 z-index: 10;

12 }

14 .mce-tinymce {

15 box-shadow: none;

16 }

18 .mce-top-part::before {

19 box-shadow: none;

20 }

21 }

23 body.mce-fullscreen .page-editor .edit-area,

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

25 z-index: 12;

26 }

28 body.mce-fullscreen, body.markdown-fullscreen {

29 .page-editor, .flex-fill {

30 overflow: visible;

31 }

32 }

34 @include smaller-than($s) {

35 .page-edit-toolbar {

36 overflow-x: scroll;

37 overflow-y: visible;

38 }

39 .page-edit-toolbar .grid.third {

40 display: block;

41 white-space: nowrap;

42 > div {

43 display: inline-block;

44 }

45 }

46 }

48 .page-save-mobile-button {

49 position: fixed;

50 z-index: 30;

51 border-radius: 50%;

52 width: 56px;

53 height: 56px;

54 font-size: 24px;

55 right: $-m;

56 bottom: $-s;

57 box-shadow: $bs-hover;

58 background-color: currentColor;

59 text-align: center;

60 svg {

61 fill: #FFF;

62 margin-right: 0;

63 }

64 }

66 .draft-notification {

67 pointer-events: none;

68 transform: scale(0);

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

70 transform-origin: 50% 50%;

71 &.visible {

72 transform: scale(1);

73 }

74 }

76 .page-style.editor {

77 padding: 0 !important;

78 }

80 .page-content {

81 width: 100%;

82 max-width: 840px;

83 margin: 0 auto;

84 overflow-wrap: break-word;

85 .align-left {

86 text-align: left;

87 }

88 img.align-left, table.align-left {

89 float: left !important;

90 margin: $-xs $-m $-m 0;

91 }

92 .align-right {

93 text-align: right !important;

94 }

95 img.align-right, table.align-right {

96 float: right !important;

97 margin: $-xs 0 $-xs $-s;

98 }

99 .align-center {

100 text-align: center;

101 }

102 img.align-center {

103 display: block;

104 }

105 img.align-center, table.align-center {

106 margin-left: auto;

107 margin-right: auto;

108 }

109 img {

110 max-width: 100%;

111 height:auto;

112 }

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

114 clear: left;

115 }

116 hr {

117 clear: both;

118 margin: $-m 0;

119 }

120 table {

121 hyphens: auto;

122 table-layout: fixed;

123 max-width: 100%;

124 height: auto !important;

125 }

126

127 // diffs

128 ins,

129 del {

130 text-decoration: none;

131 }

132 ins {

133 background: #dbffdb;

134 }

135 del {

136 background: #FFECEC;

137 }

138

139 &.page-revision {

140 pre code {

141 white-space: pre-wrap;

142 }

143 }

144 }

145

146 // Page content pointers

147 .pointer-container {

148 position: relative;

149 display: none;

150 left: 0;

151 z-index: 10;

152 }

153 .pointer {

154 border: 1px solid #CCC;

155 display: flex;

156 align-items: center;

157 justify-items: center;

158 padding: $-s $-s;

159 border-radius: 4px;

160 box-shadow: 0 0 12px 1px rgba(212, 209, 209, 0.3);

161 position: absolute;

162 top: -60px;

163 background-color:#FFF;

164 width: 275px;

165 z-index: 55;

166

167 &.is-page-editable {

168 width: 328px;

169 }

170

171 &:before {

172 position: absolute;

173 left: 50%;

174 bottom: -9px;

175 width: 16px;

176 height: 16px;

177 margin-left: -8px;

178 content: '';

179 display: block;

180 background-color:#FFF;

181 transform: rotate(45deg);

182 transform-origin: 50% 50%;

183 border-bottom: 1px solid #CCC;

184 border-right: 1px solid #CCC;

185 z-index: 56;

186 }

187 input, button, a {

188 position: relative;

189 border-radius: 0;

190 height: 28px;

191 font-size: 12px;

192 vertical-align: top;

193 padding: 5px 16px;

194 }

195 input {

196 background-color: #FFF;

197 border: 1px solid #DDD;

198 color: #666;

199 width: 172px;

200 z-index: 40;

201 padding: 5px 10px;

202 }

203 span.icon {

204 fill: #444;

205 cursor: pointer;

206 user-select: none;

207 display: inline-block;

208 line-height: 1;

209 }

210 .input-group .button {

211 line-height: 1;

212 margin: 0 0 0 -4px;

213 box-shadow: none;

214 }

215 a.button {

216 margin: 0;

217 }

218 .svg-icon {

219 width: 1.2em;

220 height: 1.2em;

221 }

222 }

223

224 // Attribute form

225 .floating-toolbox {

226 background-color: #FFF;

227 border: 1px solid #DDD;

228 right: $-xl*2;

229 width: 48px;

230 overflow: hidden;

231 align-items: stretch;

232 flex-direction: row;

233 display: flex;

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

235 margin-top: -1px;

236 min-height: 0;

237 &.open {

238 width: 480px;

239 }

240 [toolbox-toggle] svg {

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

242 }

243 [toolbox-toggle] {

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

245 }

246 &.open [toolbox-toggle] {

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

248 }

249 &.open [toolbox-toggle] svg {

250 transform: rotate(180deg);

251 }

252 > div {

253 flex: 1;

254 position: relative;

255 }

256 .tabs {

257 display: block;

258 border-right: 1px solid #DDD;

259 width: 48px;

260 flex: 0 1 auto;

261 }

262 .tabs svg {

263 fill: rgba(0, 0, 0, 0.5);

264 padding: 0;

265 margin: 0;

266 }

267 .tabs > button {

268 display: block;

269 cursor: pointer;

270 padding: $-s $-m;

271 font-size: 16px;

272 line-height: 1.6;

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

274 }

275 &.open .tabs > button.active {

276 fill: #444;

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

278 }

279 div[toolbox-tab-content] {

280 padding-bottom: 45px;

281 display: flex;

282 flex: 1;

283 flex-direction: column;

284 min-height: 0px;

285 overflow-y: scroll;

286 }

287 h4 {

288 font-size: 24px;

289 margin: $-m 0 0 0;

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

291 }

292 .tags input {

293 max-width: 100%;

294 width: 100%;

295 min-width: 50px;

296 }

297 .tags td, .tag-table > div > div > div {

298 padding-right: $-s;

299 padding-top: $-s;

300 position: relative;

301 }

302 .handle {

303 user-select: none;

304 cursor: move;

305 fill: #999;

306 }

307 form {

308 display: flex;

309 flex: 1;

310 flex-direction: column;

311 overflow-y: scroll;

312 }

313 table td, table th {

314 overflow: visible;

315 }

316 }

317

318 [toolbox-tab-content] {

319 display: none;

320 }

321

322 .tag-display {

323 position: relative;

324 table {

325 width: 100%;

326 margin: 0;

327 padding: 0;

328 }

329 tr:first-child td {

330 padding-top: 0;

331 }

332 .heading th {

333 padding: $-xs $-s;

334 color: rgba(100, 100, 100, 0.7);

335 border: 0;

336 font-weight: 400;

337 }

338 td {

339 border: 0;

340 border-bottom: 1px solid #EEE;

341 padding: $-xs $-s;

342 color: #444;

343 }

344 tr td:first-child {

345 padding-left:0;

346 }

347 .tag-value {

348 color: #888;

349 }

350 tr:last-child td {

351 border-bottom: none;

352 }

353 .tag {

354 padding: $-s;

355 }

356 }

357

358 .suggestion-box {

359 position: absolute;

360 background-color: #FFF;

361 border: 1px solid #BBB;

362 box-shadow: $bs-light;

363 list-style: none;

364 z-index: 100;

365 padding: 0;

366 margin: 0;

367 border-radius: 3px;

368 li {

369 display: block;

370 padding: $-xs $-s;

371 border-bottom: 1px solid #DDD;

372 &:last-child {

373 border-bottom: 0;

374 }

375 &.active {

376 background-color: #EEE;

377 }

378 }

379 }

380

381 .comments-container h5 {

382 color: #888;

383 font-weight: normal;

384 margin-top: 0.5em;

385 }

386

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

388 min-height: 175px;

389 }

390

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

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

393 .mce-open {

394 display: none;

395 }

396 }

397

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

399 font-size: 0.8rem;

400 width: 1.88em;

401 height: 1.88em;

402 display: flex;

403 align-items: center;

404 justify-content: center;

405 text-align: center;

406 border-radius: 1em;

407 position: relative;

408 overflow: hidden;

409 svg {

410 margin: 0;

411 bottom: 0;

412 }

413 &:after {

414 content: '';

415 position: absolute;

416 background-color: currentColor;

417 opacity: 0.2;

418 left: 0;

419 top: 0;

420 width: 100%;

421 height: 100%;

422 }

423 }

424

425 .entity-chip {

426 display: inline-block;

427 align-items: center;

428 justify-content: center;

429 text-align: center;

430 font-size: 0.9em;

431 border-radius: 3px;

432 position: relative;

433 overflow: hidden;

434 padding: $-xs $-s;

435 fill: currentColor;

436 opacity: 0.85;

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

438 &:after {

439 content: '';

440 position: absolute;

441 background-color: currentColor;

442 opacity: 0.15;

443 left: 0;

444 top: 0;

445 width: 100%;

446 height: 100%;

447 }

448 &:hover {

449 text-decoration: none;

450 opacity: 1;

451 }

452 }