diff --git a/static/Roboto-Regular.ttf b/static/Roboto-Regular.ttf new file mode 100644 index 0000000..2d116d9 Binary files /dev/null and b/static/Roboto-Regular.ttf differ diff --git a/static/preferences.html b/static/preferences.html index 53915ff..244cea1 100644 --- a/static/preferences.html +++ b/static/preferences.html @@ -1,25 +1,53 @@ - + - Preferences - + function loadPreference() { + var checkbox = document.getElementById("openLinksCheckbox"); + var preference = localStorage.getItem("openLinksPreference"); + checkbox.checked = preference === "true"; + } + + + -

Preferences

- + + +
+ + + +

vxTwitter Preferences

+
+ +
+
+

Redirection settings

+ +
+
+ + - \ No newline at end of file + diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..c650316 --- /dev/null +++ b/static/style.css @@ -0,0 +1,142 @@ +@font-face { + font-family: "Roboto"; + src: + local("Roboto"), + url("/Roboto-Regular.ttf"); + font-weight: 400; +} + +:root { + --bg: #000; + --fg: #fff; + --gray: #777; + --lowcontrast: #222; + --accent: #1d9bf0; +} + +@media (prefers-color-scheme: light) { + :root { + --bg: #fff; + --fg: #000; + --lowcontrast: #ddd; + } +} + +body { + width: 100vw; + height: 100vh; + margin: 0; + background: var(--bg); + color: var(--fg); + display: grid; + grid-template-rows: auto auto 1fr auto; + font-family: "Roboto", sans-serif; +} + +header { + padding: 1em 1ch; + border-bottom: 1px solid var(--lowcontrast); + display: flex; + justify-content: center; + align-items: center; + background: var(--bg); +} + +header svg { + width: 24px; + height: 24px; + fill: var(--fg); +} + +header h1 { + margin: 0 auto; + font-size: 24px; +} + +main { + display: flex; + flex-direction: column; + overflow-y: auto; + width: calc(100% - 4ch); + max-width: 1500px; + padding: 0 2ch; + margin: 0 auto; +} + +label input { + grid-area: input; +} + +label h3 { + grid-area: title; + margin: 0; +} + +label p { + grid-area: text; + color: var(--gray); + margin: 0; +} + +/* Checkbox settings */ +label:has(input[type=checkbox]) { + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: auto auto; + grid-template-areas: + "title input" + "text text"; +} + +label:has(input[type=checkbox]):hover { + cursor: pointer; +} + +.checkboxcontainer { + position: relative; +} + +input[type=checkbox] { + appearance: none; + width: 20px; + height: 20px; + border: 2px solid var(--gray); + border-radius: 5px; + background: var(--bg); +} + +input[type=checkbox]+svg { + display: none; + width: 20px; + height: 20px; + fill: var(--fg); + position: absolute; + inset: 1px 2px; +} + +input[type=checkbox]:hover { + box-shadow: 0 0 0 5px var(--lowcontrast); +} + +input[type=checkbox]:checked { + background: var(--accent); + border-color: var(--accent); +} + +input[type=checkbox]:checked+svg { + display: block; +} + +/* "Not a phishing site" warning tape */ +aside { + background: repeating-linear-gradient( + 45deg, + var(--bg) 1ch 2ch, + var(--accent) 2ch 3ch); + text-align: center; +} + +aside em { + background: var(--bg); + color: var(--accent); +}