Hugging Face's logo

Spaces:
eaglelandsonce
/
layered_presentation
Running

App Files Community
eaglelandsonce commited on
Commit
45b05c2
·
verified ·
1 Parent(s): 188df87

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +119 -0
style.css CHANGED
@@ -1,3 +1,122 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  /* Sidebar styling for website tab */
2
  .website-icon {
3
  cursor: pointer;
 
1
+ /* General styling */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+ body {
8
+ font-family: Arial, sans-serif;
9
+ display: flex;
10
+ flex-direction: row;
11
+ min-height: 100vh;
12
+ background-color: #000;
13
+ color: #fff;
14
+ }
15
+
16
+ /* Sidebar styling */
17
+ .sidebar {
18
+ width: 60px;
19
+ background-color: #333;
20
+ color: white;
21
+ display: flex;
22
+ flex-direction: column;
23
+ align-items: center;
24
+ padding: 10px 0;
25
+ gap: 20px;
26
+ }
27
+ .prompt-icon, .video-icon {
28
+ cursor: pointer;
29
+ text-align: center;
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: center;
33
+ gap: 5px;
34
+ }
35
+ .prompt-icon img, .video-icon img {
36
+ width: 36px;
37
+ height: 36px;
38
+ transition: transform 0.2s ease, filter 0.2s ease;
39
+ }
40
+ .prompt-icon img:hover, .video-icon img:hover {
41
+ transform: scale(1.2);
42
+ filter: brightness(1.2);
43
+ }
44
+ .prompt-icon span, .video-icon span {
45
+ font-size: 12px;
46
+ }
47
+
48
+ /* Main content styling */
49
+ .container {
50
+ flex: 1;
51
+ position: relative;
52
+ display: flex;
53
+ flex-direction: column;
54
+ align-items: center;
55
+ justify-content: center;
56
+ }
57
+ .top-bar {
58
+ position: absolute;
59
+ top: 0;
60
+ width: 100%;
61
+ background-color: #444;
62
+ color: white;
63
+ text-align: center;
64
+ padding: 10px;
65
+ z-index: 10;
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: space-between;
69
+ }
70
+ .nav-buttons button {
71
+ background-color: #666;
72
+ color: white;
73
+ border: none;
74
+ padding: 10px;
75
+ font-size: 18px;
76
+ cursor: pointer;
77
+ }
78
+ .nav-buttons button:hover {
79
+ background-color: #888;
80
+ }
81
+ .content img {
82
+ max-width: 100%;
83
+ max-height: 100%;
84
+ object-fit: contain;
85
+ display: block;
86
+ }
87
+
88
+ /* Video overlay */
89
+ .video-overlay {
90
+ position: fixed;
91
+ top: 0;
92
+ left: 0;
93
+ width: 100%;
94
+ height: 100%;
95
+ background-color: rgba(0, 0, 0, 0.8);
96
+ display: flex;
97
+ justify-content: center;
98
+ align-items: center;
99
+ z-index: 30;
100
+ }
101
+ .video-overlay iframe {
102
+ width: 80%;
103
+ height: 80%;
104
+ border: none;
105
+ }
106
+ .video-overlay .close-button {
107
+ position: absolute;
108
+ top: 20px;
109
+ right: 20px;
110
+ font-size: 24px;
111
+ color: white;
112
+ cursor: pointer;
113
+ }
114
+ .video-overlay .close-button:hover {
115
+ color: red;
116
+ }
117
+
118
+
119
+
120
  /* Sidebar styling for website tab */
121
  .website-icon {
122
  cursor: pointer;