表格样式优化
/* @settings
name: 【Table-熊猫】多彩表格样式
id: colorful-table-styles
settings:
-
id: table-type-class
title: 表格格式
description:
type: class-select
allowEmpty: false
default: table-type-normal
options:
-
label: 默认模式
value:
-
label: 虚线框模式
value: table-type-borderless
-
label: 加粗线宽模式
value: table-type-bolder
-
label: 三线表
value: table-type-three-line
-
id: table-header-color-class
title: 表格头部颜色
description:
type: class-select
allowEmpty: false
default: table-header-color-blue
options:
-
label: 灰色
value: table-header-color-gray
-
label: 红色
value: table-header-color-red
-
label: 粉色
value: table-header-color-pink
-
label: 葡萄紫
value: table-header-color-grape
-
label: 紫罗兰
value: table-header-color-violet
-
label: 靛蓝
value: table-header-color-indigo
-
label: 蓝色
value: table-header-color-blue
-
label: 青色
value: table-header-color-cyan
-
label: 蓝绿
value: table-header-color-teal
-
label: 绿色
value: table-header-color-green
-
label: 青柠
value: table-header-color-lime
-
label: 黄色
value: table-header-color-yellow
-
label: 橙色
value: table-header-color-orange
-
id: table-row-alt-background-option
title: 是否启用斑马纹
type: class-toggle
addCommand: true
default: true
-
id: table-dark-mode
title: 深色模式
description: 深色模式下采用灰色表格头部
type: class-toggle
addCommand: true
default: true
*/
/* 表格的样式修改 */
.theme-light, .theme-dark {
--table-border-width: 1px;
--table-header-background-hover: var(--table-header-background);
--table-cell-vertical-alignment: middle;
/* 表格悬浮样式配色不改变 */
--table-row-background-hover: var(--table-background);
&.table-row-alt-background-option {
--table-row-alt-background: var(--background-secondary);
}
--table-row-alt-background-hover: var(--table-row-alt-background);
/* 无线框模式 */
&.table-type-borderless {
--table-border-width: 1px;
.markdown-preview-view, .markdown-source-view.is-live-preview {
table td, table th {
border-style: dotted;
}
}
}
/* 加粗线宽模式 */
&.table-type-bolder {
--table-border-width: 3px;
}
/* 三线表 */
&.table-type-three-line {
--table-border-width: 0px;
.markdown-preview-view, .markdown-source-view.is-live-preview {
table>thead {
border-bottom: 1px solid var(--table-header-border-color);
}
}
--table-header-border-width: 3px;
--table-row-last-border-width: 3px;
}
}
.theme-light {
--table-border-color: black;
}
.theme-dark {
/* --table-border-color: white; */
--table-header-color: white
}
.table-header-color-gray {
&.theme-light {
--table-header-background: #868e96;
}
&.theme-dark {
--table-header-background: #495057;
}
}
.table-header-color-red {
&.theme-light {
--table-header-background: #ffa8a8;
}
&.theme-dark {
--table-header-background: #ff8787;
}
}
.table-header-color-pink {
&.theme-light {
--table-header-background: #faa2c1;
}
&.theme-dark {
--table-header-background: #f783ac;
}
}
.table-header-color-grape {
&.theme-light {
--table-header-background: #e599f7;
}
&.theme-dark {
--table-header-background: #da77f2;
}
}
.table-header-color-violet {
&.theme-light {
--table-header-background: #b197fc;
}
&.theme-dark {
--table-header-background: #9775fa;
}
}
.table-header-color-indigo {
&.theme-light {
--table-header-background: #91a7ff;
}
&.theme-dark {
--table-header-background: #748ffc;
}
}
.table-header-color-blue {
&.theme-light {
--table-header-background: #74c0fc;
}
&.theme-dark {
--table-header-background: #4dabf7;
}
}
.table-header-color-cyan {
&.theme-light {
--table-header-background: #66d9e8;
}
&.theme-dark {
--table-header-background: #3bc9db;
}
}
.table-header-color-teal {
&.theme-light {
--table-header-background: #63e6be;
}
&.theme-dark {
--table-header-background: #38d9a9;
}
}
.table-header-color-green {
&.theme-light {
--table-header-background: #69db7c;
}
&.theme-dark {
--table-header-background: #51cf66;
}
}
.table-header-color-lime {
&.theme-light {
--table-header-background: #a9e34b;
}
&.theme-dark {
--table-header-background: #94d82d;
}
}
.table-header-color-yellow {
&.theme-light {
--table-header-background: #ffe066;
}
&.theme-dark {
--table-header-background: #ffd43b;
}
}
.table-header-color-orange {
&.theme-light {
--table-header-background: #ffc078;
}
&.theme-dark {
--table-header-background: #ffa94d;
}
}
.theme-dark.table-dark-mode {
--table-border-color: white;
--table-header-background: #495057;
}
/* 2024-05-31_18-23 表格的一些优化设置 by 熊猫 */
table:not(.dataview):not(.ab-table-timeline) {
/* 如果包含图片，则图片居中显示并强制宽度一致 */
tbody tr td:has(span>img) {
text-align: center !important;
vertical-align: middle;
}
thead th {
text-align: center !important;
height: 100% !important;
}
/* 2024-06-25_02-16 编辑模式下表格内容左侧空隙删除 */
.table-cell-wrapper>.cm-s-obsidian>.cm-editor .cm-gutters {
display: none;
}
/* 跨行居中 */
td[colspan] {
text-align: center !important;
}
}
mlosun