Obsidian-chrome-tab-groups/styles.css at main · habibayman/Obsidian-chrome-tab-groups · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
.tab-group-chip {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  padding: 2px 8px;
  height: 26px;
  margin: 0 2px 0 4px;
  min-width: 36px;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  user-select: none;
  position: relative;
  background-color: color-mix(in srgb, var(--tg-color) 20%, transparent);
  border-bottom: 3px solid var(--tg-color, var(--color-accent));
  transition: background-color 0.15s ease;
  box-sizing: border-box;
  overflow: visible;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
}

.tab-group-chip:hover {
  background-color: color-mix(in srgb, var(--tg-color) 32%, transparent);
}

/* Group name label */
.tab-group-chip-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tg-color, var(--color-accent));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  line-height: 1;
}

/* Collapse/expand arrow */
.tab-group-chip-arrow {
  font-size: 0.6rem;
  color: var(--tg-color, var(--color-accent));
  opacity: 0.8;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.tab-group-chip:hover .tab-group-chip-arrow {
  opacity: 1;
}

/* Collapsed state: right-pointing arrow, slightly different background */
.tab-group-chip--collapsed {
  background-color: color-mix(in srgb, var(--tg-color) 15%, transparent);
}

.tab-group-chip--collapsed:hover {
  background-color: color-mix(in srgb, var(--tg-color) 28%, transparent);
}

/* Grouped tab headers */

/* Colored bottom border on each grouped tab — same color as its group chip */
.workspace-tab-header[data-tg-id] {
  position: relative;
  border-bottom: 3px solid var(--tg-color) !important;
}

/* Colored left border (toggled via body class from settings) */
.tab-groups-show-border .workspace-tab-header[data-tg-id] {
  border-left: 3px solid var(--tg-color) !important;
}

/* Hide tab headers that belong to a collapsed group */
.workspace-tab-header[data-tg-collapsed="true"] {
  display: none !important;
}

/* Color swatches in the New Group / settings modals */

.tab-group-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.tab-group-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.tab-group-color-swatch:hover {
  transform: scale(1.15);
}

.tab-group-color-swatch.is-selected {
  border-color: var(--text-normal);
  transform: scale(1.2);
}

.tab-group-settings-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-group-settings-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tab-groups-empty-note {
  color: var(--text-muted);
  font-style: italic;
}

.menu-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}