Last Sync: 2026-04-15 20:21 (Mobile)
This commit is contained in:
524
.obsidian/plugins/notion-bases/styles.css
vendored
524
.obsidian/plugins/notion-bases/styles.css
vendored
@@ -1820,6 +1820,27 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Per-column wrap (applied via wrap toggle in the column menu) */
|
||||
.nb-td--wrap .nb-td-inner {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
min-height: var(--nb-row-height);
|
||||
overflow: visible;
|
||||
align-items: flex-start;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.nb-td--wrap .nb-cell-text,
|
||||
.nb-td--wrap .nb-cell-clickable {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
min-height: var(--nb-row-height);
|
||||
}
|
||||
|
||||
/* ── Linha de agregação ─────────────────────────────────────────────────────── */
|
||||
|
||||
.nb-tfoot {
|
||||
@@ -1966,7 +1987,8 @@
|
||||
|
||||
/* ── Filter pills row ────────────────────────────────────────────────────── */
|
||||
|
||||
.nb-pills-row {
|
||||
.nb-pills-row,
|
||||
.nb-filter-pills-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
@@ -1977,10 +1999,36 @@
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.nb-pills-row::-webkit-scrollbar {
|
||||
.nb-pills-row::-webkit-scrollbar,
|
||||
.nb-filter-pills-row::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nb-filter-pills-collapsed-label {
|
||||
font-size: var(--font-ui-smaller);
|
||||
color: var(--text-muted);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.nb-filter-pills-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
padding: 2px 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-s);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nb-filter-pills-toggle:hover {
|
||||
background: var(--background-modifier-hover);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.nb-filter-pill-sortable {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -2451,6 +2499,41 @@
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.nb-view-tab-settings-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: auto;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.nb-view-tab-settings-btn:hover {
|
||||
color: var(--text-normal);
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.is-mobile .nb-view-tab-settings-btn {
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.nb-db-settings-template-path {
|
||||
margin: 4px 0 12px 0;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.85em;
|
||||
color: var(--text-muted);
|
||||
background: var(--background-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.nb-view-add-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
@@ -5078,3 +5161,440 @@ body.nb-tl-resizing * {
|
||||
.nb-quick-add-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ── Save indicator ─────────────────────────────────────────────────────── */
|
||||
|
||||
.nb-save-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-left: 6px;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.nb-save-indicator--saved {
|
||||
animation: nb-save-fade 2s ease forwards;
|
||||
}
|
||||
|
||||
.nb-save-indicator--error {
|
||||
color: var(--text-error, #e03e3e);
|
||||
}
|
||||
|
||||
.nb-save-label {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nb-save-spinner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid var(--text-muted);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: nb-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
.nb-save-check {
|
||||
color: var(--text-success, #2da44e);
|
||||
}
|
||||
|
||||
.nb-save-error-icon {
|
||||
color: var(--text-error, #e03e3e);
|
||||
}
|
||||
|
||||
@keyframes nb-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes nb-save-fade {
|
||||
0%, 70% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Row drag handle ────────────────────────────────────────────────────── */
|
||||
|
||||
.nb-td-inner--drag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nb-row-drag-handle {
|
||||
cursor: grab;
|
||||
color: var(--text-faint);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nb-row-drag-handle:hover {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nb-row-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.nb-row--drag-over {
|
||||
border-top: 2px solid var(--interactive-accent) !important;
|
||||
}
|
||||
|
||||
/* ── Pagination ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.nb-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 6px 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nb-pagination-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.nb-pagination-btn:hover:not(:disabled) {
|
||||
background: var(--background-modifier-hover);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.nb-pagination-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nb-pagination-info {
|
||||
padding: 0 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nb-row-count-bar .nb-pagination {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ── Conditional formatting panel ───────────────────────────────────────── */
|
||||
|
||||
.nb-cf-panel {
|
||||
left: auto;
|
||||
right: 0;
|
||||
min-width: 300px;
|
||||
max-width: 360px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nb-cf-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.nb-cf-panel-title {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nb-cf-panel-close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.nb-cf-panel-empty {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nb-cf-rule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nb-cf-rule:hover {
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.nb-cf-rule-preview {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nb-cf-rule-desc {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nb-cf-rule-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
padding: 0 2px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nb-cf-rule:hover .nb-cf-rule-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nb-cf-add-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-accent);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nb-cf-add-btn:hover {
|
||||
background: var(--background-modifier-hover);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Rule editor */
|
||||
|
||||
.nb-cf-editor {
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
padding-top: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.nb-cf-editor-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nb-cf-select,
|
||||
.nb-cf-input {
|
||||
flex: 1;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
background: var(--background-primary);
|
||||
color: var(--text-normal);
|
||||
font-size: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nb-cf-color-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nb-cf-presets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.nb-cf-preset {
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nb-cf-preset:hover {
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nb-cf-preset--active {
|
||||
border-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
.nb-cf-custom-colors {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nb-cf-color-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nb-cf-color-field input[type="color"] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nb-cf-editor-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.nb-cf-btn {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nb-cf-btn--save {
|
||||
background: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.nb-cf-btn--save:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.nb-cf-btn--cancel {
|
||||
background: var(--background-modifier-hover);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.nb-cf-btn--cancel:hover {
|
||||
background: var(--background-modifier-border);
|
||||
}
|
||||
|
||||
/* Folder arrangement settings UI */
|
||||
.nb-db-settings-arrangement {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
.nb-db-settings-arrangement-desc {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9em;
|
||||
margin-top: 0;
|
||||
}
|
||||
.nb-arr-property-list {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.nb-arr-property-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 4px;
|
||||
background: var(--background-secondary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nb-arr-property-index {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
min-width: 18px;
|
||||
}
|
||||
.nb-arr-property-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nb-arr-btn {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
.nb-arr-btn-remove {
|
||||
color: var(--text-error);
|
||||
}
|
||||
.nb-arr-add-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.nb-arr-select {
|
||||
flex: 1;
|
||||
}
|
||||
.nb-arr-empty {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.nb-arr-preview-btn {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.nb-arr-preview-list {
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
margin: 8px 0;
|
||||
padding: 8px;
|
||||
background: var(--background-secondary);
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.nb-arr-preview-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.nb-arr-preview-from { color: var(--text-muted); }
|
||||
.nb-arr-preview-arrow { color: var(--text-accent); }
|
||||
.nb-arr-preview-to { color: var(--text-success); }
|
||||
.nb-arr-preview-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Live placeholder pills (rendered by the markdown post-processor) */
|
||||
.nb-placeholder-pill {
|
||||
display: inline-block;
|
||||
padding: 1px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.85em;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user