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