Hugging Face's logo

Spaces:
Shinhati2023
/
Holded_Blog
Running

App Files Community
Shinhati2023 commited on
Commit
313cf07
·
verified ·
1 Parent(s): 50b46c7

Create glass.css

Browse files
Files changed (1) hide show
  1. styles/glass.css +145 -0
styles/glass.css ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* ============================================================
2
+ GLASSGRID — GLASSMORPHISM UTILITY SYSTEM
3
+
4
+ Reusable glass surface classes.
5
+ All visual values come from tokens.
6
+ Structure-free — layout is defined in layout.css.
7
+ ============================================================ */
8
+
9
+ /* ── Base Glass Mixin Pattern ── */
10
+ .glass {
11
+ background: var(--color-glass-fill);
12
+ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
13
+ -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
14
+ border: 1px solid var(--color-glass-border);
15
+ box-shadow: var(--shadow-md);
16
+ }
17
+
18
+ .glass-sm {
19
+ background: var(--color-glass-fill);
20
+ backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturation));
21
+ -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturation));
22
+ border: 1px solid var(--color-glass-border);
23
+ box-shadow: var(--shadow-sm);
24
+ }
25
+
26
+ .glass-md {
27
+ background: var(--color-glass-fill-md);
28
+ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
29
+ -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
30
+ border: 1px solid var(--color-glass-border-md);
31
+ box-shadow: var(--shadow-lg);
32
+ }
33
+
34
+ .glass-lg {
35
+ background: var(--color-glass-fill-lg);
36
+ backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturation));
37
+ -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturation));
38
+ border: 1px solid var(--color-glass-border-md);
39
+ box-shadow: var(--shadow-xl);
40
+ }
41
+
42
+ /* ── Glass with Highlight (top edge) ── */
43
+ .glass-elevated {
44
+ background: var(--color-glass-fill-md);
45
+ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
46
+ -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
47
+ border: 1px solid var(--color-glass-border-md);
48
+ box-shadow: var(--shadow-lg),
49
+ inset 0 1px 0 var(--color-glass-highlight);
50
+ }
51
+
52
+ /* ── Glass Accent Border ── */
53
+ .glass-accent {
54
+ background: var(--color-glass-fill);
55
+ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
56
+ -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
57
+ border: 1px solid var(--color-border-accent);
58
+ box-shadow: var(--shadow-md), var(--shadow-glow);
59
+ }
60
+
61
+ /* ── Gradient Glass ── */
62
+ .glass-gradient {
63
+ background: linear-gradient(
64
+ 135deg,
65
+ var(--color-glass-fill-md),
66
+ var(--color-glass-fill)
67
+ );
68
+ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
69
+ -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
70
+ border: 1px solid var(--color-glass-border);
71
+ box-shadow: var(--shadow-lg);
72
+ }
73
+
74
+ /* ── Navigation Glass ── */
75
+ .glass-nav {
76
+ background: var(--navbar-bg);
77
+ backdrop-filter: blur(var(--navbar-blur)) saturate(var(--glass-saturation));
78
+ -webkit-backdrop-filter: blur(var(--navbar-blur)) saturate(var(--glass-saturation));
79
+ border-bottom: 1px solid var(--color-glass-border);
80
+ }
81
+
82
+ /* ── Glass Bottom Bar ── */
83
+ .glass-bottom {
84
+ background: var(--navbar-bg);
85
+ backdrop-filter: blur(var(--navbar-blur)) saturate(var(--glass-saturation));
86
+ -webkit-backdrop-filter: blur(var(--navbar-blur)) saturate(var(--glass-saturation));
87
+ border-top: 1px solid var(--color-glass-border);
88
+ }
89
+
90
+ /* ── Glass Modal ── */
91
+ .glass-modal {
92
+ background: rgba(10, 10, 20, 0.85);
93
+ backdrop-filter: blur(var(--blur-2xl)) saturate(var(--glass-saturation));
94
+ -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(var(--glass-saturation));
95
+ border: 1px solid var(--color-glass-border-md);
96
+ box-shadow: var(--shadow-xl),
97
+ inset 0 1px 0 var(--color-glass-highlight);
98
+ }
99
+
100
+ /* ── Glass Input ── */
101
+ .glass-input {
102
+ background: var(--color-glass-fill);
103
+ backdrop-filter: blur(var(--blur-sm));
104
+ -webkit-backdrop-filter: blur(var(--blur-sm));
105
+ border: 1px solid var(--color-glass-border);
106
+ transition: border-color var(--duration-fast) var(--ease-out),
107
+ background var(--duration-fast) var(--ease-out),
108
+ box-shadow var(--duration-fast) var(--ease-out);
109
+ }
110
+
111
+ .glass-input:focus {
112
+ background: var(--color-glass-fill-md);
113
+ border-color: var(--color-accent-primary);
114
+ box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
115
+ }
116
+
117
+ .glass-input::placeholder {
118
+ color: var(--color-text-muted);
119
+ }
120
+
121
+ /* ── Radius Helpers ── */
122
+ .r-sm { border-radius: var(--radius-sm); }
123
+ .r-md { border-radius: var(--radius-md); }
124
+ .r-lg { border-radius: var(--radius-lg); }
125
+ .r-xl { border-radius: var(--radius-xl); }
126
+ .r-2xl { border-radius: var(--radius-2xl); }
127
+ .r-full { border-radius: var(--radius-full); }
128
+
129
+ /* ── Glow Helpers ── */
130
+ .glow { box-shadow: var(--shadow-glow); }
131
+ .glow-accent { box-shadow: var(--shadow-glow-accent); }
132
+
133
+ /* ── Gradient Border (using pseudo) ── */
134
+ .gradient-border {
135
+ position: relative;
136
+ }
137
+ .gradient-border::before {
138
+ content: '';
139
+ position: absolute;
140
+ inset: -1px;
141
+ border-radius: inherit;
142
+ background: var(--color-accent-gradient-full);
143
+ z-index: -1;
144
+ opacity: 0.5;
145
+ }