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