380 lines
8.5 KiB
CSS
380 lines
8.5 KiB
CSS
@import "@/components/pages/product/embla.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html, body {
|
|
@apply h-full m-0 p-0;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 4.615% 12.75%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 20 14.3% 4.1%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 20 14.3% 4.1%;
|
|
--primary: 47.9 95.8% 53.1%;
|
|
--primary-foreground: 26 83.3% 14.1%;
|
|
--secondary: 60 4.8% 95.9%;
|
|
--secondary-foreground: 24 9.8% 10%;
|
|
--muted: 60 4.8% 95.9%;
|
|
--muted-foreground: 25 5.3% 44.7%;
|
|
--accent: 60 4.8% 95.9%;
|
|
--accent-foreground: 24 9.8% 10%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 60 9.1% 97.8%;
|
|
--border: 20 5.9% 90%;
|
|
--input: 20 5.9% 90%;
|
|
--ring: 20 14.3% 4.1%;
|
|
--radius: 0.5rem;
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--sidebar-background: 0 0% 98%;
|
|
--sidebar-foreground: 240 5.3% 26.1%;
|
|
--sidebar-primary: 240 5.9% 10%;
|
|
--sidebar-primary-foreground: 0 0% 98%;
|
|
--sidebar-accent: 240 4.8% 95.9%;
|
|
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
--sidebar-border: 220 13% 91%;
|
|
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
}
|
|
|
|
.dark {
|
|
--background: 20 14.3% 4.1%;
|
|
--foreground: 60 9.1% 97.8%;
|
|
--card: 20 14.3% 4.1%;
|
|
--card-foreground: 60 9.1% 97.8%;
|
|
--popover: 20 14.3% 4.1%;
|
|
--popover-foreground: 60 9.1% 97.8%;
|
|
--primary: 47.9 95.8% 53.1%;
|
|
--primary-foreground: 26 83.3% 14.1%;
|
|
--secondary: 12 6.5% 15.1%;
|
|
--secondary-foreground: 60 9.1% 97.8%;
|
|
--muted: 12 6.5% 15.1%;
|
|
--muted-foreground: 24 5.4% 63.9%;
|
|
--accent: 12 6.5% 15.1%;
|
|
--accent-foreground: 60 9.1% 97.8%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 60 9.1% 97.8%;
|
|
--border: 12 6.5% 15.1%;
|
|
--input: 12 6.5% 15.1%;
|
|
--ring: 35.5 91.7% 32.9%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
--sidebar-background: 240 5.9% 10%;
|
|
--sidebar-foreground: 240 4.8% 95.9%;
|
|
--sidebar-primary: 224.3 76.3% 48%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 240 3.7% 15.9%;
|
|
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
|
--sidebar-border: 240 3.7% 15.9%;
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
|
|
@layer utilities {
|
|
/* .no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; !* IE and Edge *!
|
|
scrollbar-width: none; !* Firefox *!
|
|
}*/
|
|
|
|
.bw-app-catalog-collapse {
|
|
@apply absolute scale-0 z-20
|
|
}
|
|
|
|
.header-button {
|
|
@apply cursor-pointer p-1 border border-transparent rounded-[2px];
|
|
}
|
|
.h1-bold {
|
|
@apply font-bold text-2xl lg:text-3xl;
|
|
}
|
|
|
|
.bw-layout-col-left {
|
|
@apply flex-1 sm:w-7/12 md:w-5/12 xl:w-5/12 lg:flex-col
|
|
}
|
|
|
|
.bw-layout-col-right {
|
|
@apply sm:w-5/12 md:w-7/12 xl:w-7/12 flex-1 sm:flex-auto sm:pl-4 md:pl-7 xl:pl-9
|
|
}
|
|
|
|
.bw-product-col-left{
|
|
@apply flex-1 sm:w-5/12 sm:flex-auto sm:pl-4 md:w-7/12 md:pl-7 xl:w-auto xl:pl-9
|
|
}
|
|
.bw-product-col-right{
|
|
@apply flex-1 sm:w-7/12 md:w-5/12 lg:flex-col xl:w-[360px] xl:flex-none
|
|
}
|
|
|
|
.bw-header-col-left {
|
|
@apply w-[9/12] flex-auto
|
|
}
|
|
|
|
.bw-header-col-right {
|
|
@apply flex-grow-0 flex-shrink-0 md:basis-[142px]
|
|
}
|
|
|
|
.bw-border-color {
|
|
@apply border-brand-violet-100;
|
|
}
|
|
|
|
.bw-separator-color {
|
|
@apply bg-brand-violet-100;
|
|
}
|
|
}
|
|
|
|
.bw-terms-section {
|
|
|
|
.bw-accordion-item {
|
|
|
|
@apply w-[100%] flex-none overflow-hidden border-b-0 md:w-[46.75%] lg:w-[29.25%]; /*shadow-md*/
|
|
|
|
/*&:hover {
|
|
@apply bg-brand-violet-800/25;
|
|
}*/
|
|
|
|
&[data-state="open"]{
|
|
@apply border-brand-violet-800/25 border-[2px] rounded-lg; /*shadow-md shadow-brand-violet-900/30*/
|
|
|
|
.bw-accordion-content {
|
|
@apply rounded-br-lg rounded-bl-lg bg-brand-violet-50/15; /*border-r-[2px] border-b-[2px] border-l-[2px]*/
|
|
}/*bg-brand-violet-50/50*/
|
|
}
|
|
|
|
|
|
button {
|
|
&[data-state="closed"] {
|
|
@apply border-[2px] rounded-lg; /*shadow-lg border-brand-violet-900/10*/
|
|
}
|
|
|
|
&[data-state="open"] {
|
|
@apply border-[2px] rounded-none py-2;
|
|
}
|
|
}
|
|
}
|
|
.bw-accordion-trigger {
|
|
@apply text-center text-base text-brand-violet antialiased font-semibold font-heading;
|
|
}
|
|
|
|
|
|
button {
|
|
padding: 10px 16px;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
|
|
&:hover, &[data-state="open"] {
|
|
@apply bg-brand-violet-800/25 text-white border-brand-violet-800/5; /*border-t-2*/
|
|
}
|
|
}
|
|
svg {
|
|
@apply w-6 h-6;
|
|
}
|
|
|
|
h3[data-state="open"], h3:hover {
|
|
& > button > svg {
|
|
@apply stroke-white;
|
|
}
|
|
}
|
|
|
|
.bw-accordion-content {
|
|
@apply px-4 text-[15px] leading-relaxed tracking-wide text-brand-violet-900;
|
|
|
|
p {
|
|
@apply block my-[1em] mx-0;
|
|
}
|
|
|
|
a {
|
|
@apply font-semibold text-brand-violet-600 hover:underline;
|
|
}
|
|
|
|
ul {
|
|
@apply block list-disc my-[1em] m-0 pl-10;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bw-dd-menu {
|
|
/* since nested groupes are not supported we have to use
|
|
regular css for the nested dropdowns
|
|
*/
|
|
li>ul { transform: translatex(100%) scale(0) }
|
|
li:hover>ul { transform: translatex(101%) scale(1) }
|
|
li > button svg { transform: rotate(-90deg) }
|
|
li:hover > button svg { transform: rotate(-270deg) }
|
|
|
|
/* Below styles fake what can be achieved with the tailwind config
|
|
you need to add the group-hover variant to scale and define your custom
|
|
min width style.
|
|
See https://codesandbox.io/s/tailwindcss-multilevel-dropdown-y91j7?file=/index.html
|
|
for implementation with config file
|
|
*/
|
|
.group:hover .group-hover\:scale-100 { transform: scale(1) }
|
|
.group:hover .group-hover\:-rotate-180 { transform: rotate(180deg) }
|
|
}
|
|
|
|
.bw-page {
|
|
@apply leading-relaxed tracking-tight mt-10;
|
|
|
|
h1 {
|
|
@apply font-heading my-[0.67em] mx-0 text-3xl font-bold;
|
|
}
|
|
|
|
h2 {
|
|
@apply font-heading mt-[0.83em] mb-[0.25em] mx-0 text-xl font-semibold;
|
|
}
|
|
|
|
p {
|
|
@apply block mb-[1em] mx-0;
|
|
}
|
|
|
|
/*a {
|
|
@apply font-semibold text-brand-violet-600 hover:underline;
|
|
}*/
|
|
|
|
ul {
|
|
@apply block list-disc my-[1em] m-0 pl-10;
|
|
}
|
|
|
|
article {
|
|
@apply leading-relaxed;
|
|
}
|
|
/*display: block;
|
|
font-size: 2em;
|
|
margin-top: 0.67em;
|
|
margin-bottom: 0.67em;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
font-weight: bold;*/
|
|
}
|
|
|
|
.jodit-wysiwyg > * {
|
|
all: revert;
|
|
color: #262626 !important;
|
|
}
|
|
|
|
.jodit-wysiwyg {
|
|
padding: 0 16px !important;
|
|
/*font-family: Consolas, Monaco, sans-serif;*/
|
|
|
|
/*p {
|
|
font-size: 17px !important;
|
|
}*/
|
|
}
|
|
|
|
|
|
#admin-bw-panel form {
|
|
input {
|
|
@apply bg-white outline-0 text-[16px] leading-none;
|
|
}
|
|
|
|
[role="tablist"] {
|
|
@apply bg-brand-violet ;
|
|
|
|
[data-state=active] {
|
|
@apply bg-brand-yellow text-brand-violet;
|
|
}
|
|
[data-state=inactive] {
|
|
@apply text-brand-yellow bg-brand-violet;
|
|
}
|
|
|
|
/*@apply bg-brand-yellow-100;*/
|
|
|
|
/*[id$='trigger-uk' i][data-state=active] {
|
|
@apply bg-brand-yellow-100;
|
|
}
|
|
[id$='trigger-ru' i][data-state=active] {
|
|
@apply bg-brand-violet-100;
|
|
}*/
|
|
}
|
|
|
|
label{
|
|
@apply uppercase text-brand-violet-950 flex items-center justify-between leading-none ml-1 mt-4;
|
|
|
|
}
|
|
|
|
#form-tab-uk label {
|
|
&:after {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 0;
|
|
border-top: solid #0066cc 6px;
|
|
border-bottom: solid #ffcc00 6px;
|
|
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bw-product__text * {
|
|
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
|
|
font-weight: 400 !important;
|
|
font-size: 1rem !important;
|
|
line-height: 1.45 !important;
|
|
color: rgb(40, 26, 76) !important;
|
|
background: transparent !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
.bw-product__text {
|
|
h2 * {
|
|
font-weight: 700 !important;
|
|
font-size: 1.375rem !important;
|
|
}
|
|
}
|
|
|
|
.bw-cart-item-counter {
|
|
input {
|
|
@apply text-xl leading-none border-0 text-brand-violet font-bold;
|
|
}
|
|
}
|
|
|
|
.bw-cart-btn.lucide {
|
|
@apply text-brand-violet;
|
|
width: 32px;
|
|
height: 32px;
|
|
&:hover {
|
|
@apply drop-shadow-lg shadow-brand-violet-400;
|
|
}
|
|
}
|
|
|
|
.bw-card-footer {
|
|
background: #f2f5fa !important;
|
|
}
|
|
|
|
.bw-cart-wrapper {
|
|
.col{
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
https://www.w3schools.com/cssref/css_default_values.php*/
|
|
|
|
.bw-yt-video {
|
|
@apply aspect-video w-full self-stretch md:min-h-96;
|
|
}
|