-
Notifications
You must be signed in to change notification settings - Fork 0
/
google-sheets-straightedge.user.css
153 lines (138 loc) · 4.69 KB
/
google-sheets-straightedge.user.css
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
/* ==UserStyle==
@name Google Sheets - Active row/column visual aid
@namespace github.com/acropup/acropup-UserStyle-CSS-Scripts
@homepageURL https://github.com/acropup/acropup-UserStyle-CSS-Scripts
@version 1.0.5
@description For any active cell or highlighted range in Google Sheets, the border is extended indefinitely in the form of dashed lines. This makes it easier to see which row/column you are on.
@author Shane Burgess
==/UserStyle== */
/* Feature list:
- Extends horizontal and vertical lines from the active cell to help your eye follow the current row.
- Smoothly animates movement of the active cell.
- Creates space for more worksheet tabs along the bottom.
- Adds a "Scroll left" arrow to the left end of the worksheet tabs.
*/
@-moz-document url-prefix("https://docs.google.com/spreadsheets/d/") {
/* --- Active cell border --- */
.range-border.active-cell-border::before {
content: '';
border: 2px dashed rgb(45 165 100);
float: left;
position: absolute;
top: -9999em;
bottom: -9999em;
left: -9999em;
right:-9999em;
transform: translateZ(-1px); /* Render behind .active-cell-border */
pointer-events: none;
}
.range-border.active-cell-border:nth-child(1)::before /* top */ {
top: -2px;
}
.range-border.active-cell-border:nth-child(2)::before /* bottom */ {
top: 0px;
}
.range-border.active-cell-border:nth-child(3)::before /* right */ {
left: 0px;
}
.range-border.active-cell-border:nth-child(4)::before /* left */ {
left: -2px;
}
/* --- Selected range borders --- */
/* pseudo elements inherit the opacity of their parent, so we need to
move .selection's 0.1 opacity to its background-color */
.selection {
background-color: rgba(14, 101, 235, 0.1) !important;
opacity: 1 !important;
}
.selection::before, .selection::after {
content: '';
box-sizing: border-box;
border: 2px dashed rgb(45 165 100);;
float: left;
position: absolute;
}
/* Vertical lines around selected ranges */
.selection::before {
left:-1px;
top: -9999em;
bottom: -9999em;
width: calc(100% + 1px);
}
/* Horizontal lines around selected ranges */
.selection::after {
top: -1px;
left: -9999em;
right:-9999em;
height: calc(100% + 1px);;
}
/* Smoothly move active cell highlighting */
/* This is probably too general a selector, but it's not clear how to make it more specific */
.uberlay > .overlay-container-ltr > div {
transition: top .2s ease 0s, left .2s ease 0s;
}
.range-border.active-cell-border {
transition: width .2s ease 0s, top .2s ease 0s, left .2s ease 0s;
/* This 3D transform is a way to keep pseudo elements behind their parents */
transform-style: preserve-3d;
}
/* .range-border.selection-border might also be of use */
/* --- Spreadsheet Tabs Bar --- */
/* Reduce tabs horizontal padding */
.docs-gm .docs-sheet-tab {
padding: 0 4px 0 8px;
}
/* Bottom tabs bar padding around icons */
.docs-material .docs-sheet-tab-caption .docs-icon {
margin-right: 3.5px;
}
.docs-material .docs-sheet-tab-caption .docs-sheet-lock-container {
margin-right: 1px;
}
.docs-material .docs-sheet-tab-caption .docs-sheet-database-icon-container {
margin-right: 4px;
}
/* Remove margin on left of bottom bar */
#grid-bottom-bar > tbody > tr:last-child > td:first-child {
display: none;
}
/* Read-only files have no Add Sheet button, but I still want to reserve space for it */
.docs-sheet-button.docs-sheet-add[aria-hidden=true] {
visibility: hidden;
display: unset !important;
}
/* Put a 'Move tabs left' arrow on the left side of the bottom bar */
.docs-gm .docs-sheet-button.docs-sheet-left::before, /* Clickable region */
.docs-gm .docs-sheet-button.docs-sheet-left::after { /* Triangle icon */
content: ' ';
position: fixed;
left: 63px;
bottom: 8px;
width: 21px;
height: 25px;
}
.docs-gm .docs-sheet-button.docs-sheet-left::after { /* Triangle icon */
bottom: 15px;
width: 0px;
height: 0px;
border: 5.5px solid transparent;
border-right: 5.5px solid #6a6a6a;
}
.docs-sheet-menu-button {
margin-right: 20px;
}
/* Hide the "Explore" button text */
.waffle-assistant-entry-label {
display: none;
}
/* Reduce the space taken by the selected Count/Sum/etc display in the bottom right */
.docs-sheet-status-avs {
margin-right: 0px;
}
.docs-gm .docs-sheet-status-avs .goog-flat-menu-button {
max-width: 125px;
}
#grid-bottom-bar > tbody > tr:nth-child(2) > td.docs-sheet-outer-container > div > div.docs-sheet-container.goog-inline-block > div {
width: calc(100vw - 394px) !important;
}
}