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     padding-right: 48px;
 298     font-weight: normal;
 299     line-height: 1.5em;
 300 }
 301
 302 h4, .subtitle3 {
 303     font-size: 1em;
 304     margin: 1.5em 0 0;
 305     line-height: 1.5em;
 306 }
 307
 308 .subtitle4 {
 309     font-weight: bold;
 310 }
 311
 312 p {
 313     margin: 0;
 314 }
 315
 316 /* ======================== */
 317 /* = Footnotes and themes = */
 318 /* ======================== */
 319
 320 .annotation {
 321     font-style: normal;
 322     font-weight: normal;
 323     font-size: .75em;
 324     padding-left: 2px;
 325     position: relative;
 326     top: -4px;
 327     user-select: none;
 328     -webkit-user-select: none;
 329     -moz-user-select: none;
 330     -ms-user-select: none;
 331 }
 332
 333 #footnotes {
 334     margin-top: 3em;
 335 }
 336
 337 #footnotes .annotation {
 338     display: block;
 339     float: left;
 340     width: 2.5em;
 341     clear: both;
 342     user-select: auto;
 343     -webkit-user-select: text;
 344     -moz-user-select: text;
 345     -ms-user-select: text;
 346 }
 347
 348 #footnotes > div {
 349     margin: 1.5em 0 0 0;
 350 }
 351
 352 #footnotes p, #footnotes ul, #footnotes .stanza {
 353     margin-left: 2.5em;
 354     font-size: 0.875em;
 355 }
 356
 357 #footnotes .permalink {
 358     font-size: .75em;
 359 }
 360
 361 blockquote {
 362     font-size: 0.875em;
 363 }
 364
 365 /* ============= */
 366 /* = Numbering = */
 367 /* ============= */
 368 .verse, .paragraph {
 369     position:relative;
 370     padding: 0 48px 0 0;
 371 }
 372 /*.anchor {
 373     position: absolute;
 374     margin: -0.25em -0.5em;
 375     color: #777;
 376     font-size: 12px;
 377     text-align: center;
 378     padding: 0.25em 0.5em;
 379     line-height: 1.5em;
 380 }*/
 381
 382
 383 /* =================== */
 384 /* = Custom elements = */
 385 /* =================== */
 386 span.author {
 387     font-size: 0.5em;
 388     display: block;
 389     line-height: 1.5em;
 390     margin-bottom: 0.25em;
 391 }
 392
 393 span.collection {
 394     font-size: 0.375em;
 395     display: block;
 396     line-height: 1.5em;
 397     margin-bottom: -0.25em;
 398 }
 399
 400 span.subtitle {
 401     font-size: 0.5em;
 402     display: block;
 403     line-height: 1.5em;
 404     margin-top: -0.25em;
 405 }
 406
 407 span.translator {
 408     font-size: 0.375em;
 409     display: block;
 410     line-height: 1.5em;
 411     margin-top: 0.25em;
 412 }
 413
 414 div.didaskalia {
 415     font-style: italic;
 416     margin: 0.5em 0 0 1.5em;
 417 }
 418
 419 div.kwestia {
 420     margin: 0.5em 0 0;
 421 }
 422
 423 div.stanza {
 424     margin: 1.5em 0;
 425 }
 426
 427 div.kwestia div.stanza {
 428     margin: 0;
 429 }
 430
 431 .verse-p {
 432     padding-left: 1em;
 433 }
 434 .verse-indent {
 435     padding-left: 1em;
 436 }
 437 .verse-right { text-align: right; }
 438 .verse-center { text-align: center; }
 439
 440 .verse-indent.verse-indent-2 { padding-left: 2em; }
 441 .verse-indent.verse-indent-3 { padding-left: 3em; }
 442 .verse-indent.verse-indent-4 { padding-left: 4em; }
 443 .verse-indent.verse-indent-5 { padding-left: 5em; }
 444 .verse-indent.verse-indent-6 { padding-left: 6em; }
 445 .verse-indent.verse-indent-7 { padding-left: 7em; }
 446 .verse-indent.verse-indent-8 { padding-left: 8em; }
 447 .verse-indent.verse-indent-9 { padding-left: 9em; }
 448 .verse-indent.verse-indent-10 { padding-left: 10em; }
 449 .verse-indent.verse-indent-11 { padding-left: 11em; }
 450 .verse-indent.verse-indent-12 { padding-left: 12em; }
 451 .verse-cont { padding-left: 12em; }
 452
 453 @media screen and (max-width: 40em) {
 454     .verse-indent { padding-left: 4%; }
 455     .verse-indent.verse-indent-2 { padding-left: 8%; }
 456     .verse-indent.verse-indent-3 { padding-left: 12%; }
 457     .verse-indent.verse-indent-4 { padding-left: 16%; }
 458     .verse-indent.verse-indent-5 { padding-left: 20%; }
 459     .verse-indent.verse-indent-6 { padding-left: 24%; }
 460     .verse-indent.verse-indent-7 { padding-left: 28%; }
 461     .verse-indent.verse-indent-8 { padding-left: 32%; }
 462     .verse-indent.verse-indent-9 { padding-left: 36%; }
 463     .verse-indent.verse-indent-10 { padding-left: 40%; }
 464     .verse-indent.verse-indent-11 { padding-left: 44%; }
 465     .verse-indent.verse-indent-12 { padding-left: 48%; }
 466     .verse-cont { padding-left: 48%; }
 467 }
 468
 469
 470 p.paragraph {
 471     text-align: justify;
 472     margin: 0;
 473     text-indent: 1.5em;
 474 }
 475 p.paragraph.werset {
 476     text-indent: 0;
 477     margin-bottom: 1em;
 478 }
 479
 480 .motto {
 481     text-align: justify;
 482     font-style: italic;
 483     margin: 1.5em 0 0;
 484 }
 485
 486 .paragraph {
 487     &.miejsce_data, &.pozdrowienie, &.podpis {
 488         text-align: right;
 489     }
 490     &.naglowek_listu {
 491         text-align: center;
 492         margin: .5em 0;
 493     }
 494 }
 495
 496
 497 p.motto_podpis {
 498     font-size: 0.875em;
 499     text-align: right;
 500     margin-bottom: 1.5em;
 501 }
 502
 503 div.fragment {
 504     border-bottom: 0.1em solid #999;
 505     padding-bottom: 1.5em;
 506 }
 507
 508 div.note p, div.dedication p, div.note p.paragraph, div.dedication p.paragraph {
 509     text-align: right;
 510     font-style: italic;
 511 }
 512
 513 div.frame {
 514     border: 1px darkgray solid;
 515     padding: 1em;
 516     margin-top: 1em;
 517     margin-bottom: 1em;
 518 }
 519
 520 hr.spacer {
 521     height: 3em;
 522     visibility: hidden;
 523 }
 524
 525 hr.spacer-line {
 526     margin: 1.5em 0;
 527     border: none;
 528     border-bottom: 0.1em solid #000;
 529 }
 530
 531 p.spacer-asterisk {
 532     padding: 0;
 533     margin: 1.5em 0;
 534     text-align: center;
 535 }
 536
 537 div.person-list ol {
 538     list-style: none;
 539     padding: 0 0 0 1.5em;
 540 }
 541
 542 p.place-and-time {
 543     font-style: italic;
 544 }
 545
 546 em.math, em.foreign-word, em.book-title, em.didaskalia {
 547     font-style: italic;
 548 }
 549 em.foreign-word.foreign-word-protected {
 550     font-style: normal;
 551 }
 552
 553 em.author-emphasis {
 554     letter-spacing: 0.1em;
 555 }
 556
 557 em.person {
 558     font-style: normal;
 559     font-variant: small-caps;
 560 }
 561
 562 em.wieksze-odstepy {
 563     font-style: normal;
 564     word-spacing: 1em;
 565 }
 566
 567 .verse:after {
 568     content: "\feff";
 569 }
 570
 571 table {
 572     border-collapse: collapse;
 573     width: 100%;
 574 }
 575
 576 table.border td, table.border th {
 577     border: 1px solid black;
 578     vertical-align: top;
 579 }
 580
 581
 582 .anchor {
 583     /* Show line numbers. */
 584     float: left;
 585     clear: left;
 586     font-size: .8em;
 587     margin-left: -40px;
 588     width: 36px;
 589     height: auto;
 590     padding: 2px;
 591     text-align: center;
 592     color: #ccc;
 593     user-select: none;
 594     -webkit-user-select: none;
 595     -moz-user-select: none;
 596     -ms-user-select: none;
 597 }
 598
 599
 600
 601 .theme-begin {
 602     font-size: .9em;
 603     position: relative;
 604     float: right;
 605     margin-bottom: 8px;
 606     clear: both;
 607     line-height: 1.5em;
 608     text-align: left;
 609
 610     font-style: normal;
 611     font-weight: normal;
 612     font-variant: normal;
 613     letter-spacing: 0;
 614     text-transform: none;
 615     text-decoration: none;
 616     user-select: none;
 617     -webkit-user-select: none;
 618     -moz-user-select: none;
 619     -ms-user-select: none;
 620
 621     margin-right: -227px;
 622     width: 170px;
 623     text-indent: 0;
 624     color: inherit;
 625     padding-left: 12px;
 626     border-left: 1px solid #333;
 627 }
 628
 629
 630 a.reference.interesting:after {
 631     content: url('../images/pin.svg');
 632     padding: 3px;
 633 }
 634 }
 635
 636
 637
 638
 639 #menu {
 640 #wltoc ol, #themes ol, #objects ol {
 641     list-style: none;
 642     padding: 0;
 643     margin: 0;
 644 }
 645 #wltoc ol {
 646   padding-left: 1.5em;
 647 }
 648
 649 #wltoc ol ol {
 650     padding: 0 0 1.5em 1.5em;
 651     margin: 0;
 652 }
 653
 654 #wltoc ol ol li {
 655     font-weight: normal;
 656 }
 657
 658 #wltoc h2 {
 659     display: none;
 660 }
 661
 662 #wltoc .anchor {
 663     float: none;
 664     margin: 0;
 665     font-size: 16px;
 666     position: inherit;
 667 }
 668
 669
 670 #info .sponsors img {
 671     margin-bottom: 1em;
 672 }
 673 }
 674
 675
 676 #main-text {
 677     #annotation-box {
 678         display: none;
 679         position: fixed;
 680
 681         .pointer-bottom {
 682             transform: rotate(45deg);
 683             left: 27.5px;
 684             bottom: -6px;
 685             width: 12px;
 686             height: 12px;
 687             position: absolute;
 688
 689                 display: block;
 690                 width: 12px;
 691                 height: 12px;
 692                 position: absolute;
 693                 z-index: 1;
 694                 border-radius: 0px 0px 2px 0px;
 695                 background: var(--white-100, #FFF);
 696                 border: 1px solid var(--teal-700, #007880);
 697                 display: block;
 698             }
 699         .pointer-top {
 700             left: 27.5px;
 701             bottom: -5px;
 702             transform: rotate(45deg);
 703             display: block;
 704             width: 12px;
 705             height: 12px;
 706             position: absolute;
 707             z-index: 3;
 708             border-radius: 0px 0px 2px 0px;
 709             background: #fff;
 710             display: block;
 711         }
 712
 713         #annotation {
 714             max-width: 470px;
 715             position: relative;
 716             z-index: 2;
 717             background: white;
 718
 719             padding: 20px;
 720             box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
 721             border: 1px solid #007880;
 722             border-radius: 6px;
 723
 724             @include rwd($break-wide) {
 725             }
 726         }
 727
 728
 729         #annotation-content {
 730             max-height: 138px;
 731             overflow-y: scroll;
 732             color: var(--black-900, #333);
 733             leading-trim: both;
 734             text-edge: cap;
 735             font-variant-numeric: oldstyle-nums proportional-nums;
 736             /* Czytnik/Desktop/p read */
 737             font-family: "Source Serif Pro";
 738             font-size: 18px;
 739             font-style: normal;
 740             font-weight: 400;
 741             line-height: 28px; /* 155.556% */
 742
 743             em.foreign-word.foreign-word-protected {
 744                 font-style: normal;
 745             }
 746         }
 747
 748         #footnote-link {
 749             display: block;
 750             margin-top: 16px;
 751             text-align: right;
 752         }
 753     }
 754
 755
 756     #qbox {
 757         display: none;
 758         position: fixed;
 759         padding: 4px;
 760         border: 1px solid #007880;
 761         border-radius: 22px;
 762         background: white;
 763         box-shadow: 6px 6px 10px 0px rgba(0, 120, 128, 0.35);
 764
 765         &.copied {
 766             .content:after {
 767                 position: absolute;
 768                 top: 0;
 769                 bottom: 0;
 770                 left: 0;
 771                 right: 0;
 772                 content: "skopiowane";
 773                 display: flex;
 774                 background: white;
 775                 color: black;
 776                 justify-content: center;
 777                 align-items: center;
 778                 border-radius: 22px;
 779             }
 780         }
 781
 782         .content {
 783             overflow: hidden;
 784             display: flex;
 785             a {
 786                 width: 70px;
 787                 line-height: 44px;
 788                 text-align: center;
 789                 border-left: 1px solid #BBF6FA;
 790
 791                 &:nth-child(1) {
 792                     border-left: none;
 793                 }
 794
 795                 img {
 796                     vertical-align: middle;
 797                     height: 22px;
 798                 }
 799             }
 800         }
 801
 802         .pointer-bottom {
 803             transform: rotate(45deg);
 804             left: 128px;
 805             top: -6px;
 806             width: 12px;
 807             height: 12px;
 808             position: absolute;
 809
 810             display: block;
 811             width: 12px;
 812             height: 12px;
 813             position: absolute;
 814             z-index: 1;
 815             border-radius: 0px 0px 2px 0px;
 816             background: var(--white-100, #FFF);
 817             border: 1px solid var(--teal-700, #007880);
 818             display: block;
 819         }
 820         .pointer-top {
 821             left: 128px;
 822             top: -5px;
 823             transform: rotate(45deg);
 824             display: block;
 825             width: 12px;
 826             height: 12px;
 827             position: absolute;
 828             z-index: 3;
 829             border-radius: 0px 0px 2px 0px;
 830             background: #fff;
 831             display: block;
 832         }
 833
 834     }
 835 }
 836
 837
 838
 839 .zakladka {
 840     display: none;
 841     position: absolute;
 842     //z-index: 70;
 843     width: 40px;
 844     height: 40px;
 845     .icon {
 846         width: 40px;
 847         height: 40px;
 848         display: flex;
 849         align-items: center;
 850         justify-content: center;
 851         cursor: pointer;
 852         .icon-exists, .icon-note {display: none;}
 853         img {
 854         }
 855     }
 856
 857     #zakladka-box {
 858         padding: 20px;
 859         width: 270px;
 860         border: 1px solid #007880;
 861         border-radius: 8px;
 862         box-shadow: 6px 6px 10px 0px rgba(0, 120, 128, 0.35);
 863         background: #E1F1F2;
 864         position: relative;
 865         left: -225px;
 866         z-index: 3;
 867         @include rwd($break-wide) {
 868             left: -12px;
 869         }
 870
 871         .pointer-bottom {
 872             transform: rotate(45deg);
 873             left: 238px;
 874             top: -7px;
 875             width: 12px;
 876             height: 12px;
 877             position: absolute;
 878             box-sizing: border-box;
 879
 880             display: block;
 881             width: 12px;
 882             height: 12px;
 883             position: absolute;
 884             z-index: 1;
 885             border-radius: 0px 0px 2px 0px;
 886             background: var(--white-100, #E1F1F2);
 887             border: 1px solid var(--teal-700, #007880);
 888             display: block;
 889
 890             @include rwd($break-wide) {
 891                 left: 25px;
 892             }
 893         }
 894         .pointer-top {
 895             left: 238px;
 896             top: -5px;
 897             transform: rotate(45deg);
 898             display: block;
 899             width: 12px;
 900             height: 12px;
 901             position: absolute;
 902             z-index: 3;
 903             border-radius: 0px 0px 2px 0px;
 904             background: #E1F1F2;
 905             display: block;
 906             @include rwd($break-wide) {
 907                 left: 25px;
 908             }
 909         }
 910
 911
 912         .content {
 913             display: flex;
 914             align-items: flex-start;
 915             flex-direction: column;
 916             gap: 12px;
 917             .zakladka-tool {
 918                 color: #333;
 919                 line-height: 30px;
 920                 font-family: "Source Sans Pro";
 921                 font-size: 18px;
 922                 font-style: normal;
 923                 font-weight: 400;
 924                 cursor: pointer;
 925                 padding-left: 38px;
 926
 927                 &:before {
 928                     height: 30px;
 929                     width: 30px;
 930                     display: inline-block;
 931                     vertical-align: bottom;
 932                     margin-left: -38px;
 933                     margin-right: 8px;
 934                 }
 935
 936                 &.zakladka-tool_zakladka_delete:before {
 937                     content: url('/static/2022/images/zakladka-usun.svg');
 938                 }
 939                 &.zakladka-tool_zakladka:before {
 940                     content: url('/static/2022/images/add-icon.svg');
 941                 }
 942                 &.zakladka-tool_sluchaj:before {
 943                     content: url('/static/2022/images/play-now-icon.svg');
 944                 }
 945                 &.zakladka-tool_notka:before {
 946                     content: url('/static/2022/images/add-note-icon.svg');
 947                 }
 948             }
 949             .zakladka-tool_notka_text {
 950                 display: none;
 951                 width: 100%;
 952                 position: relative;
 953                 textarea {
 954                     width: 100%;
 955
 956 display: flex;
 957 padding: 16px;
 958 justify-content: center;
 959 align-items: center;
 960 gap: 8px;
 961 flex: 1 0 0;
 962 border-radius: 6px;
 963 border: 1px solid #007880;
 964 background: #fff;
 965                 }
 966                 #notka-save, #notka-saved {
 967                     position: absolute;
 968                     top: 4px;
 969                     right: 4px;
 970                     display: none;
 971                     width: 16px;
 972                     height: 16px;
 973                 }
 974                 #notka-saved {
 975                 }
 976             }
 977             .zakladka-tool_zakladka_delete {
 978                 display: none;
 979 //                position: absolute;
 980 //                bottom: 40px;
 981 //                right: 3px;
 982 //                width: 29px;
 983 //                height: 29px;
 984 //                cursor: pointer;
 985 //                align-items: center;
 986 //                justify-content: center;
 987             }
 988         }
 989     }
 990
 991
 992
 993     &.zakladka-exists {
 994         .icon-empty {display: none;}
 995         .icon-exists {display: flex;}
 996         #zakladka-box .content {
 997             .zakladka-tool_notka_text {display: block;}
 998             .zakladka-tool_zakladka_delete {display: block;}
 999         }
1000     }
1001     &.zakladka-note {
1002         .icon-empty {display: none;}
1003         .icon-note {display: flex;}
1004         #zakladka-box .content {
1005             .zakladka-tool_notka_text {display: block;}
1006             .zakladka-tool_zakladka_delete {display: block;}
1007         }
1008     }
1009 }
1010
1011
1012
1013 /*
1014 .zakladka-tool_sluchaj {display: none;}
1015 .has-sync .zakladka-tool_sluchaj {display: block;}
1016 */
1017
1018 #book-text-buttons {
1019     display: none;
1020     margin-top: 16px;
1021     border: 1px solid #D5ECED;
1022     border-radius: 6px;
1023     padding: 8px;
1024     max-width: 717px;
1025
1026
1027     a {
1028         display: inline-block;
1029         padding: 20px 30px;
1030         font-weight: bold;
1031         cursor: pointer;
1032         border-radius: 6px;
1033         &:hover {
1034             background: #E1F1F2;
1035         }
1036         i {
1037             margin-right: 10px;
1038             &.icon-play {
1039                 color: white;
1040                 background: #018189;
1041                 display: inline-block;
1042                 padding: 10px 8px 10px 12px;
1043                 border-radius: 100%;
1044             }
1045         }
1046     }
1047 }
1048
1049
1050
1051 #sidebar {
1052     position: absolute;
1053     left: 0;
1054     top: 20px;
1055     width: 200px;
1056
1057     h2 {
1058         font-size: 20px;
1059         margin-bottom: 1em;
1060     }
1061
1062     .other-text-close {
1063         display: none;
1064     }
1065
1066     #other {
1067         ul {
1068             list-style: none;
1069             margin: 0;
1070             padding: 0;
1071
1072             .book-mini-box {
1073                 position: relative;
1074                 width: 137px;
1075                 .language {
1076                     position: absolute;
1077                     top: 163px;
1078                     left: 10px;
1079                     color: white;
1080                     background: black;
1081                     padding: 0 10px;
1082                     border-radius: 10px;
1083                     font-size: 14px;
1084                     line-height: 20px;
1085
1086                 }
1087                 .author, .title {
1088                     display: block;
1089                     font-size: 14px;
1090                     line-height: 18px;
1091                 }
1092             }
1093         }
1094     }
1095 }
1096 .with-other-text {
1097     #sidebar {
1098         .other-text-close {
1099             display: block;
1100             background: red;
1101             padding: 10px;
1102             margin: 10px 0;
1103             border-radius: 10px;
1104             color: white;
1105             text-decoration: none;
1106         }
1107     }
1108     #main-text {
1109         #book-text {
1110             .other {
1111                 overflow: hidden;
1112                 margin: 10px 40px 10px 50px;
1113                 padding: 10px 20px 0 10px;
1114                 background: #eee;
1115                 border-left: 10px double #ddd;
1116
1117                 h3 {
1118                     margin: 0;
1119                     padding: 0;
1120                 }
1121
1122                 .paragraph {
1123                     padding: 0;
1124                 }
1125             }
1126         }
1127     }
1128 }
1129
1130 :lang(pl),
1131 :lang(en),
1132 :lang(de),
1133 :lang(fr),
1134 :lang(lt),
1135 :lang(uk)
1136 {
1137     direction: ltr;
1138 }
1139 :lang(he) {
1140     direction: rtl;
1141 }