@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
1/**
2 * @provides phui-icon-view-css
3 */
4
5.phui-icon-example .phui-icon-view {
6 display: inline-block;
7 vertical-align: top;
8}
9
10.phui-icon-view.sprite-tokens {
11 height: 18px;
12 width: 18px;
13 display: inline-block;
14 vertical-align: top;
15}
16
17.phui-icon-view.sprite-login {
18 height: 28px;
19 width: 28px;
20}
21
22.phui-icon-view.phuihead-medium {
23 height: 50px;
24 width: 50px;
25}
26
27.phui-icon-view.phuihead-small {
28 height: 35px;
29 width: 35px;
30 background-size: 35px;
31}
32
33.phui-icon-view.phuihead-flag {
34 background-size: 16px;
35}
36
37.phui-icon-has-text:before {
38 margin-right: 6px;
39}
40
41a.phui-icon-view:hover {
42 text-decoration: none;
43 color: {$sky};
44}
45
46img.phui-image-disabled {
47 opacity: .8;
48 -webkit-filter: blur(4px) grayscale(100%) sepia(25%);
49 filter: blur(4px) grayscale(100%) sepia(25%);
50}
51
52.phui-icon-view.bluetext {
53 color: {$bluetext};
54}
55
56.phui-icon-view.invisible {
57 visibility: hidden;
58}
59
60/* - Icon in a Circle ------------------------------------------------------- */
61
62.phui-icon-circle {
63 border: 1px solid {$lightblueborder};
64 border-radius: 24px;
65 height: 24px;
66 width: 24px;
67 text-align: center;
68 display: inline-block;
69 cursor: pointer;
70 background: transparent;
71 padding: 0;
72 position: relative;
73}
74
75.phui-icon-circle.circle-medium {
76 height: 36px;
77 width: 36px;
78 border-radius: 36px;
79}
80
81.phui-icon-circle.phui-icon-circle-state {
82 border-color: transparent;
83 background-color: {$bluebackground};
84}
85
86.phui-icon-circle.phui-icon-circle-state .phui-icon-circle-icon {
87 color: {$bluetext};
88 font-size: 16px;
89}
90
91a.phui-icon-circle.phui-icon-circle-state:hover {
92 border-color: transparent !important;
93}
94
95.phui-icon-circle .phui-icon-circle-icon {
96 height: 24px;
97 width: 24px;
98 font-size: 11px;
99 line-height: 24px;
100 color: {$lightblueborder};
101 cursor: pointer;
102}
103
104.phui-icon-circle.circle-medium .phui-icon-circle-icon {
105 font-size: 18px;
106 line-height: 36px;
107}
108
109a.phui-icon-circle.hover-sky:hover {
110 text-decoration: none;
111 border-color: {$sky};
112 cursor: pointer;
113}
114
115a.phui-icon-circle.hover-sky:hover .phui-icon-view {
116 color: {$sky};
117}
118
119a.phui-icon-circle.hover-violet:hover {
120 text-decoration: none;
121 border-color: {$violet};
122 cursor: pointer;
123}
124
125a.phui-icon-circle.hover-violet:hover .phui-icon-view {
126 color: {$violet};
127}
128
129a.phui-icon-circle.hover-pink:hover {
130 text-decoration: none;
131 border-color: {$pink};
132 cursor: pointer;
133}
134
135a.phui-icon-circle.hover-pink:hover .phui-icon-view {
136 color: {$pink};
137}
138
139a.phui-icon-circle.hover-green:hover {
140 text-decoration: none;
141 border-color: {$green};
142 cursor: pointer;
143}
144
145a.phui-icon-circle.hover-green:hover .phui-icon-view {
146 color: {$green};
147}
148
149a.phui-icon-circle.hover-red:hover {
150 text-decoration: none;
151 border-color: {$red};
152 cursor: pointer;
153}
154
155a.phui-icon-circle.hover-red:hover .phui-icon-view {
156 color: {$red};
157}
158
159.phui-icon-circle .phui-icon-view.phui-icon-circle-state-icon {
160 position: absolute;
161 width: 14px;
162 height: 14px;
163 display: inline-block;
164 font-size: 12px;
165 right: -3px;
166 top: -4px;
167 text-shadow:
168 -1px -1px 0 #fff,
169 1px -1px 0 #fff,
170 -1px 1px 0 #fff,
171 1px 1px 0 #fff;
172}
173
174/* - Icon in a Square ------------------------------------------------------- */
175
176.phui-icon-view.phui-icon-square {
177 height: 40px;
178 width: 40px;
179 color: {$page.content};
180 font-size: 26px;
181 text-align: center;
182 line-height: 38px;
183 border-radius: 3px;
184}
185
186a.phui-icon-view.phui-icon-square:hover {
187 text-decoration: none;
188 color: {$page.content};
189}
190
191
192.phui-icon-emblem {
193 border-radius: 4px;
194}
195
196.phui-timeline-extra .phui-icon-emblem {
197 padding: 4px 6px;
198}
199
200.phui-icon-emblem-violet {
201 background-color: {$violet};
202}
203
204.phui-icon-emblem-red {
205 background-color: {$red};
206}
207
208.phui-icon-emblem-pink {
209 background-color: {$pink};
210}