/* Global */ .select2-results__options { overflow-y: scroll; max-height: 200px; } /*All styles*/ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { font-family: 'Roboto', sans-serif; margin: 0; font-size: 16px; background: #090a0d; color: #fff; } li { list-style: none; } a { text-decoration: none; } button { border: none; background: none; } /*Navigation*/ .navbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 1rem 2rem; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 1rem; position: relative; z-index: 10; background: #181820; color: #a2b2c0; } .mb-0 { margin-bottom: 0 !important; } .bg { background: #181820; margin-bottom: 1rem; padding: 2rem; } .bg p { color: #cad6dd; line-height: 1.5rem; padding: 1rem; } .bg ul { color: #cad6dd; } .bg h2 { color: #949bb0; font-weight: 600; font-size: .875rem; text-transform: uppercase; margin-bottom: 1.25rem; } .bg h3 { color: #949bb0; font-weight: 500; font-size: .85rem; text-transform: uppercase; } .d-block { display: block; } .mt-1 { margin-top: 1rem; } .navbar__logo { line-height: 0; } .navbar__logo>img { width: 168px; margin-right: 25px; margin-top: 0px; } /* Menu */ .menu { position: relative; } .menu__ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menu__li { margin-right: 2.5rem; display: flex; align-items: center; margin-bottom: 1px; } .menu__li:last-child { margin-right: 0rem; } .menu__link { color: #a2b2c0; font-size: .875rem; text-transform: uppercase; font-weight: 500; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menu__link:hover { color: #fff; text-shadow: 0 0 0.938rem #44b1ff; } .menu__ico { fill: #a2b2c0; width: 1.2rem; height: 1.125rem; margin-right: .5rem; } .menu__search { max-width: 35rem; width: 35rem; } /* Burger */ .burger { /*width: 28px;*/ cursor: pointer; display: none; border: none; } .burger__line { width: 28px; height: 2px; background-color: #fff; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0 auto; position: relative; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; -o-transition-property: background-color, transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; display: block; } .burger__line:before { position: absolute; content: ""; display: block; width: 28px; height: 2px; background-color: #fff; top: -8px; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .burger.burger--active .burger__line:before { -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } .burger.burger--active .burger__line:after { -webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } .burger.burger--active i { background-color: transparent; } .burger__line:after { position: absolute; content: ""; display: block; width: 28px; height: 2px; background-color: #fff; top: 8px; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } /*Search*/ .search { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; z-index: 10; margin: 0 1rem; margin-right: 1.5rem; } .search form { position: relative; } .search__field { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .search__extended { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; border-radius: .25rem; background-color: #1c1c23; padding: 1rem; } .search__input { width: 100%; height: 2.5rem; border-radius: .25rem; padding: 0 5rem 0 1rem; color: #dadfed; font-family: "Roboto"; font-size: .875rem; font-weight: 500; background-color: #2c2c3b; border: 0; } .search__input::-webkit-input-placeholder { color: #dadfed; } .search__input::-moz-placeholder { color: #dadfed; } .search__input:-ms-input-placeholder { color: #dadfed; } .search__input::-ms-input-placeholder { color: #dadfed; } .search__input::placeholder { color: #dadfed; } .search__btn-extend { padding: 0; right: 3rem; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .search__btn-extend>svg { width: 1.063rem; height: .875rem; fill: #a2b2c0; } .search__submit { right: 1rem; padding: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .search__submit>svg { width: 1.1rem; height: 1.1rem; fill: #a2b2c0; } /*Language*/ .language { position: relative; margin-right: 1.5rem; } .language__select { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer; background: #2c2c3b; padding: .5rem; } .language_flag { background-image: url(../img/sprite.png); width: 20px; height: 13px; margin-right: .5rem; } .language_flag-ru { background-position: -96px -53px; } .language_flag-en { background-position: -96px -30px; } .language__name { margin-right: .5rem; font-size: .75rem; color: #a2b2c0; font-weight: 500; } .language__open .language__name { margin-right: 0; } .language__more { width: .688rem; height: .375rem; background: url(../img/icon-arr-down.svg) no-repeat; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .language__open { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer; position: absolute; top: 100%; background: #181820; } .language__open-wrapper { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer; padding: .5rem; border: .063rem solid #2c2c3b; background: #181820; } .language__open-more { width: .688rem; height: .375rem; background: rgba(255, 255, 255, 0) } /*Events*/ .events { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; margin: .5rem 1.5rem .5rem 0; } .events__btn { padding: 0; position: relative; cursor: pointer; background: 0 0; border: 0; } .events__dot { width: .5rem; height: .5rem; background-color: red; position: absolute; top: 0; left: -.25rem; border-radius: 50%; } .events__bell { width: .75rem; height: 1rem; fill: #a2b2c0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .events__bell:hover { fill: #fff; } .events-list>#user_events { max-height: 30vh; overflow-y: auto; } #user_events::-webkit-scrollbar { width: 3px; height: 3px; } #user_events::-webkit-scrollbar-track { background-color: #dadfed; border-radius: 100px; } #user_events::-webkit-scrollbar-thumb { border-radius: 100px; border: 3px solid #6f6f6f; background-clip: content-box; background-color: #6f6f6f; } /*Account*/ .account { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; width: 12.5rem; position: relative; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .account__avatar { width: 40px; height: 40px; -o-object-fit: cover; object-fit: cover; margin-right: 1rem; border: 1px solid #3299e4; } .user-img { width: 100%; height: 100%; object-fit: cover; } .account__name { margin-right: .25rem; } .account__more { width: .688rem; height: .375rem; background: url(../img/icon-arr-down.svg) no-repeat; } .account__panel { position: absolute; left: 0; right: 2rem; border: .063rem solid #2c2c3b; background-color: #181820; top: calc(100% + 1rem); display: none; } .account__panel:before { content: ''; background-color: #181820; border: .063rem solid #2c2c3b; top: -.5rem; left: .75rem; width: 1rem; height: 1rem; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; } .account__panel li { border-bottom: 1px solid #2c2c3b; position: relative; background-color: #181820; } .account__panel li a { color: #a2b2c0; font-size: .75rem; font-weight: 500; padding: .75rem 1rem; display: block; position: relative; } .account__panel li a svg { width: .75rem; height: .75rem; fill: #a2b2c0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 1rem; } .account__exit { width: 1rem; height: .75rem; fill: #e43232; } .account__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*Sign*/ .sign { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: .85rem; } .signup { margin-right: 1rem; /*border: 1px solid #2c2c3b;*/ background: #2c2c3b; cursor: pointer; padding: .6rem .8rem; color: #fff; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .signup:hover, .signin:hover { background: #393e4a; } .signin { background: #2c2c3b; cursor: pointer; padding: .6rem .8rem; color: #fff; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; display: flex; align-items: center; } .signin__ico, .signup__ico { height: 1rem; margin-right: .5rem; } .sign .fa { margin-right: .5rem; } .sign .fa:before { font-size: .8rem; } /*Content*/ .body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .content { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: calc(100% - 31rem); margin: 0 auto; } .content__wrapper { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: calc(100% - 31rem); display: -webkit-box; display: -ms-flexbox; display: flex; } .my-mods .mod { height: 8rem; } .footer__category-list li { margin-bottom: 0.8rem; } .footer__category-list { padding: 0; } .content--big { width: calc(100% - 19.5rem); } .content--small { width: calc(100% - 18rem); } .sidebar { width: 14.5rem; padding: 1.5rem 2rem } .sidebar--left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .sidebar--right { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .sidebar--big { width: 17rem; margin-right: 1rem; padding-top: 2rem; } .sidebar--right .top { display: block; } .user_event-message { } .rejected_moderstion { color: #FB8D8D !important; } .applied_entity_moderation, .applied_edit_moderation { color: #8DFBAC !important; } .answer_comment { color: #DADFED !important; } .answer_comment>a:hover { text-shadow: 0 0 0.938rem #44b1ff; } .answer_comment>a { color: #859cd1; } .clear_events, .showMore_events, .email_notifications { text-align: center; display: block !important; color: #A2B2C0; cursor: pointer; } .email_notifications { color: #fff; } .showMore_events:hover { color: #fff; } .clear_events:hover { color: #fff; } .active_notifications { background: linear-gradient(to bottom, #26be63 0%, #11984f 100%); } .disable_notifications { background: linear-gradient(180deg, #FF5656 0%, #D82323 100%); } /*Card*/ .cards { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -.5rem; } .card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; background-color: #2c2c3b; width: calc(20% - 1rem); margin-right: .5rem; margin-left: .5rem; margin-bottom: 1rem; -webkit-box-flex: 0; -ms-flex: 0 0 calc(100%/ 5 -1rem); flex: 0 0 calc(100%/ 5 -1rem); max-width: calc(100%/ 5 - 1rem); } .card__block { background: url(../img/bg-shadow.png) no-repeat bottom #181820; padding: 2rem; margin-bottom: 1rem; } .card__top-left { width: 50%; position: relative; padding-bottom: .75rem; margin-bottom: 1.5rem; } .card__top-left:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: .125rem; background: -webkit-gradient(linear, left top, right top, from(#45b0fe), to(rgba(69, 176, 254, 0))); background: -o-linear-gradient(left, #45b0fe, rgba(69, 176, 254, 0)); background: linear-gradient(to right, #45b0fe, rgba(69, 176, 254, 0)); } .card_flag { position: absolute; top: 1rem; left: 0; height: 1.5rem; line-height: 1.6rem; padding: 0 .5rem 0 .75rem; background: #bfbba7; cursor: pointer; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .card_flag-ico { width: .75rem; height: .625rem; fill: #95917d; position: relative; top: -2px; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .card_flag--active .card_flag-ico { fill: #544617; } .card_flag:hover { background: #ffe247; } .card_flag:hover .card_flag-ico { fill: #544617; } .card_flag .fa-heart:before { font-size: 1rem; color: #95917d; cursor: pointer; } .card_flag:hover .fa-heart:before { } .card_flag:after { cursor: pointer; content: ''; position: absolute; top: 0; right: -10px; border-style: solid; border-width: 12px 8px; border-color: #bfbba7 transparent #bfbba7 #bfbba7; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .card_flag:hover:after { border-color: #ffe247 transparent #ffe247 #ffe247; } .card_flag--active { background: #ffe247; } .card_flag--active:after { border-color: #ffe247 transparent #ffe247 #ffe247; } .card__mod { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 1rem; right: 0; line-height: 1.4rem; height: 1.5rem; padding: 0 1rem 0 1px; background: rgba(39, 44, 53, .75); } .card__mod:after { content: ''; position: absolute; top: 0; left: -16px; border-style: solid; border-width: 12px 8px; border-color: rgba(39, 44, 53, .75) rgba(39, 44, 53, .75) rgba(39, 44, 53, .75) transparent; } .card__img-link { width: 100%; } .card__img { width: 100%; max-height: 150px; -o-object-fit: cover; object-fit: cover; height: 150px; } .card__ico { margin-left: .5rem; height: 13px !important; width: 13px !important; background-size: 175px 175px !important; } .card__wrapper { padding: 1rem; } .card__version { font-size: .75rem; font-weight: 500; margin-bottom: .75rem; color: rgba(255, 255, 255, .5); } .card__header { display: block; font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: #fff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .card__info { color: #dadfed; font-size: .75rem; margin-bottom: .5rem; line-height: 1.125rem; min-height: 54px; overflow-wrap: normal; /* не поддерживает IE, Firefox; является копией word-wrap */ word-wrap: break-word; word-break: normal; /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */ line-break: auto; /* нет поддержки для русского языка */ -webkit-hyphens: auto; ​-ms-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* значение auto не поддерживается Chrome */ ​width: 50%; } .card__data { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .card__numbers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card__downloads { margin-left: .5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card__download { margin-right: .4rem; width: .625rem; height: .438rem; fill: #919399; } .card__views { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card__view { margin-right: .4rem; /*color: #919399; font-size: .6rem;*/ width: .625rem; height: .438rem; fill: #919399; } .card__views-text, .card__downloads-text { font-size: .75rem; color: rgba(255, 255, 255, .5); } .card__btn { width: 100%; display: block; line-height: 2rem; background-color: #393e4a; text-align: center; font-size: .75rem; text-transform: none; color: #fff; cursor: pointer; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .card__btn:hover { background-color: #454a57; } .card__btn-more span { margin: 0 .75rem; } .card__btn-loader { width: .75rem; height: .75rem; position: relative; top: 1px; fill: #fff; } .card__btn-loader--animate { -webkit-animation: rotate .75s infinite linear; animation: rotate .75s infinite linear; } .card__stars .fa-star { cursor: pointer; } .card__stars .fa-star:before { color: #ffe247; font-size: .5rem; } /* Footer */ .footer { } .footer__top { background-color: #181820; padding: 3rem 0; } .footer__bottom { background-color: #13131b; padding: 2rem 0; } .footer__container { max-width: 1370px; width: 90%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer__categories { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-width: 66.66667%; -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; /* flex: 0 0 0; */ } .footer__category { max-width: 100%; width: 100%; } .footer .header3 { color: #fff; font-family: "Gotham Pro"; font-weight: 500; } .footer__category-li { margin-bottom: 1rem; } .footer__category-link { color: #a2b2c0; font-size: .75rem; font-weight: 500; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .footer__logo { width: 30%; } .footer__copyright-text, .footer__copyright-link { color: #949bb0; margin-right: 2rem; font-size: .75rem; } .footer__social .fa { color: #787888; } .footer__social-ico { width: 1.606rem; height: 1.005rem; fill: #787888; } /*Top*/ .top { width: 100%; position: relative; padding-bottom: .75rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1rem; } .top-ico { fill: #ffe247; width: 1rem; height: .875rem; margin-right: .5rem; } .top:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: .125rem; background: -webkit-gradient(linear, left top, right top, from(#45b0fe), to(rgba(69, 176, 254, 0))); background: -o-linear-gradient(left, #45b0fe, rgba(69, 176, 254, 0)); background: linear-gradient(to right, #45b0fe, rgba(69, 176, 254, 0)); } /*Popup*/ .popup { position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .85); top: 0; left: 0; z-index: 999999; opacity: 0; visibility: hidden; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .popup__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; } .popup__content { background: #2c2c3b; padding: 1.7rem; max-width: 350px; width: 350px; color: #fff; position: relative; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .popup__hide { /*transform: translateY(-250px);*/ } .popup__close { position: absolute; top: 1rem; right: 1rem; cursor: pointer; } .popup__close img { width: 15px; } /*Pagination*/ .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pagination_link { padding: .25rem .5rem; background-color: #393e4a; margin: 0 .25rem; color: #a2b2c0; font-size: .75rem; font-weight: 700; cursor: pointer; } .pagination_link--active { background: -o-linear-gradient(324.53deg, #45a2e6 14.31%, #2387cf 121.56%); background: linear-gradient(125.47deg, #45a2e6 14.31%, #2387cf 121.56%); color: #fff; } /* UI */ /*Modifications*/ .icon-plus { z-index: 11; } .hide { display: none !important; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .cont { margin: 0 auto; background: #181820; margin-bottom: 1rem !important; } .btn--blue:hover { background-image: -webkit-gradient(linear, left top, right top, from(#5eb6f6), to(#3296de)); background-image: -o-linear-gradient(left, #5eb6f6 0%, #3296de 100%); background-image: linear-gradient(to right, #5eb6f6 0%, #3296de 100%); } .shine--blue:hover { text-shadow: 0 0 0.938rem #44b1ff; color: #fff; } .r180 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .center { text-align: center; } .w-100 { width: 100%; } .blue { color: #45b1ff; } /*Elements*/ .header { font-size: 1.5rem; color: #fff; } /*CheckBox*/ .checkbox { cursor: pointer; } .checkbox__input { display: none; } .checkbox>span { position: relative; font-size: .75rem; font-weight: 500; padding-left: 1.5rem; line-height: 1rem; color: #a2b2c0; } .checkbox input+span:before { content: ''; position: absolute; left: 0; top: -1.5px; width: 1rem; height: 1rem; background: -webkit-gradient(linear, left top, right top, from(#45a2e5), to(#2387cf)); background: -o-linear-gradient(left, #45a2e5 0%, #2387cf 100%); background: linear-gradient(to right, #45a2e5 0%, #2387cf 100%); } .checkbox input:checked+span:after { content: ''; width: .75rem; height: .75rem; position: absolute; left: 2px; top: 1px; background: url(../img/icon-tick.svg) no-repeat center; } /*Headers*/ .header2 { color: #949bb0; font-weight: 600; text-transform: uppercase; font-size: 1.5rem; font-family: "Gotham Pro"; font-weight: 500; } .header3 { color: #949bb0; font-weight: 600; font-size: .875rem; text-transform: uppercase; margin-bottom: 1.25rem; } .header4 { font-size: 1.125rem; font-weight: 500; color: #fff; } .select { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer; padding: .5rem; border: .063rem solid #2c2c3b; background: #181820; } .p { color: #dadfed; font-size: .875rem; line-height: 1.313rem; margin-bottom: 1.5rem; } .p:last-child { margin: 0; } .input { padding: .5rem; background: #dadfed; color: #181820; border: none; } .input--error { border: 1px solid red; } .input--error::-webkit-input-placeholder { color: red; font-style: italic; } .input--error::-moz-placeholder { color: red; font-style: italic; } .input--error:-ms-input-placeholder { color: red; font-style: italic; } .input--error::-ms-input-placeholder { color: red; font-style: italic; } .input--error::placeholder { color: red; font-style: italic; } .label { margin-bottom: .5rem; font-size: .825rem; } .more { width: 11px; height: 6px; background: url(/img/icon-arr-down.svg) no-repeat; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; background-position: center center; } .categories__inner .more--level { right: 18px; } .icon-pencil { background: url(../img/symbol/icon-pencil.svg) no-repeat; } .icon-delete { background: url(../img/symbol/icon-del.svg) no-repeat center; background-size: 70%; } .icon-download { background: url(../img/symbol/icon-downloads.svg) no-repeat center; background-size: 50%; } .icon-plus { background: url(../img/symbol/icon-plus.svg) no-repeat center; background-size: 70%; } .checkbox_block { position: relative; } .mod_file { display: flex; align-items: center; } .mod_file span { margin: 0 auto; } .mod_file span { font-weight: bold; } input:disabled { border: 10px solid black; cursor: default; background-color: white !important; color: white !important; border-color: white !important; } .mod_file span { cursor: pointer; color: #dadfed; } .dragover { border: 0.1rem dashed gray !important; } .btn { color: #fff; font-size: .75rem; font-weight: 500; text-transform: uppercase; -webkit-transition: .3s all; -o-transition: .3s all; transition: .3s all; position: relative; background-color: #2c2c3b; display: block; /* padding: .75rem 2.5rem; */ } .btn--blue { background-image: -webkit-gradient(linear, left top, right top, from(#45a2e5), to(#2387cf)); background-image: -o-linear-gradient(left, #45a2e5 0%, #2387cf 100%); background-image: linear-gradient(to right, #45a2e5 0%, #2387cf 100%); margin: 0 auto; text-align: center; font-family: "Roboto"; padding: .75rem 2.5rem; color: #fff; font-size: .75rem; font-weight: 500; text-transform: uppercase; -webkit-transition: .3s all; -o-transition: .3s all; transition: .3s all; position: relative; display: block; cursor: pointer; } .btn--red { background: -webkit-gradient(linear, left top, right top, from(#c13636), to(#be2929)); background: -o-linear-gradient(left, #c13636 0%, #be2929 100%); background: linear-gradient(to right, #c13636 0%, #be2929 100%); } .btn:disabled, .btn--red:disabled, .btn--blue:disabled { background: none; background-color: #696974; pointer-events: none; } .empty { /*width: 630px;*/ -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #header #search_files { right: 1rem; padding: 0; } .reset_filters-btn { display: flex; justify-content: space-between; align-items: center; position: relative; cursor: pointer; margin-bottom: 1.5rem; line-height: 14px; font-weight: 400; cursor: pointer; font-size: 12px; color: #CAD6DD; } .reset_filters-btn:hover { color: white; } .icon-cross_filters { background: url(../img/symbol/cross.svg) no-repeat; width: 1.563rem; height: 1.563rem; } .reset_filters-btn span { width: .625rem; height: .625rem; position: absolute; left: 98%; top: 10%; background-size: 100%; } /*Text format*/ .text>h2 { font-size: 1.3rem; font-weight: 500; margin-bottom: 1rem; } .description__overview h3 { font-size: 2.2rem; margin-bottom: 2px; } .text>p { color: #dadfed; font-size: .875rem; line-height: 1.313rem; margin-bottom: 1.62rem; word-break: break-word; } /*Slick*/ .slick-arrow.slick-prev { background: url(../img/icon-arr-prev.svg) no-repeat; left: 0; } .slick-arrow.slick-next { background: url(../img/icon-arr-next.svg) no-repeat; right: 0; } .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; border: 0; text-align: center; background: 0 0; text-indent: -9999px; width: 1.25rem; height: 2.25rem; } .svg-128x { background: url("../img/icon-category.svg") 0 0 no-repeat; width: 26px; height: 26px; } .svg-16x { background: url("../img/icon-category.svg") 11.11111111111111% 0 no-repeat; width: 26px; height: 26px; } .svg-256x { background: url("../img/icon-category.svg") 0 12.5% no-repeat; width: 26px; height: 26px; } .svg-32x { background: url("../img/icon-category.svg") 11.11111111111111% 12.5% no-repeat; width: 26px; height: 26px; } .svg-512x { background: url("../img/icon-category.svg") 22.22222222222222% 0 no-repeat; width: 26px; height: 26px; } .svg-64x { background: url("../img/icon-category.svg") 22.22222222222222% 12.5% no-repeat; width: 26px; height: 26px; } .svg-addons { background: url("../img/icon-category.svg") 0 25% no-repeat; width: 26px; height: 26px; } .svg-adventure { background: url("../img/icon-category.svg") 11.11111111111111% 25% no-repeat; width: 26px; height: 26px; } .svg-animated { background: url("../img/icon-category.svg") 22.22222222222222% 25% no-repeat; width: 26px; height: 26px; } .svg-api { background: url("../img/icon-category.svg") 33.333333333333336% 0 no-repeat; width: 26px; height: 26px; } .svg-appliedenergistics2 { background: url("../img/icon-category.svg") 33.333333333333336% 12.5% no-repeat; width: 26px; height: 26px; } .svg-biomes { background: url("../img/icon-category.svg") 33.333333333333336% 25% no-repeat; width: 26px; height: 26px; } .svg-bloodmagic { background: url("../img/icon-category.svg") 0 37.5% no-repeat; width: 26px; height: 26px; } .svg-buildcraft { background: url("../img/icon-category.svg") 11.11111111111111% 37.5% no-repeat; width: 26px; height: 26px; } .svg-buildinggadgets { background: url("../img/icon-category.svg") 22.22222222222222% 37.5% no-repeat; width: 26px; height: 26px; } .svg-cheats { background: url("../img/icon-category.svg") 33.333333333333336% 37.5% no-repeat; width: 26px; height: 26px; } .svg-configuration { background: url("../img/icon-category.svg") 44.44444444444444% 0 no-repeat; width: 26px; height: 26px; } .svg-cosmetic { background: url("../img/icon-category.svg") 44.44444444444444% 12.5% no-repeat; width: 26px; height: 26px; } .svg-crafttweaker { background: url("../img/icon-category.svg") 44.44444444444444% 25% no-repeat; width: 26px; height: 26px; } .svg-creation { background: url("../img/icon-category.svg") 44.44444444444444% 37.5% no-repeat; width: 26px; height: 26px; } .svg-customization { background: url("../img/icon-category.svg") 0 50% no-repeat; width: 26px; height: 26px; } .svg-dimensions { background: url("../img/icon-category.svg") 11.11111111111111% 50% no-repeat; width: 26px; height: 26px; } .svg-energy { background: url("../img/icon-category.svg") 22.22222222222222% 50% no-repeat; width: 26px; height: 26px; } .svg-exploration { background: url("../img/icon-category.svg") 33.333333333333336% 50% no-repeat; width: 26px; height: 26px; } .svg-fabric { background: url("../img/icon-category.svg") 44.44444444444444% 50% no-repeat; width: 26px; height: 26px; } .svg-farming { background: url("../img/icon-category.svg") 55.55555555555556% 0 no-repeat; width: 26px; height: 26px; } .svg-fluid { background: url("../img/icon-category.svg") 55.55555555555556% 12.5% no-repeat; width: 26px; height: 26px; } .svg-food { background: url("../img/icon-category.svg") 55.55555555555556% 25% no-repeat; width: 26px; height: 26px; } .svg-forestry { background: url("../img/icon-category.svg") 55.55555555555556% 37.5% no-repeat; width: 26px; height: 26px; } .svg-ftb { background: url("../img/icon-category.svg") 55.55555555555556% 50% no-repeat; width: 26px; height: 26px; } .svg-game { background: url("../img/icon-category.svg") 0 62.5% no-repeat; width: 26px; height: 26px; } .svg-genetics { background: url("../img/icon-category.svg") 11.11111111111111% 62.5% no-repeat; width: 26px; height: 26px; } .svg-guidebook { background: url("../img/icon-category.svg") 22.22222222222222% 62.5% no-repeat; width: 26px; height: 26px; } .svg-hardcore { background: url("../img/icon-category.svg") 33.333333333333336% 62.5% no-repeat; width: 26px; height: 26px; } .svg-hardcorequesting { background: url("../img/icon-category.svg") 44.44444444444444% 62.5% no-repeat; width: 26px; height: 26px; } .svg-industrialcraft { background: url("../img/icon-category.svg") 55.55555555555556% 62.5% no-repeat; width: 26px; height: 26px; } .svg-lagless { background: url("../img/icon-category.svg") 66.66666666666667% 0 no-repeat; width: 26px; height: 26px; } .svg-large { background: url("../img/icon-category.svg") 66.66666666666667% 12.5% no-repeat; width: 26px; height: 26px; } .svg-luckyblocks { background: url("../img/icon-category.svg") 66.66666666666667% 25% no-repeat; width: 26px; height: 26px; } .svg-magic { background: url("../img/icon-category.svg") 66.66666666666667% 37.5% no-repeat; width: 26px; height: 26px; } .svg-magic2 { background: url("../img/icon-category.svg") 66.66666666666667% 50% no-repeat; width: 26px; height: 26px; } .svg-map { background: url("../img/icon-category.svg") 66.66666666666667% 62.5% no-repeat; width: 26px; height: 26px; } .svg-maps { background: url("../img/icon-category.svg") 0 75% no-repeat; width: 26px; height: 26px; } .svg-medieval { background: url("../img/icon-category.svg") 11.11111111111111% 75% no-repeat; width: 26px; height: 26px; } .svg-military { background: url("../img/icon-category.svg") 22.22222222222222% 75% no-repeat; width: 26px; height: 26px; } .svg-minigames { background: url("../img/icon-category.svg") 33.333333333333336% 75% no-repeat; width: 26px; height: 26px; } .svg-miscellaneous { background: url("../img/icon-category.svg") 44.44444444444444% 75% no-repeat; width: 26px; height: 26px; } .svg-mixed { background: url("../img/icon-category.svg") 55.55555555555556% 75% no-repeat; width: 26px; height: 26px; } .svg-mobs { background: url("../img/icon-category.svg") 66.66666666666667% 73.58490566037736% no-repeat; width: 26px; height: 22px; } .svg-mod { background: url("../img/icon-category.svg") 77.77777777777777% 0 no-repeat; width: 26px; height: 26px; } .svg-modded { background: url("../img/icon-category.svg") 77.77777777777777% 12.5% no-repeat; width: 26px; height: 26px; } .svg-modern { background: url("../img/icon-category.svg") 77.77777777777777% 25% no-repeat; width: 26px; height: 26px; } .svg-multiplayer { background: url("../img/icon-category.svg") 77.77777777777777% 37.5% no-repeat; width: 26px; height: 26px; } .svg-ores { background: url("../img/icon-category.svg") 77.77777777777777% 50% no-repeat; width: 26px; height: 26px; } .svg-parkour { background: url("../img/icon-category.svg") 77.77777777777777% 62.5% no-repeat; width: 26px; height: 26px; } .svg-plugins { background: url("../img/icon-category.svg") 77.77777777777777% 75% no-repeat; width: 26px; height: 26px; } .svg-processing { background: url("../img/icon-category.svg") 0 87.5% no-repeat; width: 26px; height: 26px; } .svg-progression { background: url("../img/icon-category.svg") 11.11111111111111% 87.5% no-repeat; width: 26px; height: 26px; } .svg-psychedelic { background: url("../img/icon-category.svg") 22.22222222222222% 87.5% no-repeat; width: 26px; height: 26px; } .svg-puzzle { background: url("../img/icon-category.svg") 33.333333333333336% 87.5% no-repeat; width: 26px; height: 26px; } .svg-pvp { background: url("../img/icon-category.svg") 44.44444444444444% 87.5% no-repeat; width: 26px; height: 26px; } .svg-quests { background: url("../img/icon-category.svg") 55.55555555555556% 87.5% no-repeat; width: 26px; height: 26px; } .svg-quests2 { background: url("../img/icon-category.svg") 66.66666666666667% 87.5% no-repeat; width: 26px; height: 26px; } .svg-real { background: url("../img/icon-category.svg") 77.77777777777777% 87.5% no-repeat; width: 26px; height: 26px; } .svg-realistic { background: url("../img/icon-category.svg") 88.88888888888889% 0 no-repeat; width: 26px; height: 26px; } .svg-recipes { background: url("../img/icon-category.svg") 88.88888888888889% 12.5% no-repeat; width: 26px; height: 26px; } .svg-redstone { background: url("../img/icon-category.svg") 88.88888888888889% 25% no-repeat; width: 26px; height: 26px; } .svg-roleplay { background: url("../img/icon-category.svg") 88.88888888888889% 37.5% no-repeat; width: 26px; height: 26px; } .svg-rpg { background: url("../img/icon-category.svg") 88.88888888888889% 50% no-repeat; width: 26px; height: 26px; } .svg-scifi { background: url("../img/icon-category.svg") 88.88888888888889% 62.5% no-repeat; width: 26px; height: 26px; } .svg-scripts { background: url("../img/icon-category.svg") 88.88888888888889% 75% no-repeat; width: 26px; height: 26px; } .svg-shaderpacks { background: url("../img/icon-category.svg") 88.88888888888889% 87.5% no-repeat; width: 26px; height: 26px; } .svg-simple { background: url("../img/icon-category.svg") 0 100% no-repeat; width: 26px; height: 26px; } .svg-skyblock { background: url("../img/icon-category.svg") 11.11111111111111% 100% no-repeat; width: 26px; height: 26px; } .svg-small { background: url("../img/icon-category.svg") 22.22222222222222% 100% no-repeat; width: 26px; height: 26px; } .svg-steampunk { background: url("../img/icon-category.svg") 33.333333333333336% 100% no-repeat; width: 26px; height: 26px; } .svg-storage { background: url("../img/icon-category.svg") 44.44444444444444% 100% no-repeat; width: 26px; height: 26px; } .svg-structures { background: url("../img/icon-category.svg") 55.55555555555556% 100% no-repeat; width: 26px; height: 26px; } .svg-survival { background: url("../img/icon-category.svg") 66.66666666666667% 100% no-repeat; width: 26px; height: 26px; } .svg-tech { background: url("../img/icon-category.svg") 77.77777777777777% 100% no-repeat; width: 26px; height: 26px; } .svg-technology { background: url("../img/icon-category.svg") 88.88888888888889% 100% no-repeat; width: 26px; height: 26px; } .svg-thaumcraft { background: url("../img/icon-category.svg") 100% 0 no-repeat; width: 26px; height: 26px; } .svg-thermalexpansion { background: url("../img/icon-category.svg") 100% 12.5% no-repeat; width: 26px; height: 26px; } .svg-tinkersconstruct { background: url("../img/icon-category.svg") 100% 25% no-repeat; width: 26px; height: 26px; } .svg-traditional { background: url("../img/icon-category.svg") 100% 37.5% no-repeat; width: 26px; height: 26px; } .svg-transport { background: url("../img/icon-category.svg") 100% 50% no-repeat; width: 26px; height: 26px; } .svg-twitch { background: url("../img/icon-category.svg") 100% 62.5% no-repeat; width: 26px; height: 26px; } .svg-world { background: url("../img/icon-category.svg") 100% 75% no-repeat; width: 26px; height: 26px; } .svg-world2 { background: url("../img/icon-category.svg") 100% 87.5% no-repeat; width: 26px; height: 26px; } /*Animations*/ @ -webkit-keyframes rotate {from { -webkit-transform:rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @ keyframes rotate { from {-webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }