Restyled Settings UI
Rebuilt the css for the Settings UI, which also led to some changed in the FilesAPI so it knows what to do with specific targets. There's still some additional styling needed to polish it, but the core structure is in place so now it can just be tweaked. The controller for this page was adjusted as needed. Also moved the settings sub nav convtrols to the header menu since it's sticky now.toggle-buttons-#109
parent
fcca7357bc
commit
1b89d1d072
GPG Key ID:
29B551CDBD4D3B50
@ -0,0 +1,11 @@
|
|||||||
|
<div role="submenu">
|
||||||
|
<button id="save-toggle" title="save settings">
|
||||||
|
<i class="ti ti-device-floppy"></i>
|
||||||
|
</button>
|
||||||
|
<button id="publish-pages" title="publish site">
|
||||||
|
<i class="ti ti-world-upload"></i>
|
||||||
|
</button>
|
||||||
|
<button id="render-toggle" title="render on save toggle" data-render="{{ renderOnSave }}">
|
||||||
|
<i class="ti ti-circle-dashed"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,160 @@
|
|||||||
|
article[role="settings"] {
|
||||||
|
margin: 100px auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[role="settings"] h1 {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
section label {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="member-settings"],
|
||||||
|
section[role="site-settings"],
|
||||||
|
section[role="data-settings"],
|
||||||
|
section[role="backup-settings"] {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 10px auto;
|
||||||
|
background: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="member-settings"] div {
|
||||||
|
width: 98%;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="member-settings"] div input[type="file"] {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="member-settings"] div input[type="text"] {
|
||||||
|
width: 96%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="member-settings"] div textarea {
|
||||||
|
background: var(--primary);
|
||||||
|
width: 91%;
|
||||||
|
padding: 5px;
|
||||||
|
height: 79%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="member-settings"] div:nth-child(1) {
|
||||||
|
grid-column: 1/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="member-settings"] div:nth-child(2) {
|
||||||
|
grid-column: 2/4;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="member-settings"] div img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="features"] button {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="features"] button > span {
|
||||||
|
font-size: 0.8em;
|
||||||
|
display: inline;
|
||||||
|
top: -10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"]
|
||||||
|
> div[role="features"]
|
||||||
|
button[data-enabled="true"] {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"]
|
||||||
|
> div[role="features"]
|
||||||
|
button[data-enabled="false"] {
|
||||||
|
color: var(--primary);
|
||||||
|
background: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="theme"] a[data-enabled="true"] {
|
||||||
|
color: var(--white);
|
||||||
|
background: var(--highlight);
|
||||||
|
display: block;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="theme"] a[data-enabled="false"] {
|
||||||
|
color: var(--primary);
|
||||||
|
background: var(--secondary);
|
||||||
|
display: block;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="mail"] a {
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="mail"] a[data-enabled="true"] {
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="mail"] div[data-enabled="false"] {
|
||||||
|
visibility: hidden;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="mail"] input {
|
||||||
|
width: 96%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="site-settings"] > div[role="mail"] button {
|
||||||
|
width: 96%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="data-settings"] div {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="data-settings"] div:nth-child(1) {
|
||||||
|
grid-column: 1/3;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="data-settings"] button {
|
||||||
|
width: 96%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="data-settings"] a {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue