Hugging Face's logo

Spaces:
akborana4
/
devportal1
Paused

App Files Community
akborana4 commited on
Commit
0d779c6
·
verified ·
1 Parent(s): a778752

Create static/css/editor.css

Browse files
Files changed (1) hide show
  1. static/css/editor.css +134 -0
static/css/editor.css ADDED
@@ -0,0 +1,134 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* static/css/editor.css */
2
+ .editor-layout {
3
+ display: flex;
4
+ flex: 1;
5
+ height: calc(100vh - 65px);
6
+ padding: 20px;
7
+ gap: 20px;
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ /* Left: File Explorer */
12
+ .file-explorer {
13
+ width: 250px;
14
+ background: rgba(15, 15, 18, 0.7);
15
+ backdrop-filter: var(--backdrop-blur);
16
+ border: var(--glass-border);
17
+ border-radius: 12px;
18
+ display: flex;
19
+ flex-direction: column;
20
+ overflow: hidden;
21
+ }
22
+
23
+ .explorer-header {
24
+ padding: 15px;
25
+ background: rgba(0, 0, 0, 0.4);
26
+ border-bottom: var(--glass-border);
27
+ font-weight: 600;
28
+ color: var(--text-secondary);
29
+ display: flex;
30
+ justify-content: space-between;
31
+ align-items: center;
32
+ }
33
+
34
+ .file-list {
35
+ flex: 1;
36
+ overflow-y: auto;
37
+ padding: 10px;
38
+ }
39
+
40
+ .file-item {
41
+ padding: 8px 12px;
42
+ color: var(--text-secondary);
43
+ font-size: 13px;
44
+ cursor: pointer;
45
+ border-radius: 6px;
46
+ margin-bottom: 2px;
47
+ display: flex;
48
+ align-items: center;
49
+ gap: 8px;
50
+ transition: 0.2s;
51
+ }
52
+
53
+ .file-item:hover, .file-item.active {
54
+ background: rgba(255, 193, 7, 0.1);
55
+ color: var(--accent-main);
56
+ }
57
+
58
+ /* Center: Code Editor */
59
+ .editor-main {
60
+ flex: 2;
61
+ background: rgba(10, 10, 12, 0.9);
62
+ border: var(--glass-border);
63
+ border-radius: 12px;
64
+ display: flex;
65
+ flex-direction: column;
66
+ overflow: hidden;
67
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
68
+ }
69
+
70
+ .editor-toolbar {
71
+ height: 45px;
72
+ background: rgba(20, 20, 25, 0.8);
73
+ border-bottom: var(--glass-border);
74
+ display: flex;
75
+ align-items: center;
76
+ padding: 0 15px;
77
+ gap: 10px;
78
+ }
79
+
80
+ .filename-input {
81
+ background: rgba(0,0,0,0.5);
82
+ border: 1px solid rgba(255,255,255,0.1);
83
+ color: white;
84
+ padding: 6px 12px;
85
+ border-radius: 4px;
86
+ font-family: var(--font-mono);
87
+ font-size: 13px;
88
+ width: 200px;
89
+ }
90
+
91
+ .editor-btn {
92
+ background: transparent;
93
+ color: var(--text-secondary);
94
+ border: 1px solid rgba(255,255,255,0.1);
95
+ padding: 6px 12px;
96
+ border-radius: 4px;
97
+ cursor: pointer;
98
+ font-size: 12px;
99
+ font-weight: 600;
100
+ transition: 0.2s;
101
+ }
102
+
103
+ .editor-btn:hover {
104
+ background: rgba(255, 255, 255, 0.05);
105
+ color: white;
106
+ }
107
+
108
+ .editor-btn.primary {
109
+ background: rgba(255, 193, 7, 0.1);
110
+ color: var(--accent-main);
111
+ border-color: rgba(255, 193, 7, 0.3);
112
+ }
113
+
114
+ .editor-btn.primary:hover {
115
+ background: var(--accent-main);
116
+ color: black;
117
+ }
118
+
119
+ .editor-btn.ai {
120
+ background: rgba(0, 230, 118, 0.1);
121
+ color: #00e676;
122
+ border-color: rgba(0, 230, 118, 0.3);
123
+ }
124
+
125
+ #ace-editor {
126
+ flex: 1;
127
+ width: 100%;
128
+ }
129
+
130
+ /* Mobile Adjustments */
131
+ @media (max-width: 1024px) {
132
+ .editor-layout { flex-direction: column; }
133
+ .file-explorer { width: 100%; height: 200px; flex: none; }
134
+ }