Hugging Face's logo

Spaces:
atikur-rabbi
/
sdui
Runtime error

App Files Community
1
sdui
File size: 7,135 Bytes 
a6ec9cb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
:root {
    --main-hue: 222;
	--main-saturation: 4%;
	--value-base: 13%;
	--value-step: 5%;
	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.5 * var(--value-step))));
	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1.5 * var(--value-step))));

    --accent-hue: 267;
    --accent-lightness: 36%;
    --accent-lightness-hover: 40%;

    --text-color: #eee;

	--input-text-color: #eee;
    --input-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.7 * var(--value-step))));
	--input-border-color: var(--background-color4);

    --button-text-color: var(--input-text-color);
    --button-color: var(--input-background-color);
    --button-border: none;

    /* other */
    --input-border-radius: 4px;
    --input-border-size: 1px; 
    --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
    --accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
    --accent-text-color: rgb(255, 221, 255);
    --primary-button-border: none;
    --input-switch-padding: 1px;
    --input-height: 18px;
	--tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3 * var(--value-step))));
    --tertiary-color: var(--input-text-color)

    /* Main theme color, hex color fallback. */
    --theme-color-fallback: #673AB6;
    --status-orange: rgb(200, 139, 0);
    --status-green: green;
    --status-red: red;
}

.theme-light {
    --background-color1: white; 
    --background-color2: #ececec;
    --background-color3: #e7e9eb;
    --background-color4: #cccccc;

    --text-color: black;

    --input-text-color: black;
    --input-background-color: #f8f9fa; 
    --input-border-color: grey; 

    --theme-color-fallback: #aaaaaa;

	--tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (16.8 * var(--value-step))));
    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (12 * var(--value-step))));

    --accent-text-color: white;
}

.theme-discord {
    --background-color1: #36393f;
    --background-color2: #2f3136;
    --background-color3: #292b2f;
    --background-color4: #202225;
    
    --accent-hue: 235;
    --accent-lightness: 65%;

    --input-border-size: 2px; 
    --input-background-color: #202225; 
    --input-border-color: var(--input-background-color); 

    --theme-color-fallback: #202225;

    --tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3.5 * var(--value-step))));
    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (4.5 * var(--value-step))));
    --accent-text-color: white;
}

.theme-cool-blue {
    --main-hue: 222;
	--main-saturation: 18%;
	--value-base: 18%;
	--value-step: 3%;
	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));

    --input-background-color: var(--background-color3);

    --accent-hue: 212;

    --theme-color-fallback: #0056b8;

    --tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3.5 * var(--value-step))));
    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (4.5 * var(--value-step))));
    --accent-text-color: #f7fbff;
}


.theme-blurple {
    --main-hue: 235;
	--main-saturation: 18%;
	--value-base: 16%;
	--value-step: 3%;
	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));

    --input-background-color: var(--background-color3);

    --theme-color-fallback: #5300b8;

    --tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3.5 * var(--value-step))));
    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (4.5 * var(--value-step))));
}

.theme-super-dark {
    --main-hue: 222;
	--main-saturation: 18%;
	--value-base: 5%;
	--value-step: 5%;
	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1.4 * var(--value-step))));

    --input-background-color: var(--background-color3);
    --input-border-size: 0px;

    --theme-color-fallback: #000000;
}

.theme-wild {
    --main-hue: 128;
	--main-saturation: 18%;
	--value-base: 20%;
	--value-step: 5%;
	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
    
    --accent-hue: 212;
    
    --input-border-size: 1px; 
    --input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
    --input-text-color: #FF0000;
    --input-border-color: #005E05;

    --tertiary-color: white;
    --accent-text-color: #f7fbff;
}


.theme-gnomie {
    --background-color1: #242424;
    --background-color2: #353535;
    --background-color3: #494949;
    --background-color4: #000000;
    
    --accent-hue: 213;
    --accent-lightness: 55%;
    --accent-color: #2168bf;

    --input-border-radius: 6px;
    --input-text-color: #ffffff;
    --input-background-color: #2a2a2a; 
    --input-border-size: 0px; 
    --input-border-color: var(--input-background-color); 

    --theme-color-fallback: #2168bf;
}

.theme-gnomie .panel-box {
    border: none;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}