src/wolnelektury/static/2022/styles/layout/_text.scss

   1 #global-progress {
   2     position: sticky;
   3     top: 0;
   4     background: white;
   5     z-index: 1;
   6     border-bottom: 1px solid #F2F2F2;
   7
   8     .progress-text {
   9         line-height: 24px;
  10         padding: 4px;
  11         color: #083F4D;
  12         font-size: 16px;
  13         .progress-text-value {
  14             font-weight: 600;
  15         }
  16     }
  17
  18     .bar {
  19         display: flex;
  20         height: 18px;
  21         gap: 4px;
  22         padding: 4px;
  23
  24         .piece {
  25             position: relative;
  26             background: #F2F2F2;
  27             overflow: hidden;
  28             border-radius: 2px;
  29
  30             .filled {
  31                 position: absolute;
  32                 left: 0;
  33                 top: 0;
  34                 bottom: 0;
  35                 background: #92BD39;
  36             }
  37         }
  38     }
  39 }
  40
  41 .l-text_toolbar {
  42     display: flex;
  43     gap: 16px;
  44     margin-right: -7px;
  45     position: relative;
  46     a {
  47         img {
  48             display: block;
  49         }
  50     }
  51
  52     .box {
  53         z-index: 5;
  54     }
  55 }
  56
  57 #main-text {
  58     position: relative;
  59     margin-bottom: 30px;
  60     .text_next-book {
  61         position: absolute;
  62         right: 0;
  63         top: 0;
  64     }
  65     .text_prev-book {
  66         position: absolute;
  67         left: 0;
  68         top: 0;
  69     }
  70     .main-text-body {
  71         margin: 16px;
  72         @include rwd($break-wide) {
  73             width: 717px;
  74             margin: 0 auto;
  75         }
  76
  77         color: #333333;
  78
  79         font-family: "Source Serif Pro";
  80         font-size: 18px;
  81         line-height: 28px;
  82     }
  83 }
  84
  85
  86 #toc {
  87     display: none;
  88
  89
  90 }
  91
  92 #heretoc {
  93     margin-top: .5em;
  94
  95     // Workaround for missing li's.
  96     ol a {
  97         line-height: 30px;
  98     }
  99 }
 100
 101 #menu .box {
 102     display: none;
 103     position: absolute;
 104     right: 0px;
 105     top: 50px;
 106     width: 80vw;
 107     max-width: 600px;
 108     height: 300px;
 109     padding: 30px;
 110     overflow: auto;
 111     background: #FFE79E;
 112     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
 113     border-radius: 10px;
 114 }
 115 #menu #wltoc {
 116     right: 0px;
 117     width: 50vw;
 118     height: 300px;
 119 }
 120 #menu #settings {
 121     width: 200px;
 122     height: 200px;
 123 }
 124 #themes {
 125     display: none;
 126 }
 127 #other-text {
 128     display: none;
 129 }
 130 #reference-box {
 131     display: none;
 132     width: 300px;
 133     position: fixed;
 134     top: 0;
 135     right: 0;
 136     z-index:100;
 137     background: #eee;
 138
 139     img {
 140         margin: 0;
 141     }
 142
 143     #reference-map {
 144         height:400px;
 145         width: 300px;
 146         @media screen and (max-height: 800px) {
 147             height: 300px;
 148         }
 149     }
 150     #reference-images {
 151         padding: 10px;
 152         white-space: nowrap;
 153         overflow-x: auto;
 154         a {
 155             display: inline-block;
 156             vertical-align: middle;
 157             margin: 0 10px 0 0;
 158             img {
 159                 width: auto;
 160                 border: 5px solid white;
 161                 box-shadow: 4px 4px 4px #666;
 162                 max-width: 240px;
 163                 max-height: 200px;
 164             }
 165         }
 166     }
 167     #reference-link {
 168         display: block;
 169         font-size: 1.5em;
 170         padding: 10px;
 171     }
 172
 173     #reference-close {
 174         font-size: 30px;
 175         position: absolute;
 176         top: 10px;
 177         right: 10px;
 178         z-index: 1000;
 179         font-family: sans-serif;
 180         color: black;
 181     }
 182 }
 183
 184
 185
 186
 187 #menu #info {
 188     padding-top: 0;
 189     display: none;
 190     position: absolute;
 191     right: 0px;
 192     top: 50px;
 193     width: 80vw;
 194     height: 300px;
 195     padding: 0px 30px 30px;
 196     overflow: auto;
 197     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
 198     border-radius: 10px;
 199
 200 }
 201 #annoy-stubs {
 202     display: none;
 203 }
 204 #nota_red {
 205     display: none;
 206 }
 207
 208
 209 .l-text_header {
 210     margin-top: 50px;
 211     display: flex;
 212     gap: 60px;
 213
 214     .l-text_header_cover {
 215         width: 167px;
 216         height: 236px;
 217
 218     }
 219     .l-text_header__content {
 220         flex-grow: 1;
 221     }
 222
 223     .l-text_header_author {
 224         margin: 0;
 225         font-weight: 600;
 226         font-size: 21.5px;
 227         line-height: 1.4;
 228         a {
 229             color: #007880;
 230         }
 231     }
 232     .l-text_header_title {
 233         margin: 0;
 234         font-weight: 700;
 235         font-size: 37px;
 236         line-height: 1.3;
 237         a {
 238             color: #083F4D;
 239         }
 240     }
 241
 242 }
 243
 244
 245 #main-text #book-text {
 246
 247     body {
 248         font-size: 16px;
 249         font-family: Gelasio, Georgia, "Times New Roman", serif;
 250         line-height: 1.5em;
 251         margin: 0;
 252     }
 253
 254 a {
 255     color: blue;
 256     text-decoration: none;
 257 }
 258
 259 img {
 260     max-width: 37.5rem;
 261     margin-top: 1em;
 262     width: 100%;
 263 }
 264 .animacja {
 265     margin-top: 1em;
 266 }
 267 .animacja img {
 268     margin-top: 0;
 269 }
 270
 271 /* ================================== */
 272 /* = Header with logo and menu      = */
 273 /* ================================== */
 274
 275
 276 /* =================================================== */
 277 /* = Common elements: headings, paragraphs and lines = */
 278 /* =================================================== */
 279 h1 {
 280     font-size: 3em;
 281     margin: 1.5em 0;
 282     text-align: center;
 283     line-height: 1.5em;
 284     font-weight: bold;
 285 }
 286
 287 h2 {
 288     font-size: 2em;
 289     margin: 1.5em 0 0;
 290     font-weight: bold;
 291     line-height: 1.5em;
 292 }
 293
 294 h3, .subtitle2 {
 295     font-size: 1.5em;
 296     margin: 1.5em 0 0;
 297     font-weight: normal;
 298     line-height: 1.5em;
 299 }
 300
 301 h4, .subtitle3 {
 302     font-size: 1em;
 303     margin: 1.5em 0 0;
 304     line-height: 1.5em;
 305 }
 306
 307 .subtitle4 {
 308     font-weight: bold;
 309 }
 310
 311 p {
 312     margin: 0;
 313 }
 314
 315 /* ======================== */
 316 /* = Footnotes and themes = */
 317 /* ======================== */
 318
 319 .annotation {
 320     font-style: normal;
 321     font-weight: normal;
 322     font-size: .75em;
 323     padding-left: 2px;
 324     position: relative;
 325     top: -4px;
 326     user-select: none;
 327     -webkit-user-select: none;
 328     -moz-user-select: none;
 329     -ms-user-select: none;
 330 }
 331
 332 #footnotes {
 333     margin-top: 3em;
 334 }
 335
 336 #footnotes .annotation {
 337     display: block;
 338     float: left;
 339     width: 2.5em;
 340     clear: both;
 341     user-select: auto;
 342     -webkit-user-select: text;
 343     -moz-user-select: text;
 344     -ms-user-select: text;
 345 }
 346
 347 #footnotes > div {
 348     margin: 1.5em 0 0 0;
 349 }
 350
 351 #footnotes p, #footnotes ul, #footnotes .stanza {
 352     margin-left: 2.5em;
 353     font-size: 0.875em;
 354 }
 355
 356 #footnotes .permalink {
 357     font-size: .75em;
 358 }
 359
 360 blockquote {
 361     font-size: 0.875em;
 362 }
 363
 364 /* ============= */
 365 /* = Numbering = */
 366 /* ============= */
 367 .verse, .paragraph {
 368     position:relative;
 369     padding: 0 48px 0 0;
 370 }
 371 /*.anchor {
 372     position: absolute;
 373     margin: -0.25em -0.5em;
 374     color: #777;
 375     font-size: 12px;
 376     text-align: center;
 377     padding: 0.25em 0.5em;
 378     line-height: 1.5em;
 379 }*/
 380
 381
 382 /* =================== */
 383 /* = Custom elements = */
 384 /* =================== */
 385 span.author {
 386     font-size: 0.5em;
 387     display: block;
 388     line-height: 1.5em;
 389     margin-bottom: 0.25em;
 390 }
 391
 392 span.collection {
 393     font-size: 0.375em;
 394     display: block;
 395     line-height: 1.5em;
 396     margin-bottom: -0.25em;
 397 }
 398
 399 span.subtitle {
 400     font-size: 0.5em;
 401     display: block;
 402     line-height: 1.5em;
 403     margin-top: -0.25em;
 404 }
 405
 406 span.translator {
 407     font-size: 0.375em;
 408     display: block;
 409     line-height: 1.5em;
 410     margin-top: 0.25em;
 411 }
 412
 413 div.didaskalia {
 414     font-style: italic;
 415     margin: 0.5em 0 0 1.5em;
 416 }
 417
 418 div.kwestia {
 419     margin: 0.5em 0 0;
 420 }
 421
 422 div.stanza {
 423     margin: 1.5em 0;
 424 }
 425
 426 div.kwestia div.stanza {
 427     margin: 0;
 428 }
 429
 430 .verse-p {
 431     padding-left: 1em;
 432 }
 433 .verse-indent {
 434     padding-left: 1em;
 435 }
 436 .verse-right { text-align: right; }
 437 .verse-center { text-align: center; }
 438
 439 .verse-indent.verse-indent-2 { padding-left: 2em; }
 440 .verse-indent.verse-indent-3 { padding-left: 3em; }
 441 .verse-indent.verse-indent-4 { padding-left: 4em; }
 442 .verse-indent.verse-indent-5 { padding-left: 5em; }
 443 .verse-indent.verse-indent-6 { padding-left: 6em; }
 444 .verse-indent.verse-indent-7 { padding-left: 7em; }
 445 .verse-indent.verse-indent-8 { padding-left: 8em; }
 446 .verse-indent.verse-indent-9 { padding-left: 9em; }
 447 .verse-indent.verse-indent-10 { padding-left: 10em; }
 448 .verse-indent.verse-indent-11 { padding-left: 11em; }
 449 .verse-indent.verse-indent-12 { padding-left: 12em; }
 450 .verse-cont { padding-left: 12em; }
 451
 452 @media screen and (max-width: 40em) {
 453     .verse-indent { padding-left: 4%; }
 454     .verse-indent.verse-indent-2 { padding-left: 8%; }
 455     .verse-indent.verse-indent-3 { padding-left: 12%; }
 456     .verse-indent.verse-indent-4 { padding-left: 16%; }
 457     .verse-indent.verse-indent-5 { padding-left: 20%; }
 458     .verse-indent.verse-indent-6 { padding-left: 24%; }
 459     .verse-indent.verse-indent-7 { padding-left: 28%; }
 460     .verse-indent.verse-indent-8 { padding-left: 32%; }
 461     .verse-indent.verse-indent-9 { padding-left: 36%; }
 462     .verse-indent.verse-indent-10 { padding-left: 40%; }
 463     .verse-indent.verse-indent-11 { padding-left: 44%; }
 464     .verse-indent.verse-indent-12 { padding-left: 48%; }
 465     .verse-cont { padding-left: 48%; }
 466 }
 467
 468
 469 p.paragraph {
 470     text-align: justify;
 471     margin: 0;
 472     text-indent: 1.5em;
 473 }
 474
 475 .motto {
 476     text-align: justify;
 477     font-style: italic;
 478     margin: 1.5em 0 0;
 479 }
 480
 481 p.motto_podpis {
 482     font-size: 0.875em;
 483     text-align: right;
 484     margin-bottom: 1.5em;
 485 }
 486
 487 div.fragment {
 488     border-bottom: 0.1em solid #999;
 489     padding-bottom: 1.5em;
 490 }
 491
 492 div.note p, div.dedication p, div.note p.paragraph, div.dedication p.paragraph {
 493     text-align: right;
 494     font-style: italic;
 495 }
 496
 497 div.frame {
 498     border: 1px darkgray solid;
 499     padding: 1em;
 500     margin-top: 1em;
 501     margin-bottom: 1em;
 502 }
 503
 504 hr.spacer {
 505     height: 3em;
 506     visibility: hidden;
 507 }
 508
 509 hr.spacer-line {
 510     margin: 1.5em 0;
 511     border: none;
 512     border-bottom: 0.1em solid #000;
 513 }
 514
 515 p.spacer-asterisk {
 516     padding: 0;
 517     margin: 1.5em 0;
 518     text-align: center;
 519 }
 520
 521 div.person-list ol {
 522     list-style: none;
 523     padding: 0 0 0 1.5em;
 524 }
 525
 526 p.place-and-time {
 527     font-style: italic;
 528 }
 529
 530 em.math, em.foreign-word, em.book-title, em.didaskalia {
 531     font-style: italic;
 532 }
 533
 534 em.author-emphasis {
 535     letter-spacing: 0.1em;
 536 }
 537
 538 em.person {
 539     font-style: normal;
 540     font-variant: small-caps;
 541 }
 542
 543 em.wieksze-odstepy {
 544     font-style: normal;
 545     word-spacing: 1em;
 546 }
 547
 548 .verse:after {
 549     content: "\feff";
 550 }
 551
 552 table {
 553     border-collapse: collapse;
 554     width: 100%;
 555 }
 556
 557 table.border td, table.border th {
 558     border: 1px solid black;
 559     vertical-align: top;
 560 }
 561
 562
 563 .anchor {
 564     /* Show line numbers. */
 565     float: left;
 566     clear: left;
 567     font-size: .8em;
 568     margin-left: -40px;
 569     width: 36px;
 570     height: auto;
 571     padding: 2px;
 572     text-align: center;
 573     color: #ccc;
 574     user-select: none;
 575     -webkit-user-select: none;
 576     -moz-user-select: none;
 577     -ms-user-select: none;
 578 }
 579
 580
 581
 582 .theme-begin {
 583     font-size: .9em;
 584     position: relative;
 585     float: right;
 586     margin-bottom: 8px;
 587     clear: both;
 588     line-height: 1.5em;
 589     text-align: left;
 590
 591     font-style: normal;
 592     font-weight: normal;
 593     font-variant: normal;
 594     letter-spacing: 0;
 595     text-transform: none;
 596     text-decoration: none;
 597     user-select: none;
 598     -webkit-user-select: none;
 599     -moz-user-select: none;
 600     -ms-user-select: none;
 601
 602     margin-right: -227px;
 603     width: 170px;
 604     text-indent: 0;
 605     color: inherit;
 606     padding-left: 12px;
 607     border-left: 1px solid #333;
 608 }
 609
 610
 611 a.reference.interesting:after {
 612     content: url('../images/pin.svg');
 613     padding: 3px;
 614 }
 615 }
 616
 617
 618
 619
 620 #menu {
 621 #wltoc ol, #themes ol, #objects ol {
 622     list-style: none;
 623     padding: 0;
 624     margin: 0;
 625 }
 626 #wltoc ol {
 627   padding-left: 1.5em;
 628 }
 629
 630 #wltoc ol ol {
 631     padding: 0 0 1.5em 1.5em;
 632     margin: 0;
 633 }
 634
 635 #wltoc ol ol li {
 636     font-weight: normal;
 637 }
 638
 639 #wltoc h2 {
 640     display: none;
 641 }
 642
 643 #wltoc .anchor {
 644     float: none;
 645     margin: 0;
 646     font-size: 16px;
 647     position: inherit;
 648 }
 649
 650
 651 #info .sponsors img {
 652     margin-bottom: 1em;
 653 }
 654 }
 655
 656
 657 #main-text {
 658     #annotation-box {
 659         display: none;
 660         position: fixed;
 661
 662         .pointer-bottom {
 663             transform: rotate(45deg);
 664             left: 27.5px;
 665             bottom: -6px;
 666             width: 12px;
 667             height: 12px;
 668             position: absolute;
 669
 670                 display: block;
 671                 width: 12px;
 672                 height: 12px;
 673                 position: absolute;
 674                 z-index: 1;
 675                 border-radius: 0px 0px 2px 0px;
 676                 background: var(--white-100, #FFF);
 677                 border: 1px solid var(--teal-700, #007880);
 678                 display: block;
 679             }
 680         .pointer-top {
 681             left: 27.5px;
 682             bottom: -5px;
 683             transform: rotate(45deg);
 684             display: block;
 685             width: 12px;
 686             height: 12px;
 687             position: absolute;
 688             z-index: 3;
 689             border-radius: 0px 0px 2px 0px;
 690             background: #fff;
 691             display: block;
 692         }
 693
 694         #annotation {
 695             max-width: 470px;
 696             position: relative;
 697             z-index: 2;
 698             background: white;
 699
 700             padding: 20px;
 701             box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
 702             border: 1px solid #007880;
 703             border-radius: 6px;
 704
 705             @include rwd($break-wide) {
 706             }
 707         }
 708
 709
 710         #annotation-content {
 711             max-height: 138px;
 712             overflow-y: scroll;
 713             color: var(--black-900, #333);
 714             leading-trim: both;
 715             text-edge: cap;
 716             font-variant-numeric: oldstyle-nums proportional-nums;
 717             /* Czytnik/Desktop/p read */
 718             font-family: "Source Serif Pro";
 719             font-size: 18px;
 720             font-style: normal;
 721             font-weight: 400;
 722             line-height: 28px; /* 155.556% */
 723         }
 724
 725         #footnote-link {
 726             display: block;
 727             margin-top: 16px;
 728             text-align: right;
 729         }
 730     }
 731
 732
 733     #qbox {
 734         display: none;
 735         position: fixed;
 736         padding: 4px;
 737         border: 1px solid #007880;
 738         border-radius: 22px;
 739         background: white;
 740         box-shadow: 6px 6px 10px 0px rgba(0, 120, 128, 0.35);
 741
 742         &.copied {
 743             .content:after {
 744                 position: absolute;
 745                 top: 0;
 746                 bottom: 0;
 747                 left: 0;
 748                 right: 0;
 749                 content: "skopiowane";
 750                 display: flex;
 751                 background: white;
 752                 color: black;
 753                 justify-content: center;
 754                 align-items: center;
 755                 border-radius: 22px;
 756             }
 757         }
 758
 759         .content {
 760             overflow: hidden;
 761             display: flex;
 762             a {
 763                 width: 70px;
 764                 line-height: 44px;
 765                 text-align: center;
 766                 border-left: 1px solid #BBF6FA;
 767
 768                 &:nth-child(1) {
 769                     border-left: none;
 770                 }
 771
 772                 img {
 773                     vertical-align: middle;
 774                     height: 22px;
 775                 }
 776             }
 777         }
 778
 779         .pointer-bottom {
 780             transform: rotate(45deg);
 781             left: 128px;
 782             top: -6px;
 783             width: 12px;
 784             height: 12px;
 785             position: absolute;
 786
 787             display: block;
 788             width: 12px;
 789             height: 12px;
 790             position: absolute;
 791             z-index: 1;
 792             border-radius: 0px 0px 2px 0px;
 793             background: var(--white-100, #FFF);
 794             border: 1px solid var(--teal-700, #007880);
 795             display: block;
 796         }
 797         .pointer-top {
 798             left: 128px;
 799             top: -5px;
 800             transform: rotate(45deg);
 801             display: block;
 802             width: 12px;
 803             height: 12px;
 804             position: absolute;
 805             z-index: 3;
 806             border-radius: 0px 0px 2px 0px;
 807             background: #fff;
 808             display: block;
 809         }
 810
 811     }
 812 }
 813
 814
 815
 816 .zakladka {
 817     display: none;
 818     position: absolute;
 819     //z-index: 70;
 820     width: 40px;
 821     height: 40px;
 822     .icon {
 823         width: 40px;
 824         height: 40px;
 825         display: flex;
 826         align-items: center;
 827         justify-content: center;
 828         cursor: pointer;
 829         .icon-exists, .icon-note {display: none;}
 830         img {
 831         }
 832     }
 833
 834     #zakladka-box {
 835         padding: 20px;
 836         width: 270px;
 837         border: 1px solid #007880;
 838         border-radius: 8px;
 839         box-shadow: 6px 6px 10px 0px rgba(0, 120, 128, 0.35);
 840         background: #E1F1F2;
 841         position: relative;
 842         left: -225px;
 843         z-index: 3;
 844         @include rwd($break-wide) {
 845             left: -12px;
 846         }
 847
 848         .pointer-bottom {
 849             transform: rotate(45deg);
 850             left: 238px;
 851             top: -7px;
 852             width: 12px;
 853             height: 12px;
 854             position: absolute;
 855             box-sizing: border-box;
 856
 857             display: block;
 858             width: 12px;
 859             height: 12px;
 860             position: absolute;
 861             z-index: 1;
 862             border-radius: 0px 0px 2px 0px;
 863             background: var(--white-100, #E1F1F2);
 864             border: 1px solid var(--teal-700, #007880);
 865             display: block;
 866
 867             @include rwd($break-wide) {
 868                 left: 25px;
 869             }
 870         }
 871         .pointer-top {
 872             left: 238px;
 873             top: -5px;
 874             transform: rotate(45deg);
 875             display: block;
 876             width: 12px;
 877             height: 12px;
 878             position: absolute;
 879             z-index: 3;
 880             border-radius: 0px 0px 2px 0px;
 881             background: #E1F1F2;
 882             display: block;
 883             @include rwd($break-wide) {
 884                 left: 25px;
 885             }
 886         }
 887
 888
 889         .content {
 890             display: flex;
 891             align-items: flex-start;
 892             flex-direction: column;
 893             gap: 12px;
 894             .zakladka-tool {
 895                 color: #333;
 896                 line-height: 30px;
 897                 font-family: "Source Sans Pro";
 898                 font-size: 18px;
 899                 font-style: normal;
 900                 font-weight: 400;
 901                 cursor: pointer;
 902                 padding-left: 38px;
 903
 904                 &:before {
 905                     height: 30px;
 906                     width: 30px;
 907                     display: inline-block;
 908                     vertical-align: bottom;
 909                     margin-left: -38px;
 910                     margin-right: 8px;
 911                 }
 912
 913                 &.zakladka-tool_zakladka_delete:before {
 914                     content: url('/static/2022/images/zakladka-usun.svg');
 915                 }
 916                 &.zakladka-tool_zakladka:before {
 917                     content: url('/static/2022/images/add-icon.svg');
 918                 }
 919                 &.zakladka-tool_sluchaj:before {
 920                     content: url('/static/2022/images/play-now-icon.svg');
 921                 }
 922                 &.zakladka-tool_notka:before {
 923                     content: url('/static/2022/images/add-note-icon.svg');
 924                 }
 925             }
 926             .zakladka-tool_notka_text {
 927                 display: none;
 928                 width: 100%;
 929                 position: relative;
 930                 textarea {
 931                     width: 100%;
 932
 933 display: flex;
 934 padding: 16px;
 935 justify-content: center;
 936 align-items: center;
 937 gap: 8px;
 938 flex: 1 0 0;
 939 border-radius: 6px;
 940 border: 1px solid #007880;
 941 background: #fff;
 942                 }
 943                 #notka-save, #notka-saved {
 944                     position: absolute;
 945                     top: 4px;
 946                     right: 4px;
 947                     display: none;
 948                     width: 16px;
 949                     height: 16px;
 950                 }
 951                 #notka-saved {
 952                 }
 953             }
 954             .zakladka-tool_zakladka_delete {
 955                 display: none;
 956 //                position: absolute;
 957 //                bottom: 40px;
 958 //                right: 3px;
 959 //                width: 29px;
 960 //                height: 29px;
 961 //                cursor: pointer;
 962 //                align-items: center;
 963 //                justify-content: center;
 964             }
 965         }
 966     }
 967
 968
 969
 970     &.zakladka-exists {
 971         .icon-empty {display: none;}
 972         .icon-exists {display: flex;}
 973         #zakladka-box .content {
 974             .zakladka-tool_notka_text {display: block;}
 975             .zakladka-tool_zakladka_delete {display: block;}
 976         }
 977     }
 978     &.zakladka-note {
 979         .icon-empty {display: none;}
 980         .icon-note {display: flex;}
 981         #zakladka-box .content {
 982             .zakladka-tool_notka_text {display: block;}
 983             .zakladka-tool_zakladka_delete {display: block;}
 984         }
 985     }
 986 }
 987
 988
 989
 990 /*
 991 .zakladka-tool_sluchaj {display: none;}
 992 .has-sync .zakladka-tool_sluchaj {display: block;}
 993 */
 994
 995 #book-text-buttons {
 996     display: none;
 997     margin-top: 16px;
 998     border: 1px solid #D5ECED;
 999     border-radius: 6px;
1000     padding: 8px;
1001     max-width: 717px;
1002
1003
1004     a {
1005         display: inline-block;
1006         padding: 20px 30px;
1007         font-weight: bold;
1008         cursor: pointer;
1009         border-radius: 6px;
1010         &:hover {
1011             background: #E1F1F2;
1012         }
1013         i {
1014             margin-right: 10px;
1015             &.icon-play {
1016                 color: white;
1017                 background: #018189;
1018                 display: inline-block;
1019                 padding: 10px 8px 10px 12px;
1020                 border-radius: 100%;
1021             }
1022         }
1023     }
1024 }