1@keyframes ani_rot { 2 0% { transform: rotate(0deg); } 3 100% { transform: rotate(360deg); } 4} 5@keyframes ani_op_low { 6 0% { opacity: 1; } 7 100% { opacity: 0.1; } 8} 9@keyframes ani_op_half { 10 0% { opacity: 1; } 11 100% { opacity: 0.5; } 12} 13@keyframes ani_op_top { 14 0% { opacity: 0; } 15 100% { opacity: 1; } 16} 17@keyframes ani_off_bar { 18 0% { opacity: 0; height: 0; } 19 30% { opacity: 0.01; } 20 100% { opacity: 1; } 21} 22@keyframes ani_scale { 23 0% { transform: scale(0); } 24 90% { transform: scale(1.4); } 25 100% { transform: scale(1); } 26} 27@mobile-width: 860px; 28 29.dokuwiki { 30 animation: ani_op_top 0.5s ease-in-out; 31 margin: 0; 32 width: 100%; 33 &.export { 34 box-sizing: border-box; 35 padding: 3px; 36 abbr { 37 text-decoration: none; 38 } 39 a { 40 color: inherit !important; 41 } 42 } 43 &.slav { 44 #head #logo #inlogo { 45 background: url( images/logo/logor.svg ) no-repeat; 46 height: 53px; 47 transform: translate(1px, 0); 48 &:hover::after { 49 transform: translate(-1px, 0); 50 } 51 @media (max-width: @mobile-width) { 52 background: url( images/logo/logor_mob.svg ) no-repeat; 53 } 54 } 55 } 56 &:not(.slav) { 57 #head #logo #inlogo { 58 background: url( images/logo/logo.svg ) no-repeat; 59 height: 46.5px; 60 transform: translate(0, 7px); 61 &:hover::after { 62 transform: translate(0, -7px); 63 } 64 @media (max-width: @mobile-width) { 65 background: url( images/logo/logo_mob.svg ) no-repeat; 66 height: 53px; 67 } 68 } 69 } 70 #head { 71 * { 72 outline: none; 73 } 74 #logo { 75 float: left; 76 #inlogo { 77 display: inline-block; 78 width: 332px; 79 &:hover::after { 80 animation: ani_op_top 0.4s; 81 background-size: contain !important; 82 content: ''; 83 display: inline-block; 84 float: left; /* для иврита */ 85 width: 100px; 86 @media (max-width: @mobile-width) { 87 background: none !important; 88 } 89 } 90 &[rnd="0"]:hover::after { 91 background: url(images/logo/logo-jenny.png) no-repeat; 92 height: 39px; 93 margin: 6px 0 0 24px; 94 } 95 &[rnd="1"]:hover::after { 96 background: url(images/logo/logo-sam.png) no-repeat; 97 height: 59px; 98 margin: 0 0 -3px 32px; 99 } 100 &[rnd="2"]:hover::after { 101 background: url(images/logo/logo-kitty.png) no-repeat; 102 height: 35px; 103 margin: 9px 0 0 29px; 104 } 105 &[rnd="3"]:hover::after { 106 background: url(images/logo/logo-pinkie.png) no-repeat; 107 height: 54px; 108 margin: 0 0 0 14px; 109 } 110 &[rnd="4"]:hover::after { 111 background: url(images/logo/logo-bob.png) no-repeat; 112 height: 35px; 113 margin: 11px 0 0 34px; 114 } 115 &[rnd="5"]:hover::after { 116 background: url(images/logo/logo-ninwah.png) no-repeat; 117 height: 39px; 118 margin: 7px 0 0 23px; 119 } 120 &[rnd="6"]:hover::after { 121 background: url(images/logo/logo-gamercat.png) no-repeat; 122 height: 34px; 123 margin: 9px 0 0 28px; 124 } 125 @media (max-width: @mobile-width) { 126 width: 40px; 127 } 128 } 129 } 130 #menu { 131 header { 132 letter-spacing: .05em; 133 line-height: 1.6em; 134 min-height: 30px; 135 text-shadow: 1px 1px 2px black; 136 &[rnd="0"] { 137 background: #22979E; 138 } 139 &[rnd="1"] { 140 background: #829DD3; 141 } 142 &[rnd="2"] { 143 background: #A387C1; 144 } 145 &[rnd="3"] { 146 background: #E183BD; 147 } 148 &[rnd="4"] { 149 background: #E9B630; 150 #upmenu a:hover { 151 color: #0FF; 152 } 153 } 154 &[rnd="5"] { 155 background: #45A2C4; 156 } 157 &[rnd="6"] { 158 background: #AD464A; 159 } 160 > * { 161 position: relative; 162 top: 4px; 163 } 164 #upmenu { 165 color: white; 166 font: bold 15px DatFestComic,cursive; 167 @media (max-width: 456px) { 168 width: ~"calc(100% - 120px)"; 169 display: inline-block; 170 } 171 a { 172 color: white; 173 } 174 a:hover { 175 color: #FF0; 176 } 177 a + a { 178 margin-left: ~"clamp(3px, 100vw - 555px, 8px)"; 179 } 180 } 181 #search { 182 float: right; 183 margin: 0 3px; 184 form#dw__search { 185 div.no { 186 * { 187 border-radius: 10px; 188 font-size: 120%; 189 } 190 #qsearch__in { 191 margin-right: 1px; 192 position: relative; 193 top: -3px; 194 width: ~"clamp(50px, 100vw - 400px, 150px)"; 195 } 196 button { 197 padding: 1px 4px 2px 3px; 198 @media (max-width: 456px) { 199 display: none; 200 } 201 } 202 div#qsearch__out { /* всплывающие результаты; вырубить нахрен, неуправляемые background и частично position */ 203 display: none !important; 204 } 205 } 206 } 207 } 208 } 209 nav { 210 min-height: 30px; 211 @media (max-width: 1040px) { 212 overflow-x: scroll; 213 } 214 scrollbar-width: 6px !important; 215 &::-webkit-scrollbar { 216 max-width: 6px !important; 217 } 218 } 219 } 220 } 221 article#dokuwiki__detail { 222 padding: 0 1em; 223 h1 { 224 padding: 1em 0; 225 } 226 div.img_big { 227 [dir=ltr] & { float: left; } 228 [dir=rtl] & { float: right; } 229 p.img_caption { 230 text-align: center; 231 } 232 } 233 div.img_detail { 234 [dir=ltr] & { float: left; } 235 [dir=rtl] & { float: right; } 236 margin: 0 1em; 237 #back { 238 font-size: 1.3em; 239 margin-top: 0; 240 bdi { 241 padding-left: .5em; 242 position: relative; 243 top: 2px; 244 } 245 } 246 dl.img_tags { 247 dd { 248 background-color: __medium__; 249 font-style: italic; 250 } 251 dt { 252 background-color: __lightgray__; 253 display: inline-block; 254 font-weight: bold; 255 margin-top: 0.5em; 256 } 257 dd, dt { 258 line-height: 2; 259 padding: 0 1em; 260 } 261 } 262 } 263 } 264 article.page { 265 border-bottom: 1px dashed #EEE; 266 font-family: "Trebuchet MS", "Bitstream Vera Sans", "Nimbus Sans L", sans-serif; 267 line-height: 1.5em; 268 margin: 0 37px; 269 position: relative; 270 text-align: justify; 271 &::after { 272 content: ""; 273 height: 100%; 274 left: 0; 275 opacity: 0.03; 276 position: absolute; 277 top: 0; 278 width: 100%; 279 z-index: -1; 280 } 281 h1 { 282 &:nth-child(1) { 283 padding: 0; 284 } 285 } 286 h5:nth-child(1) { 287 margin: 0; 288 } 289 .footnotes { 290 border-top: 1px solid __dark__; 291 clear: both; 292 margin: 1.5em 0 .5em 1em; 293 .fn { 294 border-bottom: 1px solid __medium__; 295 font-size: 90%; 296 } 297 .fn_bot { 298 font-weight: bold; 299 } 300 .content { 301 display: inline; 302 } 303 } 304 .editBox { 305 .toolbar.group { 306 margin: 2px 0; 307 #tool__bar { 308 button { 309 &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4),&:nth-of-type(5), 310 &:nth-of-type(6),&:nth-of-type(7),&:nth-of-type(8),&:nth-of-type(9),&:nth-of-type(10), 311 &:nth-of-type(11),&:nth-of-type(12),&:nth-of-type(13),&:nth-of-type(14),&:nth-of-type(15) { 312 background: url( https://comicslate.org/lib/images/toolbar/toolbar.png ); 313 height: 16px; 314 margin: -2px 5px 5px 3px; 315 vertical-align: middle; 316 width: 16px; 317 img { 318 display: none; 319 } 320 } 321 &:nth-of-type(1) { background-position: 0 0; } 322 &:nth-of-type(2) { background-position: 0 -16px; } 323 &:nth-of-type(3) { background-position: 0 -32px; } 324 &:nth-of-type(4) { background-position: 0 -48px; } 325 &:nth-of-type(5) { background-position: 0 -64px; } 326 &:nth-of-type(6) { background-position: 0 -80px; } 327 &:nth-of-type(7) { background-position: 0 -96px; } 328 &:nth-of-type(8) { background-position: 0 -112px; } 329 &:nth-of-type(9) { background-position: 0 -128px; } 330 &:nth-of-type(10) { background-position: 0 -144px; } 331 &:nth-of-type(11) { background-position: 0 -160px; } 332 &:nth-of-type(12) { background-position: 0 -176px; } 333 &:nth-of-type(13) { background-position: 0 -192px; } 334 &:nth-of-type(14) { background-position: 0 -208px; } 335 &:nth-of-type(15) { background-position: 0 -224px; } 336 } 337 } 338 } 339 #dw__editform { 340 #wiki__editbar.editBar { 341 margin: 0; 342 .editButtons { 343 display: inline-block; 344 padding: 0 4px 11px 0; 345 button, input { 346 border-radius: 3px; 347 border: 1px solid #888; 348 padding: 1px 6px; 349 } 350 #edbtn__save { 351 background-image: linear-gradient(to bottom, #CFB, #AD9); 352 &:hover { 353 background-image: linear-gradient(to bottom, #CFB, #8B7); 354 } 355 } 356 #edbtn__preview { 357 background-image: linear-gradient(to bottom, #7EF, #5CC); 358 &:hover { 359 background-image: linear-gradient(to bottom, #7EF, #3AB); 360 } 361 } 362 #edbtn__cancel { 363 background-image: linear-gradient(to bottom, #FCB, #DA9); 364 &:hover { 365 background-image: linear-gradient(to bottom, #FCB, #B87); 366 } 367 } 368 } 369 .summary { 370 .nowrap { 371 white-space: nowrap; 372 span, 373 #edit__summary { 374 vertical-align: 2px; 375 } 376 } 377 } 378 } 379 } 380 } 381 div.index__tree { 382 li { 383 &.closed { 384 opacity: 0.5; 385 } 386 .curid a { 387 font-weight: bold; 388 } 389 div.li { 390 margin-bottom: 3px; 391 a.idx_dir { 392 background-color: white; 393 border: 2px solid #eee; 394 border-radius: 5px; 395 box-shadow: 0 0 3px 1px __dark__; 396 padding: 0 5px; 397 } 398 } 399 } 400 } 401 } 402 @media (max-width: 750px) { 403 article.page { 404 margin: 0 7px 0 37px !important; 405 } 406 } 407 &.slav { 408 article.page::after { 409 background-image: url( images/logo/logor_back.svg ); 410 } 411 } 412 &:not(.slav) { 413 article.page::after { 414 background-image: url( images/logo/logo_back.svg ); 415 } 416 } 417/** 418 * @author Anika Henke <anika@selfthinker.org> 419 * @author Andreas Gohr <andi@splitbrain.org> 420 */ 421 #pagetools { 422 @ico-width: 28px; 423 @ico-margin: 4px; 424 @item-height: (@ico-width + @ico-margin); 425 position: fixed; 426 right: 0; 427 top: 75px; 428 z-index: 999999; 429 &:hover { 430 ul#nomobile { 431 background-color: @ini_background; 432 border-color: @ini_border; 433 border-radius: 2px; 434 box-shadow: 2px 2px 2px @ini_text_alt; 435 span { 436 display: inline-block; 437 } 438 } 439 } 440 ul { 441 text-align: right; 442 } 443 ul#nomobile { 444 border: 1px solid transparent; // add transparent border to prevent jumping when proper border is added on hover 445 margin: 0; 446 li { 447 list-style: none; 448 a { 449 display: block; 450 line-height: @item-height; 451 span { 452 display: none; // hide label until hover 453 margin: 0 @ico-margin; 454 } 455 svg { 456 fill: @ini_border; 457 margin: 0 @ico-margin/2; 458 vertical-align: middle; 459 @media (max-width: 375px) { 460 opacity: 0.5; 461 } 462 &:hover { 463 opacity: 1; 464 } 465 } 466 } 467 a:active, 468 a:focus, 469 a:hover { // on interaction show the full item 470 background-color: @ini_background_alt; 471 svg { 472 fill: @ini_link; 473 } 474 } 475 } 476 li.admin, 477 li.logout, 478 li.login, 479 li.media { 480 border-bottom: skyblue 1px solid; 481 margin-bottom: 2.5px; 482 padding-bottom: 2.5px; 483 } 484 li.edit svg { 485 animation: ani_op_low 1s linear 3s infinite alternate running; 486 } 487 } 488 @media (max-width: 750px) { 489 ul#nomobile { 490 display: none; 491 } 492 } 493 ul#mobile { 494 select { 495 -moz-appearance: none; 496 -webkit-appearance: none; 497 appearance: none; 498 background: url(images/burger.svg) no-repeat center center; 499 height: 33px; 500 width: 33px; 501 option:first-child { 502 display: none; 503 } 504 } 505 } 506 @media (min-width: 750px) { 507 ul#mobile { 508 display: none; 509 } 510 } 511 } 512 &.slav { 513 #yandex_rtb { 514 border: 1px solid #ddd; 515 border-radius: 5px; 516 clear: both; 517 margin: 5px auto; 518 max-height: 310px; 519 max-width: ~"calc(100% - 72px)"; 520 overflow: hidden; 521 padding: 5px; 522 yatag { 523 align-content: center; 524 } 525 } 526 } 527 footer { 528 clear: both; 529 div.breadcrumbs { 530 clear: both; 531 font-size: 8pt; 532 padding: 4px 10px; 533 } 534 .social { 535 padding-top: .3em; 536 text-align: center; 537 a { 538 display: inline-block; 539 &.rss { 540 background: url( images/rss.png ); 541 border-radius: 5px; 542 bottom: 1px; 543 height: 29px; 544 margin: 0 4px; 545 position: relative; 546 transform: scale(1.15); 547 width: 29px; 548 @media (max-width: 500px) { 549 margin: 0 2px; 550 } 551 } 552 &:not(.rss) { 553 background: url( images/social.png ); 554 height: 32px; 555 margin: 0 2px; 556 width: 32px; 557 @media (max-width: 500px) { 558 margin: 0; 559 } 560 } 561 &:nth-of-type(1), 562 &.patreon { 563 background-position: 0 0; 564 } 565 &:nth-of-type(2) { 566 background-position: 0 -29px; 567 } 568 &:nth-last-of-type(2) { 569 background-position: 0 -58px; 570 } 571 &:nth-last-of-type(1) { 572 background-position: 0 -87px; 573 } 574 &.patreon { 575 display: none; 576 } 577 &.discord { 578 background-position: 0 -32px; 579 } 580 &.telegram { 581 background-position: 0 -64px; 582 } 583 &.reddit { 584 background-position: 0 -96px; 585 } 586 &.tumblr { 587 background-position: 0 -128px; 588 } 589 &.facebook { 590 background-position: 0 -160px; 591 } 592 &.twitter { 593 background-position: 0 -192px; 594 border: 1px solid #ddd; 595 position: relative; 596 top: 1px; 597 } 598 &.vkontakte { 599 background-position: 0 -224px; 600 } 601 &.telegram, 602 &.facebook, 603 &.twitter, 604 &.vkontakte { 605 border-radius: 5px; 606 } 607 } 608 } 609 .count { 610 bottom: 4px; 611 float: right; 612 position: relative; 613 right: 30px; 614 text-align: right; 615 a { 616 display: block; 617 width: 105px; /* центрование социал-кнопок */ 618 img { 619 border: 0; 620 height: 31px; 621 margin-top: 4px; 622 width: 88px; 623 } 624 } 625 noscript { 626 img { 627 left: -9999px; 628 position: absolute; 629 } 630 } 631 } 632 .pageinfo, 633 .user { 634 clear: both; 635 font-size: .8em; 636 text-align: center; 637 } 638 } 639 .middle { 640 vertical-align: middle; 641 } 642 #acl__manager { 643 table { 644 margin-left: 0%; 645 width: 100%; 646 } 647 } 648 .april { 649 transform: rotate(180deg); 650 } 651 .pad { // белый фон в просмотре 652 background-color: white; 653 } 654 .m { // скруглятор 655 border-radius: 5px; 656 padding: 3px 5px; 657 } 658 .hyph { // переносы 659 display: inline; 660 hyphens: auto; 661 -webkit-hyphens: auto; 662 overflow-wrap: break-word; 663 word-wrap: break-word; 664 * { 665 display: inline !important; 666 } 667 } 668 .ratestar { 669 vertical-align: sub; 670 width: 20px; 671 &.anim { 672 animation: ani_rot 1.6s linear 0s infinite running; 673 } 674 } 675 .li { 676 font-weight: normal; 677 } 678 .cl_hr { 679 background-color: #D5D1CB; 680 border-width: 0; 681 color: #D5D1CB; 682 height: 1px; 683 margin: 10px; 684 } 685} 686 687nav div:hover::after { 688 animation: ani_op_top 1.4s; 689 color: #bbb; 690 font: bold 15px DatFestComic,cursive; 691 .lang-be & { content: " Мовы"; } 692 .lang-bg & { content: " Езици"; } 693 .lang-br & { content: " Línguas"; } 694 .lang-da & { content: " Sprog"; } 695 .lang-de & { content: " Sprachen"; } 696 .lang-el & { content: " Γλώσσες"; } 697 .lang-en & { content: " Languages"; } 698 .lang-eo & { content: " Lingvoj"; } 699 .lang-es & { content: " Idiomas"; } 700 .lang-fi & { content: " Kielet"; } 701 .lang-fr & { content: " Langues"; } 702 .lang-he & { content: " שפות"; } 703 .lang-hi & { content: " बोली"; } 704 .lang-hu & { content: " Nyelvek"; } 705 .lang-id & { content: " Bahasa"; } 706 .lang-it & { content: " Lingue"; } 707 .lang-ja & { content: " 言語"; } 708 .lang-ko & { content: " 언어"; } 709 .lang-pl & { content: " Języki"; } 710 .lang-pt & { content: " Línguas"; } 711 .lang-ru & { content: " Языки"; } 712 .lang-tr & { content: " Diller"; } 713 .lang-uk & { content: " Мови"; } 714 .lang-zh & { content: " 语言"; } 715} 716 717#ym-informer { // счётчик 718 border-radius: 15px !important; 719} 720 721#send-msg-btn { 722 z-index: 999; 723} 724 725.e_nav img { /* энтити back и up */ 726 margin: 0 auto 3px auto; 727 width: 48px; 728 background-color: #969696; 729} 730