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

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

24 z-index: 12;

25 }

27 body.tox-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 pointers

80 .pointer-container {

81 position: fixed;

82 display: none;

83 left: 0;

84 z-index: 10;

85 }

86 .pointer {

87 border: 1px solid #CCC;

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

89 border-radius: 4px;

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

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

92 width: 275px;

94 &.is-page-editable {

95 width: 328px;

96 }

98 &:before {

99 position: absolute;

100 left: 50%;

101 bottom: -9px;

102 width: 16px;

103 height: 16px;

104 margin-inline-start: -8px;

105 content: '';

106 display: block;

107 transform: rotate(45deg);

108 transform-origin: 50% 50%;

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

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

111 z-index: 56;

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

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

114 }

115 input, button, a {

116 position: relative;

117 border-radius: 0;

118 height: 28px;

119 font-size: 12px;

120 vertical-align: top;

121 padding: 5px 16px;

122 }

123 input {

124 background-color: #FFF;

125 border: 1px solid #DDD;

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

127 color: #666;

128 width: 160px;

129 z-index: 40;

130 padding: 5px 10px;

131 }

132 .text-button {

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

134 }

135 .input-group .button {

136 line-height: 1;

137 margin: 0 0 0 -4px;

138 box-shadow: none;

139 }

140 a.button {

141 margin: 0;

142 }

143 .svg-icon {

144 width: 1.2em;

145 height: 1.2em;

146 }

147 .button {

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

149 }

150 }

151

152 // Attribute form

153 .floating-toolbox {

154 border: 1px solid #DDD;

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

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

157 right: $-xl*2;

158 width: 48px;

159 overflow: hidden;

160 align-items: stretch;

161 flex-direction: row;

162 display: flex;

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

164 margin-top: -1px;

165 min-height: 0;

166 &.open {

167 width: 480px;

168 }

169 .toolbox-toggle svg {

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

171 }

172 .toolbox-toggle {

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

174 }

175 &.open .toolbox-toggle {

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

177 }

178 &.open .toolbox-toggle svg {

179 transform: rotate(180deg);

180 }

181 > div {

182 flex: 1;

183 position: relative;

184 }

185 .tabs {

186 display: block;

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

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

189 width: 48px;

190 flex: 0 1 auto;

191 }

192 .tabs svg {

193 padding: 0;

194 margin: 0;

195 }

196 .tabs > button {

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

198 display: block;

199 cursor: pointer;

200 padding: $-s $-m;

201 font-size: 16px;

202 line-height: 1.6;

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

204 }

205 &.open .tabs > button.active {

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

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

208 }

209 h4 {

210 font-size: 24px;

211 margin: $-m 0 0 0;

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

213 }

214 .tags input {

215 max-width: 100%;

216 width: 100%;

217 min-width: 50px;

218 }

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

220 padding-inline-end: $-s;

221 padding-top: $-s;

222 position: relative;

223 }

224 .handle {

225 user-select: none;

226 cursor: move;

227 fill: #999;

228 }

229 form {

230 display: flex;

231 flex: 1;

232 flex-direction: column;

233 overflow-y: scroll;

234 }

235 table td, table th {

236 overflow: visible;

237 }

238 }

239

240 .toolbox-tab-content {

241 display: none;

242 overflow-y: auto;

243 padding-bottom: 45px;

244 }

245

246 .suggestion-box {

247 top: auto;

248 margin: -4px 0 0;

249 right: auto;

250 left: 0;

251 padding: 0;

252 li {

253 display: block;

254 border-bottom: 1px solid #DDD;

255 &:last-child {

256 border-bottom: 0;

257 }

258 }

259 }

260

261 .comments-container h5 {

262 color: #888;

263 font-weight: normal;

264 margin-top: 0.5em;

265 }

266

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

268 min-height: 175px;

269 }

270

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

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

273 .mce-open {

274 display: none;

275 }

276 }

277

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

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

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

281 .chapter-expansion > .icon {

282 font-size: 0.8rem;

283 width: 1.88em;

284 height: 1.88em;

285 flex-shrink: 0;

286 display: flex;

287 align-items: center;

288 justify-content: center;

289 text-align: center;

290 border-radius: 1em;

291 position: relative;

292 overflow: hidden;

293 svg {

294 margin: 0;

295 bottom: 0;

296 }

297 &:after {

298 content: '';

299 position: absolute;

300 background-color: currentColor;

301 opacity: 0.2;

302 left: 0;

303 top: 0;

304 width: 100%;

305 height: 100%;

306 }

307 }

308

309 .entity-chip {

310 display: inline-block;

311 align-items: center;

312 justify-content: center;

313 text-align: center;

314 font-size: 0.9em;

315 border-radius: 3px;

316 position: relative;

317 overflow: hidden;

318 padding: $-xs $-s;

319 fill: currentColor;

320 opacity: 0.85;

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

322 &:after {

323 content: '';

324 position: absolute;

325 background-color: currentColor;

326 opacity: 0.15;

327 left: 0;

328 top: 0;

329 width: 100%;

330 height: 100%;

331 }

332 &:hover {

333 text-decoration: none;

334 opacity: 1;

335 }

336 @media (prefers-contrast: more) {

337 opacity: 1;

338 }

339 }