alterware/BetterTwitFix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style.css | styled frontend settings in preparation for JS work

Browse Source
This commit is contained in:
MarshDeer 2024-09-06 18:10:36 -04:00
parent 8d281f35c5
commit 07c7ac025b
1 changed files with 100 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
static/style.css
View File

@ -70,32 +70,56 @@ main {
grid-area: main; grid-area: main;
} }
label :has(input) { em {
color: var(--accent);
}
.optiongroup:not(:first-of-type) {
margin: 1em auto;
border-top: 1px solid var(--lowcontrast);
}
label :where(:has(input), input) {
grid-area: input; grid-area: input;
} }
label h3 { h3 {
grid-area: title; grid-area: title;
margin: 0; margin: 0;
} }
label p { p {
grid-area: text; grid-area: text;
color: var(--gray); color: var(--gray);
margin: 0; margin: 0;
} }
/* Checkbox settings */ a {
label:has(input[type=checkbox]) { color: var(--accent);
text-decoration: underline 1px dotted var(--accent);
transition: .2s all;
}
label a:where(:hover, :focus) {
color: var(--fg);
text-decoration-color: var(--fg);
}
label {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-areas: grid-template-areas:
"title input" "title input"
"text text"; "text text"
"options options";
} }
label:has(input[type=checkbox]):hover { label:not(:first-of-type) {
margin: 1em auto;
}
label:not(#instancePicker):hover {
cursor: pointer; cursor: pointer;
} }
@ -103,16 +127,26 @@ label:has(input[type=checkbox]):hover {
position: relative; position: relative;
} }
input[type=checkbox] { input[type=checkbox],
input[type=radio] {
appearance: none; appearance: none;
width: 20px;
height: 20px;
border: 2px solid var(--gray); border: 2px solid var(--gray);
border-radius: 5px;
background: var(--bg); background: var(--bg);
transition: .2s all; transition: .2s all;
} }
input[type=checkbox] {
width: 20px;
height: 20px;
border-radius: 5px;
}
input[type=radio] {
width: 15px;
height: 15px;
border-radius: 100%;
}
input[type=checkbox]+svg { input[type=checkbox]+svg {
display: none; display: none;
width: 20px; width: 20px;
@ -122,11 +156,13 @@ input[type=checkbox]+svg {
inset: 1px 2px; inset: 1px 2px;
} }
input[type=checkbox]:hover { input[type=checkbox]:hover,
input[type=radio]:hover {
box-shadow: 0 0 0 5px var(--lowcontrast); box-shadow: 0 0 0 5px var(--lowcontrast);
} }
input[type=checkbox]:checked { input[type=checkbox]:checked,
input[type=radio]:checked {
background: var(--accent); background: var(--accent);
border-color: var(--accent); border-color: var(--accent);
} }
@ -135,6 +171,57 @@ input[type=checkbox]:checked+svg {
display: block; display: block;
} }
button {
background: var(--accent);
color: var(--fg);
padding: 0 1ch;
border: none;
cursor: pointer;
border-radius: 1.5em;
font-weight: bold;
font-family: 'Roboto', sans-serif;
transition: .2s all;
}
button:where(:hover, :focus) {
background: var(--fg);
color: var(--bg);
}
#instancePicker {
animation: fadein ease-in .3s 1 forwards;
}
@keyframes fadein {
from { opacity: 0;}
to { opacity: 1;}
}
table {
grid-area: options;
width: fit-content;
width: 100%;
text-align: center;
margin: 1em auto;
}
th {
padding: 0 0.5ch;
}
tbody {
color: var(--gray);
}
tbody tr:has(input[type=radio]:checked) {
color: var(--fg);
}
td label input {
grid-area: options;
margin: auto;
}
/* Popup */ /* Popup */
main:has(.popup) { main:has(.popup) {
justify-content: center; justify-content: center;
@ -162,23 +249,11 @@ main:has(.popup) {
} }
.popup button { .popup button {
background: var(--accent);
color: var(--fg);
width: 60%; width: 60%;
height: 3em; height: 3em;
border-radius: 1.5em;
border: none; border: none;
cursor: pointer;
margin: 1em auto; margin: 1em auto;
font-size: larger; font-size: larger;
font-weight: bold;
font-family: 'Roboto', sans-serif;
transition: .2s all;
}
.popup button:where(:hover, :focus) {
background: var(--fg);
color: var(--bg);
} }
/* "Not a phishing site" warning tape */ /* "Not a phishing site" warning tape */