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 height: 4em;

27 padding-right: $-m;

28 }

29 span {

30 vertical-align: middle;

31 line-height: 1.3;

32 }

33 &.pos {

34 background-color: $positive;

35 color: #EEE;

36 }

37 &.neg {

38 background-color: $negative;

39 color: #EEE;

40 }

41 &.warning {

42 background-color: $secondary;

43 color: #EEE;

44 }

45 &.showing {

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

47 }

48 &.showing:hover {

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

50 }

51 }

53 [chapter-toggle] {

54 cursor: pointer;

55 margin: 0;

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

57 user-select: none;

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

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

60 transform: rotate(0deg);

61 transform-origin: 25% 50%;

62 }

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

64 transform: rotate(90deg);

65 }

66 }

68 [overlay] {

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

70 position: fixed;

71 z-index: 95536;

72 width: 100%;

73 height: 100%;

74 min-width: 100%;

75 min-height: 100%;

76 top: 0;

77 left: 0;

78 right: 0;

79 bottom: 0;

80 align-items: center;

81 justify-content: center;

82 display: none;

83 }

85 .popup-body-wrap {

86 display: flex;

87 }

89 .popup-body {

90 background-color: #FFF;

91 max-height: 90%;

92 width: 1200px;

93 height: auto;

94 margin: 2% 5%;

95 border-radius: 4px;

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

97 overflow: hidden;

98 z-index: 999;

99 display: flex;

100 flex-direction: column;

101 &.small {

102 margin: 2% auto;

103 width: 800px;

104 max-width: 90%;

105 }

106 &:before {

107 display: flex;

108 align-self: flex-start;

109 }

110 .popup-content {

111 overflow-y: auto;

112 }

113 }

114

115 .corner-button {

116 position: absolute;

117 top: 0;

118 right: 0;

119 margin: 0;

120 height: 40px;

121 border-radius: 0;

122 box-shadow: none;

123 }

124

125 .popup-header, .popup-footer {

126 display: block !important;

127 position: relative;

128 height: 40px;

129 flex: none !important;

130 .popup-title {

131 color: #FFF;

132 padding: 8px $-m;

133 }

134 }

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

136 height: 444px;

137 min-height: 444px;

138 }

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

140 margin: 0;

141 }

142

143 .image-manager-body {

144 min-height: 70vh;

145 }

146

147 .dropzone-container {

148 position: relative;

149 border: 3px dashed #DDD;

150 }

151

152 .image-manager-list .image {

153 display: block;

154 position: relative;

155 border-radius: 0;

156 float: left;

157 margin: 0;

158 cursor: pointer;

159 width: (100%/6);

160 height: auto;

161 border: 1px solid #DDD;

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

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

164 overflow: hidden;

165 &.selected {

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

167 border: 1px solid #444;

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

169 }

170 img {

171 width: 100%;

172 max-width: 100%;

173 display: block;

174 }

175 .image-meta {

176 position: absolute;

177 width: 100%;

178 bottom: 0;

179 left: 0;

180 color: #EEE;

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

182 font-size: 10px;

183 padding: 3px 4px;

184 span {

185 display: block;

186 }

187 }

188 @include smaller-than($xl) {

189 width: (100%/4);

190 }

191 @include smaller-than($m) {

192 .image-meta {

193 display: none;

194 }

195 }

196 }

197

198 #image-manager .load-more {

199 display: block;

200 text-align: center;

201 background-color: #EEE;

202 padding: $-s $-m;

203 color: #AAA;

204 clear: both;

205 font-size: 20px;

206 cursor: pointer;

207 font-style: italic;

208 }

209

210 .image-manager-sidebar {

211 width: 300px;

212 margin-left: 1px;

213 padding: $-m $-l;

214 overflow-y: auto;

215 overflow-x: hidden;

216 border-left: 1px solid #DDD;

217 .dropzone-container {

218 margin-top: $-m;

219 }

220 }

221

222 .image-manager-list {

223 overflow-y: scroll;

224 flex: 1;

225 }

226

227 .image-manager-content {

228 display: flex;

229 flex-direction: column;

230 flex: 1;

231 .container {

232 width: 100%;

233 }

234 .full-tab {

235 text-align: center;

236 }

237 }

238

239 // Dropzone

240 /*

241 * The MIT License

243 */

244 .dz-message {

245 font-size: 1.2em;

246 line-height: 1.1;

247 font-style: italic;

248 color: #aaa;

249 text-align: center;

250 cursor: pointer;

251 padding: $-l $-m;

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

253 }

254

255 .dz-drag-hover .dz-message {

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

257 color: #EEE;

258 }

259

260 @keyframes passing-through {

261 0% {

262 opacity: 0;

263 transform: translateY(40px);

264 }

265 30%, 70% {

266 opacity: 1;

267 transform: translateY(0px);

268 }

269 100% {

270 opacity: 0;

271 transform: translateY(-40px);

272 }

273 }

274

275 @keyframes slide-in {

276 0% {

277 opacity: 0;

278 transform: translateY(40px);

279 }

280 30% {

281 opacity: 1;

282 transform: translateY(0px);

283 }

284 }

285

286 @keyframes pulse {

287 0% {

288 transform: scale(1);

289 }

290 10% {

291 transform: scale(1.1);

292 }

293 20% {

294 transform: scale(1);

295 }

296 }

297

298 .dropzone, .dropzone * {

299 box-sizing: border-box;

300 }

301

302 .dz-preview {

303 position: relative;

304 display: inline-block;

305 vertical-align: top;

306 margin: 12px;

307 min-height: 80px;

308 }

309

310 .dz-preview:hover {

311 z-index: 1000;

312 }

313

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

315 opacity: 1;

316 }

317

318 .dz-preview.dz-file-preview .dz-image {

319 border-radius: 4px;

320 background: #e9e9e9;

321 }

322

323 .dz-preview.dz-file-preview .dz-details {

324 opacity: 1;

325 }

326

327 .dz-preview.dz-image-preview {

328 background: white;

329 }

330

331 .dz-preview.dz-image-preview .dz-details {

332 transition: opacity 0.2s linear;

333 }

334

335 .dz-preview .dz-remove {

336 font-size: 13px;

337 text-align: center;

338 display: block;

339 cursor: pointer;

340 border: none;

341 margin-top: 3px;

342 }

343

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

345 text-decoration: underline;

346 }

347

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

349 opacity: 1;

350 }

351

352 .dz-preview .dz-details {

353 z-index: 20;

354 position: absolute;

355 top: 0;

356 left: 0;

357 opacity: 0;

358 font-size: 10px;

359 min-width: 100%;

360 max-width: 100%;

361 padding: 6px 3px;

362 text-align: center;

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

364 line-height: 150%;

365 }

366

367 .dz-preview .dz-details .dz-size {

368 margin-bottom: 0.5em;

369 font-size: 12px;

370 }

371

372 .dz-preview .dz-details .dz-filename {

373 white-space: nowrap;

374 }

375

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

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

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

379 }

380

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

382 overflow: hidden;

383 text-overflow: ellipsis;

384 }

385

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

387 border: 1px solid transparent;

388 }

389

390 .dz-preview .dz-details .dz-filename span {

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

392 padding: 0 0.4em;

393 border-radius: 3px;

394 }

395

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

397 filter: blur(8px);

398 }

399

400 .dz-preview .dz-image {

401 border-radius: 4px;

402 overflow: hidden;

403 width: 80px;

404 height: 80px;

405 position: relative;

406 display: block;

407 z-index: 10;

408 }

409

410 .dz-preview .dz-image img {

411 display: block;

412 }

413

414 .dz-preview.dz-success .dz-success-mark {

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

416 }

417

418 .dz-preview.dz-error .dz-error-mark {

419 opacity: 1;

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

421 }

422

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

424 pointer-events: none;

425 opacity: 0;

426 z-index: 1001;

427 position: absolute;

428 display: block;

429 top: 50%;

430 left: 50%;

431 margin-left: -27px;

432 margin-top: -35px;

433 }

434

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

436 display: block;

437 width: 54px;

438 height: 54px;

439 }

440

441 .dz-preview.dz-processing .dz-progress {

442 opacity: 1;

443 transition: all 0.2s linear;

444 }

445

446 .dz-preview.dz-complete .dz-progress {

447 opacity: 0;

448 transition: opacity 0.4s ease-in;

449 }

450

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

452 animation: pulse 6s ease infinite;

453 }

454

455 .dz-preview .dz-progress {

456 opacity: 1;

457 z-index: 1000;

458 pointer-events: none;

459 position: absolute;

460 height: 16px;

461 left: 50%;

462 top: 50%;

463 margin-top: -8px;

464 width: 80px;

465 margin-left: -40px;

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

467 transform: scale(1);

468 border-radius: 8px;

469 overflow: hidden;

470 }

471

472 .dz-preview .dz-progress .dz-upload {

473 background: #333;

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

475 position: absolute;

476 top: 0;

477 left: 0;

478 bottom: 0;

479 width: 0;

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

481 }

482

483 .dz-preview.dz-error .dz-error-message {

484 display: block;

485 }

486

487 .dz-preview.dz-error {

488 .dz-image, .dz-details {

489 &:hover ~ .dz-error-message {

490 opacity: 1;

491 pointer-events: auto;

492 }

493 }

494 }

495

496 .dz-preview .dz-error-message {

497 pointer-events: none;

498 z-index: 1000;

499 position: absolute;

500 display: block;

501 display: none;

502 opacity: 0;

503 transition: opacity 0.3s ease;

504 border-radius: 4px;

505 font-size: 12px;

506 line-height: 1.2;

507 top: 88px;

508 left: -26px;

509 width: 148px;

510 background: $negative;

511 padding: $-xs;

512 color: white;

513 }

514

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

516 content: '';

517 position: absolute;

518 top: -6px;

519 left: 64px;

520 width: 0;

521 height: 0;

522 border-left: 6px solid transparent;

523 border-right: 6px solid transparent;

524 border-bottom: 6px solid $negative;

525 }

526

527

528 .tab-container .nav-tabs {

529 text-align: left;

530 border-bottom: 1px solid #DDD;

531 margin-bottom: $-m;

532 .tab-item {

533 padding: $-s;

534 color: #666;

535 &.selected {

536 border-bottom-width: 3px;

537 }

538 }

539 }

540

541 .image-picker .none {

542 display: none;

543 }

544

545 #code-editor .CodeMirror {

546 height: 400px;

547 }

548

549 #code-editor .lang-options {

550 max-width: 400px;

551 margin-bottom: $-s;

552 a {

553 margin-right: $-xs;

554 text-decoration: underline;

555 }

556 }

557

558 @include smaller-than($m) {

559 #code-editor .lang-options {

560 max-width: 100%;

561 }

562 #code-editor .CodeMirror {

563 height: 200px;

564 }

565 }

566

567 .comment-box {

568 border: 1px solid #DDD;

569 margin-bottom: $-s;

570 border-radius: 3px;

571 .content {

572 padding: $-s;

573 font-size: 0.666em;

574 p, ul, ol {

575 font-size: $fs-m;

576 margin: .5em 0;

577 }

578 }

579 .reply-row {

580 padding: $-xs $-s;

581 }

582 }

583

584 .comment-box .header {

585 padding: $-xs $-s;

586 background-color: #f8f8f8;

587 border-bottom: 1px solid #DDD;

588 .meta {

589 img, a, span {

590 display: inline-block;

591 vertical-align: top;

592 }

593 a, span {

594 padding: $-xxs 0 $-xxs 0;

595 line-height: 1.6;

596 }

597 a { color: #666; }

598 span {

599 color: #888;

600 padding-left: $-xxs;

601 }

602 }

603 .text-muted {

604 color: #999;

605 }

606 }