fortytwo/me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make color picker work without code

Browse source 
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2023-03-10 22:19:15 -05:00
parent 004132e966
commit 745940cff9
4 changed files with 285 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

102
css/style.css
View file

@ -11,6 +11,18 @@ body {
margin: 0;
font-family: "Nunito", sans-serif;
background: var(--bgColor);
--liteColor: white;
--liteText: #777;
--darkColor: black;
--darkText: #aaa;
--mintColor: #c7fcee;
--mintText: #5f8c80;
--purpColor: #cfc7fc;
--purpText: #7166af;
--yellColor: #fcfcbf;
--yellText: #8c8c5f;
--blueColor: #ade3ff;
--blueText: #46748c;
}
@media (prefers-color-scheme: light) {
body {
@ -217,6 +229,96 @@ body.blue-mode {
position: absolute;
text-align: center;
}
.main button.change-color-button {
position: absolute;
top: 0;
right: 0;
margin: 1rem;
font: inherit;
color: inherit;
border: none;
border-radius: 100rem;
height: 3rem;
width: 3rem;
text-align: center;
line-height: 3rem;
padding: 0;
background: rgba(255, 255, 255, 0.8);
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.main button.change-color-button:hover {
background: white;
}
.main dialog.change-color-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
background: var(--bgColor);
color: var(--textColor);
padding: 2rem;
border: 0;
border-radius: 0 0 0.25rem 0.25rem;
width: 100%;
max-height: calc(100vh - 2rem);
overflow: scroll;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3), 0 0.15rem 1rem rgba(0, 0, 0, 0.1);
font-size: 1.33rem;
}
.main dialog.change-color-dialog h4 {
margin: 0 0 1rem;
text-align: center;
font-size: 1.9rem;
font-weight: 400;
}
.main dialog.change-color-dialog form {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main dialog.change-color-dialog form input[type=button], .main dialog.change-color-dialog form input[type=submit] {
font: inherit;
color: inherit;
padding: 0.5rem 1rem;
border: 0;
margin: 1rem 0.5rem 0;
background: var(--textColor);
color: var(--bgColor);
border-radius: 0.25rem;
cursor: pointer;
}
.main dialog.change-color-dialog form input[type=button]:hover, .main dialog.change-color-dialog form input[type=submit]:hover {
background: var(--boldColor);
}
.main dialog.change-color-dialog .radio-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.main dialog.change-color-dialog .radio-buttons > div {
margin: 0.5rem 0;
}
.main dialog.change-color-dialog .radio-buttons > div input {
display: none;
}
.main dialog.change-color-dialog .radio-buttons > div label div {
display: inline-block;
height: 2rem;
width: 2rem;
border-radius: 50%;
margin: 0 0.25rem 0 0.75rem;
line-height: 2rem;
text-align: center;
}
.main dialog.change-color-dialog .radio-buttons > div input:checked + label div {
border: 3px solid;
}
.main dialog.change-color-dialog[open] + button.change-color-button {
display: none;
}
@media (max-width: 69rem), (orientation: portrait) {
.main > .text-container {