mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Retina tree twisties for OS X

Browse source 
Using separate arrows from treetwisty.svg from Mozilla, since it doesn't seem
to be possible to use list-style-position in the tree

The reason we still have to do this at all is that coloring of the twisties in
the tree still gets messed up as you move around the tree. (This still happens
in Places and Thunderbird as well.)
This commit is contained in:
Dan Stillman 2014-04-28 03:52:18 -04:00
parent 6bed65941a
commit 4179cb8ed6
15 changed files with 110 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
chrome/content/zotero-platform/mac/overlay.css
View file

@ -190,13 +190,11 @@
}
#zotero-collections-tree treechildren::-moz-tree-twisty(selected) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-selected.png");
list-style-image: url("chrome://zotero/skin/mac/twisty-selected.svg");
}
#zotero-collections-tree treechildren::-moz-tree-twisty(selected, open) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.png");
list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.svg");
}
#zotero-collections-splitter, #zotero-items-splitter
@ -272,18 +270,18 @@
treechildren::-moz-tree-twisty {
-moz-appearance: none;
width: 11px;
height: 11px;
list-style-image: url("chrome://zotero/skin/mac/twisty.png");
width: 16px;
height: 16px;
list-style-image: url("chrome://zotero/skin/mac/twisty.svg");
-moz-padding-start: 5px;
-moz-padding-end: 6px;
}
treechildren::-moz-tree-twisty(open) {
-moz-appearance: none;
width: 11px;
height: 11px;
list-style-image: url("chrome://zotero/skin/mac/twisty-open.png");
width: 16px;
height: 16px;
list-style-image: url("chrome://zotero/skin/mac/twisty-open.svg");
-moz-padding-start: 4px;
-moz-padding-end: 7px;
}
@ -291,23 +289,23 @@ treechildren::-moz-tree-twisty(open) {
/* How to get active twisty?
treechildren::-moz-tree-twisty(active) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-active.png") !important;
list-style-image: url("chrome://zotero/skin/mac/twisty-active.svg") !important;
}
treechilren::-moz-tree-twisty(active) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-active-open.png");
list-style-image: url("chrome://zotero/skin/mac/twisty-active-open.svg");
}
*/
tree:focus treechildren::-moz-tree-twisty(selected) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-selected.png");
list-style-image: url("chrome://zotero/skin/mac/twisty-selected.svg");
}
tree:focus treechildren::-moz-tree-twisty(selected, open) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.png");
list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.svg");
}
treechildren::-moz-tree-image {

BIN
chrome/skin/default/zotero/mac/twisty-active-open.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

15
chrome/skin/default/zotero/mac/twisty-active-open.svg Normal file
View file

@ -0,0 +1,15 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16" height="16" viewBox="0 0 16 16">
<g fill="#444">
<polyline points="3 4 12 4 7.5 12"/>
<g transform="translate(0,16)">
<polyline points="3 4 12 4 7.5 12" transform="rotate(-90, 7.5, 7.5)"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 548 B

BIN
chrome/skin/default/zotero/mac/twisty-active.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

12
chrome/skin/default/zotero/mac/twisty-active.svg Normal file
View file

@ -0,0 +1,12 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16" height="16" viewBox="0 0 16 16">
<g fill="#444">
<polyline points="3 4 12 4 7.5 12" transform="rotate(-90, 7.5, 7.5)"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 460 B

BIN
chrome/skin/default/zotero/mac/twisty-open.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

11
chrome/skin/default/zotero/mac/twisty-open.svg Normal file
View file

@ -0,0 +1,11 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16" height="16" viewBox="0 0 16 16">
<g fill="#888">
<polyline points="3 4 12 4 7.5 12"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 425 B

12
chrome/skin/default/zotero/mac/twisty-selected-active-open.svg Normal file
View file

@ -0,0 +1,12 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16" height="16" viewBox="0 0 16 16">
<g fill="rgba(255, 255, 255, 0.7)">
<polyline points="3 4 12 4 7.5 12"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 446 B

12
chrome/skin/default/zotero/mac/twisty-selected-active.svg Normal file
View file

@ -0,0 +1,12 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16" height="16" viewBox="0 0 16 16">
<g fill="rgba(255, 255, 255, 0.7)">
<polyline points="3 4 12 4 7.5 12" transform="rotate(-90, 7.5, 7.5)"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 480 B

BIN
chrome/skin/default/zotero/mac/twisty-selected-open.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

12
chrome/skin/default/zotero/mac/twisty-selected-open.svg Normal file
View file

@ -0,0 +1,12 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16" height="16" viewBox="0 0 16 16">
<g fill="#FFF">
<polyline points="3 4 12 4 7.5 12"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 426 B

BIN
chrome/skin/default/zotero/mac/twisty-selected.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

12
chrome/skin/default/zotero/mac/twisty-selected.svg Normal file
View file

@ -0,0 +1,12 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16" height="16" viewBox="0 0 16 16">
<g fill="#FFF">
<polyline points="3 4 12 4 7.5 12" transform="rotate(-90, 7.5, 7.5)"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 460 B

BIN
chrome/skin/default/zotero/mac/twisty.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

12
chrome/skin/default/zotero/mac/twisty.svg Normal file
View file

@ -0,0 +1,12 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16" height="16" viewBox="0 0 16 16">
<g fill="#888">
<polyline points="3 4 12 4 7.5 12" transform="rotate(-90, 7.5, 7.5)"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 460 B