/**
* Interface Frontend Flatboard — thème Meshpot
* Identité paper/ink du site Meshpot, layout forum large (~1400px).
*
* Based on Flatboard 5 default theme (GPL3).
* Project URL: https://meshpot.be
*/
:root {
--font-display: "Enby Gertrude", Georgia, "Times New Roman", serif;
--font-sans: "BBB Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "IBM Plex Mono", Menlo, Monaco, Consolas, monospace;
--text-sm: 0.72rem;
--bs-body-font-family: var(--font-sans);
--bs-primary: #8b7355;
--bs-secondary: #5c564e;
--bs-success: #5a7a4a;
--bs-danger: #a85a4a;
--bs-warning: #c4a574;
--bs-info: #6b7a8b;
--bs-white: #ffffff;
--primary-color: var(--bs-primary);
--secondary-color: var(--bs-secondary);
--success-color: var(--bs-success);
--danger-color: var(--bs-danger);
--warning-color: var(--bs-warning);
--info-color: var(--bs-info);
--bs-body-bg: #f7f4ef;
--bs-secondary-bg: #efeae2;
--bs-tertiary-bg: #ebe6dc;
--bg-primary: var(--bs-body-bg);
--bg-secondary: var(--bs-secondary-bg);
--bg-tertiary: var(--bs-tertiary-bg);
--bg-dark: #2a2622;
--bg-darker: #1c1b19;
--bg-highlight: rgba(139, 115, 85, 0.12);
--bg-highlight-dark: rgba(139, 115, 85, 0.18);
--bs-body-color: #2a2622;
--bs-secondary-color: #5c564e;
--text-primary: var(--bs-body-color);
--text-secondary: var(--bs-secondary-color);
--text-light: #8a8278;
--text-muted: #5c564e;
--text-white: var(--bs-white);
--bs-border-color: #d4cdc3;
--border-color: var(--bs-border-color);
--border-color-light: #e4ddd3;
--border-color-dark: #c4bdb3;
--bs-primary-rgb: 139, 115, 85;
--bs-secondary-rgb: 92, 86, 78;
--primary-color-rgb: var(--bs-primary-rgb);
--secondary-color-rgb: var(--bs-secondary-rgb);
--primary-color-dark: #6b5638;
--primary-color-darker: #4a3d28;
--secondary-color-dark: #3d3832;
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-pill: 50rem;
--radius-sm: var(--bs-border-radius-sm);
--radius: var(--bs-border-radius);
--radius-md: 0.75rem;
--radius-lg: var(--bs-border-radius-lg);
--radius-xl: var(--bs-border-radius-xl);
--radius-full: var(--bs-border-radius-pill);
/* Meshpot: no Flatboard elevation shadows */
--bs-box-shadow: none;
--bs-box-shadow-sm: none;
--bs-box-shadow-lg: none;
--shadow-sm: none;
--shadow: none;
--shadow-md: none;
--shadow-lg: none;
--bs-transition: all 0.3s ease-in-out;
--transition-fast: 0.15s ease-in-out;
--transition-base: 0.3s ease-in-out;
--transition-slow: 0.5s ease-in-out;
}
html[data-theme="light"],
[data-theme="light"] {
--bs-body-bg: var(--theme-bg-primary, #f7f4ef);
--bs-secondary-bg: var(--theme-bg-secondary, #efeae2);
--bs-tertiary-bg: var(--theme-bg-tertiary, #ebe6dc);
--bg-primary: var(--bs-body-bg);
--bg-secondary: var(--bs-secondary-bg);
--bg-tertiary: var(--bs-tertiary-bg);
--bg-dark: var(--theme-bg-dark, #2a2622);
--bg-darker: var(--theme-bg-darker, #1c1b19);
--bg-highlight: rgba(var(--bs-primary-rgb), 0.1);
--bg-highlight-dark: rgba(var(--bs-primary-rgb), 0.15);
--bs-body-color: var(--theme-text-primary, #2a2622);
--bs-secondary-color: var(--theme-text-secondary, #5c564e);
--text-primary: var(--bs-body-color);
--text-secondary: var(--bs-secondary-color);
--text-light: var(--theme-text-light, #8a8278);
--text-muted: var(--theme-text-muted, #5c564e);
--text-white: var(--bs-white);
--bs-border-color: var(--theme-border-color, #d4cdc3);
--border-color: var(--bs-border-color);
--border-color-light: var(--theme-border-color-light, #e4ddd3);
--border-color-dark: var(--theme-border-color-dark, #c4bdb3);
--bs-box-shadow: none;
--bs-box-shadow-sm: none;
--bs-box-shadow-lg: none;
--shadow-sm: none;
--shadow: none;
--shadow-md: none;
--shadow-lg: none;
}
[data-theme="light"] body,
[data-theme="light"] html {
background-color: var(--bs-body-bg) !important;
color: var(--bs-body-color) !important;
}
html[data-theme="dark"],
[data-theme="dark"] {
--bs-primary: #c4a574;
--primary-color: #c4a574;
--bs-primary-rgb: 196, 165, 116;
--primary-color-rgb: 196, 165, 116;
--primary-color-dark: #d4b88a;
--primary-color-darker: #e8d4b0;
--bs-body-bg: var(--dark-bg-primary, #1c1b19);
--bs-secondary-bg: var(--dark-bg-secondary, #262522);
--bs-tertiary-bg: var(--dark-bg-tertiary, #2f2d29);
--bg-primary: var(--bs-body-bg);
--bg-secondary: var(--bs-secondary-bg);
--bg-tertiary: var(--bs-tertiary-bg);
--bg-dark: var(--dark-bg-dark, #151412);
--bg-darker: var(--dark-bg-darker, #0e0d0c);
--bg-highlight: rgba(var(--bs-primary-rgb), 0.15);
--bg-highlight-dark: rgba(var(--bs-primary-rgb), 0.25);
--bs-body-color: var(--dark-text-primary, #e6e1d9);
--bs-secondary-color: var(--dark-text-secondary, #b8b0a4);
--text-primary: var(--bs-body-color);
--text-secondary: var(--bs-secondary-color);
--text-light: var(--dark-text-light, #8a8278);
--text-muted: var(--dark-text-muted, #b8b0a4);
--text-white: var(--bs-white);
--bs-border-color: #3d3a35;
--border-color: var(--bs-border-color);
--border-color-light: #2f2d29;
--border-color-dark: #4a4640;
--bs-box-shadow: none;
--bs-box-shadow-sm: none;
--bs-box-shadow-lg: none;
--shadow-sm: none;
--shadow: none;
--shadow-md: none;
--shadow-lg: none;
}
[data-theme="dark"] body,
[data-theme="dark"] html {
background-color: var(--bs-body-bg) !important;
color: var(--bs-body-color) !important;
}
* {
box-sizing: border-box;
}
html {
transition:
background-color 0.3s ease,
color 0.3s ease;
}
body {
font-family: var(--bs-body-font-family, var(--font-sans));
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
line-height: var(--bs-body-line-height, 1.6);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition:
background-color 0.3s ease,
color 0.3s ease;
min-height: 100vh;
margin: 0;
padding: 0;
}
.text-muted {
color: var(--text-muted) !important;
}
.text-secondary {
color: var(--bs-secondary-color) !important;
}
.text-primary-color {
color: var(--bs-body-color) !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--bs-body-color);
}
p {
color: var(--bs-body-color);
}
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg {
box-shadow: none !important;
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-full {
border-radius: var(--bs-border-radius-pill);
}
.hidden {
display: none !important;
}
.visible {
display: block !important;
}
.cursor-pointer {
cursor: pointer;
}
.d-none-inline {
display: none;
}
.emoji-large {
font-size: 1.1rem;
}
mark {
background: linear-gradient(135deg, #ffeb3b 0%, #ffc107 100%);
padding: 2px 4px;
border-radius: var(--bs-border-radius-sm);
font-weight: 600;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bs-secondary-bg);
border-radius: var(--bs-border-radius);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
border-radius: var(--bs-border-radius);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
135deg,
var(--primary-color-dark) 0%,
var(--primary-color-darker) 100%
);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn var(--bs-transition);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 3px solid var(--bs-primary);
border-top-color: transparent;
border-radius: var(--bs-border-radius-pill);
animation: spin 0.6s linear infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes toastSlideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes flatboardTooltipFadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.navbar {
box-shadow: var(--bs-box-shadow-sm);
transition: var(--bs-transition);
padding: var(--spacing-md) 0;
margin-bottom: 0;
}
.navbar .container,
.navbar .container-fluid {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
color: var(--bs-white) !important;
transition: transform var(--transition-fast);
}
.navbar-brand:hover {
transform: scale(1.05);
}
.navbar-nav {
display: flex;
align-items: center;
}
.navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
padding: var(--spacing-sm) var(--spacing-md) !important;
border-radius: var(--bs-border-radius);
transition: all var(--transition-fast);
margin: 0 var(--spacing-xs);
white-space: nowrap;
display: flex;
align-items: center;
min-height: 38px;
}
.navbar-nav .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--bs-white) !important;
transform: translateY(-2px);
}
.navbar-nav .nav-link .avatar {
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all var(--transition-fast);
}
.navbar-nav .nav-link:hover .avatar {
border-color: rgba(255, 255, 255, 0.6);
transform: scale(1.05);
}
.navbar-toggler {
border: none;
padding: var(--spacing-xs);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}
#notification-count {
position: absolute;
top: -6px;
right: -6px;
font-size: 0.65rem;
padding: 0.25em 0.5em;
border-radius: var(--bs-border-radius-pill);
animation: pulse 2s infinite;
min-width: 18px;
height: 18px;
line-height: 1.2;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px var(--bs-primary);
z-index: 10;
}
#notification-dropdown-menu {
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-lg);
box-shadow: var(--bs-box-shadow-lg);
margin-top: 0.5rem;
max-height: 500px;
overflow-y: auto;
padding: var(--spacing-sm);
min-width: 380px;
max-width: 480px;
}
#notification-dropdown-menu .dropdown-item,
#notification-dropdown-menu .dropdown-item-text {
padding: var(--spacing-sm) var(--spacing-md);
transition: background-color var(--transition-fast);
white-space: normal;
word-wrap: break-word;
border-radius: var(--radius-md);
margin-bottom: var(--spacing-xs);
line-height: 1.4;
}
#notification-dropdown-menu .dropdown-item-text:hover,
#notification-dropdown-menu .dropdown-item:hover {
background-color: var(--bs-tertiary-bg);
}
#notification-dropdown-menu strong {
color: var(--bs-body-color) !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
}
#notification-dropdown-menu .dropdown-item-text small {
color: var(--bs-secondary-color);
font-size: 0.75rem;
}
.notification-unread {
background-color: var(--bs-tertiary-bg);
border-left: 3px solid var(--bs-primary);
}
.search-container {
position: relative;
width: auto;
min-width: 250px;
max-width: 400px;
transition: var(--bs-transition);
display: flex;
align-items: center;
z-index: 1000;
}
.search-container.expanded {
min-width: 400px;
max-width: 600px;
}
#header-search-input {
padding: 0.625rem 1rem 0.625rem 2.75rem;
border-radius: var(--bs-border-radius-pill);
border: 2px solid var(--bs-border-color);
background-color: var(--bs-secondary-bg);
color: var(--bs-body-color);
transition: var(--bs-transition);
width: 100%;
height: 40px;
font-size: 0.9375rem;
box-shadow: var(--bs-box-shadow-sm);
}
#header-search-input:hover {
border-color: var(--border-color-dark);
background-color: var(--bs-tertiary-bg);
box-shadow: var(--bs-box-shadow);
}
#header-search-input:focus {
background-color: var(--bs-body-bg);
border-color: var(--bs-primary);
box-shadow:
0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25),
var(--bs-box-shadow);
outline: none;
}
#header-search-input::placeholder {
color: var(--text-muted);
opacity: 0.7;
}
.search-container .fa-search {
position: absolute;
left: 1rem;
color: var(--text-muted);
opacity: 0.8;
z-index: 1;
pointer-events: none;
}
#header-search-input:focus ~ .fa-search {
color: var(--bs-primary);
opacity: 1;
}
#search-results-dropdown {
background-color: var(--bs-body-bg);
border: 2px solid var(--bs-border-color);
border-radius: var(--radius-lg);
box-shadow: var(--bs-box-shadow-lg);
margin-top: 0.5rem;
width: 100%;
z-index: 1050;
max-height: 400px;
overflow-y: auto;
}
#search-results-dropdown .dropdown-item {
padding: var(--spacing-md);
transition: all var(--transition-fast);
white-space: normal;
word-wrap: break-word;
color: var(--bs-body-color);
border-bottom: 1px solid var(--border-color-light);
}
#search-results-dropdown .dropdown-item:hover {
background-color: var(--bs-tertiary-bg);
transform: translateX(4px);
}
.flatboard-banner {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
color: var(--bs-white);
margin: 0;
padding: 0;
border-bottom: none;
position: relative;
overflow: hidden;
}
.flatboard-banner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.flatboard-banner-content {
padding: var(--spacing-xl) var(--spacing-lg);
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.flatboard-banner-title {
color: var(--bs-white);
font-size: 2.5rem;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.flatboard-banner-description {
color: rgba(255, 255, 255, 0.95);
font-size: 1.15rem;
margin: var(--spacing-md) 0 0;
line-height: 1.6;
font-weight: 300;
}
.flatboard-banner-icon {
font-size: 4rem;
color: var(--bs-white);
opacity: 0.9;
margin-right: var(--spacing-lg);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.flatboard-banner-content .breadcrumb {
background: transparent !important;
padding: 0;
margin-bottom: 0;
margin-top: var(--spacing-md);
}
.flatboard-banner-content .breadcrumb-item {
color: rgba(255, 255, 255, 0.9) !important;
}
.flatboard-banner-content .breadcrumb-item a {
color: rgba(255, 255, 255, 0.9) !important;
text-decoration: none;
}
.flatboard-banner-content .breadcrumb-item a:hover {
opacity: 0.8;
text-decoration: underline;
}
.flatboard-banner-content .breadcrumb-item + .breadcrumb-item::before {
content: "/";
color: rgba(255, 255, 255, 0.7);
padding: 0 var(--spacing-xs);
}
/* Tag banner base — Meshpot section below sets étiquette hierarchy */
.flatboard-banner .flatboard-tag-banner {
border-radius: 2px;
font-weight: 500;
text-decoration: none;
}
main.container-fluid {
padding: var(--spacing-xl) 0;
min-height: calc(100vh - 200px);
margin-top: 0;
background-color: var(--bs-body-bg);
}
.container {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
.card {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
border-radius: var(--radius-lg);
box-shadow: var(--bs-box-shadow-sm);
transition: var(--bs-transition);
overflow: hidden;
margin-bottom: var(--spacing-md);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card.discussion {
overflow: visible;
position: relative;
z-index: 1;
}
.card.discussion:hover {
z-index: 10;
transform: none;
}
.card-header {
background: linear-gradient(
135deg,
var(--bs-tertiary-bg) 0%,
var(--bs-body-bg) 100%
);
border-bottom-color: var(--bs-border-color);
color: var(--bs-body-color);
padding: var(--spacing-lg);
font-weight: 600;
}
.card-header.bg-primary.text-white,
.card-header.bg-primary.text-white h5,
.card-header.bg-primary.text-white h5 *,
.card-header.bg-primary.text-white i {
color: #ffffff !important;
}
.card-header.bg-info.text-white,
.card-header.bg-info.text-white h5,
.card-header.bg-info.text-white h5 *,
.card-header.bg-info.text-white i {
color: #ffffff !important;
background-color: var(--bs-info) !important;
}
.card-header.bg-secondary.text-white,
.card-header.bg-secondary.text-white h5,
.card-header.bg-secondary.text-white h5 *,
.card-header.bg-secondary.text-white i {
color: #ffffff !important;
background-color: #495057 !important;
}
.card-body {
padding: var(--spacing-lg);
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
overflow: visible;
}
.category-card {
border-radius: var(--radius-lg);
overflow: hidden;
}
.category-card:hover {
transform: translateY(-4px);
box-shadow: var(--bs-box-shadow-lg);
}
.category-icon {
flex-shrink: 0;
}
.flatboard-sidebar-wrapper {
background-color: transparent;
min-height: calc(100vh - 200px);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-lg);
}
.flatboard-sidebar {
position: sticky;
top: var(--spacing-lg);
}
.flatboard-start-discussion {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
border: none;
font-weight: 600;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
transition: var(--bs-transition);
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.9rem;
}
.flatboard-start-discussion:hover {
transform: translateY(-2px);
box-shadow: var(--bs-box-shadow-lg);
background: linear-gradient(
135deg,
var(--primary-color-dark) 0%,
var(--primary-color-darker) 100%
);
}
.flatboard-nav {
margin-top: var(--spacing-lg);
}
.flatboard-nav-item {
display: flex;
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
color: var(--bs-secondary-color);
text-decoration: none;
border-radius: var(--radius-md);
margin-bottom: var(--spacing-xs);
transition: all var(--transition-fast);
font-weight: 500;
background-color: transparent;
}
.flatboard-nav-item:hover {
background-color: var(--bs-secondary-bg);
color: var(--bs-primary);
transform: translateX(4px);
}
.flatboard-nav-item.active {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
color: var(--bs-white);
font-weight: 600;
box-shadow: var(--bs-box-shadow-sm);
}
.flatboard-nav-item i {
width: 24px;
text-align: center;
margin-right: var(--spacing-sm);
}
.flatboard-content-wrapper {
background-color: transparent;
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
}
.flatboard-header {
margin-bottom: var(--spacing-xl);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.flatboard-header h2 {
color: var(--bs-body-color);
font-weight: 700;
margin: 0;
font-size: 1.75rem;
}
footer {
background: linear-gradient(
135deg,
var(--bg-dark) 0%,
var(--bg-darker) 100%
);
color: var(--text-light);
margin-top: var(--spacing-xl);
padding: var(--spacing-xl) 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
footer p {
margin: 0;
color: var(--text-light);
}
.empty-state,
.flatboard-empty-state {
padding: calc(var(--spacing-xl) * 2) var(--spacing-xl);
text-align: center;
color: var(--text-muted);
}
.empty-state i,
.flatboard-empty-state i {
font-size: 4rem;
opacity: 0.3;
margin-bottom: var(--spacing-lg);
color: var(--bs-primary);
}
.flatboard-discussions-list {
background-color: var(--bs-body-bg);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--bs-box-shadow-sm);
}
.flatboard-discussion-item {
display: flex;
align-items: flex-start;
padding: var(--spacing-lg);
border-bottom: 1px solid var(--border-color-light);
transition: all var(--transition-fast);
background-color: var(--bs-body-bg);
}
.flatboard-discussion-item:last-child {
border-bottom: none;
}
.flatboard-discussion-item:hover {
background-color: var(--bs-secondary-bg);
transform: translateX(4px);
}
.flatboard-discussion-item.unread {
border-left: 4px solid var(--bs-primary);
background: linear-gradient(
90deg,
rgba(var(--bs-primary-rgb), 0.05) 0%,
transparent 100%
);
}
.flatboard-discussion-item.pinned {
border-left: 4px solid var(--bs-warning);
background: linear-gradient(
90deg,
rgba(255, 193, 7, 0.05) 0%,
transparent 100%
);
}
.flatboard-discussion-avatar {
flex-shrink: 0;
width: 56px;
height: 56px;
margin-right: var(--spacing-lg);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
border-radius: var(--bs-border-radius-pill);
color: var(--bs-white);
font-size: 1.5rem;
box-shadow: var(--bs-box-shadow-sm);
}
.flatboard-discussion-content {
flex: 1;
min-width: 0;
}
.flatboard-discussion-title {
margin: 0 0 var(--spacing-sm);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.4;
}
.flatboard-discussion-title a {
color: var(--bs-body-color);
text-decoration: none;
transition: color var(--transition-fast);
}
.flatboard-discussion-title a:hover {
color: var(--bs-primary);
}
.flatboard-discussion-title .badge {
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
font-weight: 600;
line-height: 1;
}
/* Fix centrage icônes Font Awesome 7 dans les badges Bootstrap */
.flatboard-discussion-title .badge i,
.flatboard-discussion-title .badge svg {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
line-height: 1;
position: relative;
top: -1px;
}
.flatboard-discussion-meta {
font-size: 0.875rem;
color: var(--bs-secondary-color);
margin-bottom: var(--spacing-sm);
display: flex;
align-items: center;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.flatboard-discussion-excerpt {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.6;
margin-top: var(--spacing-sm);
}
.flatboard-discussion-sidebar {
flex-shrink: 0;
margin-left: var(--spacing-lg);
text-align: right;
min-width: 120px;
}
.flatboard-discussion-tags {
margin-bottom: var(--spacing-sm);
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
position: relative;
}
.flatboard-tag {
display: inline-block;
padding: 0.15rem 0.4rem;
border-radius: var(--bs-border-radius-pill);
background: rgba(108, 117, 125, 0.15);
color: #6c757d;
font-size: 0.65rem;
font-weight: 600;
text-decoration: none;
transition: margin 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
box-shadow: var(--bs-box-shadow-sm);
border: 1px solid #6c757d;
white-space: nowrap;
max-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
/* Grouped: each tag after the first overlaps the previous */
margin-left: -0.5rem;
outline: 2px solid var(--bs-body-bg, #fff);
outline-offset: -1px;
}
.flatboard-discussion-tags > .flatboard-tag:first-child,
.flatboard-discussion-tags > *:first-child {
margin-left: 0;
}
.flatboard-tag:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
z-index: 2;
}
/* Overflow popup — out-of-flow, no layout shift, click-toggled.
Position is overridden to fixed by JS (escapes overflow:hidden ancestors). */
.flatboard-tags-overflow {
display: none;
position: fixed;
flex-wrap: wrap;
gap: 0.3rem;
z-index: 30;
background: var(--bs-body-bg, #fff);
border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: var(--bs-border-radius, 0.375rem);
padding: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
min-width: 10rem;
max-width: 18rem;
justify-content: flex-start;
}
/* Arrow pointing down */
.flatboard-tags-overflow::after {
content: '';
position: absolute;
bottom: -5px;
right: 10px;
width: 8px;
height: 8px;
background: var(--bs-body-bg, #fff);
border-right: 1px solid var(--bs-border-color, #dee2e6);
border-bottom: 1px solid var(--bs-border-color, #dee2e6);
transform: rotate(45deg);
}
.flatboard-tags-overflow .flatboard-tag {
margin-left: 0;
outline: none;
}
/* Show popup when container has .open class (JS-toggled) */
.flatboard-discussion-tags.open .flatboard-tags-overflow {
display: flex;
}
.flatboard-tag-more {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.4rem;
border-radius: var(--bs-border-radius-pill);
background: rgba(108, 117, 125, 0.08);
color: var(--bs-secondary-color, #6c757d);
font-size: 0.65rem;
font-weight: 700;
border: 1px dashed rgba(108, 117, 125, 0.5);
cursor: pointer;
user-select: none;
margin-left: -0.5rem;
outline: 2px solid var(--bs-body-bg, #fff);
outline-offset: -1px;
/* Button reset */
background-color: rgba(108, 117, 125, 0.08);
line-height: 1;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.flatboard-tag-more:hover,
.flatboard-discussion-tags.open .flatboard-tag-more {
background-color: rgba(108, 117, 125, 0.18);
border-color: rgba(108, 117, 125, 0.8);
color: var(--bs-secondary-color, #6c757d);
}
/* Dark mode: outline matches dark background */
[data-bs-theme="dark"] .flatboard-tag,
[data-bs-theme="dark"] .flatboard-tag-more {
outline-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .flatboard-tags-overflow {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .flatboard-tags-overflow::after {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
}
.flatboard-discussion-stats {
color: var(--bs-secondary-color);
font-size: 0.875rem;
display: flex;
flex-direction: row;
gap: var(--spacing-sm);
justify-content: flex-end;
align-items: center;
}
.post-item {
border-radius: var(--radius-lg);
border: 1px solid var(--border-color-light);
background-color: var(--bs-body-bg);
box-shadow: var(--bs-box-shadow-sm);
transition: var(--bs-transition);
margin-bottom: var(--spacing-lg);
overflow: hidden;
}
.post-item:hover {
box-shadow: var(--shadow-md);
border-color: var(--bs-border-color);
}
.post-sidebar {
border-right: 1px solid var(--border-color-light);
padding: var(--spacing-lg);
background: linear-gradient(
180deg,
var(--bs-secondary-bg) 0%,
transparent 100%
);
}
.post-author-info {
position: sticky;
top: var(--spacing-lg);
text-align: center;
}
.post-content {
padding: var(--spacing-lg);
background-color: var(--bs-body-bg);
}
.post-header {
border-bottom: 1px solid var(--border-color-light);
padding-bottom: var(--spacing-md);
margin-bottom: var(--spacing-md);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.post {
line-height: 1.8;
color: var(--bs-body-color);
}
.post p {
margin-bottom: var(--spacing-md);
color: var(--bs-body-color) !important;
}
.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-md);
color: var(--bs-body-color) !important;
font-weight: 700;
}
.post code {
background-color: var(--bs-tertiary-bg);
padding: 2px 6px;
border-radius: var(--bs-border-radius-sm);
font-size: 0.9em;
color: var(--bs-primary);
font-weight: 500;
border: none !important;
}
.post pre {
background-color: var(--bg-dark);
color: var(--bs-white);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
overflow-x: auto;
box-shadow: var(--bs-box-shadow-sm);
border-left: 3px solid var(--bs-primary);
}
.post pre code {
background-color: transparent;
padding: 0;
color: inherit;
}
.post blockquote {
border-left: 4px solid var(--bs-primary);
padding-left: var(--spacing-lg);
margin: var(--spacing-md) 0;
color: var(--bs-secondary-color);
font-style: italic;
background-color: var(--bs-secondary-bg);
padding: var(--spacing-md);
border-radius: var(--bs-border-radius-sm);
}
.post ol,
.post ul {
color: var(--bs-body-color) !important;
margin: var(--spacing-md) 0;
padding-left: var(--spacing-xl);
}
.post ol li,
.post ul li {
color: var(--bs-body-color) !important;
margin-bottom: var(--spacing-xs);
line-height: 1.6;
}
.post img:not(.avatar) {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: var(--spacing-md) 0;
box-shadow: var(--bs-box-shadow-sm);
}
.post del {
text-decoration: line-through;
opacity: 0.7;
}
.post hr {
border: none;
border-top: 2px solid var(--bs-border-color);
margin: var(--spacing-lg) 0;
}
.post-highlighted {
background-color: var(--bg-highlight) !important;
border-left: 4px solid var(--bs-primary) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.post-edit-form {
display: none;
}
.form-control,
.form-select {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
border-radius: var(--bs-border-radius);
border: 2px solid var(--bs-border-color);
padding: var(--spacing-sm) var(--spacing-md);
transition: all var(--transition-fast);
}
.form-control:focus,
.form-select:focus {
background-color: var(--bs-body-bg);
border-color: var(--bs-primary);
color: var(--bs-body-color);
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
outline: none;
}
.form-control::placeholder,
.form-select::placeholder {
color: var(--text-muted);
opacity: 0.7;
}
.form-label {
font-weight: 600;
color: var(--bs-body-color);
margin-bottom: var(--spacing-sm);
}
.input-group-text {
background-color: var(--bs-tertiary-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
.btn {
border-radius: var(--radius-md);
font-weight: 500;
padding: var(--spacing-sm) var(--spacing-lg);
transition: var(--transition-fast);
border: none;
box-shadow: var(--bs-box-shadow-sm);
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-primary {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
color: var(--bs-white);
}
.btn-primary:hover {
background: linear-gradient(
135deg,
var(--primary-color-dark) 0%,
var(--primary-color-darker) 100%
);
}
.btn-secondary {
background: linear-gradient(
135deg,
var(--bs-secondary) 0%,
var(--secondary-color-dark) 100%
);
color: var(--bs-white);
}
.btn-outline-primary {
border: 2px solid var(--bs-primary);
color: var(--bs-primary);
background: transparent;
}
.btn-outline-primary:hover {
background: var(--bs-primary);
color: var(--bs-white);
}
.btn-outline-secondary {
border: 2px solid var(--bs-secondary);
color: var(--bs-secondary);
background: transparent;
}
.btn-outline-secondary:hover {
background: var(--bs-secondary);
color: var(--bs-white);
}
.btn-link {
color: var(--bs-primary);
}
.btn-link:hover {
color: var(--primary-color-dark);
}
.btn-icon {
background: none;
border: none;
color: var(--text-muted);
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
transition: all var(--transition-fast);
cursor: pointer;
}
.btn-icon:hover {
color: var(--bs-primary);
background-color: var(--bs-secondary-bg);
border-radius: var(--bs-border-radius);
}
.btn-icon i {
margin-right: 0.25rem;
}
.badge {
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--bs-border-radius-pill);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--bs-white);
}
.badge.bg-primary {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
) !important;
}
.badge.bg-secondary {
background: linear-gradient(
135deg,
var(--bs-secondary) 0%,
var(--secondary-color-dark) 100%
) !important;
}
.badge.bg-success {
background: var(--bs-success) !important;
}
.badge.bg-danger {
background: var(--bs-danger) !important;
}
.badge.bg-warning {
background: var(--bs-warning) !important;
color: #856404 !important;
}
.badge.bg-info {
background: var(--bs-info) !important;
}
.badge-pinned,
.badge-standard {
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
}
.alert {
border-radius: var(--radius-md);
border: none;
box-shadow: var(--bs-box-shadow-sm);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.alert-success {
background: linear-gradient(
135deg,
rgba(25, 135, 84, 0.25) 0%,
rgba(25, 135, 84, 0.2) 100%
);
border-left: 3px solid var(--bs-success);
color: var(--bs-success);
}
.alert-danger {
background: linear-gradient(
135deg,
rgba(220, 53, 69, 0.25) 0%,
rgba(220, 53, 69, 0.2) 100%
);
border-left: 3px solid var(--bs-danger);
color: var(--bs-danger);
}
.alert-warning {
background: linear-gradient(
135deg,
rgba(255, 193, 7, 0.25) 0%,
rgba(255, 193, 7, 0.2) 100%
);
border-left: 3px solid var(--bs-warning);
color: #856404;
}
.alert-info {
background: linear-gradient(
135deg,
rgba(13, 202, 240, 0.25) 0%,
rgba(13, 202, 240, 0.2) 100%
);
border-left: 3px solid var(--bs-info);
color: var(--bs-info);
}
.avatar {
border-radius: var(--bs-border-radius-pill);
object-fit: cover;
box-shadow: var(--bs-box-shadow-sm);
border: 3px solid var(--bs-body-bg);
}
.avatar-small {
width: 32px;
height: 32px;
}
.avatar-sm {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-dot {
position: relative;
}
.avatar-dot img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-detailed {
position: relative;
}
.avatar-detailed img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-upload-progress {
display: none;
}
.status-dot {
position: absolute;
bottom: 0;
right: 0;
width: 14px;
height: 14px;
border-radius: var(--bs-border-radius-pill);
border: 3px solid var(--bs-body-bg);
box-shadow: var(--bs-box-shadow-sm);
z-index: 1;
}
.status-dot.online {
background-color: var(--bs-success);
}
.status-dot.offline {
background-color: var(--bs-secondary);
}
.status-dot.red {
background-color: var(--bs-danger);
}
.status-dot.green {
background-color: var(--bs-success);
}
.status-dot.size-xs {
width: 8px;
height: 8px;
border-width: 1px;
}
.status-dot.size-sm {
width: 10px;
height: 10px;
}
.status-dot.size-md {
width: 16px;
height: 16px;
}
.status-dot.size-lg {
width: 20px;
height: 20px;
}
.avatar-status {
position: absolute;
bottom: 0;
right: 0;
border-radius: var(--bs-border-radius-pill);
border: 2px solid white;
box-shadow: var(--bs-box-shadow-sm);
z-index: 1;
}
.avatar-status.size-xs {
width: 8px;
height: 8px;
border-width: 1px;
}
.avatar-status.size-sm {
width: 10px;
height: 10px;
}
.avatar-status.size-md {
width: 16px;
height: 16px;
}
.avatar-status.size-lg {
width: 20px;
height: 20px;
}
.avatar-status.green {
background-color: var(--bs-success);
}
.avatar-status.red {
background-color: var(--bs-danger);
}
.group-icon-badge {
position: absolute;
border-radius: var(--bs-border-radius-pill);
border: 2px solid white;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.group-icon-badge i {
color: white;
}
.group-icon-badge.size-xs {
top: -2px;
left: -2px;
width: 10px;
height: 10px;
border-width: 1px;
}
.group-icon-badge.size-xs i {
font-size: 5px;
}
.group-icon-badge.size-sm {
top: -3px;
left: -3px;
width: 14px;
height: 14px;
border-width: 1.5px;
}
.group-icon-badge.size-sm i {
font-size: 7px;
}
.group-icon-badge.size-md {
top: -4px;
left: -4px;
width: 18px;
height: 18px;
}
.group-icon-badge.size-md i {
font-size: 9px;
}
.group-icon-badge.size-lg {
top: -4px;
left: -4px;
width: 20px;
height: 20px;
}
.group-icon-badge.size-lg i {
font-size: 10px;
}
.table {
color: var(--bs-body-color);
border-radius: var(--radius-lg);
overflow: hidden;
}
.table thead {
background: linear-gradient(
135deg,
var(--bs-tertiary-bg) 0%,
var(--bs-body-bg) 100%
);
}
.table thead th {
color: var(--bs-body-color);
border-bottom-color: var(--bs-border-color);
font-weight: 600;
padding: var(--spacing-md);
}
.table tbody tr {
background-color: var(--bs-body-bg);
transition: all var(--transition-fast);
}
.table tbody tr:hover {
background-color: var(--bs-tertiary-bg);
}
.table tbody td {
color: var(--bs-body-color);
border-bottom-color: var(--border-color-light);
padding: var(--spacing-md);
}
.col-width-25 {
width: 25%;
}
.col-width-35 {
width: 35%;
}
.col-width-40 {
width: 40%;
}
.dropdown-menu {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color);
border-radius: var(--radius-lg);
box-shadow: var(--bs-box-shadow-lg);
padding: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.dropdown-item {
color: var(--bs-body-color);
border-radius: var(--radius-md);
padding: var(--spacing-sm) var(--spacing-md);
transition: all var(--transition-fast);
}
.dropdown-item:hover {
background-color: var(--bs-tertiary-bg);
color: var(--bs-primary);
transform: translateX(4px);
}
.dropdown-item.text-danger:hover {
background-color: rgba(220, 53, 69, 0.1);
color: var(--bs-danger);
}
.dropdown-divider {
margin: var(--spacing-sm) 0;
border-color: var(--border-color-light);
}
.modal-backdrop {
z-index: 1040 !important;
pointer-events: auto !important;
}
.modal {
z-index: 1050 !important;
pointer-events: none !important;
}
.modal.fade.show,
.modal.show {
pointer-events: none !important;
}
.modal-dialog {
z-index: 1051 !important;
pointer-events: auto !important;
position: relative !important;
}
.modal-content {
z-index: 1052 !important;
pointer-events: auto !important;
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-radius: var(--radius-lg);
box-shadow: var(--bs-box-shadow-lg);
border: none;
}
.modal-header {
background: linear-gradient(
135deg,
var(--bs-tertiary-bg) 0%,
var(--bs-body-bg) 100%
);
border-bottom-color: var(--bs-border-color);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-footer {
border-top-color: var(--bs-border-color);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.modal .btn,
.modal .dropdown-item,
.modal .dropdown-toggle,
.modal .form-check-input,
.modal .form-control,
.modal a,
.modal button,
.modal input,
.modal select,
.modal textarea {
pointer-events: auto !important;
cursor: pointer !important;
}
.modal .btn-close,
.modal .close {
pointer-events: auto !important;
cursor: pointer !important;
z-index: 10004 !important;
}
.pagination {
gap: var(--spacing-xs);
}
.pagination .page-link {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
border-radius: var(--radius-md);
padding: var(--spacing-sm) var(--spacing-md);
transition: all var(--transition-fast);
}
.pagination .page-link:hover {
background-color: var(--bs-primary);
color: var(--bs-white);
border-color: var(--bs-primary);
transform: translateY(-2px);
}
.pagination .page-item.active .page-link {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
border-color: var(--bs-primary);
color: var(--bs-white);
}
.breadcrumb {
background-color: var(--bs-body-bg);
}
.breadcrumb-item a {
color: var(--bs-primary);
}
.breadcrumb-item.active {
color: var(--bs-secondary-color);
}
.list-group-item {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-xs);
transition: all var(--transition-fast);
padding: var(--spacing-md);
}
.list-group-item:hover {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
transform: translateX(4px);
}
.list-group-item.active {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
border-color: var(--bs-primary);
color: var(--bs-white);
}
.nav-tabs {
border-bottom-color: var(--bs-border-color);
}
.nav-tabs .nav-link {
color: var(--bs-body-color);
border-color: var(--bs-border-color);
}
.nav-tabs .nav-link:hover {
border-color: var(--border-color-dark);
background-color: var(--bs-tertiary-bg);
}
.nav-tabs .nav-link.active {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color) var(--bs-border-color)
var(--bs-body-bg);
color: var(--bs-body-color);
}
.progress {
height: 8px;
border-radius: var(--bs-border-radius-pill);
background-color: var(--bs-tertiary-bg);
overflow: hidden;
}
.progress-bar {
background: linear-gradient(
90deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
transition: width var(--bs-transition);
}
.reaction-picker {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
margin-top: var(--spacing-md);
}
.reaction-btn {
border: 2px solid var(--bs-border-color);
border-radius: var(--radius-md);
padding: var(--spacing-xs) var(--spacing-md);
background: var(--bs-body-bg);
transition: all var(--transition-fast);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.reaction-btn:hover {
background: var(--bs-secondary-bg);
border-color: var(--bs-primary);
transform: scale(1.05);
}
.reaction-btn.active {
background: linear-gradient(
135deg,
var(--bs-primary) 0%,
var(--primary-color-dark) 100%
);
border-color: var(--bs-primary);
color: var(--bs-white);
}
.reaction-btn .emoji {
font-size: 1.2rem;
}
.reaction-btn .count {
font-size: 0.875rem;
font-weight: 600;
}
.reaction-badge-display {
border-radius: var(--radius-lg);
padding: 0.25rem 0.75rem;
transition: all 0.2s;
cursor: pointer;
border: 1px solid var(--bs-border-color);
}
.reaction-badge-display:hover {
transform: scale(1.05);
}
.reaction-dropdown-menu {
display: none;
position: fixed;
z-index: 30;
background: var(--bs-body-bg, #fff);
border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: var(--bs-border-radius, 0.375rem);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
width: min(90vw, 320px);
max-height: 220px;
overflow-y: auto;
padding: 0.5rem;
}
.reaction-picker-circle {
width: 44px;
height: 44px;
padding: 0;
border: none;
border-radius: 50%;
background-color: var(--bs-secondary-bg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.reaction-picker-emoji {
font-size: 1.4rem;
line-height: 1;
}
.reaction-badge-container {
position: relative;
}
.reaction-users-tooltip {
display: none;
position: absolute;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
box-shadow: var(--bs-box-shadow-lg);
padding: 0.75rem;
min-width: 200px;
max-width: 300px;
max-height: 300px;
overflow-y: auto;
}
.reaction-users-tooltip.show {
display: block !important;
}
.reaction-users-header {
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--bs-border-color);
}
.reaction-users-content {
max-height: 250px;
overflow-y: auto;
}
.reaction-user-item {
display: flex;
align-items: center;
padding: 0.1rem 0;
font-size: 0.875rem;
}
.reaction-user-item img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.reaction-option {
cursor: pointer;
transition: all 0.2s;
}
.reaction-option:hover {
transform: scale(1.15) translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.reaction-modal-btn {
border-radius: var(--bs-border-radius-pill);
padding: 0.25rem 0.75rem;
transition: all 0.2s;
}
.reaction-modal-btn:hover {
transform: scale(1.05);
border-color: var(--bs-primary);
color: var(--bs-primary);
}
[data-theme="dark"] .reaction-users-tooltip {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
.tooltip {
font-size: 0.875rem;
}
.tooltip-inner {
background-color: var(--bg-dark);
color: var(--bs-white);
border-radius: var(--radius-md);
padding: var(--spacing-sm) var(--spacing-md);
}
.popover {
border: none;
border-radius: var(--radius-lg);
box-shadow: var(--bs-box-shadow-lg);
}
.popover-header {
background: linear-gradient(
135deg,
var(--bs-secondary-bg) 0%,
var(--bs-tertiary-bg) 100%
);
border-bottom: 1px solid var(--border-color-light);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
font-weight: 600;
}
.toast {
border: none;
border-radius: var(--radius-lg);
box-shadow: var(--bs-box-shadow-lg);
overflow: hidden;
background-color: var(--bs-body-bg);
}
.toast-header {
border-bottom: 1px solid var(--bs-border-color);
font-weight: 600;
padding: var(--spacing-md) var(--spacing-lg);
}
.toast-body {
padding: var(--spacing-lg);
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}
.toast-header.bg-success {
background: linear-gradient(
135deg,
var(--bs-success) 0%,
#1e7e34 100%
) !important;
color: white !important;
}
.toast-header.bg-danger {
background: linear-gradient(
135deg,
var(--bs-danger) 0%,
#c82333 100%
) !important;
color: white !important;
}
.toast-header.bg-warning {
background: linear-gradient(
135deg,
var(--bs-warning) 0%,
#e0a800 100%
) !important;
color: #856404 !important;
}
.toast-header.bg-info {
background: linear-gradient(
135deg,
var(--bs-info) 0%,
#138496 100%
) !important;
color: white !important;
}
.toast-container {
z-index: 9999;
}
.toast.show {
animation: toastSlideIn 0.3s ease-out;
}
.attachments-upload-area {
min-height: 60px;
display: flex;
align-items: center;
}
.attachments-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.attachment-item {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.attachment-item .btn-close {
font-size: 0.75rem;
margin-left: 0.5rem;
}
.permission-checkbox-admin {
border-color: var(--bs-danger) !important;
border-width: 2px !important;
}
.permission-checkbox-moderation {
border-color: var(--bs-warning) !important;
border-width: 2px !important;
}
.object-fit-contain {
object-fit: contain;
}
.object-fit-cover {
object-fit: cover;
}
.fade-in-on-scroll {
opacity: 0;
transform: translateY(20px);
transition:
opacity var(--bs-transition),
transform var(--bs-transition);
}
.fade-in-on-scroll.fade-in-visible {
opacity: 1;
transform: translateY(0);
}
img[data-src] {
opacity: 0;
transition: opacity var(--bs-transition);
background: var(--bs-secondary-bg);
min-height: 100px;
}
img[data-src].fade-in {
opacity: 1;
}
.discussion-header-flatboard {
background: var(--bs-body-bg);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
box-shadow: var(--bs-box-shadow-sm);
}
.discussion-title-flatboard {
font-size: 2rem;
font-weight: 700;
color: var(--bs-body-color);
line-height: 1.3;
margin-bottom: var(--spacing-md);
}
.discussion-meta-flatboard {
color: var(--bs-secondary-color);
font-size: 0.9rem;
}
.discussion-tags {
margin-bottom: var(--spacing-sm);
}
.discussion-tags .badge {
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
border-radius: var(--bs-border-radius);
font-weight: 500;
margin-right: var(--spacing-xs);
}
.discussion-actions-header {
flex-shrink: 0;
min-width: 120px;
}
.discussion-sidebar-flatboard {
position: sticky;
top: var(--spacing-lg);
}
.discussion-actions {
background: var(--bs-body-bg);
border-radius: var(--radius-lg);
padding: var(--spacing-md);
box-shadow: var(--bs-box-shadow-sm);
}
.flatboard-actions-card {
background: var(--bs-body-bg);
border-radius: var(--radius-lg);
transition: box-shadow var(--bs-transition);
}
.flatboard-actions-card:hover {
box-shadow: var(--shadow-md);
}
.flatboard-actions-card .card-body {
padding: var(--spacing-md);
}
.flatboard-actions-card .btn {
font-weight: 500;
transition: var(--bs-transition);
border-radius: var(--bs-border-radius);
position: relative;
overflow: hidden;
}
.flatboard-actions-card .btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition:
width 0.6s,
height 0.6s;
}
.flatboard-actions-card .btn:hover::before {
width: 300px;
height: 300px;
}
.flatboard-actions-card .btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.flatboard-actions-card .border-top {
border-color: var(--border-color-light) !important;
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
}
.flatboard-actions-card .form-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.flatboard-actions-card .form-select {
border-radius: var(--bs-border-radius);
border-color: var(--bs-border-color);
transition: var(--bs-transition);
font-weight: 500;
}
.flatboard-actions-card .form-select:hover {
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.1);
}
.flatboard-actions-card .form-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
.discussion-moderation-menu {
background: rgba(255, 193, 7, 0.15);
border: 1px solid rgba(255, 193, 7, 0.4);
border-radius: var(--radius-md);
padding: var(--spacing-md);
}
.discussion-moderation-menu .btn-group {
box-shadow: var(--bs-box-shadow-sm);
}
.post-actions-flatboard {
background: var(--bs-secondary-bg);
border-radius: var(--radius-md);
padding: var(--spacing-md);
}
.post-actions-members {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
align-items: center;
}
.post-actions-members .btn {
transition: all var(--transition-fast);
box-shadow: var(--bs-box-shadow-sm);
}
.post-actions-members .btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.post-actions-moderation {
background: rgba(255, 193, 7, 0.15);
border: 1px solid rgba(255, 193, 7, 0.4);
border-radius: var(--radius-md);
padding: var(--spacing-sm) var(--spacing-md);
}
.post-actions-moderation .btn-group {
box-shadow: var(--bs-box-shadow-sm);
}
.post-body-flatboard {
font-size: 1.05rem;
line-height: 1.7;
color: var(--bs-body-color) !important;
margin-bottom: var(--spacing-md);
}
.post-body-flatboard .mention {
background-color: var(--bs-primary);
color: var(--bs-white);
padding: 2px 6px;
border-radius: var(--bs-border-radius-sm);
text-decoration: none;
font-weight: 500;
transition: all var(--transition-fast);
}
.post-body-flatboard .mention:hover {
background-color: var(--primary-color-dark);
transform: translateY(-1px);
box-shadow: var(--bs-box-shadow-sm);
}
.post-navigation-flatboard {
background: var(--bs-body-bg);
border-radius: var(--radius-lg);
padding: var(--spacing-md);
margin-top: var(--spacing-lg);
box-shadow: var(--bs-box-shadow-sm);
}
.post-navigation-flatboard .list-group-item {
border: none;
padding: var(--spacing-sm) var(--spacing-md);
background: transparent;
}
.post-navigation-flatboard .list-group-item:hover {
background: var(--bs-secondary-bg);
border-radius: var(--bs-border-radius);
}
.posts-list-flatboard {
background: var(--bs-body-bg);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--bs-box-shadow-sm);
}
.post-stream-scrubber-column {
display: flex;
flex-direction: column;
height: 400px;
position: relative;
}
.post-scrubber-container {
position: relative;
height: 310px;
padding: var(--spacing-sm) 0;
display: flex;
flex-direction: column;
}
.post-scrubber-handle-track {
position: relative;
height: 100%;
width: 4px;
margin: 0 auto;
background-color: var(--bs-border-color);
border-radius: var(--bs-border-radius-sm);
}
.post-scrubber-info-panel {
background-color: var(--bs-secondary-bg);
border-radius: var(--bs-border-radius);
padding: var(--spacing-sm);
margin: var(--spacing-sm) 0;
box-shadow: var(--bs-box-shadow-sm);
text-align: center;
}
.post-scrubber-count {
font-weight: 600;
color: var(--bs-primary);
font-size: 1rem;
}
.post-scrubber-date,
.post-scrubber-user {
font-size: 0.875rem;
color: var(--bs-secondary-color);
margin-top: var(--spacing-xs);
}
.post-scrubber-user a {
color: var(--bs-primary);
text-decoration: none;
}
.post-scrubber-user a:hover {
text-decoration: underline;
}
.post-scrubber-handle {
position: absolute;
width: 100%;
height: 40px;
cursor: grab;
display: flex;
justify-content: center;
transition: transform var(--bs-transition);
z-index: 10;
}
.post-scrubber-handle-inner {
width: 12px;
height: 40px;
background-color: var(--bs-primary);
border-radius: var(--bs-border-radius);
box-shadow: var(--shadow-md);
transition: var(--bs-transition);
}
.post-scrubber-handle:active .post-scrubber-handle-inner,
.post-scrubber-handle:hover .post-scrubber-handle-inner {
width: 14px;
background-color: var(--primary-color-dark);
}
.post-scrubber-handle:active {
cursor: grabbing;
}
.post-scrubber-after,
.post-scrubber-before {
position: absolute;
left: 0;
right: 0;
z-index: -1;
transition: transform var(--bs-transition);
border-radius: var(--bs-border-radius-sm);
}
.post-scrubber-before {
top: 0;
background-color: var(--bs-primary);
opacity: 0.4;
}
.post-scrubber-after {
bottom: 0;
background-color: var(--text-muted);
opacity: 0.3;
}
.post-scrubber-unread {
position: absolute;
left: 0;
right: 0;
background-color: #e74c3c;
opacity: 0.7;
z-index: -2;
border-radius: var(--bs-border-radius-sm);
}
.post-scrubber-controls {
display: flex;
justify-content: space-between;
gap: var(--spacing-xs);
padding: var(--spacing-xs) 0;
}
.post-scrubber-button {
background: none;
border: none;
color: var(--bs-secondary-color);
cursor: pointer;
width: 30px;
height: 30px;
border-radius: var(--bs-border-radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: var(--bs-transition);
font-size: 0.875rem;
}
.post-scrubber-button:hover:not(.disabled):not(:disabled) {
background-color: var(--bs-secondary-bg);
color: var(--bs-primary);
}
.post-scrubber-button.disabled,
.post-scrubber-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#post-scrubber-card.sticky-top {
position: sticky;
top: var(--spacing-xl);
z-index: 100;
}
.unread-post {
border-left: 3px solid #e74c3c !important;
}
.reply-form-flatboard {
background: var(--bs-body-bg);
border-radius: var(--radius-lg);
box-shadow: var(--bs-box-shadow-sm);
padding: var(--spacing-lg);
position: relative;
overflow: visible;
display: none;
animation: fadeInUp 0.3s ease-out;
}
.reply-form-flatboard .CodeMirror-fullscreen,
.reply-form-flatboard .EasyMDEContainer.fullscreen,
.reply-form-flatboard .editor-toolbar.fullscreen {
position: fixed !important;
z-index: 9999 !important;
}
body.editor-fullscreen-active .reply-form-flatboard {
overflow: visible !important;
position: static !important;
}
.reply-placeholder-flatboard {
padding: var(--spacing-md);
background-color: transparent;
border: none;
border-radius: var(--radius-lg);
transition: var(--bs-transition);
cursor: pointer;
display: block;
}
.reply-placeholder-flatboard:hover {
background-color: var(--bs-secondary-bg);
}
.reply-placeholder-text {
padding: var(--spacing-sm) var(--spacing-md);
color: var(--text-muted) !important;
font-size: 0.875rem;
border-radius: var(--bs-border-radius);
background-color: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: all var(--transition-fast);
min-height: 40px;
display: flex;
align-items: center;
cursor: text;
}
.reply-placeholder-flatboard:hover .reply-placeholder-text {
color: var(--bs-secondary-color) !important;
background-color: var(--bs-tertiary-bg);
border-color: var(--border-color-light);
}
.reply-to-info {
display: none;
}
.PostQuote {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-md);
margin: var(--spacing-md) 0;
background-color: var(--bs-secondary-bg);
overflow: hidden;
}
.PostQuote-header {
display: flex;
align-items: center;
padding: var(--spacing-sm) var(--spacing-md);
background-color: var(--bs-tertiary-bg);
border-bottom: 1px solid var(--bs-border-color);
gap: var(--spacing-sm);
}
.PostQuote-author {
font-weight: 600;
color: var(--bs-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.PostQuote-author:hover {
color: var(--primary-color-dark);
text-decoration: underline;
}
.PostQuote-headerMeta {
margin-left: auto;
text-decoration: none;
color: var(--bs-secondary-color);
font-size: 0.875rem;
}
.PostQuote-headerMeta:hover {
color: var(--bs-body-color);
}
.PostQuote-content {
padding: var(--spacing-md);
color: var(--bs-body-color);
}
.PostQuote-content p {
margin-bottom: var(--spacing-sm);
}
.PostQuote-content p:last-child {
margin-bottom: 0;
}
/* Popover principal */
.PostMention-preview.popover {
--bs-popover-max-width: 350px;
--bs-popover-bg: var(--bs-body-bg, #fff);
--bs-popover-border-color: var(--bs-border-color, #dee2e6);
max-width: var(--bs-popover-max-width);
border: 1px solid var(--bs-popover-border-color);
border-radius: 0.5rem;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
background-color: var(--bs-popover-bg);
}
/* Corps du popover - padding optimisé */
.PostMention-preview .popover-body {
padding: 0;
}
/* Container de l'aperçu */
.PostMention-preview .PostPreview {
padding: 0.75rem;
}
/* Lien - enlever les effets de hover par défaut */
.PostMention-preview .PostPreview-link {
display: block;
color: inherit;
transition: background-color 0.15s ease;
border-radius: 0.375rem;
padding: 0.5rem;
margin: -0.5rem;
}
.PostMention-preview .PostPreview-link:hover {
background-color: var(--bs-secondary-bg, rgba(0, 0, 0, 0.03));
}
/* Avatar - override des styles inline */
.PostMention-preview .Avatar {
width: 32px !important;
height: 32px !important;
flex-shrink: 0;
border: 2px solid var(--bs-border-color, #dee2e6);
}
/* Nom d'utilisateur */
.PostMention-preview .username {
font-size: 0.875rem;
margin-bottom: 0.125rem;
line-height: 1.3;
}
/* Extrait du post */
.PostMention-preview .PostPreview-excerpt {
font-size: 0.813rem;
line-height: 1.4;
color: var(--bs-secondary-color, #6c757d) !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
/* Flèches du popover selon position [web:14][web:19] */
.PostMention-preview .popover-arrow::after {
border-color: transparent;
}
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
border-top-color: var(--bs-popover-bg);
}
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
border-bottom-color: var(--bs-popover-bg);
}
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
border-left-color: var(--bs-popover-bg);
}
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
border-right-color: var(--bs-popover-bg);
}
/* Animation d'apparition [web:14] */
.PostMention-preview {
animation: popoverSlideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popoverSlideIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.best-answer-link a {
transition: all 0.2s ease;
border: 1px solid rgba(25, 135, 84, 0.2);
}
.best-answer-link a:hover {
background-color: rgba(25, 135, 84, 0.15) !important;
transform: translateX(3px);
border-color: rgba(25, 135, 84, 0.4);
}
.flatboard-user-tooltip {
position: absolute;
display: none;
z-index: 10000;
pointer-events: auto;
min-width: 280px;
max-width: 320px;
animation: flatboardTooltipFadeIn 0.2s ease-out;
user-select: text;
cursor: default;
padding-top: 5px;
margin-top: -5px;
}
@keyframes flatboardTooltipFadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.flatboard-tooltip-content {
background: var(--bs-body-bg, var(--bg-primary, #fff));
border: 1px solid var(--bs-border-color, var(--border-color, #dee2e6));
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
[data-bs-theme="dark"] .flatboard-tooltip-content {
background: var(--dark-bg-secondary, #121212);
border-color: var(--bs-border-color, #495057);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.flatboard-tooltip-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--bs-body-bg, var(--bg-primary, #fff));
border-bottom: 1px solid
var(--bs-border-color, var(--border-color, #dee2e6));
}
[data-bs-theme="dark"] .flatboard-tooltip-header {
background: var(--dark-bg-secondary, #121212);
border-bottom-color: var(--bs-border-color, #495057);
}
.flatboard-tooltip-avatar {
position: relative;
flex-shrink: 0;
}
.flatboard-tooltip-avatar .rounded-circle,
.flatboard-tooltip-avatar img {
width: 64px !important;
height: 64px !important;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--bs-border-color, var(--border-color, #dee2e6));
}
.flatboard-tooltip-avatar > img {
width: 64px !important;
height: 64px !important;
}
.flatboard-status-indicator {
position: absolute;
bottom: 2px;
right: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--bs-body-bg, var(--bg-primary, #fff));
background: var(--bs-secondary, var(--secondary-color, #6c757d));
}
.flatboard-status-indicator.online {
background: var(--bs-success, var(--success-color, #198754));
}
[data-bs-theme="dark"] .flatboard-status-indicator {
border-color: var(--dark-bg-secondary, #121212);
}
.flatboard-tooltip-user-info {
flex: 1;
min-width: 0;
}
.flatboard-tooltip-username {
font-size: 16px;
font-weight: 600;
color: var(--bs-body-color, var(--text-primary, #212529));
margin-bottom: 4px;
word-break: break-word;
}
.flatboard-tooltip-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: var(--bs-white, var(--text-white, #fff));
margin-top: 4px;
}
.flatboard-tooltip-badge i {
font-size: 11px;
}
.flatboard-tooltip-stats {
display: flex;
gap: 0;
padding: 12px 16px;
background: var(--bs-secondary-bg, var(--bg-secondary, #f8f9fa));
border-bottom: 1px solid
var(--bs-border-color, var(--border-color, #dee2e6));
}
[data-bs-theme="dark"] .flatboard-tooltip-stats {
background: var(--dark-bg-tertiary, #2a2a2a);
border-bottom-color: var(--bs-border-color, #495057);
}
.flatboard-stat-item {
flex: 1;
text-align: center;
padding: 0 8px;
}
.flatboard-stat-item:not(:last-child) {
border-right: 1px solid var(--bs-border-color, var(--border-color, #dee2e6));
}
[data-bs-theme="dark"] .flatboard-stat-item:not(:last-child) {
border-right-color: var(--bs-border-color, #495057);
}
.flatboard-stat-value {
display: block;
font-size: 18px;
font-weight: 600;
color: var(--bs-primary, var(--primary-color, #0d6efd));
line-height: 1.2;
}
.flatboard-stat-label {
display: block;
font-size: 11px;
color: var(--bs-secondary-color, var(--text-secondary, #6c757d));
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
}
.flatboard-tooltip-meta {
padding: 12px 16px;
border-bottom: 1px solid
var(--bs-border-color, var(--border-color, #dee2e6));
}
[data-bs-theme="dark"] .flatboard-tooltip-meta {
border-bottom-color: var(--bs-border-color, #495057);
}
.flatboard-meta-item {
font-size: 13px;
color: var(--bs-secondary-color, var(--text-secondary, #6c757d));
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.flatboard-meta-item:last-child {
margin-bottom: 0;
}
.flatboard-meta-item i {
font-size: 12px;
width: 14px;
text-align: center;
}
.flatboard-tooltip-signature {
padding: 12px 16px;
border-bottom: 1px solid
var(--bs-border-color, var(--border-color, #dee2e6));
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
[data-bs-theme="dark"] .flatboard-tooltip-signature {
border-bottom-color: var(--bs-border-color, #495057);
}
.flatboard-signature-label {
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color, var(--text-secondary, #6c757d));
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
position: sticky;
top: 0;
background: var(--bs-body-bg, var(--bg-primary, #fff));
padding-bottom: 4px;
z-index: 1;
}
[data-bs-theme="dark"] .flatboard-signature-label {
background: var(--dark-bg-secondary, #121212);
color: var(--dark-text-secondary, #b0b0b0);
}
.flatboard-signature-content {
font-size: 13px;
color: var(--bs-body-color, var(--text-primary, #212529));
line-height: 1.5;
word-break: break-word;
font-style: italic;
}
[data-bs-theme="dark"] .flatboard-signature-content {
color: var(--dark-text-primary, #e0e0e0);
}
.flatboard-signature-content a {
color: var(--bs-primary, var(--primary-color, #0d6efd));
text-decoration: underline;
cursor: pointer;
}
.flatboard-signature-content a:hover {
color: var(--bs-primary, #0056b3);
text-decoration: underline;
}
.flatboard-signature-content strong {
font-weight: 600;
}
.flatboard-signature-content em {
font-style: italic;
}
.flatboard-signature-content code {
background: var(--bs-secondary-bg, var(--bg-secondary, #f8f9fa));
padding: 2px 4px;
border-radius: 3px;
font-size: 12px;
font-family: monospace;
}
[data-bs-theme="dark"] .flatboard-signature-content code {
background: var(--dark-bg-tertiary, #2a2a2a);
}
.flatboard-tooltip-footer {
padding: 10px 16px;
background: var(--bs-secondary-bg, var(--bg-secondary, #f8f9fa));
}
[data-bs-theme="dark"] .flatboard-tooltip-footer {
background: var(--dark-bg-tertiary, #2a2a2a);
}
.flatboard-tooltip-link {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--bs-primary, var(--primary-color, #0d6efd));
text-decoration: none;
transition: color 0.2s;
}
.flatboard-tooltip-link:hover {
color: var(--bs-primary, #0056b3);
text-decoration: underline;
}
.flatboard-tooltip-link i {
font-size: 12px;
}
@media (max-width: 991px) {
.flatboard-sidebar-wrapper {
min-height: auto;
margin-bottom: var(--spacing-lg);
}
.flatboard-content-wrapper {
padding: var(--spacing-md);
}
.flatboard-discussion-item {
flex-direction: column;
}
.flatboard-discussion-sidebar {
margin-left: 0;
margin-top: var(--spacing-md);
text-align: left;
width: 100%;
}
.search-container {
min-width: 200px;
max-width: 300px;
}
}
@media (max-width: 768px) {
.flatboard-header {
flex-direction: column;
align-items: flex-start;
}
.post-item {
flex-direction: column;
}
.post-sidebar {
border-right: none;
border-bottom: 1px solid var(--border-color-light);
}
.search-container {
width: 100%;
min-width: 100%;
max-width: 100%;
margin-top: var(--spacing-sm);
}
.container {
padding-left: var(--spacing-sm);
padding-right: var(--spacing-sm);
}
.flatboard-banner-title {
font-size: 1.75rem;
}
.flatboard-banner-icon {
font-size: 2.5rem;
margin-right: var(--spacing-md);
}
}
@media (max-width: 767.98px) {
#post-scrubber-card {
display: none !important;
}
}
[data-theme="dark"] .flatboard-tooltip-header,
[data-theme="dark"] .flatboard-tooltip-meta,
[data-theme="dark"] .flatboard-tooltip-signature {
border-bottom-color: var(--bs-border-color);
}
[data-theme="dark"] .flatboard-tooltip-stats {
background: var(--bs-secondary-bg);
border-bottom-color: var(--bs-border-color);
}
[data-theme="dark"] .flatboard-signature-label {
background: var(--bs-body-bg);
}
[data-theme="dark"] .flatboard-tooltip-footer {
background: var(--bs-secondary-bg);
}
/* ============================================
TOOLTIPS - Flèches (Arrows)
============================================ */
/* Fond du tooltip */
.tooltip-inner {
background-color: var(--bg-dark);
color: var(--bs-white);
}
/* Flèche du tooltip - Position TOP (flèche en bas) */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
border-top-color: var(--bg-dark) !important;
}
/* Flèche du tooltip - Position BOTTOM (flèche en haut) */
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
border-bottom-color: var(--bg-dark) !important;
}
/* Flèche du tooltip - Position LEFT (flèche à droite) */
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
border-left-color: var(--bg-dark) !important;
}
/* Flèche du tooltip - Position RIGHT (flèche à gauche) */
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
border-right-color: var(--bg-dark) !important;
}
/* ============================================
MODE SOMBRE - Ajustements
============================================ */
[data-theme="dark"] .tooltip-inner,
[data-bs-theme="dark"] .tooltip-inner {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
}
/* Mode sombre - Flèches */
[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-top .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
border-top-color: var(--bs-border-color) !important;
}
[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
border-bottom-color: var(--bs-border-color) !important;
}
[data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-start .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
border-left-color: var(--bs-border-color) !important;
}
[data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-end .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
border-right-color: var(--bs-border-color) !important;
}
/* ============================================
POPOVERS - Flèches (Arrows)
============================================ */
/* Flèche du popover - Position TOP */
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
border-top-color: var(--bs-body-bg) !important;
}
/* Flèche du popover - Position BOTTOM */
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
border-bottom-color: var(--bs-body-bg) !important;
}
/* Flèche du popover - Position LEFT */
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
border-left-color: var(--bs-body-bg) !important;
}
/* Flèche du popover - Position RIGHT */
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
border-right-color: var(--bs-body-bg) !important;
}
/* Bordure extérieure de la flèche du popover */
.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
border-top-color: var(--bs-border-color) !important;
}
.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
border-bottom-color: var(--bs-border-color) !important;
}
.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
border-left-color: var(--bs-border-color) !important;
}
.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
border-right-color: var(--bs-border-color) !important;
}
/* ============================================================
Bots / Visiteurs — Liste textuelle compacte
============================================================ */
.bot-card-wrap .list-group-item,
.visitor-card-wrap .list-group-item {
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-md);
transition: all 0.2s;
}
.bot-card-wrap .list-group-item:hover,
.visitor-card-wrap .list-group-item:hover {
background: var(--bs-secondary-bg);
transform: translateX(4px);
box-shadow: var(--shadow-sm);
}
/* Responsive mobile */
@media (max-width: 575px) {
.bot-card-wrap .list-group-item,
.visitor-card-wrap .list-group-item {
flex-direction: column;
align-items: flex-start !important;
gap: 0.5rem;
}
.bot-card-wrap .list-group-item > div:last-child,
.visitor-card-wrap .list-group-item > div:last-child {
text-align: left !important;
width: 100%;
}
}
/* ============================================================
Responsive — Contenu utilisateur sans débordement horizontal
Empêche les URLs/mots longs, images et tableaux collés de
provoquer un défilement horizontal sur mobile.
============================================================ */
.post-content,
.post-body-flatboard,
.message {
overflow-wrap: break-word;
word-break: break-word;
}
.post-content img,
.post-body-flatboard img,
.message img {
max-width: 100%;
height: auto;
}
.post-content table,
.post-body-flatboard table,
.message table {
display: block;
max-width: 100%;
overflow-x: auto;
}
/* Guard : pas de scroll horizontal parasite sur mobile (clip préserve position:sticky) */
html, body {
overflow-x: clip;
}
/* =========================================================
* Meshpot — fonts, wide layout, paper/ink accents
* ========================================================= */
@font-face {
font-family: "Enby Gertrude";
src: url("/assets/fonts/enby-gertrude/Enby_Gertrude_roman.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "BBB Open Sans";
src: url("/assets/fonts/bbb-open-sans/BBB-OpenSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
h1, h2, h3, h4, h5, h6,
.flatboard-banner-title,
.navbar-brand,
.card-title,
.discussion-title,
.forum-title {
font-family: var(--font-display);
letter-spacing: 0.01em;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) {
color: #6b5638;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover {
color: #4a3d28;
}
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) {
color: #d4b88a;
}
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover {
color: #e8d4b0;
}
/* Wide forum layout (~1400px), banner/navbar full-bleed */
.meshpot-wide,
main.container-fluid > .container,
main.container-fluid > .row,
.flatboard-content,
.discussions-list,
.forum-list,
.topic-list {
max-width: none;
}
main.container-fluid {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.navbar.navbar-expand-lg,
.flatboard-banner {
max-width: none;
width: 100%;
}
.navbar .container-fluid {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.card {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
box-shadow: none;
}
.card:hover {
box-shadow: none;
border-color: var(--bs-primary);
}
.btn-primary,
.bg-primary {
background-image: none;
}
.navbar.bg-primary,
.navbar.navbar-dark.bg-primary,
.navbar.navbar-expand-lg {
background: var(--bs-body-bg) !important;
background-image: none !important;
border-bottom: 1px solid var(--bs-border-color);
box-shadow: none;
padding: 1rem 0;
min-height: 3.25rem;
}
/* OpenHop Connect badges stay black/light — no override needed */
.ohc-badge,
[class*="openhop"] .badge {
box-shadow: none;
}
@media (max-width: 768px) {
main.container-fluid {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
/* =========================================================
* Meshpot chrome — site-header look, hide home banner, book footer
* ========================================================= */
.meshpot-banner-hidden,
.flatboard-banner.meshpot-banner-hidden {
display: none !important;
}
/* Hide forum home / generic title banner (fa-comments hero) */
.flatboard-banner:has(.flatboard-banner-icon.fa-comments) {
display: none !important;
}
/* Navbar → site-header feel */
.navbar.navbar-expand-lg,
.navbar.navbar-dark.bg-primary {
background: var(--bs-body-bg) !important;
background-image: none !important;
border-bottom: 1px solid var(--bs-border-color);
box-shadow: none;
padding: 1rem 0;
min-height: 3.25rem;
}
.navbar .container-fluid {
max-width: 1400px;
position: relative;
align-items: center;
min-height: 3.25rem;
}
.navbar-brand.site-brand,
.navbar-brand {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.15rem;
color: var(--bs-body-color) !important;
letter-spacing: 0.02em;
text-transform: none;
gap: 0.45rem;
align-items: flex-start !important;
line-height: 1.15;
text-decoration: none;
z-index: 3;
}
.navbar-brand i {
color: var(--bs-primary);
font-size: 0.95em;
line-height: 1;
transform: translateY(0.1rem);
margin: 0 !important;
}
.site-brand-text {
display: flex;
flex-direction: column;
gap: 0.12rem;
}
.site-brand-title {
line-height: 1.1;
color: var(--bs-body-color);
}
.site-brand-tagline {
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.03em;
color: var(--text-muted, #5c564e);
text-transform: none;
}
.navbar-toggler {
border-color: var(--bs-border-color);
}
.navbar-toggler-icon {
filter: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2842, 38, 34, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-theme="dark"] .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 225, 217, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Guide-like primary nav (forum list) — match guide .site-nav-link */
.navbar .navbar-nav.me-auto.site-nav-pages {
gap: 0.35rem 1rem;
align-items: center;
}
.navbar .navbar-nav.me-auto > .nav-item {
display: flex;
align-items: center;
}
.navbar .navbar-nav.me-auto .nav-link,
.navbar .navbar-nav.me-auto .site-nav-link,
.navbar.navbar-expand-lg .navbar-nav.me-auto .nav-link {
display: inline-flex;
align-items: center;
color: var(--text-muted, #5c564e) !important;
font-family: var(--font-sans);
font-size: var(--text-sm, 0.72rem) !important;
letter-spacing: 0.02em;
line-height: 1.2;
text-transform: none;
font-weight: 400;
padding: 0.2rem 0 !important;
margin: 0 !important;
min-height: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
text-decoration: none;
transition: color 0.15s ease;
white-space: nowrap;
box-shadow: none !important;
transform: none !important;
}
.navbar .navbar-nav.me-auto .nav-link:hover,
.navbar .navbar-nav.me-auto .nav-link:focus,
.navbar .navbar-nav.me-auto .site-nav-link:hover,
.navbar.navbar-expand-lg .navbar-nav.me-auto .nav-link:hover {
color: var(--bs-body-color) !important;
background: transparent !important;
background-color: transparent !important;
transform: none !important;
}
.navbar .navbar-nav.me-auto .nav-link.active,
.navbar .navbar-nav.me-auto .nav-link.is-active,
.navbar .navbar-nav.me-auto .nav-link[aria-current="page"] {
color: var(--bs-body-color) !important;
font-weight: 700;
background: transparent !important;
}
/* Create CTAs — search-pill chrome, guide nav text size (nav + empty state) */
.meshpot-create-pill,
.navbar .navbar-nav.me-auto .nav-link.meshpot-nav-new-discussion,
.navbar.navbar-expand-lg .navbar-nav.me-auto .nav-link.meshpot-nav-new-discussion {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.7rem !important;
border: 1px solid color-mix(in srgb, var(--bs-primary) 55%, var(--bs-border-color)) !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-secondary-bg)) !important;
background-color: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-secondary-bg)) !important;
color: var(--bs-primary) !important;
font-family: var(--font-sans);
font-size: var(--text-sm, 0.72rem) !important;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1.2;
text-transform: none;
text-decoration: none !important;
box-shadow: none !important;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.meshpot-create-pill:hover,
.meshpot-create-pill:focus,
.navbar .navbar-nav.me-auto .nav-link.meshpot-nav-new-discussion:hover,
.navbar .navbar-nav.me-auto .nav-link.meshpot-nav-new-discussion:focus,
.navbar.navbar-expand-lg .navbar-nav.me-auto .nav-link.meshpot-nav-new-discussion:hover {
border-color: var(--bs-primary) !important;
background: color-mix(in srgb, var(--bs-primary) 24%, var(--bs-secondary-bg)) !important;
background-color: color-mix(in srgb, var(--bs-primary) 24%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
transform: none !important;
}
.meshpot-create-pill.active,
.meshpot-create-pill.is-active,
.meshpot-create-pill[aria-current="page"],
.navbar .navbar-nav.me-auto .nav-link.meshpot-nav-new-discussion.active,
.navbar .navbar-nav.me-auto .nav-link.meshpot-nav-new-discussion.is-active,
.navbar .navbar-nav.me-auto .nav-link.meshpot-nav-new-discussion[aria-current="page"] {
border-color: var(--bs-primary) !important;
background: color-mix(in srgb, var(--bs-primary) 28%, var(--bs-secondary-bg)) !important;
background-color: color-mix(in srgb, var(--bs-primary) 28%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
font-weight: 600;
}
.flatboard-empty-state .meshpot-create-pill {
margin-top: 0.25rem;
padding: 0.35rem 1rem !important;
}
.navbar .navbar-nav.me-auto .flatboard-nav-unread {
font-size: 0.58rem;
vertical-align: middle;
}
/* Auth / account links: quieter than primary nav */
.navbar .navbar-nav.flex-shrink-0 > .nav-item > .nav-link:not(.btn) {
color: var(--text-muted, #5c564e) !important;
font-size: 0.72rem;
letter-spacing: 0.02em;
font-weight: 400;
padding: 0.25rem 0.35rem !important;
min-height: 0 !important;
background: transparent !important;
transform: none !important;
}
.navbar .navbar-nav.flex-shrink-0 > .nav-item > .nav-link:not(.btn):hover {
color: var(--bs-body-color) !important;
background: transparent !important;
transform: none !important;
}
.navbar .navbar-nav.flex-shrink-0 > .nav-item > .nav-link:not(.btn) i {
font-size: 0.7em;
opacity: 0.75;
}
.navbar .btn-outline-light {
border-color: var(--bs-border-color);
color: var(--bs-body-color) !important;
font-size: 0.72rem;
padding: 0.2rem 0.55rem !important;
}
.navbar .btn-outline-light:hover {
background: var(--bs-secondary-bg);
border-color: var(--bs-primary);
color: var(--bs-body-color) !important;
}
.navbar #theme-toggle,
.navbar #theme-toggle.nav-link {
color: var(--text-muted, #5c564e) !important;
}
/* Search + theme cluster ≈ guide page-controls (top-right) */
.navbar .meshpot-page-controls {
list-style: none;
margin: 0 0 0 0.5rem;
padding: 0;
}
.navbar .meshpot-page-controls-inner {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
/* Search pill ≈ language switcher */
.navbar .search-container.meshpot-search,
.navbar .meshpot-search.search-container {
position: relative;
display: inline-flex;
align-items: center;
width: auto;
min-width: 0;
max-width: none;
padding: 0.12rem;
border: 1px solid var(--bs-border-color);
border-radius: 999px;
background: var(--bs-secondary-bg);
box-shadow: none;
z-index: 1040;
transition: border-color 0.15s ease, background 0.15s ease;
}
.navbar .meshpot-search.expanded {
min-width: 0;
max-width: none;
}
.navbar .meshpot-search #header-search-input,
.navbar .meshpot-search .form-control {
width: 7.5rem;
height: auto;
min-height: 0;
padding: 0.18rem 0.55rem 0.18rem 1.45rem;
border: 0 !important;
border-radius: 999px;
background: transparent !important;
color: var(--text-muted, #5c564e);
box-shadow: none !important;
font-family: var(--font-mono, "IBM Plex Mono", Menlo, monospace);
font-size: 0.58rem;
letter-spacing: 0.06em;
line-height: 1.2;
transition: width 0.2s ease, color 0.15s ease;
}
.navbar .meshpot-search #header-search-input:hover,
.navbar .meshpot-search #header-search-input:focus {
width: 11rem;
color: var(--bs-body-color);
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: none;
}
.navbar .meshpot-search #header-search-input::placeholder {
color: var(--text-muted, #5c564e);
opacity: 0.85;
letter-spacing: 0.06em;
}
.navbar .meshpot-search .meshpot-search-icon,
.navbar .meshpot-search .fa-search,
.navbar .meshpot-search .search-icon {
position: absolute;
left: 0.55rem;
top: 50%;
transform: translateY(-50%);
margin: 0 !important;
font-size: 0.55rem;
color: var(--text-muted, #5c564e);
opacity: 0.85;
pointer-events: none;
z-index: 1;
}
.navbar .meshpot-search #header-search-input:focus ~ .meshpot-search-icon,
.navbar .meshpot-search #header-search-input:focus ~ .fa-search {
color: var(--bs-primary);
opacity: 1;
}
.navbar .meshpot-search:focus-within {
border-color: var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
}
.navbar .meshpot-search #search-results-dropdown {
left: 0;
right: auto;
min-width: 16rem;
width: max(16rem, 100%);
margin-top: 0.35rem;
border-radius: 0.65rem;
border-width: 1px;
}
@media (min-width: 992px) {
.navbar .navbar-collapse {
position: static;
display: flex !important;
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
/* Brand absolute left (guide site-header) */
.navbar .navbar-brand.site-brand,
.navbar .navbar-brand {
position: absolute;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
z-index: 3;
}
/* Center forum links like guide site-nav */
.navbar .navbar-nav.me-auto.site-nav-pages {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
flex-wrap: nowrap;
margin: 0 !important;
z-index: 1;
gap: 0.35rem 1rem;
}
.navbar .navbar-nav.flex-shrink-0 {
margin-left: auto;
position: relative;
z-index: 2;
flex-shrink: 0;
}
.navbar .meshpot-page-controls {
margin-left: 0.75rem;
}
}
@media (max-width: 991.98px) {
.navbar-brand.site-brand {
align-items: center !important;
position: static;
transform: none;
}
}
/* Book footer on forum */
footer.book-footer.meshpot-forum-footer,
.meshpot-forum-footer.book-footer {
margin-top: 2.5rem;
padding: 1.25rem 1.25rem 2rem;
border-top: 1px solid var(--bs-border-color);
background: transparent !important;
color: var(--text-muted, #5c564e);
font-size: 0.72rem;
max-width: none;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Guide-like centered content column for footer */
.meshpot-forum-footer .book-footer-inner.content-column,
.meshpot-forum-footer .content-column {
max-width: 42rem;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.meshpot-forum-footer .book-footer-inner {
width: 100%;
}
.meshpot-forum-footer .book-footer-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
text-transform: uppercase;
font-size: 0.68rem;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
color: var(--text-muted, #5c564e);
}
.meshpot-forum-footer .footer-sitemap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 1.25rem 2rem;
text-transform: none;
letter-spacing: normal;
}
.meshpot-forum-footer .footer-sitemap__title {
margin: 0 0 0.4rem;
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 400;
color: var(--bs-body-color);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.meshpot-forum-footer .footer-sitemap__list {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.55;
}
.meshpot-forum-footer .footer-sitemap__list a {
color: var(--text-muted, #5c564e);
text-decoration: none;
}
.meshpot-forum-footer .footer-sitemap__list a:hover,
.meshpot-forum-footer .footer-sitemap__list a:focus-visible {
color: var(--bs-primary);
text-decoration: underline;
}
.meshpot-forum-footer .footer-sitemap__list a[aria-current="page"] {
color: var(--bs-primary);
font-weight: 600;
}
/* =========================================================
* Meshpot surfaces — title-page banners, cards, buttons
* ========================================================= */
/* --- Banner = guide .title-page --- */
.flatboard-banner {
background: transparent !important;
background-image: none !important;
color: var(--bs-body-color);
margin: 0;
padding: 0;
border-bottom: none !important;
position: relative;
overflow: visible;
}
.flatboard-banner::before {
display: none !important;
}
/* Guide section-break under forum headers */
.flatboard-banner.meshpot-banner-section-break + .section-break,
.section-break {
margin: 0.75rem auto 1.75rem;
width: 4rem;
position: relative;
text-align: center;
}
.section-break::before {
content: "· · ·";
color: var(--bs-primary);
font-size: 0.85rem;
letter-spacing: 0.35em;
}
.flatboard-banner-content {
padding: 2.5rem 1.25rem 0.75rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.flatboard-banner-content.text-center {
text-align: center;
}
.flatboard-banner-title,
.flatboard-banner .banner-title-large {
font-family: var(--font-display) !important;
font-size: 2.5rem !important;
font-weight: 400 !important;
letter-spacing: 0.03em;
line-height: 1.2;
color: var(--bs-body-color) !important;
text-shadow: none !important;
margin: 0 0 0.5rem !important;
}
.flatboard-banner-description {
font-family: var(--font-sans);
font-size: 0.98rem !important;
font-weight: 400 !important;
color: var(--text-muted, #5c564e) !important;
line-height: 1.55;
margin: 0.25rem 0 0 !important;
opacity: 1 !important;
}
.flatboard-banner-icon {
font-size: 1.35rem !important;
color: var(--bs-primary) !important;
opacity: 1 !important;
margin-right: 0.45rem !important;
filter: none !important;
line-height: 1;
align-self: center;
}
.flatboard-banner-content .breadcrumb {
background: transparent !important;
padding: 0;
margin-top: 0.75rem;
justify-content: center;
}
.flatboard-banner-content.text-start .breadcrumb,
.flatboard-banner-content.py-4:not(.text-center) .breadcrumb {
justify-content: flex-start;
}
.flatboard-banner-content .breadcrumb-item,
.flatboard-banner-content .breadcrumb-item a {
color: var(--text-muted, #5c564e) !important;
}
.flatboard-banner-content .breadcrumb-item a:hover {
color: var(--bs-primary) !important;
opacity: 1;
}
.flatboard-banner-content .breadcrumb-item + .breadcrumb-item::before {
color: var(--text-muted, #5c564e) !important;
}
/* Forum (category) — larger reference chip */
.flatboard-banner .badge-banner {
background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
border: 1px solid var(--bs-border-color) !important;
border-radius: 2px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
font-size: 0.8rem !important;
font-weight: 500;
text-transform: none;
letter-spacing: 0.02em;
padding: 0.28rem 0.65rem !important;
box-shadow: none !important;
}
/* Status badges in banner (pinned / locked / solved) — keep readable, not tiny tags */
.flatboard-banner .badge:not(.badge-banner) {
background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
border: 1px solid var(--bs-border-color) !important;
border-radius: 2px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
font-weight: 400;
text-transform: none;
box-shadow: none !important;
}
/* Discussion tags — compact étiquettes; keep Flatboard inline colors (no bg/color !important) */
.flatboard-banner .flatboard-tag-banner {
font-size: 0.62rem !important;
line-height: 1.25;
font-weight: 500;
text-transform: none;
letter-spacing: 0.02em;
padding: 0.12rem 0.4rem !important;
border-radius: 2px !important;
border-style: solid !important;
border-width: 1px 1px 1px 3px !important;
/* border-color / background / color: Flatboard inline wins (no !important) */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
outline: none !important;
margin-left: 0 !important;
max-width: 12rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flatboard-banner .flatboard-tag-banner:hover {
opacity: 0.9;
transform: none !important;
box-shadow: none !important;
}
.flatboard-banner-stats .badge {
background: var(--bs-secondary-bg) !important;
color: var(--text-muted, #5c564e) !important;
border: 1px solid var(--bs-border-color) !important;
border-radius: 2px !important;
}
@media (max-width: 768px) {
.flatboard-banner-title,
.flatboard-banner .banner-title-large {
font-size: 1.85rem !important;
}
}
/* --- Cards / content boxes = guide device-card / link-card --- */
.card,
.list-group-item,
.discussion-card,
.forum-card,
.category-card,
.flatboard-actions-card,
.sidebar .card,
.modal-content,
.dropdown-menu,
.alert,
.search-container .form-control,
.form-control,
.form-select,
.input-group-text {
border-radius: 2px !important;
}
.card {
background-color: var(--bs-secondary-bg) !important;
border: 1px solid var(--bs-border-color) !important;
box-shadow: none !important;
color: var(--bs-body-color);
transition: border-color 0.15s ease;
}
.card:hover,
.card.discussion:hover {
box-shadow: none !important;
border-color: var(--bs-primary) !important;
transform: none !important;
}
.card-header {
background-color: transparent !important;
border-bottom: 1px solid var(--bs-border-color) !important;
color: var(--bs-body-color) !important;
}
.card-header.bg-primary,
.card-header.bg-primary.text-white,
.card-header.bg-info,
.card-header.bg-info.text-white,
.card-header.bg-secondary,
.card-header.bg-secondary.text-white {
background-color: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
border-bottom-color: var(--bs-border-color) !important;
}
.card-header.bg-primary.text-white h5,
.card-header.bg-primary.text-white h5 *,
.card-header.bg-primary.text-white i,
.card-header.bg-info.text-white h5,
.card-header.bg-info.text-white h5 *,
.card-header.bg-info.text-white i,
.card-header.bg-secondary.text-white h5,
.card-header.bg-secondary.text-white h5 *,
.card-header.bg-secondary.text-white i {
color: var(--bs-body-color) !important;
}
.card-title,
.card-header h5,
.discussion-title,
.forum-title {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--bs-body-color);
}
.card-body {
color: var(--bs-body-color);
}
.list-group-item {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
.list-group-item:hover,
.list-group-item-action:hover {
background-color: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-secondary-bg));
border-color: var(--bs-border-color);
}
.modal-content {
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: none;
}
.dropdown-menu {
background-color: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
box-shadow: none;
}
/* Sidebar nav pills → quieter Meshpot boxes */
.sidebar .nav-link.active,
.forum-sidebar .nav-link.active,
.list-group-item.active,
a.btn.btn-primary,
.btn-primary {
border-radius: 2px !important;
}
/* --- Buttons = accent fill, sharp corners, no gradient lift --- */
.btn {
border-radius: 2px !important;
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0.02em;
box-shadow: none !important;
text-transform: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover,
.btn:focus {
transform: none !important;
box-shadow: none !important;
}
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
background: var(--bs-primary) !important;
background-image: none !important;
border: 1px solid var(--bs-primary) !important;
color: #fff !important;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary:active {
color: #1c1b19 !important;
}
.btn-primary:hover {
background: var(--primary-color-dark, #6b5638) !important;
background-image: none !important;
border-color: var(--primary-color-dark, #6b5638) !important;
color: #fff !important;
}
[data-theme="dark"] .btn-primary:hover {
background: #d4b88a !important;
border-color: #d4b88a !important;
color: #1c1b19 !important;
}
.btn-secondary {
background: var(--bs-secondary-bg) !important;
background-image: none !important;
border: 1px solid var(--bs-border-color) !important;
color: var(--bs-body-color) !important;
}
.btn-secondary:hover {
border-color: var(--bs-primary) !important;
background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
}
.btn-outline-primary {
background: transparent !important;
border: 1px solid var(--bs-primary) !important;
color: var(--bs-primary) !important;
}
.btn-outline-primary:hover {
background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg)) !important;
color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
}
.btn-outline-secondary,
.btn-outline-light {
background: transparent !important;
border: 1px solid var(--bs-border-color) !important;
color: var(--bs-body-color) !important;
}
.btn-outline-secondary:hover,
.btn-outline-light:hover {
background: var(--bs-secondary-bg) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important;
}
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
background-image: none !important;
border-radius: 2px !important;
box-shadow: none !important;
}
.badge,
.flatboard-tag:not(.flatboard-tag-banner),
.discussion-tags .badge {
border-radius: 2px !important;
font-weight: 500;
letter-spacing: 0.04em;
border: 1px solid var(--bs-border-color);
background-color: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
text-transform: uppercase;
font-size: 0.65rem;
box-shadow: none !important;
}
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-info,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger {
border-color: var(--bs-border-color) !important;
}
.badge.bg-primary {
background-color: color-mix(in srgb, var(--bs-primary) 22%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
}
.form-control,
.form-select {
background-color: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-body-color);
box-shadow: none !important;
}
.form-control:focus,
.form-select:focus {
border-color: var(--bs-primary);
box-shadow: none !important;
background-color: var(--bs-body-bg);
}
/* Sidebar primary CTA */
.sidebar .btn-primary,
.forum-sidebar .btn-primary,
a.btn-primary.w-100 {
background: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
}
/* Sidebar CTA + nav — guide floating page-toc */
.flatboard-start-discussion,
.btn-success.flatboard-start-discussion,
a.flatboard-start-discussion {
/* Fallback before chrome.js rewrites CTA */
display: inline-block;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--bs-primary) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: var(--font-display);
font-weight: 400;
font-size: 0.6rem;
padding: 0;
text-decoration: none;
width: auto !important;
margin-bottom: 0.5rem !important;
}
[data-theme="dark"] .flatboard-start-discussion,
[data-theme="dark"] .btn-success.flatboard-start-discussion {
color: var(--bs-primary) !important;
}
.flatboard-start-discussion:hover,
.btn-success.flatboard-start-discussion:hover {
background: transparent !important;
border: 0 !important;
transform: none !important;
box-shadow: none !important;
color: var(--bs-body-color) !important;
}
[data-theme="dark"] .flatboard-start-discussion:hover {
background: transparent !important;
color: var(--bs-body-color) !important;
}
.flatboard-sidebar-wrapper,
.flatboard-sidebar-wrapper.meshpot-sidebar-wrapper {
padding: 0.85rem 1rem 1rem 0.25rem;
min-height: 0;
border-radius: 0;
background: transparent !important;
}
.flatboard-sidebar.meshpot-sidebar,
.meshpot-sidebar.flatboard-sidebar {
position: sticky;
top: 5.5rem;
background: transparent !important;
}
.flatboard-nav.meshpot-page-toc,
.meshpot-page-toc.flatboard-nav,
.flatboard-nav.page-toc {
margin-top: 0;
}
.flatboard-nav.page-toc .page-toc-list,
.flatboard-nav.page-toc ul.list-unstyled {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.flatboard-nav .meshpot-toc-heading,
.meshpot-page-toc .meshpot-toc-heading {
display: block;
align-items: unset;
padding: 0 0 0.4rem !important;
margin: 0 0 0.55rem !important;
color: var(--bs-body-color) !important;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
text-decoration: none;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid var(--bs-border-color) !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
.flatboard-nav .meshpot-toc-heading:hover,
.meshpot-page-toc .meshpot-toc-heading:hover {
color: var(--bs-body-color) !important;
background: transparent !important;
border-bottom-color: var(--bs-border-color) !important;
transform: none !important;
}
.flatboard-nav .meshpot-toc-heading-item {
margin-bottom: 0.15rem;
}
.flatboard-nav .flatboard-nav-item.page-toc-link,
.flatboard-nav .page-toc-link {
display: block;
align-items: unset;
padding: 0 0 0 0.4rem !important;
margin: 0 0 0 -0.4rem !important;
color: var(--bs-secondary-color, var(--text-secondary, #5c564e)) !important;
font-size: 0.88rem;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-left: 2px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
transition: color 0.15s ease, border-color 0.15s ease;
}
.flatboard-nav .flatboard-nav-item.page-toc-link:hover,
.flatboard-nav .page-toc-link:hover {
color: var(--bs-body-color) !important;
background: transparent !important;
border-color: transparent !important;
transform: none !important;
}
.flatboard-nav .flatboard-nav-item.page-toc-link.active,
.flatboard-nav .flatboard-nav-item.page-toc-link.is-active,
.flatboard-nav .page-toc-link.active,
.flatboard-nav .page-toc-link.is-active {
color: var(--bs-body-color) !important;
font-weight: 700;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-left: 2px solid var(--bs-primary) !important;
box-shadow: none !important;
}
.flatboard-nav .flatboard-nav-item.page-toc-link i,
.flatboard-nav .page-toc-link i {
display: none !important;
}
/* Desktop: floating TOC like guide (56rem) */
@media (min-width: 56rem) {
.flatboard-sidebar-wrapper.meshpot-sidebar-wrapper,
.meshpot-chrome .flatboard-sidebar-wrapper {
flex: 0 0 0 !important;
width: 0 !important;
max-width: 0 !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
border: 0 !important;
}
.flatboard-sidebar.meshpot-sidebar,
.meshpot-chrome .flatboard-sidebar.meshpot-sidebar {
position: fixed;
top: 50%;
left: 1.25rem;
transform: translateY(-50%);
z-index: 75;
width: 12rem;
max-height: min(80vh, calc(100vh - 4rem));
overflow-y: auto;
margin: 0;
padding: 0 0.5rem 0 0;
background: transparent !important;
border: none;
}
.meshpot-chrome .flatboard-content-wrapper,
.meshpot-chrome .col-lg-9.flatboard-content-wrapper {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
padding-left: 14rem !important;
}
}
@media (max-width: 55.99rem) {
.flatboard-sidebar-wrapper.meshpot-sidebar-wrapper,
.meshpot-chrome .flatboard-sidebar-wrapper {
padding: 0.85rem 1rem;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 2px;
margin-bottom: 1rem;
}
.flatboard-sidebar.meshpot-sidebar {
position: static;
transform: none;
width: auto;
max-height: none;
}
}
.btn-success:not(.flatboard-start-discussion) {
background: color-mix(in srgb, #5a7a4a 85%, var(--bs-body-bg)) !important;
border: 1px solid #5a7a4a !important;
color: #fff !important;
}
/* =========================================================
* Meshpot ink/paper surfaces + guide theme switch
* ========================================================= */
/* Force guide ink/paper page backgrounds (beat theme-ui-bundle #121212 main) */
html[data-theme="dark"],
html[data-bs-theme="dark"],
[data-theme="dark"],
[data-bs-theme="dark"] {
--bs-body-bg: #1c1b19 !important;
--bg-primary: #1c1b19 !important;
--bg-secondary: #1c1b19 !important;
--bs-secondary-bg: #262522 !important;
--bg-tertiary: #2f2d29 !important;
}
html[data-theme="light"],
html[data-bs-theme="light"],
[data-theme="light"],
[data-bs-theme="light"] {
--bs-body-bg: #f7f4ef !important;
--bg-primary: #f7f4ef !important;
--bg-secondary: #f7f4ef !important;
--bs-secondary-bg: #efeae2 !important;
--bg-tertiary: #ebe6dc !important;
}
/* Higher specificity than theme-ui-bundle (html[data-theme=dark] body/main → --bg-secondary #121212) */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"][data-bs-theme="dark"],
html[data-theme="dark"][data-bs-theme="dark"] body,
html[data-theme="dark"][data-bs-theme="dark"] main,
html[data-theme="dark"] .flatboard-index,
html[data-theme="dark"] .navbar.navbar-expand-lg {
background-color: #1c1b19 !important;
background: #1c1b19 !important;
}
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"][data-bs-theme="light"],
html[data-theme="light"][data-bs-theme="light"] body,
html[data-theme="light"][data-bs-theme="light"] main,
html[data-theme="light"] .flatboard-index,
html[data-theme="light"] .navbar.navbar-expand-lg {
background-color: #f7f4ef !important;
background: #f7f4ef !important;
}
main.container-fluid,
.flatboard-index,
.flatboard-content-wrapper,
.flatboard-content {
background-color: transparent !important;
background: transparent !important;
}
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Guide theme-switch (sun/moon pill) */
.navbar .theme-switch,
.theme-switch {
display: inline-flex;
align-items: center;
cursor: pointer;
margin: 0;
}
.theme-switch-track {
position: relative;
display: block;
width: 2.25rem;
height: 1.25rem;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-switch-track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: calc(1.25rem - 6px);
height: calc(1.25rem - 6px);
border-radius: 50%;
background: var(--text-muted, #5c564e);
transition: transform 0.15s ease, background 0.15s ease;
}
.theme-switch-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 0.55rem;
line-height: 1;
color: var(--text-muted, #5c564e);
pointer-events: none;
transition: color 0.15s ease, opacity 0.15s ease;
}
.theme-switch-icon--light {
left: 0.35rem;
}
.theme-switch-icon--dark {
right: 0.35rem;
opacity: 0.45;
}
.theme-switch-input:checked + .theme-switch-track {
background: color-mix(in srgb, var(--bs-primary) 15%, var(--bs-body-bg));
border-color: var(--bs-primary);
}
.theme-switch-input:checked + .theme-switch-track::after {
transform: translateX(calc(2.25rem - 1.25rem));
background: var(--bs-primary);
}
.theme-switch-input:checked + .theme-switch-track .theme-switch-icon--light {
opacity: 0.45;
}
.theme-switch-input:checked + .theme-switch-track .theme-switch-icon--dark {
opacity: 1;
color: var(--bs-primary);
}
.theme-switch-input:focus-visible + .theme-switch-track {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
.theme-switch:hover .theme-switch-track {
border-color: var(--bs-primary);
}
/* Hide RSS/Atom UI buttons — keep meta + /feed routes */
a[href*="/feed/rss"],
a[href*="/feed/atom"],
.flatboard-header a[href*="/feed/"],
.flatboard-content a[href*="/feed/rss"],
.flatboard-content a[href*="/feed/atom"],
.category-card a[href*="/feed/"],
footer a[href*="/feed/rss"],
footer a[href*="/feed/atom"] {
display: none !important;
}
/* ==========================================================================
Meshpot chrome: no Flatboard gradients/shadows; pill controls; lexicon panels
========================================================================== */
/* Kill elevation shadows + decorative gradients (keep outline for a11y) */
.navbar,
.card:not(.discussion),
.card:not(.discussion):hover,
.list-group-item,
.discussion-card,
.forum-card,
.category-card,
.flatboard-actions-card,
.flatboard-actions-card:hover,
.discussion-actions,
.modal-content,
.modal-header,
.dropdown-menu,
#notification-dropdown-menu,
.alert,
.badge,
.progress-bar,
.post-card,
.post-item,
.flatboard-banner,
.search-container,
.tooltip-inner,
.popover {
box-shadow: none !important;
background-image: none !important;
}
/* Post message boxes: same soft primary wash as unread discussion rows */
.card.discussion,
.card.discussion:hover {
box-shadow: none !important;
background-color: transparent !important;
background-image: linear-gradient(
90deg,
rgba(var(--bs-primary-rgb), 0.05) 0%,
transparent 100%
) !important;
}
.card.discussion .card-body {
background-color: transparent !important;
background: transparent !important;
}
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-secondary,
.btn-secondary:hover,
.btn-success,
.btn-success:hover,
.btn-danger,
.btn-danger:hover,
.btn-warning,
.btn-warning:hover,
.btn-info,
.btn-info:hover,
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-success,
.btn-outline-danger,
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-warning,
.badge.bg-info,
.card-header,
.card-header.bg-primary,
.card-header.bg-info,
.card-header.bg-secondary,
.modal-header,
.navbar,
.flatboard-sidebar,
.progress-bar {
background-image: none !important;
}
/* Buttons + dropdown toggles ≈ lang-switcher / meshpot-search pills */
.btn:not(.btn-link):not(.btn-icon):not(.btn-close),
.dropdown-toggle.btn,
.btn-group > .btn:not(.btn-link):not(.btn-close),
.flatboard-actions-card .btn:not(.btn-link) {
border-radius: 999px !important;
border: 1px solid var(--bs-border-color) !important;
background: var(--bs-secondary-bg) !important;
background-image: none !important;
box-shadow: none !important;
transform: none !important;
font-family: var(--font-mono, "IBM Plex Mono", Menlo, monospace);
font-size: 0.7rem;
letter-spacing: 0.04em;
font-weight: 500;
padding: 0.35rem 0.85rem;
color: var(--text-muted, #5c564e);
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:not(.btn-link):not(.btn-icon):not(.btn-close):hover,
.btn:not(.btn-link):not(.btn-icon):not(.btn-close):focus,
.dropdown-toggle.btn:hover,
.flatboard-actions-card .btn:not(.btn-link):hover {
background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-secondary-bg)) !important;
background-image: none !important;
border-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important;
box-shadow: none !important;
transform: none !important;
}
.btn-primary:not(.btn-link),
.btn-success:not(.btn-link),
.flatboard-actions-card .btn-primary,
.flatboard-actions-card .btn-success {
background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-secondary-bg)) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-primary) !important;
}
.btn-primary:not(.btn-link):hover,
.btn-primary:not(.btn-link):focus,
.btn-success:not(.btn-link):hover,
.btn-success:not(.btn-link):focus,
.flatboard-actions-card .btn-primary:hover,
.flatboard-actions-card .btn-success:hover {
background: color-mix(in srgb, var(--bs-primary) 22%, var(--bs-secondary-bg)) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning {
background: transparent !important;
background-image: none !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
}
.btn-danger:not(.btn-link),
.btn-outline-danger {
border-color: var(--bs-danger) !important;
color: var(--bs-danger) !important;
background: color-mix(in srgb, var(--bs-danger) 10%, var(--bs-secondary-bg)) !important;
}
.btn-danger:not(.btn-link):hover,
.btn-outline-danger:hover {
background: color-mix(in srgb, var(--bs-danger) 18%, var(--bs-secondary-bg)) !important;
color: var(--bs-danger) !important;
}
.btn-warning:not(.btn-link),
.btn-outline-warning,
.flatboard-actions-card .btn-warning {
border-color: var(--bs-warning) !important;
color: var(--bs-body-color) !important;
background: color-mix(in srgb, var(--bs-warning) 18%, var(--bs-secondary-bg)) !important;
}
.btn-secondary:not(.btn-link),
.btn-info:not(.btn-link) {
background: var(--bs-secondary-bg) !important;
border-color: var(--bs-border-color) !important;
color: var(--text-muted, #5c564e) !important;
}
.btn:disabled,
.btn.disabled,
.btn:disabled:hover {
opacity: 0.4;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.btn-link,
.btn-icon {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
padding: 0.25rem 0.5rem;
}
.btn-link:hover,
.btn-icon:hover {
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.btn-lg:not(.btn-link):not(.btn-close) {
padding: 0.45rem 1rem;
font-size: 0.72rem;
}
.btn-sm:not(.btn-link):not(.btn-close) {
padding: 0.22rem 0.65rem;
font-size: 0.62rem;
}
/* Kill flatboard-actions-card ripple / lift */
.flatboard-actions-card .btn::before {
content: none !important;
display: none !important;
}
.flatboard-actions-card .btn:hover,
.flatboard-actions-card .btn:focus {
transform: none !important;
box-shadow: none !important;
}
/* Dropdown menus ≈ search results panel */
.dropdown-menu,
#notification-dropdown-menu,
.reaction-dropdown-menu {
background-color: var(--bs-secondary-bg) !important;
border: 1px solid var(--bs-border-color) !important;
border-radius: 0.65rem !important;
box-shadow: none !important;
background-image: none !important;
padding: 0.35rem;
}
.dropdown-item {
border-radius: 0.4rem;
transform: none !important;
transition: color 0.15s ease, background 0.15s ease;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
#notification-dropdown-menu .dropdown-item:hover,
#notification-dropdown-menu .dropdown-item-text:hover {
background-color: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-secondary-bg)) !important;
color: var(--bs-body-color) !important;
transform: none !important;
}
/* Right column = lexicon / callout panel */
.discussion-sidebar-flatboard .card,
.discussion-sidebar-flatboard .flatboard-actions-card,
.discussion-sidebar-flatboard .discussion-actions,
.flatboard-actions-card {
background: var(--bs-secondary-bg) !important;
background-image: none !important;
border: 1px solid var(--bs-border-color) !important;
border-radius: 2px !important;
box-shadow: none !important;
}
.discussion-sidebar-flatboard .card:hover,
.flatboard-actions-card:hover {
box-shadow: none !important;
transform: none !important;
border-color: var(--bs-border-color) !important;
}
.discussion-sidebar-flatboard .card-header,
.flatboard-actions-card .card-header {
background: transparent !important;
background-image: none !important;
border-bottom: 1px solid var(--bs-border-color) !important;
}
.discussion-sidebar-flatboard .card-title,
.discussion-sidebar-flatboard .card-header h5,
.discussion-sidebar-flatboard .card-header h6,
.flatboard-actions-card .form-label {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.65rem;
color: var(--text-muted, #5c564e);
}
.discussion-sidebar-flatboard .form-select,
.flatboard-actions-card .form-select {
border-radius: 999px !important;
border: 1px solid var(--bs-border-color) !important;
background-color: var(--bs-body-bg) !important;
background-image: none !important;
box-shadow: none !important;
font-family: var(--font-mono, "IBM Plex Mono", Menlo, monospace);
font-size: 0.7rem;
letter-spacing: 0.04em;
}
.discussion-sidebar-flatboard .form-select:hover,
.discussion-sidebar-flatboard .form-select:focus,
.flatboard-actions-card .form-select:hover,
.flatboard-actions-card .form-select:focus {
border-color: var(--bs-primary) !important;
box-shadow: none !important;
outline: 2px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
outline-offset: 1px;
}
/* EasyMDE (fixed): textarea natif iOS (pas de CodeMirror) */
textarea.markdown-editor.markdown-editor--native-ios {
min-height: 12rem;
font-size: 16px; /* évite le zoom iOS au focus */
line-height: 1.5;
}
/* Meshpot: galerie images pièces jointes */
.post-attachment-gallery {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.post-attachment-image {
margin: 0;
}
.post-attachment-image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 0.25rem;
}
.post-attachment-image figcaption {
margin-top: 0.25rem;
}