fipamo/public/assets/css/dash/settings.css
ro 743d7c4d90
routing overhaul
previously all the of the page routing was handlede through controller
organized by CRUD methods. it worked, but organizing by CRUD and not
purpose resulted in more time spent looking for a specific task through
controllers, so it turned out not to an effecient way of organizing.

so routing has been completely reorganized into laravel's web routing
section and methods have been moved to their appropriate controller so
tasks are much easier to find

front facing page routing turned out to be a bit more tricky that
anticipated do the overap of routing paths, but it only affects dynamic
page rendering and there's a patch in place that handles that issue
until a better solution is found. Rendered HTML pages works fine.

whew!
2025-05-16 17:37:53 -06:00

417 lines
7.9 KiB
CSS

article[class="settings"] {
margin: 100px auto;
width: 100%;
max-width: 900px;
transition: all 0.8s linear;
}
article[class="settings"] h1 {
color: var(--white);
}
article[class="settings"] label {
color: var(--primary);
margin-bottom: 10px;
display: inline-block;
font-weight: bold;
}
article.settings div.tab-toolbar button {
width: 120px;
height: 40px;
color: var(--secondary);
}
article.settings section.settings-tabs section.section-tab {
width: 100%;
min-height: 400px;
color: var(--secondary);
}
.show {
display: block;
visibility: visible;
}
.hide {
/* REFACTOR: i know, i know, it's just a placeholder*/
display: none !important;
visibility: hidden;
}
/*
MEMBER PROFILE TAB
*/
section#site-profile {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: auto;
gap: 15px;
width: 100%;
max-width: 900px;
margin: 10px auto;
border-radius: 3px;
background: var(--secondary);
}
section#site-profile > div:nth-child(1) {
grid-column: 1/2;
grid-row: 1/2;
height: 250px;
}
section#site-profile > div:nth-child(2) {
grid-column: 2/4;
grid-row: 1/2;
}
section#site-profile > div:nth-child(3) {
grid-column: 1/2;
grid-row: 2/3;
padding-left: 10px;
}
section#site-profile > div:nth-child(4) {
grid-column: 2/3;
grid-row: 2/3;
}
section#site-profile > div:nth-child(4) a {
font-weight: bold;
text-decoration: underline;
color: var(--primary-highlight);
}
section#site-profile > div:nth-child(5) {
grid-column: 3/4;
grid-row: 2/3;
padding-right: 10px;
}
section#site-profile > div:nth-child(6) {
grid-column: 1/4;
grid-row: 3/4;
padding: 0 10px;
}
section#site-profile > div:nth-child(6) div {
display: inline-block;
color: var(--secondary);
word-wrap: break-word;
vertical-align: top;
width: 49.6%;
}
section#site-profile > div:nth-child(6) div > span {
display: block;
background: var(--primary);
color: var(--secondary);
border-radius: 3px;
padding: 3px;
margin-bottom: 10px;
}
section#site-profile > div textarea {
width: 98.4%;
height: 85%;
}
section#site-profile > div[class="member-avatar"] div,
section#site-profile > div[class="site-background"] div {
height: 100%;
border-radius: 3px;
}
section#site-profile div input[type="file"] {
display: none;
visibility: hidden;
}
section#site-profile div input[type="text"] {
width: 98.4%;
height: 40px;
margin-bottom: 10px;
}
/*
SITE FEATURES TAB
*/
section#site-features > div.features-mail {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-columns: auto;
gap: 15px;
width: 100%;
max-width: 880px;
margin: 10px auto 10px auto;
border-radius: 3px;
background: var(--secondary);
padding: 10px;
color: var(--primary);
}
section#site-features > div.features-mail input {
width: 98.4%;
height: 40px;
padding-left: 5px;
margin-bottom: 10px;
}
section#site-features > div.features-mail a {
margin-right: 3px;
color: var(--primary);
display: inline-block;
height: 40px;
padding: 15px 0 0;
}
section#site-features > div.features-mail button {
width: 100%;
height: 40px;
margin-bottom: 5px;
}
section#site-features div.site-options button,
section#site-features div.site-maintenance button {
width: 90%;
height: 40px;
margin-bottom: 5px;
}
section#site-features button span {
font-size: 0.8em;
display: inline;
position: relative;
}
section#site-features > div.features-mail a[data-enabled="true"] {
color: var(--secondary-highlight);
font-weight: bold;
}
section#site-features > div.features-mail div[data-enabled="false"] {
visibility: hidden;
display: none;
}
section#site-features > div[class="features"] button[data-enabled="true"] {
color: var(--white);
}
section#site-features > div.site-options {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-columns: auto;
gap: 15px;
width: 100%;
max-width: 900px;
margin: 0 auto 10px auto;
border-radius: 3px;
}
section#site-features div.option-container {
background: var(--secondary);
padding: 10px;
border-radius: 3px;
}
section#site-features div.option-container span {
display: block;
width: 100%;
text-align: center;
font-size: 0.8em;
}
section#site-features div.option-container svg {
fill: var(--primary);
position: relative;
top: 7px;
}
section#site-features > div.site-options button[data-enabled="true"] {
color: var(--primary-highlight);
background: var(--primary);
}
section#site-features > div.site-options button[data-enabled="false"] {
color: var(--secondary);
background: var(--secondary-highlight);
}
section#site-features > div.site-maintenance {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-columns: auto;
gap: 15px;
width: 100%;
max-width: 900px;
margin: 0 auto 10px auto;
border-radius: 3px;
color: var(--primary);
}
/*
SITE FEATURES TAB
*/
section#site-themes > button {
background: var(--secondary);
display: inline-block;
border-radius: 3px;
padding: 3px;
width: 250px;
height: 200px;
margin: 10px 0;
}
section#site-themes > button > div {
height: 145px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
top: -10px;
position: relative;
border-radius: 3px;
}
section#site-themes > button[data-enabled="true"] > div {
background: var(--secondary-highlight);
color: var(--secondary);
}
section#site-themes > button[data-enabled="true"] label {
color: var(--primary);
}
section#site-themes > button[data-enabled="false"] > div {
background: var(--primary);
color: var(--secondary);
}
section#site-themes > button[data-enabled="false"] label {
color: var(--secondary);
}
section#site-themes > button[data-enabled="true"] > svg {
fill: var(--primary);
position: relative;
top: 5px;
}
section#site-themes > button[data-enabled="false"] > svg {
fill: var(--primary);
position: relative;
top: 5px;
}
section#site-themes > a {
background: var(--secondary-highlight);
display: inline-block;
width: 15%;
border-radius: 3px;
text-align: center;
vertical-align: top;
top: 13px;
position: absolute;
z-index: 30;
}
@media only screen and (max-width: 530px) {
article.settings div.tab-toolbar button {
width: 20%;
height: 40px;
color: var(--secondary);
font-size: 0.7em;
}
section#site-profile {
grid-template-columns: 1fr;
}
section#site-profile > div:nth-child(1) {
grid-column: 1/4;
grid-row: 1;
height: 250px;
padding: 10px;
}
section#site-profile > div:nth-child(2) {
grid-column: 1/4;
grid-row: 2;
height: 250px;
padding: 10px;
}
section#site-profile > div:nth-child(3) {
grid-column: 1/4;
grid-row: 3;
padding-left: 10px;
}
section#site-profile > div:nth-child(4) {
grid-column: 1/4;
grid-row: 4;
padding: 5px;
}
section#site-profile > div:nth-child(4) a {
font-weight: bold;
text-decoration: underline;
color: var(--primary-highlight);
}
section#site-profile > div:nth-child(5) {
grid-column: 1/4;
grid-row: 5;
padding: 10px;
}
section#site-profile > div:nth-child(6) {
grid-column: 1/4;
grid-row: 6;
padding: 0 10px;
}
section#site-profile > div:nth-child(6) div {
display: inline-block;
color: var(--secondary);
word-wrap: break-word;
vertical-align: top;
width: 49%;
}
section#site-profile > div:nth-child(6) div > span {
display: block;
background: var(--primary);
color: var(--secondary);
border-radius: 3px;
padding: 3px;
margin-bottom: 10px;
}
section#site-profile > div textarea {
width: 98.4%;
height: 85%;
}
article.settings section.settings-tabs section.section-tab {
width: 98%;
padding: 5px;
}
section#site-features > div.features-mail {
width: 96%;
}
section#site-features div.site-options button,
section#site-features div.site-maintenance button {
width: 86%;
}
section#site-features div.option-container span {
font-size: 0.7em;
}
}