-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathpipboy.css
175 lines (149 loc) · 16.1 KB
/
pipboy.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
a:-webkit-any-link{
text-decoration:none !important;
}
html {
height: 100%;
cursor:url(http://nightly.pw/pipboy/cursor.png), auto;
}
body {
-ms-zoom: 0.50;
background-image: linear-gradient(135deg, #C0CFE2, #365ebf);
}
.holder { display: table;
position: fixed;
z-index: 1000;
}
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
::-moz-selection{background:lightgreen;}
::selection{background:lightgreen;}
body{background:#111;font-family:'Droid Sans',sans-serif;font-size:7pt;color:#d8c99e;font-weight:700;text-transform:uppercase;margin:auto;}
.pipfront{width:450px;height:400px;background:#8b7867;background: linear-gradient(#8b7867,#726350);left:45px;position:absolute;top:-60px;padding-top:30px;border-radius:100px;border-top-right-radius:70px;border-bottom-right-radius:60px;border-bottom-left-radius:30px;position:relative;z-index:0;border-top:4px solid #c3bfb4;box-shadow:0px 0px 5px #3f2d21;}
.pipfront:after{content:"";display:block;width:310px;height:55px;background: linear-gradient(#776754,#726350);margin-top:0px;margin-left:87px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;box-shadow:0px 2px 4px #4e4037;}
.top{width:120px;height:50px;background:#111;position:absolute;top:-15px;left:165px;z-index:-4;}
.top:after,.top:before{content:"";display:block;width:45px;height:30px;background:#c3bfb4;margin-top:5px;z-index:-1;position:relative;}
.top:after{border-top-right-radius:30px;border-top-left-radius:10px;left:-1px;}
.top:before{position:absolute;right:-1px;border-top-right-radius:10px;border-top-left-radius:30px;}
.top-panel{width:130px;height:40px;background:#5a5f5b;position:absolute;border-top-left-radius:15px;border-top-right-radius:15px;left:-5px;top:15px;}
.top-panel:before{content:"";display:block;background:#272b2a;width:130px;height:30px;margin: 15px auto 0 auto;position:relative;z-index:99;border-top-right-radius:15px;border-top-left-radius:15px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
.top-panel:after{content:"Pip-Boy";color:#151515;font-family:'Courier New',sans-serif;letter-spacing:2px;font-size:12pt;text-shadow:0px 0px 0.5px #444;position:absolute;top:23px;left:26px;z-index:99;}
.top-button{width:55px;height:13px;background:#000;position:absolute;right:5px;top:3px;border-top-right-radius:20px;border-top-left-radius:20px;border-top:1px solid #444;transform:rotate(27deg)}
.top-button:after{content:"";display:block;width:30px;height:7px;background:linear-gradient(to right, rgba(0,0,0,0.0),rgba(255,255,255,0.8));margin-left:13px;margin-top:-7px;border-radius:2px;border:1px solid #333;}
.stat:before{content:"Stat";}.inv:before{content:"Inv";}.data:before{content:"Data";}.map:before{content:"Map";}.radio:before{content:"Radio"}.status:before{content:"STATUS";}.special:before{content:"Special";}
.screw1{width:14px;height:14px;position:absolute;top:50px;right:15px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;}
.screw1:after{content:"";display:block;width:100%;height:3.9px;background:rgba(0,0,0,0.7);transform:rotate(40deg);margin-top:5px;}
.screen{background:#272b2a;width:370px;height:290px;margin:auto;border-radius:50px;padding-top:5%;border-top:10px solid #5a5f5b;border-bottom:5px solid #3a3e41;}
.screw2{width:14px;height:14px;position:absolute;bottom:85px;right:15px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;}
.screw2:after{content:"";display:block;width:100%;height:3.9px;background:rgba(0,0,0,0.7);transform:rotate(-70deg);margin-top:5.3px;}
.screw3{width:14px;height:14px;position:absolute;top:160px;left:30px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;}
.screw3:after{content:"";display:block;width:100%;height:3.9px;background:rgba(0,0,0,0.7);transform:rotate(-30deg);margin-top:5px;}
.screw4{width:14px;height:14px;position:absolute;bottom:30px;left:98px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;}
.screw4:after{content:"";display:block;width:100%;height:3.5px;background:rgba(0,0,0,0.7);transform:rotate(45deg);margin-top:5px;}
.screw5{width:14px;height:14px;position:absolute;bottom:-10px;right:-60px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;}
.screw5:after{content:"";display:block;width:100%;height:3.5px;background:rgba(0,0,0,0.7);transform:rotate(55deg);margin-top:5px;}
.bump1{width:9px;height:9px;position:absolute;top:40px;left:-15px;background:#c3b9af;border-radius:150px;box-shadow:0px 2px 3px #483a31;z-index:99;}
.bump1:after{content:"";display:block;width:9px;height:9px;position:absolute;top:-35px;background:#c3b9af;border-radius:150px;box-shadow:0px 2px 3px #483a31;z-index:99;}
.bump2{width:9px;height:8px;position:absolute;bottom:145px;right:100px;background:#6d5d4e;border-radius:150px;box-shadow:0px 2px 3px #483a31;border-top:1px solid #c3bfb4;z-index:99;}
.bump3{width:9px;height:8px;position:absolute;bottom:63px;right:52px;background:#6d5d4e;border-radius:150px;box-shadow:0px 2px 3px #483a31;border-top:1px solid #c3bfb4;z-index:99;}
.bump4{width:9px;height:7px;position:absolute;bottom:13px;left:35px;background:#8c837c;border-radius:150px;box-shadow:0px 2px 3px #483a31;z-index:99;}
.bump5{width:9px;height:7px;position:absolute;bottom:13px;right:35px;background:#8c837c;border-radius:150px;box-shadow:0px 2px 3px #483a31;z-index:99;}
.screen-border{background:#272b2a;width:370px;height:290px;margin:auto;border-radius:50px;padding-top:5%;border-top:10px solid #5a5f5b;border-bottom:5px solid #3a3e41;position:relative;z-index:-5;}
.screen{width:300px;height:235px;position:absolute;margin-left:26px;border-radius:20px;background:#000;border:5px solid #333;padding:5px 5px 5px 0;;overflow:hidden;}
.screen-reflection{width:285px;height:185px;background:linear-gradient(150deg,#fff,rgba(0,0,0,0));position:relative;z-index:99;opacity:0.07;margin:9px 10px 10px 10px;border-radius:10px;}
.scan{width:305px;height:80px;background:linear-gradient(rgba(0,0,0,0),#7ff12a);position:absolute;animation:scan;animation-duration:4s;animation-iteration-count: infinite;top:-85px;z-index:99;opacity:0.25;}
nav{height:25px;width:90%;position:absolute;top:0;left:0;border-bottom:1px solid #8df776;padding-left:10%;border-top-right-radius:20px;z-index:95;border-top-left-radius:20px;}
nav span{color:#8df776;line-height:31px;font-size:9pt;letter-spacing:0.3px;margin-left:14px;font-weight:300;}
nav .active{background:#000;border-right:1px solid #8df776;border-left:1px solid #8df776;border-bottom:1px solid #000;border-top-left-radius:5px;border-top-right-radius:5px;padding:3px 6px 3px 6px;}
nav p{margin:-10px 0 0 0;height:25px;}
nav .off{color:#172f18;position:relative;left:-5px;}
.vaultboy{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/vaultboy2.gif');background-size:77px;background-position:2px;width:80px;height:100px;position:absolute;left:110px;top:56px;}
.bar1,.bar2,.bar3,.bar4,.bar5,.bar6{width:15px;height:3.5px;background:#64d515;position:absolute;}
.bar1{left:32px;top:-8px;}
.bar2{left:32px;bottom:-8px;background:none;border:1px solid #64d515;height:1.5px;}.bar2:after{content:"";display:block;height:1.5px;width:7.6px;background:#64d515;}
.bar3{left:-20px;top:32px;}
.bar4{right:-20px;top:32px;}
.bar5{left:-20px;top:82px;}
.bar6{right:-20px;top:82px;}
.supplies{height:16px;position:absolute;bottom:22px;left:13px;background:#000;}
.supplies span{margin-right:5px;background:#78e461;padding:2px 3px 2px 3px;color:#000;font-weight:700;}
.hud-bar{height:12px;position:absolute;width:290px;bottom:9px;left:15px;background:#000;color:#8df776;z-index:96;}
.info-bar{width:170px;height:20px;bottom:50px;left:86px;position:absolute;z-index:97;}
.info-bar span{background:rgba(0,255,0,0.0.2);padding:3px;height:15px;display:inline-block;vertical-align:top;font-size:7px;color:#8df776;text-align:center;position:relative;}
.info-bar span i{position:absolute;top:0;left:5px;}
.info-bar span p{margin-top:8px;}
.pip{width:630px;height:400px;background:#8b7867;background: linear-gradient(#8b7867,#4f4138);margin:100px auto 0 auto;border-radius:50px;border-bottom-right-radius:90px;border-top:2px solid #c3bfb4;position:relative;}
.tune-wheel{width:60px;height:60px;background:#000;transform:rotate(45deg);border-radius:8px;border-top:2px solid #999;border-left:2px solid #999;z-index:0;position:absolute;top:240px;right:12px;}
.tune-wheel:before{width:27px;height:27px;background:#000;content:"";display:block;border-radius:150px;position:absolute;top:0;z-index:99;top:17px;left:17px;box-shadow:0px 0px 25px #252525;border-bottom:1px solid #999;transform:rotate(-45deg);}
.tune-wheel:after{content:"";display:block;width:60px;height:60px;background:#000;border-radius:8px;transform:rotate(45deg);}
.tune-wheel .analog{width:15px;height:15px;background:#000;position:absolute;top:20px;left:20px;z-index:99;border-radius:150px;border:3px solid #151515;}
.rads{width:85px;height:80px;background:#7e6d5b;position:absolute;top:140px;right:90px;border-top-right-radius:50px;border-bottom-right-radius:50px;box-shadow:1px 5px 10px #48372d;;border-left:0;}
.rads:after{content:"RADS";position:absolute;top:33.5px;right:50px;letter-spacing:-0.2px;}
.rads-meter{width:30px;position:absolute;top:12.5px;right:12px;border-top-right-radius:50px;border-bottom-right-radius:50px;height:55px;background:#e4ebe4;border-bottom-left-radius:5px;border-top-left-radius:5px;z-index:0;}
.rads-meter:after{content:"";display:block;width:40px;height:40px;border-right:5px solid #4c2628;border-radius:50px;position:absolute;right:5px;top:8px;z-index:-1;}
.rads-value:before{width:5px;height:5px;content:"";display:block;background:#0d0c07;border-radius:150px;position:absolute;top:25px;left:4px;}
.rads-value:after{width:20px;height:2px;background:#0d0c07;content:"";display:block;transform:rotate(30deg);position:absolute;top:27px;left:8px;transform-origin:left;animation: meter 2.7s infinite;}
.hp{display:inline-block;}.hp:before{content:"HP 365/365";}
.exp{display:inline-block;margin-left:20px;}.exp:before{content:"Level 48";}
.exp:after{content:"";display:inline-block;width:99px;height:4px;border:1px solid lightgreen;margin-left:2px;}
.ap{display:inline-block;margin-left:20px;}.ap:before{content:"AP 110/110";}
.weapon{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-gun2.png') no-repeat;width:23px;height:auto;}
.aim{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-aim2.png')}
.shield{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-shield2.png')}
.voltage{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-voltage2.png');}
.nuclear{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-nuclear2.png')}
.helmet{background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-helmet2.png');}
.aim,.shield,.voltage,.nuclear{width:10px;background-size:10px 10px;height:auto;background-repeat:no-repeat;background-position:3px 0px;}
.weapon,.helmet{background-size:27px;height:auto;width:23px;background-repeat:no-repeat;}
.left-speakers{width:35px;position:absolute;top:137px;left:20px}
.left-speakers:before{width:60px;height:265px;content:"";display:block;background: linear-gradient(#806f5d,#726350);position:absolute;left:0px;top:-30px;border-bottom-left-radius:150px;border-top-left-radius:20px;border-top:2px solid #c3bfb4;border-bottom:2px solid #4f3f32;}
.left-speaker{content:"";display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;}
.speakers{width:40px;position:absolute;top:160px;right:0;z-index:99;}
.speaker{width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;}
.speaker:after{width:23px;height:5px;background:rgba(0,0,0,0.2);content:"";display:block;border-bottom:2px solid #978175;margin-left:-40px;border-radius:3px;}
.tune-meter{;width:30px;height:60px;position:absolute;right:65px;top:260px;border-bottom-left-radius: 100px;border: 30px solid #47473f; border-right: 0;border-top:0;}
.tune-meter:before{content:"";display:block;width:22px;height:5px;background:#a45764;position:absolute;left:-22px;top:31px;box-shadow:-1px 0px 2px #332c26;transform:rotate(-8deg)}
.tune-meter:after{content:"TUNE";position:absolute;top:-43px;right:-9px;}
.wheel{width:55px;height:110px;background:#000;position:absolute;top:-2px;right:-10px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-top:2px solid #aaaaa8;border-left:2px solid #392c24;}
.tab-names{position:absolute;left:-40px;top:10px;}
.tab-names li{list-style-type:none;text-align:right;padding:3.5px 0 3.5px 0;}
.wheel-shadow{width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);}
.wheel-plug{width:5px;height:25px;background:#9daaa3;border-top-right-radius:100px;border-bottom-right-radius:100px;position:absolute;top:43px;right:-5px;}
.wheel-wire{width:150px;height:130px;border-radius:150px;position:absolute;z-index:-2;top:45px;left:-65px;border-right:10px solid #222222;z-index:-3;}
.left-wheel{width:38px;height:88px;background:#000;position:absolute;top:-16px;left:-2px;border-radius:10px;border-top:2px solid #aaaaa8;transform:rotate(6deg);border-left:2px solid #333;}
.left-wheel-shadow{width:37px;height:8px;background:#333;border-radius:100px;margin-top:10.5px;background: linear-gradient(#000,#222);}
.bottom{width:200px;height:105px;background: linear-gradient(#7d6855,#726350,#211a14);position:absolute;bottom:-20px;border-bottom-right-radius:60px;border-bottom-left-radius:60px;border-top-left-radius:35px;border-top-right-radius:35px;border-top:3px solid #403227;left:170px;}
.bottom-clip{width:7px;height:62px;background:linear-gradient(#666,#222);margin-top:30px;margin-left:10px;margin-right:10px;display:inline-block;vertical-align:top;}
.bottom-clips{position:absolute;left:46px;}
.bottom span{display:block;background:#ccc;height:28px;}
.wrapper{margin:auto;}
.bottom-switch{width:86px;height:40px;background-color: #818644;
background-image: linear-gradient(90deg, transparent 50%, rgba(0,0,0,.8) 50%);
background-size: 23px 20px;border-radius:15px;position:absolute;bottom:-7px;left:57px;}
.power{width:32px;height:31px;background:#000;position:absolute;bottom:25px;right:88px;border-radius:150px;}
.power:after{content:"";display:block;width:22px;height:22px;background:radial-gradient(white,yellow,orange,red);border-radius:150px;margin-left:5px;margin-top:6px;animation: flicker; animation-duration: 4s;animation-iteration-count: infinite;}
.power:before{content:"Power";display:block;position:absolute;right:-29px;top:5px;font-size:8px;transform:rotate(5deg);}
.roulette{background:#000;position:absolute;right:105px;bottom:20px;width:37px;height:25px;border-top-left-radius:60px;border-top-right-radius:60px;}
.roulette:after{content:"";display:block;width:100%;height:20px;background:#000;position:relative;margin-top:5px;z-index:0;width:37px;height:35px;border-radius:150px;border-top:1px solid #444;}
.roulette:before{content:"";display:block;width:15px;height:15px;border-radius:150px;top:17px;left:11px;border-bottom:1px solid #555;position:absolute;z-index:3;}
.top-right{width:140px;height:100px;background: linear-gradient(#8b7663,#625245);position:absolute;top:-35px;right:5px;border-top-left-radius:30px;border-top-right-radius:40px;border-top:3px solid #c3bfb4;z-index:-1;}
.spike-wheel {width: 80px;height: 80px;background: #000;position: absolute;z-index:-99;top:-40px;right:19px;border-radius:5px;border-top: 3px solid #777;transform:rotate(10deg)}
.spike-wheel:before, .spike-wheel:after {content: "";position: absolute;top: 0;left: 0;background: #000;height: 80px;width: 80px;border-radius:5px;border-top: 3px solid #777;}
.spike-wheel:before {
transform:rotate(30deg);}
.spike-wheel:after {transform: rotate(60deg);border-radius:5px;}
@keyframes flicker{
0%{box-shadow:0px 0px 5px 0px red;}
5%{box-shadow:0px 0px 30px 2px red;}
60%{box-shadow:0px 0px 30px 2px red;}
80%{box-shadow:0px 0px 10px 0px orange;}
90%{box-shadow:0px 0px 30px 2px red;}
100%{box-shadow:0px 0px 0px 0px red;}
}
@keyframes meter{
0{transform:rotate(30deg);}
50%{transform:rotate(20deg);}
}
@keyframes scan{
0{top:-80px;}
70%{top:300px;}
100%{top:300px;}
}