mirror of
				https://github.com/zadam/trilium.git
				synced 2025-10-31 10:26:08 +01:00 
			
		
		
		
	style/table collections: tweak appearance
This commit is contained in:
		| @@ -1,22 +1,27 @@ | |||||||
| .tabulator { | .tabulator { | ||||||
|     --col-header-bottom-border: 2px solid var(--main-border-color); |     --col-header-background-color: var(--main-background-color); | ||||||
|     --col-header-separator-border: none; |  | ||||||
|     --col-header-background-color: transparent; |  | ||||||
|     --col-header-text-color: var(--main-text-color); |  | ||||||
|     --col-header-hover-background-color: var(--accented-background-color); |     --col-header-hover-background-color: var(--accented-background-color); | ||||||
|     --col-header-arrow-active-color: var(--main-border-color); |     --col-header-text-color: var(--main-text-color); | ||||||
|  |     --col-header-arrow-active-color: var(--main-text-color); | ||||||
|     --col-header-arrow-inactive-color: var(--more-accented-background-color); |     --col-header-arrow-inactive-color: var(--more-accented-background-color); | ||||||
|  |     --col-header-separator-border: none; | ||||||
|  |     --col-header-bottom-border: 2px solid var(--main-border-color); | ||||||
|  |  | ||||||
|  |     --row-background-color: var(--main-background-color); | ||||||
|  |     --row-alternate-background-color: var(--main-background-color); | ||||||
|  |     --row-moving-background-color: var(--accented-background-color); | ||||||
|     --row-text-color: var(--main-text-color); |     --row-text-color: var(--main-text-color); | ||||||
|     --row-alternate-background-color: transparent; |  | ||||||
|  |  | ||||||
|     --grid-color: var(--more-accented-background-color); |     --grid-horizontal-color: var(--more-accented-background-color); | ||||||
|  |     --grid-vertical-color: red; | ||||||
|  |  | ||||||
|  |     --cell-editable-hover-outline-color: var(--main-border-color); | ||||||
|     --cell-read-only-text-color: var(--muted-text-color); |     --cell-read-only-text-color: var(--muted-text-color); | ||||||
|     --cell-editing-background-color: var(--ck-color-selector-focused-cell-background); |      | ||||||
|     --cell-editing-text-color: initial; |  | ||||||
|     --cell-editing-border-color: var(--main-border-color); |     --cell-editing-border-color: var(--main-border-color); | ||||||
|     --cell-editing-border-width: 2px; |     --cell-editing-border-width: 2px; | ||||||
|  |     --cell-editing-background-color: var(--ck-color-selector-focused-cell-background); | ||||||
|  |     --cell-editing-text-color: initial; | ||||||
|  |  | ||||||
|     background: unset; |     background: unset; | ||||||
|     border: unset; |     border: unset; | ||||||
| @@ -29,11 +34,16 @@ | |||||||
| /* Column headers */ | /* Column headers */ | ||||||
|  |  | ||||||
| .tabulator div.tabulator-header { | .tabulator div.tabulator-header { | ||||||
|     background: var(--col-header-background-color); |  | ||||||
|     border-bottom: var(--col-header-bottom-border); |     border-bottom: var(--col-header-bottom-border); | ||||||
|  |     background: var(--col-header-background-color); | ||||||
|     color: var(--col-header-text-color); |     color: var(--col-header-text-color); | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .tabulator div.tabulator-header .tabulator-col.tabulator-moving { | ||||||
|  |     border: none; | ||||||
|  |     background: var(--col-header-hover-background-color); | ||||||
|  | } | ||||||
|  |  | ||||||
| .tabulator .tabulator-col-content { | .tabulator .tabulator-col-content { | ||||||
|     padding: 8px 4px !important; |     padding: 8px 4px !important; | ||||||
| } | } | ||||||
| @@ -62,7 +72,7 @@ | |||||||
| /* Table body */ | /* Table body */ | ||||||
|  |  | ||||||
| .tabulator-tableholder { | .tabulator-tableholder { | ||||||
|     padding-top: 4px; |     padding-top: 10px; | ||||||
| } | } | ||||||
|  |  | ||||||
| /* Rows */ | /* Rows */ | ||||||
| @@ -75,20 +85,21 @@ | |||||||
| .tabulator-row { | .tabulator-row { | ||||||
|     background: transparent; |     background: transparent; | ||||||
|     border-top: none; |     border-top: none; | ||||||
|     border-bottom: 1px solid var(--grid-color); |     border-bottom: 1px solid var(--grid-horizontal-color); | ||||||
|     color: var(--row-text-color); |     color: var(--row-text-color); | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .tabulator-row.tabulator-row-odd { | ||||||
|  |     background: var(--row-background-color); | ||||||
|  | } | ||||||
|  |  | ||||||
| .tabulator-row.tabulator-row-even { | .tabulator-row.tabulator-row-even { | ||||||
|     background: var(--row-alternate-background-color); |     background: var(--row-alternate-background-color); | ||||||
| } | } | ||||||
|  |  | ||||||
| .tabulator-row.tabulator-moving { | .tabulator-row.tabulator-moving { | ||||||
|     border-color: transparent; |     border-color: transparent; | ||||||
|     border-radius: 10px; |     background-color: var(--row-moving-background-color); | ||||||
|     box-shadow: 0 0 20px rgba(0, 0, 0, .75); |  | ||||||
|     transform: scaleX(.99); |  | ||||||
|     backdrop-filter: blur(5px); |  | ||||||
| } | } | ||||||
|  |  | ||||||
| /* Cell */ | /* Cell */ | ||||||
| @@ -103,7 +114,8 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| .tabulator:not(.tabulator-editing) .tabulator-row .tabulator-cell.tabulator-editable:hover { | .tabulator:not(.tabulator-editing) .tabulator-row .tabulator-cell.tabulator-editable:hover { | ||||||
|     outline: 2px solid yellow; |     outline: 2px solid var(--cell-editable-hover-outline-color); | ||||||
|  |     outline-offset: -1px; | ||||||
| } | } | ||||||
|  |  | ||||||
| .tabulator-row .tabulator-cell.tabulator-editing { | .tabulator-row .tabulator-cell.tabulator-editing { | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user