mirror of
https://github.com/dpnmw/community-landing.git
synced 2026-03-18 09:27:16 +00:00
192 lines
7.7 KiB
CSS
192 lines
7.7 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════
|
|
Community Landing — Admin Settings Panel Styles
|
|
Tab navigation + fallback separators
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Tab-hidden class (used instead of inline display:none) ── */
|
|
|
|
.cl-tab-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ── Injected tabs inside native Discourse tab bar ── */
|
|
|
|
.admin-plugin-config-area__tabs.cl-tabs-injected {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.admin-plugin-config-area__tabs.cl-tabs-injected .cl-admin-tab {
|
|
padding: 10px 14px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--primary-medium, #888);
|
|
font-size: 0.875em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.admin-plugin-config-area__tabs.cl-tabs-injected .cl-admin-tab:hover {
|
|
color: var(--primary, #333);
|
|
}
|
|
|
|
.admin-plugin-config-area__tabs.cl-tabs-injected .cl-admin-tab.active {
|
|
color: var(--tertiary, #0088cc);
|
|
border-bottom-color: var(--tertiary, #0088cc);
|
|
}
|
|
|
|
/* Native "Settings" link — match our tab styling when active/inactive */
|
|
.admin-plugin-config-area__tabs.cl-tabs-injected .cl-native-settings-link {
|
|
transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.admin-plugin-config-area__tabs.cl-tabs-injected .cl-native-settings-link:not(.active) {
|
|
color: var(--primary-medium, #888);
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
/* Dimmed state when Discourse filter/search is active */
|
|
.admin-plugin-config-area__tabs.cl-filter-active .cl-admin-tab,
|
|
.admin-plugin-config-area__tabs.cl-filter-active .cl-native-settings-link {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.admin-plugin-config-area__tabs.cl-filter-active .cl-admin-tab.active,
|
|
.admin-plugin-config-area__tabs.cl-filter-active .cl-native-settings-link.active {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
/* Dark mode */
|
|
html.dark-scheme .admin-plugin-config-area__tabs.cl-tabs-injected .cl-admin-tab:hover {
|
|
color: var(--primary, #ddd);
|
|
}
|
|
|
|
/* ── Standalone tab bar (fallback for older Discourse without native tabs) ── */
|
|
|
|
.cl-admin-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0;
|
|
margin: 0 0 20px 0;
|
|
padding: 0;
|
|
border-bottom: 1px solid var(--primary-low, rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.cl-admin-tabs .cl-admin-tab {
|
|
padding: 10px 14px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--primary-medium, #888);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.cl-admin-tabs .cl-admin-tab:hover {
|
|
color: var(--primary, #333);
|
|
}
|
|
|
|
.cl-admin-tabs .cl-admin-tab.active {
|
|
color: var(--tertiary, #0088cc);
|
|
border-bottom-color: var(--tertiary, #0088cc);
|
|
}
|
|
|
|
.cl-admin-tabs.filter-active .cl-admin-tab {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.cl-admin-tabs.filter-active .cl-admin-tab.active {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
html.dark-scheme .cl-admin-tabs {
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
|
|
color: var(--primary, #ddd);
|
|
}
|
|
|
|
/* ── When tabs are active, remove separator borders ── */
|
|
|
|
.cl-tabs-active .row.setting[data-setting] {
|
|
border-top: none !important;
|
|
margin-top: 0 !important;
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
/* ── Fallback: Separator borders when tabs are NOT active ──
|
|
(e.g. if JS fails to load or on older Discourse) */
|
|
|
|
/* All plugin settings spacing */
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="community_landing_enabled"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="logo_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="accent_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="dark_bg_color"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="light_bg_color"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="scroll_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="navbar_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="hero_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="stats_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="stat_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="about_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="topics_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="contributors_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="groups_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="show_app_ctas"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="ios_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="android_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="app_"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="footer_"] {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Section separator borders (fallback only) */
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="logo_dark_url"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="accent_color"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="scroll_animation"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="navbar_signin_label"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="hero_title"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="stats_title"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="about_enabled"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="topics_enabled"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="contributors_enabled"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="groups_enabled"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="show_app_ctas"],
|
|
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="footer_description"] {
|
|
border-top: 2px solid rgba(0, 0, 0, 0.12);
|
|
margin-top: 28px;
|
|
padding-top: 24px;
|
|
}
|
|
|
|
/* Dark mode separators (fallback only) */
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="logo_dark_url"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="accent_color"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="scroll_animation"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="navbar_signin_label"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="hero_title"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="stats_title"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="about_enabled"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="topics_enabled"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="contributors_enabled"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="groups_enabled"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="show_app_ctas"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="footer_description"],
|
|
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="custom_css"] {
|
|
border-top-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
/* ── Tab content spacing ── */
|
|
|
|
.cl-tabs-active .row.setting[data-setting] {
|
|
margin-bottom: 16px;
|
|
}
|