/* Ozzy Pro */ /* www.ozzy.pro */ @font-face { font-family: 'Open Sans'; /* Гарнитура шрифта */ src: url('../fonts/open-sans.ttf') format('truetype'); } @font-face { font-family: 'Open Sans Bold'; /* Гарнитура шрифта */ src: url('../fonts/open-sans-bold.ttf') format('truetype'); } @font-face { font-family: 'Montserrat Medium'; /* Гарнитура шрифта */ src: url('../fonts/montserrat-medium.ttf') format('truetype'); } @font-face { font-family: 'Montserrat Bold'; /* Гарнитура шрифта */ src: url('../fonts/montserrat-bold.ttf') format('truetype'); } @font-face { font-family: 'Montserrat ExtraBold'; /* Гарнитура шрифта */ src: url('../fonts/montserrat-extrabold.ttf') format('truetype'); } @color-blue: #00baff; @color-red: #Ff6477; @color-light: #E1E6EF; @color-silverblue: #8FAAC1; @color-brand: #8670F4; @color-purple: #786fff; .icon-close { display: inline-block; width: 20px; height: 20px; background-color: #000; -webkit-mask-image: url('../svg/close.svg'); -moz-mask-image: url('../svg/close.svg'); -o-mask-image: url('../svg/close.svg'); mask-image: url('../svg/close.svg'); } .icon-attention { display: inline-block; width: 15px; height: 15px; background-color: #000; -webkit-mask-image: url('../svg/attention.svg'); -moz-mask-image: url('../svg/attention.svg'); -o-mask-image: url('../svg/attention.svg'); mask-image: url('../svg/attention.svg'); } .icon-check { display: inline-block; width: 15px; height: 15px; background-color: #000; -webkit-mask-image: url('../svg/check.svg'); -moz-mask-image: url('../svg/check.svg'); -o-mask-image: url('../svg/check.svg'); mask-image: url('../svg/check.svg'); } .icon-info { display: inline-block; width: 12px; height: 12px; background-image: url('../svg/icon-info.svg'); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; background-position: center; } .icon-user { display: inline-block; width: 24px; height: 24px; background-image: url('../svg/icon-user.svg'); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; background-position: center; &.logged { background-image: url('../svg/icon-user-2.svg'); } } .icon-question { display: inline-block; width: 20px; height: 30px; background-image: url('../svg/icon-question.svg'); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; background-position: center; } .icon-arrow-down { display: inline-block; width: 12px; height: 12px; background-image: url('../svg/icon-arrow-down.svg'); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; background-position: center; cursor: pointer; } .icon-free-book { position: absolute; left: 0; right: 0; bottom: -10px; margin: auto; display: inline-block; width: 70%; height: 30px; background-image: url('../svg/free-book.svg'); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; background-position: center; cursor: pointer; } header { position: fixed; background-color: rgba(239, 248, 255, 0.9); } .page__index { margin-top: 76px; } header .nav__links-item.links { @media (max-width: 767px) { margin-top: 4em; } } .btn_social { display: flex !important; align-items: center; justify-content: center; text-align: center; @media (max-width: 767px) { display: none !important; } .btn_link { display: flex !important; align-items: center; justify-content: center; text-align: center; } } .btn_social_mobile { display: none !important; position: absolute; left: 0; right: 0; margin: auto; margin-top: -45px; text-align: center; @media (max-width: 767px) { display: flex !important; } a { display: flex; align-items: center; align-self: center; justify-content: center; border-radius: 100px; padding: 0; width: 30px; height: 30px; margin: 0 5px; color: #fff; } } .collapse { margin-top: 30px; height: 0%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; &.show { display: block; height: 100%; } } .btn-collapse { position: absolute; right: 25px; color: #808080; &:hover { color: #000; .icon-down { span { background-color: #000; } } } &:not(.collapsed) { .icon-down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } .icon-down { display: inline-block; position: relative; left: 7px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); span { position: relative; top: -8px; display: inline-block; width: 10px; height: 2px; background-color: #777; margin: -4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } span:nth-child(2) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } } } .bootstrap-select { position: relative; width: 100% !important; button { background-color: #fff; border-radius: 0; width: 100%; border: 1px solid #8FAAC1; color: #8FAAC1; } .dropdown-menu { background-color: #fff; position: relative !important; transform: none !important; display: none; &.show { display:block; } .bs-searchbox { padding: 10px 8px; } input { background-color: #fff; width: 100%; border: 1px solid #8FAAC1; color: #8FAAC1; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 15px; } ul { li { a { display: block; font-size: 14px; padding: 5px 10px; color: #000; &.selected { background-color: @color-silverblue; color: #fff; } } } } } } main.overflow { overflow: inherit !important; } .project-1 { ::-webkit-input-placeholder {font-family: Montserrat Medium; color: @color-silverblue;} ::-moz-placeholder {font-family: Montserrat Medium; color: @color-silverblue;}/* Firefox 19+ */ :-moz-placeholder {font-family: Montserrat Medium; color: @color-silverblue;}/* Firefox 18- */ :-ms-input-placeholder {font-family: Montserrat Medium; color: @color-silverblue;} [class*=col-] { border-bottom: none !important; padding-top: inherit !important; padding-bottom: inherit !important; } font-family: Montserrat Medium; padding: 30px !important; @media (max-width: 767px) { padding: 10px !important; } .desc { padding: 0 0 12px; } form { font-family: inherit; margin-top: 0; } h1 { font-family: Montserrat ExtraBold; color: @color-blue; @media (max-width: 767px) { font-size: 20px; margin-bottom: 10px; } } .accord { &:first-child .btn-collapse { border-bottom: none; } } .collapse { margin-top: 0; padding: 5px 15px 15px; color: @color-silverblue; &.show { height: auto; background-color: @color-light; border-bottom: 1px solid @color-silverblue; } } .btn-collapse { position: relative; right: inherit; color: #000; display: block; border-bottom: 1px solid @color-silverblue; padding: 17px; @media (max-width: 767px) { padding: 15px 5px; } &:not(.collapsed) { border-bottom: 0; background-color: @color-light; .icon-down { left: -15px; @media (max-width: 767px) { left: -10px; } } } .icon-down { left: 4px; padding-right: 15px; white-space: nowrap; span { background-color: @color-blue; } } .icon-circle { position: relative; left: 0; margin-left: -2px; margin-right: 10px; width: 15px; height: 15px; display: inline-block; border: 2px solid @color-blue; border-radius: 50%; } } small { font-family: Open Sans; color: black; display: block; margin: 15px 0 30px; @media (max-width: 767px) { margin: 10px 0 20px; } } input[type="text"], select { background-color: #fff; width: 100%; border: 1px solid @color-silverblue; color: @color-silverblue; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 15px; @media (max-width: 767px) { padding: 10px; } } select { font-weight: bold; color: #999; //text-transform: uppercase; } .check-group { display: flex; align-items: center; align-self: center; padding: 15px; border-bottom: 1px solid @color-silverblue; @media (max-width: 767px) { padding: 15px 5px; } input[type="checkbox"] { display: none; } input[type="checkbox"] + label { display: inline-flex; align-items: center; user-select: none; } input[type="checkbox"] + label::before { content: ''; display: inline-table; width: 15px; height: 15px; border: 2px solid @color-blue; border-radius: 50%; margin-right: 15px; @media (max-width: 767px) { margin-right: 10px; } } input[type="checkbox"]:checked + label::after { position: absolute; background-color: @color-red; content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 4px; } } .block-ocenka { position: relative; display: table; width: 100%; /*background-color: @color-light;*/ margin-top: 10px; @media (max-width: 767px) { margin-top: 5px; } .name { text-decoration: underline; color: @color-blue; font-size: 120%; font-weight: 400; @media (max-width: 767px) { font-size: 100%; } } div { display: table-cell; } } .check-cube { display: table-cell; width: 60px; @media (max-width: 767px) { width: 30px; } label { font-size: 120%; } input[type="checkbox"] { display: none; } input[type="checkbox"] + label { position: relative; display: inline-flex; align-items: center; width: 100%; height: 50px; background-color: @color-light; border-left: 1px solid #fff; padding: 10px; color: #fff; @media (max-width: 767px) { height: 30px; } } input[type="checkbox"]:checked + label { background-color: @color-blue; } } .get-info { display: flex !important; align-items: center; align-self: center; width: fit-content; font-family: Open Sans; text-align: center; vertical-align: middle; .icon-info { width: 20px; height: 20px; margin-right: 10px; @media (max-width: 767px) { width: 12px; height: 12px; } } .fa-info-circle { color: @color-blue; } &:hover { .help { top: 50px; opacity: 1; visibility: visible; @media (max-width: 767px) { top: 40px; } } } .help { position: absolute; top: 35px; left: -30px; background-color: @color-silverblue; min-width: 200px; width: auto; max-width: 95%; font-size: 90%; color: #fff; text-align: left; padding: 30px; opacity: 0; z-index: 2; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; @media (max-width: 767px) { padding: 10px; left: -15px; } &:before { content: ''; position: absolute; left: 30px; top: -20px; border: 10px solid transparent; border-bottom: 10px solid @color-silverblue; @media (max-width: 767px) { left: 10px; } } } } .action { text-align: right; margin: 40px 0 10px; @media (max-width: 767px) { text-align: center; margin: 20px 0 5px; } button { font-family: Montserrat; font-weight: 400; min-width: 200px; border-radius: 0; background-color: @color-blue; @media (max-width: 767px) { width: 100%; padding: 12px 20px; &:first-child { margin-bottom: 8px; } } } } .result-info { padding: 40px 0; display: flex; align-items: center; &[hidden] { display: none !important; } @media (max-width: 767px) { padding: 20px 0; display: block; } a { font-size: 14px; color: @color-silverblue; text-decoration: underline; padding-left: 30px; margin-right: 30px; @media (max-width: 767px) { display: inline-block; padding-right: 15px; margin-right: 0; padding-left: 0; margin: 10px 0; } &:first-child { font-size: 16px; color: @color-blue; text-decoration: none; @media (max-width: 767px) { font-size: 15px; display: block; } } } } .result { .item { position: relative; @media (max-width: 767px) { &.pr0 { [class*=col-] { padding-right: 0; &:last-child { padding-right: 15px; } } } } .title-1, .title-2 { font-family: Montserrat ExtraBold; } .title-2 { font-size: 20px; min-height: 90px; padding-top: 3px; padding-bottom: 15px; a { color: #000; } } .book-link { position: relative; display: inline-block; } img { width: 100%; object-fit: cover; } .item-text { font-family: Montserrat; font-size: 14px; line-height: 140%; padding-bottom: 20px; @media (max-width: 767px) { font-size: 12px; padding-bottom: 10px; } } .link { display: inline-block; font-family: Open Sans; font-size: 14px; color: @color-silverblue; text-decoration: underline; margin: 20px 0; @media (max-width: 767px) { font-size: 12px; padding: 10px 0; } } .text-2 div { font-family: Open Sans; padding-bottom: 7px; } } } .more { background-color: transparent; border: 1px solid @color-silverblue; border-radius: 0; color: @color-silverblue; width: 100%; font-family: Open Sans; font-size: 20px; font-weight: 400; text-transform: inherit; padding: 15px; margin: 20px 0; @media (max-width: 767px) { font-size: 15px; padding: 10px; } &:hover { background-color: @color-blue; border-color: @color-blue; color: #fff; } } .theme { margin-bottom: 30px; @media (max-width: 767px) { margin-bottom: 15px; } .theme-title { margin-bottom: 15px; @media (max-width: 767px) { margin-bottom: 10px; } } .theme-progress { margin-bottom: 5px; .theme-progress-title { font-family: Open Sans; padding-left: 10px; @media (max-width: 767px) { padding-left: 5px; } } .get-info { width: auto; &:hover { .help { top: 30px; } } .help { position: absolute; top: 25px; left: 0; &:before { left: 12px; top: -20px; } } } .progress { position: relative; background-color: @color-light; width: 216px; height: 15px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; @media (max-width: 767px) { width: 90px; } .setka-kubiki { position: absolute; width: 100%; height: 100%; div { display: inline-block; width: 18px; height: 100%; border-right: 2px solid #fff; float: left; @media (max-width: 767px) { width: 7.5px; border-right: 1px solid #fff; } } } @media (max-width: 767px) { height: 7px; } .progress-bar { background-color: @color-blue; color: transparent; height: 15px; padding: 3px 0; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; @media (max-width: 767px) { height: 7px; } } } } } .table-ocenka { position: relative; width: 100%; border-spacing: 0; &.bez-ocenki:before { content: 'Экспертная оценка книги не завершена'; position: absolute; display: flex; align-items: center; align-self: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(255,255,255,0.9); z-index: 1; } &.poka-neocenili:before { content: 'Экспертная оценка книги не завершена'; position: absolute; display: flex; align-items: center; align-self: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(255,255,255,0.9); z-index: 1; } .name { display: inline-block; text-decoration: underline; font-size: 120%; color: @color-blue; @media (max-width: 767px) { font-size: 100%; } } .get-info { .help { @media (max-width: 767px) { top: 40px; } &:before { left: 35px; @media (max-width: 767px) { left: 25px; } } } } tr { box-shadow: 0px 5px #fff; td { position: relative; } td:first-child { padding-left: 5px; padding-right: 5px; padding-top: 20px; @media (max-width: 767px) { padding-top: 15px; } } &:first-child { td { padding-top: 0; } } } .progress { position: relative; color: @color-silverblue; background-color: @color-light; display: flex; align-items: center; align-self: center; width: 100% !important; .ocenka { position: absolute; width: 25%; height: 100%; background-color: @color-red; box-shadow: inset 3px 2px 0px 1px #f98f9b, inset -3px -3px 0px 0px #d65e6c; &.ocenka-1 { left: 0; } &.ocenka-1_5 { left: 12.5%; } &.ocenka-2 { left: 25%; } &.ocenka-2_5 { left: 37.5%; } &.ocenka-3 { left: 50%; } &.ocenka-3_5 { left: 62.5%; } &.ocenka-4 { left: 75%; } } .progress-num { border-left: 1px solid #fff; width: 25%; padding: 15px; @media (max-width: 767px) { padding: 10px; } } } &.ocenka-mini { font-size: 80%; tr { box-shadow: 0px 3px #fff; td { position: relative; } .get-info { .icon-info { width: 15px; height: 15px; @media (max-width: 767px) { width: 12px; height: 12px; } } .help { top: 35px; left: -18px; padding: 10px; &:before { left: 18px; } } } td:first-child { padding-left: 3px; padding-right: 3px; padding-top: 8px; @media (max-width: 767px) { padding-top: 7px; } } &:first-child { td { padding-top: 0; } } } .progress-num { color: @color-light; padding: 5px; } } } .annotac { font-size: 18px; padding: 20px; margin-top: 10px; @media (max-width: 767px) { font-size: 16px; padding: 7px; } } .text-annotac { font-family: Open Sans; background-color: @color-light; padding: 30px; @media (max-width: 767px) { padding: 10px; } .text-over { line-height: 140%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 15; } .toggle { display: block; text-align: right; text-decoration: underline; color: @color-silverblue; padding-top: 5px; @media (max-width: 767px) { text-align: center; } } &.open { .text-over { -webkit-line-clamp: inherit; } } } .review { border: 1px solid @color-light; padding: 30px; @media (max-width: 767px) { padding: 10px; } .review-name { font-family: Open Sans Bold; display: inline-block; color: #03bdee; margin-bottom: 10px; } .review-text { font-family: Open Sans; .review-text-name { color: @color-blue; font-weight: 600; margin-bottom: 10px; } .review-text-over { line-height: 140%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; &:not(.open) > * { margin-bottom: 0; } &:not(.open) > *:not(:first-child) { display: none; } &.open { -webkit-line-clamp: inherit; } } } .toggle { display: block; text-align: right; text-decoration: underline; color: @color-silverblue; padding-top: 5px; @media (max-width: 767px) { text-align: center; } } } .owl-nav { position: absolute; top: 40%; width: 100%; .owl-prev, .owl-next { position: absolute; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; width: 30px; height: 25px; box-shadow: none; @media (max-width: 767px) { width: 15px; height: 15px; } span { display: none; } } .owl-prev { background-image: url(/img/icons/arrow.svg) !important; left: -30px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); @media (max-width: 767px) { left: -10px; } } .owl-next { background-image: url(/img/icons/arrow.svg) !important; right: -30px; @media (max-width: 767px) { right: -10px; } } } .video { width: 100%; height: 100%; min-height: 300px; @media (max-width: 767px) { min-height: 150px; margin-bottom: 30px; } } .recen-action { display: flex; align-items: center; align-self: center; justify-content: center; text-align: center; height: 100%; @media (max-width: 767px) { margin-top: 15px; } .recen-block { font-family: Montserrat; font-size: 90%; font-style: italic; width: 70%; @media (max-width: 767px) { width: 100%; } .recen-text { color: @color-silverblue; padding: 30px 0; } } a { background-color: transparent; border: 1px solid @color-blue; border-radius: 0; color: @color-blue; width: 100%; max-width: 250px; font-size: 110%; font-weight: bold; font-style: normal; display: inline-block; text-transform: uppercase; padding: 15px 20px; @media (max-width: 767px) { max-width: 100%; padding: 15px 20px; } &:hover { background-color: @color-blue; color: #fff; } } } .download_all { font-family: Montserrat Bold; margin-bottom: 10px; @media (max-width: 767px) { padding-top: 15px; margin-bottom: 0; } a { text-decoration: underline; padding-left: 5px; } &.red { color: #ff3e3e; a { color: #ff3e3e; &:hover { color: #000; } } } } .free-book { select { font-weight: inherit; color: @color-silverblue; text-transform: inherit; } .item { .link { display: block; text-align: center; margin: 10px; } .title-2 { min-height: inherit; @media (max-width: 767px) { font-size: 16px; padding-bottom: 5px; } } .item-desc-h100 { display: none; height: 100px; &.item-desc-h100-mob { @media (max-width: 767px) { display: none !important; } } &.show { display: block; } } .item-desc { position: relative; font-family: Open Sans; font-size: 14px; padding-left: 30px; @media (max-width: 767px) { margin: 10px 0 0; } &.show { position: absolute; margin-top: -100px; z-index: 3; @media (max-width: 767px) { position: relative; margin-top: 10px; } .item-desc-text { &:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; border: 1px solid #999; margin: -5px -5px -5px 22px; z-index: 1; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); box-shadow: 0 0 10px rgba(0,0,0,0.2); } -webkit-line-clamp: inherit; } .icon-arrow-down { position: relative; z-index: 3; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } .icon-question { position: absolute; left: 0; } .item-desc-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; .text-block { position: relative; z-index: 2; } } } .izdat { font-size: 14px; margin-bottom: 15px; } .link-book { display: block; font-size: 90%; margin: 10px 0; @media (max-width: 767px) { margin: 7px 0 0; } } .link-more { @media (max-width: 767px) { display: none; } } .link-more-mob { display: none; @media (max-width: 767px) { display: block; text-align: left; margin: 0; padding-top: 15px; } } } } } .desc { padding: 0 0 20px; } .tab-content { .radio-group { border: 2px solid @color-purple; display: flex; margin: 10px 0; border-radius: 4px; input[type=radio] { position: absolute; visibility: hidden; display: none; } label { position: relative; color: @color-purple; display: block; width: 100%; text-align: center; cursor: pointer; font-weight: bold; padding: 5px 20px; &:last-child, &:nth-child(6) { span { left: inherit; } } &:hover { span { bottom: 35px; opacity: 1; visibility: visible; } } span { position: absolute; bottom: 25px; left: 0; right: 0; background-color: #000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 190px; font-size: 115%; font-weight: 100; color: #fff; padding: 10px; margin: 0 auto; opacity: 0; z-index: 1; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } } input[type=radio]:checked + label{ color: #fff; background: @color-purple; } label + input[type=radio] + label { border-left: 2px solid @color-purple; } } form { margin-top: 0; } input[type="text"] { width: 100%; border: 1px solid #dedede; padding: 14px 20px; margin-bottom: 3px; } input[type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; padding: inherit; } select { width: 100%; max-width: 100%; border: 1px solid #dedede; -moz-appearance: none; -webkit-appearance: none; appearance: none; padding: 15px; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#ffffff 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } textarea { width: 100%; border: 1px solid #dedede; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: rgba(255, 255, 255, 0.14); padding: 17px 20px; } button { vertical-align: middle; @media (max-width: 767px) { } } .btn_link { min-width: 110px; padding: 0 20px; } .form-check { label { font-size: 80%; @media (max-width: 767px) { vertical-align: text-top; } } .small { padding-left: 22px; } } .small { font-size: 80%; color: #777; line-height: 85%; padding-top: 3px; padding-left: 2px; @media (max-width: 767px) { padding-top: 0; } } &>.tab-pane { display: none; } &>.active { display: block; } .filter { background-color: #eff8ff; padding: 0px 20px; margin: 10px 0; [class*=col-] { border-bottom: none; @media (max-width: 767px) { padding-top: 10px; padding-bottom: 10px; } } } .result { .empty { width: 60%; font-size: 90%; line-height: 150%; color: #808080; text-align: center; padding: 30px; margin: 0 auto; @media (max-width: 767px) { width: 100%; } } .not-empty { .__voit_item [class*=col-] { border-bottom: none; border-right: none; } .score { min-height: 160px; margin-bottom: 30px; h3 { font-size: 95%; margin-bottom: 5px; } .desc { font-size: 85%; padding-bottom: 7px; } .get-info { position: absolute; right: 15px; &:hover { .help { top: 20px; opacity: 1; visibility: visible; } } .help { position: absolute; top: 0; right: 0; background-color: #000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; min-width: 200px; width: auto; max-width: 250px; font-size: 75%; color: #fff; padding: 10px; opacity: 0; z-index: 2; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } } } .autor, .theme { color: #555; padding-bottom: 10px; } .theme { .get-info { position: relative; right: 0; &:hover { .help { top: 20px; opacity: 1; visibility: visible; } } .help { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.85); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; min-width: 200px; width: auto; max-width: 250px; font-size: 75%; color: #fff; padding: 10px; opacity: 0; z-index: 2; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } } } img { width: 100%; } .param { justify-content: space-between; align-items: baseline; padding-bottom: 10px; div:nth-child(2) { height: 1px; margin: 0 8px; background: linear-gradient(90deg,#dcdcdc 33%,transparent 0) repeat-x bottom; background-size: 3px 1px; flex-grow: 1; } } .annotate { padding: 30px 0; } .progress { position: absolute; top: 5px; width: 95%; background-color: #eee; height: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; @media (max-width: 767px) { top: 8px; width: 91%; } .progress-bar { background-color: @color-purple; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: transparent; font-size: 70%; height: 20px; color: #fff; padding: 3px 0; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } } } } } /* Всплывающее окно */ #oz-modal, #book-link-modal { display: block; &.open { &:before, .oz-modal { visibility: visible; } } &:before { content: ''; display: block; background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; z-index: 10000; } .oz-modal { position: fixed; top: 10%; left: 0; right: 0; background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 40%; min-height: 30%; font-size: 120%; text-align: center; padding: 20px; margin: 0 auto; visibility: hidden; z-index: 10001; @media (max-width: 767px) { width: 95%; } .oz-modal-body-2 { display: none; } h1 { font-size: 140%; font-weight: bold; padding: 20px 0; } h2 { text-align: center; padding-top: 25px; } .text { position: relative; width: 70%; text-align: left; padding-right: 60px; margin: 0 auto; @media (max-width: 767px) { width: 100%; } .icon-attention, .icon-check { position: absolute; top: 0; right: -3%; width: 65px; height: 65px; background-color: lighten(@color-brand, 10%); } .icon-check { background-color: #40e0b6; } } a.close { position: absolute; top: 5px; right: 5px; text-decoration: none; opacity: 1; img { width: 30px; margin: 0; } } .oz-modal-link { display: inline-block; background-color: @color-brand; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #fff; padding: 15px 30px; margin: 30px 0; letter-spacing: .03em; text-decoration: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; &:hover { background-color: lighten(@color-brand, 5%); } } small { position: absolute; left: 0; right: 0; bottom: 20px; color: #737373; text-align: center; } } } .preloader { /*фиксированное позиционирование*/ position: fixed; /* координаты положения */ left: 0; top: 0; right: 0; bottom: 0; /* фоновый цвет элемента */ background: #e0e0e0; /* размещаем блок над всеми элементами на странице (это значение должно быть больше, чем у любого другого позиционированного элемента на странице) */ z-index: 1001; } .preloader__row { position: relative; top: 50%; left: 50%; width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; text-align: center; animation: preloader-rotate 2s infinite linear; } .preloader__item { position: absolute; display: inline-block; top: 0; background-color: #337ab7; border-radius: 100%; width: 35px; height: 35px; animation: preloader-bounce 2s infinite ease-in-out; } .preloader__item:last-child { top: auto; bottom: 0; animation-delay: -1s; } .preloader__text { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; align-self: center; justify-content: center; margin: 4% auto 0; } @keyframes preloader-rotate { 100% { transform: rotate(360deg); } } @keyframes preloader-bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; } .loaded .preloader { display: none; } .simplesearch-search-form { margin-bottom: 20px; input { width: 100%; border: 1px solid #e2e2e2; border-radius: 4px; padding: 17px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; &:hover, &:focus { border-color: #8670F4; } } } .simplesearch-results { font-size: 120%; color: #5a5a5a; margin-bottom: 3rem; .simplesearch-highlight { color: #000; font-weight: bold; } } .simplesearch-paging { color: #fff; text-align: center; padding: 20px 0; .simplesearch-current-page { color: #5a5a5a; } } .simplesearch-result { margin-bottom: 2rem; h3 { margin-bottom: 0 !important; } } .simplesearch-page { a { display: inline-block; background-color: #eef8ff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 5px 15px; margin: 0 -5px; text-align: center; } } #digiteka-search-form { .accord { &_with-value { [aria-expanded="false"] { .accord__value { display: block; } } .accord__clear { display: block; } } .btn-collapse { display: flex; } &__value { display: none; margin-left: 10px; white-space: nowrap; min-width: 0; overflow: hidden; margin-right: 10px; text-overflow: ellipsis; font-size: 12px; color: gray; margin-top: auto; padding-bottom: 2px; &:before { content: '('; } &:after { content: ')'; } } &__clear { display: none; margin-left: auto; transition: all .3s; font-size: 18px; &:hover { color: #00baff; } } } }