Skip to content

Commit 33cf34b

Browse files
SunildharajiyaSunildharajiya
authored
Update console.m.scss
1 parent c49f403 commit 33cf34b

1 file changed

Lines changed: 203 additions & 76 deletions

File tree

‎src/styles/console.m.scss‎

Lines changed: 203 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,256 @@
1+
/* ============================
2+
ACODEX – Modern Console UI v2
3+
Premium Dark + Neon Theme
4+
============================ */
5+
6+
/* Global Reset */
7+
* {
8+
box-sizing: border-box;
9+
-webkit-tap-highlight-color: transparent;
10+
}
11+
12+
/* ------------------------------
13+
TOGGLER BUTTON
14+
------------------------------ */
115
c-toggler {
16+
position: fixed;
17+
top: 15px;
18+
left: 15px;
19+
height: 38px;
20+
width: 38px;
21+
border-radius: 50%;
22+
background: rgba(255,255,255,0.12);
23+
backdrop-filter: blur(8px);
24+
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
25+
border: 1px solid rgba(255,255,255,0.15);
26+
227
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAE9JREFUOMtjYBh0gBHO+k+cSkYilcPVMpHqpIHRwIgUFERp+I8SekQ5CY8WXH7AqYWJyGglqIERV3QykaYcV7DiSSwsODw8yJIGdTPQIAQAg9gKJl7UINwAAAAASUVORK5CYII=);
28+
background-size: 22px;
329
background-position: center;
430
background-repeat: no-repeat;
5-
background-size: 24px;
6-
position: fixed;
7-
top: 0;
8-
left: 0;
9-
height: 30px;
10-
width: 30px;
11-
background-color: #fff;
12-
transform-origin: center;
13-
border-radius: 50%;
14-
box-shadow: -2px 2px 8px rgba(0, 0, 0, .4);
31+
32+
transition: 0.25s ease;
1533
z-index: 99999;
16-
opacity: 0.5;
34+
cursor: pointer;
1735
}
1836

19-
c-object {
20-
color: #9999ff;
21-
text-decoration: underline;
37+
c-toggler:hover {
38+
background: rgba(255,255,255,0.22);
39+
transform: scale(1.07);
2240
}
2341

2442
c-toggler:active {
25-
box-shadow: -1px 1px 4px rgba(0, 0, 0, .4)
26-
}
27-
28-
c-line {
29-
display: block;
43+
transform: scale(0.95);
44+
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
3045
}
3146

47+
/* ------------------------------
48+
CONSOLE BASE
49+
------------------------------ */
3250
c-console {
33-
box-sizing: border-box;
34-
overflow-y: auto;
3551
position: fixed;
36-
top: 0;
37-
left: 0;
52+
top: 0; left: 0;
3853
height: 100vh;
3954
width: 100vw;
40-
background-color: #313131;
55+
56+
background: #0d0d0f;
57+
color: #e8e8e8;
58+
59+
overflow-y: auto;
60+
font-family: "Roboto Mono", monospace;
61+
62+
padding-bottom: 80px;
4163
z-index: 99998;
42-
color: #eeeeee;
43-
font-family: "Roboto", sans-serif;
64+
65+
animation: fadeInUp 0.25s ease;
4466
}
4567

4668
c-console[title] {
47-
padding-top: 65px;
48-
animation: --page-transition .1s ease 1;
69+
padding-top: 70px;
4970
}
5071

51-
c-console br:last-of-type {
52-
display: none;
53-
}
72+
/* Title Bar */
73+
c-console[title]::before {
74+
content: attr(title);
75+
position: fixed;
76+
top: 0;
77+
left: 0;
5478

55-
c-console textarea {
56-
color: white;
57-
caret-color: currentColor !important;
58-
background-color: inherit;
79+
width: 100%;
80+
height: 48px;
81+
82+
background: rgba(25,25,28,0.9);
83+
backdrop-filter: blur(10px);
84+
85+
display: flex;
86+
align-items: center;
87+
justify-content: center;
88+
89+
font-size: 1.1rem;
90+
font-weight: 700;
91+
letter-spacing: 0.5px;
92+
93+
border-bottom: 1px solid rgba(255,255,255,0.12);
94+
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
95+
96+
z-index: 100000;
5997
}
6098

99+
/* ------------------------------
100+
INPUT FIELD
101+
------------------------------ */
61102
c-input {
62103
display: flex;
63104
width: 100%;
64-
height: fit-content;
105+
padding: 6px 12px;
106+
font-size: 0.95rem;
65107
}
66108

67109
c-input::before {
68-
content: '>>';
69-
margin: 0 5px;
70-
height: 100%;
110+
content: ">>";
111+
margin-right: 10px;
112+
color: #7d5fff;
71113
}
72114

73115
#__c-input {
74116
width: 100%;
117+
background: transparent;
75118
border: none;
76119
resize: none;
77-
height: 200px;
78-
position: relative;
79-
background-color: transparent;
80-
overflow: visible;
120+
color: #e2e2e2;
121+
font-size: 0.95rem;
122+
caret-color: #7d5fff;
81123
}
82124

83125
#__c-input:focus {
84126
outline: none;
85127
}
86128

87-
c-console[title]::before {
88-
position: fixed;
89-
top: 0;
90-
left: 0;
91-
width: 100vw;
92-
background-color: inherit;
93-
z-index: 999999;
94-
content: attr(title);
95-
display: flex;
96-
height: 44px;
97-
align-items: center;
98-
justify-content: center;
99-
font-family: Verdana, Geneva, Tahoma, sans-serif;
100-
font-weight: 900;
101-
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
102-
margin-bottom: 10px;
103-
color: white;
104-
font-size: medium;
105-
}
106-
129+
/* ------------------------------
130+
LOG MESSAGE BLOCKS
131+
------------------------------ */
107132
c-message {
108133
position: relative;
109-
display: flex;
110-
border-bottom: solid 1px rgba(204, 204, 204, 0.4);
111-
margin-bottom: 35px;
112-
font-size: .9rem;
113-
flex-wrap: wrap;
134+
display: block;
135+
padding: 14px 12px;
136+
margin: 8px 0;
137+
138+
border-left: 3px solid rgba(255,255,255,0.1);
139+
background: rgba(255,255,255,0.04);
140+
backdrop-filter: blur(5px);
141+
142+
border-radius: 6px;
143+
font-size: 0.92rem;
144+
145+
animation: fadeIn 0.25s ease;
114146
}
115147

148+
/* ERROR */
149+
c-message[log-level="error"] {
150+
border-left-color: #ff4e4e;
151+
background: rgba(255, 40, 40, 0.14);
152+
}
153+
154+
/* WARNING */
155+
c-message[log-level="warn"] {
156+
border-left-color: #f1c40f;
157+
background: rgba(241, 196, 15, 0.14);
158+
}
159+
160+
/* ------------------------------
161+
CODE BLOCKS
162+
------------------------------ */
116163
c-code {
117-
position: relative;
118-
color: rgb(214, 211, 211);
119-
font-size: 1em;
120-
font-family: 'Courier New', Courier, monospace;
164+
display: block;
165+
padding: 10px;
166+
margin-top: 5px;
167+
168+
font-family: "JetBrains Mono", monospace;
169+
font-size: 0.9rem;
170+
171+
background: #17171a;
172+
border-radius: 6px;
121173
overflow-x: auto;
122-
white-space: pre;
123-
margin-bottom: 0px;
124-
border: 'none';
174+
175+
color: #cfcfcf;
176+
position: relative;
177+
}
178+
179+
c-code::before {
180+
content: ">>";
181+
color: #7d5fff;
182+
margin-right: 6px;
183+
font-weight: bold;
125184
}
126185

186+
c-code::after {
187+
content: "use";
188+
position: absolute;
189+
top: 6px;
190+
right: 8px;
191+
192+
padding: 1px 6px;
193+
border-radius: 4px;
194+
font-size: 0.65rem;
195+
196+
background: #7d5fff;
197+
color: white;
198+
}
199+
200+
/* ------------------------------
201+
VALUE COLORS
202+
------------------------------ */
203+
c-text.__c-boolean { color: #e056fd; }
204+
c-text.__c-number { color: #19baff; }
205+
c-text.__c-symbol { color: #fd9644; }
206+
c-text.__c-object { color: #badc58; }
207+
c-text.__c-undefined { color: #f0932b; }
208+
c-text.__c-string { color: #6ab04c; }
209+
210+
/* Functions */
211+
c-text.__c-function {
212+
color: #c7ecee;
213+
}
214+
c-text.__c-function::before {
215+
content: "ƒ";
216+
margin-right: 4px;
217+
color: #7d5fff;
218+
}
219+
220+
/* ------------------------------
221+
TABLE VIEW
222+
------------------------------ */
223+
c-table {
224+
display: table;
225+
width: 100%;
226+
margin: 10px 0;
227+
font-size: 0.9rem;
228+
border: 1px solid rgba(255,255,255,0.12);
229+
}
230+
231+
c-table c-row {
232+
display: table-row;
233+
}
234+
235+
c-table c-cell {
236+
display: table-cell;
237+
padding: 8px 10px;
238+
border-bottom: 1px solid rgba(255,255,255,0.1);
239+
}
240+
241+
/* ------------------------------
242+
ANIMATIONS
243+
------------------------------ */
244+
@keyframes fadeInUp {
245+
0% { opacity: 0; transform: translateY(15px); }
246+
100% { opacity: 1; transform: translateY(0); }
247+
}
248+
249+
@keyframes fadeIn {
250+
0% { opacity: 0; }
251+
100% { opacity: 1; }
252+
}}
253+
127254
c-code::after {
128255
content: 'use';
129256
background-color: #666;
@@ -318,4 +445,4 @@ c-table c-cell:not(:last-child) {
318445
opacity: 1;
319446
transform: translate3d(0, 0, 0)
320447
}
321-
}
448+
}

0 commit comments

Comments
 (0)