.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1600px; } /* var(--blur) */ :root { --blur: 5px; --blur-max: 10px; } /* Шрифты */ /* Vladimir Klenov https://scripts.sil.org/OFL © 2022 grinfleim */ @font-face {font-family: "Bowler";src: url("/catalog/view/stylesheet/fonts/Bowler.ttf");} /* Sasha Pavljenko, Yuri Leonov designside.t.me */ @font-face {font-family: "LeonovSP";src: url("/catalog/view/stylesheet/fonts/LeonovSP.otf");} /* Klukva normal Copyright © 2022 Ivan Lisichkin (wzos2.design@gmail.com) https://www.instagram.com/wzos2 */ @font-face {font-family: "Klukva";src: url("/catalog/view/stylesheet/fonts/Klukva_version_01.otf");} body { background: #1e1e1e; min-width:360px; overflow-x: hidden; color: #fff; font-size: 11pt; background: radial-gradient(#15052d, #131313); } .bgvideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -9999; background: radial-gradient(rgb(20, 51, 0), rgb(0, 0, 0)); } .video_bg_top{ position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -9998; } /* скрипт анимация шары */ .ballsDiv { position: relative; width: 100vw; height: 100vh; } .ball { position: absolute; top: 50px; width: 15px; height: 15px; border-radius: 50%; } .marginAuto{ margin: 0 auto; } .displayBlock{ display: block; } .baseDiv{ background:rgba(100, 100, 100, 0.5); border-radius: 5px; border:none; backdrop-filter: blur( var(--blur) ); padding:20px; } .backdrop-filter{ backdrop-filter: blur( var(--blur) ); } .baseDivMini{ width: 60%; margin: 0 auto; } .labelMidl{ min-width: 250px; } .inputMidl{ max-width: 60%; } .invalid-feedback-dkv{ color: #ff8181; padding: 5px; } .paddingTopMidl{ padding-top: 50px !important; } /* плавное изменение состояния */ .transition{ transition: 0.2s linear; } /* запрет выделения текста */ .blockTextSelection{ user-select: none; } #blockClose{min-height: 200px;margin-top: 100px;} a { color: #fff; } a:hover{ color: #d6d6d6; text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.3); } .aRed { color: #ff9898; } .aInvisibleFullDiv{ width:100%; height:100%; display:block; position: absolute; } p{color: #fff;} h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{ color:#fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.3); text-align:center; } .hNoMargins{ margin: 0px; } .textAlignLeft, .alignLeft{ text-align:left; } .textAlignCenter, .alignCenter{ text-align:center; } .textAlignRight, .alignRight{ text-align:right; margin-right: 5px; } .textAlignLeftImportant, .alignLeftImportant{ text-align:left !important; } .marginAuto{ margin: 0px auto; } .h1Upp{ text-transform: uppercase; } .invisibleText{ font-size: 0pt; position: absolute; } .textGray{ color:#666; } .textLightGray{ color:#aaa; } .margin-bottom-none{ margin-bottom: 0px; } /* убрать стрелки у input */ .inputNoAppearance{ -webkit-appearance: none; -moz-appearance: textfield; } /* универсальный элемент при наведении */ .hoverElement{ cursor: pointer; font-weight: bold; transition: 0.2s linear; } .hoverElement:hover{ color: #ff7c7c; } /* видно только на мобилах */ .showOnlyMobile{ display: none; } /* базовые кнопки */ .baseButton{ display: block; width: fit-content; padding: 20px; background: #c80000; user-select: none; transition: 0.2s linear; border-radius: 0.25rem; margin: 0 auto; text-transform: uppercase; } .baseButton:hover{ background: #f20000; } .baseButtonSecond{ margin: 0 auto; border: none; transition: 0.2s linear; background: #8d7e00; transition: 0.2s linear; padding: 10px 10px; min-width: 200px; border-radius: 5px; border-bottom: 3px #464444 solid; text-align: center; display: block; color: #fff; min-width: 220px; width: 80%; } .baseButtonSecond:hover{ background: #6400a8; border-bottom: 3px #5bca10 solid; } /* базовый блок горизонатльной ориентировки */ .displayWrap{ display: flex; justify-content: center; flex-wrap: wrap; } /* блок сообщения ошибки на всех страницах */ #errorMsgesForUsers{ position: relative; z-index: 1100; width: 100%; text-align: center; background: #711b00; top: -20px; color: #a4a4a4; } /* блок красной ошибки */ .errEchoDiv{ padding: 10px; background: #953a3a; border-radius: 10px; margin-top: 30px; margin-bottom: 30px; } /* блок зелёного сообщения */ .msgEchoDiv{ padding: 10px; background: #3d953a; border-radius: 10px; margin-top: 30px; margin-bottom: 30px; } .aButtonRev{ background: red; color: #fff !important; padding: 10px; border-radius: 5px; width: 20%; display: block; text-align: center; margin-left: 40%; transition:0.2s linear; } .text_tags_hiden{ position: relative; color: #fff0; text-align: center; width: 80%; display: block; left: 10%; } .elementNoShadow, .elementNoShadow:hover{ box-shadow: none !important; } .displayNone{ display:none; } .btn-primary:disabled{ color: #9d9d9d; background-color: #994545; border-color: #959595; } .styleOrange{ background: #c66500b0; padding: 10px; border-radius: 10px; backdrop-filter: blur( var(--blur) ); } .alertButton{ background: radial-gradient(#8000ff, #282828); padding: 10px; border-radius: 10px; transition: 0.2s linear; margin-top: 8px; } .alertButton:hover{ background: radial-gradient(#a300ff, #2b2b2b); } .styleGreen{ background: #19c600b0; padding: 10px; border-radius: 10px; backdrop-filter: blur( var(--blur) ); } .loadImgDiv{ background-image: url(/image/catalog/load.png); background-size: contain; width: 250px; height: 180px; background-repeat: no-repeat; margin: 0 auto; } #pageUp{ width: 50px; height: 50px; position: fixed; bottom: 50px; left: 50px; background: #6d6d6d75; border-radius: 5px; backdrop-filter: blur( var(--blur) ); user-select: none; cursor: pointer; z-index: 9000; } #pageUp p{ font-size: 30pt; transform: rotate(-90deg); margin-top: 8px; color: #7400ff; } @media (max-width: 767.98px) { #pageUp{ bottom: 10px; left: 10px; backdrop-filter: none; background: #6d6d6df0; } } #logoImgOs{ width: 200px; height: 50px; } #logoImgOsSp{ display:none; position: absolute; width: 40px; top: -12px; right: -10px; transform: rotate(0.4rad); } /* текст в капс */ .textUppercase{ text-transform: uppercase; font-size: 140%; text-align: center; line-height: 120%; } /* тени блоков */ /* .list-inline-item, */ .boxShadow, .btn-inverse, #menu, .carousel, .breadcrumb, .baseDiv, .list-group-item.active, .btn-primary, .btn-light, .btn-light:focus, .btn-light.active:focus, .btn-light:active:focus, .btn-light.active:active:focus, .product-thumb, .navbar-light .navbar-toggler, .nav-item, .row.mb-3, .form-check, #button-filter, #checkout-checkout > .row, #common-success > .row, #top, .text-end a, .block_buttons_in_home_001, .button_in_home_001, .button_in_home_002, .image.magnific-popup > a > img, .img-thumbnail, .filterElementDiv, .daterangepicker, .carousel, #contentInfo, .contentDiv, #contentUser, #list-group-account, .tab-content, #rewardIs, #product, .contentInfoImg, .legend_order_attention, #checkout-shipping-method, .h2_color_red, .table.table-bordered, .rating-area, .errEchoDiv, .msgEchoDiv, .carouselImgMini, .productThumbImageImg, .catalogButton, .divInfoA, .divInfoB, .radioTypeA label, .captchaDiv, .checkboxTypeA label, .orderUserDiv, .orderUserElementsDiv, .orderUserElementsDiv > img, .aOrderViewProduct, .buttonCloseRound, .messageBoxDivAlertDiv, .buttonConfirm, .form-select, .fieldset-shipping-addresses, .form-control, .orderUserElementsDivImg img, .orderUserElementsDivButtonDiv, .listGroupAccountA, #listGroupAccount_2 > a, .configuratorElements, .configuratorElement, .configuratorElementIndicator, .configCalcElemDiv, .configCalcElemMiniA, .configuratorElementImgDiv, #openImageDiv > img, .configuratorElementImgDivBg, .styleOrange, #productInfoDescriptDivTop, #form-payment-method, #openImageDivImgDiv, #checkoutQuicklyDivElement, .btnCloseDkv, .fpcChatOsDiv, .baseButton, .baseButtonSecond { box-shadow: 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.4), 0 0 4px rgba(0, 0, 0, 0.3); } /* белые */ .product-thumb { box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 0 5px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1); border: 2px #2c2445 solid; } /* принаведении белые */ .btn.btn-inverse.btn-block.dropdown-toggle:hover, .button_in_home_001_a:hover, .button_in_home_002 a:hover, .img-thumbnail:hover, .aButtonRev:hover, #fpcChatMessageText:focus-visible { box-shadow: 0 0 1px rgba(255, 255, 255, 0.7), 0 0 5px rgba(255, 255, 255, 0.4), 0 0 8px rgba(255, 255, 255, 0.3); } /* тени текста */ a, .list-inline-item, .btn-inverse, #top .nav > .list-inline > .list-inline-item, #top .nav > .list-inline .list-inline-item > a, #top .nav > .list-inline .list-inline-item .dropdown > a, .fa-solid, #content h, p, .form-select, .input-group-text, .form-check-label, .table, .alert.alert-success.alert-dismissible, .accordion-button, .form-control, .alert.alert-danger, .catalogButton, .fpcReviewsDivGrade, .rating-area:not(:checked) > label, button, buttonConfirm, .alert, .configCalcElemDiv, .textShadow { text-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.3); } /* d-none - СИСТЕМНЫЙ!!!! не удалять */ .display_none, .d-none{ display:none; } /* окно правовая информация */ #modal-information{ z-index: 9999; } .visibility_hidden{ visibility: hidden; } .position_absolute{ position: absolute; } .btn-outline-primary{ color: #fff; border-color: #808080; } .btn-outline-primary:hover{ border-color: #000; } .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show { color: #d1d1d1; background-color: #d4000a; border-color: #fff; } .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(227, 227, 227, 0.03); } .btn-danger{ background: red; } /* АЛЕРТЫ сообщения всплывающие */ .alert{ pointer-events: all; box-shadow: 0 0 1px rgb(0, 0, 0), 0 0 4px rgb(0, 0, 0), 0 0 6px rgb(0, 0, 0); font-size: 14pt; padding-right: 55px; background: #808080; backdrop-filter: blur( 2px ); } .alert-success,.alert-success-m{ background-color: #66ce00ab; } .alert-info,.alert-info-m{ background-color: #9ea300ab; } .fa-solid.fa-circle-exclamation{ color: #fded00ab; } .btn-close{ color:red; } .btn-close:active:focus, .btn-close:active, .btn-close:focus { box-shadow:none; } .fa-solid.fa-circle-check{ color:#2cff00; } .alert.alert-success, .alert.alert-danger, .alert.alert-success-m, .alert.alert-danger-m, .alert.alert-info, .alert.alert-info-m{ color: #fff; right: 20px; top: 80px; z-index: 9988; border-color: #676767; } .alert.alert-success, .alert.alert-danger{ position: fixed !important; } .alert-danger, .alert-danger-m{ background-color: #d2140e; } #alert .alert{ min-width: auto; margin-left: 20px; padding-right: 60px; text-align: center; line-height: 1.5; } .alert-dismissible .btn-close{ top: 2px; right: 2px; background-color: red; padding: 15px; } .alert a{ color: #e7ffd7; display: block; } .form-control{ border-color: #000; color: #fff; background-color: #979797; border-radius: 20px; border-bottom: 3px #73009d solid; font-weight: 600; } .form-control:focus{ color: #fff; background-color: #979797; outline: 0; box-shadow: 0 0 1px rgba(255, 255, 255, 0.4), 0 0 5px rgba(255, 255, 255, 0.2), 0 0 8px rgba(255, 255, 255, 0.1); border-color: #acacac; border-bottom: 3px #5bca10 solid; } .form-control::placeholder{ color: #fff; } .formControlMini{ width: 30%; } .btn-danger:hover{ color: #fff; } #contentInfo > p > img{ border-radius: 10px; } /* кнопки radio */ /* м1 */ .radioTypeA{ width: 30%; margin-left: 12%; } .radioTypeB{ background: #0000 !important; box-shadow: none; } .radioTypeA input{ visibility: hidden; } .radioTypeAchecked, .radioTypeANotChecked{ display:none; width: 30px; text-align: center; float: left; margin-right: 10px; font-size: 18pt; margin-bottom: 0px; } .radioTypeANotChecked{ display:block; color: #f88; } .radioTypeA label{ width: 100%; background: #91955d; border: 1px black solid; padding:10px; border-radius: 5px; margin-bottom:10px; transition: 0.2s linear; border-bottom: 3px #3b0082 solid; } .radioTypeA label:hover{ cursor: pointer; filter: brightness(110%); border-bottom: 3px #5bca10 solid; } .radioTypeA input[type=radio]:checked+label{ background: #53b031 !important; } .radioTypeA input[type=radio]:checked+label .radioTypeAchecked{ display:block; } .radioTypeA input[type=radio]:checked+label .radioTypeANotChecked{ display:none; } /* м1 end */ /* кнопки checkbox */ /* м1 */ .checkboxTypeA{ width: 30%; margin-left: 12%; } .checkboxTypeAmidl{ width: 50%; margin: 0 auto; display: block; } .checkboxTypeAmidl > input{ } .checkboxTypeAmidl > label{ margin-left: 0px; } .checkboxTypeA input{ visibility: hidden; } .checkboxTypeAchecked, .checkboxTypeANotChecked{ display:none; width: 30px; text-align: center; float: left; margin-right: 10px; font-size: 18pt; margin-bottom: 0px; } .checkboxTypeANotChecked{ display:block; color: #f88; } .checkboxTypeA label{ width: 100%; background: #91955d; border: 1px black solid; padding:10px; border-radius: 5px; margin-bottom:10px; transition: 0.2s linear; user-select: none; border-bottom: 3px #73009d solid; } .checkboxTypeA label:hover{ cursor: pointer; filter: brightness(110%); border-bottom: 3px #5bca10 solid; } .checkboxTypeA input[type="checkbox"]:checked + label{ background: #53b031 !important; } .checkboxTypeA input[type="checkbox"]:checked + label .checkboxTypeAchecked{ display:block; } .checkboxTypeA input[type="checkbox"]:checked + label .checkboxTypeANotChecked{ display:none; } /* м1 end */ /* блок информации */ .divInfoA, .divInfoB{ background: #585858; width: 80%; margin: 20px 10% 25px 10%; padding: 20px 10px 5px 10px; border-radius: 10px; } .divInfoB{ width: 100%; margin: 20px 0% 25px 0%; } /* размеры блоков */ .rows-50{ width: 50%; margin-left: 25%; } /* универсальные блоки #ELEMENT */ .contentDiv{ background: rgba(79, 78, 78, 0.8); border-radius: 5px; padding:10px; min-width: 300px; position: relative; z-index: 400; } /* конфигуратор 2.0 #ELEMENT */ .topMenuSpecial{ margin-bottom: 10px; min-height: 50px; padding: 10px; padding-top: 15px; } .contentConfigurator{ margin-top: 60px; min-height: 200px; } .configTabs{ width: 100%; min-height: 50px; position: relative; display: flex; top: -50px; left: -7px; display: flex; } .configTabElement{ background: #2b2b2bb5; min-width: 70px; height: 40px; border-radius: 5px 5px 0px 0px; padding: 10px 10px; position: relative; border: 1px #0000003b solid; backdrop-filter: blur( var(--blur) ); cursor: pointer; transition: 0.2s linear; border-bottom: 3px #0000 solid; text-align: center; user-select: none; } .configTabElement:hover{ height: 43px; top: -2px; border-bottom: 3px #00d003 solid; } .configTabElementActive{ height: 45px; top: -5px; border-bottom: 3px #7610ca solid; } .configContentElement{ } .configContentElement > h2{ position: relative; top: -20px; text-align: left; } .configContentElement > p{ font-size: 13pt; } .configElementsBlock{ min-height: 215px; margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; } .configElementsBlockUser{ min-height: 215px; margin-top: 40px; } .configElementBlock{ position: relative; background: #3a3a3a; width: 200px; min-height: 400px; border-radius: 10px; margin: 15px 6px; } .configElementBlock p{ margin: 0px; } .configElementBlock > h3{ font-size: 10pt; min-height: 30px; padding: 0px 5px; } .configElementImg{ width: 180px; height: 180px; background: radial-gradient(#45206a, #282828); margin: 0 auto; border-radius: 10px; margin-bottom: 10px; position: relative; } .configElementImg > img{ width: 90%; margin: 5%; user-select: none; } .configElementImgBig{ position: absolute; top: 0px; left: 0px; cursor: pointer; user-select: none; } .configElementPriceFull{ color: #ca3f1a; text-decoration: line-through; } .configElementUniqContent{ position: relative; } .configElementUniqContent > p{ text-align: right; padding: 0px 5px; border-bottom: 1px #4d3f3f solid; } .configElementUniqContent > p > i{ color: #a4a4a4; text-align: left; float: left; } .configElementPriceAlign{ width: 100%; height: 55px; } .configElementPrice{ position: absolute; bottom: 0px; left: 0px; width: 100%; height: 45px; padding: 3px 7px; background: #424242; border-radius: 0px 0px 10px 10px; border-top: 1px #2d2d2d solid; } .configElementSelect{ background: #474747; padding: 10px 0px 5px 0px; border-radius: 10px 10px 0px 0px; margin-bottom: 8px; } .configCpuVendor{ display: flex; flex-wrap: wrap; justify-content: center; } .configMiniButton{ width: 120px; padding: 10px; background: #8e8e8e; border-radius: 5px; text-align: center; font-size: 14pt; border-bottom: 3px solid #5e00d0; cursor: pointer; transition: 0.2s linear; margin: 10px; user-select: none; } .intel{ background: #0068b5; } .amd{ background: #ea6e00; } .configMiniButton:hover{ border-bottom: 3px solid #00bf0c; } .configElementUserSelect{ display: flex; flex-wrap: wrap; justify-content: center; } .configElementUserSelectIner{ margin: 5px 5px; } .configElementSelectH{ position: absolute; width: 100%; bottom: 0px; background: #2b2b2b7d; padding: 5px; } .configElementCount{ width: 100%; height: 30px; position: absolute; top: -40px; } .configElementCount > input[type="range"]{ accent-color: coral; margin: 0 auto; display: block; } .configElementDisplayCount{ width: 100%; position: absolute; top: -25px; text-align: right; padding-right: 17px; font-size: 15pt; } .configElementSelectCount{ position: absolute; top: 10px; left: 10px; font-size: 14pt; } .configElementBackRed{ background: #ff000078; border-radius: 10px; } .configElementAlertText{ background: red; padding: 7px 15px; border-radius: 20px; } .configElementUserInfoPanel{ background: #1c1c1c85; min-width: 120px; height: 100%; position: absolute; top: 0px; right: 0px; border-radius: 0px 5px 5px 0px; border-left: 1px #4e00acab solid; display: flex; flex-direction: column-reverse; } .configElementUserInfoPanel p{ margin: 0px; } .configElementUserInfoPanelCoast{ background: #383838; padding: 10px 0px; text-align: center; } .configElementUserTop{ position: absolute; background: #353535; padding: 5px 15px; top: -15px; left: 10px; border-radius: 5px; } .configElementUserInfoPanelButtons{ margin: 10px; display: grid; } .configElementUserInfoPanelButton{ margin: 5px auto; display: block; min-width: 130px; } .panelButtonsTop{ position: absolute; top: 0px; } .configUserConfigElements{ display: flex; flex-wrap: wrap; justify-content: center; width: 89%; margin-top: 10px; } .configUserConfigPanelPrice p{ font-size: 12pt; } /* мобилы мобильные устройства */ @media (max-width: 767.98px){ .configElementImg{ width: 140px; height: 140px; } .configUserConfigElements{ width: 100%; } .configElementUserInfoPanel{ position: relative; border-radius: 10px; border-top: 1px #4e00acab solid; margin-top: 20px; border-left: none; } .panelButtonsTop{ position: relative; } .configElementUserInfoPanelButtons{ display: block; } .configElementSelectH{ font-size: 10pt; bottom: -4px; } .configElementBlock{ width: 150px; margin: 5px 3px; } .configElementBlock > h3{ font-size: 11pt !important; } #configContentElement p{ font-size: 11pt; } .configMiniButton{ padding: 20px; } .configTabs{ display: block; top: 0px; left: 0px; } .configContentElement > h2{ top: 0px; margin: 20px 0px; font-size: 18pt; } .configElementUserInfoPanelCoast{ border-radius: 0px 0px 10px 10px; border-top: 1px #4e00acab solid; } .configCpuVendor{ margin-top: 20px; } .configTabElement{ backdrop-filter: none; } .configElementCount > input[type="range"]{ width: 90%; } } /* оформление заказа регистрация #ELEMENT */ .divRegFromOrder{ } .loadElementIndicator{ text-align: center; width: 100%; position: fixed; z-index: 9999; left: 0px; top: 0px; height: 100%; background: #1717177a; display: flex; flex-flow: wrap; justify-content: center; align-items: center; } .invalid-feedback-dkv{ margin-top: 0.25rem; font-size: 0.875em; color: #da4f49; } /* ГЛАВНАЯ и ТОП #ELEMENT */ #catalogDiv{ width: auto; float: left; margin-top: 20px; font-family: "Open Sans", sans-serif; font-weight: 400; margin-left: 10px; } .catalogButton{ min-width: 100px; position: relative; background: #c80000 !important; background-image: none; border: 1px solid; border-top-color: currentcolor; border-right-color: currentcolor; border-right-width: 1px; border-bottom-color: currentcolor; border-left-color: currentcolor; border-right-width: 4px; border-color: #000; border-right-color: rgb(0, 0, 0); border-right-color: #6f1111; border-radius:0px; clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0); text-transform: uppercase; } .catalogButton:hover{ border-color: #555; border-right-color: rgb(96, 96, 96); background: #f20000 !important; } /* анимация кнопки */ .btn__glitch { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--yellow-color); filter: drop-shadow(-2px 3px #67e3f3) drop-shadow(-1px -3px #02d8f3) drop-shadow(2px 1px #02d8f3); } .btnAnim:hover .btn__glitch, .btnAnim:hover .btn__content::after, .btnAnim:focus .btn__glitch, .btnAnim:focus .btn__content::after { display: block; animation: glitch-animation 2s linear 0s infinite; } /* secret trick */ @keyframes glitch-animation { 0%{opacity:1;transform:translateZ(0);clip-path:polygon(0 2%,100% 2%,100% 5%,0 5%)} 2%{clip-path:polygon(0 78%,100% 78%,100% 100%,0 100%);transform:translate(-5px)} 6%{clip-path:polygon(0 78%,100% 78%,100% 100%,0 100%);transform:translate(5px)} 8%{clip-path:polygon(0 78%,100% 78%,100% 100%,0 100%);transform:translate(-5px)} 9%{clip-path:polygon(0 78%,100% 78%,100% 100%,0 100%);transform:translate(0)} 10%{clip-path:polygon(0 54%,100% 54%,100% 44%,0 44%);transform:translate3d(5px,0,0)} 13%{clip-path:polygon(0 54%,100% 54%,100% 44%,0 44%);transform:translateZ(0)} 13.1%{clip-path:polygon(0 0,0 0,0 0,0 0);transform:translate3d(5px,0,0)} 15%{clip-path:polygon(0 60%,100% 60%,100% 40%,0 40%);transform:translate3d(5px,0,0)} 20%{clip-path:polygon(0 60%,100% 60%,100% 40%,0 40%);transform:translate3d(-5px,0,0)} 20.1%{clip-path:polygon(0 0,0 0,0 0,0 0);transform:translate3d(5px,0,0)} 25%{clip-path:polygon(0 85%,100% 85%,100% 40%,0 40%);transform:translate3d(5px,0,0)} 30%{clip-path:polygon(0 85%,100% 85%,100% 40%,0 40%);transform:translate3d(-5px,0,0)} 30.1%{clip-path:polygon(0 0,0 0,0 0,0 0)} 35%{clip-path:polygon(0 63%,100% 63%,100% 80%,0 80%);transform:translate(-5px)} 40%{clip-path:polygon(0 63%,100% 63%,100% 80%,0 80%);transform:translate(5px)} 45%{clip-path:polygon(0 63%,100% 63%,100% 80%,0 80%);transform:translate(-5px)} 50%{clip-path:polygon(0 63%,100% 63%,100% 80%,0 80%);transform:translate(0)} 55%{clip-path:polygon(0 10%,100% 10%,100% 0,0 0);transform:translate3d(5px,0,0)} 60%{clip-path:polygon(0 10%,100% 10%,100% 0,0 0);transform:translateZ(0);opacity:1} 60.1%{clip-path:polygon(0 0,0 0,0 0,0 0);opacity:1} to{clip-path:polygon(0 0,0 0,0 0,0 0);opacity:1} } #menuCategories{ top: -10px; transition:0.2s linear; margin-bottom: 20px; } .navbar-light .navbar-toggler{ background-image:none; background-color: #626262; border:none; } .fa-bars::before{ content: "КАТАЛОГ"; } .btn-inverse{ background-image:none; background-color: #5a5a5a; } .btn-inverse:hover, .btn-inverse:focus{ background-image:none; background-color: #626262; } .btn-inverse:active{ background-image:none; background-color: #626262; } .btn-check:focus + .btn, .btn:focus { box-shadow:none; } #top{ background-color: #474747d6; border-bottom: 1px solid #444; padding: 5px; backdrop-filter: blur( var(--blur-max) ); } #top .nav > .list-inline > .list-inline-item, #top .nav > .list-inline .list-inline-item > a, #top .nav > .list-inline .list-inline-item .dropdown > a{ color: #fff; /* text-shadow: none; */ text-transform: uppercase; } .nav.float-start{ display:none; } .list-inline-item{ padding:7px; /* background-color: #5a5a5a; */ margin-right: 0px; display: inline-flex; transition:0.2s linear; } .list-inline-item a{ display: block; } .list-inline-item:hover{ /* background-color: #626262; */ text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.3) !important; } .d-none.d-md-inline{ margin-left: 5px; } .dropdown-menu.dropdown-menu-right.show{ background-color: #626262; margin-top: 5px; } .dropdown-item{ color:#fff; transition:0.2s linear; } .dropdown-item:hover{ background-color: #b3b3b3; color:#fff; } #homeH3{ width: 70%; margin-left: 15%; margin-top:30px; margin-bottom: 10px; text-transform: uppercase; text-align: center; font-size: 13pt; line-height: 20pt; } .loadDiv{ position: relative; } /* рекомендуемые товары на главной #ELEMENT */ .featuredDiv{ margin-top: 100px; } .featuredDiv > h3{ background: rgba(71, 71, 71, 0.6); border-radius: 5px; position: relative; font-size: 19pt; margin-bottom: 20px; } /* поиск #ELEMENT */ #search{ margin-top: 5px; } #searchInput{ display:none; } #searchButton{ height: 50px; border-radius: 5px; color:#fff; } #searchButton:hover{ color:red; } #search .btn-lg{ padding: 0px 20px; } /* страница поиска #ELEMENT */ #searchDiv{ width: 60%; margin-left: 20%; margin-top:50px; margin-bottom:50px; } #searchFormCheckDiv{ background-color: rgba(0, 0, 0, 0); box-shadow: none; } #input-search:focus{ box-shadow: 0 0 1px rgba(255, 255, 255, 0.4), 0 0 5px rgba(255, 255, 255, 0.2), 0 0 8px rgba(255, 255, 255, 0.1); border-color: #acacac; border-bottom: 3px #5bca10 solid; } #searchCategoryDiv{ width: 30%; } #button-search{ width: 30%; margin-top: 20px; margin-left: 35%; } /* каталог меню выключил #ELEMENT */ #menu{ background-image:none; background-color: #5a5a5a; border:none; display:none; } #menu.navbar{ padding: 5px; } .nav-link{ text-align:center; } .nav-item{ background: #757575; margin:5px; border-radius: 5px; } .bg-primary{ background-color: rgba(100, 100, 100, 0.5) !important; } .nav-link{ text-transform: uppercase; } .carousel{ background-color: #5a5a5a; border:none; margin-bottom: 0px; } #carousel-banner-0 .carousel-indicators{ display:none; } .carousel-control-next, .carousel-control-prev{ min-width: 150px; height:80%; margin-top:4%; } .carousel-control-prev, .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next, .carousel-control-next:hover, .carousel-control-next:focus { color:#ff853b; } .carousel-control-prev, .carousel-control-next { transition:0.2s linear; } .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { background:rgba(0, 0, 0, 0.1); } .form-control.form-control-lg{ background-color: #e4e4e4; } .form-control.form-control-lg:focus{ box-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.8), 0 0 9px rgba(255, 255, 255, 0.4); border:none; background-color: #fff; } .form-control.form-control-lg:active{ border:none; background-color: #fff; } .btn.btn-light.btn-lg{ background-image:none; background-color: #919191; color:#ccc; } .btn.btn-light.btn-lg:hover{ color:red; } .fa-solid.fa-magnifying-glass{ text-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.3); } /* размер текста телефона */ .d-none.d-md-inline{ font-size: 0.9rem; } /* КАТЕГОРИИ #ELEMENT */ .breadcrumb{ background:rgba(100, 100, 100, 0.5); border-radius: 25px; border:none; backdrop-filter: blur( var(--blur) ); } .breadcrumb > li.breadcrumb-item::after{ border-right: 1px solid #4d4d4d; border-bottom: 1px solid #5c5a5a; } .breadcrumb > li.breadcrumb-item{ padding: 0px 5px 0px 20px; } #content{ position: relative; min-height: 0px; margin-bottom: 10px; } #content > h2{ color: #fff; text-align:center; text-transform: uppercase; width: 100%; padding:10px; } #productCategoryTopText{ } .img-thumbnail{ border:none; background:none; transition:0.2s linear; background: radial-gradient(rgb(70, 41, 98), rgb(30, 30, 30)); } .list-group.list-group-flush .list-group-item{ background-color: rgba(0, 0, 0, 0.0) !important; } .list-group-item{ position: unset; } .list-group-item.active{ background-color: #717171; border:none; } .list-group-item-dkv{ margin: 0px 10px 20px 10px; background-color: #490091a6; text-transform: uppercase; padding: 6px; border-bottom: 3px #454545 solid; border-radius: 5px; user-select: none; } .filterElementDiv, .filterElementTopDiv{ background-color: rgba(100, 100, 100, 0.5); margin: 20px 0px; padding: 20px 5px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.125); } .filterElementDiv{ backdrop-filter: blur( var(--blur) ); } #list-group-account-divs{ display: table; margin: 0 auto; padding-bottom: 10px; } .listGroupAccountAtop{ font-size: 15pt; padding: 10px; margin-top: 10px; margin-bottom: 10px; } .listGroupAccountA{ margin: 5px; float: left; border-radius: 10px; } .listGroupAccountA > a{ width: 130px; height: 130px; background: #6d6d6d; padding: 0px; text-align: center; position: relative; } .listGroupAccountA > a > b{ font-size: 30pt; position: relative; top: 40px; } .listGroupAccountA > a > p{ position: absolute; bottom: 10px; text-align: center; margin: 0px; width: 100%; } .listGroupAccountTopADiv > a{ width: 90%; margin-left: 5%; } .btn-primary{ background-image:none; background-color: #c80000; border:none; transition:0.2s linear; border-bottom: 3px #73009d solid; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .btn-primary:focus-visible{ background-image:none; background-color: #626262; border:none; color:#fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.4), 0 0 4px rgba(0, 0, 0, 0.3); border-bottom: 3px #5bca10 solid; } .btn-light{ transition:0.2s linear; background-image:none; background: #737373; border:none; color:#fff; margin-left: 3px !important; } .btn-light.active{ color: #ff853b; background: #828282; } .btn-light:hover{ background-color: #7200a6; color:#ccc; } .btn-midl{ min-width: 150px; } #header-cart .dropdown-menu{ background: #62626299; backdrop-filter: blur( var(--blur) ); } #header-cart .table-striped > tbody > tr:nth-of-type(2n+1){ background-color: #909090; } .input-group{ width: auto; } .input-group-text{ background-color: #5a5a5a; border:none; color:#ccc; padding: 7px; } .form-select{ border: 1px #000 solid; background-color: #979797; color:#fff; border-bottom: 3px #73009d solid; border-radius: 20px; } .form-select:active:focus,.form-select:active,.form-select:focus{ box-shadow:none; border-color: #979797; box-shadow: 0 0 1px rgba(255, 255, 255, 0.4), 0 0 5px rgba(255, 255, 255, 0.2), 0 0 8px rgba(255, 255, 255, 0.1); border-bottom: 3px #b0f solid; } #compare-total{ } /* кнопка открыть фильтры на мобилах #ELEMENT */ #showFilters{ display:none; margin:0px auto; margin-top:10px; width: 90%; } /* категории товаров - product/category #ELEMENT */ #display-control{ } /* карточка товара #ELEMENT */ #productInfoDescriptDivTop{ background: rgba(100, 100, 100, 0.5); border-radius: 5px; padding: 5px; padding-top: 20px; margin: 0 auto; margin-bottom: 20px; backdrop-filter: blur( var(--blur) ); border-top: 2px #6e00cac2 solid; } .product-thumb{ /* min-height: 300px; */ /* background: #666; */ background: #42424278; border:none; border-radius: 5px; transition:0.2s linear; backdrop-filter: blur( var(--blur) ); border: 1px #565656b2 solid; border-bottom: 3px #73009d solid; } .product-thumb:hover{ border: 1px #7a7a7ab2 solid; border-bottom: 3px #5bca10 solid; } .product-thumb a{ display: block; } .product-thumb .button-group button{ background-color: #7b7b7b; } .product-thumb .image a:hover{ opacity: 1 !important; } .product-thumb .image a img{ border-radius: 5px; } /* без ндс #ELEMENT */ .price-tax{ display:none; } .price-new{ width: 100%; display: block; color:#fff; font-size: 1.2rem; text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.3); } .price-old{ font-size: 1rem; width: 100%; display: block; text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.3); } .priceBig{ font-size: 150%; } .fa-solid.fa-shopping-cart{ color: #fff; font-size: 1.2rem; } .button-group button { padding-top: 5px; } .product-thumb .image{ padding-top:10px; margin-bottom: 0px; position: relative; } .product-thumb > .image > a > img{ width: 95%; color: #0000; text-shadow: none; min-height: 200px; display: inline-block; } .col-sm-6.text-start{ width: 100%; text-align: center !important; } .col-sm-6.text-start .pagination{ display: inline-flex; } .page-item{ line-height: 30px; } .page-item.active .page-link{ background-color: #5c5c5c; border-color: #696969; } .page-link{ background-color: #767676; border-color: #696969; } .col-sm-6.text-end{ width: 100%; } .image.magnific-popup{ position: relative; } .image.magnific-popup > a{ display: block; position: relative; } .image.magnific-popup > a > img{ display: block; width: 97%; } #productImgInfoWarnProductTwig{ position: absolute; bottom: 0px; height: 20px; font-size: 8pt; margin-left: 10px; width: 100%; color: #4b4b4b; } #productImgInfoWarnProductTwig:hover{ color: #bdbdbd; } .price-old{ color: #ff6565; padding-bottom: 5px; position: relative; } .submit_add_to_cart_mini{ background-color: #f22424 !important; background-image: url(/image/catalog/ICONS/shoppingCartIcon.png); background-repeat: no-repeat; background-position:center; background-size:contain; } .submit_add_to_cart_mini:hover{ background-color: #ccc !important; background-image: url(/image/catalog/ICONS/shoppingCartIconRed.png); } .fa-solid.fa-shopping-cart{ color: #ff4800; } .description_p{ min-height: 110px; margin-bottom: 0px; text-align: left; display: flex; align-items: center; justify-content: center; } .productTabContentDiv{ background: rgba(100, 100, 100, 0.5) !important; backdrop-filter: blur( var(--blur) ); } .mfp-container.mfp-s-ready.mfp-image-holder{ backdrop-filter: blur( var(--blur) ); } .mfp-close{ position: absolute; top: -12px !important; right: 1px !important; background: #ff0000bd !important; width: 90px !important; text-align: center !important; height: 50px; color: #fff; font-size: 25pt; border: none; line-height: 1; } .mfp-close-dkv:hover{ background: #f00 !important; } /* минибанер */ .miniBanerDiv{ filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5)); margin-bottom: 10px; } .miniBanerElement{ padding: 8px 10px; background: rgb(233,18,18); background: radial-gradient(circle, rgb(216, 24, 24) 0%, rgb(153, 31, 31) 100%); width: 280px; border-left: 3px #73009d solid; border-radius: 5px 0px 0px 5px; clip-path: polygon(0 0%, 100% 0, 90% 50%, 100% 100%, 0 100%); transition: 0.2s linear; user-select: none; } .miniBanerElement:hover{ border-left: 3px #5bca10 solid; } .miniBanerElementGold{ background: radial-gradient(circle, rgb(162, 134, 25) 0%, rgb(87, 56, 24) 100%); } .miniBanerElementGreen{ background: radial-gradient(circle, rgb(55, 172, 51) 0%, rgb(40, 40, 40) 100%); } .miniBanerElement a{ transition: 0.2s linear; } .miniBanerElementText{ text-align: center; padding: 8px 0px; margin-right: 20px; border-top: 2px #ffcb007d solid; border-bottom: 2px #ffcb007d solid; } /* изменения */ .product-thumb{ position: relative; } #topTextProductThumb, .topTextProductThumb{ position: absolute; width: 96%; top: 10px; left: 2%; font-size: 13pt; text-transform: uppercase; background: #00000029; border-radius: 5px 5px 0px 0px; padding: 5px 0px 0px 0px; } .description > p{ font-size: 13pt; margin-top: 40px; } .description > a{ padding: 0px 10px 10px 10px; } .product-thumb .description{ padding:0px; text-align: end; } #product-list{ display: flex; justify-content: center; } .product-thumb .button-group{ border-top: 1px solid #5a5a5a; background-color: #4b4b4b; border-radius: 0px 0px 10px 10px; } .product-thumb .button-group button + button{ border-left: 1px solid #a3a3a3; } .productCartButtonsDiv{ width: 100%; display: flex; justify-content: center; flex-wrap: wrap; } .submit_mini{ background: none; border: none; width: 20%; padding: 5px; color: #ffffffd4; transition: 0.2s linear; font-size: 1.4rem; } .submit_mini:hover{ color: #66ff3b; } /* убрал кнопки выбора вида списков */ #buttonsListVid{ display:none; } /* фильтры #ELEMENT */ .col-3{ width: 20%; } .card, .cardDkv{ color:#fff; font-size: 1rem; border: none; } .card{ background-color: rgba(100, 100, 100, 0.5); } .cardDkv{ background-color: #0000; } .cardBlur { backdrop-filter: blur( var(--blur) ); width: 100%; height: 100%; position: absolute; z-index: 20; } .cardElements{ z-index: 50; } .card-body{ backdrop-filter: blur( var(--blur) ); } .list-group-item, .list-group-item:hover{ background: #717171; color:#fff; } .form-check{ padding:5px 0px 0px 30px; background-color: #919191a1; user-select: none; border-bottom: 3px #4d4c4c solid; transition: 0.2s linear; } .form-check:hover{ background-color: #919191d6; border-bottom: 3px #5bca10 solid; cursor: pointer; } .form-check > input{ display: block; } .form-check-label{ width: 97%; min-height: 30px; padding-top: 4px; font-size: 12pt; margin-left: 2%; } .form-check-input{display: block;} .form-check-input:checked{background-color: #f00;} .form-check-input:checked, .form-check-input:active:focus, .form-check-input:active, .form-check-input:focus{ border:none; box-shadow:none; } .form-check.form-check-inline{ min-width: 70px; border-radius: 3px; } #button-filter{ width:80%; background: red; } .fa-solid.fa-filter::before{ content: ""; } /* плавающая кнопка #ELEMENT */ .sticky { position: fixed; backdrop-filter: blur( var(--blur) ); z-index: 101; padding: 10px 0px; border: 1px #6b6b6b solid; border-radius: 5px; } .stop { position: relative; z-index: 101; } .filterControlsBottom{ width:100%; height:80px; /*background:red;*/ margin-top:60px; } #cardFooterButton{ height:auto !important; } .resultsText{ margin-top: 30px; } /* СТРАНИЦА ТОВАРА #ELEMENT */ #productInfoDiv{ } #productInfoImageDiv{ width:35%; } #productInfoInfo{ width:30%; padding-left: 5px; } #productInfoPrice{ width:35%; display: flex; justify-content: center; align-items: center; } .form-label{ padding: 0px 10px; } .productInfoImageImg{ max-width: 500px; margin: 0 auto; } #productInfoDescriptDiv{ position: relative; margin-top: 30px; } #productInfoDescriptDiv > h1 { padding:10px; } .productThumbImageImg{ background: radial-gradient(rgb(69, 32, 106), rgb(26, 26, 26)); } #product{ background: radial-gradient(rgba(38, 22, 81, 0.6), rgb(51, 51, 51)); width: 90%; padding: 20px; border-radius: 10px; margin: 0 auto; border-bottom: 2px #8b00ffab solid; } #priceTopDiv{ } #inputQuantityDiv{ width: 40%; float: left; } #listPriceDiv{ float: left; padding-top: 4%; } #listPriceDiv h2 .price-new{ font-size: 22pt; } #buttonsMini{ display: flow-root; } #buttonsMiniDiv{ margin-right:5px; } #pointsPriceDiv{ margin-top:40px; } .textTags, .textTags a{ color: rgba(255, 255, 255, 0.23); } .textTags{ margin: 50px 20px; } .rating{ padding-bottom: 0px; } .image.magnific-popup{ } .row.mb-3{ background: #5a5a5a; border-radius: 5px; } .row{ margin-right: calc(var(--bs-gutter-x) / -5); margin-left: calc(var(--bs-gutter-x) / -5); margin-bottom: 10px; } .row > * { /* padding-right: 0px; padding-left: 0px; */ } .col-sm{ color:#fff; font-size: 1rem; } .tab-content{ background: #6b6b6b; border-radius: 5px; padding:10px; font-size: 1rem; } .nav-link{ color: #ccc; } .nav-link:hover{ color: #fff; } .button-cart{ width:100%; background: red; } #input-quantity{ width:60px; } .rating .fa-star{ color: #50FF00; } .table{ color:#fff; } #form-review{ color:#fff; } .nav-link.active{ color:#fff !important; background-color: #797979 !important; border-color: #656565 #717171 #000 !important; } .image.magnific-popup > a > img{ border-radius: 10px; } .image.magnific-popup > a > .img-thumbnail.mb-3{ padding: 0px; min-width: 400px; min-height: 400px; color: #0000; text-shadow: none; background: radial-gradient(#45206a, #0b0b0b); } .img-thumbnail{ border-radius: 10px; padding: 0px; margin:5px; backdrop-filter: blur( var(--blur) ); } .productInfoImageButtons{ width: 100%; text-align: center; justify-content: space-around; margin-bottom: 20px; align-items: center; } /* карусель для картинок #ELEMENT */ .images_popup_block{ } .carouselImgMini { position: relative; max-width: 520px; padding: 10px 40px; border: 1px solid #646464; border-radius: 10px; background: #535151; } .carouselImgMini img {display: block;} .arrow { position: absolute; top: 5%; padding: 5px; background: #3e3e3e; border: 1px solid #161616; border-radius: 5px; font-size: 24px; line-height: 24px; color: #ccc; display: block; z-index:1000; height: 90%; transition:0.2s linear; } .arrow:focus {outline: none;} .arrow:hover {background: #4d4d4d;cursor: pointer;} .prev {left: 7px;} .next {right: 7px;} .gallery {max-width: 420px;overflow: hidden;} .gallery ul { height: 90px; min-width: max-content; margin: 0; padding: 0; list-style: none; transition: margin-left 250ms; font-size: 0; } .gallery li {display: inline-block;} .pc_cat_text_info_div{ padding: 15px 200px; } .table-bordered-description-p{ width:35%; } .productMiniElementTitle{ position: absolute; width: 100%; bottom: 0px; background: #2b2b2b7d; padding: 5px; z-index: 500; } /* опции на странице товара */ #optionsDkv{ margin-top: 50px; } .baseDivErorInfoOfOptions{ } .inputOptionDivCheck{ display: flex; margin: 0 auto; flex-flow: wrap; justify-content: center; } .formCheckOptionDkv{ position: relative; margin: 5px; } .formCheckOptionDkv > input{ position: absolute; top: -2px; right: 4px; z-index: 999; } .formCheckOptionDkv > label{ position:relative; width: 100%; height: inherit; margin: 0; text-align: center; border-radius: 10px; transition: 0.2s linear; background: radial-gradient(#45206a, #282828); } .formCheckOptionDkv > label:hover{ border-bottom: 3px #5bca10 solid; cursor: pointer; } .formCheckOptionDkv > label > p{ margin: 0px; } .formCheckOptionText{ width: 90%; padding: 10px 0px; position: absolute; top: -10px; left: 0px; background: #37373747; backdrop-filter: blur(1px); z-index: 900; } .formCheckOptionPrice{ position: absolute; width: 100%; padding: 5px; background: #3c3c3c12; border-radius: 0px 0px 10px 10px; bottom: 0px; background: #37373747; backdrop-filter: blur(1px); z-index: 901; margin: 0px; } .formCheckOptionImg{ position:relative; width: 190px; height: 180px; margin: 0 auto; user-select: none; pointer-events: none; } .formCheckOptionErr{ background: #ff000080; padding: 10px; margin: 0 auto; border-radius: 10px; color: #fff; font-size: 14pt; text-align: center; width: 98%; margin-bottom: 10px; } .uidProductForAdmins{ position: absolute; width: 100%; z-index: 9000; font-size: 10pt; padding: 8px 0px 0px 10px; text-align: left; background: #37373747; cursor: grab; backdrop-filter: blur(1px); } /* сравнение товаров #ELEMENT */ .table.table-bordered{ background: rgba(100, 100, 100, 0.7); } /* корзина товара #ELEMENT */ #checkout-cart .row #content > h2{ position: relative; } .accordion-item{ background-color: #4e4e4e75; border: 1px solid rgba(71, 71, 71, 0.13); color:#fff; } .accordion-button{ background-color: #8f8f8f; color:#fff; } .accordion-button:not(.collapsed){ background-color: #8f8f8f; color:#fff; } .button:not(.collapsed)::after, .accordion-button::after{ background-image:none; } .accordion-button:focus{ border-color: #555; box-shadow:none; } .accordion-button:not(.collapsed)::after{ background-image:none; color: #fff; } .btn-primary:hover,.btn-primary:active, .btn-primary:focus,.btn-primary:active:focus, .btn-primary:focus-visible{ background:#ff4747; } .btn{ } #button_buy_cart{ float: none !important; margin-top: 40px; } #button_buy_cart a, .text_buy_cart { width: 30%; margin-left: 35%; padding: 20px; } #checkoutQuicklyDiv, #orderCallbackDiv{ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #08080870; z-index: 9990; backdrop-filter: blur( var(--blur) ); } #checkoutQuicklyDivElement{ width: 80%; position: relative; left: 10%; min-height: 80%; top: 10%; background: rgba(79, 78, 78, 0.96); border-radius: 10px; padding: 20px; } #checkoutQuicklyDivElement > h2{ margin-top: 30px; } #checkoutQuicklyDivTelephone{ width: 60%; margin-left: 20%; margin-top: 60px; } #checkoutQuickly{ margin-bottom: 100px; } .checkoutQuicklyDivButtonCheckout{ position: absolute; width: 100%; bottom: 30px; } .btnCloseDkv{ background-color: #e40000; border-radius: 0.25rem; padding: 15px; font-size: 20pt; color: white; border: 1px black solid; position: absolute; top: 10px; right: 10px; transition: 0.2s linear; } .btnCloseDkv:hover{ background-color: #f00; } .orderUserElementsDivBottom{ background: #57575799; padding: 20px 0px 5px 0px; border-radius: 0px 0px 5px 5px; margin-top: 40px; } .cartButtonsBlock{ margin-top: 50px; margin-bottom: 50px; } /* страница ошибок */ .errorContentDiv{ padding: 20px 0px; min-height: 200px; } /* оформление заказа #ELEMENT */ #checkout-shipping-address, #checkout-register{ margin-top: 20px; } .checkout_success{ margin-top: 20px; } #checkout-checkout .row{ background:#646464; border-radius: 5px; font-size: 1rem; } #checkout-checkout > .row > #content > h1{ margin:20px; } #form-register{ color: #fff; } .col.mb-3.required > .form-check.form-check-inline, .col.mb-3 > .form-check { background-color:rgba(71, 71, 71, 0.0); box-shadow:none; } .col-md-5{ color: #fff; } .text-end > .btn.btn-primary, .btn.btn-danger{ min-width: 30px; } .text-end > .btn.btn-primary{ background:red; width:30%; color: #fff; margin-left:35%; margin-right: 35%; } #shipping-addresses{ color:#fff; } #button-confirm{ margin-top:20px; margin-bottom:20px; padding: 20px; } #continueRegister{ width: 100%; } #button-register{ width: 50%; margin-left: 25%; margin-top: 25px; padding: 20px; } #orderFormOne{ width: 100%; } #orderFormTwo{ width: 100%; display:none; padding-top: 50px; } .text-end{ padding-bottom:20px; } .text-end > .btn.btn-primary:disabled{ background:#9d6767; } .legend_order_attention{ background: #ec0000; padding-left: 10px; padding-right: 10px; width: auto; color: #fff; border-radius: 3px; border: none; min-width: 330px; } #input-shipping-method, #input-payment-method{ background-color: #cbcbcb; color: #000; text-shadow:none; } #input-payment-method:disabled{ background-color: #b79595; } #checkout-shipping-method, #form-payment-method{ background: gray; padding: 10px; border-radius: 10px; } .legend_order_attention_ok{ background: #00c203 !important; } .orderUserElementsDivFullPriceDiv{ font-size: 14pt; padding: 10px; } .orderUserElementsDivFullPriceDiv > p > b{ display: inline-block; min-width: 100px; } /* изменение цены в кредит #ELEMENT */ #alertAboutCancelDiscount{ } .alertAboutCancelDiscountBlock{ display:block !important; } .h2_color_red{ color: white; background: red; padding: 10px; margin: 20px; border-radius: 5px; } #pFullPriceDisplay{} #pFullPriceNotDisplay{ display:none; } .pFullPriceDisplay{ display:block !important; } .orderUserElementsDivButtonDiv{ position: absolute; top: 10px; right: 10px; } .orderUserElementsDivInputNumber{ width: 300px; background: #4f4f4f; padding: 5px; border-radius: 10px; } .orderUserElementsDivInputNumber > p{ margin: 10px 10px 10px 0px; } .orderUserElementsDivInputNumber > button{ margin-left: 10px; } .orderUserElementsDivInputNumberElement{ display: flex; } .orderUserElementsDivInputNumberElement > input, .orderUserElementsDivInputNumberElement > button { margin: 10px; } .orderUserElementsDivButtonsDiv{ position: absolute; top: 10px; right: 70px; } /* Оформление заказа если зареган */ .fieldset-shipping-addresses{ padding: 10px; background: gray; border: 1px #111 solid; border-radius: 10px; } .finalPriceDiv{ font-size: 16pt; padding: 30px; } /* заказ принят #ELEMENT */ #common-success > .row{ background:#646464; border-radius: 5px; font-size: 1rem; color: #fff; } #common-success > .row > #content > h1{ margin:20px; } /* всплывающий блок товары в корзине #ELEMENT */ .text-end{ transition:0.2s linear; } .text-end a{ background:#ea1e1e; padding:10px 5px 10px 5px; margin-bottom:10px; border-radius: 5px; display: block; float: left; } .text-end a:hover{ background:red; color:#fff; } #text-end-buttons{ height: 50px; } .dropdown-menu{ padding: 0rem 0; } #header-cart .dropdown-menu li p{ margin: 15px 0 0 0; } #header-cart .dropdown-menu table{ margin-bottom: 0px; } .fa-solid.fa-circle-xmark::before{ content: "x"; } .text-end{ color:#fff; } .text-start, .text-start a{ color:#fff; } .text-start a{ display:block; } .text-start a:hover{ color:#fff; } .text-center > a > .img-thumbnail{ display: block; min-width: 60px; } /* товар на главной #ELEMENT */ #col-block{ flex: none; padding: 3px; } #col-block-sp{ min-width:290px; max-width: 300px; margin: 0 auto; } .price{ margin-top: 0px; background: radial-gradient(rgb(81, 85, 80), rgb(57, 57, 57)); padding: 10px; border-radius: 5px; display: inline-block; box-shadow: 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.79), 0 0 4px rgba(0, 0, 0, 0.4); position: relative; right: 0px; border-top: 2px #4bb900 solid; margin: 0 auto; display: block; width: 50%; text-align: center; } .product-thumb > .content > .description > p{ min-height:130px; } .cont_block{ width: 97%; } #cont_block > h3{ text-align:left; text-transform: uppercase; padding:10px; backdrop-filter: blur( var(--blur) ); } /* ПРАВКИ ОСНОВНОЙ АРХИТЕКТУРЫ #ELEMENT */ #top{ min-height:40px; display: flow-root; z-index: 1000; } #logo{ width:20%; max-width: 200px; margin-left:2%; margin-right:2%; float: left; line-height: 50px; margin-top:15px; min-width: 100px; position: relative; } #logo img{ max-width: 100%; } #search_div{ float: right; margin-right:1%; margin-left:1%; margin-top:0px; } #search > .form-control.form-control-lg{ height: 50px; } #buttonTextI{ padding-right:10px; font-family: "Open Sans", sans-serif; font-style: italic; } #top > .container{ width:60%; float: right; background:; min-width: 200px; margin-top:15px; margin-right:20px; padding: 0px; } /*.nav.float-end{float: left !important;}*/ /* мини корзина слева #ELEMENT */ .dropdownTd{ min-height: 80px; min-width: 30px; } .list-inline-item{height:50px;} .list-inline-item > .dropdown, .list-inline-item > a, .list-inline-item > .d-none.d-md-inline{margin-top: 7px;} #header-cart{ display:none; width: 45px; position: fixed; top: 140px; right: 1px; z-index: 8888; } #header-cart > .dropdown.d-grid > .btn.btn-inverse.btn-block.dropdown-toggle{ width: 45px; height:100px; transition:0.2s linear; } #header-cart > .dropdown.d-grid > .btn.btn-inverse.btn-block.dropdown-toggle:hover, #header-cart > .dropdown.d-grid > .btn.btn-inverse.btn-block.dropdown-toggle:focus{ width: 50px; margin-left:-5px; color:red; transition:0.2s linear; } .dropdown-menu.dropdown-menu-right.show{ width:100% !important; right: 20px !important; display: inline-table; min-width: 360px; } #header-cart .dropdown-menu li{ min-width: 360px; padding: 10px 2px; min-height: 70px; } .btn.btn-inverse.btn-block.dropdown-toggle > .fa-solid.fa-cart-shopping{ margin-left: -5px; } .navbar-toggler.collapsed, .navbar-toggler{ position: absolute; top:7px; } .navbar-toggler{ top:-25px; } .remove_dkv{ font-size: 20pt; } /* банер 1 */ #carousel-banner-0{ width: 100vw; position: relative; left: calc(-50vw + 50%); background:none; box-shadow:none; top: -30px; } .carousel-inner{ width: 104vw; position: relative; left: calc(-52vw + 52%); top:-10%; } #carousel-inner-img{ position: relative; } #carousel-inner-img > a > .img-fluid{ width: 100%; position: relative; height:100%; left:-2%; } .carousel-item{ left: 0%; } .bannerText{ position: absolute; font-size: 40pt; font-family: Bowler, Geneva, sans-serif; text-shadow: 0 0 5px rgba(0, 0, 0, 0.9), 0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0); } .bannerTextLeft{ top: 10%; left: 10%; text-align: left; } .bannerTextRight{ bottom: 10%; right: 10%; text-align: right; } @media (max-width: 767.98px) { .bannerText{ width: 70%; font-size: 15pt !important; } .bannerTextLeft{ left: 20%; } .bannerTextRight{ right: 20%; } } /* собственные модули #ELEMENT */ #test_id_001{ width:100%; height:500px; } .baseBlock001{ background:rgba(71, 71, 71, 0.6); border-radius: 5px; margin-bottom:10px; position: relative; padding-top: 10px; padding-bottom: 10px; backdrop-filter: blur( var(--blur) ); } /* блок кнопок на главной о нас, гарантия и т.д. */ .block_buttons_in_home_001{ background:rgba(71, 71, 71, 0.6); border-radius: 5px; margin-bottom:80px; position: relative; padding-top: 10px; padding-bottom: 10px; backdrop-filter: blur( var(--blur) ); } .block_buttons_in_home_001_elements{ display: flex; margin: 0 auto; padding: 0px; justify-content: center; flex-wrap: wrap; } .button_in_home_001_a{ height:100%; display:block; position: relative; transition:0.2s linear; border-radius: 5px; user-select: none; } .button_in_home_001{ position: relative; width:150px; height:150px; background: radial-gradient(rgb(70, 41, 98), rgb(30, 30, 30)); float: left; margin:2px; border-radius: 5px; } .button_in_home_001_a_p{ width:100%; position: absolute; bottom: 3%; text-align:center; text-transform: uppercase; margin: 0px; } .button_in_home_001_a_img{ width:50%; position: absolute; top:15%; left:25%; } .button_in_home_001_a_img_b{ width: 100%; position: absolute; top: -15px; left: 0px; } .button_in_home_001_mini{ } /* быстрые фильтры */ .miniTopMenu{ background: #0000004a; padding: 5px; position: relative; top: -10px; border-radius: 5px; border: 1px #545454f5 solid; } .miniTopMenuButton{ width: 65px; background: #ff00009e; padding: 8px 0px; text-align: center; border-radius: 5px; border: 1px #6161618c solid; transition: 0.2s linear; cursor: pointer; font-size: 13px; user-select: none; } .miniTopMenuButton:hover{ background: #ff0000de; } .miniTopMenuButtonGreen{ background: #1e3b219e; } .miniTopMenuButtonGreen:hover{ background: #1d852661; } #miniTopMenuButton{ position: absolute; top: -25px; right: 5px; } .activeElement{ box-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2), 0 0 8px rgba(255, 255, 255, 0.1); background: #08ff0038; border: 1px #8d8d8d solid; } /* блок на главной 002 категории товара */ #block_buttons_in_home_002{ background:rgba(71, 71, 71, 0.0); border-radius: 5px; margin-bottom:30px; position: relative; top:0px; } #block_buttons_in_home_002_elements{ display: table; margin:0 auto; } .block_buttons_in_home_002_element, .button_in_home_002, .button_in_home_002_img { width: 400px; } .block_buttons_in_home_002_element{ position: relative; float: left; margin:10px; } .block_buttons_in_home_002_element > p { padding: 10px; font-size: 12pt; line-height: 130%; } .block_buttons_in_home_002_text{ text-align: center; margin-top: 50px; } .block_buttons_in_home_002_text > h2 { margin-bottom: 30px; } .catalogButtonM{ min-width: 200px; font-size: 14pt; } .button_in_home_002{ position: relative; background:#525252; border-radius: 5px; transition:0.2s linear; } .button_in_home_002_img{ position: relative; height:400px; display:block; position: relative; transition:0.2s linear; border-radius: 5px; } .button_in_home_002_p{ width:100%; position: absolute; bottom:0px; text-align:center; text-transform: uppercase; font-size: 22pt; transition:0.2s linear; animation: anime infinite 5s linear; } @keyframes anime { 0% { color: red; } 20% { color: ffff00; } 40% { color: #00ff00; } 60% { color: #fff; } 80% { color: #7800ff; } 100% { color: red; } } .button_in_home_002 > picture > img{ width:100%; position: absolute; border-radius: 5px; transition:0.2s linear; } .button_in_home_002:hover, .button_in_home_002 > a > picture > img:hover{ border-radius: 5px; } /* блок категории на главной 001 */ .button_in_home_001_a_cat{ width: 80%; position: absolute; top: 5px; left: 10%; border-radius: 5px; transition:0.2s linear; transition-timing-function: ease; } #h3HomeTop{ position: relative; top:-30px; } .h3Left{ text-align: left; } /*

FPC.BY - магазин игровых компьютеров!

Игровые компьютеры FPC.BY это лучшее решение, которое удовлетворит любого геймера, как по качеству, так и по цене.
Выбрать и купить игровой компьютер можно в нашем каталоге!!!

*/ .block_text_in_home_001{ width: 90%; margin: 0 auto; text-transform: uppercase; padding-bottom: 100px; } .block_text_in_home_001 > h1{ margin-bottom: 40px; } .block_text_in_home_001 > h3{ width: 70%; margin: 0 auto; line-height: 150%; } /* возврат товара #ELEMENT */ .daterangepicker .calendar-table, .drp-calendar{ background-color: #858585; } .daterangepicker td.off{ background-color: #474747; } .daterangepicker td.available:hover{ background-color: #f00; } .daterangepicker td.active{ background-color: #f00; } .daterangepicker{ border: 1px solid #000; } .available{ margin:2px; } button_in_home_001_a:hover .button_in_home_001_a_cat { width:81%; left:9%; top: 4%; } /* Модельные окна типа правовая информация окно правил куки #ELEMENT */ .modal-content{ background-color: #818181; } #cookie{ height: min-content; } /* страницы информации #ELEMENT */ #contentInfo{ background: rgba(79, 78, 78, 0.8); border-radius: 5px; padding:10px; min-width: 300px; position: relative; z-index: 400; } #contentInfoBlur{ backdrop-filter: blur( var(--blur) ); width: 98%; position: absolute; top: 0px; left: 1%; height: 100%; border-radius: 5px; z-index: 300; } #contentInfo > h1{ margin:20px; } #contentInfo > p > a{ color:#ff8383; } #contentInfo > p > a:hover{ color:#ff4040; } /* личный кабинет #ELEMENT */ #contentUser{ background: rgba(100, 100, 100, 0.5); border-radius: 5px; border: none; padding:20px; } #contentUser > h2{ text-align: left; margin-top:20px; } #contentUser .list-unstyled{ margin-left:10px; } #list-group-account a{ transition:0.2s linear; } #list-group-account a:hover{ background: #808080; } #rewardIs{ background: red; padding: 5px; width: fit-content; } .text-end a{ margin-left: 4px; } /* оплата #ELEMENT */ #shipping_method_title{ color:rgba(106, 106, 106, 0.0); text-shadow:none; } #shipping_method_title_option, #payment_method_title_option{ color:#000; background: #fff; } /* страница логина авторизации #ELEMENT */ #loginDivLogin > .col-sm-6, #loginDivReg > .col-sm-6{ margin-left: 25%; margin-top: 50px; } #buttonLoginDivlogin, #buttonARegDivlogin{ width: 30%; margin-left: 35%; margin-top: 20px; } #loginDivLogin h2, #loginDivReg h2{ margin-bottom: 20px; } .form-check.form-check-inline{ position: relative; } .inputCheckboxMidl{ width: 30px; height: 30px; } #inputCheckboxReg{ width: 35px; height: 35px; margin: 10px; } #formCheckLabelRegTwig{ padding: 10px; text-align: center; } #formCheckLabelRegTwig > a{ color: #ff9898; } #buttonRegRegTwig{ min-width:50%; margin-top: 70px; margin-bottom: 50px; padding: 15px; } .formCheckRegDkv{ display: flex; background: #5c5c5c82; border-radius: 5px; backdrop-filter: blur( var(--blur) ); } /* аккаунт пользователя #ELEMENT /* /* МЕНЮ аккаунта пользователя профиль */ #list-group-account{ margin-top: 20px; width: 100%; background: rgba(100, 100, 100, 0.5); backdrop-filter: blur( var(--blur) ); } #list-group-account a:hover{ background:#e52e2e; } #accountTopA{ background:rgba(100, 100, 100, 0.5); text-align: center; text-transform: uppercase; } .price{ color: #fff; } /* на мобилах */ #accountMobileMenuDivAccountTwig{ display:none; } #accountMobileMenuDivAccountTwig > #column-right{ width: 100%; } /* страница заказы пользователя */ .orderUserDiv{ width: 100%; min-height: 150px; background: #444; border: 1px #7e7e7e solid; border-radius: 10px; margin: 30px 0px; position: relative; } .orderUserElementsDivOrder{ display: flex; margin-bottom: 20px; } .orderUserDivH { background: #4d4d4d; padding: 10px 15px; border-radius: 10px 10px 0px 0px; border-bottom: 1px #595959 solid; } .orderUserDivH > h2 > i{ font-size: 15pt; color: #c4c4c4; } .orderUserDiv > h3{ font-size: 15pt; padding: 0px 15px; } .orderUserElementsDiv{ padding: 5px; border: 1px #565656 solid; margin: 5px; background: #606060; border-radius: 5px; position: relative; } .orderUserElementsDivImg{ max-width: 200px; width: 15%; height: max-content; border-radius: 10px; padding-right: 10px; float: left; } .orderUserElementsDivImgMini{ width: 200px; max-width: 100%; height: max-content; border-radius: 10px; background: radial-gradient(#45206a, #0b0b0b); } .orderUserDivStatus{ position: absolute; top: 15px; right: 45px; text-transform: lowercase; } .orderUserDivStatusH{ } .orderUserElementsDivText{ width: 85%; padding: 10px; float: left; } .orderUserElementsDivText > p { max-width: 90%; } .orderUserElementsDivOptions{ margin: 0px 0px 20px 0px; } .orderUserElementsDivOptionsElement{ padding: 2px 10px; background: #7e7e7e54; margin-bottom: 5px; margin-left: 20px; width: fit-content; border-left: 3px #5bca10 solid; min-width: 380px; } .orderUserElementsDivOptionsElement > b{ margin-left: 5px; } .orderUserBottomDiv{ padding: 10px; } .orderUserMessageDiv{ background: #82712e; padding: 20px 10px; margin: 0px 10px 15px 10px; border: 1px #aa743a solid; } .orderStatus{ position: absolute; top: -25px; right: -35px; font-size: 50pt !important; text-shadow: 0 0 1px rgb(0, 0, 0), 0 0 4px rgb(0, 0, 0), 0 0 6px rgb(0, 0, 0); } .orderStatusOk{ font-size: 45pt !important; right: -50px; top: -35px; } .aOrderViewProduct{ width: 40%; text-align: center; margin: 0 auto; background: #b10000; } .aOrderViewProduct:hover{ background: #d70000; } .aOrderViewProductGreen{ background: #1eb100; } .aOrderViewProductGreen:hover{ background: #24d400; } .h4product{ margin-left: -10px; } .orderUserElementsDivTextPrice{ position: absolute; right: 10px; bottom: 10px; font-size: 14pt; } /* окно сообщений D.K.V. */ .messageBoxDiv{ background: #2d2d2db2; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 9999; } .messageBoxDivAlertDiv{ width: 80%; min-height: 50%; margin-left: 10%; margin-top: 5%; background: #5c5c5c; border-radius: 10px; border: 1px #777 solid; padding: 10px; } .buttonCloseRound{ width: 50px; height: 50px; background: #b30000; font-size: 24pt; color: #fff; border-radius: 30px; border: 1px black solid; float: right; transition: 0.2s linear; } .buttonCloseRound:hover{ background: #d90000; } .messageBoxDivAlertDiv > form > h2 { margin-top: 50px; } .buttonsDiv{ text-align: center; } .inputHiden{ visibility: hidden; position: absolute; } .buttonConfirm{ width: 200px; margin-right: 50px; margin-top: 50px; border: 1px #797979 solid; border-radius: 5px; background: #3d3d3d; color: #fff; min-height: 50px; transition: 0.2s linear; } .buttonConfirmRed{background: #ca0f0f;} .buttonConfirmRed:hover{background: #e70505;} .buttonConfirmGreen{background: #48af23} .buttonConfirmGreen:hover{background: #45d112;} /* статусы заказов индикация */ .orderStatus7, .orderStatus18, .orderStatus16{ color: red; } .orderStatus1{ color: #0070ff; } .orderStatus1{ color: #0070ff; } .orderStatus2, .orderStatus12{ color: #ffe300; } .orderStatus3, .orderStatus5{ color: #00ff1c; } .orderStatus15{ color: #8b00ff; } /* подвал футер #ELEMENT */ #footerElement{ display: flex; margin-bottom: 60px; } #poweredInfoDiv{ width:50%; } #imgEripDiv{ width:50%; text-align: right; } .imgErip{ width: 12%; margin-right:10px; } footer a{ color: #fff; } /* контакты #ELEMENT */ #addressInContact{ display: none; } /* отзывы #ELEMENT */ .strongTextWite{ color: #fff; } .rating .fa-star{ color: #62FF1B !important; } .table.table-bordered{ background: #7a7a7a; } .headReview{ background: #7b7e77; } #input-rating{ display: flex; } /* оставить отзыв о товаре #ELEMENT */ .form-check-input{ width: 20px; height: 20px; } .formCheckInputP{ margin-top: 6px; margin-right: 5px; } .formCheckInputDiv{ display: flex; background: #7d847c; margin: 0px 10px; border-radius: 5px; padding: 5px 5px 0px; } #review{ padding: 30px 0px; } .reviewWriteForm{ width: 60%; margin: 0 auto; } .reviewButtonDiv{ text-align: center; margin: 50px 0px; } .reviewButtonDiv > button{ padding: 20px; } /* отзывы страница D.K.V. #ELEMENT */ .fpcReviewsDivOs{ margin-bottom: 50px; display: flex; flex-flow: wrap; justify-content: center; } .fpcReviewsDivElementOs{ position: relative; width: 400px; min-height: 200px; margin: 20px; } .fpcReviewsDivElement{ position: relative; width: 400px; background: #7c7c7c; border: 1px #757575 solid; border-radius: 10px 10px 0px 10px; min-height: 200px; } .fpcReviewsDivName{ position: relative; background: #646464; padding-left: 20px; padding: 10px; border-radius: 10px 10px 0px 0px; border-bottom: 1px #948e8e solid; text-transform: uppercase; } .fpcReviewsDivReview{ padding: 10px; margin-bottom: 10px; } .fpcReviewsDivNumb{ position: absolute; right: 10px; top: 10px; color: #c6c6c6; } .fpcReviewsDivDate{ position: absolute; top: 5px; left: 5px; font-size: 10pt; color: #a0a0a0; } .fpcReviewsDivReviewComment{ background: #939393; border-top: 1px #ffa7007a solid; } .fpcReviewsDivReviewCommentH{ color: white; font-size: 13pt; text-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 0 2px rgb(0, 0, 0), 0 0 4px rgb(0, 0, 0); } .fpcReviewsDivGrade{ width: 100%; position: absolute; bottom: 0px; text-align: right; padding: 5px; padding-right: 5px; color: #00ff28; font-size: 18pt; background: #757575; border-radius: 0px 0px 0px 10px; border-top: 1px #948e8e solid; } .fpcReviewsDivGradeYellow{ color: #ebff00; } .fpcReviewsDivGradeRed{ color: #db5858; } .fpcReviewsDivDecor{ width: 20px; height: 20px; font-size: 20pt; position: absolute; bottom: -6px; right: -9px; transform: rotate(40deg); color: #757575; user-select: none; } .divAddReview{ width: 60%; margin-left: 20%; } .imputBottonCenterDiv{ text-align: center; margin: 50px 0px; } .btnAddReview{ } #addReviewForm{ padding-top: 40px; } /* рейтинг #ELEMENT */ .rating-area { overflow: hidden; width: 265px; margin: 0 auto; padding: 20px 0px; border: 1px #757575 solid; background: #828282; border-radius: 10px; } .rating-area:not(:checked) > input { display: none; } .rating-area:not(:checked) > label { float: right; width: 42px; padding: 0; cursor: pointer; font-size: 32px; line-height: 32px; color: #00ff28; transition:0.5s linear; } .rating-area:not(:checked) > label:before { content: '☆'; } .rating-area > input:checked ~ label, .rating-area > input:checked ~ label:before { content: '✭'; } .rating-area:not(:checked) > label:hover, .rating-area:not(:checked) > label:hover:before, .rating-area:not(:checked) > label:hover ~ label, .rating-area:not(:checked) > label:hover ~ label:before { content: '✭'; } .rating-area:not(:checked) > label:hover{ content: '✭'; } .rating-area > input:checked + label:hover, .rating-area > input:checked + label:hover ~ label, .rating-area > input:checked ~ label:hover, .rating-area > input:checked ~ label:hover ~ label, .rating-area > label:hover ~ input:checked ~ label { content: '✭'; } .rate-area > label:active { position: relative; } #starEnd{ visibility: hidden; width: 20px; } /* капча D.K.V. #ELEMENT */ .captchaDiv{ text-align: center; min-width: 300px; max-width: 50%; min-height: 202px; background: #3c3c3c; border-radius: 10px; border: 1px #757575 solid; margin-top: 40px; position: relative; margin: 0 auto; } .captchaDiv:hover{ cursor: pointer; } .captchaDiv > label{ position: absolute; z-index: 3000; width: 100%; bottom: 0px; left: 0px; } #captchaImg{ z-index: 2000; position: relative; border-radius: 10px; } #captchaImgLoad{ width: 100%; position: absolute; left: 0px; top: 0px; } #addReviewCaptcha{ text-align: center; font-size: 22pt; } .captchaDivForm{ width:50%; margin: 0 auto; } .captchaDivForm > input{ text-align: center; } /* конфигуратор #ELEMENT */ .configuratorElements{ width: 90%; margin: auto; background: #464646b0; padding: 10px; border-radius: 10px; margin-bottom: 50px; border-top: 7px #8000ff solid; } .configuratorElementsH{ text-align: left; width: 90%; margin: auto; padding: 10px; } .configuratorElement{ background: #6f6f6f42; border-radius: 10px; display: flex; margin-bottom: 10px; } /* мини БГ */ .configuratorElementImgDiv, .configCalcElemDivImg { position: relative; background: radial-gradient(#45206a, #282828); border-radius: 10px; background-repeat: no-repeat; background-size: cover; overflow: hidden; z-index: 100; } /* окно просмотра фото */ #openImageDivImgDiv{ position: relative; margin: auto; border-radius: 10px; background: radial-gradient(#45206a, #0b0b0b); background-repeat: no-repeat; background-size: cover; /* overflow: hidden; */ border: 1px #5c5c5c solid; min-width: 40%; } #openImageDivImg{ padding: 10px; width: 100%; } .configuratorElementImgDiv{ position: relative; display: inline-block; overflow: hidden; width: 240px; margin: 5px; border-radius: 10px; background-repeat: no-repeat; background-size: auto; border: 1px #5c5c5c solid; } .configuratorElementImgDivBg{ width: 100%; height: 100%; position: absolute; } .configuratorElementImg{ position: relative; width: 200px; height: 200px; border-radius: 10px; z-index: 200; } .configuratorElementImg:hover{ cursor: pointer; } .configuratorElementText{ position: relative; width: 95%; padding: 10px; } .configuratorElementText > p{ margin-bottom: 8px; } /* меняя цвет заголовка нужно менять его и в скрипте information.twig h3ElementsDefolt */ .configuratorElementText > h3{ background: #5e5e5e; padding: 5px; border: 1px #6a6a6a solid; border-radius: 5px; margin-bottom: 15px; } .configuratorElementCheck{ width: 5%; background: #a08700; border-radius: 0px 10px 10px 0px; } .configuratorElementCheck > input{ visibility: hidden; position: absolute; } .configuratorElementPriceText, .configuratorElementPriceTextM2{ position: absolute; right: 20px; bottom: 10px; } .configuratorElementPriceTextM2{ right: 0px; } .configuratorElementPriceTextP{ margin-bottom: 0px; } .configuratorElementPriceTextPRed{ color: #ca3f1a; text-decoration: line-through; } .configuratorElementTextHidden{ visibility: hidden; position: absolute; } .configuratorInputElement{ background: #626262; border: 1px #474747 solid; color: #fff; padding: 6px 10px; width: 90px; } .configuratorInputElement:focus-visible{ outline: 1px #dddddd30 solid; } .configuratorElementIndicator{ background: #2d2d2d; width: 25px; height: 25px; position: absolute; top: 10px; right: 10px; border-radius: 15px; z-index: 250; } .configuratorElementIndicator0{ background: #ffe300; } .configuratorElementIndicator1{ background: #00f304; } .configuratorElementIndicator2{ background: #6300f3; } .configuratorElementIndicator3{ background: #f35b00; } .configuratorSubmitBuyDiv{ text-align: center; } .configuratorSubmitBuy{ min-width: 300px; } .mesageMb1, .mesageMb2, .mesageMbSocket1, .mesageMbSocket2, .mesageMbSocket3, .mesageMbSocket4, .mesageRam1, .mesageRam2, .mesageBp1, .mesageBp2, .mesageBp3, .mesageBp4, .mesageBp5, .mesageBp6, .mesageBp7, .mesageBp8 { display:none; text-align: center; background: #785a4a; padding: 10px; } #cpuDiv, #mbDiv, #ramDiv, #gpuDiv, #bpDiv, #ssdDiv, #hddDiv, #caseDiv, #coolDiv, #otherDiv{ border-left: 5px #813507 solid; } /* кастомный чекбокс */ .container_checkmark {transition: 0.2s linear;height: 100%;display: flex; position: relative;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} /* Hide the browser's default checkbox */ .container_checkmark input {position: absolute; left:0px;opacity: 0;cursor: pointer;height: 0;width: 0;} /* Create a custom checkbox */ .checkmark {position: relative;margin: auto;display: inline-block;height: 35px;width: 35px;background-color: #eee;} /* On mouse-over, add a grey background color */ .container_checkmark:hover input ~ .checkmark {} .container_checkmark:hover ~ .configuratorElementCheck {background: #f00 !important;} /* When the checkbox is checked, add a blue background */ .container_checkmark input:checked ~ .checkmark {background-color: #1eda34;} /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after {content: "";position: absolute;display: none;} /* Show the checkmark when checked */ .container_checkmark input:checked ~ .checkmark:after {display: block;} /* Style the checkmark/indicator */ .container_checkmark .checkmark:after { left: 12px;top: 0px;width: 10px;height: 25px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);} .checkmark_bg, .checkmark_bg_b{transition: 0.2s linear;} .container_checkmark input:checked ~ .checkmark_bg { position: absolute; width: 100%; height: 100%;background: #42b40e; border-radius: 0px 10px 10px 0px; } .container_checkmark input:disabled ~ .checkmark_bg { position: absolute; width: 100%; height: 100%;background: red; border-radius: 0px 10px 10px 0px; } .container_checkmark input:checked ~ .checkmark_bg_b { position: absolute; width: 98%; height: 3px; border: 2px #42b40e solid; border-radius: 10px 10px 0px 0px; top: -8px; left: 1%; } .container_checkmark input:disabled ~ .checkmark_bg_b { position: absolute; width: 100%; height: 100%;background: red; } #openImageDiv{ display:none; background: #0b0b0bcf; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; backdrop-filter: blur( var(--blur) ); z-index: 9999; } .closeImgButn{ width:90px; height:60px; cursor: pointer; background: #ff0000bd; font-size: 18pt; padding: 15px; height: fit-content; position: absolute; top: -55px; right: 0px; opacity: 0.65; font-size: 18px; font-family: Arial, Baskerville, monospace; border-radius: 0.25rem; text-align: center; transition: 0.2s linear; } .closeImgButn:hover{ background: #f00; } /* расчёт цены конфигуратор */ .configCalcDiv{ display: flex; width: fit-content; margin: 0 auto; flex-flow: wrap; justify-content: center; } .configCalcElemDiv, .configCalcElemDiv_v2{ width: min-content; background: #3c3c3c; border-radius: 10px; margin: 5px; position: relative; float: left; } .configCalcElemDiv{ min-height: 360px; min-width: 190px; } .configCalcElemDiv_v2{ min-height: 300px; min-width: 210px; } .configCalcElemDiv_v2 p{ margin: 0px; } .configCalcElemDiv > h3{ font-size: 14pt; min-height: 50px; padding:5px; } .configCalcElemDiv > h4{ margin-top: 3px; } .pcsUserElemDiv{ min-height: 240px; transition: 0.2s linear; position: relative; } .pcsUserElemDiv:hover{ background: #707070; } .pcsUserElemDivA{ position: absolute; width: 100%; height: 100%; display: block; top: 0px; left: 0px; z-index: 400; } #configuratorElementTop{ padding: 40px; font-size: 15pt; line-height: 20pt; } .configuratorElementInfo{ display: flex; } .configuratorElementInfo > i{ margin-top: 8px; } .configuratorElementInfoIndicator{ position: relative; width: 40px; height: 40px; } .configCalcElemDivImg{ position: relative; margin: 5px; text-align: center; } .configCalcElemDivImg > img{ position: relative; width: 178px; border-radius: 10px; z-index: 200; min-height: 150px; display: inline-block; color: #0000; text-shadow: none; user-select: none; cursor: pointer; } .configCalcElemDivP{ font-size: 10pt; padding: 1px 5px; } .configCalcElemDivPriceP{ margin: 0px; position: absolute; bottom: 5px; right: 5px; } .configCalcElemMiniA{ background: #a80606; padding: 5px 15px; border: 1px #515151 solid; border-radius: 5px; transition: 0.2s linear; } .configCalcElemMiniA:hover{ background: #e60000; border: 1px #646464 solid; } #allUserPcs{ width: fit-content; margin: 0 auto; } .bgVideoMini{ position: absolute; right: 0; top: -40px; width: 180%; z-index: 100; } .aButtonConfigurator{ } /* ТОП 50 #ELEMENT */ .informationTopDiv{ position: relative; width: 50%; min-height: 300px; background: #6a6a6a52; padding: 10px; border-radius: 10px; margin: 0 auto; margin-bottom: 15px; transition: 0.2s linear; } .informationTopDiv:hover{ background: #a6a6a652; } .informationTopH{ padding-top: 5px; } .informationTopDivElements{ display: flex; } .informationTopDivImg{ width: 30%; margin: 10px; } .informationTopDivImg > img{ width: 100%; border-radius: 10px; } .informationTopDivDescription{ width: 67%; float: left; padding-top: 20px; padding-bottom: 20px; } .informationTopRating{ position: absolute; bottom: 0px; right: 20px; font-size: 12pt; } .informationTopRatingId{ position: absolute; top: 35px; font-size: 20pt; left: 10px; color: #90ff91; padding: 15px 18px; background: #6d6d6d9c; border-radius: 25px; backdrop-filter: blur( var(--blur) ); text-shadow: 0 2px #4a1c8c; } .informationTopMesage{ padding-top: 10px; text-align: center; color: #bdffa5; font-size: 12pt; } .informationTopA{ position: absolute; width: 100%; height: 100%; display: block; top: 0px; left: 0px; } /* просмотр фото OPENCART */ .mfp-img{ /*background: radial-gradient(#45206a, #0b0b0b);*/ } /* ЧАТ D.K.V. #ELEMENT */ .fpcChatOsDiv, .fpcChatDivHeader{ border-radius: 10px 10px 0px 0px; } .fpcChatOsDiv{ /*background: #ffffff54;*/ position: fixed; bottom: 0px; right: 5%; min-width:10%; z-index: 9000; } .fpcChatDivHeader{ min-width: 200px; height: 50px; background: #c8000096; transition: 0.2s linear; border-top: 3px #41005e solid; backdrop-filter: blur( var(--blur) ); } .fpcChatDivHeader > h3{ padding: 12px; } .fpcChatDivHeader > h3 > b{ color: lightgray; } .fpcChatDivHeader:hover{ cursor: pointer; background: #f20000e0; } /* свойства компьютеров на странице товара #ELEMENT */ .attributeDkvText > p{ margin: 0 auto; } /* горизонтальный элемент на главной */ .block_horizontal_element{ margin: 0 auto; display: flex; margin-top: 50px; border-top: 3px #00aa0b solid; border-radius: 10px; width: 80%; background: #0000000a; } .block_horizontal_internal_elements{ width: 80%; position: relative; margin: 0 auto; } .block_horizontal_img_div{ position: relative; width: 250px; height: 250px; margin-top: 3px; } .lock_horizontal_img{ display: block; width: 100%; border-radius: 10px; background: radial-gradient(rgb(69, 32, 106), rgb(13, 13, 13)); } .block_horizontal_element p{ padding: 15px 20px; } .block_horizontal_element_p{ width: 96%; position: absolute; text-align: center; text-transform: uppercase; font-size: 22pt; transition: 0.2s linear; animation: anime infinite 5s linear; top: 10px; padding: 10px; background: #7070704f; margin: 0px 2%; border-radius: 10px; } @keyframes anime { 0% { color: red; } 20% { color: ffff00; } 40% { color: #00ff00; } 60% { color: #fff; } 80% { color: #7800ff; } 100% { color: red; } } .block_horizontal_info_p{ margin-top: 50px; font-size: 14pt; line-height: 120%; } .block_horizontal_button{ width: 100%; bottom: 5px; } /* СРАВНЕНИЯ */ .compareElementMax{ max-width: 24%; } .compareElement{ margin: 5px; padding-bottom: 40px; } .compareHead{ min-height: 80px; font-size: 14pt; margin-right: 60px; margin-left: 60px; } .compareElementImg{ width: 50%; position: relative; margin: 0 auto; margin-bottom: 20px; } .compareElementImg img{ width: 100%; border-radius: 5px; cursor: pointer; background: radial-gradient(#45206a, #282828); } .compareElementText{ padding: 2px 10px; } .compareElementTextBig{ min-height: 180px; margin: 0 auto; } .compareElementBye{ width: 80%; margin: 0 auto; padding-top: 30px; } @media (max-width: 767.98px) { .compareElementMax{ max-width: 47%; } .compareHead{ font-size: 10pt !important; margin-right: 0px; margin-left: 0px; margin-top: 40px; min-height: 50px; } .compareElement > .btnCloseDkv{ padding: 7px; top: 3px; right: 3px; } .compareElementImg{ width: 98%; } .compareElementText > .price{ width: 100%; } }