559 lines
8.6 KiB
CSS
559 lines
8.6 KiB
CSS
/* Remove @tailwind base to prevent global style reset */
|
|
|
|
.cc-absolute {
|
|
position: absolute;
|
|
}
|
|
|
|
.cc-relative {
|
|
position: relative;
|
|
}
|
|
|
|
.cc-right-2 {
|
|
right: 0.5rem;
|
|
}
|
|
|
|
.cc-top-\[20\%\] {
|
|
top: 20%;
|
|
}
|
|
|
|
.cc-top-full {
|
|
top: 100%;
|
|
}
|
|
|
|
.cc-ml-2 {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.cc-mt-1 {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.cc-mt-2 {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.cc-mt-4 {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.cc-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.cc-inline-flex {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.cc-h-2\.5 {
|
|
height: 0.625rem;
|
|
}
|
|
|
|
.cc-h-3 {
|
|
height: 0.75rem;
|
|
}
|
|
|
|
.cc-h-3\.5 {
|
|
height: 0.875rem;
|
|
}
|
|
|
|
.cc-h-4 {
|
|
height: 1rem;
|
|
}
|
|
|
|
.cc-min-h-\[1\.5rem\] {
|
|
min-height: 1.5rem;
|
|
}
|
|
|
|
.cc-w-2\.5 {
|
|
width: 0.625rem;
|
|
}
|
|
|
|
.cc-w-3 {
|
|
width: 0.75rem;
|
|
}
|
|
|
|
.cc-w-3\.5 {
|
|
width: 0.875rem;
|
|
}
|
|
|
|
.cc-w-4 {
|
|
width: 1rem;
|
|
}
|
|
|
|
.cc-w-\[13\%\] {
|
|
width: 13%;
|
|
}
|
|
|
|
.cc-w-\[15\%\] {
|
|
width: 15%;
|
|
}
|
|
|
|
.cc-w-\[20\%\] {
|
|
width: 20%;
|
|
}
|
|
|
|
.cc-w-\[22\%\] {
|
|
width: 22%;
|
|
}
|
|
|
|
.cc-w-\[30\%\] {
|
|
width: 30%;
|
|
}
|
|
|
|
.cc-w-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.cc-flex-1 {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
.cc-flex-shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@keyframes cc-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.cc-animate-spin {
|
|
animation: cc-spin 1s linear infinite;
|
|
}
|
|
|
|
.cc-cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cc-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cc-flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.cc-items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.cc-justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.cc-justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.cc-justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cc-gap-0\.5 {
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.cc-gap-1 {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.cc-gap-1\.5 {
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.cc-gap-2 {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.cc-gap-3 {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.cc-gap-4 {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.cc-overflow-x-auto {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.cc-whitespace-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cc-rounded {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.cc-rounded-full {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.cc-rounded-lg {
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.cc-border-gray-200 {
|
|
--tw-border-opacity: 1;
|
|
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
|
}
|
|
|
|
.cc-bg-blue-100 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
|
|
}
|
|
|
|
.cc-bg-gray-100 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
|
}
|
|
|
|
.cc-bg-transparent {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.cc-p-4 {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.cc-px-2 {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.cc-px-3 {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
}
|
|
|
|
.cc-px-4 {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.cc-py-1 {
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
.cc-py-1\.5 {
|
|
padding-top: 0.375rem;
|
|
padding-bottom: 0.375rem;
|
|
}
|
|
|
|
.cc-py-2 {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.cc-py-4 {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.cc-pr-16 {
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.cc-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.cc-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.cc-text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.cc-text-\[10px\] {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.cc-text-sm {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
.cc-text-xs {
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.cc-font-medium {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cc-text-blue-600 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.cc-text-blue-700 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(29 78 216 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.cc-text-gray-600 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.cc-text-gray-800 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.cc-text-gray-900 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.cc-text-red-400 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.cc-underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.cc-opacity-0 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.cc-opacity-100 {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cc-opacity-50 {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.cc-opacity-60 {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.cc-outline-none {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.cc-transition-all {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
.cc-transition-colors {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
.cc-transition-opacity {
|
|
transition-property: opacity;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
.cc-duration-200 {
|
|
transition-duration: 200ms;
|
|
}
|
|
|
|
.cc-duration-300 {
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
.cc-ease-in-out {
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Define keyframes for spin animation */
|
|
|
|
@keyframes spinner-rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Scoped plugin styles */
|
|
|
|
.clipper-catalog-plugin {
|
|
/* Add minimal reset only for our plugin elements */
|
|
& * {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
/* Loading spinner styles */
|
|
.loading-spinner-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
.loading-spinner {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
animation: spinner-rotate 1s linear infinite;
|
|
}
|
|
/* Error states */
|
|
.error-text {
|
|
font-size: 0.75rem;
|
|
color: #ef4444;
|
|
}
|
|
.input-error {
|
|
border-color: #ef4444;
|
|
}
|
|
/* Settings styles */
|
|
&.clipper-catalog-settings {
|
|
.setting-item {
|
|
border-top: none;
|
|
padding: 18px 0;
|
|
}
|
|
.setting-item-name {
|
|
color: var(--text-normal);
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
}
|
|
.setting-item-description {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
line-height: 1.5;
|
|
max-width: 500px;
|
|
margin-right: 2em;
|
|
}
|
|
textarea,
|
|
input[type="text"],
|
|
input[type="password"],
|
|
select {
|
|
background-color: var(--background-modifier-form-field);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
padding: 6px 12px;
|
|
color: var(--text-normal);
|
|
transition: all 200ms ease-in-out;
|
|
}
|
|
textarea:focus,
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
select:focus {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
|
|
}
|
|
textarea {
|
|
min-height: 100px;
|
|
width: 100%;
|
|
resize: vertical;
|
|
}
|
|
input[type="text"],
|
|
input[type="password"] {
|
|
height: 32px;
|
|
width: 100%;
|
|
max-width: 150px;
|
|
}
|
|
select {
|
|
height: 32px;
|
|
width: 100%;
|
|
max-width: 325px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hover\:cc-bg-blue-200:hover {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
|
|
}
|
|
|
|
.hover\:cc-bg-gray-100:hover {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
|
}
|
|
|
|
.hover\:cc-text-gray-600:hover {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.hover\:cc-text-gray-800:hover {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.hover\:cc-underline:hover {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.hover\:cc-opacity-90:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dark\:cc-border-gray-700:is(.cc-dark *) {
|
|
--tw-border-opacity: 1;
|
|
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
|
}
|
|
|
|
.dark\:cc-bg-blue-900\/50:is(.cc-dark *) {
|
|
background-color: rgb(30 58 138 / 0.5);
|
|
}
|
|
|
|
.dark\:cc-bg-gray-800\/50:is(.cc-dark *) {
|
|
background-color: rgb(31 41 55 / 0.5);
|
|
}
|
|
|
|
.dark\:cc-text-blue-200:is(.cc-dark *) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(191 219 254 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.dark\:cc-text-blue-400:is(.cc-dark *) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.dark\:cc-text-gray-300:is(.cc-dark *) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.dark\:cc-text-gray-400:is(.cc-dark *) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.dark\:cc-text-gray-500:is(.cc-dark *) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.dark\:cc-text-white:is(.cc-dark *) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.dark\:hover\:cc-bg-blue-800\/50:hover:is(.cc-dark *) {
|
|
background-color: rgb(30 64 175 / 0.5);
|
|
}
|
|
|
|
.dark\:hover\:cc-bg-gray-800\/50:hover:is(.cc-dark *) {
|
|
background-color: rgb(31 41 55 / 0.5);
|
|
}
|
|
|
|
.dark\:hover\:cc-text-blue-300:hover:is(.cc-dark *) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(147 197 253 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
.dark\:hover\:cc-text-gray-300:hover:is(.cc-dark *) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
|
|
}
|