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-inline-end: 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-inline-start: -8px;

178 content: '';

179 display: block;

180 background-color:#FFF;

181 transform: rotate(45deg);

182 transform-origin: 50% 50%;

183 border-inline-startom: 1px solid #CCC;

184 border-inline-end: 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-inline-end: 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, .inline-start-table > div > div > div {

298 padding-inline-end: $-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 .suggestion-box {

323 position: absolute;

324 background-color: #FFF;

325 border: 1px solid #BBB;

326 box-shadow: $bs-light;

327 list-style: none;

328 z-index: 100;

329 padding: 0;

330 margin: 0;

331 border-radius: 3px;

332 li {

333 display: block;

334 padding: $-xs $-s;

335 border-bottom: 1px solid #DDD;

336 &:last-child {

337 border-bottom: 0;

338 }

339 &.active {

340 background-color: #EEE;

341 }

342 }

343 }

344

345 .comments-container h5 {

346 color: #888;

347 font-weight: normal;

348 margin-top: 0.5em;

349 }

350

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

352 min-height: 175px;

353 }

354

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

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

357 .mce-open {

358 display: none;

359 }

360 }

361

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

363 font-size: 0.8rem;

364 width: 1.88em;

365 height: 1.88em;

366 display: flex;

367 align-items: center;

368 justify-content: center;

369 text-align: center;

370 border-radius: 1em;

371 position: relative;

372 overflow: hidden;

373 svg {

374 margin: 0;

375 bottom: 0;

376 }

377 &:after {

378 content: '';

379 position: absolute;

380 background-color: currentColor;

381 opacity: 0.2;

382 left: 0;

383 top: 0;

384 width: 100%;

385 height: 100%;

386 }

387 }

388

389 .entity-chip {

390 display: inline-block;

391 align-items: center;

392 justify-content: center;

393 text-align: center;

394 font-size: 0.9em;

395 border-radius: 3px;

396 position: relative;

397 overflow: hidden;

398 padding: $-xs $-s;

399 fill: currentColor;

400 opacity: 0.85;

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

402 &:after {

403 content: '';

404 position: absolute;

405 background-color: currentColor;

406 opacity: 0.15;

407 left: 0;

408 top: 0;

409 width: 100%;

410 height: 100%;

411 }

412 &:hover {

413 text-decoration: none;

414 opacity: 1;

415 }

416 }