Hugging Face's logo

Spaces:
jamescalam
/
ask-youtube
Runtime error

App Files Community
1
jamescalam commited on
Commit
ae84b7b
•
1 Parent(s): a92dc54

Create styles.css

Browse files
Files changed (1) hide show
  1. styles.css +160 -0
styles.css ADDED
@@ -0,0 +1,160 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url("https://fonts.googleapis.com/css?family=Arimo:400,700");
2
+
3
+ section.main[tabindex="0"] {
4
+ overflow: scroll;
5
+ }
6
+
7
+ body {
8
+ height: 100%;
9
+ width: 100%;
10
+ background: #e9e9e9;
11
+ font-family: 'Arimo', Arial, sans-serif;
12
+ font-weight: 400;
13
+ font-size: 14px;
14
+ color: #010b26;
15
+ }
16
+
17
+ * {
18
+ -webkit-transition: 300ms;
19
+ transition: 300ms;
20
+ }
21
+
22
+ .intro {
23
+ text-align: center;
24
+ }
25
+
26
+ ul {
27
+ list-style-type: none;
28
+ }
29
+
30
+ h1,
31
+ h2,
32
+ h3,
33
+ h4,
34
+ h5,
35
+ p {
36
+ font-weight: 400;
37
+ }
38
+
39
+ a {
40
+ text-decoration: none;
41
+ color: inherit;
42
+ }
43
+
44
+ a:hover {
45
+ color: #6ABCEA;
46
+ }
47
+
48
+ .container {
49
+ display: -webkit-box;
50
+ display: -ms-flexbox;
51
+ display: flex;
52
+ -ms-flex-wrap: wrap;
53
+ flex-wrap: wrap;
54
+ max-width: 100%;
55
+ margin-top: 10vh;
56
+ margin-left: auto;
57
+ margin-right: auto;
58
+ -webkit-box-pack: center;
59
+ -ms-flex-pack: center;
60
+ justify-content: center;
61
+ }
62
+
63
+ .movie-card {
64
+ background: #ffffff;
65
+ box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
66
+ width: 100%;
67
+ max-width: 315px;
68
+ margin: 2em;
69
+ border-radius: 10px;
70
+ display: inline-block;
71
+ }
72
+
73
+ .movie-header {
74
+ padding: 0;
75
+ margin: 0;
76
+ height: 367px;
77
+ width: 100%;
78
+ display: block;
79
+ border-top-left-radius: 10px;
80
+ border-top-right-radius: 10px;
81
+ }
82
+
83
+ .header-icon-container {
84
+ position: relative;
85
+ }
86
+
87
+ .header-icon {
88
+ width: 100%;
89
+ height: 367px;
90
+ line-height: 367px;
91
+ text-align: center;
92
+ vertical-align: middle;
93
+ margin: 0 auto;
94
+ color: #ffffff;
95
+ font-size: 54px;
96
+ text-shadow: 0px 0px 20px #6abcea, 0px 5px 20px #6ABCEA;
97
+ opacity: .85;
98
+ }
99
+
100
+ .header-icon:hover {
101
+ background: rgba(0, 0, 0, 0.15);
102
+ font-size: 74px;
103
+ text-shadow: 0px 0px 20px #6abcea, 0px 5px 30px #6ABCEA;
104
+ border-top-left-radius: 10px;
105
+ border-top-right-radius: 10px;
106
+ opacity: 1;
107
+ }
108
+
109
+ .movie-card:hover {
110
+ -webkit-transform: scale(1.03);
111
+ transform: scale(1.03);
112
+ box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
113
+ }
114
+
115
+ .movie-content {
116
+ padding: 18px 18px 24px 18px;
117
+ margin: 0;
118
+ }
119
+
120
+ .movie-content-header,
121
+ .movie-info {
122
+ display: table;
123
+ width: 100%;
124
+ }
125
+
126
+ .movie-title {
127
+ font-size: 24px;
128
+ margin: 0;
129
+ display: table-cell;
130
+ }
131
+
132
+ .movie-info {
133
+ margin-top: 1em;
134
+ }
135
+
136
+ .info-section {
137
+ display: table-cell;
138
+ text-transform: uppercase;
139
+ text-align: center;
140
+ }
141
+
142
+ .info-section:first-of-type {
143
+ text-align: left;
144
+ }
145
+
146
+ .info-section:last-of-type {
147
+ text-align: right;
148
+ }
149
+
150
+ .info-section label {
151
+ display: block;
152
+ color: rgba(0, 0, 0, 0.5);
153
+ margin-bottom: .5em;
154
+ font-size: 9px;
155
+ }
156
+
157
+ .info-section span {
158
+ font-weight: 700;
159
+ font-size: 11px;
160
+ }