Files
torebki-fabiola.pl/wp-content/plugins/email-subscribers/lite/admin/css/styles1.css
2026-03-05 13:07:40 +01:00

676 lines
19 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--brand-color: #5e19cf; /*brand color*/
--brand-color-2 : #7230DF; /*brand color 2*/
--secondary: #f9f6ff; /*CTA bg light gray*/
--light-gray: #f8f8f8; /*BG light gray*/
--lighter-gray: #ececec; /*border light gray*/
--tab-bg: #f7f6f8; /*tab bg*/
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./fonts/inter/Inter-Regular.woff2") format("woff2"),
url("./fonts/inter/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./fonts/inter/Inter-SemiBold.woff2") format("woff2"),
url("./fonts/inter/Inter-SemiBold.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("./fonts/inter/Inter-Bold.woff2") format("woff2"),
url("./fonts/inter/Inter-Bold.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("./fonts/inter/Inter-Medium.woff2") format("woff2"),
url("./fonts/inter/Inter-Medium.woff") format("woff");
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
label,
button,
li,
span,
table td
{
font-family: "Inter", sans-serif;
}
@layer components {
h1 {
@apply font-semibold text-lg;
}
h2 {
@apply font-semibold text-sm;
}
p {
@apply text-sm;
}
header {
@apply bg-white;
}
nav {
@apply mx-auto flex max-w-full items-center justify-between gap-x-6 px-5 border-b-2 border-lighter-gray;
.brand-logo {
@apply flex lg:flex-1;
.divide {
@apply w-5 h-px rotate-90 border border-lighter-gray;
}
span {
@apply -m-1.5 p-1.5 flex items-center gap-2.5;
img {
@apply h-8 w-auto;
}
}
}
.links, .ig-es-nav-tabs {
@apply flex gap-x-5 md:gap-x-8 xl:gap-x-12;
a {
@apply text-sm leading-6 text-gray-900 py-5;
}
}
.links{
a.active {
@apply border-b-2 font-semibold py-5 border-primary;
}
}
.ig-es-nav-tabs{
@apply gap-x-8;
a{
@apply px-2;
}
a.active {
@apply bg-gray-100;
}
}
.cta {
@apply flex flex-1 items-center justify-end gap-x-2.5;
}
}
button,
.tab {
@apply rounded-md px-4 py-2 text-sm font-semibold focus:ring-[0.5px] focus:ring-tertiary;
&.primary {
@apply bg-primary text-white hover:bg-tertiary;
}
&.secondary {
@apply bg-secondary text-gray-900 hover:ring-[0.5px] hover:ring-tertiary;
}
&.cross {
@apply rounded-md bg-secondary px-0.5 text-gray-900 focus:ring-[0.5px] focus:ring-tertiary hover:ring-[0.5px] hover:ring-tertiary;
}
&.outline{
@apply bg-transparent text-white outline-none ring-[0.5px] ring-white focus:ring-[0.5px] focus:ring-tertiary hover:ring-[0.5px] hover:ring-tertiary;
}
&.white{
@apply bg-white hover:ring-[0.5px] hover:ring-tertiary;
}
}
select {
@apply py-1.5 px-3 text-sm bg-white border border-lighter-gray rounded-sm appearance-none truncate hover:border-light-gray focus:outline-none cursor-pointer focus:ring-[0.5px] focus:ring-tertiary hover:ring-[0.5px] hover:ring-tertiary !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
background-position: right 0.5rem center !important;
background-repeat: no-repeat !important;
background-size: 1.5rem 1.5rem !important;
/* option{
@apply bg-white !important;
} */
}
input[type="time"]{
@apply cursor-pointer;
}
/* main {
@apply space-y-5;
} */
#dropdown {
@apply z-10 w-40 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700;
ul {
@apply py-2 text-sm text-gray-700 dark:text-gray-200;
li {
a {
@apply block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white;
}
}
}
}
.tabs {
@apply flex justify-between p-4 items-start;
ul {
@apply flex flex-row flex-wrap justify-start gap-3 items-start w-full;
}
.tab {
@apply font-normal text-xs border border-lighter-gray truncate;
background-color: var(--tab-bg);
&.active, &:hover {
@apply bg-white font-medium ring-[0.5px] ring-tertiary;
}
}
}
.templates {
@apply flex flex-row gap-5 px-5 pb-5 justify-start w-full flex-wrap;
.create-new{
@apply flex flex-col text-center items-center w-60 max-w-xs justify-center rounded-md outline-2 outline-dashed outline-lighter-gray p-5 space-y-8;
background-color: var(--tab-bg);
}
.ig-es-card {
@apply rounded-md w-60 max-w-xs border border-lighter-gray overflow-hidden;
height: 350px;
background-color: var(--tab-bg);
.card-head {
background-image: url('data:image/svg+xml,<svg width="240" height="131" viewBox="0 0 240 131" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.8" d="M73.3763 45.7677C168.735 42.6747 170.508 75.1248 176.424 93.7568C188.998 119.214 208.95 131.193 269.498 130.966L267.014 -5.53127L0.653799 -4.53028C-2.58553 22.7607 17.2441 46.8768 73.3763 45.7677Z" fill="%23EBE5F7"/></svg>');
@apply mx-auto py-1.5 w-full bg-no-repeat bg-right-top bg-contain opacity-80 relative h-2/3;
.group{
@apply w-full h-full;
}
img {
@apply mx-auto my-2 relative object-contain;
width:99%;
height:90%;
}
svg{
}
}
.card-desc{
@apply py-5 px-3 space-y-4 bg-white h-1/3;
.title{
@apply flex flex-row justify-between items-center;
}
ul.meta-tags{
@apply flex flex-row gap-2.5 justify-start items-center;
li{
@apply px-2 py-1 rounded-sm font-normal text-xs truncate;
}
}
.saved{
button{
@apply focus:ring-0 px-0;
}
}
}
}
}
.dropdown {
@apply relative inline-block text-left w-full;
button.dropdown-button {
@apply inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
}
.dropdown-menu {
@apply left-0 z-30 mt-2 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-transform transform duration-100;
p.heading {
@apply truncate text-sm px-4 py-2 bg-gray-100 text-gray-900;
}
a {
@apply text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 active:bg-gray-100 active:text-gray-900;
}
}
}
.template-editor {
@apply w-2/3 flex flex-col gap-5 border-r-2 border-lighter-gray overflow-y-auto;
&.dnd-editor {
@apply p-5 w-2/3;
}
.tags-list-hidden {
display: none !important;
}
.all-tags {
@apply flex justify-between items-start w-full rounded-sm p-3 bg-light-gray;
li {
@apply bg-white text-gray-600 py-2 px-3 rounded-sm;
span {
@apply font-medium text-xs;
}
}
}
.inline-editor {
@apply flex font-medium border-b border-t border-lighter-gray justify-between items-center flex-row text-sm p-5;
background-color: var(--light-gray);
.editor-cta:hover {
color: var(--brand-color);
}
}
}
.template-editor,
.sidebar,
.form-fields{
label {
@apply block text-sm font-medium leading-6 text-gray-900;
}
input:not([type="radio"]) {
@apply block w-full rounded-sm border-0 py-1.5 text-gray-900 shadow-sm ring-[0.5px] ring-inset ring-lighter-gray placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-tertiary sm:text-sm sm:leading-6;
}
input[type="radio"]:checked {
@apply bg-primary;
}
}
.sidebar {
@apply flex flex-col w-1/3 right-0 bg-light-gray;
.side-editor{
@apply w-full bg-white;
}
.switch {
@apply flex justify-between px-8 py-3 border-b-2 border-lighter-gray;
}
p {
@apply text-sm font-medium;
}
a {
@apply text-xs font-medium hover:underline hover:text-primary;
}
nav {
@apply bg-white;
.links {
@apply gap-0;
a {
@apply py-2.5;
}
a.active {
@apply py-2.5;
}
}
}
.nav-child {
@apply bg-white;
}
.ig-es-post-settings {
@apply px-8 pt-5;
background-color: var(--light-gray);
}
.ig-es-campaign-tags-list{
@apply bg-gray-50 border-b text-sm border-lighter-gray justify-between;
.campaign-tags-title{
@apply font-medium px-8 py-3 border-b border-lighter-gray cursor-pointer hover:bg-gray-100;
}
}
.all-tags {
@apply flex justify-between text-xs bg-white items-start w-full rounded-sm p-3;
ul {
@apply flex flex-wrap gap-3;
}
li {
@apply text-gray-600 py-1 px-3 rounded-sm;
background-color: var(--light-gray);
}
svg {
@apply cursor-pointer -mt-1 ml-2 w-3.5 h-3.5 inline-flex;
}
}
a {
@apply text-xs font-medium hover:underline hover:text-primary;
}
.radio-section {
@apply p-3 rounded-sm;
background-color: white;
}
input[type="radio"] {
@apply -mt-1;
}
.ig-es-grid-division {
@apply text-center px-4 py-1 hover:bg-gray-100;
}
}
.overview {
@apply flex flex-col bg-white space-y-5 p-4 mt-5 mr-5 border border-lighter-gray rounded-md;
.kpi {
@apply flex justify-between w-full px-3 py-2 items-center rounded-md bg-light-gray;
.stats {
@apply flex flex-col space-y-1.5;
}
.kpi-title {
@apply text-xs font-medium text-gray-500;
}
.kpi-stats {
@apply text-lg font-semibold;
}
.change {
@apply rounded-full flex flex-row space-x-0.5 px-1.5 py-0.5 items-center;
&.up {
@apply text-green-600 bg-green-600/20;
}
&.down {
@apply text-red-600 bg-red-600/20;
}
span.value {
@apply font-semibold text-xs;
}
}
}
}
.dot {
@apply w-1.5 h-1.5 rounded-full mr-1;
}
.search-icon {
@apply absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none;
}
.search {
@apply block w-full px-4 py-1.5 pl-10 text-sm text-gray-900 border border-gray-300 rounded-sm bg-white focus:ring-[0.5px] focus:ring-tertiary !important;
}
.ig-es-list-table {
@apply flex flex-col bg-white space-y-5 p-4 mt-5;
.table {
@apply -mx-4 ring-1 ring-lighter-gray sm:mx-0 sm:rounded-sm w-full;
table {
@apply min-w-full divide-y divide-lighter-gray w-full;
}
input.checkbox {
@apply absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 focus:ring-transparent text-primary;
}
thead {
@apply text-xs font-medium text-gray-600;
th:first-of-type {
@apply relative px-7 sm:w-12 sm:px-6;
}
th:nth-child(2) {
@apply py-2 pl-4 pr-3 text-left sm:pl-6;
}
th {
@apply px-3 py-2 text-left lg:table-cell;
}
th:nth-child(6) {
@apply px-3 py-2 text-center lg:table-cell;
}
th:last-of-type {
@apply relative py-2 pl-3 pr-4 sm:pr-6 text-right;
}
}
tbody {
@apply divide-y divide-lighter-gray;
td:first-of-type {
@apply relative px-7 sm:w-12 sm:px-6;
}
td:nth-child(2) {
@apply relative py-4 pl-4 pr-3 text-sm sm:pl-6;
}
td {
@apply px-3 py-3.5 text-sm text-gray-800 lg:table-cell text-[15px];
}
td:nth-child(6) {
@apply px-3 py-3.5 text-sm text-center text-gray-500;
}
td:last-of-type {
@apply relative py-3.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6;
}
.list-item {
@apply flex flex-row space-x-2.5 items-center;
.avatar {
@apply bg-lighter-gray rounded-md p-4;
img {
@apply h-full w-full max-w-full overflow-hidden max-h-full object-contain;
}
}
.item-details {
@apply flex flex-col gap-1.5;
p {
@apply font-semibold text-[15px];
}
.item-meta {
@apply flex flex-col text-gray-400 text-[13px];
}
}
}
.status {
@apply flex flex-col gap-1.5 text-center mx-auto justify-center items-center;
p {
@apply font-semibold inline-flex items-center text-[15px];
}
.sub-text {
@apply text-gray-400 text-[13px];
}
}
}
}
}
.ig-es-popup-container{
@apply fixed inset-x-0 bottom-0 sm:inset-0 sm:flex sm:items-center sm:justify-center fixed inset-0 transition-opacity;
z-index: 999999;
}
.ig-es-popup-overlay{
@apply absolute inset-0 bg-gray-500 opacity-75;
}
.ig-es-popup{
@apply font-medium relative overflow-hidden rounded bg-white text-left shadow-xl sm:my-8 sm:max-w-3xl;
.ig-es-popup-title{
@apply px-6 py-3;
}
.ig-es-popup-close-container{
@apply absolute right-3 top-3;
.cross{
@apply px-0.5 py-1 !important;
}
}
.ig-es-popup-close-cta{
@apply rounded text-gray-700 hover:text-gray-900 focus:outline-none bg-gray-100 p-0;
}
.ig-es-popup-cta-container{
@apply p-3 float-right;
}
.ig-es-new-campaign-type-tab{
@apply cursor-pointer p-6 text-center rounded bg-white hover:scale-105 hover:shadow-md;
}
.ig-es-campaign-type-title{
@apply pt-4 text-sm font-medium;
}
h3.modal-headline{
@apply text-base font-semibold leading-6 text-gray-900;
}
}
}
#timePickerDropdown {
top: 100%;
}
/* Custom Dropdown Arrow */
#timePicker::after {
content: "▼";
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
}
/* Responsive Breakpoints (optional) */
@media (max-width: 640px) {
#timePickerDropdown {
width: 100%;
left: 0;
}
}
.select2-container {
@apply text-sm !important;
width: 100% !important;
}
.select2-container--default .select2-selection--multiple {
@apply text-black !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: rgb(156 163 175 /1)' viewBox='0 0 20 20' fill='currentColor' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
background-size: 1.25rem;
background-position: calc(100% - 0.45rem);
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
background-repeat: no-repeat;
border: 1px solid var(--lighter-gray) !important;
border-radius: 0.125rem !important;
padding-left: 0.35rem !important;
padding-right: 0.75rem !important;
}
.select2-results__option {
@apply pr-5 align-middle;
}
.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable {
@apply text-gray-600 bg-white !important;
}
.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable:hover {
@apply text-gray-600 !important;
background-color: var(--light-gray);
}
.select2-container--default .select2-results__option--selected {
@apply bg-white !important;
}
.select2-results__option:before {
@apply inline-block relative bg-white h-5 w-5 ml-1 mr-3 rounded align-middle border-2 border-solid;
content: "";
}
.select2-results__option[aria-selected="true"]:before,
.select2-container--default .select2-results__option--selected:before {
@apply text-white border-0 inline-block pr-0.5;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
background-color: var(--brand-color);
}
.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
@apply pl-1 border-0 text-sm !important;
background-color: var(--light-gray) !important;
}
.select2-selection__choice__remove {
@apply float-right border-0 relative !important;
}
.icegram-express_page_es_gallery, .icegram-express_page_es_campaigns{
#wpcontent{
padding-left: 0;
background-color: white;
}
}
.wp-core-ui select {
background-image: url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e') !important;
background-position: right 0.5rem center !important;
background-repeat: no-repeat !important;
background-size: 1.5rem 1.5rem !important;
}
.icegram-express_page_es_campaigns [data-placeholder]::after {
content: " ";
box-shadow: 0 0 50px 9px rgba(254,254,254);
position: absolute;
top: 0;
left: -100%;
height: 100%;
animation: load 1s infinite;
}
@keyframes load {
0%{ left: -100%}
100%{ left: 150%}
}
/* Editor CSS by Kaushal START */
.gjs-block:hover{
box-shadow: 0 1px 8px -1px var(--brand-color-2) , 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.gjs-block-categories{
nav{
@apply mx-0;
.links{
@apply w-full;
a{
@apply w-full text-center;
}
}
}
.gjs-blocks-c.active{
@apply grid grid-cols-3 gap-4 p-5 bg-light-gray;
.gjs-block{
@apply w-full m-0 items-center space-y-3.5;
.gjs-block-media{
svg{
@apply w-6 h-6;
}
}
.gjs-block-label{
@apply text-[13px] font-medium font-inter;
}
}
}
}
.prev-sector-cta{
@apply bg-white -mx-4 px-4 py-1.5 flex justify-start gap-2 items-start;
a{
@apply p-1 rounded-md bg-secondary;
}
span{
@apply text-sm font-medium font-inter;
}
}
.ig-es-color-picker{
@apply flex w-auto items-center;
input{
@apply w-auto;
}
.ig-es-color-picker-input{
input{
@apply pr-1.5 py-0 h-8 w-8 !important;
}
}
}
.es-sidebar{
.gjs-field-composite{
@apply bg-light-gray !important;
}
.gjs-sm-sector{
@apply bg-light-gray;
}
.gjs-field input:not([type="radio"]), .gjs-field select, .gjs-field textarea, {
@apply block w-full rounded-sm bg-white border-0 py-1 text-gray-900 shadow-sm ring-[0.5px] ring-inset ring-lighter-gray placeholder:text-gray-400 focus:ring-[0.5px] focus:ring-inset focus:ring-tertiary sm:text-[13px] font-inter font-normal sm:leading-6;
}
.gjs-sm-properties{
@apply bg-light-gray px-0 border-b-2 border-lighter-gray;
}
.gjs-sm-title{
@apply text-sm font-semibold my-2;
}
.gjs-sm-label{
@apply mt-0.5 text-[13px] font-inter font-medium w-full justify-between items-start !important;
}
.gjs-label{
@apply text-xs font-medium font-inter;
}
.gjs-fields, .gjs-field{
@apply w-full;
}
}
/* Editor CSS by Kaushal END */