Skip to content

Commit 746c6d8

Browse files
pavel-aicradlewatsonbox
pavel-aicradle
authored and
watsonbox
committed
Extract stylesheet to its own file
1 parent 6cc676d commit 746c6d8

File tree

2 files changed

+97
-97
lines changed

2 files changed

+97
-97
lines changed

‎index.html‎

Lines changed: 2 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -9,103 +9,6 @@
99
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
1010
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
1111

12-
<style>
13-
#header {
14-
padding: 40px 15px;
15-
text-align: center;
16-
}
17-
18-
#loginButton {
19-
display: none;
20-
margin-top: 20px;
21-
}
22-
23-
#rateLimitMessage {
24-
display: none;
25-
text-align: center;
26-
}
27-
28-
h1 a { color: black; }
29-
h1 a:hover { color: black; text-decoration: none; }
30-
31-
nav.paginator:nth-child(1) {
32-
margin-top: -74px;
33-
}
34-
35-
table {
36-
float: left;
37-
}
38-
39-
#playlists {
40-
display: none;
41-
}
42-
43-
@keyframes spinner {
44-
to {transform: rotate(360deg);}
45-
}
46-
47-
@-webkit-keyframes spinner {
48-
to {-webkit-transform: rotate(360deg);}
49-
}
50-
51-
.spinner {
52-
min-width: 24px;
53-
min-height: 24px;
54-
}
55-
56-
.spinner:before {
57-
content: 'Loading…';
58-
position: absolute;
59-
top: 240px;
60-
left: 50%;
61-
width: 100px;
62-
height: 100px;
63-
margin-top: -50px;
64-
margin-left: -50px;
65-
}
66-
67-
.spinner:not(:required):before {
68-
content: '';
69-
border-radius: 50%;
70-
border: 4px solid rgba(236, 235, 232, 1);
71-
border-top-color: rgba(130, 130, 130, 1);
72-
animation: spinner 1s linear infinite;
73-
-webkit-animation: spinner 1s linear infinite;
74-
}
75-
76-
.ribbon {
77-
background-color: #84BD00;
78-
overflow: hidden;
79-
white-space: nowrap;
80-
/* top left corner */
81-
position: absolute;
82-
left: -50px;
83-
top: 40px;
84-
/* 45 deg ccw rotation */
85-
-webkit-transform: rotate(-45deg);
86-
-moz-transform: rotate(-45deg);
87-
-ms-transform: rotate(-45deg);
88-
-o-transform: rotate(-45deg);
89-
transform: rotate(-45deg);
90-
/* shadow */
91-
-webkit-box-shadow: 0 0 10px #888;
92-
-moz-box-shadow: 0 0 10px #888;
93-
box-shadow: 0 0 10px #888;
94-
}
95-
.ribbon a {
96-
border: 1px solid #ded;
97-
color: #fff;
98-
display: block;
99-
font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
100-
margin: 1px 0;
101-
padding: 10px 50px;
102-
text-align: center;
103-
text-decoration: none;
104-
/* shadow */
105-
text-shadow: 0 0 5px #444;
106-
}
107-
</style>
108-
10912
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
11013
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
11114
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
@@ -117,6 +20,8 @@
11720
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
11821

11922
<script type="text/jsx" src="exportify.js"></script>
23+
24+
<link rel="stylesheet" href="style.css">
12025
</head>
12126

12227
<body>

‎style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
#header {
2+
padding: 40px 15px;
3+
text-align: center;
4+
}
5+
6+
#loginButton {
7+
display: none;
8+
margin-top: 20px;
9+
}
10+
11+
#rateLimitMessage {
12+
display: none;
13+
text-align: center;
14+
}
15+
16+
h1 a { color: black; }
17+
h1 a:hover { color: black; text-decoration: none; }
18+
19+
nav.paginator:nth-child(1) {
20+
margin-top: -74px;
21+
}
22+
23+
table {
24+
float: left;
25+
}
26+
27+
#playlists {
28+
display: none;
29+
}
30+
31+
@keyframes spinner {
32+
to {transform: rotate(360deg);}
33+
}
34+
35+
@-webkit-keyframes spinner {
36+
to {-webkit-transform: rotate(360deg);}
37+
}
38+
39+
.spinner {
40+
min-width: 24px;
41+
min-height: 24px;
42+
}
43+
44+
.spinner:before {
45+
content: 'Loading…';
46+
position: absolute;
47+
top: 240px;
48+
left: 50%;
49+
width: 100px;
50+
height: 100px;
51+
margin-top: -50px;
52+
margin-left: -50px;
53+
}
54+
55+
.spinner:not(:required):before {
56+
content: '';
57+
border-radius: 50%;
58+
border: 4px solid rgba(236, 235, 232, 1);
59+
border-top-color: rgba(130, 130, 130, 1);
60+
animation: spinner 1s linear infinite;
61+
-webkit-animation: spinner 1s linear infinite;
62+
}
63+
64+
.ribbon {
65+
background-color: #84BD00;
66+
overflow: hidden;
67+
white-space: nowrap;
68+
/* top left corner */
69+
position: absolute;
70+
left: -50px;
71+
top: 40px;
72+
/* 45 deg ccw rotation */
73+
-webkit-transform: rotate(-45deg);
74+
-moz-transform: rotate(-45deg);
75+
-ms-transform: rotate(-45deg);
76+
-o-transform: rotate(-45deg);
77+
transform: rotate(-45deg);
78+
/* shadow */
79+
-webkit-box-shadow: 0 0 10px #888;
80+
-moz-box-shadow: 0 0 10px #888;
81+
box-shadow: 0 0 10px #888;
82+
}
83+
84+
.ribbon a {
85+
border: 1px solid #ded;
86+
color: #fff;
87+
display: block;
88+
font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
89+
margin: 1px 0;
90+
padding: 10px 50px;
91+
text-align: center;
92+
text-decoration: none;
93+
/* shadow */
94+
text-shadow: 0 0 5px #444;
95+
}

0 commit comments

Comments
 (0)