Skip to content

Commit f0ccc3d

Browse files
pss-aileenpss-aileen
committed
💕 FEAT: CSS整理 次回、ダークモード対応
1 parent d274f4b commit f0ccc3d

File tree

4 files changed

+118
-112
lines changed

4 files changed

+118
-112
lines changed

‎dist/css/style.css‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -681,9 +681,13 @@ input[type="number"]::-webkit-inner-spin-button {
681681
position: fixed;
682682
bottom: 0.75rem;
683683
right: 0.75rem;
684+
cursor: pointer;
685+
user-select: none;
684686
font-size: 1.875rem;
685687
line-height: 2.25rem;
686-
cursor: pointer;
688+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
689+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
690+
transition-duration: 150ms;
687691
}
688692

689693
.btn-mode:hover {
@@ -695,13 +699,6 @@ input[type="number"]::-webkit-inner-spin-button {
695699
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
696700
}
697701

698-
.btn-mode {
699-
user-select: none;
700-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
701-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
702-
transition-duration: 150ms;
703-
}
704-
705702
.wrapper {
706703
margin-left: auto;
707704
margin-right: auto;
@@ -730,6 +727,7 @@ input[type="number"]::-webkit-inner-spin-button {
730727
.btn-reset {
731728
display: block;
732729
width: 25%;
730+
user-select: none;
733731
border-radius: 0.375rem;
734732
border-width: 2px;
735733
border-style: solid;
@@ -758,10 +756,6 @@ input[type="number"]::-webkit-inner-spin-button {
758756
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
759757
}
760758

761-
.btn-reset {
762-
user-select: none;
763-
}
764-
765759
.form-wrapper {
766760
margin-top: 2rem;
767761

@@ -935,6 +929,10 @@ input[type="number"]::-webkit-inner-spin-button {
935929
width: 100%;
936930
}
937931

932+
.button {
933+
user-select: none;
934+
}
935+
938936
.button {
939937
border-radius: 0.375rem;
940938
}
@@ -990,10 +988,6 @@ input[type="number"]::-webkit-inner-spin-button {
990988
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
991989
}
992990

993-
.button {
994-
user-select: none;
995-
}
996-
997991
.button--pink {
998992
--tw-bg-opacity: 1;
999993
background-color: rgb(219 39 119 / var(--tw-bg-opacity));

‎dist/js/main.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,34 @@
201201
}
202202
}
203203

204+
class Reset {
205+
constructor() {
206+
}
207+
208+
setBlank() {
209+
document.getElementById("subject").value = "";
210+
document.getElementById("comment").value = "";
211+
document.getElementById("issue").value = "";
212+
document.getElementById("message-output").value = "🧙🪄";
213+
}
214+
}
215+
216+
class Copy {
217+
constructor() {
218+
219+
}
220+
221+
setClipboard() {
222+
const text = document.getElementById("message-output").value;
223+
navigator.clipboard.writeText(text);
224+
copyBtn.textContent = "CLIPED!";
225+
setTimeout(() => {
226+
copyBtn.textContent = "COPY";
227+
},
228+
1000);
229+
}
230+
}
231+
204232
const url = "./data/data.json";
205233
const jsonData = new JsonData(url);
206234

@@ -243,4 +271,22 @@
243271
commitMessage.setMessage();
244272
});
245273

274+
const btnReset = document.getElementById("btn-reset");
275+
276+
btnReset.addEventListener("click", (e) => {
277+
(e).preventDefault();
278+
const reset = new Reset();
279+
reset.setBlank();
280+
});
281+
282+
const copyBtn = document.getElementById("btn-copy");
283+
284+
copyBtn.addEventListener("click", (e) => {
285+
e.preventDefault();
286+
const copy = new Copy();
287+
copy.setClipboard();
288+
});
289+
290+
291+
246292
} // end

‎src/css/style.css‎

Lines changed: 16 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -10,151 +10,71 @@ input[type="number"]::-webkit-inner-spin-button {
1010
}
1111

1212
.body {
13-
@apply font-mono;
14-
@apply text-gray-700;
15-
@apply transition;
13+
@apply font-mono text-gray-700 transition;
1614
}
1715

1816
.btn-mode {
19-
@apply fixed;
20-
@apply bottom-3;
21-
@apply right-3;
22-
@apply text-3xl;
23-
@apply cursor-pointer;
24-
@apply hover:opacity-70;
25-
@apply active:translate-y-0.5;
26-
@apply select-none;
27-
@apply transition;
17+
@apply fixed bottom-3 right-3 text-3xl cursor-pointer hover:opacity-70 active:translate-y-0.5 select-none transition;
2818
}
2919

3020
.wrapper {
31-
@apply mx-auto;
32-
@apply mb-10;
33-
@apply mt-10;
34-
@apply max-w-xl;
35-
@apply px-5;
21+
@apply mx-auto mb-10 mt-10 max-w-xl px-5;
3622
}
3723

3824
.site-title {
39-
@apply text-3xl;
40-
@apply font-bold;
41-
@apply text-pink-600;
25+
@apply text-3xl font-bold text-pink-600;
4226
}
4327

4428
.header {
45-
@apply flex;
46-
@apply items-center;
47-
@apply justify-between;
48-
@apply gap-4;
29+
@apply flex items-center justify-between gap-4;
4930
}
5031

5132
.btn-reset {
52-
@apply block;
53-
@apply w-1/4;
54-
@apply rounded-md;
55-
@apply border-2;
56-
@apply border-solid;
57-
@apply border-gray-300;
58-
@apply bg-gray-100;
59-
@apply px-1;
60-
@apply py-1;
61-
@apply text-lg;
62-
@apply tracking-widest;
63-
@apply transition;
64-
@apply hover:opacity-70;
65-
@apply active:translate-y-0.5;
66-
@apply select-none;
33+
@apply block w-1/4 rounded-md border-2 border-solid border-gray-300 bg-gray-100 px-1 py-1 text-lg tracking-widest transition hover:opacity-70 active:translate-y-0.5 select-none;
6734
}
6835

6936
.form-wrapper {
7037
@apply mt-8;
7138

7239
label {
73-
@apply mt-5;
74-
@apply block;
40+
@apply mt-5 block;
7541
}
7642

7743
.item-title {
78-
@apply text-lg;
79-
@apply font-bold;
44+
@apply text-lg font-bold;
8045
}
8146

8247
input,
8348
select {
84-
@apply mt-2;
85-
@apply block;
86-
@apply w-full;
87-
@apply rounded-md;
88-
@apply border-2;
89-
@apply border-solid;
90-
@apply px-2;
91-
@apply py-1;
49+
@apply mt-2 block w-full rounded-md border-2 border-solid px-2 py-1;
9250
}
9351

9452
.input-textarea {
95-
@apply mt-2;
96-
@apply block;
97-
@apply w-full;
98-
@apply resize-none;
99-
@apply rounded-md;
100-
@apply border-2;
101-
@apply border-solid;
102-
@apply px-2;
103-
@apply py-1;
53+
@apply mt-2 block w-full resize-none rounded-md border-2 border-solid px-2 py-1;
10454
}
10555

10656
.output-textarea {
107-
@apply mt-2;
108-
@apply block;
109-
@apply w-full;
110-
@apply resize-none;
111-
@apply rounded-md;
112-
@apply border-2;
113-
@apply border-solid;
114-
@apply bg-gray-100;
115-
@apply px-2;
116-
@apply py-1;
57+
@apply mt-2 block w-full resize-none rounded-md border-2 border-solid bg-gray-100 px-2 py-1;
11758
}
11859

11960
.description {
120-
@apply mt-2;
121-
@apply text-sm;
122-
@apply opacity-60;
61+
@apply mt-2 text-sm opacity-60;
12362
}
12463
}
12564

12665
.button-wrapper {
127-
@apply flex;
128-
@apply gap-4;
66+
@apply flex gap-4;
12967

13068
.button {
131-
@apply mt-5;
132-
@apply block;
133-
@apply w-full;
134-
@apply rounded-md;
135-
@apply px-1;
136-
@apply py-2;
137-
@apply text-lg;
138-
@apply tracking-widest;
139-
@apply text-neutral-50;
140-
@apply shadow-lg;
141-
@apply transition;
142-
@apply hover:opacity-70;
143-
@apply active:translate-y-0.5;
144-
@apply active:shadow-md;
145-
@apply select-none;
69+
@apply mt-5 block w-full rounded-md px-1 py-2 text-lg tracking-widest text-neutral-50 shadow-lg transition hover:opacity-70 active:translate-y-0.5 active:shadow-md select-none;
14670
}
14771

14872
.button--pink {
149-
@apply bg-pink-600;
150-
@apply shadow-pink-600/50;
151-
@apply active:shadow-pink-600/50;
73+
@apply bg-pink-600 shadow-pink-600/50 active:shadow-pink-600/50;
15274
}
15375

15476
.button--purple {
155-
@apply bg-purple-600;
156-
@apply shadow-purple-600/50;
157-
@apply active:shadow-purple-600/50;
77+
@apply bg-purple-600 shadow-purple-600/50 active:shadow-purple-600/50;
15878
}
15979
}
16080

‎src/js/main.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,34 @@
201201
}
202202
}
203203

204+
class Reset {
205+
constructor() {
206+
}
207+
208+
setBlank() {
209+
document.getElementById("subject").value = "";
210+
document.getElementById("comment").value = "";
211+
document.getElementById("issue").value = "";
212+
document.getElementById("message-output").value = "🧙🪄";
213+
}
214+
}
215+
216+
class Copy {
217+
constructor() {
218+
219+
}
220+
221+
setClipboard() {
222+
const text = document.getElementById("message-output").value;
223+
navigator.clipboard.writeText(text);
224+
copyBtn.textContent = "CLIPED!";
225+
setTimeout(() => {
226+
copyBtn.textContent = "COPY";
227+
},
228+
1000);
229+
}
230+
}
231+
204232
const url = "./data/data.json";
205233
const jsonData = new JsonData(url);
206234

@@ -243,4 +271,22 @@
243271
commitMessage.setMessage();
244272
});
245273

274+
const btnReset = document.getElementById("btn-reset");
275+
276+
btnReset.addEventListener("click", (e) => {
277+
(e).preventDefault();
278+
const reset = new Reset();
279+
reset.setBlank();
280+
});
281+
282+
const copyBtn = document.getElementById("btn-copy");
283+
284+
copyBtn.addEventListener("click", (e) => {
285+
e.preventDefault();
286+
const copy = new Copy();
287+
copy.setClipboard();
288+
});
289+
290+
291+
246292
} // end

0 commit comments

Comments
 (0)