:root { --num-col-width: 50px; --col-width: 45em; --content-font: Tahoma, Geneva, Verdana, sans-serif; --body-bg: #FBF5EA; --widget-bg: #FAFAFA; --text-color: #222; --link-color: #6B4F38; --accent-color: #8B0000; --admin-color: #1537BB; } .hide-verse-numbers{ --num-col-width: 10px; } head, style, script, noscript, template, .d-none { display: none!important; } #audio-player { display: block; margin: 0 auto; } #player-caption { margin-top: 15px } #audio-block { padding-top: 2px; position: fixed; left: 0; bottom: 0; width: 100%; background: #fff } #audio-player-caption { display: block; width: 60%; margin: 0 auto; text-align: center; position: absolute; top: 1%; left: 20%; z-index: 2; color: #907b49; font-size: 70% } .play-audio { color: #8B0000; color: var(--accent-color, #8B0000); display: inline-block; } .play-audio__icon, .interpret__icon { font-size: 1.2em; } .interpret__icon { margin-right: 5px; } .play-audio__icon { transition: all .5s ease; padding: 1px; border-radius: 50%; } .active .play-audio__icon { color: #fff; background: #8B0000; background: var(--accent-color, #8B0000); padding: 2px; } .column-header .play-audio { margin-left: 5px; } ul.navigation-menu { margin: 4px 0 0 } ul.navigation-menu>li { display: inline; margin: 0; list-style: none } ul.navigation-menu>li>a { padding: 2px .5em; margin: 0 0 0 3px; border: 1px solid #f0c8b6; border-bottom: none; text-decoration: none } ul.navigation-menu>li>a:hover { text-decoration: underline } ul.navigation-menu>li.active>a:hover { text-decoration: none } .navigation-body { padding-top: 5px; background: #f8f4e4; border: 1px solid #f0c8b6; border-collapse: collapse } .book-ps .navigation-body { border-right: 3px solid #f0c8b6 } ul.navigation-menu>li.active>a { background-color: #f8f4e4; color: #333 } .form_search { position: relative; display: none; width: 100%; } .form_search.disabled .search-form-button { display: none; } .search-form-field { width: 100%; height: 36px; } input[type="search"].search-form-field { padding-right: 50px; } .search-form-field::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button !important; padding-right: 0px; } .search-form-button { appearance: none; position: absolute; top: 2.25px; right: 0; display: block; border: 0; background: none; font-size: 20px; } .speech { position: absolute; right: 30px; display: none; border: 0; background: transparent; font-size: 18px; padding: 0 5px; border-radius: 40px; transition: color .3s ease, background .3s ease, border .3s ease, transform .3s ease, box-shadow .3s ease; } .voice-search .speech { color: #d00; background: #fff; background: var(--widget-bg, #fff); border-radius: 40px; border: 2px solid #d00; box-shadow: 0 0 40px #d00; transform: scale(1.5); } .search-form-button .icon-search, .speech .icon-mic { display: flex; align-items: center; height: 100%; } .speech .icon-mic:before { padding-bottom: 1px; } .search-form-button, .speech { opacity: .6; cursor: pointer; color: #8B0000; color: var(--accent-color, #8B0000); top: 0; height: 100%; } .speech:hover, .search-form-button:hover { opacity: 1; background: transparent; color: #F00000; } .search-form-button:focus, .search-form-field:focus { outline: none } .autocomplete { position: absolute; z-index: 2; display: none; } .autocomplete ul { list-style: none; } .autocomplete li:hover { color: #8b0000; color: var(--accent-color, #8b0000); background: #fafafa; background: var(--widget-bg, #fafafa); cursor: pointer; } @font-face { font-family: Georgia-my; src: url(../fonts/Georgia-my.ttf) format("truetype"); font-style: normal; font-weight: 400; font-display: swap } @font-face { font-family: Georgia-my; src: url(../fonts/Georgia-Bold.ttf) format("truetype"); font-style: normal; font-weight: 700; font-display: swap } @font-face { font-family: Georgia-my; src: url(../fonts/Georgia-Italic.ttf) format("truetype"); font-style: italic; font-display: swap } @font-face { font-family: Georgia-my; src: url(../fonts/Georgia-BoldItalic.ttf) format("truetype"); font-style: italic; font-weight: 700; font-display: swap } body, code, div, form, html, img, li, ol, p, pre, table, td, th, ul { border: 0; padding: 0; margin: 0; font-family: inherit; line-height: inherit; } .input, input[type=number], input[type=text], input[type=search], input[type=email], input[type=password], select, textarea { margin: 0; padding: 0; font-size: 1rem; font-family: inherit; border-radius: 5px; padding-left: 9px; padding-top: 6px; padding-bottom: 6px; line-height: 1; } .input, input, select, textarea { border: 1px solid #ccc; background: #fff; background: var(--widget-bg, #fff); } input[type=checkbox], input[type=radio] { margin: 0; vertical-align: -1px; } .button, button { color: #8B0000; color: var(--accent-color, #8B0000); background: transparent; border: 2px solid #8B0000; border: 2px solid var(--accent-color, #8B0000); border-radius: 40px; padding: 6px 9px; cursor: pointer; outline: none; transition: color .3s ease, background .3s ease; } button:hover { background: #8B0000; background: var(--accent-color, #8B0000); color: #fafafa; } .btn-filled { background: #8b0000; background: var(--accent-color, #8b0000); color: #fff; } .btn-large { padding: 16px 29px; font-weight: bold; } select:focus { outline: none } table { border-collapse: collapse; } table td { vertical-align: top } a { text-decoration: none } .grey-underline, .lang-label__title, .play-audio__icon, .add-lang__label, .remove-lang__label, .subtitle .bibref, .interp-src__link[href], .the-slava a, .zachala a { text-decoration: underline; text-decoration-color: #ccc; text-decoration-thickness: .5px; text-underline-offset: 1px; } html { font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 16.667px; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.25; width: 100%; height: 100%; overflow-x: hidden; scroll-behavior: smooth; background: #FBF5EA; background: var(--body-bg, #FBF5EA); } body { background: inherit; color: #2a2a2a; color: var(--text-color, #2a2a2a); position: relative; padding-top: 30px; /* mob nav space */ } .container { box-sizing: border-box; width: 100%; padding: 0 10px; margin: auto; } p { margin-bottom: 10px; } b, strong, .strong { font-weight: bold; } hr { margin-block-start: 5px; margin-block-end: 4px; border: 0; height: .75px; width: 100%; background: #ccc; } .link, a { cursor: pointer; color: #8B0000; color: var(--accent-color, #8B0000); } .link.hover, a.hover { color: #F00000; } .breadcrumbs a, .book-group a { color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: inherit; color: inherit; } h1 { font-size: 24px; color: #3a3a3a; color: var(--text-color, #3a3a3a); opacity: .9; margin: 0; width: 100%; } .h1 { position: relative; margin: 20px 0 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.33rem 1rem; } .title-comma { font-weight: normal; } .title__chapter-pre { text-transform: lowercase; } h1 a, .title__chapters-selector { display: inline-block; cursor: pointer; text-decoration: underline; text-decoration-color: #bbb; text-decoration-thickness: 1px; text-underline-offset: 2px; } .title__chapters-selector__panel { width: var(--col-width); max-width: 84vw; position: absolute; top: 29px; z-index: 5; } .title__chapters-selector__panel ul { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 2em; justify-items: center; align-items: center; gap: 5px 10px; } .title__chapters-selector__panel li { margin: 0!important; } .btn-title, .btn-title-link-copy { font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; } .btn-admin{ color: var(--admin-color)!important; } .favorite.no-fav, .btn-title-link-copy { color: #8B0000; color: var(--accent-color, #8B0000); } .favorite.no-fav:hover, .btn-title-link-copy:hover { color: inherit; } .btn-title-link-copy.copied:after { font-family: Tahoma, Geneva, Verdana, sans-serif; content: 'скопировано!'; margin-left: 5px; } span mark { padding: 0 .1em; border-radius: 4px; -moz-border-radius: 4px } .breadcrumbs { margin-top: 20px; font-size: 12px; color: #2a2a2a; color: var(--text-color, #2a2a2a); } .header .breadcrumbs, .header .breadcrumbs a { font-size: .9vw } .header .breadcrumbs { width: 100%; padding: 0 10px } .header { position: fixed; left: 0; top: 30px; max-height: calc(100vh - 100px); width: 100%; background: #fff; background: var(--widget-bg, #fff); z-index: 10; padding: 35px 0 20px; overflow-y: auto; transform: translateY(-100%); transition: transform .5s ease; } .header.active { transform: none; overflow-y: visible; } .header__close{ z-index: 11; } .header-content { display: flex; justify-content: space-between; align-items: flex-start; position: relative; } .header-icon { display: none; height: 100%; } .header-icon-img { width: 100%; height: 100%; object-fit: contain; object-position: right; } .header-content { width: 100%; } .header__toggle { display: none; } .header h1 { font-size: 24px; margin: 0; text-align: center; } .h1 h1 { display: inline; } .h1 h1 a { color: inherit; } .h3 { font-size: 1.17em; font-weight: bold; } .title-nav, .interpret, .play-audio, .manuscript-link { color: #8B0000; color: var(--accent-color, #8B0000); } .verse-text { color: #2f2f2f; } .icon-edit.active { color: #8B0000; color: var(--accent-color, #8B0000); } .title-container { padding-right: 0; } .cloud { display: none; } .links { width: 820px; margin: 0 auto; padding-right: 160px } .links a { color: brown; color: var(--accent-color, brown); font-size: 10px; font-family: Arial, sans-serif; font-weight: 700 } .links .l { width: 160px } .links .r { width: 200px } .cloud { font-size: 16px; line-height: 2; } .cloud a { text-decoration: none; margin: 0 5px; } .cloud-book{ pointer-events: none; position: relative; } .cloud-book-wrap{ display: inline-block; position: relative; } .cloud-book-wrap:hover .cloud-book:before, .cloud-book-wrap.hover .cloud-book:before{ content:''; position:absolute; left: -6px; right: -4px; top: -2px; bottom: -4px; border: 1px solid; border-radius: 1rem; } .cloud-book-wrap:first-child:before { content: '['; } .cloud-book-wrap:last-child:after { content: ']'; } .book--Ps { font-weight: bold; } .book-group { white-space: normal; } .book-group-1 { color: #8B0000 } .book-group-2 { color: #2A2ACA } .book-group-3 { color: #088E08 } .book-group-4 { color: #996602 } .book-group-6 { color: #800; font-weight: 700 } .book-group-7 { color: #880000 } .book-group-8 { color: #996602 } .book-group-9 { color: #672AE8 } .book-group-10 { color: #088E08 } .book-group .non-canon { color: #888; } .cloud-book-ps { font-weight: 700; color: #edc78a } .cloud-chapter-links{ box-sizing: border-box; position: fixed; display: none; max-width: 22em; max-width: min( 22em, calc(100vw - 40px) ); width: max-content; z-index: 5; } .cloud-chapter-links.near-right{ left: auto; right: 20px; margin: auto; } .cloud-chapter-links__inner{ display: flex; flex-wrap: wrap; gap: .5em .25em; } .cloud-chapter-link__wrap{ width: 1.75em; } .cloud-chapter-link{ font-weight: normal; position: relative; } .cloud-chapter-link:hover:before{ content:''; position: absolute; top: calc(-.25em + 2px); left: calc(-.33em + .1px); right: -.33em; bottom: -.25em; border: 1px solid; border-radius: 5px; } .nav-kafism-2 { margin-left: 10px !important } .nav-chapters-2 li { display: block } .nav-chapters-2 .cur-chapter, .nav-chapters-2 .next-chapter, .nav-chapters-2 .prev-chapter { text-align: center } .bottom-menu-container { position: sticky; bottom: 0; width: 100%; z-index: 10; padding: 0 0 0 10px; } .kafizms-wrap, .bottom-menu { width: 100%; display: flex; align-items: flex-start; margin-right: auto; margin-left: 0; padding-top: 5px; font-size: 14px; } .bottom-menu a { color: #2a2a2a; color: var(--text-color, #2a2a2a); } .bottom-menu a:hover { color: #fa0000; } .prev-chap, .next-chap { white-space: nowrap; margin-top: -2.5px; } .prev-chap { padding-left: 10px; } .next-chap { padding-right: 10px; } .prev-chap a+a, .next-chap a+a { margin-left: 5px; } .lb-nav, .rt-nav, .rb-nav { position: fixed; display: flex; flex-direction: column; text-align: right; width: auto; bottom: 45px; right: 0; z-index: 12; opacity: 1; transition: opacity .6s ease; color: #8B0000; color: var(--accent-color, #8B0000); font-size: 24px; } .lb-nav { right: auto; left: 0; } .rt-nav { top: 9rem; /* TODO: use real calculated header height? */ bottom: auto; transition: top .5s ease; } .hide-header .rt-nav { top: 50px; } .lb-nav .link, .rt-nav .link, .rb-nav .link { position: relative; margin-right: 6px; margin-bottom: 10px; position: relative; background: #FBF5EA; background: var(--body-bg, #FBF5EA); border-radius: 5px; padding: 4px; } .rb-nav>.link[title]:after { content: attr(title); position: absolute; top: 0; right: 30px; background: #FBF5EA; background: var(--body-bg, #FBF5EA); border-radius: 3px; padding: 5px 10px 5px 5px; font-family: sans-serif; font-size: .8rem; opacity: 0; transition: opacity .3s ease; pointer-events: none; display: none; } .rb-nav>.link[title]:hover:after { opacity: 1!important; pointer-events: all; } .rb-nav>.link.btn-bookmark:after { display: block; } .rb-nav .btn-hide { order: -1; } .hide-rbnav .btn-hide:before { content: "\e906"; } .hide-rbnav .rb-nav .link:not(.btn-hide) { display: none; } .rb-nav.fade { opacity: 0; pointer-events: none } .yandex-share-wrap { position: absolute; right: 100%; top: 0; display: block; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .rb-nav__share.hover .yandex-share-wrap, .desktop .rb-nav__share:hover .yandex-share-wrap { opacity: 1; pointer-events: all; } .bottom-menu-container, .lb-nav, .rb-nav { transition: opacity 1s ease; opacity: 0; pointer-events: none; } .show-bottom-panel .bottom-menu-container, .show-bottom-panel .lb-nav, .show-bottom-panel .rb-nav { opacity: 1!important; pointer-events: all!important; } /* POPUPS */ .popup-wrap { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 13; display: flex; overflow-y: auto; padding-top: 40px; padding-bottom: 40px; background: #000a; opacity: 0; pointer-events: none; transition: opacity .5s ease; } .popup-wrap.active { opacity: 1; pointer-events: all; } .popup { width: 21em; max-width: 90vw; max-width: calc(100vw - 40px); margin: auto; padding: 10px 15px; border-radius: 5px; position: relative; } .popup hr { margin: 10px 0; } .popup textarea { width: 100%; box-sizing: border-box; padding: 3px 5px; text-align: left; } .popup textarea, .popup p { margin-bottom: 5px; } .popup button+button { margin-left: 5px; } .popup-footer { display: flex; justify-content: flex-end; } .btn-close { display: block; position: absolute; top: 10px; right: 10px; text-align: right; margin-left: auto; cursor: pointer; } /* HELPER POPUPS */ #alert_popup .title { white-space: normal; } /* ADD TO FAVORITE POPUP */ .color-swatch { display: inline-flex; justify-content: center; align-items: center; vertical-align: top; width: 1.2em; height: 1.2em; border-radius: 2em; color: #fff; } #add_fav_popup .text { font-weight: bold; } #add_fav_popup .tag { cursor: pointer; } #add_fav_popup .btn-personal { position: absolute; right: 40px; color: #2a2a2a; color: var(--text-color, #2a2a2a); } #add_fav_popup .title a { text-decoration: underline; text-decoration-color: #ccc; text-decoration-thickness: 0.5px; text-underline-offset: 1px; } .tag-input-wrap { margin-top: 8px; display: flex; align-items: center; } #add_fav_tag_input { flex-grow: 1; width: auto; min-width: unset; } .glow { animation: glow 2s ease-out 2 alternate; } @keyframes glow { 0% { box-shadow: 0 0 0 #FFB700; } 33% { box-shadow: 0 0 0 #FFB700; } 66% { box-shadow: 0 0 10px #8B0000; box-shadow: 0 0 10px var(--accent-color, #8B0000); } } /* SETTINGS */ .settings label { display: block; margin-top: 10px; margin-right: 20px; } .settings .flex-row label { margin-top: 3px; } .chapters { list-style-type: none; text-align: center; display: flex; justify-content: flex-start; } .multiline-nav .bottom-menu .chapters { display: grid; grid-template-columns: repeat(auto-fill, 2em); row-gap: 5px; } .multiline-nav .chapters-wrap { width: 100%; overflow: hidden; } .multiline-nav .prev-chap, .multiline-nav .next-chap { display: none; } .chapters-wrap { /* flex-grow:1; */ overflow-x: auto; padding: 5px; margin: -5px 25px 0 -5px; } .kafizms-wrap .chapters li, .bottom-menu .chapters li { margin: 0 1em; } .navigation-menu-tab td:last-child ul { border-right: none } .chapter-href, .page-item { padding: 1px 4px 3px; min-width: 1em; text-align: center; border: 1px solid #F0000000; } .chapter-href:hover, .page-item:hover { border-radius: 5px; border: 1px solid #F00000; } .page-item.active, .current-chapter { border-radius: 5px; border: 1px solid #8b0000; border: 1px solid var(--accent-color, #8b0000); } .chapters li { text-align: center; } .chapters_title { font-weight: 700; font-size: 12pt; text-align: center } .sidebar-r { position: fixed; left: auto; right: 0; top: 202px; transform: translateX(100%); min-width: 272px; padding: 14px 19px 12px 17px; z-index: 9; border-radius: 5px 0 0 5px; transition: transform .5s ease; } .has-sidebar-r .sidebar-r { transform: none; } .sidebar-toggle { transform: translateX(-40px); } .sidebar-toggle:before { content: ''; position: absolute; border-radius: 30px; left: -10px; top: -10px; bottom: -10px; right: 0; z-index: -1; transition: transform .5s ease, opacity .5s ease; pointer-events: none; } .sidebar-toggle__icon { transition: transform .5s ease; } .has-sidebar-r .sidebar-toggle { transform: none; } .has-sidebar-r .sidebar-toggle__icon { transform: rotate(90deg); } .has-sidebar-r .sidebar-toggle:before { opacity: 0; box-shadow: none; } .sidebar-block { display: block; margin-top: 20px; } .sidebar-block--offset { padding-left: 25px; position: relative; } .sidebar-block__icon { position: absolute; left: 0; font-size: 20px; color: #8B0000; color: var(--accent-color, #8B0000); } .sidebar-block__icon:before { vertical-align: -5%; } /* Общие стили всех панелей */ #mobile-nav, .header, .panel, .sidebar-toggle:before, .bottom-menu-container, .langs, .parallel, .popup, .settings, .interpret-list { background: #fafafa; background: var(--widget-bg, #fafafa); box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.25); } .panel { padding: 10px 15px; border-radius: 5px; max-height: 60vh; overflow-y: auto; scrollbar-color: var(--accent-color, #8B0000) var(--widget-bg, #ccc); scrollbar-width: thin; } .panel::-webkit-scrollbar { width: 4px; height: 4px; background-color: var(--widget-bg, #ccc); } .panel::-webkit-scrollbar-thumb { background-color: #8B0000; background-color: var(--accent-color, #8B0000); } .langs { padding: 10px 15px; border-radius: 5px; z-index: 5; overflow-x: hidden; overflow-y: auto; font-size: 1rem; } .add-lang__list, .replace-lang__panel { position: fixed; left: 50vw; top: 50vh; transform: translate(-50%, -50%); max-height: 54vh; } .langs { list-style-type: none } .lang-link a { display: block; white-space: nowrap; } .lang-link+.lang-link { margin-top: 5px; } .remove-lang__all { margin-right: 11px; } .about-link { text-align: center; margin: 5px 0 } .title, .interpret_header { color: #8B0000; color: var(--accent-color, #8B0000); margin-bottom: 10px; font-weight: bold; white-space: nowrap; } .interprets { min-width: 242px; } .interprets li { margin: 5px 0 5px 1.2em; white-space: nowrap; } .interpret, .book-tools { display: inline-block; position: relative; } .interpret-list { position: absolute; z-index: 10; opacity: 0; pointer-events: none; transition: opacity .5s ease; border-radius: 5px; padding: 2px 10px; } .interpret:hover .interpret-list, .interpret-list.active { position: fixed; opacity: 1; left: 50px; right: 50px; opacity: 1; pointer-events: all; } .interlinear a { display: block; } .lang-visible-1 { display: none } .sidebar-r .img-divider { background: url(../img/dividers_13.svg) 50% no-repeat } .book-layout { overflow: hidden; min-height: 100vh; padding-bottom: 20px; } .content { min-height: 500px; width: 100%; } .selection-menu { position: fixed; top: 0; left: 0; z-index: 12; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; transform: translate(calc(50vw - 50%), calc(100vh - 100% - 32px)); transition: opacity .3s ease, transform .3s ease!important; } .selection-menu>a { display: block; white-space: nowrap; margin-top: 10px; } .selection-menu hr { margin-block-start: 10px; margin-block-end: 10px; } .selection-menu .deselect { align-self: flex-end; text-align: right; margin-bottom: -20px; margin-right: -5px; margin-top: 4px; } .social-menu:before { font-family: icomoon; content: "\e90d"; margin-right: 5px; color: #8B0000; color: var(--accent-color, #8B0000); } .social-menu { display: flex; gap: 1px; margin-bottom: -4px; } .social-menu a { display: inline-flex; justify-content: center; align-items: center; width: 2.25em; height: 1.5em; background: #efe9e9; background: var(--body-bg, #efe9e9); } .social-menu a:first-of-type { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .social-menu a:last-of-type { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .social-menu .fa-whatsapp { margin-left: .1em; } .main, .wrap, .tbl-content, .column-header { background: inherit; } .interpretation, .verse { font-family: var(--content-font); -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .no-hyphens .interpretation, .no-hyphens .verse{ -moz-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } .verse b{ font-weight: 400; } .verse.current-line{ background: var(--widget-bg); } /* Verses table */ .tbl-content { display: grid; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; grid-auto-flow: column; grid-template-columns: var(--num-col-width) repeat(auto-fit, calc(100vw - var(--num-col-width))); } .scrolling .verse{ pointer-events: none; } .tbl-content .verse>p { margin-bottom: 0; } .full-row { grid-column: 1/span calc(var(--col-count) + 1); } .the-slava, .chapter-title { color: #999; padding: 10px 50px; max-width: calc(100vw - 100px); position: sticky; left: 0; } .chapter .favorite { vertical-align: baseline; white-space: nowrap; display: inline-flex; align-items: center; max-width: 90vw; color: #088E08; } .chapter .favorite .comment { display: block; font-family: sans-serif; font-size: 1rem; /*max-width: 20rem;*/ flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-1 { grid-column: 2; } .col-2 { grid-column: 3; } .col-3 { grid-column: 4; } .col-4 { grid-column: 5; } .verse { box-sizing: border-box; list-style-type: none; padding: 0 27px 0 0; margin: 0; width: calc(100vw - var(--num-col-width)); max-width: 100%; cursor: pointer; position: relative; } .text-justify .verse{ text-align: justify; } .verse-chapter-title { padding-top: 1em; padding-bottom: 1em; color: #999; font-style: italic; font-weight: normal; font-size: .95em; } /* подсветка title */ abbr[title] { text-decoration: underline; text-decoration-color: #999; text-decoration-style: dotted; } abbr[title]>* { user-select: none; } abbr[title].hover>* { user-select: auto } .flat-panel { margin-top: 3px; padding: 3px 10px 5px; border: 1px solid #ccc; border-radius: 5px; text-decoration: none!important; background: #fafafa; background: var(--widget-bg, #fafafa); z-index: 1; } /* Содержимое панелей */ .panel :where(ol, ul) li, .flat-panel :where(ol, ul) li { margin-left: 2em; } /* при в динамической загрузке */ .tbl-content+.tbl-content .verse-chapter-title { padding-top: 0; padding-bottom: .75em; } .no-translation.dummy-verse { padding-left: 50px; } .verse .btn-verse-comment { color: #ccc; position: relative; } .verse .btn-verse-comment:after { content: ''; position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px; } .verse-comment-panel { position: relative; } .verse-comment-panel .btn-close { position: unset; float: right; } .verse .checkbox { font-size: 12px; border: 1px solid #999; border-radius: 3px; color: transparent; position: absolute; right: 12px; top: 5px; } .verse.selected { background: #fff!important; background: var(--widget-bg, #fff)!important; color: #8B0000; color: var(--accent-color, #8B0000); } .verse.selected .checkbox { color: #8B0000; color: var(--accent-color, #8B0000); border-color: #8B0000; border-color: var(--accent-color, #8B0000); } .new-chapter { margin-top: 20px; } .the-slava { font-weight: bold; } .the-slava.fix-offset { padding-top: 0; padding-bottom: 0; } /* favorites */ .favorite { font-size: 1rem!important; font-weight: normal!important; } .favorite .controls { display: inline-block; white-space: nowrap; } .favorite .controls span { cursor: pointer } .favorite .controls span+span { margin-left: 10px; } .no-fav .fav-remove { display: none; } .popup-footer .fav-remove { margin-right: auto; } .has-fav .fav-edit:before { content: '\e91c'; /* Меняем звёздочку на значок "редактировать" */ } .favorite .tag-container+.comment { margin-left: 5px; } .favorite .comment+.controls { margin-left: 5px; } .favorite.no-fav :where(.comment, .tag-container) { display: none; } .favorite.no-fav .controls { margin-left: 0; } .verse[data-fav-id] { text-decoration: underline; text-decoration-thickness: 2px; } .verse .favorite { position: absolute; right: 10px; top: 30px; font-family: var(--content-font); text-decoration: none; } .verse .favorite>span { display: none; } .verse .favorite .controls { display: inline-block; } .selected .verse .favorite { z-index: 2; background: #fff; background: var(--widget-bg, #fff); border-radius: 5px; } /* .selected .verse .favorite span{ display: inline; } */ .popup .tag-container:empty:before { content: '(меток нет)'; color: #ccc; } .tag-scroller { display: block; width: 100%; overflow-x: auto; white-space: nowrap; } .tag { display: inline-block; background: #dde; color: #000; border-radius: 3px; padding: 2px 8px 4px; /*border: 1px solid #999;*/ line-height: 1; vertical-align: middle; } .tag.removable { padding-right: 1px; } .tag.removable:after { content: "\e90f"; font-family: icomoon; vertical-align: -2px; color: #999; } .tag+.tag { margin-left: 2px; } /* end favorites */ .column { min-width: 100px; } .number, .col-numbers { box-sizing: border-box; padding-right: 10px; width: var(--num-col-width); min-width: var(--num-col-width); position: sticky; justify-self: start; grid-column: 1; left: 0; text-align: right; line-height: 1.25rem; background: inherit; z-index: 1; font-size: 12px; color: #999; white-space: nowrap } .number:hover, .col-numbers:hover { z-index: 3; } .hide-verse-numbers .number{ display: none!important; } .hide-verse-numbers #toggle_verse_numbers{ transform: scaleX(-1); } .parallel_toggle { color: inherit; } .has-crossref .verse { color: #999; } .has-crossref .verse.crossref-verse { background: #fffa4d54!important; color: #2a2a2a; color: var(--text-color, #2a2a2a); } .has-crossref .verse.crossref-verse.verse-chapter-title{ background: transparent!important; } .parallel { position: absolute; top: -1em; left: 80%; z-index: 2; padding: 5px 10px; font-size: .8rem; border-radius: 4px; width: 80vw; min-width: 300px; max-width: var(--col-width); } .number.last .parallel { transform: translateY(calc(1em - 100%)); } .parallel a { white-space: nowrap; } .parallel a:hover { background: #fff; background: var(--widget-bg, #fff); color: #000 } .col-lang-i .verse { direction: rtl; text-align: right } .verse-fullnumber { white-space: nowrap } .verse-suffix { font-style: italic } .col-visible-0 { display: none } .add-lang { margin-left: auto; margin-right: 10px; position: relative; white-space: nowrap; } .disable-lang { border: 0; margin: 0 0 0 5px!important; color: #8B0000; color: var(--accent-color, #8B0000); } .disable-lang, .add-lang__icon { appearance: none; font-size: 1.2em; cursor: pointer; } .add-lang__icon { margin-left: 5px; display: inline-block; vertical-align: middle; text-align: center; background: #8B0000; background: var(--accent-color, #8B0000); color: #fff; color: var(--widget-bg, #fff); border-radius: 2em; width: 1em; height: 1em; } .add-lang__icon:after { content: '+'; font-size: 0.9em; font-weight: bold; line-height: 1; vertical-align: top; } .add-lang:hover .add-lang__wrap { color: #F00000; } .disable-lang:before { font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e908" } .more-lang { cursor: pointer; margin-left: auto; position: sticky; right: 0; background: inherit; padding-left: 5px; padding-right: 5px; } .numbers .toggle-down, .numbers .toggle-up { color: red } .chapter-begin, .chapter-end { display: none } .column-header { position: relative; color: #8B0000; color: var(--accent-color, #8B0000); border-bottom: 1px solid #ccc; } .column-header, .numbers-header { height: 24px; max-width: calc(100vw - var(--num-col-width)); padding-bottom: 5px; margin-bottom: 5px; display: flex; gap: 10px; align-items: center; } .numbers-header { font-size: 1rem; color: #8B0000; color: var(--accent-color, #8B0000); } .numbers-header__inner { padding-left: 5px; display: none; } .has-switcher-0 .column-header { height: 24px; padding-top: 20px } .lang-label { cursor: pointer; white-space: nowrap; max-width: calc(100% - 5rem); overflow: hidden; } .lang-label:hover .lang-label__title { color: #F00000; } .lang-ucs-result, .lang-ucs { font-family: Loaded Ucs; font-size: 1.25em; line-height: 1.25; } .lang-utfcs .verse { font-family: Loaded UTFcs !important; font-size: 15pt; line-height: 1.2em } .main-lang-utfcs h1, .main-lang-utfcs .breadcrumbs{ font-family: Loaded UTFcs !important; } .main-lang-utfcs .breadcrumbs{ font-size: 16px; } .lang-utfcs, .replace-lang-utfcs, .langs #lang-utfcs.lang-link a { font-family: Loaded UTFcs !important; font-size: 1.2em; } .lang-utfcs-result { font-size: 15pt; line-height: 1.2em } .books-lang-utfcs .col-new, .books-lang-utfcs .col-old, .books-lang-utfcs .notes, .books-lang-utfcs .part-header, .books-lang-utfcs div.mt7, .books-lang-utfcs div[style="text-align:left;"], .books-lang-utfcs h1, .lang-utfcs, .lang-utfcs-result, .ln-utfcs div { font-family: Loaded UTFcs !important } /* Арабский, иврит */ .lang-ar, .books-lang-ar .col-new, .books-lang-ar .col-old, .lang-i, .books-lang-i .col-new, .books-lang-i .col-old, .lang-n, .books-lang-n .col-new, .books-lang-n .col-old, .lang-he, .books-lang-he .col-new, .books-lang-he .col-old { text-align: right !important; direction: rtl; } .parallel_toggle+.parallel { cursor: default; text-align: left; white-space: normal; } .parallel_toggle+.parallel a { text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip: ink } .parallel_toggle+.parallel a b { font-weight: 400 } .number-inner:hover .parallel { display: block !important; } .parallel_toggle .verse-fullnumber { text-decoration: underline; text-decoration-thickness: 1px; } /* chapter test */ .test-chapter-button { margin: 5px 0; } .test-chapter-text { display: none; } .test-chapter-button.active+.test-chapter-text { display: block; } .test-chapter-text :where(p, ul, ol, details) { margin-bottom: 5px; } /* LOAD MORE */ .load-more__wrap { margin: 20px 0 20px; text-align: center; width: calc(var(--col-width) * var(--col-count)); max-width: calc(100vw - 100px); padding: 0 50px; box-sizing: content-box; } .load-more__button .preloader { display: block; animation: rotating 2s linear infinite; } @keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .context-warning { margin-top: 1rem; color: red; text-align: center; font-size: 12px; } /* Special fonts */ @font-face { font-family: Ponomar; src: url(../fonts/PonomarUnicode.ttf) format("truetype"); font-style: normal; font-weight: 400; font-display: swap } @font-face { font-family: Loaded Ucs; src: url(../fonts/HirmIEUcs8.eot?#iefix) format("embedded-opentype"), url(../fonts/HirmIEUcs8.ttf) format("truetype"); font-style: normal; font-weight: 400; font-display: swap } @font-face { font-family: Loaded UTFcs; src: url(../fonts/PonomarUnicode.woff) format("woff"), url(../fonts/PonomarUnicode.ttf) format("truetype"); font-style: normal; font-weight: 400; font-display: swap } #player-caption { text-align: center } .sublang-switcher { list-style-type: none; margin: 0; padding: 0; float: left; width: 100% } .sublang-switcher li { display: block; float: left; margin: 0; padding: 1px; background: #f1e9d6; border-color: #fff #fff silver silver; border-style: solid; border-width: 2px; font-family: Arial, serif; font-size: 10pt; font-style: normal } .sublang-switcher a { color: #000 } .sublang-switcher li.switcher-selected-1 { background-color: #fcfaf0; border-color: silver silver #fff; border-style: solid; border-width: 2px 1px } .debug { padding-left: 100px } .book-nav .sidebar-l { width: 70px } .book-nav .content { margin-left: 75px } .book-1cor .chapters_wrap, .book-1jn .chapters_wrap, .book-1mac .chapters_wrap, .book-1pet .chapters_wrap, .book-1tim .chapters_wrap, .book-2cor .chapters_wrap, .book-2ezr .chapters_wrap, .book-2jn .chapters_wrap, .book-2mac .chapters_wrap, .book-2pet .chapters_wrap, .book-2tim .chapters_wrap, .book-3ezr .chapters_wrap, .book-3jn .chapters_wrap, .book-3mac .chapters_wrap, .book-am .chapters_wrap, .book-avd .chapters_wrap, .book-bar .chapters_wrap, .book-col .chapters_wrap, .book-dan .chapters_wrap, .book-eccl .chapters_wrap, .book-eph .chapters_wrap, .book-est .chapters_wrap, .book-ezr .chapters_wrap, .book-gal .chapters_wrap, .book-habak .chapters_wrap, .book-hag .chapters_wrap, .book-hebr .chapters_wrap, .book-hos .chapters_wrap, .book-jac .chapters_wrap, .book-joel .chapters_wrap, .book-jona .chapters_wrap, .book-juda .chapters_wrap, .book-judf .chapters_wrap, .book-lam .chapters_wrap, .book-mal .chapters_wrap, .book-mic .chapters_wrap, .book-mk .chapters_wrap, .book-naum .chapters_wrap, .book-nehem .chapters_wrap, .book-phil .chapters_wrap, .book-phlm .chapters_wrap, .book-pjer .chapters_wrap, .book-rom .chapters_wrap, .book-rth .chapters_wrap, .book-sofon .chapters_wrap, .book-solom .chapters_wrap, .book-song .chapters_wrap, .book-tit .chapters_wrap, .book-tov .chapters_wrap, .book-zah .chapters_wrap { width: 45% } .book-ps .chapters_wrap { width: 100% } .cuSnos { font-style: italic; font-family: Segoe UI, Open Sans, Arial, sans-serif; font-size: 12pt; font-weight: 400; color: green } .ccSkob { font-style: normal; font-family: Times, serif } .ccSkob, .ccSnos { font-size: 13.5pt; color: green } .ccSnos { font-family: Loaded Ucs; line-height: 1.2em } .bukv { color: #999; font-size: 12px; text-align: right; position: relative; bottom: 1px; padding-right: 2px; vertical-align: top; } .blue-asterisk { display: none } .cyn { color: brown; color: var(--accent-color, brown); font-weight: 400; font-style: italic } .cynb { color: brown; color: var(--accent-color, brown); font-style: italic } .zachala { color: red } .snos { font-size: 11pt; font-style: italic; font-family: Times New Roman, serif; line-height: 6px; user-select: none; } .vstavAV { color: red } .snosCit { color: navy; font-style: normal; font-family: Arial, sans-serif } .dark-theme .snosCit { color: rgb(0, 203, 248); } .cynn { color: brown var(--accent-color, color: brown) } .buttons .audio-link, .title .audio-link { font-size: 14pt; color: #18530b; font-weight: 700; font-family: sans-serif } .title .audio-link:hover { color: #2b9614 } .book-layout .form_search .submit, .header .form_search .submit, .main .form_search .submit { cursor: pointer; border-radius: 3px; background-color: #efeeea; background-position: 50%; background-repeat: no-repeat; background-image: url(../img/search.png?2); background-image: url(../img/search.png?2), linear-gradient(-45deg, #e1dfd7, #fefefe); width: 25px; height: 20px; border: 1px solid #a9a9a9; vertical-align: top } .header .form_search .submit { height: 25px; vertical-align: bottom } .buttons { margin-top: 8px; margin-bottom: 5px } .buttons .l, .buttons .r { width: 160px } .buttons .r { text-align: left } .buttons .l { text-align: right } .btn { background-color: #7fbf4d; display: block; width: 160px; padding: 7px 3px 8px; text-align: center; font-weight: 700; color: #fff; border-radius: 3px; border: 1px solid #63a62f; border-bottom-color: #5b992b; box-shadow: inset 0 1px 0 0 #96ca6d; text-shadow: 0 -1px 0 #4c9021; font: 700 14px/1 Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif } .lvl1, .lvl2, .part-header { font-weight: 700 } .star { color: #8B0000; color: var(--accent-color, #8B0000); } .book-links { font-family: var(--content-font); } .book-links .divider { text-align: center; margin: 10px 0 } .footer { background: #998e69; color: #f0f0f0aa; position: relative; z-index: 11; padding: 20px 0; max-width: 100vw; overflow: hidden; } .footer-stat, .footer a { color: #fff; } .footer a:hover { color: #f2df0d; } .footer-list-wrap { display: flex; flex-direction: column; justify-content: flex-start; } .footer-list { list-style: square; margin-left: 1em; } .footer-list li { margin-bottom: 5px; } .footer__feedback-layer { position: relative; } .feedback { text-align: center; margin-top: 10px; } .feedback-link { display: block; color: #999; } .feedback-link+.feedback-link{ margin-top: 5px; } .evang-footer{ font-size: 12px; max-width: 50rem; margin-left: 0; } .footer .accent-link { background: #fafafa; color: #5F5C55; padding: 0 3px 3px; text-align: center; border: 2px solid #f2df0d00; transition: border .2s ease, background .2s ease; } .footer .accent-link:hover { background: #fafafa00; border: 2px solid #f2df0d; } .divider { text-align: center; margin: 5px 0; width: 100%; } .book-layout .divider img, .search .divider img { height: 25px; width: 100%; } .links .c img { height: 25px; margin-top: 2px } .main .yandex-share-wrap { width: 140px; height: 30px; overflow: hidden } .book-layout .yandex-share-wrap { width: 820px; margin: 0 auto } .book-layout .yandex-share-inner, .header .yandex-share-inner { width: 140px; overflow: hidden; float: right } .path { padding: 7px 15px 3px; color: #805536; font-family: Arial, serif !important } .path a { color: #18530b; text-decoration: underline } .path a:hover { color: #2b9614; text-decoration: none } .menu p { margin-top: 7px } .menu td { width: 50%; text-align: center; vertical-align: middle; font-size: 16px } .menu a { color: #930; text-decoration: underline; font-weight: 700 } .menu a:hover { text-decoration: none } pre { background: #fff; background: var(--widget-bg, #fff); padding: 5px } a.back { position: absolute; top: 15px; left: 40px; z-index: 3; background: url(../misc/back.png); display: block; width: 49px; height: 48px; cursor: pointer } a.back:hover { background-position: 0 -49px } .vklike { clear: none !important } .langs_description { font-size: 15.5pt; display: none } .langs_description h2 { font-family: Arial sans-serif; color: #805536; text-align: center; font-weight: 700; font-size: 25px } .rating { width: 350px; display: inline-block } .rating #rate-box { float: none; position: relative; top: 37px; left: 180px; z-index: -1 } .book-layout #popup-help, .header #popup-help { left: 170px; bottom: 24px } .books-lang-r a[href*="Ps.1"], .books-lang-ru a[href*="Ps.1"]{ color: green } #volunteer { box-sizing: border-box } .volunteer-banner-no-auth p, .volunteer-banner p, .volunteer-buttons input, .volunteer-checkbox { font-family: pt_sans, Arial, Helvetica, sans-serif } .volunteer-banner-no-auth p, .volunteer-banner p { font-size: 15px; color: #000 } .volunteer-banner, .volunteer-banner-no-auth { display: none; position: fixed; top: 0; left: 0; width: 100%; min-width: 300px; padding: 15px 30px 10px; z-index: 9999; background: #fff; background: var(--widget-bg, #fff); text-align: center; box-shadow: 0 0 10px #000 } .volunteer-banner-no-auth a, .volunteer-banner a { text-decoration: underline } .volunteer-banner-no-auth a:hover, .volunteer-banner a:hover { text-decoration: none } .volunteer-wrapper { position: relative; margin: 0 auto; width: 100%; height: 100%; z-index: 1 } .volunteer-buttons input { display: inline-block; width: 210px; height: 25px; margin: 10px 20px 5px; padding: 0; line-height: 25px; font-size: 14px; text-align: center; cursor: pointer } .volunteer-buttons input#vol-yes { color: #fff; background: linear-gradient(#f9ac4f, #f6941e); border: 1px solid #d7b67d; cursor: pointer } .volunteer-buttons input#vol-no { color: #2b2b2b; background: linear-gradient(#fcfcfc, #dfdfdf); border: 1px solid #d2d2d2 } .volunteer-checkbox .jq-checkbox { margin-right: 7px; vertical-align: bottom } .volunteer-checkbox label { cursor: pointer } #volunteer h3 { display: inline-block; margin-top: 3px; font-size: 19px; font-weight: 700 } @media (max-width: 1000px) { #lnk_mobile { display: block !important } } .maxh30 { max-height: 30px !important } .maxh20 { max-height: 20px !important } .maxh10 { max-height: 10px !important } .fs10pt { font-size: 10pt } .fs11pt { font-size: 11pt } .fs12pt { font-size: 12pt } .mt0 { margin-top: 0 !important } .divline { max-height: 1px; min-height: 1px; background-color: #a6a093; margin: 1px 0; width: 100% } .ml5 { margin-left: 5px !important } .ml15 { margin-left: 15px !important } .mt7 { margin-top: 7px } .p05 { padding: 0 5px !important } .ta-center { text-align: center !important } .f-arial { font-family: Arial, serif !important } .fs-smaller { font-size: smaller } .small, small { font-size: 12px; } .abc-counter { font-size: 12px; margin-bottom: 5px; } .abc-counter-now { font-weight: 400 } .title-nav { display: inline-block; white-space: nowrap; font-size: 24px; color: #8B0000; color: var(--accent-color, #8B0000); } .title-nav .goto-book, .title-nav .nav-interp-chapter { color: #FBF5EA; color: var(--body-bg, #FBF5EA); background: #8B0000; background: var(--accent-color, #8B0000); border-radius: 2em; } .chapter-nav-icon { font-size: 18px; border-width: 1px; border-color: #ccc; } @media (max-width: 1155px) { a.back { display: none !important } } .search-form-field.hide_cross::-webkit-search-cancel-button { -webkit-appearance: none } /* MOB MENU */ #mobile-nav { position: fixed; z-index: 11; top: 0; width: 100vw; display: flex; gap: 5px; justify-content: space-around; font-size: 24px; color: #8B0000; color: var(--accent-color, #8B0000); } #mobile-nav .link { flex-basis: 10%; padding: 4px; text-align: center; margin: auto; flex-grow: 1; } #mobile-nav .link.active { background: #2a2a2a; background: var(--text-color, #2a2a2a); color: var(--widget-bg, #fff); } .main-menu-btn { position: relative; display: inline-block; width: 28px; height: 28px; text-indent: 28px; white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } .main-menu-btn-icon, .main-menu-btn-icon:after, .main-menu-btn-icon:before { position: absolute; top: 50%; left: 2px; height: 2px; width: 24px; background: #555; transition: all .25s } .main-menu-btn-icon:before { content: ""; top: -7px; left: 0 } .main-menu-btn-icon:after { content: ""; top: 7px; left: 0 } /* TOP MENU */ .header #nav-box{ position: static; width: 100%; box-shadow: none; } .header #main-nav{ background: transparent; border-bottom: 1px solid #eaeaea; } .header #nav-box .sub-menu{ --tmp: var(--widget-bg); --widget-bg: var(--body-bg); --body-bg: var(--tmp); } @media (min-width: 769px){ #nav-box { margin-top: -5px; } } .create-bookmark { box-sizing: border-box; width: 40px; height: 40px; top: 480px; z-index: 89999; transition: left .5s ease-in-out; display: block; background-size: 100%; color: #9e9e9e; text-align: left; margin: 0 auto 0 0 } .create-bookmark:hover { color: #f9d063 } .create-bookmark .svg-inline { width: 25px; height: 25px; cursor: pointer; transition: color .4s } .loader { border-radius: 50%; border: 16px solid #f3f3f3; border-top-color: #ffdb95; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite } .loader-container { position: absolute; top: 50%; display: block; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .modal { display: none; position: fixed; z-index: 99999; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000; background-color: rgba(0, 0, 0, .4) } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(1turn) } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } .selected-verse { transition: background-color .3s; background-color: rgba(253, 228, 168, .4); border-radius: 10px } .custom-checkbox { display: inline-block; width: 20px; height: 20px; border-radius: 3px; border: 1px solid #bdbdbd; background-color: #fbfbfb; visibility: visible; width: 22px; height: 22px; top: 0; position: relative; transition: background-color .3s; text-align: center; vertical-align: middle; cursor: pointer } .custom-checkbox.selected { background-color: #f9d063 } .custom-checkbox.selected .svg-inline { width: 10px; height: 8px; visibility: visible } .custom-checkbox .svg-inline { visibility: hidden } .popup .popuptext { background-color: #716f6f; color: #fff; text-align: center; border-radius: 6px; z-index: 9999; margin-left: -80px; padding: 11px 8px; position: absolute; width: 143px; display: flex; justify-content: center; align-items: center; height: 60px; bottom: 50px; right: -2px } .popup .popuptext:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #555 } .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s } @-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } .add-bookmark_container { position: fixed; bottom: 20px; left: 2%; width: 40px; height: 40px } .add-bookmark_button { width: 100%; height: 100%; border-radius: 50%; color: #9e9e9e; cursor: pointer; transition: color .4s } .add-bookmark_button:hover { color: #f9d063 } #bookmarkPopup:after { left: 13% } #bookmarkPopup { left: 198%; bottom: 130%; position: absolute } .add-bookmark_container div.popup { bottom: 0; left: 0 } /* Bible info */ .bible-info__panel { width: 500px; } .bible-info__content ol { margin-left: 1em; } /* Custom icons */ .icon-m { font-size: 20px; vertical-align: middle; } .btn-back-to-index { margin-top: 20px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto } #orphus { opacity: .8; margin: 5px auto; display: block; } /* comments fix */ .dark-theme .cc .mc-comment-username, .mc-complaint .mc-comment-username, .dark-theme .cc .mc-comment-msg, .mc-complaint .mc-comment-msg{ color: var(--text-color, #fafafa)!important; } /* TOOLTIP */ .tooltip { box-sizing: border-box; display: none; position: absolute; border: 1px solid #333; background-color: #161616; border-radius: 5px; padding: 2px 10px 8px; max-width: 300px; z-index: 12; pointer-events: none; } .tooltip-content { color: #fff!important; font-size: .8rem; font-family: Arial, sans-serif; margin: 0!important; position: unset!important; } /* screen-size and conditions related */ body:not(.single-lang-page) .single-lang-only { display: none!important; } /* notifications */ #notification_container { position: fixed; bottom: 100px; right: 50px; left: 50px; z-index: 20; pointer-events: none; } .notification { display: none; width: fit-content; margin: 5px 0 0 auto; } .notification.left-side{ margin-left:0; margin-right: auto; } .notification+.notification { margin-top: 5px; } /* DESKTOP, non-mobile */ @media (hover:hover) and (min-width: 769px) { .link:hover, a:hover { color: #F00000; } .add-lang__list, .replace-lang__panel { position: absolute; top: 100%; margin-left: 1em; transform: unset; } .replace-lang__panel { margin-top: -10px; right: auto; left: 0; } .add-lang__list { right: 0; left: auto; } } @media (max-width:768px) { .desktop-only { display: none!important; } } /* iPad */ @media (min-width:521px) { h1 { width: auto; font-size: 30px; letter-spacing: 0.05em; margin: 0 2px 0 -2px; } .h1 { margin: 20px 0 20px; } .title-nav { font-size: 30px; } .chapter-nav-icon { font-size: 18px; } .footer-list-wrap { flex-direction: row; flex-wrap: wrap; } .footer-list{ margin-left: 0; } .footer-list li { display: block; break-inside: avoid; margin-right: 30px; } .feedback { display: block; text-align: right; position: absolute; right: 0; bottom: 0; } .feedback-link { margin-top: 0; } .interpret:hover .interpret-list{ position: absolute; left: auto; right: auto; } #notification_container { left: 100px; right: 100px; } } /* NON-mobile */ @media (min-width:769px) { .desktop-hide { display: none!important; } .container{ padding: 0 20px; } .chapters-wrap::-webkit-scrollbar-thumb { background-color: #8B0000; background-color: var(--accent-color, #8B0000); } .chapters-wrap::-webkit-scrollbar { display: initial; width: 4px; height: 4px; } .tag-scroller { scrollbar-width: thin; } .tag-scroller::-webkit-scrollbar { /*display: initial;*/ width: 8px; height: 8px; } .tag-scroller::-webkit-scrollbar-thumb { background-color: #ccc; } body { padding-top: 0; } #main-menu { font-size: .75rem; } .sm-mint a, .sm-mint a.highlighted, .sm-mint a:active, .sm-mint a:focus, .sm-mint a:hover, .sm-mint li.has-submenu>a { padding: 3px 5px } .sm-mint a .sub-arrow { right: 7px } .sm-mint li.has-submenu>a:after { content: none; } .input, input[type=number], input[type=text], input[type=search], input[type=email], input[type=password], select, textarea { padding-top: 1px; padding-bottom: 3px; } .form_search { display: block; width: auto; } .header .form_search { position: absolute; right: 0; z-index:2; } .cloud { font-size: .85rem; line-height: inherit; } .cloud a { margin: 0; } .cloud-chapter-links{ position: absolute; left:0; } .cloud-chapter-links.near-right{ left: auto; right: 0; } .cloud { display: block; } .header { position: sticky; overflow-y: visible; top: 0; transform: none; padding: 5px 0; transition: transform .5s ease, margin-bottom .5s ease; } .header-container { max-height: 9em; transition: max-height .5s ease; overflow: hidden; } .header-container:hover { overflow: visible; } .header__toggle { display: block; position: absolute; right: 9px; bottom: 0; transform: translateY(1.2rem); transition: transform .5s ease, background .5s ease; } .header__toggle__show { display: none; font-size: 24px; } .header__toggle__hide { font-size: .7rem; } .hide-header .header__toggle { transform: translateY(40px); background: transparent; } .hide-header .header__toggle__show { display: block; } .hide-header .header__toggle__hide { display: none; } .hide-header .header { transform: translateY(-100%); } .hide-header .header-container { max-height: 0px; } .hide-header .index-page .header { transform: none; margin-bottom: 0; } .header__close { display: none; } .header-content { width: auto; flex-shrink: 2; margin-bottom: 3px; } .title-container, .header-container, .footer-container { padding-left: var(--num-col-width); } .footer-container { padding-right: 50px; } .tbl-content { overflow: visible; width: 100%; width: max-content; grid-template-columns: var(--num-col-width) auto; } .column-header { max-width: calc((100vw - var(--num-col-width)) / var(--col-count)); } .book-layout { padding-left: calc(50vw - var(--num-col-width) - (var(--col-width) * var(--col-count)) * 0.5); } .title__chapters-selector__panel { width: auto; max-width: 50vw; } .title__chapters-selector__panel ul { grid-template-columns: repeat(10, 1fr); gap: 5px; } #main-menu { display: block; margin-left: -3px; } #mobile-nav { display: none; } .search-form-field { height: auto; } .play-audio, .book-tools { vertical-align: .15em; } .wrap { min-height: 100vh; } .verse { padding-right: 33px; width: 100%; width: var(--col-width); max-width: calc((100vw - var(--num-col-width) - 10px) / var(--col-count)); } .verse .checkbox { right: 12px; } .verse-comment-panel .btn-close { display: none; } .num-cols-1 .verse .favorite { position: absolute; top: 0; left: 100%; width: calc( 50vw - var(--col-width) / 2 - 20px); word-break: break-word; line-height: 1; max-height: 6em; overflow: hidden; background: #FBF5EA; background: var(--body-bg, #FBF5EA); } .num-cols-1 .verse .favorite .tag-container { display: inline-block; } .num-cols-1 .verse .favorite .comment { display: inline; text-overflow: ellipsis; } .num-cols-1 .verse .favorite .controls { /*position: absolute; right: 0; bottom: 0;*/ background: #FBF5EA; background: var(--body-bg, #FBF5EA); padding: 1px; border-radius: 3px; } .bottom-menu-container { padding: 0 30px 0 var(--num-col-width); } .bottom-menu-container, .lb-nav, .rb-nav { opacity: 1; pointer-events: all; } .lb-nav .link, .rb-nav .link { padding: 2px; margin-bottom: 8px; } .rb-nav>.link[title]:after { display: block; right: 26px; } .chapters-wrap { margin: -5px 10px 0; scrollbar-width: none; } .floating-bottom-panel .bottom-menu-container, .floating-bottom-panel .lb-nav, .floating-bottom-panel .rb-nav { opacity: 0; pointer-events: none; } .bottom-menu .chapters li { margin: 0 .33em; } .footer-list li { margin-bottom: 2px; } #orphus { margin: 0 } } /* XL-desktops */ @media (min-width:1200px) { .header-icon { display: initial; } .xl-offgrid-left { position: absolute!important; transform: translateX(-100%); left: 0; } .book-group { display: inline-block; white-space: nowrap; } .single-verse-page .tbl-content { overflow: visible; } } .disabled { pointer-events: none!important; opacity: .6; } .grey, .grey a, .grey a:hover { color: #999!important; } .fading, .fading.active-only:not(.active), .desktop .fading.active-only:not(.active) { display: none; opacity: 0; pointer-events: none; transition: opacity .5s ease .2s; } .desktop .fading.hover-active:hover, .desktop .hover-active:hover+.fading, .desktop .hover-active:hover .fading, .desktop .fading:hover, .fading.hover-active.hover, .hover-active.hover+.fading, .hover-active.hover .fading, .fading.hover, .fading.active { display: block; opacity: 1; pointer-events: all; } .hover-block { pointer-events: none!important; } /* ТЁМНАЯ ТЕМА */ html.dark-theme { --body-bg: #1C130A; --widget-bg: #2B1E12; --text-color: #FFF; --link-color: #DDC07A; --accent-color: #DDC07A; --admin-color: #00CFFF; } .dark-theme input, .dark-theme select, .dark-theme textarea { color-scheme: dark; } .dark-theme .cloud { filter: brightness(4.5); } .dark-theme .footer { background: #40350f; } .dark-theme .books-lang-r a[href*="Ps.1"] { color: #0c0; } /* Режим подсветки колонок разными цветами */ .highlight-columns .col-1 { background: #d5f88354; } .highlight-columns .col-2 { background: #f7f7755e; } .highlight-columns .col-3 { background: #f5f58659; } .highlight-columns .verse { padding-left: 5px; } .text-bold .interpretation, .text-bold .tbl-content { font-weight: bold; } /* Прятать квадратики выделения стихов */ .hide-verse-checkbox .verse { padding-right: .5em; } .hide-verse-checkbox .verse .checkbox { display: none; } /* Вспомогательное / частные случаи */ .text-center { text-align: center } .flex-row { display: flex; } .flex-center { display: flex; flex-direction: column; justify-content: center; align-items: center; } .round-icon { display: inline-flex; justify-content: center; align-items: center; width: 1em; height: 1em; border-radius: 1em; border-width: 1.75px; border-style: solid; } .no-translation, .warning { color: #F00000!important } .invisible { opacity: 0; pointer-events: none; } #mbnr4web { display: none!important } .vignette { display: block; height: 20px; width: 100%; pointer-events: none; background: url('../img/dividers_13.svg') no-repeat center/contain; } @keyframes fade-in-out { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; } } .pop-tip { font-size: .8rem; font-weight: bold; position: fixed; z-index: 20; transform: translateX(-50%); opacity: 0; animation: pop-tip 1s; } @keyframes pop-tip { 0% { opacity: 0; transform: translate(-50%, 50%); } 50% { opacity: 1; transform: translate(-50%, 0%); } 100% { opacity: 0; transform: translate(-50%, -50%); } } .chapter-title-label { color: black; color: var(--text-color, #000); margin-right: 10px; }