Style preferences page

This commit is contained in:
Zed 2019-08-15 22:44:11 +02:00
parent 6c365b8fba
commit 13b75a6954
2 changed files with 113 additions and 31 deletions

View File

@ -7,6 +7,10 @@ body {
line-height: 1.3; line-height: 1.3;
} }
* {
outline: unset;
}
#posts { #posts {
background-color: #161616; background-color: #161616;
} }
@ -200,13 +204,16 @@ nav {
justify-content: flex-end; justify-content: flex-end;
} }
.site-name {
font-weight: 600;
}
.site-logo { .site-logo {
width: 35px; width: 35px;
height: 35px; height: 35px;
} }
.item.right a { .item.right a {
font-size: 16px;
padding-left: 4px; padding-left: 4px;
} }
@ -1072,6 +1079,41 @@ video, .video-container img {
.preferences { .preferences {
background-color: #222222; background-color: #222222;
width: 100%;
}
.preferences input[type="text"] {
max-width: 110px;
background-color: #121212;
padding: 1px 4px;
color: #f8f8f2;
margin: 0;
border: 1px solid #ff6c6091;
border-radius: 0px;
position: absolute;
right: 0;
font-size: 14px;
}
.preferences input[type="text"]:hover {
border-color: #ff6c60;
}
.preferences button {
background-color: #121212;
color: #f8f8f2;
border: 1px solid #ff6c6091;
padding: 3px 6px;
margin-top: 4px;
font-size: 14px;
}
.preferences button:hover {
border-color: #ff6c60;
}
.preferences button:active {
border-color: #ff9f97;
} }
fieldset { fieldset {
@ -1081,36 +1123,76 @@ fieldset {
legend { legend {
width: 100%; width: 100%;
padding: .6em 0 .3em 0; padding: .2em 0 .3em 0;
margin-bottom: .2em; margin: 0;
border: 0; border: 0;
border-bottom: 1px solid #888888;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid #888888;
margin-bottom: 5px;
} }
.pref-group { .pref-input {
margin: .2em; 0; position: relative;
} margin-bottom: 5px;
.pref-submit {
background-color: #e2e2e2;
color: #000;
border: none;
border-radius: 2px;
padding: 3px 6px;
margin-left: 6px;
margin-top: 4px;
}
.pref-submit:hover {
background-color: #a8a8a8;
} }
.pref-reset { .pref-reset {
float: right; float: right;
margin-top: -25px; margin-top: -28px;
} }
.icon-container { .icon-container {
display: inline; display: inline;
} }
.checkbox-container {
display: block;
position: relative;
margin-bottom: 5px;
cursor: pointer;
user-select: none;
}
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox {
position: absolute;
top: 1px;
right: 0;
height: 17px;
width: 17px;
background-color: #121212;
border: 1px solid #ff6c6091;
}
.checkbox-container:hover input ~ .checkbox {
border-color: #ff6c60;
}
.checkbox-container:active input ~ .checkbox {
border-color: #ff9f97;
}
.checkbox:after {
content: "";
position: absolute;
display: none;
}
.checkbox-container input:checked ~ .checkbox:after {
display: block;
}
.checkbox-container .checkbox:after {
left: 2px;
bottom: 0px;
font-size: 13px;
font-family: "fontello";
content: '\e803';
}

View File

@ -5,28 +5,28 @@ import ../types, ../prefs
proc genCheckbox(pref, label: string; state: bool): VNode = proc genCheckbox(pref, label: string; state: bool): VNode =
buildHtml(tdiv(class="pref-group")): buildHtml(tdiv(class="pref-group")):
if state: label(class="checkbox-container"):
input(name=pref, `type`="checkbox", checked="") text label
else: if state: input(name=pref, `type`="checkbox", checked="")
input(name=pref, `type`="checkbox") else: input(name=pref, `type`="checkbox")
label(`for`=pref): text label span(class="checkbox")
proc genSelect(pref, label, state: string; options: seq[string]): VNode = proc genSelect(pref, label, state: string; options: seq[string]): VNode =
buildHtml(tdiv(class="pref-group")): buildHtml(tdiv(class="pref-group")):
label(`for`=pref): text label
select(name=pref): select(name=pref):
for opt in options: for opt in options:
if opt == state: if opt == state:
option(value=opt, selected=""): text opt option(value=opt, selected=""): text opt
else: else:
option(value=opt): text opt option(value=opt): text opt
label(`for`=pref): text label
proc genInput(pref, label, state, placeholder: string): VNode = proc genInput(pref, label, state, placeholder: string): VNode =
let s = xmltree.escape(state) let s = xmltree.escape(state)
let p = xmltree.escape(placeholder) let p = xmltree.escape(placeholder)
buildHtml(tdiv(class="pref-group")): buildHtml(tdiv(class="pref-group pref-input")):
verbatim &"<input name={pref} type=\"text\" placeholder=\"{p}\" value=\"{s}\"/>"
label(`for`=pref): text label label(`for`=pref): text label
verbatim &"<input name={pref} type=\"text\" placeholder=\"{p}\" value=\"{s}\"/>"
macro renderPrefs*(): untyped = macro renderPrefs*(): untyped =
result = nnkCall.newTree( result = nnkCall.newTree(
@ -57,9 +57,9 @@ proc renderPreferences*(prefs: Prefs): VNode =
form(`method`="post", action="saveprefs"): form(`method`="post", action="saveprefs"):
renderPrefs() renderPrefs()
button(`type`="submit", class="pref-submit"): button(`type`="submit"):
text "Save preferences" text "Save preferences"
form(`method`="post", action="resetprefs", class="pref-reset"): form(`method`="post", action="resetprefs", class="pref-reset"):
button(`type`="submit", class="pref-submit"): button(`type`="submit"):
text "Reset preferences" text "Reset preferences"