1b89d1d072
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.
161 lines
3 KiB
CSS
161 lines
3 KiB
CSS
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;
|
|
}
|