soundslikeinfo_obsidian-cli.../styles.css
2025-02-03 18:26:34 -07:00

886 lines
15 KiB
CSS

.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-mx-auto {
margin-left: auto;
margin-right: auto;
}
.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-min-h-\[120px\] {
min-height: 120px;
}
.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-\[10\%\] {
width: 10%;
}
.cc-w-\[15\%\] {
width: 15%;
}
.cc-w-\[20\%\] {
width: 20%;
}
.cc-w-\[22\%\] {
width: 22%;
}
.cc-w-\[3\%\] {
width: 3%;
}
.cc-w-\[30\%\] {
width: 30%;
}
.cc-w-full {
width: 100%;
}
.cc-max-w-\[400px\] {
max-width: 400px;
}
.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-help {
cursor: help;
}
.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-2 {
padding: 0.5rem;
}
.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-bold {
font-weight: 700;
}
.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);
}
}
/* Text utilities */
.text-sm {
font-size: .75rem;
}
.clipper-catalog-plugin {
/* Add minimal reset only for our plugin elements */
& * {
box-sizing: border-box;
}
/* 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;
}
}
}
/* Container styles */
.clipper-catalog-advanced {
background-color: var(--background-secondary);
border: 1px solid var(--background-modifier-border);
}
.clipper-catalog-search {
background-color: var(--background-secondary);
border: 1px solid var(--background-modifier-border);
}
/* Button styles */
.clipper-catalog-button {
background-color: var(--interactive-accent) !important;
color: var(--text-on-accent) !important;
transition: opacity 0.2s ease;
}
.clipper-catalog-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.clipper-catalog-button:hover:not(:disabled) {
opacity: 0.9;
}
/* Directory chip styles */
.cc-bg-chip {
background-color: var(--background-modifier-form-field);
}
.cc-bg-chip-hover {
background-color: var(--background-secondary-alt);
}
.cc-text-close-icon {
color: var(--background-secondary);
}
/* For dark theme support */
.theme-dark .cc-text-close-icon {
color: var(--background-primary);
}
/* Table styles */
.clipper-catalog-header-row {
border-bottom: 1px solid var(--background-modifier-border);
}
.clipper-catalog-header-cell {
color: var(--text-normal);
&:hover {
background-color: var(--background-modifier-hover);
}
}
.clipper-catalog-row {
border-bottom: 1px solid var(--background-modifier-border);
&:hover {
background-color: var(--background-modifier-hover);
}
}
/* Text and icon styles */
.clipper-catalog-input {
color: var(--text-normal);
}
.clipper-catalog-icon,
.clipper-catalog-clear-btn,
.clipper-catalog-refresh,
.clipper-catalog-muted {
color: var(--text-muted);
}
.clipper-catalog-title {
color: var(--text-normal);
.cc-font-bold {
font-weight: 600;
}
}
/* Checkbox styles */
.clipper-catalog-checkbox {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
background-color: var(--background-primary);
border: 1px solid var(--checkbox-border-color, var(--text-muted));
border-radius: 4px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
margin: 0;
padding: 0;
}
.clipper-catalog-checkbox:checked {
background-color: var(--interactive-accent);
border-color: var(--interactive-accent);
}
.clipper-catalog-checkbox:checked::before {
content: "";
width: 10px;
height: 10px;
background-color: var(--text-on-accent, white);
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
/* Compatibility for themes */
/* Dark Theme */
.theme-dark{
input.clipper-catalog-checkbox[type=checkbox]:checked:after{
background-color: transparent;
}
}
/* Compatible checkbox enhancements */
.clipper-catalog-compatible-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
border: 1px solid var(--checkbox-border-color);
border-radius: 3px;
background-color: var(--background-primary);
vertical-align: middle;
padding: 0;
margin: 0;
}
.clipper-catalog-compatible-checkbox:checked {
background-color: var(--interactive-accent);
border-color: var(--interactive-accent);
}
input.clipper-catalog-compatible-checkbox[type=checkbox]:checked {
/* --checkbox-color: var(--checkbox-color); */
background-color: var(--interactive-accent);
}
/* Tag styles */
.clipper-catalog-tag,
.clipper-catalog-frontmatter-tag {
display: inline-flex;
align-items: center;
padding: 4px 8px;
margin: 2px;
border-radius: 9999px;
font-size: 0.75rem;
line-height: 1;
transition: opacity 0.2s ease;
}
.clipper-catalog-tag {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
}
.clipper-catalog-frontmatter-tag {
background-color: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
color: var(--text-normal);
border: 1px solid var(--interactive-accent);
}
/* Tags container */
.cc-flex.cc-gap-1.cc-flex-wrap.cc-items-center {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px 0;
}
/* Remove the negative margin we added earlier */
.clipper-catalog-plugin .cc-flex.cc-gap-1.cc-flex-wrap {
margin: 0;
& > * {
margin: 0;
}
}
/* Tooltip styles */
[data-tooltip] {
position: relative;
&:hover::before {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 6px 8px;
background-color: var(--background-secondary-alt);
color: var(--text-muted);
font-size: 11px;
white-space: nowrap;
border-radius: 3px;
margin-bottom: 6px;
z-index: 1000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
opacity: 0.9;
}
}
/* Ensure tooltip appears above other content */
.cc-z-50 {
z-index: 50;
}
.clipper-catalog-help-icon {
position: relative;
color: var(--text-accent);
cursor: help;
opacity: 0.8;
top: 0;
transition: opacity 0.2s ease;
&:hover {
opacity: 1;
}
}
/* Link styles */
.clipper-catalog-link {
color: var(--text-accent);
font-size: 0.75rem;
padding: 0.25rem 0;
transition: opacity 0.2s ease;
&:hover {
opacity: 0.8;
text-decoration: underline;
}
}
/* Header help icon tooltip positioning */
.clipper-catalog-header-cell{
[data-tooltip] {
padding-left: 5px;
position: relative;
display: inline-flex;
}
[data-tooltip]:hover::before {
left: 50%;
transform: translateX(-50%);
bottom: -5.3rem;
white-space: normal;
width: 200px;
max-width: 300px;
text-align: center;
line-height: 1.4;
font-size: 12px;
padding: 8px 12px;
background-color: var(--background-primary);
border: 1px solid var(--background-modifier-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 1001;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
}
.cc-narrow-view {
max-width: 100%;
overflow-x: auto;
.cc-narrow-view-hidden{
display: none;
}
.clipper-catalog-header-cell [data-tooltip]:hover::before {
transform: translateX(-50%);
width: 150px;
max-width: 150px;
font-size: 10px;
}
}
.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-80:hover {
opacity: 0.8;
}
.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));
}