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

1 // System wide notifications

2 [notification] {

3 position: fixed;

4 top: 0;

5 right: 0;

6 margin: $-xl*2 $-xl;

7 padding: $-l $-xl;

8 background-color: #EEE;

9 border-radius: 3px;

10 box-shadow: $bs-med;

11 z-index: 999999;

12 cursor: pointer;

13 max-width: 360px;

14 transition: transform ease-in-out 280ms;

15 transform: translate3d(580px, 0, 0);

16 display: grid;

17 grid-template-columns: 64px 1fr;

18 span, svg {

19 vertical-align: middle;

20 justify-self: center;

21 align-self: center;

22 }

23 svg {

24 fill: #EEEEEE;

25 width: 4em;

26 padding-right: $-m;

27 }

28 span {

29 vertical-align: middle;

30 line-height: 1.3;

31 }

32 &.pos {

33 background-color: $positive;

34 color: #EEE;

35 }

36 &.neg {

37 background-color: $negative;

38 color: #EEE;

39 }

40 &.warning {

41 background-color: $secondary;

42 color: #EEE;

43 }

44 &.showing {

45 transform: translate3d(0, 0, 0);

46 }

47 &.showing:hover {

48 transform: translate3d(0, -2px, 0);

49 }

50 }

52 [chapter-toggle] {

53 cursor: pointer;

54 margin: 0;

55 transition: all ease-in-out 180ms;

56 user-select: none;

57 svg[data-icon="caret-right"] {

58 transition: all ease-in-out 180ms;

59 transform: rotate(0deg);

60 transform-origin: 25% 50%;

61 }

62 &.open svg[data-icon="caret-right"] {

63 transform: rotate(90deg);

64 }

65 }

67 [overlay] {

68 background-color: rgba(0, 0, 0, 0.333);

69 position: fixed;

70 z-index: 95536;

71 width: 100%;

72 height: 100%;

73 min-width: 100%;

74 min-height: 100%;

75 top: 0;

76 left: 0;

77 right: 0;

78 bottom: 0;

79 align-items: center;

80 justify-content: center;

81 display: none;

82 }

84 .popup-body-wrap {

85 display: flex;

86 }

88 .popup-body {

89 background-color: #FFF;

90 max-height: 90%;

91 width: 1200px;

92 height: auto;

93 margin: 2% 5%;

94 border-radius: 4px;

95 box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);

96 overflow: hidden;

97 z-index: 999;

98 display: flex;

99 flex-direction: column;

100 &.small {

101 margin: 2% auto;

102 width: 800px;

103 max-width: 90%;

104 }

105 &:before {

106 display: flex;

107 align-self: flex-start;

108 }

109 .popup-content {

110 overflow-y: auto;

111 }

112 }

113

114 .corner-button {

115 position: absolute;

116 top: 0;

117 right: 0;

118 margin: 0;

119 height: 40px;

120 border-radius: 0;

121 box-shadow: none;

122 }

123

124 .popup-header, .popup-footer {

125 display: block !important;

126 position: relative;

127 height: 40px;

128 flex: none !important;

129 .popup-title {

130 color: #FFF;

131 padding: 8px $-m;

132 }

133 }

134 body.flexbox-support #entity-selector-wrap .popup-body .form-group {

135 height: 444px;

136 min-height: 444px;

137 }

138 #entity-selector-wrap .popup-body .form-group {

139 margin: 0;

140 }

141

142 .image-manager-body {

143 min-height: 70vh;

144 }

145

146 .dropzone-container {

147 position: relative;

148 border: 3px dashed #DDD;

149 }

150

151 .image-manager-list .image {

152 display: block;

153 position: relative;

154 border-radius: 0;

155 float: left;

156 margin: 0;

157 cursor: pointer;

158 width: (100%/6);

159 height: auto;

160 border: 1px solid #DDD;

161 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

162 transition: all cubic-bezier(.4, 0, 1, 1) 160ms;

163 overflow: hidden;

164 &.selected {

165 transform: scale3d(0.92, 0.92, 0.92);

166 border: 1px solid #444;

167 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);

168 }

169 img {

170 width: 100%;

171 max-width: 100%;

172 display: block;

173 }

174 .image-meta {

175 position: absolute;

176 width: 100%;

177 bottom: 0;

178 left: 0;

179 color: #EEE;

180 background-color: rgba(0, 0, 0, 0.4);

181 font-size: 10px;

182 padding: 3px 4px;

183 span {

184 display: block;

185 }

186 }

187 @include smaller-than($xl) {

188 width: (100%/4);

189 }

190 @include smaller-than($m) {

191 .image-meta {

192 display: none;

193 }

194 }

195 }

196

197 #image-manager .load-more {

198 display: block;

199 text-align: center;

200 background-color: #EEE;

201 padding: $-s $-m;

202 color: #AAA;

203 clear: both;

204 font-size: 20px;

205 cursor: pointer;

206 font-style: italic;

207 }

208

209 .image-manager-sidebar {

210 width: 300px;

211 margin-left: 1px;

212 padding: $-m $-l;

213 overflow-y: auto;

214 border-left: 1px solid #DDD;

215 .dropzone-container {

216 margin-top: $-m;

217 }

218 }

219

220 .image-manager-list {

221 overflow-y: scroll;

222 flex: 1;

223 }

224

225 .image-manager-content {

226 display: flex;

227 flex-direction: column;

228 flex: 1;

229 .container {

230 width: 100%;

231 }

232 .full-tab {

233 text-align: center;

234 }

235 }

236

237 // Dropzone

238 /*

239 * The MIT License

241 */

242 .dz-message {

243 font-size: 1.2em;

244 line-height: 1.1;

245 font-style: italic;

246 color: #aaa;

247 text-align: center;

248 cursor: pointer;

249 padding: $-l $-m;

250 transition: all ease-in-out 120ms;

251 }

252

253 .dz-drag-hover .dz-message {

254 background-color: rgb(16, 126, 210);

255 color: #EEE;

256 }

257

258 @keyframes passing-through {

259 0% {

260 opacity: 0;

261 transform: translateY(40px);

262 }

263 30%, 70% {

264 opacity: 1;

265 transform: translateY(0px);

266 }

267 100% {

268 opacity: 0;

269 transform: translateY(-40px);

270 }

271 }

272

273 @keyframes slide-in {

274 0% {

275 opacity: 0;

276 transform: translateY(40px);

277 }

278 30% {

279 opacity: 1;

280 transform: translateY(0px);

281 }

282 }

283

284 @keyframes pulse {

285 0% {

286 transform: scale(1);

287 }

288 10% {

289 transform: scale(1.1);

290 }

291 20% {

292 transform: scale(1);

293 }

294 }

295

296 .dropzone, .dropzone * {

297 box-sizing: border-box;

298 }

299

300 .dz-preview {

301 position: relative;

302 display: inline-block;

303 vertical-align: top;

304 margin: 12px;

305 min-height: 80px;

306 }

307

308 .dz-preview:hover {

309 z-index: 1000;

310 }

311

312 .dz-preview:hover .dz-details {

313 opacity: 1;

314 }

315

316 .dz-preview.dz-file-preview .dz-image {

317 border-radius: 4px;

318 background: #999;

319 background: linear-gradient(to bottom, #eee, #ddd);

320 }

321

322 .dz-preview.dz-file-preview .dz-details {

323 opacity: 1;

324 }

325

326 .dz-preview.dz-image-preview {

327 background: white;

328 }

329

330 .dz-preview.dz-image-preview .dz-details {

331 transition: opacity 0.2s linear;

332 }

333

334 .dz-preview .dz-remove {

335 font-size: 14px;

336 text-align: center;

337 display: block;

338 cursor: pointer;

339 border: none;

340 }

341

342 .dz-preview .dz-remove:hover {

343 text-decoration: underline;

344 }

345

346 .dz-preview:hover .dz-details {

347 opacity: 1;

348 }

349

350 .dz-preview .dz-details {

351 z-index: 20;

352 position: absolute;

353 top: 0;

354 left: 0;

355 opacity: 0;

356 font-size: 10px;

357 min-width: 100%;

358 max-width: 100%;

359 padding: 6px 3px;

360 text-align: center;

361 color: rgba(0, 0, 0, 0.9);

362 line-height: 150%;

363 }

364

365 .dz-preview .dz-details .dz-size {

366 margin-bottom: 0.5em;

367 font-size: 12px;

368 }

369

370 .dz-preview .dz-details .dz-filename {

371 white-space: nowrap;

372 }

373

374 .dz-preview .dz-details .dz-filename:hover span {

375 border: 1px solid rgba(200, 200, 200, 0.8);

376 background-color: rgba(255, 255, 255, 0.8);

377 }

378

379 .dz-preview .dz-details .dz-filename:not(:hover) {

380 overflow: hidden;

381 text-overflow: ellipsis;

382 }

383

384 .dz-preview .dz-details .dz-filename:not(:hover) span {

385 border: 1px solid transparent;

386 }

387

388 .dz-preview .dz-details .dz-filename span, .dz-preview .dz-details .dz-size span {

389 background-color: rgba(255, 255, 255, 0.4);

390 padding: 0 0.4em;

391 border-radius: 3px;

392 }

393

394 .dz-preview:hover .dz-image img {

395 filter: blur(8px);

396 }

397

398 .dz-preview .dz-image {

399 border-radius: 4px;

400 overflow: hidden;

401 width: 80px;

402 height: 80px;

403 position: relative;

404 display: block;

405 z-index: 10;

406 }

407

408 .dz-preview .dz-image img {

409 display: block;

410 }

411

412 .dz-preview.dz-success .dz-success-mark {

413 animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

414 }

415

416 .dz-preview.dz-error .dz-error-mark {

417 opacity: 1;

418 animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

419 }

420

421 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {

422 pointer-events: none;

423 opacity: 0;

424 z-index: 500;

425 position: absolute;

426 display: block;

427 top: 50%;

428 left: 50%;

429 margin-left: -27px;

430 margin-top: -27px;

431 }

432

433 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {

434 display: block;

435 width: 54px;

436 height: 54px;

437 }

438

439 .dz-preview.dz-processing .dz-progress {

440 opacity: 1;

441 transition: all 0.2s linear;

442 }

443

444 .dz-preview.dz-complete .dz-progress {

445 opacity: 0;

446 transition: opacity 0.4s ease-in;

447 }

448

449 .dz-preview:not(.dz-processing) .dz-progress {

450 animation: pulse 6s ease infinite;

451 }

452

453 .dz-preview .dz-progress {

454 opacity: 1;

455 z-index: 1000;

456 pointer-events: none;

457 position: absolute;

458 height: 16px;

459 left: 50%;

460 top: 50%;

461 margin-top: -8px;

462 width: 80px;

463 margin-left: -40px;

464 background: rgba(255, 255, 255, 0.9);

465 transform: scale(1);

466 border-radius: 8px;

467 overflow: hidden;

468 }

469

470 .dz-preview .dz-progress .dz-upload {

471 background: #333;

472 background: linear-gradient(to bottom, #666, #444);

473 position: absolute;

474 top: 0;

475 left: 0;

476 bottom: 0;

477 width: 0;

478 transition: width 300ms ease-in-out;

479 }

480

481 .dz-preview.dz-error .dz-error-message {

482 display: block;

483 }

484

485 .dz-preview.dz-error:hover .dz-error-message {

486 opacity: 1;

487 pointer-events: auto;

488 }

489

490 .dz-preview .dz-error-message {

491 pointer-events: none;

492 z-index: 1000;

493 position: absolute;

494 display: block;

495 display: none;

496 opacity: 0;

497 transition: opacity 0.3s ease;

498 border-radius: 4px;

499 font-size: 11.5px;

500 line-height: 1.2;

501 top: 88px;

502 left: -26px;

503 width: 148px;

504 background: $negative;

505 padding: $-xs;

506 color: white;

507 }

508

509 .dz-preview .dz-error-message:after {

510 content: '';

511 position: absolute;

512 top: -6px;

513 left: 64px;

514 width: 0;

515 height: 0;

516 border-left: 6px solid transparent;

517 border-right: 6px solid transparent;

518 border-bottom: 6px solid $negative;

519 }

520

521

522 .tab-container .nav-tabs {

523 text-align: left;

524 border-bottom: 1px solid #DDD;

525 margin-bottom: $-m;

526 .tab-item {

527 padding: $-s;

528 color: #666;

529 &.selected {

530 border-bottom-width: 3px;

531 }

532 }

533 }

534

535 .image-picker .none {

536 display: none;

537 }

538

539 #code-editor .CodeMirror {

540 height: 400px;

541 }

542

543 #code-editor .lang-options {

544 max-width: 400px;

545 margin-bottom: $-s;

546 a {

547 margin-right: $-xs;

548 text-decoration: underline;

549 }

550 }

551

552 @include smaller-than($m) {

553 #code-editor .lang-options {

554 max-width: 100%;

555 }

556 #code-editor .CodeMirror {

557 height: 200px;

558 }

559 }

560

561 .comment-box {

562 border: 1px solid #DDD;

563 margin-bottom: $-s;

564 border-radius: 3px;

565 .content {

566 padding: $-s;

567 font-size: 0.666em;

568 p, ul, ol {

569 font-size: $fs-m;

570 margin: .5em 0;

571 }

572 }

573 .reply-row {

574 padding: $-xs $-s;

575 }

576 }

577

578 .comment-box .header {

579 padding: $-xs $-s;

580 background-color: #f8f8f8;

581 border-bottom: 1px solid #DDD;

582 .meta {

583 img, a, span {

584 display: inline-block;

585 vertical-align: top;

586 }

587 a, span {

588 padding: $-xxs 0 $-xxs 0;

589 line-height: 1.6;

590 }

591 a { color: #666; }

592 span {

593 color: #888;

594 padding-left: $-xxs;

595 }

596 }

597 .text-muted {

598 color: #999;

599 }

600 }