/* no-prefix */
*,
::before,
::after {
--tw-shadow: 0 0 #0000;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-opacity: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
}
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
box-sizing: border-box;
border: 0px solid transparent;
}
button:not(:disabled) {
@apply cursor-pointer!;
}
}
@theme {
--breakpoint-xxs: 280px;
--breakpoint-xs: 480px;
--breakpoint-sm: 600px;
--breakpoint-md: 783px; /* Admin Bar goes big */
--breakpoint-lg: 961px; /* Sidebar auto folds */
--breakpoint-xl: 1152px;
--breakpoint-2xl: 1345px;
--breakpoint-3xl: 1600px;
--breakpoint-5xl: 2300px;
--color-gray-50: #fafafa;
--color-gray-100: #f0f0f0;
--color-gray-150: #eaeaea; /* This wasn't a variable but I saw it on buttons */
--color-gray-200: #e0e0e0; /* Used sparingly for light borders. */
--color-gray-300: #dddddd; /* Used for most borders. */
--color-gray-400: #cccccc;
--color-gray-500: #bbbbbb;
--color-gray-600: #949494; /* Meets 3:1 UI or large text contrast against white. */
--color-gray-700: #757575; /* Meets 4.6:1 text contrast against white. */
--color-gray-800: #2f2f2f;
--color-gray-900: #1e1e1e;
--color-override: var(--ext-override, #2271b1);
--color-wp-theme-bg: var(--wp-admin-theme-bg, #373b3f);
--color-wp-theme-main: var(--wp-admin-theme-main, #2271b1);
--color-wp-theme-accent: var(--wp-admin-theme-accent, #76ed85);
--color-editor-main: var(--wp-admin-theme-color, #3858e9);
--color-editor-main-darker: var(--wp-admin-theme-color-darker-10, #2145e6);
--color-editor-accent-darker: var(--wp-components-color-accent-darker-10);
--color-design-main: var(--ext-design-main, #2271b1);
--color-design-text: var(--ext-design-text, #ffffff);
--color-design-tertiary: var(--wp--preset--color--tertiary);
--color-banner-main: var(--ext-banner-main, #2271b1);
--color-banner-text: var(--ext-banner-text, #ffffff);
--color-extendify-main: #0b4a43;
--color-extendify-main-dark: #05312c;
--color-extendify-alert: #841010;
--color-extendify-gray: #5f5f5f;
--color-extendify-secondary: #cbc3f5;
--color-extendify-black: #1e1e1e;
--color-extendify-transparent-white: rgba(253, 253, 253, 0.88);
--color-extendify-transparent-black-100: rgba(0, 0, 0, 0.07);
--color-wp-alert-yellow: #f0b849;
--color-wp-alert-red: #cc1818;
--color-wp-alert-green: #4ab866;
}
/* sizing */
@utility max-w-52 {
max-width: 13rem;
}
@utility max-w-72 {
max-width: 18rem;
}
@utility min-w-20 {
min-width: 5rem;
}
@utility min-w-30 {
min-width: 7.5rem;
}
@utility min-w-40 {
min-width: 10rem;
}
@utility min-w-48 {
min-width: 12rem;
}
@utility min-w-60 {
min-width: 15rem;
}
@utility min-w-sm {
min-width: 7rem;
}
@utility min-w-md {
min-width: 30rem;
}
@utility w-40vw {
width: 40vw;
}
@utility min-h-16 {
min-height: 4rem;
}
@utility min-h-20 {
min-height: 5rem;
}
@utility min-h-40 {
min-height: 10rem;
}
@utility min-h-48 {
min-height: 12rem;
}
@utility min-h-60 {
min-height: 15rem;
}
@utility min-h-half {
min-height: 50vh;
}
@utility max-h-half {
max-height: 50vh;
}
/* typography */
@utility text-xss {
font-size: 11px;
}
@utility text-3xl {
font-size: 2rem;
line-height: 2.5rem;
}
@utility leading-extra-tight {
line-height: 0.5;
}
/* z-index */
@utility z-high-1 {
z-index: 99998;
}
@utility z-high {
z-index: 99999;
}
@utility z-higher {
z-index: 999999;
}
@utility z-max-1 {
z-index: 2147483646;
}
@utility z-max {
z-index: 2147483647;
}
@utility ring-wp {
--tw-ring-width: var(--wp-admin-border-width-focus, 2px);
}
/* shadows */
@utility shadow-inner-sm {
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.1),
0 3px 15px -3px rgba(0, 0, 0, 0.035),
0 0 1px rgba(0, 0, 0, 0.025);
}
@utility shadow-inner-md {
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.2),
0 3px 15px -3px rgba(0, 0, 0, 0.025),
0 0 1px rgba(0, 0, 0, 0.02);
}
@utility shadow-modal {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.1),
0 3px 15px -3px rgba(0, 0, 0, 0.035),
0 0 1px rgba(0, 0, 0, 0.05);
}
@utility shadow-button {
box-shadow: 0 0 0 1px var(--ext-design-main, #3959e9);
}
@utility shadow-toggle {
box-shadow:
0 0 0 2px #fff,
0 0 0 4px var(--ext-design-main, #3959e9);
}
@utility shadow-surface {
box-shadow: 0 5px 20px 10px rgba(0, 0, 0, 0.03);
}
@utility shadow-lg-flipped {
box-shadow: 0px -10px 30px -15px #00000025;
}
@utility shadow-2xl-flipped {
box-shadow: 0px -25px 50px -12px #00000025;
}
@utility shadow-vibe {
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}