mirror of
https://github.com/bfloydd/coalesce.git
synced 2026-07-22 12:50:30 +00:00
956 lines
No EOL
22 KiB
CSS
956 lines
No EOL
22 KiB
CSS
/* ============================
|
|
Coalesce CSS Variables
|
|
============================ */
|
|
|
|
.coalesce-custom-backlinks-container {
|
|
/* Common spacing values */
|
|
--coalesce-spacing-xs: 2px;
|
|
--coalesce-spacing-sm: 4px;
|
|
--coalesce-spacing-md: 6px;
|
|
--coalesce-spacing-lg: 8px;
|
|
--coalesce-spacing-xl: 12px;
|
|
|
|
/* Common border radius values */
|
|
--coalesce-radius-sm: 4px;
|
|
--coalesce-radius-md: 6px;
|
|
--coalesce-radius-lg: 8px;
|
|
|
|
/* Common shadows */
|
|
--coalesce-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
--coalesce-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
/* Common transitions */
|
|
--coalesce-transition-fast: 0.15s ease-out;
|
|
--coalesce-transition-normal: 0.2s ease;
|
|
--coalesce-transition-slow: 0.3s ease;
|
|
|
|
/* Icon sizing */
|
|
--coalesce-icon-size-sm: 16px;
|
|
--coalesce-icon-size-md: 21px;
|
|
--coalesce-icon-size-lg: 36px;
|
|
--coalesce-icon-size-xl: 48px;
|
|
}
|
|
|
|
/* ============================
|
|
HeaderComponent Styles
|
|
============================ */
|
|
|
|
/* Header container and layout */
|
|
|
|
.coalesce-block-header {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
/* Performance optimization */
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.coalesce-block-header:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
|
|
|
|
.coalesce-toggle-arrow {
|
|
cursor: pointer;
|
|
margin-right: 5px;
|
|
transition: transform 0.2s ease;
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.coalesce-backlinks-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin-bottom: 0;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
/* Performance optimization */
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.coalesce-backlinks-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.coalesce-backlinks-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/* Button Components - Let Obsidian handle base button styling */
|
|
|
|
/* Button state transforms - work with Obsidian's button components */
|
|
.coalesce-button-group svg:not(.is-collapsed) {
|
|
transform: none;
|
|
}
|
|
|
|
.coalesce-button-group svg.is-collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.coalesce-button-group svg.sort-ascending {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.coalesce-button-group svg.sort-descending {
|
|
transform: none;
|
|
}
|
|
|
|
/* Button group for arrow controls */
|
|
.coalesce-button-group {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
margin-left: 4px;
|
|
gap: 7px;
|
|
}
|
|
|
|
/* Override ExtraButtonComponent icon sizing to match Obsidian's small toolbar icons */
|
|
.coalesce-button-group > *,
|
|
.coalesce-button-group .extra-setting-item,
|
|
.coalesce-button-group .clickable-icon {
|
|
--icon-size: var(--coalesce-icon-size-sm) !important;
|
|
}
|
|
|
|
.coalesce-button-group > * svg,
|
|
.coalesce-button-group .extra-setting-item svg,
|
|
.coalesce-button-group .clickable-icon svg {
|
|
width: var(--coalesce-icon-size-sm) !important;
|
|
height: var(--coalesce-icon-size-sm) !important;
|
|
}
|
|
|
|
.coalesce-sort-button, .coalesce-collapse-button, .coalesce-settings-button {
|
|
background: none;
|
|
border: none;
|
|
padding: var(--coalesce-spacing-md);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
border-radius: var(--coalesce-radius-sm);
|
|
}
|
|
|
|
.coalesce-sort-button {
|
|
gap: 4px;
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: 500;
|
|
padding: var(--coalesce-spacing-sm) var(--coalesce-spacing-md);
|
|
}
|
|
|
|
.coalesce-sort-button:hover, .coalesce-collapse-button:hover, .coalesce-settings-button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Settings popup position - will be adjusted via JavaScript */
|
|
.coalesce-settings-popup {
|
|
position: fixed;
|
|
background-color: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--coalesce-radius-md);
|
|
padding: var(--coalesce-spacing-md) 0;
|
|
z-index: 1000;
|
|
box-shadow: var(--coalesce-shadow-sm);
|
|
min-width: 180px;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
color: var(--text-normal);
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.coalesce-settings-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
user-select: none;
|
|
color: var(--text-normal);
|
|
font-size: 14px;
|
|
height: 26px;
|
|
padding-left: 8px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.coalesce-settings-item:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.coalesce-setting-item-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--text-muted);
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.coalesce-settings-header .coalesce-setting-item-icon {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.coalesce-setting-item-label {
|
|
flex: 1;
|
|
margin-left: 4px;
|
|
color: var(--text-normal);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Obsidian-style section headers */
|
|
.coalesce-settings-header {
|
|
cursor: default !important;
|
|
color: var(--text-faint);
|
|
font-size: 12px;
|
|
padding: 2px 8px;
|
|
margin-top: 4px;
|
|
font-weight: 600;
|
|
height: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.coalesce-settings-header:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.coalesce-settings-header:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.coalesce-menu-separator {
|
|
height: 1px;
|
|
background-color: var(--background-modifier-border);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.coalesce-settings-popup .coalesce-menu-separator {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.coalesce-alias-dropdown {
|
|
/* margin: 0 8px; */
|
|
/* padding: 4px 8px; */
|
|
/* border-radius: 4px; */
|
|
/* border: 1px solid var(--background-modifier-border); */
|
|
/* background-color: var(--background-primary); */
|
|
/* color: var(--text-normal); */
|
|
font-size: var(--font-ui-smaller);
|
|
min-width: 120px;
|
|
max-width: 120px;
|
|
height: 24px;
|
|
flex-shrink: 1;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.is-mobile .coalesce-alias-dropdown,
|
|
.is-phone .coalesce-alias-dropdown {
|
|
min-width: 100px;
|
|
font-size: var(--font-ui-smallest);
|
|
padding: 2px 4px;
|
|
height: 20px;
|
|
}
|
|
|
|
.coalesce-alias-dropdown:hover {
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.coalesce-alias-dropdown:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.coalesce-alias-dropdown:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
/* ============================
|
|
Filter Input Component
|
|
============================ */
|
|
|
|
.coalesce-filter-input-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 8px;
|
|
min-width: 120px;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.coalesce-filter-input {
|
|
padding: 4px 8px;
|
|
padding-right: 28px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-smaller);
|
|
min-width: 120px;
|
|
height: 24px;
|
|
flex-shrink: 1;
|
|
text-overflow: ellipsis;
|
|
transition: border-color 0.15s ease-out;
|
|
will-change: border-color;
|
|
transform: translateZ(0);
|
|
position: relative;
|
|
z-index: 1;
|
|
box-sizing: border-box;
|
|
min-height: 24px;
|
|
min-width: 80px;
|
|
margin: 0;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.coalesce-filter-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.coalesce-filter-input:hover {
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.coalesce-filter-input:not([disabled]) {
|
|
pointer-events: auto;
|
|
user-select: text;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.coalesce-filter-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px var(--interactive-accent-hover);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.coalesce-filter-clear-button {
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
max-width: 16px;
|
|
max-height: 16px;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease-out, background-color 0.15s ease-out;
|
|
z-index: 10;
|
|
pointer-events: auto;
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.coalesce-filter-clear-button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.coalesce-filter-clear-button:active {
|
|
background-color: var(--background-modifier-active);
|
|
}
|
|
|
|
.coalesce-filter-input-container.has-value .coalesce-filter-clear-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.coalesce-filter-clear-button svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
stroke: currentColor;
|
|
stroke-width: 1.5;
|
|
fill: none;
|
|
display: block;
|
|
}
|
|
|
|
.coalesce-backlinks-header:focus-within .coalesce-filter-input {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.is-mobile .coalesce-filter-input-container,
|
|
.is-phone .coalesce-filter-input-container {
|
|
min-width: 100px;
|
|
}
|
|
|
|
.is-mobile .coalesce-filter-input,
|
|
.is-phone .coalesce-filter-input {
|
|
min-width: 100px;
|
|
font-size: var(--font-ui-smallest);
|
|
padding: 2px 4px;
|
|
padding-right: 24px; /* Smaller padding for mobile */
|
|
height: 20px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
/* ============================
|
|
CoalesceView Styles
|
|
============================ */
|
|
|
|
.coalesce-content-preview {
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
padding: 5px;
|
|
/* Performance optimization */
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.coalesce-content-preview p {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
padding: 0;
|
|
}
|
|
|
|
.coalesce-custom-backlinks-container {
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
margin-top: 20px;
|
|
position: relative;
|
|
z-index: 10;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Prevent Obsidian from adding dynamic styles that push Coalesce down */
|
|
.markdown-preview-section {
|
|
padding-bottom: 150px !important;
|
|
min-height: unset !important;
|
|
}
|
|
|
|
/* Override any inline styles that Obsidian might add */
|
|
.markdown-preview-sizer {
|
|
min-height: unset !important;
|
|
padding-bottom: unset !important;
|
|
}
|
|
|
|
.is-readable-line-width .coalesce-custom-backlinks-container,
|
|
.is-readable-line-width .markdown-content,
|
|
.is-readable-line-width .coalesce-backlinks-header {
|
|
max-width: var(--file-line-width);
|
|
width: 100%;
|
|
}
|
|
|
|
.markdown-content {
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
/* ============================
|
|
BlockComponent Styles
|
|
============================ */
|
|
|
|
.coalesce-block-title {
|
|
display: block;
|
|
margin-bottom: 0px;
|
|
text-decoration: none;
|
|
color: var(--text-normal);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.coalesce-block-title:hover {
|
|
color: var(--interactive-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.coalesce-block-title:active {
|
|
color: var(--interactive-accent-hover);
|
|
}
|
|
|
|
/* ============================
|
|
Checkmark Styles
|
|
============================ */
|
|
|
|
/* Checkmark container - smaller and more compact */
|
|
.coalesce-checkmark-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Obsidian-style checkmark */
|
|
.coalesce-checkmark {
|
|
color: var(--interactive-accent);
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* ============================
|
|
Default theme
|
|
============================ */
|
|
.theme-default .coalesce-backlinks-header {
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
|
|
|
|
.theme-default .coalesce-block-header {
|
|
padding: 4px 8px;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.theme-default .coalesce-backlink-item {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.theme-default .coalesce-backlink-item:not(:last-child) {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ============================
|
|
Compact theme
|
|
============================ */
|
|
.theme-compact .coalesce-backlinks-header {
|
|
padding: 4px;
|
|
border: none;
|
|
}
|
|
|
|
|
|
|
|
.theme-compact .coalesce-block-header {
|
|
padding: 2px 4px;
|
|
background: transparent;
|
|
}
|
|
|
|
/* ============================
|
|
Modern theme
|
|
============================ */
|
|
.theme-modern .coalesce-backlinks-header {
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
|
|
|
|
.theme-modern .coalesce-block-header {
|
|
padding: 8px 12px;
|
|
background: var(--background-secondary-alt);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.theme-modern .coalesce-backlink-item {
|
|
padding: 3px 0px;
|
|
}
|
|
|
|
/* ============================
|
|
Naked theme
|
|
============================ */
|
|
|
|
.theme-naked .coalesce-backlinks-header {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.theme-naked .coalesce-backlink-item {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
}
|
|
|
|
.theme-naked .coalesce-block-header {
|
|
display: none;
|
|
}
|
|
|
|
.theme-naked .coalesce-content-preview {
|
|
display: block !important;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.theme-naked .coalesce-backlink-item:not(:last-child) {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
margin-bottom: 1em;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
/* ============================
|
|
Responsive Layout Styles
|
|
============================ */
|
|
|
|
.is-phone .coalesce-backlinks-header,
|
|
.is-mobile .coalesce-backlinks-header {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.is-phone .coalesce-backlinks-header-left,
|
|
.is-mobile .coalesce-backlinks-header-left {
|
|
width: auto;
|
|
justify-content: flex-start;
|
|
flex: 1;
|
|
gap: 4px;
|
|
}
|
|
|
|
.is-phone .coalesce-backlinks-header-right,
|
|
.is-mobile .coalesce-backlinks-header-right {
|
|
width: auto;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.is-phone .coalesce-button-group,
|
|
.is-mobile .coalesce-button-group {
|
|
margin-left: 4px;
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
.is-phone .coalesce-alias-dropdown,
|
|
.is-mobile .coalesce-alias-dropdown {
|
|
min-width: 80px;
|
|
max-width: 120px;
|
|
font-size: var(--font-ui-smaller);
|
|
padding: 2px 4px;
|
|
height: 24px;
|
|
}
|
|
|
|
.is-phone .coalesce-filter-input,
|
|
.is-mobile .coalesce-filter-input {
|
|
min-width: 80px;
|
|
max-width: 120px;
|
|
font-size: var(--font-ui-smaller);
|
|
padding: 2px 4px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* Mobile styles handled by Obsidian's button components */
|
|
|
|
@media (max-width: 400px) {
|
|
.coalesce-backlinks-header {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.coalesce-backlinks-header-left {
|
|
width: auto;
|
|
justify-content: flex-start;
|
|
flex: 1;
|
|
gap: 4px;
|
|
}
|
|
|
|
.coalesce-backlinks-header-right {
|
|
width: auto;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.coalesce-alias-dropdown {
|
|
min-width: 80px;
|
|
max-width: 120px;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.coalesce-filter-input-container {
|
|
min-width: 80px;
|
|
max-width: 120px;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.coalesce-filter-input {
|
|
min-width: 80px;
|
|
max-width: 120px;
|
|
margin: 0;
|
|
padding-right: 24px; /* Smaller padding for very small screens */
|
|
}
|
|
|
|
.coalesce-button-group {
|
|
margin-left: 4px;
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/* Medium-width screen styles */
|
|
@media (max-width: 600px) and (min-width: 401px) {
|
|
.coalesce-backlinks-header-left {
|
|
flex-wrap: nowrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.coalesce-button-group {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.coalesce-backlinks-header.compact > svg {
|
|
width: 36px;
|
|
height: 36px;
|
|
color: var(--text-faint);
|
|
opacity: 0.6;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.coalesce-backlinks-header.compact > svg:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Dark theme compact mode */
|
|
.theme-dark .coalesce-backlinks-header.compact > svg:hover {
|
|
color: #ffffff;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Light theme compact mode */
|
|
.theme-light .coalesce-backlinks-header.compact > svg:hover {
|
|
color: var(--text-normal);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.coalesce-backlinks-header.compact .coalesce-button-group {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* ============================
|
|
Utility Classes (for JS refactoring)
|
|
============================ */
|
|
|
|
/* No backlinks message styling */
|
|
.coalesce-no-backlinks-message {
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
border: 1px dashed var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
margin: 8px 0;
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
/* Display utilities */
|
|
.is-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.is-visible {
|
|
display: block !important;
|
|
}
|
|
|
|
.is-collapsed .coalesce-content-preview {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Checkmark states */
|
|
.coalesce-checkmark-container .coalesce-checkmark {
|
|
display: none;
|
|
}
|
|
|
|
.coalesce-checkmark-container.is-checked .coalesce-checkmark {
|
|
display: block;
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Block states */
|
|
.coalesce-backlink-item {
|
|
/* Performance optimization */
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
transition: opacity 0.15s ease-out;
|
|
}
|
|
|
|
.coalesce-backlink-item.has-alias {
|
|
display: block;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.coalesce-backlink-item.no-alias {
|
|
display: none;
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Logo SVG styling - only for the Coalesce icon, not button icons */
|
|
.coalesce-backlinks-header-left > svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
color: var(--text-faint);
|
|
opacity: 0.6;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.coalesce-backlinks-header-left > svg:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Dark theme - get bright on hover */
|
|
.theme-dark .coalesce-backlinks-header-left > svg:hover {
|
|
color: #ffffff;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Light theme - get darker on hover */
|
|
.theme-light .coalesce-backlinks-header-left > svg:hover {
|
|
color: var(--text-normal);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Android-specific SVG visibility fixes - only for the Coalesce icon */
|
|
.is-mobile .coalesce-backlinks-header-left > svg,
|
|
.is-phone .coalesce-backlinks-header-left > svg {
|
|
display: block;
|
|
visibility: visible;
|
|
opacity: 0.7;
|
|
width: 48px;
|
|
height: 48px;
|
|
color: var(--text-muted);
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08)) drop-shadow(0 0 6px rgba(var(--interactive-accent-rgb), 0.04));
|
|
}
|
|
|
|
/* Ensure SVG elements render properly on Android - only for the Coalesce icon */
|
|
.is-mobile .coalesce-backlinks-header-left > svg *,
|
|
.is-phone .coalesce-backlinks-header-left > svg * {
|
|
fill: inherit;
|
|
stroke: none;
|
|
}
|
|
|
|
/* Compact mode on Android - only for the Coalesce icon */
|
|
.is-mobile .coalesce-backlinks-header.compact > svg,
|
|
.is-phone .coalesce-backlinks-header.compact > svg {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: block;
|
|
visibility: visible;
|
|
opacity: 0.7;
|
|
color: var(--text-muted);
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08)) drop-shadow(0 0 6px rgba(var(--interactive-accent-rgb), 0.04));
|
|
}
|
|
|
|
/* Fix for settings popup checkmarks */
|
|
.coalesce-settings-item[data-style] .coalesce-checkmark-container,
|
|
.coalesce-settings-item[data-position] .coalesce-checkmark-container,
|
|
.coalesce-settings-item[data-strategy] .coalesce-checkmark-container,
|
|
.coalesce-settings-item[data-theme] .coalesce-checkmark-container {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.coalesce-settings-item[data-style] .coalesce-checkmark-container .coalesce-checkmark,
|
|
.coalesce-settings-item[data-position] .coalesce-checkmark-container .coalesce-checkmark,
|
|
.coalesce-settings-item[data-strategy] .coalesce-checkmark-container .coalesce-checkmark,
|
|
.coalesce-settings-item[data-theme] .coalesce-checkmark-container .coalesce-checkmark {
|
|
display: none;
|
|
}
|
|
|
|
.coalesce-settings-item[data-style] .coalesce-checkmark-container.is-checked .coalesce-checkmark,
|
|
.coalesce-settings-item[data-position] .coalesce-checkmark-container.is-checked .coalesce-checkmark,
|
|
.coalesce-settings-item[data-strategy] .coalesce-checkmark-container.is-checked .coalesce-checkmark,
|
|
.coalesce-settings-item[data-theme] .coalesce-checkmark-container.is-checked .coalesce-checkmark {
|
|
display: block;
|
|
}
|
|
|
|
.coalesce-settings-submenu-item {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.coalesce-backlinks-header .coalesce-button-group .coalesce-sort-button svg,
|
|
.coalesce-backlinks-header .coalesce-button-group .coalesce-collapse-button svg {
|
|
width: var(--coalesce-icon-size-md);
|
|
height: var(--coalesce-icon-size-md);
|
|
}
|
|
|
|
/* ============================
|
|
Add Heading Prompt Styles
|
|
============================ */
|
|
|
|
.coalesce-add-heading-prompt {
|
|
color: var(--text-muted) !important;
|
|
cursor: pointer !important;
|
|
text-decoration: underline !important;
|
|
text-decoration-style: dotted !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
.coalesce-add-heading-prompt:hover {
|
|
color: var(--text-accent) !important;
|
|
text-decoration-color: var(--text-accent) !important;
|
|
}
|
|
|
|
.coalesce-add-heading-prompt:active {
|
|
color: var(--text-accent-hover) !important;
|
|
}
|
|
|
|
/* Open note icon next to Add heading */
|
|
.coalesce-add-heading-open-note {
|
|
margin-left: 6px;
|
|
padding: 2px;
|
|
line-height: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.coalesce-add-heading-open-note:hover {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
/* Heading popup modal styles */
|
|
.coalesce-heading-popup-modal {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
z-index: 10000 !important;
|
|
}
|
|
|
|
.coalesce-heading-popup-content {
|
|
background: var(--background-primary) !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
border-radius: 8px !important;
|
|
padding: 20px !important;
|
|
min-width: 300px !important;
|
|
max-width: 500px !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
} |