-
Notifications
You must be signed in to change notification settings - Fork 43
/
Copy pathretro-steam.scss
227 lines (227 loc) · 12 KB
/
retro-steam.scss
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
/*
retro steam (2012)
1.0
apr 28 2023
*/
// titlebar control buttons
.TitleBar.title-area {
.title-bar-actions {
gap: 2px;
margin-right: 6px;
max-height: 28px;
cursor: default;
}
.title-area-icon {
svg {display:none}
background-color: #0000 !important;
background-size: 100%;
background-position: center;
width: 16px;
height: 15px;
opacity: .5;
cursor: pointer;
margin-top: 8px;
&:hover {
opacity: 1;
}
}
.closeButton {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7.5L3 12H5L8 8.5L11 12H13L9 7.5L13 3H11L8 6.5L5 3H3L7 7.5Z' fill='white'/%3E%3C/svg%3E%0A") !important;
}
.maximizeButton {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 3H3V12H13V3ZM12 5H4V11H12V5Z' fill='white'/%3E%3C/svg%3E%0A") !important;
}
.restoreButton {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 3H5V5H3V12H11V10H13V3ZM6 5H11V9H12V4H6V5ZM4 7V11H10V7H4Z' fill='white'/%3E%3C/svg%3E%0A") !important;
}
.minimizeButton {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='11' width='8' height='1' fill='white'/%3E%3C/svg%3E%0A") !important;
}
}
// main
[class^="steamdesktop_Wrapper_"] {
[class^="steamdesktop_OuterFrame_"] {
background-color: #383635;
background-image: url("data:image/png;base64,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");
background-repeat: repeat-x;
}
// top bar
[class^="steamdesktop_TopBar_"] {
box-shadow: none;
background: none;
// titlebar
[class*="steamdesktop_TitleBar_"] {
// menu bar
[class*="rootmenu_RootMenuBar_"] {
height: 28px;
// option
[class*="rootmenu_RootMenuButton_2UyOB"] {
svg {display:none}
font-family: Arial;
padding: 0 2px;
cursor: default;
transition: 0s;
[class*="rootmenu_SteamButton_"] {
padding: 0;
}
}
}
// controls
[class*="titlebarcontrols_TitleBarControls_"] {
// notifs
[class*="titlebarcontrols_NotificationsButton_"] {
background: linear-gradient(#262625,#32302f);
border: solid 1px #605d5a;
box-shadow: inset 0 1px #413f3d;
border-top: none;
border-radius: 0 0 3px 3px;
margin-top: -8px;
padding: 0 4px;
height: 28px;
svg {
path {display:none}
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGISURBVDhPxZLBTsJAEIb/tlDARFLCARKOIl64QAi+Aie0B64SLiQIXvQBrHfjRSThZOABCA8gD8QBSbhAW2jdaberBWPCyS+Z7Ozs7L+7MysVCuf4DVmWkUgksNvtYFkWHMfhK2EOBBRFwQnj4f7hmU3jzDbD4fB28bnwhPZR0uk0dwFVVZHL5dC8ab7EYrFTSZJkZmq5XL5eLpfT1WqF7XbLs32EQDKZBEtEvX71HlXVuOO6CMz1bnqhp1LadD6fY71ee3sI8QTj0YBpWSNvwmGnc8/3XSamRqNN48ngUVYrPsKy7ZFt2/hp9ObATNP0xo1phg4RArVaDZqmeW+kytMY+NQBskwmg1arxXf4CAFabDQa0HUdkUhECAQ3KZVKrD51nv2NEAjIZrMoFotgXfD+AolRoSuVCs8IExKgNvX7r2yjhHa7jW63i06ng3z+DIPBG88KExIYj0fo9e5QrV7yiA/NKU7i+4h/wLqkU9JfkNBkMsFs9jHlocOvfCwHRTyW/xYAvgDgIKOh43o/BgAAAA5lWElmTU0AKgAAAAgAAAAAAAAA0lOTAAAAAElFTkSuQmCC");
background-position: center;
background-repeat: no-repeat;
}
// has unread
&[class*="titlebarcontrols_HasNew_"] {
background: #5c7e10;
border-color: #577117;
box-shadow: inset -1px 0 #6a8925, inset 1px 0 #6a8925, inset 0 1px #789a2b;
svg {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADfSURBVDhPpZLBDcIwDEVTBkCIAbgxAxswATAJI7ABM3ABziAmgCNX2AEkFiD879ipRRGl5Uuvrivl5ztNEWMswh/qaI1aG8sMWqcwg19VSeoNjuBZAw0uoBQPUZmCJfimPRgDW1P4BGvwADNw54c3zcEWHKQzOTfTCYy0UlfAXVfSJeUE8lAvzmjibjvQlS6EAWBCU5lcnVipG+BZLKQrxdl9qpzAj8CIjMrIn0TzCaB5NvCHeAY8oKF0VfXBBvSkS9IY6f82vY2yxhK0ucqyxo9QJ3+N83sTA59S30N4AZv/BpVmwYPcAAAADmVYSWZNTQAqAAAACAAAAAAAAADSU5MAAAAASUVORK5CYII=");
}
}
}
// announcements
[class*="titlebarcontrols_AnnouncementsButton_"] {
background: linear-gradient(#262625,#32302f);
border: solid 1px #605d5a;
box-shadow: inset 0 1px #413f3d;
border-top: none;
border-radius: 0 0 3px 3px;
margin-top: -8px;
padding: 0 4px;
height: 28px;
svg {
// path {display:none}
// background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGISURBVDhPxZLBTsJAEIb/tlDARFLCARKOIl64QAi+Aie0B64SLiQIXvQBrHfjRSThZOABCA8gD8QBSbhAW2jdaberBWPCyS+Z7Ozs7L+7MysVCuf4DVmWkUgksNvtYFkWHMfhK2EOBBRFwQnj4f7hmU3jzDbD4fB28bnwhPZR0uk0dwFVVZHL5dC8ab7EYrFTSZJkZmq5XL5eLpfT1WqF7XbLs32EQDKZBEtEvX71HlXVuOO6CMz1bnqhp1LadD6fY71ee3sI8QTj0YBpWSNvwmGnc8/3XSamRqNN48ngUVYrPsKy7ZFt2/hp9ObATNP0xo1phg4RArVaDZqmeW+kytMY+NQBskwmg1arxXf4CAFabDQa0HUdkUhECAQ3KZVKrD51nv2NEAjIZrMoFotgXfD+AolRoSuVCs8IExKgNvX7r2yjhHa7jW63i06ng3z+DIPBG88KExIYj0fo9e5QrV7yiA/NKU7i+4h/wLqkU9JfkNBkMsFs9jHlocOvfCwHRTyW/xYAvgDgIKOh43o/BgAAAA5lWElmTU0AKgAAAAgAAAAAAAAA0lOTAAAAAElFTkSuQmCC");
// background-position: center;
// background-repeat: no-repeat;
}
// has unread
&[class*="titlebarcontrols_Active_1oEwi"] {
background: #1999ff;
border-color: #127bd1;
box-shadow: inset -1px 0 #219bff, inset 1px 0 #219bff, inset 0 1px #45abff;
svg {
// background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADfSURBVDhPpZLBDcIwDEVTBkCIAbgxAxswATAJI7ABM3ABziAmgCNX2AEkFiD879ipRRGl5Uuvrivl5ztNEWMswh/qaI1aG8sMWqcwg19VSeoNjuBZAw0uoBQPUZmCJfimPRgDW1P4BGvwADNw54c3zcEWHKQzOTfTCYy0UlfAXVfSJeUE8lAvzmjibjvQlS6EAWBCU5lcnVipG+BZLKQrxdl9qpzAj8CIjMrIn0TzCaB5NvCHeAY8oKF0VfXBBvSkS9IY6f82vY2yxhK0ucqyxo9QJ3+N83sTA59S30N4AZv/BpVmwYPcAAAADmVYSWZNTQAqAAAACAAAAAAAAADSU5MAAAAASUVORK5CYII=");
}
}
}
}
}
// main navbar
[class^="steamdesktop_SuperNavBar_"]>[class^="supernav_SuperNav_"] {
// nav option
[class*="menu_MenuWrapper_"][class*="supernav_SuperNavMenu_"] {
cursor: default;
// inner
[class^="supernav_MenuButton_"] {
cursor: default;
font-family: Arial;
font-size: 23px;
&:after {display:none!important}
}
// selected
&[class*="supernav_Selected_"] {
[class^="supernav_MenuButton_"] {
color: #fff;
text-shadow: 0 0 6px #fff8, 0 0 4px #fff8, 0 0 2px #fff4;
}
}
}
}
}
// bottom bar
[class^="bottombar_BottomBar_"] {
box-shadow: none;
background: none;
// add game bar
[class*="bottombar_AddGameButton_"] {
margin-top: -32px;
z-index: 2;
// icon
[class*="bottombar_Icon_"] {
svg {display:none}
background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 8V6H6V2.5H8V6H11.5V8H8V11.5H6V8H2.5Z' fill='white'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center;
width: 14px;
height: 14px;
margin-top: 2px;
opacity: .5;
}
// text
[class*="bottombar_Text_"] {
font-family: Arial;
font-size: 12px;
text-transform: uppercase;
color: #fff8;
}
&:hover {
[class*="bottombar_Icon_"] {
opacity: 1;
}
[class*="bottombar_Text_"] {
color: #fff;
}
}
}
// downloads bar
[class*="bottombar_DownloadStatus_"] {
margin-top: -32px;
z-index: 2;
// icon
[class*="bottombar_Icon_"] {
display: none;
}
// text
[class*="bottombar_Queue_"] {
font-family: Arial;
font-size: 12px;
text-transform: uppercase;
color: #fff8;
}
&:hover {
[class*="bottombar_Queue_"] {
color: #fff;
}
}
}
}
// content
[class^="steamdesktop_ContentFrame_"] {
margin-left: 8px;
margin-right: 8px;
border-radius: 3px;
border: solid 1px #171614;
box-shadow: 0 0 0 1px #4d4b48;
margin-top: 28px;
overflow: visible;
// url bar
[class^="steamdesktop_BrowserWrapper_"]>[class^="steamdesktop_URLBar_"] {
position: absolute;
z-index: 9999;
margin-top: -27px;
contain: none;
background: none;
box-shadow: none;
padding-left: 0;
}
[class^="steamdesktop_URLBarReplacement_"]:empty {
display: none;
}
}
}