Skip to content

Commit 6286f77

Browse files
xtekkyxtekky
committed
update css and theme picker
1 parent d6d4c20 commit 6286f77

File tree

2 files changed

+88
-75
lines changed

2 files changed

+88
-75
lines changed

‎client/css/style.css‎

Lines changed: 69 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,25 @@
99
--colour-6: #000000;
1010
1111
--accent: #ffffff;
12-
--colour-1: #98989866;
12+
--blur-bg: #98989866;
1313
--blur-border: #00000040;
1414
--user-input: #000000;
1515
--conversations: #000000;
1616
} */
1717

1818
:root {
19-
--colour-1: #000000; /* Background colour behind the chat box area*/
20-
--colour-2: #c8b4b4;
21-
--colour-3: #000000; /* Font colour */
22-
--colour-4: #371595;
23-
--colour-5: #34bd8f;
24-
--colour-6: #d04545;
19+
--colour-1: #000000;
20+
--colour-2: #ccc;
21+
--colour-3: #e4d4ff;
22+
--colour-4: #f0f0f0;
23+
--colour-5: #181818;
24+
--colour-6: #242424;
2525

26-
--accent: hsl(0, 80%, 49%);
27-
--colour-1: hsl(210, 21%, 85%);
28-
--blur-border: hsl(0, 7%, 86%);
29-
--user-input: hsl(18, 29%, 27%);
30-
--conversations: hsl(207, 93%, 48%); /*Dashed line boxes and icons colour*/
26+
--accent: #8b3dff;
27+
--blur-bg: #16101b66;
28+
--blur-border: #84719040;
29+
--user-input: #ac87bb;
30+
--conversations: #c7a2ff;
3131
}
3232

3333
:root {
@@ -66,7 +66,7 @@ body {
6666
.box {
6767
backdrop-filter: blur(20px);
6868
-webkit-backdrop-filter: blur(20px);
69-
background-color: var(--colour-1);
69+
background-color: var(--blur-bg);
7070
height: 100%;
7171
width: 100%;
7272
border-radius: var(--border-radius-1);
@@ -281,7 +281,7 @@ body {
281281
.stop_generating button {
282282
backdrop-filter: blur(20px);
283283
-webkit-backdrop-filter: blur(20px);
284-
background-color: var(--colour-1);
284+
background-color: var(--blur-bg);
285285
border-radius: var(--border-radius-1);
286286
border: 1px solid var(--blur-border);
287287
padding: 10px 15px;
@@ -345,7 +345,7 @@ label {
345345
height: 30px;
346346
backdrop-filter: blur(20px);
347347
-webkit-backdrop-filter: blur(20px);
348-
background-color: var(--colour-1);
348+
background-color: var(--blur-bg);
349349
border-radius: var(--border-radius-1);
350350
border: 1px solid var(--blur-border);
351351
display: block;
@@ -406,7 +406,7 @@ select {
406406
backdrop-filter: blur(20px);
407407

408408
cursor: pointer;
409-
background-color: var(--colour-1);
409+
background-color: var(--blur-bg);
410410
border: 1px solid var(--blur-border);
411411
color: var(--colour-3);
412412
display: block;
@@ -453,7 +453,7 @@ select {
453453
cursor: pointer;
454454
user-select: none;
455455
background: transparent;
456-
border: 1px dashed var(--conversations);
456+
border: 1px solid #c7a2ff;
457457
border-radius: var(--border-radius-1);
458458
width: 100%;
459459
}
@@ -550,7 +550,7 @@ ul {
550550
cursor: pointer;
551551
backdrop-filter: blur(20px);
552552
-webkit-backdrop-filter: blur(20px);
553-
background-color: var(--colour-1);
553+
background-color: var(--blur-bg);
554554
border-radius: 10px;
555555
border: 1px solid var(--blur-border);
556556
width: 40px;
@@ -688,92 +688,105 @@ a:-webkit-any-link {
688688
position: absolute;
689689
white-space: nowrap;
690690
width: 1px;
691-
}
691+
}
692692

693-
.color-picker > fieldset {
694-
border: 0;
695-
display: flex;
696-
gap: 2rem;
697-
width: fit-content;
698-
background: var(--colour-1);
699-
padding: 1rem 3rem;
700-
margin-inline: auto;
701-
border-radius: var(--border-radius-1);
702693

694+
.color-picker>fieldset {
695+
border: 0;
696+
display: flex;
697+
width: fit-content;
698+
background: var(--colour-1);
699+
margin-inline: auto;
700+
border-radius: 8px;
701+
-webkit-backdrop-filter: blur(20px);
702+
backdrop-filter: blur(20px);
703+
cursor: pointer;
704+
background-color: var(--blur-bg);
705+
border: 1px solid var(--blur-border);
706+
color: var(--colour-3);
707+
display: block;
708+
position: relative;
709+
overflow: hidden;
710+
outline: none;
711+
padding: 6px 16px;
703712
}
704713

705714
.color-picker input[type="radio"]:checked {
706-
background-color: var(--radio-color);
715+
background-color: var(--radio-color);
707716
}
708717

709718
.color-picker input[type="radio"]#light {
710-
--radio-color: gray;
719+
--radio-color: gray;
711720
}
721+
712722
.color-picker input[type="radio"]#pink {
713-
--radio-color: pink;
723+
--radio-color: pink;
714724
}
725+
715726
.color-picker input[type="radio"]#blue {
716-
--radio-color: blue;
727+
--radio-color: blue;
717728
}
729+
718730
.color-picker input[type="radio"]#green {
719-
--radio-color: green;
731+
--radio-color: green;
720732
}
733+
721734
.color-picker input[type="radio"]#dark {
722-
--radio-color: #232323;
735+
--radio-color: #232323;
723736
}
724737

725738
.pink {
726739
--colour-1: hsl(310 50% 90%);
727740
--clr-card-bg: hsl(310 50% 100%);
728741
--colour-3: hsl(310 50% 15%);
729742
--conversations: hsl(310 50% 25%);
730-
}
731-
732-
.blue {
743+
}
744+
745+
.blue {
733746
--colour-1: hsl(209 50% 90%);
734747
--clr-card-bg: hsl(209 50% 100%);
735748
--colour-3: hsl(209 50% 15%);
736749
--conversations: hsl(209 50% 25%);
737-
}
738-
739-
.green {
750+
}
751+
752+
.green {
740753
--colour-1: hsl(109 50% 90%);
741754
--clr-card-bg: hsl(109 50% 100%);
742755
--colour-3: hsl(109 50% 15%);
743756
--conversations: hsl(109 50% 25%);
744-
}
745-
746-
.dark {
757+
}
758+
759+
.dark {
747760
--colour-1: hsl(209 50% 10%);
748761
--clr-card-bg: hsl(209 50% 5%);
749762
--colour-3: hsl(209 50% 90%);
750763
--conversations: hsl(209 50% 80%);
751-
}
752-
753-
:root:has(#pink:checked) {
764+
}
765+
766+
:root:has(#pink:checked) {
754767
--colour-1: hsl(310 50% 90%);
755768
--clr-card-bg: hsl(310 50% 100%);
756769
--colour-3: hsl(310 50% 15%);
757770
--conversations: hsl(310 50% 25%);
758-
}
759-
760-
:root:has(#blue:checked) {
771+
}
772+
773+
:root:has(#blue:checked) {
761774
--colour-1: hsl(209 50% 90%);
762775
--clr-card-bg: hsl(209 50% 100%);
763776
--colour-3: hsl(209 50% 15%);
764777
--conversations: hsl(209 50% 25%);
765-
}
766-
767-
:root:has(#green:checked) {
778+
}
779+
780+
:root:has(#green:checked) {
768781
--colour-1: hsl(109 50% 90%);
769782
--clr-card-bg: hsl(109 50% 100%);
770783
--colour-3: hsl(109 50% 15%);
771784
--conversations: hsl(109 50% 25%);
772-
}
773-
774-
:root:has(#dark:checked) {
785+
}
786+
787+
:root:has(#dark:checked) {
775788
--colour-1: hsl(209 50% 10%);
776789
--clr-card-bg: hsl(209 50% 5%);
777790
--colour-3: hsl(209 50% 90%);
778791
--conversations: hsl(209 50% 80%);
779-
}
792+
}

‎client/html/index.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -129,25 +129,25 @@
129129
</select>
130130
</div>
131131

132-
<form class="color-picker" action="">
133-
<fieldset>
134-
<legend class="visually-hidden">Pick a color scheme</legend>
135-
<label for="light" class="visually-hidden">Light</label>
136-
<input type="radio" name="theme" id="light" checked>
137-
138-
<label for="pink" class="visually-hidden">Pink theme</label>
139-
<input type="radio" id="pink" name="theme">
140-
141-
<label for="blue" class="visually-hidden">Blue theme</label>
142-
<input type="radio" id="blue" name="theme">
143-
144-
<label for="green" class="visually-hidden">Green theme</label>
145-
<input type="radio" id="green" name="theme">
146-
147-
<label for="dark" class="visually-hidden">Dark theme</label>
148-
<input type="radio" id="dark" name="theme">
149-
</fieldset>
150-
</form>
132+
<form class="color-picker" action="">
133+
<fieldset>
134+
<legend class="visually-hidden">Pick a color scheme</legend>
135+
<label for="light" class="visually-hidden">Light</label>
136+
<input type="radio" name="theme" id="light" checked>
137+
138+
<label for="pink" class="visually-hidden">Pink theme</label>
139+
<input type="radio" id="pink" name="theme">
140+
141+
<label for="blue" class="visually-hidden">Blue theme</label>
142+
<input type="radio" id="blue" name="theme">
143+
144+
<label for="green" class="visually-hidden">Green theme</label>
145+
<input type="radio" id="green" name="theme">
146+
147+
<label for="dark" class="visually-hidden">Dark theme</label>
148+
<input type="radio" id="dark" name="theme">
149+
</fieldset>
150+
</form>
151151
</div>
152152
</div>
153153
</div>

0 commit comments

Comments
 (0)