res/css/style.css (view raw)
1@font-face {
2 font-family: '04b_03';
3 src: url('../ttf/04b03.ttf') format('truetype');
4}
5
6#overlay {
7 position: absolute;
8 text-align: center;
9 padding-top: 450px;
10 top: 0;
11 left: 0;
12 width:100%;
13 height:100%;
14 background-color: black;
15 z-index: 999;
16}
17
18html {
19 font-family: "04b_03";
20 color: white;
21 cursor: url("../cur/cursor2x.cur"), auto;
22 text-shadow: 1px 1px #000000;
23}
24
25#mainframe {
26 width: 100%;
27 border: 0px;
28 cursor: url("../cur/cursor2x.cur"), auto;
29}
30
31a {
32 cursor: url("../cur/pointer2x.cur"), auto;
33}
34
35img {
36 image-rendering: pixelated;
37}
38
39.hover-tilt {
40 transition: transform .1s ease-in-out;
41 rotate: -1.5deg;
42}
43.hover-tilt:hover {
44 transform: rotate(3deg);
45}
46
47#main-container {
48 height: 100%;
49 width: 800px;
50 margin: auto;
51}
52
53#menu-div {
54 text-align: center;
55 background-image: url("../img/orange-banner.jpg");
56 background-size: cover;
57 color: white;
58 padding: 15px;
59 margin-top: -18px;
60}
61
62#menu-div a {
63 color: white;
64 text-decoration: none;
65}
66
67#menu-div h1 {
68 margin-left: 18px;
69}
70
71.menu-item {
72 text-align: center;
73 display: inline-block;
74 width: 118px;
75}
76
77.menu-item img {
78 height: 50px;
79 margin: auto;
80 display: block;
81}
82
83#music-player {
84 position: fixed;
85 left: 5px;
86 height: 66px;
87 image-rendering: pixelated;
88 transition: bottom .4s ease-in-out;
89}
90
91#music-player-base {
92 float: left;
93 width: 114px;
94 height: 66px;
95 background-color: #141414;
96 background-image: url("../img/player_pause.png");
97 background-size: contain;
98}
99
100#music-player-song {
101 position: relative;
102 float: right;
103 height: 66px;
104 min-width: 700px;
105 margin-left: 5px;
106 background-color: #141414;
107 background-image: url("../img/player_song.png");
108 background-size: 100% 100%;
109 transition: top .4s ease-in-out;
110}
111
112#song-text {
113 position: relative;
114 font-weight: 700;
115 color: black;
116 margin: 10px;
117 top: 30%;
118}
119
120.player-play {
121 background-image: url("../img/player_play.png")!important;
122}
123
124#music-player-overlay {
125 width: 100%;
126 height: 100%;
127 background-image: url("../img/player_overlay.png");
128 cursor: url("../cur/pointer2x.cur"), auto;
129 background-size: contain;
130}
131
132/* PAGES STUFF */
133.full-width {
134 left: 50px;
135 width: 700px;
136}
137
138.half-width {
139 width: 300px;
140}
141
142.center {
143 text-align: center;
144}
145
146.left {
147 text-align: left;
148}
149
150.right {
151 text-align: left;
152}
153
154.tilt-right {
155 rotate: 2deg;
156}
157
158.tilt-left {
159 rotate: -2deg;
160}
161
162.tilt-45 {
163 rotate: 45deg;
164}
165
166.flip-x {
167 transform: scaleX(-1);
168}
169
170.flip-y {
171 transform: scaleY(-1);
172}
173
174.white-shadow {
175 text-shadow: 1px 1px white;
176}
177
178.deeppink {
179 color: deeppink;
180}
181
182.mediumvioletred {
183 color: mediumvioletred;
184}
185
186.el {
187 position: absolute;
188 overflow-wrap: break-word;
189 font-size: large;
190 line-height: 25px;
191}
192
193.up-down {
194 animation: MoveUpDown 3s linear infinite;
195 position: relative;
196 left: 0;
197 bottom: 0;
198}
199
200@keyframes MoveUpDown {
201 0%, 100% {
202 bottom: 0;
203 }
204 50% {
205 bottom: 10px;
206 }
207 }