Skip to content

Commit 9aaf6f3

Browse files
TCOTCTCOTC
committed
v1.0.0-dev1
1 parent 4690e8c commit 9aaf6f3

File tree

2 files changed

+39241
-805
lines changed

2 files changed

+39241
-805
lines changed

‎index.css‎

Lines changed: 207 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,268 @@
11
/*!*****************************************************************************************************************************************************************************************************************************!*\
22
!*** css ./node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
33
\*****************************************************************************************************************************************************************************************************************************/
4-
.sjosd__custom-tab {
5-
background-color: var(--b3-theme-background);
6-
height: 100%;
7-
width: 100%;
4+
#commonMenu[data-name=PluginSnippets] .b3-menu__items {
85
display: flex;
9-
justify-content: center;
10-
align-items: center;
6+
flex-direction: column;
117
}
12-
.sjosd__custom-dock {
13-
display: flex;
14-
justify-content: center;
15-
align-items: center;
8+
#commonMenu[data-name=PluginSnippets]:not(.b3-menu--fullscreen) .b3-menu__items {
9+
padding: 0 0 0 10px;
1610
}
17-
.sjosd__time {
18-
background: var(--b3-card-info-background);
19-
border-radius: var(--b3-border-radius-b);
20-
padding: 2px 8px;
11+
#commonMenu[data-name=PluginSnippets]:not(.b3-menu--fullscreen) .jcsm-snippets-search {
12+
margin: 0 10px 4px 0;
2113
}
22-
23-
.sjosd-top-container {
24-
user-select: none;
25-
padding-right: 8px;
14+
#commonMenu[data-name=PluginSnippets]:not(.b3-menu--fullscreen) .jcsm-top-container {
15+
padding: 0 16px 0 0;
16+
}
17+
#commonMenu[data-name=PluginSnippets]:not(.b3-menu--fullscreen) .jcsm-snippets-container {
18+
scrollbar-gutter: stable;
19+
}
20+
#commonMenu[data-name=PluginSnippets].b3-menu--fullscreen .jcsm-snippets-search {
21+
margin: 0 5px 4px 5px;
2622
}
27-
.sjosd-top-container button svg {
23+
#commonMenu[data-name=PluginSnippets] button {
24+
margin: 2px;
25+
}
26+
#commonMenu[data-name=PluginSnippets] button svg {
2827
pointer-events: none;
2928
}
30-
.sjosd-top-container .sjosd-tabs {
29+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container {
30+
user-select: none;
31+
padding: 0 6px 0 0;
32+
margin-bottom: 5px;
33+
}
34+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs {
3135
display: flex;
3236
position: relative;
3337
padding: 0 6px;
3438
border-radius: var(--b3-border-radius);
3539
background-color: var(--b3-theme-background);
36-
margin-bottom: 5px;
3740
}
38-
.sjosd-top-container .sjosd-tabs * {
41+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs input[type=radio] {
42+
display: none;
43+
}
44+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs input[type=radio]:checked + .jcsm-tab .jcsm-tab-text {
45+
color: var(--b3-theme-primary);
46+
}
47+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs input[type=radio]:checked + .jcsm-tab .jcsm-tab-count {
48+
background-color: var(--b3-theme-primary);
49+
color: var(--b3-theme-background);
50+
}
51+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs input[type=radio][id=jcsm-radio-css]:checked ~ .jcsm-glider {
52+
transform: translateX(0);
53+
}
54+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs input[type=radio][id=jcsm-radio-js]:checked ~ .jcsm-glider {
55+
transform: translateX(100%);
56+
}
57+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs * {
3958
z-index: 2;
4059
}
41-
.sjosd-top-container input[type=radio] {
42-
display: none;
60+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs .jcsm-glider {
61+
position: absolute;
62+
display: flex;
63+
top: 4px;
64+
height: 22px;
65+
width: 60px;
66+
background-color: var(--b3-menu-background);
67+
z-index: 1;
68+
border-radius: var(--b3-border-radius);
69+
transition: 0.25s ease-out;
4370
}
44-
.sjosd-top-container .sjosd-tab {
71+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs .jcsm-tab {
4572
display: flex;
4673
align-items: center;
4774
justify-content: center;
4875
height: 30px;
4976
width: 60px;
50-
border-radius: var(--b3-border-radius-b);
5177
cursor: pointer;
52-
transition: color 0.15s ease-in;
5378
}
54-
.sjosd-top-container .sjosd-tab-count {
79+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs .jcsm-tab * {
80+
pointer-events: none;
81+
}
82+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container .jcsm-tabs .jcsm-tab .jcsm-tab-count {
5583
display: flex;
5684
align-items: center;
5785
justify-content: center;
5886
font-size: 0.8em;
59-
min-width: 1.4em;
60-
height: 1.4em;
87+
min-width: 1.25em;
88+
height: 1.25em;
6189
margin-left: 0.4em;
6290
border-radius: var(--b3-border-radius);
6391
background-color: var(--b3-theme-surface);
6492
transition: 0.15s ease-in;
6593
}
66-
.sjosd-top-container label * {
67-
pointer-events: none;
94+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container[data-type=css] ~ .jcsm-snippets-container .jcsm-snippet-item:is([data-type=js], [data-snippet-type=js]) {
95+
display: none !important;
6896
}
69-
.sjosd-top-container input[type=radio]:checked + label .sjosd-tab-text {
70-
color: var(--b3-theme-primary);
97+
#commonMenu[data-name=PluginSnippets] .jcsm-top-container[data-type=js] ~ .jcsm-snippets-container .jcsm-snippet-item:is([data-type=css], [data-snippet-type=css]) {
98+
display: none !important;
7199
}
72-
.sjosd-top-container input[type=radio]:checked + label > .sjosd-tab-count {
73-
background-color: var(--b3-theme-primary);
74-
color: #fff;
100+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container {
101+
overflow: auto;
75102
}
76-
.sjosd-top-container input[id=sjosd-radio-css]:checked ~ .sjosd-glider {
77-
transform: translateX(0);
103+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item {
104+
padding: 0 6px;
78105
}
79-
.sjosd-top-container input[id=sjosd-radio-js]:checked ~ .sjosd-glider {
80-
transform: translateX(100%);
106+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item .jcsm-snippet-name:empty::before {
107+
content: attr(placeholder);
108+
color: var(--b3-theme-on-surface-light);
81109
}
82-
.sjosd-top-container .sjosd-glider {
83-
position: absolute;
84-
display: flex;
85-
top: 4px;
86-
height: 22px;
87-
width: 60px;
88-
left: 6px;
89-
background-color: var(--b3-menu-background);
90-
z-index: 1;
91-
border-radius: var(--b3-border-radius);
92-
transition: 0.25s ease-out;
110+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item .jcsm-snippet-name::-webkit-scrollbar {
111+
height: 0;
93112
}
94-
@media (max-width: 700px) {
95-
.sjosd-top-container .sjosd-tabs {
96-
transform: scale(0.6);
97-
}
113+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item .block__icon {
114+
display: none;
98115
}
99-
100-
.sjosd-snippet-item button svg {
101-
pointer-events: none;
116+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item:hover .block__icon,
117+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item .jcsm-active {
118+
display: flex;
102119
}
103-
.sjosd-snippet-item .sjosd-snippet-name:empty::before {
104-
content: attr(placeholder);
105-
color: var(--b3-theme-on-surface-light);
120+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item[data-type=new] {
121+
align-items: center;
122+
justify-content: center;
106123
}
107-
.sjosd-snippet-item .sjosd-snippet-name::-webkit-scrollbar {
108-
height: 0;
124+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item[data-type=css] ~ [data-type=new][data-snippet-type=css] {
125+
display: none;
126+
}
127+
#commonMenu[data-name=PluginSnippets] .jcsm-snippets-container .jcsm-snippet-item[data-type=js] ~ [data-type=new][data-snippet-type=js] {
128+
display: none;
109129
}
110130

111-
.sjosd-dialog {
131+
.jcsm-dialog {
112132
flex: 1;
113133
display: flex;
114134
flex-direction: column;
135+
height: 100%;
115136
}
116-
.sjosd-dialog button svg {
137+
.jcsm-dialog button {
138+
margin: 2px;
139+
}
140+
.jcsm-dialog button svg {
117141
pointer-events: none;
118142
}
119-
.sjosd-dialog .sjosd-dialog-header {
143+
.jcsm-dialog .jcsm-dialog-header {
120144
display: block;
121145
height: 24px;
122146
flex-shrink: 0;
123147
cursor: grab;
124148
}
125-
.sjosd-dialog .sjosd-dialog-container {
149+
.jcsm-dialog .jcsm-dialog-container {
126150
padding: 0 24px;
127151
display: flex;
128152
flex-direction: column;
153+
flex: 1;
154+
min-height: 0;
155+
overflow: hidden;
156+
}
157+
.jcsm-dialog .b3-dialog__action button.fn__none + .fn__space {
158+
display: none !important;
159+
}
160+
161+
div[data-key=jcsm-setting-dialog][data-mobile=true] .b3-dialog__content {
162+
padding: 4px;
163+
}
164+
div[data-key=jcsm-setting-dialog][data-mobile=false] .b3-dialog__content {
165+
padding: 16px 14px 16px 24px;
166+
scrollbar-gutter: stable;
167+
}
168+
169+
.b3-dialog--open[data-key*=jcsm-] .b3-dialog__close use {
170+
pointer-events: none;
171+
}
172+
173+
.b3-dialog--open[data-key=jcsm-snippet-dialog] .jcsm-dialog-content {
174+
overflow: hidden;
175+
height: 100%;
176+
display: flex;
177+
flex-direction: column;
178+
}
179+
.b3-dialog--open[data-key=jcsm-snippet-dialog] .jcsm-dialog-name {
180+
box-shadow: unset !important;
181+
border: 1px solid var(--b3-border-color);
182+
}
183+
.b3-dialog--open[data-key=jcsm-snippet-dialog] .jcsm-dialog-content {
184+
border: 1px solid var(--b3-border-color);
185+
border-radius: var(--b3-border-radius);
186+
font-family: var(--b3-font-family-code);
187+
flex: 1;
188+
overflow: hidden;
189+
}
190+
.b3-dialog--open[data-key=jcsm-snippet-dialog] .jcsm-dialog-content .cm-editor {
191+
height: 100%;
192+
}
193+
.b3-dialog--open[data-key=jcsm-snippet-dialog] .jcsm-dialog-content .cm-editor .cm-scroller {
194+
font-family: var(--b3-font-family-code);
195+
}
196+
.b3-dialog--open[data-key=jcsm-snippet-dialog] .jcsm-dialog-content .cm-editor .cm-gutters {
197+
background-color: var(--b3-theme-surface);
198+
color: var(--b3-theme-on-surface);
199+
border-right: 1px solid var(--b3-border-color);
200+
}
201+
.b3-dialog--open[data-key=jcsm-snippet-dialog] .jcsm-dialog-content .cm-editor .cm-foldGutter .cm-gutterElement {
202+
padding: 0 2px;
203+
}
204+
.b3-dialog--open[data-key=jcsm-snippet-dialog] .jcsm-dialog-content .cm-editor .cm-placeholder {
205+
color: var(--b3-theme-on-surface-light);
206+
}
207+
208+
:root {
209+
--jcsm-breathing-color: color-mix(in srgb, var(--b3-theme-primary) 20%, transparent);
210+
}
211+
212+
.jcsm-breathing {
213+
animation: breathing 3s ease-in-out infinite;
214+
}
215+
216+
@keyframes breathing {
217+
0% {
218+
background-color: transparent;
219+
}
220+
50% {
221+
background-color: var(--jcsm-breathing-color);
222+
}
223+
100% {
224+
background-color: transparent;
225+
}
226+
}
227+
.jcsm-active {
228+
background-color: var(--jcsm-breathing-color);
229+
}
230+
231+
.jcsm-switch {
232+
background-color: var(--b3-switch-background);
233+
border-color: var(--b3-switch-border);
234+
}
235+
.jcsm-switch:checked {
236+
background-color: var(--b3-switch-checked-background);
237+
border-color: transparent;
238+
}
239+
240+
.jcsm-switch.jcsm-input-breathing--once:not(:checked) {
241+
animation: input-breathing 0.7s ease-in-out 1;
242+
}
243+
.jcsm-switch.jcsm-input-breathing--once:not(:checked)::after {
244+
animation: input-breathing-after 0.7s ease-in-out 1;
245+
}
246+
247+
@keyframes input-breathing {
248+
0% {
249+
background-color: var(--b3-switch-background);
250+
}
251+
50% {
252+
background-color: var(--b3-switch-checked-background);
253+
}
254+
100% {
255+
background-color: var(--b3-switch-background);
256+
}
257+
}
258+
@keyframes input-breathing-after {
259+
0% {
260+
background-color: var(--b3-switch-border);
261+
}
262+
50% {
263+
background-color: var(--b3-switch-checked);
264+
}
265+
100% {
266+
background-color: var(--b3-switch-border);
267+
}
129268
}

0 commit comments

Comments
 (0)