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: 480px;

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

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 }

31 &.pos {

32 background-color: $positive;

33 color: #EEE;

34 }

35 &.neg {

36 background-color: $negative;

37 color: #EEE;

38 }

39 &.warning {

40 background-color: $secondary;

41 color: #EEE;

42 }

43 &.showing {

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

45 }

46 }

48 [chapter-toggle] {

49 cursor: pointer;

50 margin: 0;

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

52 user-select: none;

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

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

55 transform: rotate(0deg);

56 transform-origin: 25% 50%;

57 }

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

59 transform: rotate(90deg);

60 }

61 }

63 [overlay] {

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

65 position: fixed;

66 z-index: 95536;

67 width: 100%;

68 height: 100%;

69 min-width: 100%;

70 min-height: 100%;

71 top: 0;

72 left: 0;

73 right: 0;

74 bottom: 0;

75 align-items: center;

76 justify-content: center;

77 display: none;

78 }

80 .popup-body-wrap {

81 display: flex;

82 }

84 .popup-body {

85 background-color: #FFF;

86 max-height: 90%;

87 width: 1200px;

88 height: auto;

89 margin: 2% 5%;

90 border-radius: 4px;

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

92 overflow: hidden;

93 z-index: 999;

94 display: flex;

95 flex-direction: column;

96 &.small {

97 margin: 2% auto;

98 width: 800px;

99 max-width: 90%;

100 }

101 &:before {

102 display: flex;

103 align-self: flex-start;

104 }

105 .popup-content {

106 overflow-y: auto;

107 }

108 }

109

110 .corner-button {

111 position: absolute;

112 top: 0;

113 right: 0;

114 margin: 0;

115 height: 40px;

116 border-radius: 0;

117 box-shadow: none;

118 }

119

120 .popup-header, .popup-footer {

121 display: block !important;

122 position: relative;

123 height: 40px;

124 flex: none !important;

125 .popup-title {

126 color: #FFF;

127 padding: 8px $-m;

128 }

129 }

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

131 height: 444px;

132 min-height: 444px;

133 }

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

135 margin: 0;

136 }

137

138 .image-manager-body {

139 min-height: 70vh;

140 }

141

142 .dropzone-container {

143 position: relative;

144 border: 3px dashed #DDD;

145 }

146

147 .image-manager-list .image {

148 display: block;

149 position: relative;

150 border-radius: 0;

151 float: left;

152 margin: 0;

153 cursor: pointer;

154 width: (100%/6);

155 height: auto;

156 border: 1px solid #DDD;

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

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

159 overflow: hidden;

160 &.selected {

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

162 border: 1px solid #444;

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

164 }

165 img {

166 width: 100%;

167 max-width: 100%;

168 display: block;

169 }

170 .image-meta {

171 position: absolute;

172 width: 100%;

173 bottom: 0;

174 left: 0;

175 color: #EEE;

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

177 font-size: 10px;

178 padding: 3px 4px;

179 span {

180 display: block;

181 }

182 }

183 @include smaller-than($xl) {

184 width: (100%/4);

185 }

186 @include smaller-than($m) {

187 .image-meta {

188 display: none;

189 }

190 }

191 }

192

193 #image-manager .load-more {

194 display: block;

195 text-align: center;

196 background-color: #EEE;

197 padding: $-s $-m;

198 color: #AAA;

199 clear: both;

200 font-size: 20px;

201 cursor: pointer;

202 font-style: italic;

203 }

204

205 .image-manager-sidebar {

206 width: 300px;

207 margin-left: 1px;

208 padding: $-m $-l;

209 overflow-y: auto;

210 border-left: 1px solid #DDD;

211 .dropzone-container {

212 margin-top: $-m;

213 }

214 }

215

216 .image-manager-list {

217 overflow-y: scroll;

218 flex: 1;

219 }

220

221 .image-manager-content {

222 display: flex;

223 flex-direction: column;

224 flex: 1;

225 .container {

226 width: 100%;

227 }

228 .full-tab {

229 text-align: center;

230 }

231 }

232

233 // Dropzone

234 /*

235 * The MIT License

237 */

238 .dz-message {

239 font-size: 1.2em;

240 line-height: 1.1;

241 font-style: italic;

242 color: #aaa;

243 text-align: center;

244 cursor: pointer;

245 padding: $-l $-m;

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

247 }

248

249 .dz-drag-hover .dz-message {

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

251 color: #EEE;

252 }

253

254 @keyframes passing-through {

255 0% {

256 opacity: 0;

257 transform: translateY(40px);

258 }

259 30%, 70% {

260 opacity: 1;

261 transform: translateY(0px);

262 }

263 100% {

264 opacity: 0;

265 transform: translateY(-40px);

266 }

267 }

268

269 @keyframes slide-in {

270 0% {

271 opacity: 0;

272 transform: translateY(40px);

273 }

274 30% {

275 opacity: 1;

276 transform: translateY(0px);

277 }

278 }

279

280 @keyframes pulse {

281 0% {

282 transform: scale(1);

283 }

284 10% {

285 transform: scale(1.1);

286 }

287 20% {

288 transform: scale(1);

289 }

290 }

291

292 .dropzone, .dropzone * {

293 box-sizing: border-box;

294 }

295

296 .dz-preview {

297 position: relative;

298 display: inline-block;

299 vertical-align: top;

300 margin: 12px;

301 min-height: 80px;

302 }

303

304 .dz-preview:hover {

305 z-index: 1000;

306 }

307

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

309 opacity: 1;

310 }

311

312 .dz-preview.dz-file-preview .dz-image {

313 border-radius: 4px;

314 background: #999;

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

316 }

317

318 .dz-preview.dz-file-preview .dz-details {

319 opacity: 1;

320 }

321

322 .dz-preview.dz-image-preview {

323 background: white;

324 }

325

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

327 transition: opacity 0.2s linear;

328 }

329

330 .dz-preview .dz-remove {

331 font-size: 14px;

332 text-align: center;

333 display: block;

334 cursor: pointer;

335 border: none;

336 }

337

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

339 text-decoration: underline;

340 }

341

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

343 opacity: 1;

344 }

345

346 .dz-preview .dz-details {

347 z-index: 20;

348 position: absolute;

349 top: 0;

350 left: 0;

351 opacity: 0;

352 font-size: 10px;

353 min-width: 100%;

354 max-width: 100%;

355 padding: 6px 3px;

356 text-align: center;

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

358 line-height: 150%;

359 }

360

361 .dz-preview .dz-details .dz-size {

362 margin-bottom: 0.5em;

363 font-size: 12px;

364 }

365

366 .dz-preview .dz-details .dz-filename {

367 white-space: nowrap;

368 }

369

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

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

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

373 }

374

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

376 overflow: hidden;

377 text-overflow: ellipsis;

378 }

379

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

381 border: 1px solid transparent;

382 }

383

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

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

386 padding: 0 0.4em;

387 border-radius: 3px;

388 }

389

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

391 filter: blur(8px);

392 }

393

394 .dz-preview .dz-image {

395 border-radius: 4px;

396 overflow: hidden;

397 width: 80px;

398 height: 80px;

399 position: relative;

400 display: block;

401 z-index: 10;

402 }

403

404 .dz-preview .dz-image img {

405 display: block;

406 }

407

408 .dz-preview.dz-success .dz-success-mark {

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

410 }

411

412 .dz-preview.dz-error .dz-error-mark {

413 opacity: 1;

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

415 }

416

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

418 pointer-events: none;

419 opacity: 0;

420 z-index: 500;

421 position: absolute;

422 display: block;

423 top: 50%;

424 left: 50%;

425 margin-left: -27px;

426 margin-top: -27px;

427 }

428

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

430 display: block;

431 width: 54px;

432 height: 54px;

433 }

434

435 .dz-preview.dz-processing .dz-progress {

436 opacity: 1;

437 transition: all 0.2s linear;

438 }

439

440 .dz-preview.dz-complete .dz-progress {

441 opacity: 0;

442 transition: opacity 0.4s ease-in;

443 }

444

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

446 animation: pulse 6s ease infinite;

447 }

448

449 .dz-preview .dz-progress {

450 opacity: 1;

451 z-index: 1000;

452 pointer-events: none;

453 position: absolute;

454 height: 16px;

455 left: 50%;

456 top: 50%;

457 margin-top: -8px;

458 width: 80px;

459 margin-left: -40px;

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

461 transform: scale(1);

462 border-radius: 8px;

463 overflow: hidden;

464 }

465

466 .dz-preview .dz-progress .dz-upload {

467 background: #333;

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

469 position: absolute;

470 top: 0;

471 left: 0;

472 bottom: 0;

473 width: 0;

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

475 }

476

477 .dz-preview.dz-error .dz-error-message {

478 display: block;

479 }

480

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

482 opacity: 1;

483 pointer-events: auto;

484 }

485

486 .dz-preview .dz-error-message {

487 pointer-events: none;

488 z-index: 1000;

489 position: absolute;

490 display: block;

491 display: none;

492 opacity: 0;

493 transition: opacity 0.3s ease;

494 border-radius: 4px;

495 font-size: 11.5px;

496 line-height: 1.2;

497 top: 88px;

498 left: -26px;

499 width: 148px;

500 background: $negative;

501 padding: $-xs;

502 color: white;

503 }

504

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

506 content: '';

507 position: absolute;

508 top: -6px;

509 left: 64px;

510 width: 0;

511 height: 0;

512 border-left: 6px solid transparent;

513 border-right: 6px solid transparent;

514 border-bottom: 6px solid $negative;

515 }

516

517

518 .tab-container .nav-tabs {

519 text-align: left;

520 border-bottom: 1px solid #DDD;

521 margin-bottom: $-m;

522 .tab-item {

523 padding: $-s;

524 color: #666;

525 &.selected {

526 border-bottom-width: 3px;

527 }

528 }

529 }

530

531 .image-picker .none {

532 display: none;

533 }

534

535 #code-editor .CodeMirror {

536 height: 400px;

537 }

538

539 #code-editor .lang-options {

540 max-width: 400px;

541 margin-bottom: $-s;

542 a {

543 margin-right: $-xs;

544 text-decoration: underline;

545 }

546 }

547

548 @include smaller-than($m) {

549 #code-editor .lang-options {

550 max-width: 100%;

551 }

552 #code-editor .CodeMirror {

553 height: 200px;

554 }

555 }

556

557 .comment-box {

558 border: 1px solid #DDD;

559 margin-bottom: $-s;

560 border-radius: 3px;

561 .content {

562 padding: $-s;

563 font-size: 0.666em;

564 p, ul, ol {

565 font-size: $fs-m;

566 margin: .5em 0;

567 }

568 }

569 .reply-row {

570 padding: $-xs $-s;

571 }

572 }

573

574 .comment-box .header {

575 padding: $-xs $-s;

576 background-color: #f8f8f8;

577 border-bottom: 1px solid #DDD;

578 .meta {

579 img, a, span {

580 display: inline-block;

581 vertical-align: top;

582 }

583 a, span {

584 padding: $-xxs 0 $-xxs 0;

585 line-height: 1.6;

586 }

587 a { color: #666; }

588 span {

589 color: #888;

590 padding-left: $-xxs;

591 }

592 }

593 .text-muted {

594 color: #999;

595 }

596 }