Hugging Face's logo

Spaces:
fffiloni
/
Pix2Pix-Video
Running on A10G

App Files Community
91
Jam3za12 commited on
Commit
990c0f5
•
1 Parent(s): 966f7da

enhanced version

Browse files
Files changed (1) hide show
  1. style.css +102 -28
style.css CHANGED
@@ -1,48 +1,80 @@
1
- #col-container {max-width: 820px; margin-left: auto; margin-right: auto;}
2
- #duplicate-container{
 
 
 
 
 
 
 
 
 
 
 
3
  display: flex;
4
  justify-content: space-between;
5
  align-items: center;
6
- line-height: 1em;
7
  flex-direction: row-reverse;
8
- font-size:1em;
 
 
 
 
 
9
  }
 
 
10
  a, a:hover, a:visited {
11
- text-decoration-line: underline;
12
  font-weight: 600;
13
  color: #1f2937 !important;
 
 
 
 
 
14
  }
15
 
16
  .dark a, .dark a:hover, .dark a:visited {
17
  color: #f3f4f6 !important;
18
  }
19
 
 
 
 
 
 
20
  .footer {
21
  margin-bottom: 45px;
22
  margin-top: 10px;
23
  text-align: center;
24
  border-bottom: 1px solid #e5e5e5;
 
25
  }
26
 
27
- .footer>p {
28
- font-size: .8rem!important;
29
  display: inline-block;
30
  padding: 0 10px;
31
  transform: translateY(26px);
32
  background: white;
33
  }
 
34
  .dark .footer {
35
  border-color: #303030;
36
  }
37
- .dark .footer>p {
 
38
  background: #0b0f19;
39
  }
40
 
41
  div#may-like-container > p {
42
- font-size: .8em;
43
  margin-bottom: 4px;
44
  }
45
 
 
46
  .animate-spin {
47
  animation: spin 1s linear infinite;
48
  }
@@ -56,38 +88,47 @@ div#may-like-container > p {
56
  }
57
  }
58
 
 
59
  #share-btn-container {
60
- display: flex;
61
- padding-left: 0.5rem !important;
62
- padding-right: 0.5rem !important;
63
- background-color: #000000;
64
- justify-content: center;
65
- align-items: center;
66
- border-radius: 9999px !important;
67
  max-width: 13rem;
 
 
68
  }
69
 
70
  #share-btn-container:hover {
71
- background-color: #060606;
72
  }
73
 
 
74
  #share-btn {
75
- all: initial;
76
  color: #ffffff;
77
- font-weight: 600;
78
- cursor:pointer;
79
- font-family: 'IBM Plex Sans', sans-serif;
80
- margin-left: 0.5rem !important;
81
- padding-top: 0.5rem !important;
82
- padding-bottom: 0.5rem !important;
83
- right:0;
 
 
 
 
 
84
  }
85
 
86
  #share-btn * {
87
  all: unset;
88
  }
89
 
90
- #share-btn-container div:nth-child(-n+2){
 
91
  width: auto !important;
92
  min-height: 0px !important;
93
  }
@@ -97,5 +138,38 @@ div#may-like-container > p {
97
  }
98
 
99
  #share-btn-container.hidden {
100
- display: none!important;
101
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Container Styles */
2
+ #col-container {
3
+ max-width: 820px;
4
+ margin-left: auto;
5
+ margin-right: auto;
6
+ padding: 1rem;
7
+ background-color: #f9f9f9;
8
+ border-radius: 10px;
9
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
10
+ }
11
+
12
+ /* Duplicate Container */
13
+ #duplicate-container {
14
  display: flex;
15
  justify-content: space-between;
16
  align-items: center;
17
+ line-height: 1.5em;
18
  flex-direction: row-reverse;
19
+ font-size: 1em;
20
+ margin-top: 1rem;
21
+ background-color: #ffffff;
22
+ padding: 0.5rem 1rem;
23
+ border-radius: 8px;
24
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
25
  }
26
+
27
+ /* Link Styles */
28
  a, a:hover, a:visited {
29
+ text-decoration: underline;
30
  font-weight: 600;
31
  color: #1f2937 !important;
32
+ transition: color 0.3s ease;
33
+ }
34
+
35
+ a:hover {
36
+ color: #4a90e2 !important;
37
  }
38
 
39
  .dark a, .dark a:hover, .dark a:visited {
40
  color: #f3f4f6 !important;
41
  }
42
 
43
+ .dark a:hover {
44
+ color: #90c2f7 !important;
45
+ }
46
+
47
+ /* Footer Styles */
48
  .footer {
49
  margin-bottom: 45px;
50
  margin-top: 10px;
51
  text-align: center;
52
  border-bottom: 1px solid #e5e5e5;
53
+ padding-bottom: 1rem;
54
  }
55
 
56
+ .footer > p {
57
+ font-size: 0.8rem !important;
58
  display: inline-block;
59
  padding: 0 10px;
60
  transform: translateY(26px);
61
  background: white;
62
  }
63
+
64
  .dark .footer {
65
  border-color: #303030;
66
  }
67
+
68
+ .dark .footer > p {
69
  background: #0b0f19;
70
  }
71
 
72
  div#may-like-container > p {
73
+ font-size: 0.8em;
74
  margin-bottom: 4px;
75
  }
76
 
77
+ /* Animation */
78
  .animate-spin {
79
  animation: spin 1s linear infinite;
80
  }
 
88
  }
89
  }
90
 
91
+ /* Share Button Container */
92
  #share-btn-container {
93
+ display: flex;
94
+ padding: 0.5rem;
95
+ background-color: #000000;
96
+ justify-content: center;
97
+ align-items: center;
98
+ border-radius: 9999px;
 
99
  max-width: 13rem;
100
+ margin: 1rem auto;
101
+ transition: background-color 0.3s ease;
102
  }
103
 
104
  #share-btn-container:hover {
105
+ background-color: #333333;
106
  }
107
 
108
+ /* Share Button */
109
  #share-btn {
110
+ all: initial;
111
  color: #ffffff;
112
+ font-weight: 600;
113
+ cursor: pointer;
114
+ font-family: 'IBM Plex Sans', sans-serif;
115
+ margin-left: 0.5rem;
116
+ padding: 0.5rem 1rem;
117
+ border-radius: 9999px;
118
+ transition: background-color 0.3s ease;
119
+ }
120
+
121
+ #share-btn:focus {
122
+ outline: 2px solid #ffffff;
123
+ outline-offset: 2px;
124
  }
125
 
126
  #share-btn * {
127
  all: unset;
128
  }
129
 
130
+ /* Share Button Icon Adjustments */
131
+ #share-btn-container div:nth-child(-n+2) {
132
  width: auto !important;
133
  min-height: 0px !important;
134
  }
 
138
  }
139
 
140
  #share-btn-container.hidden {
141
+ display: none !important;
142
+ }
143
+
144
+ /* Responsive Design */
145
+ @media (max-width: 600px) {
146
+ #duplicate-container {
147
+ flex-direction: column;
148
+ text-align: center;
149
+ }
150
+
151
+ #share-btn-container {
152
+ max-width: 100%;
153
+ }
154
+ }
155
+
156
+ /* Dark Mode Enhancements */
157
+ .dark #col-container {
158
+ background-color: #1f2937;
159
+ }
160
+
161
+ .dark #duplicate-container {
162
+ background-color: #2d3748;
163
+ }
164
+
165
+ .dark #share-btn-container {
166
+ background-color: #111827;
167
+ }
168
+
169
+ .dark #share-btn-container:hover {
170
+ background-color: #1f2937;
171
+ }
172
+
173
+ .dark .footer > p {
174
+ background: #1f2937;
175
+ }