Hugging Face's logo

Spaces:
matthoffner
/
open-codetree
Paused

App Files Community
open-codetree
File size: 2,272 Bytes 
3c3f089
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: "GT Walsheim Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
  color: white;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: none !important;
}

/* editor settings forms ====================================*/

.editor-sub-settings {
  @apply flex flex-col my-3 w-full lg:w-2/3;
}

.editor-sub-settings > .title {
  @apply text-base;
}

.editor-sub-settings > .description {
  @apply text-gray-400 mb-2;
}

.editor-sub-settings > label {
  @apply mb-2;
}

.editor-label {
  @apply text-xl text-gray-400 mr-4;
}

.editor-select {
  @apply text-gray-200 rounded-sm;
}

.editor-button {
  @apply flex items-center justify-center px-4 rounded transform active:scale-75 transition-all duration-300;
}

/* iframe =========================================== */
.iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.iframe-container iframe {
  background: #ffffff;
  position: relative;
  width: 100%;
  height: 100%;
}

.react-draggable-transparent-selection .iframe-container:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.error-message {
  position: absolute;
  top: 0;
  color: red;
}

/* spinner =============================== */
.loader-spinner {
  border-top-color: #34d399;
  -webkit-animation: spinner 0.7s linear infinite;
  animation: spinner 0.7s linear infinite;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.glassmorphism {
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  background-color: rgba(23, 30, 37, 0.75);
}

.backdrop {
  background: rgba(0, 0, 0, 0.25);
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}