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: 180px; 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; } 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; } }