Style preferences page
This commit is contained in:
Zed
parent
6c365b8fba
commit
13b75a6954
|
|
@ -7,6 +7,10 @@ body {
|
|||
line-height: 1.3;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: unset;
|
||||
}
|
||||
|
||||
#posts {
|
||||
background-color: #161616;
|
||||
}
|
||||
|
|
@ -200,13 +204,16 @@ nav {
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.item.right a {
|
||||
font-size: 16px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -1072,6 +1079,41 @@ video, .video-container img {
|
|||
|
||||
.preferences {
|
||||
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 {
|
||||
|
|
@ -1081,36 +1123,76 @@ fieldset {
|
|||
|
||||
legend {
|
||||
width: 100%;
|
||||
padding: .6em 0 .3em 0;
|
||||
margin-bottom: .2em;
|
||||
padding: .2em 0 .3em 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #888888;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #888888;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.pref-group {
|
||||
margin: .2em; 0;
|
||||
}
|
||||
|
||||
.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-input {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.pref-reset {
|
||||
float: right;
|
||||
margin-top: -25px;
|
||||
margin-top: -28px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,28 +5,28 @@ import ../types, ../prefs
|
|||
|
||||
proc genCheckbox(pref, label: string; state: bool): VNode =
|
||||
buildHtml(tdiv(class="pref-group")):
|
||||
if state:
|
||||
input(name=pref, `type`="checkbox", checked="")
|
||||
else:
|
||||
input(name=pref, `type`="checkbox")
|
||||
label(`for`=pref): text label
|
||||
label(class="checkbox-container"):
|
||||
text label
|
||||
if state: input(name=pref, `type`="checkbox", checked="")
|
||||
else: input(name=pref, `type`="checkbox")
|
||||
span(class="checkbox")
|
||||
|
||||
proc genSelect(pref, label, state: string; options: seq[string]): VNode =
|
||||
buildHtml(tdiv(class="pref-group")):
|
||||
label(`for`=pref): text label
|
||||
select(name=pref):
|
||||
for opt in options:
|
||||
if opt == state:
|
||||
option(value=opt, selected=""): text opt
|
||||
else:
|
||||
option(value=opt): text opt
|
||||
label(`for`=pref): text label
|
||||
|
||||
proc genInput(pref, label, state, placeholder: string): VNode =
|
||||
let s = xmltree.escape(state)
|
||||
let p = xmltree.escape(placeholder)
|
||||
buildHtml(tdiv(class="pref-group")):
|
||||
verbatim &"<input name={pref} type=\"text\" placeholder=\"{p}\" value=\"{s}\"/>"
|
||||
buildHtml(tdiv(class="pref-group pref-input")):
|
||||
label(`for`=pref): text label
|
||||
verbatim &"<input name={pref} type=\"text\" placeholder=\"{p}\" value=\"{s}\"/>"
|
||||
|
||||
macro renderPrefs*(): untyped =
|
||||
result = nnkCall.newTree(
|
||||
|
|
@ -57,9 +57,9 @@ proc renderPreferences*(prefs: Prefs): VNode =
|
|||
form(`method`="post", action="saveprefs"):
|
||||
renderPrefs()
|
||||
|
||||
button(`type`="submit", class="pref-submit"):
|
||||
button(`type`="submit"):
|
||||
text "Save preferences"
|
||||
|
||||
form(`method`="post", action="resetprefs", class="pref-reset"):
|
||||
button(`type`="submit", class="pref-submit"):
|
||||
button(`type`="submit"):
|
||||
text "Reset preferences"
|
||||
|
|
|
|||
Loading…
Reference in New Issue