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 display: block;

13 cursor: pointer;

14 max-width: 480px;

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

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

17 i, span {

18 display: table-cell;

19 }

20 i {

21 font-size: 2em;

22 padding-right: $-l;

23 }

24 span {

25 vertical-align: middle;

26 }

27 &.pos {

28 background-color: $positive;

29 color: #EEE;

30 }

31 &.neg {

32 background-color: $negative;

33 color: #EEE;

34 }

35 &.warning {

36 background-color: $secondary;

37 color: #EEE;

38 }

39 &.showing {

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

41 }

42 }

44 [chapter-toggle] {

45 cursor: pointer;

46 margin: 0;

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

48 user-select: none;

49 i.zmdi-caret-right {

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

51 transform: rotate(0deg);

52 transform-origin: 25% 50%;

53 }

54 &.open {

55 //margin-bottom: 0;

56 }

57 &.open i.zmdi-caret-right {

58 transform: rotate(90deg);

59 }

60 }

62 [overlay] {

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

64 position: fixed;

65 z-index: 95536;

66 width: 100%;

67 height: 100%;

68 min-width: 100%;

69 min-height: 100%;

70 top: 0;

71 left: 0;

72 right: 0;

73 bottom: 0;

74 display: flex;

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 }

106

107 .corner-button {

108 position: absolute;

109 top: 0;

110 right: 0;

111 margin: 0;

112 height: 40px;

113 border-radius: 0;

114 box-shadow: none;

115 }

116

117 .popup-header, .popup-footer {

118 display: block !important;

119 position: relative;

120 height: 40px;

121 flex: none !important;

122 .popup-title {

123 color: #FFF;

124 padding: 8px $-m;

125 }

126 }

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

128 height: 444px;

129 min-height: 444px;

130 }

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

132 margin: 0;

133 }

134

135 .image-manager-body {

136 min-height: 70vh;

137 }

138

139 .dropzone-container {

140 position: relative;

141 border: 3px dashed #DDD;

142 }

143

144 .image-manager-list .image {

145 display: block;

146 position: relative;

147 border-radius: 0;

148 float: left;

149 margin: 0;

150 cursor: pointer;

151 width: (100%/6);

152 height: auto;

153 border: 1px solid #DDD;

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

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

156 overflow: hidden;

157 &.selected {

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

159 border: 1px solid #444;

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

161 }

162 img {

163 width: 100%;

164 max-width: 100%;

165 display: block;

166 }

167 .image-meta {

168 position: absolute;

169 width: 100%;

170 bottom: 0;

171 left: 0;

172 color: #EEE;

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

174 font-size: 10px;

175 padding: 3px 4px;

176 span {

177 display: block;

178 }

179 }

180 @include smaller-than($xl) {

181 width: (100%/4);

182 }

183 @include smaller-than($m) {

184 .image-meta {

185 display: none;

186 }

187 }

188 }

189

190 #image-manager .load-more {

191 display: block;

192 text-align: center;

193 background-color: #EEE;

194 padding: $-s $-m;

195 color: #AAA;

196 clear: both;

197 font-size: 20px;

198 cursor: pointer;

199 font-style: italic;

200 }

201

202 .image-manager-sidebar {

203 width: 300px;

204 margin-left: 1px;

205 padding: $-m $-l;

206 overflow-y: auto;

207 border-left: 1px solid #DDD;

208 .dropzone-container {

209 margin-top: $-m;

210 }

211 }

212

213 .image-manager-list {

214 overflow-y: scroll;

215 flex: 1;

216 }

217

218 .image-manager-content {

219 display: flex;

220 flex-direction: column;

221 flex: 1;

222 .container {

223 width: 100%;

224 }

225 .full-tab {

226 text-align: center;

227 }

228 }

229

230 // Dropzone

231 /*

232 * The MIT License

234 */

235 .dz-message {

236 font-size: 1.2em;

237 line-height: 1.1;

238 font-style: italic;

239 color: #aaa;

240 text-align: center;

241 cursor: pointer;

242 padding: $-l $-m;

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

244 }

245

246 .dz-drag-hover .dz-message {

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

248 color: #EEE;

249 }

250

251 @keyframes passing-through {

252 0% {

253 opacity: 0;

254 transform: translateY(40px);

255 }

256 30%, 70% {

257 opacity: 1;

258 transform: translateY(0px);

259 }

260 100% {

261 opacity: 0;

262 transform: translateY(-40px);

263 }

264 }

265

266 @keyframes slide-in {

267 0% {

268 opacity: 0;

269 transform: translateY(40px);

270 }

271 30% {

272 opacity: 1;

273 transform: translateY(0px);

274 }

275 }

276

277 @keyframes pulse {

278 0% {

279 transform: scale(1);

280 }

281 10% {

282 transform: scale(1.1);

283 }

284 20% {

285 transform: scale(1);

286 }

287 }

288

289 .dropzone, .dropzone * {

290 box-sizing: border-box;

291 }

292

293 .dz-preview {

294 position: relative;

295 display: inline-block;

296 vertical-align: top;

297 margin: 12px;

298 min-height: 80px;

299 }

300

301 .dz-preview:hover {

302 z-index: 1000;

303 }

304

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

306 opacity: 1;

307 }

308

309 .dz-preview.dz-file-preview .dz-image {

310 border-radius: 4px;

311 background: #999;

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

313 }

314

315 .dz-preview.dz-file-preview .dz-details {

316 opacity: 1;

317 }

318

319 .dz-preview.dz-image-preview {

320 background: white;

321 }

322

323 .dz-preview.dz-image-preview .dz-details {

324 transition: opacity 0.2s linear;

325 }

326

327 .dz-preview .dz-remove {

328 font-size: 14px;

329 text-align: center;

330 display: block;

331 cursor: pointer;

332 border: none;

333 }

334

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

336 text-decoration: underline;

337 }

338

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

340 opacity: 1;

341 }

342

343 .dz-preview .dz-details {

344 z-index: 20;

345 position: absolute;

346 top: 0;

347 left: 0;

348 opacity: 0;

349 font-size: 10px;

350 min-width: 100%;

351 max-width: 100%;

352 padding: 6px 3px;

353 text-align: center;

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

355 line-height: 150%;

356 }

357

358 .dz-preview .dz-details .dz-size {

359 margin-bottom: 0.5em;

360 font-size: 12px;

361 }

362

363 .dz-preview .dz-details .dz-filename {

364 white-space: nowrap;

365 }

366

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

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

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

370 }

371

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

373 overflow: hidden;

374 text-overflow: ellipsis;

375 }

376

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

378 border: 1px solid transparent;

379 }

380

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

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

383 padding: 0 0.4em;

384 border-radius: 3px;

385 }

386

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

388 filter: blur(8px);

389 }

390

391 .dz-preview .dz-image {

392 border-radius: 4px;

393 overflow: hidden;

394 width: 80px;

395 height: 80px;

396 position: relative;

397 display: block;

398 z-index: 10;

399 }

400

401 .dz-preview .dz-image img {

402 display: block;

403 }

404

405 .dz-preview.dz-success .dz-success-mark {

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

407 }

408

409 .dz-preview.dz-error .dz-error-mark {

410 opacity: 1;

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

412 }

413

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

415 pointer-events: none;

416 opacity: 0;

417 z-index: 500;

418 position: absolute;

419 display: block;

420 top: 50%;

421 left: 50%;

422 margin-left: -27px;

423 margin-top: -27px;

424 }

425

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

427 display: block;

428 width: 54px;

429 height: 54px;

430 }

431

432 .dz-preview.dz-processing .dz-progress {

433 opacity: 1;

434 transition: all 0.2s linear;

435 }

436

437 .dz-preview.dz-complete .dz-progress {

438 opacity: 0;

439 transition: opacity 0.4s ease-in;

440 }

441

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

443 animation: pulse 6s ease infinite;

444 }

445

446 .dz-preview .dz-progress {

447 opacity: 1;

448 z-index: 1000;

449 pointer-events: none;

450 position: absolute;

451 height: 16px;

452 left: 50%;

453 top: 50%;

454 margin-top: -8px;

455 width: 80px;

456 margin-left: -40px;

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

458 transform: scale(1);

459 border-radius: 8px;

460 overflow: hidden;

461 }

462

463 .dz-preview .dz-progress .dz-upload {

464 background: #333;

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

466 position: absolute;

467 top: 0;

468 left: 0;

469 bottom: 0;

470 width: 0;

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

472 }

473

474 .dz-preview.dz-error .dz-error-message {

475 display: block;

476 }

477

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

479 opacity: 1;

480 pointer-events: auto;

481 }

482

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

484 pointer-events: none;

485 z-index: 1000;

486 position: absolute;

487 display: block;

488 display: none;

489 opacity: 0;

490 transition: opacity 0.3s ease;

491 border-radius: 4px;

492 font-size: 11.5px;

493 line-height: 1.2;

494 top: 88px;

495 left: -26px;

496 width: 148px;

497 background: $negative;

498 padding: $-xs;

499 color: white;

500 }

501

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

503 content: '';

504 position: absolute;

505 top: -6px;

506 left: 64px;

507 width: 0;

508 height: 0;

509 border-left: 6px solid transparent;

510 border-right: 6px solid transparent;

511 border-bottom: 6px solid $negative;

512 }

513

514

515 .tab-container .nav-tabs {

516 text-align: left;

517 border-bottom: 1px solid #DDD;

518 margin-bottom: $-m;

519 .tab-item {

520 padding: $-s;

521 color: #666;

522 &.selected {

523 border-bottom-width: 3px;

524 }

525 }

526 }

527

528 .image-picker .none {

529 display: none;

530 }

531

532 #code-editor .CodeMirror {

533 height: 400px;

534 }

535

536 #code-editor .lang-options {

537 max-width: 400px;

538 margin-bottom: $-s;

539 a {

540 margin-right: $-xs;

541 text-decoration: underline;

542 }

543 }

544

545 .comment-box {

546 border: 1px solid #DDD;

547 margin-bottom: $-s;

548 border-radius: 3px;

549 .content {

550 padding: $-s;

551 font-size: 0.666em;

552 p, ul, ol {

553 font-size: $fs-m;

554 margin: .5em 0;

555 }

556 }

557 .reply-row {

558 padding: $-xs $-s;

559 }

560 }

561

562 .comment-box .header {

563 padding: $-xs $-s;

564 background-color: #f8f8f8;

565 border-bottom: 1px solid #DDD;

566 .meta {

567 img, a, span {

568 display: inline-block;

569 vertical-align: top;

570 }

571 a, span {

572 padding: $-xxs 0 $-xxs 0;

573 line-height: 1.6;

574 }

575 a { color: #666; }

576 span {

577 color: #888;

578 padding-left: $-xxs;

579 }

580 }

581 .text-muted {

582 color: #999;

583 }

584 }