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 1em 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 p.paragraph.werset {
 475     text-indent: 0;
 476     margin-bottom: 1em;
 477 }
 478
 479 .motto {
 480     text-align: justify;
 481     font-style: italic;
 482     margin: 1.5em 0 0;
 483 }
 484
 485 p.motto_podpis {
 486     font-size: 0.875em;
 487     text-align: right;
 488     margin-bottom: 1.5em;
 489 }
 490
 491 div.fragment {
 492     border-bottom: 0.1em solid #999;
 493     padding-bottom: 1.5em;
 494 }
 495
 496 div.note p, div.dedication p, div.note p.paragraph, div.dedication p.paragraph {
 497     text-align: right;
 498     font-style: italic;
 499 }
 500
 501 div.frame {
 502     border: 1px darkgray solid;
 503     padding: 1em;
 504     margin-top: 1em;
 505     margin-bottom: 1em;
 506 }
 507
 508 hr.spacer {
 509     height: 3em;
 510     visibility: hidden;
 511 }
 512
 513 hr.spacer-line {
 514     margin: 1.5em 0;
 515     border: none;
 516     border-bottom: 0.1em solid #000;
 517 }
 518
 519 p.spacer-asterisk {
 520     padding: 0;
 521     margin: 1.5em 0;
 522     text-align: center;
 523 }
 524
 525 div.person-list ol {
 526     list-style: none;
 527     padding: 0 0 0 1.5em;
 528 }
 529
 530 p.place-and-time {
 531     font-style: italic;
 532 }
 533
 534 em.math, em.foreign-word, em.book-title, em.didaskalia {
 535     font-style: italic;
 536 }
 537 em.foreign-word.foreign-word-protected {
 538     font-style: normal;
 539 }
 540
 541 em.author-emphasis {
 542     letter-spacing: 0.1em;
 543 }
 544
 545 em.person {
 546     font-style: normal;
 547     font-variant: small-caps;
 548 }
 549
 550 em.wieksze-odstepy {
 551     font-style: normal;
 552     word-spacing: 1em;
 553 }
 554
 555 .verse:after {
 556     content: "\feff";
 557 }
 558
 559 table {
 560     border-collapse: collapse;
 561     width: 100%;
 562 }
 563
 564 table.border td, table.border th {
 565     border: 1px solid black;
 566     vertical-align: top;
 567 }
 568
 569
 570 .anchor {
 571     /* Show line numbers. */
 572     float: left;
 573     clear: left;
 574     font-size: .8em;
 575     margin-left: -40px;
 576     width: 36px;
 577     height: auto;
 578     padding: 2px;
 579     text-align: center;
 580     color: #ccc;
 581     user-select: none;
 582     -webkit-user-select: none;
 583     -moz-user-select: none;
 584     -ms-user-select: none;
 585 }
 586
 587
 588
 589 .theme-begin {
 590     font-size: .9em;
 591     position: relative;
 592     float: right;
 593     margin-bottom: 8px;
 594     clear: both;
 595     line-height: 1.5em;
 596     text-align: left;
 597
 598     font-style: normal;
 599     font-weight: normal;
 600     font-variant: normal;
 601     letter-spacing: 0;
 602     text-transform: none;
 603     text-decoration: none;
 604     user-select: none;
 605     -webkit-user-select: none;
 606     -moz-user-select: none;
 607     -ms-user-select: none;
 608
 609     margin-right: -227px;
 610     width: 170px;
 611     text-indent: 0;
 612     color: inherit;
 613     padding-left: 12px;
 614     border-left: 1px solid #333;
 615 }
 616
 617
 618 a.reference.interesting:after {
 619     content: url('../images/pin.svg');
 620     padding: 3px;
 621 }
 622 }
 623
 624
 625
 626
 627 #menu {
 628 #wltoc ol, #themes ol, #objects ol {
 629     list-style: none;
 630     padding: 0;
 631     margin: 0;
 632 }
 633 #wltoc ol {
 634   padding-left: 1.5em;
 635 }
 636
 637 #wltoc ol ol {
 638     padding: 0 0 1.5em 1.5em;
 639     margin: 0;
 640 }
 641
 642 #wltoc ol ol li {
 643     font-weight: normal;
 644 }
 645
 646 #wltoc h2 {
 647     display: none;
 648 }
 649
 650 #wltoc .anchor {
 651     float: none;
 652     margin: 0;
 653     font-size: 16px;
 654     position: inherit;
 655 }
 656
 657
 658 #info .sponsors img {
 659     margin-bottom: 1em;
 660 }
 661 }
 662
 663
 664 #main-text {
 665     #annotation-box {
 666         display: none;
 667         position: fixed;
 668
 669         .pointer-bottom {
 670             transform: rotate(45deg);
 671             left: 27.5px;
 672             bottom: -6px;
 673             width: 12px;
 674             height: 12px;
 675             position: absolute;
 676
 677                 display: block;
 678                 width: 12px;
 679                 height: 12px;
 680                 position: absolute;
 681                 z-index: 1;
 682                 border-radius: 0px 0px 2px 0px;
 683                 background: var(--white-100, #FFF);
 684                 border: 1px solid var(--teal-700, #007880);
 685                 display: block;
 686             }
 687         .pointer-top {
 688             left: 27.5px;
 689             bottom: -5px;
 690             transform: rotate(45deg);
 691             display: block;
 692             width: 12px;
 693             height: 12px;
 694             position: absolute;
 695             z-index: 3;
 696             border-radius: 0px 0px 2px 0px;
 697             background: #fff;
 698             display: block;
 699         }
 700
 701         #annotation {
 702             max-width: 470px;
 703             position: relative;
 704             z-index: 2;
 705             background: white;
 706
 707             padding: 20px;
 708             box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
 709             border: 1px solid #007880;
 710             border-radius: 6px;
 711
 712             @include rwd($break-wide) {
 713             }
 714         }
 715
 716
 717         #annotation-content {
 718             max-height: 138px;
 719             overflow-y: scroll;
 720             color: var(--black-900, #333);
 721             leading-trim: both;
 722             text-edge: cap;
 723             font-variant-numeric: oldstyle-nums proportional-nums;
 724             /* Czytnik/Desktop/p read */
 725             font-family: "Source Serif Pro";
 726             font-size: 18px;
 727             font-style: normal;
 728             font-weight: 400;
 729             line-height: 28px; /* 155.556% */
 730
 731             em.foreign-word.foreign-word-protected {
 732                 font-style: normal;
 733             }
 734         }
 735
 736         #footnote-link {
 737             display: block;
 738             margin-top: 16px;
 739             text-align: right;
 740         }
 741     }
 742
 743
 744     #qbox {
 745         display: none;
 746         position: fixed;
 747         padding: 4px;
 748         border: 1px solid #007880;
 749         border-radius: 22px;
 750         background: white;
 751         box-shadow: 6px 6px 10px 0px rgba(0, 120, 128, 0.35);
 752
 753         &.copied {
 754             .content:after {
 755                 position: absolute;
 756                 top: 0;
 757                 bottom: 0;
 758                 left: 0;
 759                 right: 0;
 760                 content: "skopiowane";
 761                 display: flex;
 762                 background: white;
 763                 color: black;
 764                 justify-content: center;
 765                 align-items: center;
 766                 border-radius: 22px;
 767             }
 768         }
 769
 770         .content {
 771             overflow: hidden;
 772             display: flex;
 773             a {
 774                 width: 70px;
 775                 line-height: 44px;
 776                 text-align: center;
 777                 border-left: 1px solid #BBF6FA;
 778
 779                 &:nth-child(1) {
 780                     border-left: none;
 781                 }
 782
 783                 img {
 784                     vertical-align: middle;
 785                     height: 22px;
 786                 }
 787             }
 788         }
 789
 790         .pointer-bottom {
 791             transform: rotate(45deg);
 792             left: 128px;
 793             top: -6px;
 794             width: 12px;
 795             height: 12px;
 796             position: absolute;
 797
 798             display: block;
 799             width: 12px;
 800             height: 12px;
 801             position: absolute;
 802             z-index: 1;
 803             border-radius: 0px 0px 2px 0px;
 804             background: var(--white-100, #FFF);
 805             border: 1px solid var(--teal-700, #007880);
 806             display: block;
 807         }
 808         .pointer-top {
 809             left: 128px;
 810             top: -5px;
 811             transform: rotate(45deg);
 812             display: block;
 813             width: 12px;
 814             height: 12px;
 815             position: absolute;
 816             z-index: 3;
 817             border-radius: 0px 0px 2px 0px;
 818             background: #fff;
 819             display: block;
 820         }
 821
 822     }
 823 }
 824
 825
 826
 827 .zakladka {
 828     display: none;
 829     position: absolute;
 830     //z-index: 70;
 831     width: 40px;
 832     height: 40px;
 833     .icon {
 834         width: 40px;
 835         height: 40px;
 836         display: flex;
 837         align-items: center;
 838         justify-content: center;
 839         cursor: pointer;
 840         .icon-exists, .icon-note {display: none;}
 841         img {
 842         }
 843     }
 844
 845     #zakladka-box {
 846         padding: 20px;
 847         width: 270px;
 848         border: 1px solid #007880;
 849         border-radius: 8px;
 850         box-shadow: 6px 6px 10px 0px rgba(0, 120, 128, 0.35);
 851         background: #E1F1F2;
 852         position: relative;
 853         left: -225px;
 854         z-index: 3;
 855         @include rwd($break-wide) {
 856             left: -12px;
 857         }
 858
 859         .pointer-bottom {
 860             transform: rotate(45deg);
 861             left: 238px;
 862             top: -7px;
 863             width: 12px;
 864             height: 12px;
 865             position: absolute;
 866             box-sizing: border-box;
 867
 868             display: block;
 869             width: 12px;
 870             height: 12px;
 871             position: absolute;
 872             z-index: 1;
 873             border-radius: 0px 0px 2px 0px;
 874             background: var(--white-100, #E1F1F2);
 875             border: 1px solid var(--teal-700, #007880);
 876             display: block;
 877
 878             @include rwd($break-wide) {
 879                 left: 25px;
 880             }
 881         }
 882         .pointer-top {
 883             left: 238px;
 884             top: -5px;
 885             transform: rotate(45deg);
 886             display: block;
 887             width: 12px;
 888             height: 12px;
 889             position: absolute;
 890             z-index: 3;
 891             border-radius: 0px 0px 2px 0px;
 892             background: #E1F1F2;
 893             display: block;
 894             @include rwd($break-wide) {
 895                 left: 25px;
 896             }
 897         }
 898
 899
 900         .content {
 901             display: flex;
 902             align-items: flex-start;
 903             flex-direction: column;
 904             gap: 12px;
 905             .zakladka-tool {
 906                 color: #333;
 907                 line-height: 30px;
 908                 font-family: "Source Sans Pro";
 909                 font-size: 18px;
 910                 font-style: normal;
 911                 font-weight: 400;
 912                 cursor: pointer;
 913                 padding-left: 38px;
 914
 915                 &:before {
 916                     height: 30px;
 917                     width: 30px;
 918                     display: inline-block;
 919                     vertical-align: bottom;
 920                     margin-left: -38px;
 921                     margin-right: 8px;
 922                 }
 923
 924                 &.zakladka-tool_zakladka_delete:before {
 925                     content: url('/static/2022/images/zakladka-usun.svg');
 926                 }
 927                 &.zakladka-tool_zakladka:before {
 928                     content: url('/static/2022/images/add-icon.svg');
 929                 }
 930                 &.zakladka-tool_sluchaj:before {
 931                     content: url('/static/2022/images/play-now-icon.svg');
 932                 }
 933                 &.zakladka-tool_notka:before {
 934                     content: url('/static/2022/images/add-note-icon.svg');
 935                 }
 936             }
 937             .zakladka-tool_notka_text {
 938                 display: none;
 939                 width: 100%;
 940                 position: relative;
 941                 textarea {
 942                     width: 100%;
 943
 944 display: flex;
 945 padding: 16px;
 946 justify-content: center;
 947 align-items: center;
 948 gap: 8px;
 949 flex: 1 0 0;
 950 border-radius: 6px;
 951 border: 1px solid #007880;
 952 background: #fff;
 953                 }
 954                 #notka-save, #notka-saved {
 955                     position: absolute;
 956                     top: 4px;
 957                     right: 4px;
 958                     display: none;
 959                     width: 16px;
 960                     height: 16px;
 961                 }
 962                 #notka-saved {
 963                 }
 964             }
 965             .zakladka-tool_zakladka_delete {
 966                 display: none;
 967 //                position: absolute;
 968 //                bottom: 40px;
 969 //                right: 3px;
 970 //                width: 29px;
 971 //                height: 29px;
 972 //                cursor: pointer;
 973 //                align-items: center;
 974 //                justify-content: center;
 975             }
 976         }
 977     }
 978
 979
 980
 981     &.zakladka-exists {
 982         .icon-empty {display: none;}
 983         .icon-exists {display: flex;}
 984         #zakladka-box .content {
 985             .zakladka-tool_notka_text {display: block;}
 986             .zakladka-tool_zakladka_delete {display: block;}
 987         }
 988     }
 989     &.zakladka-note {
 990         .icon-empty {display: none;}
 991         .icon-note {display: flex;}
 992         #zakladka-box .content {
 993             .zakladka-tool_notka_text {display: block;}
 994             .zakladka-tool_zakladka_delete {display: block;}
 995         }
 996     }
 997 }
 998
 999
1000
1001 /*
1002 .zakladka-tool_sluchaj {display: none;}
1003 .has-sync .zakladka-tool_sluchaj {display: block;}
1004 */
1005
1006 #book-text-buttons {
1007     display: none;
1008     margin-top: 16px;
1009     border: 1px solid #D5ECED;
1010     border-radius: 6px;
1011     padding: 8px;
1012     max-width: 717px;
1013
1014
1015     a {
1016         display: inline-block;
1017         padding: 20px 30px;
1018         font-weight: bold;
1019         cursor: pointer;
1020         border-radius: 6px;
1021         &:hover {
1022             background: #E1F1F2;
1023         }
1024         i {
1025             margin-right: 10px;
1026             &.icon-play {
1027                 color: white;
1028                 background: #018189;
1029                 display: inline-block;
1030                 padding: 10px 8px 10px 12px;
1031                 border-radius: 100%;
1032             }
1033         }
1034     }
1035 }