:root { /* one source of truth */ --nav-height-desktop: 64px; --nav-height-mobile: 58px; --viewport-height-mko: 90vh; --max-view-width: 1280px; --accent-primary: #3b82f6; --accent-hover: #2563eb; /* Priority Colors */ --priority-high: rgba(222, 33, 39, 1); --priority-medium: rgba(248, 104, 44, 1); --priority-normal: rgba(145, 175, 0, 1); --priority-low: rgba(144, 202, 249, 1); --priority-least: rgba(106, 102, 178, 1); --priority-high-light: rgba(250, 200, 200, 1); --priority-medium-light: rgb(255, 210, 180, 1); --priority-normal-light: rgba(233, 245, 210, 1); --priority-low-light: rgba(233, 244, 254, 1); --priority-least-light: rgba(225, 224, 240, 1); /* Brand Colors */ --brand-color-1: #5fc4e5; --brand-color-2: #de2127; --brand-color-3: #6a66b2; --brand-color-4: #f3912d; --brand-text-color-1: #5555; --brand-text-color-3: #fff; --brand-text-color-4: #555; /* Background Colors */ --background-color: #dce2e2; --background-color-dark: #dce2e2; --alternate-bg: #ccc; --page-background: #ffffff; --shaded-bg-color: #efefef; --form-bg: var(--background-color); --form-section-bg: var(--page-background); --context-menu-background-color: var(--background-color); --white-light-background: rgba(255, 255, 255, 0.50); --disc-bg: rgba(0, 0, 0, 0.05); --disc-border: rgba(0, 0, 0, 0.08); --bg-color-info: #DDEFFF; --bg-color-warn: #FFF4CC; --bg-color-error: #FFE1E1; /* Border Colors */ --border-color: rgba(0, 0, 0, 0.10); --border-color-light: rgba(0, 0, 0, 0.05); --border-color-dark: rgba(0, 0, 0, 0.15); --highlight-border-color: #dc3546; --default-border: 1px solid var(--border-color); --light-border: 1px solid var(--border-color-light); /* Text Colors */ --text-color: #000; --text-color-invert: #efefef; --grayed-text-color: #777; --deemed-text-color: #aaa; --text-color-link: var(--brand-color-2); --section-header-text-color: var(--brand-color-2); /* Highlight Colors */ --highlight-bg: #de2127; --highlight-bg-text: #fff; --highlight-bg-dark: #cd3545; --highlight-bg-darker: #bc3545; --highlight-bg-light: #ff3545; --highlight-bg-text-color: var(--brand-color-2); /* Active Colors */ --color-active-red: #FF6B6B; --color-active-orange: #F8682C; --color-active-green: #8FBC8F; --color-active-blue: #5fc4e5; --color-active-purple: #6A66B2; --color-active-yellow: #FFC300; /* Habit Colors */ --habit-performed-early: #0F5132; --habit-performed-on-time: #28A745; --habit-performed-late: #FD7E14; --habit-not-performed: #DC3545; --habit-not-due: #E9ECEF; /* Input Colors */ --input-height: 36px; --input-bg: rgba(0, 0, 0, 0.05); --input-bg-hover: rgba(255, 255, 255, 0.30); --input-bg-focused: rgba(255, 255, 255, 0.90); --input-bg-form: rgba(219, 226, 226, 0.30); --input-bg-hover-form: rgba(219, 226, 226, 0.60); --input-bg-focused-form: rgba(219, 226, 226, 0.80); /* Chip Colors */ --chip-bg-color: rgba(0, 0, 0, 0.05); --chip-bg-color-form: var(--chip-bg-color); /* Hover Colors */ --hover-bg-color: rgba(0, 0, 0, 0.05); --hover-bg-color-dark: rgba(0, 0, 0, 0.07); --hover-bg-color-light-surface: rgba(0, 0, 0, 0.05); /* Floating Button */ --floating-button-bg: rgba(255, 255, 255, 0.60); --floating-button-bg-hover: rgba(255, 255, 255, 0.80); --floating-button-svg: #000; /* SVG Stroke */ --svg-stroke: #000; --svg-stroke-light: #999; --highlight-svg-stroke: #de2127; /* Shade Back Colors */ --shade-back-color: rgba(0, 0, 0, 0.07); --shade-back-color-light: rgba(0, 0, 0, 0.03); --shade-back-color-dark: rgba(0, 0, 0, 0.15); /* Button Back Colors */ --button-back-color: rgba(0, 0, 0, 0.05); --button-back-color-light: rgba(0, 0, 0, 0.03); --button-back-color-dark: rgba(0, 0, 0, 0.10); /* Gradient Colors */ --gc-top-left: #bcc4c4; --gc-bottom-right: #c5cfcf; --gc-center: #dce2e2; --gc-bottom-left: #e8ebeb; --gc-top-right: #f0f2f2; --default-gradient: radial-gradient(ellipse at top left, var(--gc-top-left) 0%, transparent 50%), radial-gradient(ellipse at top right, var(--gc-bottom-right) 0%, transparent 50%), radial-gradient(ellipse at bottom left, var(--gc-bottom-left) 0%, transparent 50%), radial-gradient(ellipse at bottom right, var(--gc-top-right) 0%, transparent 50%), var(--gc-center); /* Status Colors */ --status-color-not-started: var(--text-color); --status-color-progress: var(--text-color); --status-color-followup: var(--text-color); --status-color-completed: var(--grayed-text-color); --status-color-cancelled: red; /* Icons */ --icon-blank: url('data:image/svg+xml;utf8,'); --icon-more-h: url('data:image/svg+xml;utf8,'); --icon-not-started: url('data:image/svg+xml;utf8,'); --icon-check: url('data:image/svg+xml;utf8,'); --icon-close: url('data:image/svg+xml;utf8,'); --icon-attachment: url('data:image/svg+xml;utf8,'); --icon-integrated: url('data:image/svg+xml;utf8,'); /* Spacing - Margins */ --tiny-margin: 3px; --small-margin: 5px; --default-margin: 10px; --large-margin: 20px; /* Spacing - Padding */ --tiny-padding: 3px; --small-padding: 5px; --default-padding: 10px; --large-padding: 20px; /* Spacing - Gap */ --tiny-gap: 5px; --small-gap: 5px; --default-gap: 10px; --large-gap: 20px; /* Spacing - Radius */ --tiny-radius: 5px; --small-radius: 5px; --default-radius: 10px; --large-radius: 25px; /* Cards */ --cards-per-row: 3; /* Player - Brand Colors */ --player-brand-cyan: #5fc4e5; --player-brand-red: #de2127; --player-brand-purple: #6A66B2; --player-brand-orange: #F3912D; /* Player - Background Colors */ --player-bg: #000000; --player-overlay-dark: rgba(0, 0, 0, 0.8); --player-overlay-medium: rgba(0, 0, 0, 0.5); --player-overlay-light: rgba(0, 0, 0, 0.3); /* Player - Glass Effect */ --player-glass-bg: rgba(0, 0, 0, 0.50); --player-glass-bg-hover: rgba(255, 255, 255, 0.12); --player-glass-border: rgba(255, 255, 255, 0.15); --player-glass-border-bright: rgba(255, 255, 255, 0.25); /* Player - Text Colors */ --player-text-primary: #ffffff; --player-text-secondary: rgba(255, 255, 255, 0.7); --player-text-tertiary: rgba(255, 255, 255, 0.5); /* Player - Interactive States */ --player-hover-bg: rgba(255, 255, 255, 0.15); --player-active-bg: rgba(95, 196, 229, 0.2); --player-accent-glow: rgba(95, 196, 229, 0.3); /* Player - Shadows */ --player-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3); --player-shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.4); --player-shadow-glow: 0 0 20px rgba(95, 196, 229, 0.3); /* Player - Transitions */ --player-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --player-transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --player-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --player-transition-slide: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Player - Border Radius */ --player-radius-small: 8px; --player-radius-medium: 12px; --player-radius-large: 16px; --player-radius-full: 50%; /* Other */ --bottom-nav-bottom-padding: 20px; } @media screen and (prefers-color-scheme:dark) { :root { /* Brand Colors */ --brand-color-1: #1f84a5; --brand-color-2: #871418; --brand-color-3: #3c3971; --brand-color-4: #a55809; /* Active Colors */ --color-active-red: #943f3f; --color-active-orange: #8f3b19; --color-active-green: #547158; --color-active-blue: #356c80; --color-active-purple: #3f3d68; --color-active-yellow: #866900; /* Priority Light Colors */ --priority-high: rgba(180, 50, 55, 1); --priority-medium: rgba(200, 85, 40, 1); --priority-normal: rgba(120, 140, 30, 1); --priority-low: rgba(90, 140, 180, 1); --priority-least: rgba(85, 82, 140, 1); --priority-high-light: rgba(60, 25, 28, 1); --priority-medium-light: rgba(65, 35, 25, 1); --priority-normal-light: rgba(45, 50, 25, 1); --priority-low-light: rgba(30, 45, 60, 1); --priority-least-light: rgba(35, 33, 55, 1); /* Habit Colors */ --habit-performed-early: #07291a; --habit-performed-on-time: #175a26; --habit-performed-late: #91470b; --habit-not-performed: #7c2028; --habit-not-due: #85878b; /* Background Colors */ --background-color: #222; --alternate-bg: #444; --background-color-light: #333; --background-color-dark: #111; --page-background: #333; --page-background-light: #444; --page-background-dark: #222; /* Border Colors */ --border-color: #444444; --border-color-light: #666666; --border-color-dark: #22222; /* Text Colors */ --text-color: #bbb; --text-color-invert: #eee; --grayed-text-color: #888; --deemed-text-color: #666; --text-color-link: var(--brand-color-2); /* SVG Stroke */ --svg-stroke: #bbb; --svg-stroke-light: #333333; /* Shade Back Colors */ --shade-back-color: rgba(255, 255, 255, 0.10); --shade-back-color-light: rgba(255, 255, 255, 0.15); --shade-back-color-dark: rgba(255, 255, 255, 0.05); /* Highlight Colors */ --highlight-bg: #871418; --highlight-bg-text: #e5e5e5; --highlight-bg-light: #8c202a; --highlight-bg-dark: #731c25; --highlight-border-color: #871418; /* Disc Colors */ --disc-bg: rgba(255, 255, 255, 0.20); --disc-border: rgba(255, 255, 255, 0.30); /* Input Colors */ --input-height: 36px; --input-bg: rgba(255, 255, 255, 0.10); --input-bg-hover: rgba(255, 255, 255, 0.20); --input-bg-focused: rgba(255, 255, 255, 0.40); --input-bg-form: rgba(255, 255, 255, 0.10); --input-bg-hover-form: rgba(219, 226, 226, 0.20); --input-bg-focused-form: rgba(219, 226, 226, 0.40); /* Chip Colors */ --chip-bg-color: #444444; --chip-bg-color-form: var(--background-color); /* Hover Colors */ --hover-bg-color: rgba(255, 255, 255, 0.10); --hover-bg-color-dark: rgba(0, 0, 0, 0.15); --hover-bg-color-light-surface: rgba(255, 255, 255, 0.20); /* Floating Button */ --floating-button-bg: rgba(255, 255, 255, 0.60); --floating-button-bg-hover: rgba(255, 255, 255, 0.80); --floating-button-svg: #000; /* Section Colors */ --highlight-bg-text-color: var(--brand-color-2); --section-header-text-color: var(--brand-color-2); /* Button Back Colors */ --button-back-color: rgba(255, 255, 255, 0.05); --button-back-color-light: rgba(255, 255, 255, 0.10); --button-back-color-dark: rgba(255, 255, 255, 0.03); /* Alert Background Colors */ --bg-color-info: #000000; --bg-color-warn: #000000; --bg-color-error: #000000; /* Gradient Colors */ --gc-top-left: #111; --gc-bottom-right: #111; --gc-center: #333; --gc-bottom-left: #222; --gc-top-right: #222; --default-gradient: radial-gradient(ellipse at top left, var(--gc-top-left) 0%, transparent 50%), radial-gradient(ellipse at top right, var(--gc-bottom-right) 0%, transparent 50%), radial-gradient(ellipse at bottom left, var(--gc-bottom-left) 0%, transparent 50%), radial-gradient(ellipse at bottom right, var(--gc-top-right) 0%, transparent 50%), var(--gc-center); } } * { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.75em; -webkit-tap-highlight-color: transparent; color: var(--text-color); box-sizing: border-box; } html { height: auto; min-height: 100%; width: 100%; } body { /* font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; */ /* font-weight: 400; */ /* font-size: 1rem; */ /* line-height: 1.75em; */ margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto; font-kerning: auto; overscroll-behavior: none; /* -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; */ -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: auto; /* KEY: page/document is the scroller */ height: auto; min-height: 100dvh; overflow-y: auto; overflow-x: hidden; background: var(--default-gradient); } /* body.keyboard-open { overflow: hidden; touch-action: none; } */ body.keyboard-open { overflow: hidden; touch-action: none; } :focus { outline: 0; } button, input { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div { display: flex; flex-direction: column; justify-content: start; align-items: start; width: auto; } /* #region Commons */ .spacer { display: inline-block; flex-grow: 1 !important; flex-shrink: 1 !important; } svg { fill: none; stroke: var(--svg-stroke); stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round; flex-grow: 0; flex-shrink: 0; width: 24px; height: 24px; margin: 0 5px; transition: transform .3s ease; } svg.thick { stroke-width: 2px !important; } svg.larger { transform: scale(110%); } svg.checkbox { stroke: var(--highlight-border-color); stroke-width: 3px; } svg.flipped { transform: rotate(180deg); } svg.icon-x { fill: unset; stroke: var(--svg-stroke); stroke-width: 1.5px; } svg .brand-color-1 { stroke: var(--brand-color-1); } svg .brand-color-2 { stroke: var(--brand-color-2); } svg .brand-color-3 { stroke: var(--brand-color-3); } svg .brand-color-4 { stroke: var(--brand-color-4); } .top-shadow { box-shadow: 0 -8px 25px rgba(99, 102, 241, .12), 0 -4px 10px rgba(99, 102, 241, .08); } .bottom-right-shadow { box-shadow: 4px 4px 8px -2px rgba(0, 0, 0, .1), 12px 12px 24px -4px rgba(0, 0, 0, .08); } .right-shadow { box-shadow: 8px 0 25px rgba(99, 102, 241, .12), 4px 0 10px rgba(99, 102, 241, .08); } .bottom-left-shadow { box-shadow: -4px 4px 8px -2px rgba(0, 0, 0, .1), -12px 12px 24px -4px rgba(0, 0, 0, .08); } .left-shadow { box-shadow: -8px 0 25px rgba(99, 102, 241, .12), -4px 0 10px rgba(99, 102, 241, .08); } .center-shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06); } /* #endregion Commons */ /* #region Layout */ .h-panel, .row { display: flex; flex-direction: row; align-items: start; justify-content: start; flex-grow: 0; flex-shrink: 0; position: relative; width: auto; } .column { display: flex; flex-direction: column; align-items: start; justify-content: start; flex-grow: 0; flex-shrink: 0; position: relative; width: auto; } .grow { flex-grow: 1; } .shrink { flex-shrink: 1; } .nogrow { flex-grow: 0; } .noshrink { flex-shrink: 0; } .full-width { width: 100% !important; } .full-height { height: 100%; } .min-full-height { min-height: 100%; } .hspacer { display: block; flex: 1 1 auto; flex-grow: 1; flex-shrink: 1; width: auto; } .vspacer { display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; height: 100%; width: 20px; } .no-gap { gap: 0; } .small-gap { gap: var(--small-gap); } .medium-gap { gap: var(--default-gap); } .large-gap { gap: var(--large-gap); } .justify-start { justify-content: start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .align-start { align-items: start; } .align-center { align-items: center; } .align-end { align-items: flex-end; } .align-stretch { align-items: stretch; } .align-baseline { align-items: baseline; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .w-auto { width: auto; } .h-auto { height: auto; } .w-fit { width: fit-content; } .h-fit { height: fit-content; } .min-w-0 { min-width: 0; } .min-h-0 { min-height: 0; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .static { position: static; } .block { display: block; } .inline { display: inline; } .grid { display: grid; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-autoX { overflow-x: auto; } .overflow-autoY { overflow-y: auto; } .overflow-scroll { overflow: scroll; } .top-margin-s { margin-top: var(--small-margin); } .top-margin-m { margin-top: var(--default-margin); } .top-margin-l { margin-top: var(--large-margin); } .left-margin-s { margin-left: var(--small-margin); } .left-margin-m { margin-left: var(--default-margin); } .left-margin-l { margin-left: var(--large-margin); } .right-margin-s { margin-right: var(--small-margin); } .right-margin-m { margin-right: var(--default-margin); } .right-margin-l { margin-right: var(--large-margin); } .bottom-margin-s { margin-bottom: var(--small-margin); } .bottom-margin-m { margin-bottom: var(--default-margin); } .bottom-margin-l { margin-bottom: var(--large-margin); } .vert-margin-s { margin-top: var(--small-margin); margin-bottom: var(--small-margin); } .vert-margin-m { margin-top: var(--default-margin); margin-bottom: var(--default-margin); } .vert-margin-l { margin-top: var(--large-margin); margin-bottom: var(--large-margin); } .horz-margin-s { margin-left: var(--small-margin); margin-right: var(--small-margin); } .horz-margin-m { margin-left: var(--default-margin); margin-right: var(--default-margin); } .horz-margin-l { margin-left: var(--large-margin); margin-right: var(--large-margin); } .all-margin-s { margin: var(--small-margin); } .all-margin-m { margin: var(--default-margin); } .all-margin-l { margin: var(--large-margin); } .all-margin-xl { margin: 40px; } .no-margin { margin: 0; } .top-padding-s { padding-top: var(--small-padding); } .top-padding-m { padding-top: var(--default-padding); } .top-padding-l { padding-top: var(--large-padding); } .right-padding-s { padding-right: var(--small-padding); } .right-padding-m { padding-right: var(--default-padding); } .right-padding-l { padding-right: var(--large-padding); } .left-padding-s { padding-left: var(--small-padding); } .left-padding-m { padding-left: var(--default-padding); } .left-padding-l { padding-left: var(--large-padding); } .bottom-padding-s { padding-bottom: var(--small-padding); } .bottom-padding-m { padding-bottom: var(--default-padding); } .bottom-padding-l { padding-bottom: var(--large-padding); } .horz-padding-s { padding-left: var(--small-padding); padding-right: var(--small-padding); } .horz-padding-m { padding-left: var(--default-padding); padding-right: var(--default-padding); } .horz-padding-l { padding-left: var(--large-padding); padding-right: var(--large-padding); } .vert-padding-s { padding-top: var(--small-padding); padding-bottom: var(--small-padding); } .vert-padding-m { padding-top: var(--default-padding); padding-bottom: var(--default-padding); } .vert-padding-l { padding-top: var(--large-padding); padding-bottom: var(--large-padding); } .all-padding-s { padding: var(--small-padding); } .all-padding-m { padding: var(--default-padding); } .all-padding-l { padding: var(--large-padding); } .all-padding-xl { padding: 30px; } .no-padding { padding: 0; } .no-right-padding { padding-right: 0; } .top-left-radius-s { border-top-left-radius: var(--small-radius); } .top-left-radius-m { border-top-left-radius: var(--default-radius); } .top-left-radius-l { border-top-left-radius: var(--large-radius); } .top-right-radius-s { border-top-right-radius: var(--small-radius); } .top-right-radius-m { border-top-right-radius: var(--default-radius); } .top-right-radius-l { border-top-right-radius: var(--large-radius); } .bottom-left-radius-s { border-bottom-left-radius: var(--small-radius); } .bottom-left-radius-m { border-bottom-left-radius: var(--default-radius); } .bottom-left-radius-l { border-bottom-left-radius: var(--large-radius); } .bottom-right-radius-s { border-bottom-right-radius: var(--small-radius); } .bottom-right-radius-m { border-bottom-right-radius: var(--default-radius); } .bottom-right-radius-l { border-bottom-right-radius: var(--large-radius); } .top-radius-s { border-top-left-radius: var(--small-radius); border-top-right-radius: var(--small-radius); } .top-radius-m { border-top-left-radius: var(--default-radius); border-top-right-radius: var(--default-radius); } .top-radius-l { border-top-left-radius: var(--large-radius); border-top-right-radius: var(--large-radius); } .bottom-radius-s { border-bottom-left-radius: var(--small-radius); border-bottom-right-radius: var(--small-radius); } .bottom-radius-m { border-bottom-left-radius: var(--default-radius); border-bottom-right-radius: var(--default-radius); } .bottom-radius-l { border-bottom-left-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); } .left-radius-s { border-top-left-radius: var(--small-radius); border-bottom-left-radius: var(--small-radius); } .left-radius-m { border-top-left-radius: var(--default-radius); border-bottom-left-radius: var(--default-radius); } .left-radius-l { border-top-left-radius: var(--large-radius); border-bottom-left-radius: var(--large-radius); } .right-radius-s { border-top-right-radius: var(--small-radius); border-bottom-right-radius: var(--small-radius); } .right-radius-m { border-top-right-radius: var(--default-radius); border-bottom-right-radius: var(--default-radius); } .right-radius-l { border-top-right-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); } .all-radius-s { border-radius: var(--small-radius); } .all-radius-m { border-radius: var(--default-radius); } .all-radius-l { border-radius: var(--large-radius); } .no-radius { border-radius: 0; } .top-border-s { border-top: 1px solid var(--border-color); } .top-border-m { border-top: 2px solid var(--border-color); } .top-border-l { border-top: 3px solid var(--border-color); } .right-border-s { border-right: 1px solid var(--border-color); } .right-border-m { border-right: 2px solid var(--border-color); } .right-border-l { border-right: 3px solid var(--border-color); } .bottom-border-s { border-bottom: 1px solid var(--border-color); } .bottom-border-m { border-bottom: 2px solid var(--border-color); } .bottom-border-l { border-bottom: 3px solid var(--border-color); } .vert-border-s { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .vert-border-m { border-top: 2px solid var(--border-color); border-bottom: 2px solid var(--border-color); } .vert-border-l { border-top: 3px solid var(--border-color); border-bottom: 3px solid var(--border-color); } .horz-border-s { border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } .horz-border-m { border-left: 2px solid var(--border-color); border-right: 2px solid var(--border-color); } .horz-border-l { border-left: 3px solid var(--border-color); border-right: 3px solid var(--border-color); } .all-border-s { border: 1px solid var(--border-color); } .all-border-m { border: 2px solid var(--border-color); } .all-border-l { border: 3px solid var(--border-color); } .fb-left-border-s { border-left: 1px solid var(--border-color-light); } .fb-top-border-s { border-top: 1px solid var(--border-color-light); } .fb-right-border-s { border-right: 1px solid var(--border-color-light); } .fb-bottom-border-s { border-bottom: 1px solid var(--border-color-light); } .fb-all-border-s { border: 1px solid var(--border-color-light); } .top-border-s-hl { border-top: 1px solid var(--highlight-bg); } .top-border-m-hl { border-top: 2px solid var(--highlight-bg); } .top-border-l-hl { border-top: 3px solid var(--highlight-bg); } .left-border-s-hl { border-left: 1px solid var(--highlight-bg); } .left-border-m-hl { border-left: 2px solid var(--highlight-bg); } .left-border-l-hl { border-left: 3px solid var(--highlight-bg); } .right-border-s-hl { border-right: 1px solid var(--highlight-bg); } .right-border-m-hl { border-right: 2px solid var(--highlight-bg); } .right-border-l-hl { border-right: 3px solid var(--highlight-bg); } .bottom-border-s-hl { border-bottom: 1px solid var(--highlight-bg); } .bottom-border-m-hl { border-bottom: 2px solid var(--highlight-bg); } .bottom-border-l-hl { border-bottom: 3px solid var(--highlight-bg); } .vert-border-s-hl { border-top: 1px solid var(--highlight-bg); border-bottom: 1px solid var(--highlight-bg); } .vert-border-m-hl { border-top: 2px solid var(--highlight-bg); border-bottom: 2px solid var(--highlight-bg); } .vert-border-l-hl { border-top: 3px solid var(--highlight-bg); border-bottom: 3px solid var(--highlight-bg); } .horz-border-s-hl { border-left: 1px solid var(--highlight-bg); border-right: 1px solid var(--highlight-bg); } .horz-border-m-hl { border-left: 2px solid var(--highlight-bg); border-right: 2px solid var(--highlight-bg); } .horz-border-l-hl { border-left: 3px solid var(--highlight-bg); border-right: 3px solid var(--highlight-bg); } .all-border-s-hl { border: 1px solid var(--highlight-bg); } .all-border-m-hl { border: 2px solid var(--highlight-bg); } .all-border-l-hl { border: 3px solid var(--highlight-bg); } .visible-ex { visibility: visible; } .invisible-ex { visibility: hidden; } .bg-color-def { background-color: var(--background-color) !important; } .bg-color-dark { background-color: var(--gc-top-left) !important; } .bg-color-page { background-color: var(--page-background) !important; } .bg-color-light-shade { background-color: var(--shade-back-color-light) !important; } .bg-color-dark-shade { background-color: var(--shade-back-color-dark) !important; } .bg-color-highlight { background-color: var(--highlight-bg) !important; color: var(--highlight-bg-text) !important; } .bg-color-highlight>svg { stroke: var(--highlight-bg-text) !important; } .bg-color-black { background-color: #000; } .bg-color-none { background-color: transparent; } .bg-color-info { background-color: var(--bg-color-info); } .bg-color-warn { background-color: var(--bg-color-warn); } .bg-color-error { background-color: var(--bg-color-error); } .bottom-shadow { box-shadow: 0 8px 25px rgba(99, 102, 241, .12), 0 4px 10px rgba(99, 102, 241, .08); } .focused { background-color: var(--hover-bg-color) !important; } .highlight.focused { background-color: var(--highlight-bg-darker) !important; } .smallest-font { font-size: .7rem !important; } .smaller-font { font-size: .8rem !important; } .small-font { font-size: .9rem !important; } .large-font { font-size: 1.1rem !important; } .larger-font { font-size: 1.2rem !important; } .largest-font { font-size: 1.2rem !important; } .grayed-text { color: var(--grayed-text-color) !important; } .deemed-text { color: var(--deemed-text-color) !important; } .left-text { text-align: left !important; } .center-text { text-align: center !important; } .right-text { text-align: right !important; } .no-bold-text { font-weight: 400 !important; } .light-bold-text { font-weight: 500 !important; } .bold-text { font-weight: 700 !important; } .heavy-bold-text { font-weight: 900 !important; } .caption-prefix { font-size: 1.3rem; color: var(--brand-color-3); } .caption-suffix { color: var(--text-color); } .min-height-descriptive { min-height: 120px; } input[type=email], input[type=number], input[type=password], input[type=search], input[type=text], .input-check, select { width: 100%; min-height: 36px; margin-right: 0; border-radius: var(--small-radius); padding: var(--small-padding); background-color: var(--input-bg); border: 1px solid var(--border-color); } input[type=email]:hover, input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, input[type=text]:hover, textarea:hover, .input-check:hover, select:hover { background-color: var(--input-bg-hover); } input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=text]:focus, textarea:focus, .input-check:focus, select:focus { background-color: var(--input-bg-focused); } .input-check { margin: 0px; cursor: pointer; } textarea { width: 100%; border-radius: var(--small-radius); border: none; padding: var(--small-padding); overflow-y: auto; resize: none; line-height: 1.75em; font-size: 1rem !important; background-color: var(--input-bg); } .buttonex { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--default-gap); padding: var(--default-padding) var(--large-padding); border-radius: var(--default-radius); margin-right: var(--default-margin); border: 1px solid var(--border-color); background-color: var(--button-back-color); cursor: pointer; } .buttonex.small { padding: 8px !important; border-radius: var(--small-radius) !important; } .buttonex.small>svg{ margin: 0px; } .buttonex:last-child { margin-right: 0; } .buttonext-def-dim { width: 120px; } .default-button { border-color: transparent; background: linear-gradient(135deg, var(--shade-back-color) 0, var(--shade-back-color-dark) 100%); box-shadow: 0 2px 4px var(--shade-back-color); transition: all .2s ease; } .default-button:hover { border-color: var(--border-color); box-shadow: 0 4px 8px var(--shade-back-color-dark); } .action-button, .oddapy-tour-next { background: linear-gradient(135deg, #de2127 0, #b91c1c 100%); color: #fff; border-color: transparent; transition: all .2s ease; box-shadow: 0 2px 4px rgba(222, 33, 39, .3); } .action-button:visited, .oddapy-tour-next:visited { color: var(--highlight-bg-text) !important; } .action-button:hover, .oddapy-tour-next:hover { border-color: #de2127; box-shadow: 0 4px 8px rgba(222, 33, 39, .4); } .action-button:active, .oddapy-tour-next:active { border-color: #de2127; box-shadow: 0 4px 8px rgba(222, 33, 39, .6); } .action-button>*, .oddapy-tour-next>* { color: var(--highlight-bg-text) !important; } .action-button>svg, .oddapy-tour-next>svg { stroke: var(--highlight-bg-text); } .tb-button { display: flex; flex-flow: row; align-items: center; justify-content: center; padding: var(--default-padding); border-radius: 10px; margin-right: var(--small-margin); border: none; background-color: transparent; position: relative; cursor: pointer; } .tb-button:last-child { margin-right: 0; } .tb-button:hover { background-color: var(--hover-bg-color); } .tb-button:active { background-color: var(--hover-bg-color-dark); } .tb-button>svg { cursor: pointer; } .tb-button:active>* { transform: translateY(1px) translateX(1px); } .tb-button.large { padding: var(--large-padding); border-radius: var(--default-radius); } .tb-button.small { padding: var(--small-padding); border-radius: var(--small-radius); } .tb-button.rounded-border-full { padding: var(--default-padding) var(--small-padding) !important; } .tb-button:disabled:hover { background-color: transparent; } .tb-button:disabled:active>* { transform: translateY(0) translateX(0); } .tb-button:disabled>svg { stroke: var(--shade-back-color); } .tb-button.lowlight { background-color: var(--background-color); } .tb-button.highlight, .tb-button.highlight:hover { background-color: var(--brand-color-2); } .tb-button.highlight>svg { stroke: var(--highlight-bg-text); } .flex-start { align-items: start !important; justify-content: start !important; } .flex-center { align-items: center !important; justify-content: center !important; } /* #endregion */ /* #region Floating window */ .floating-window-backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100; background-color: rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; } .floating-window-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; } .floating-window-backdrop.close { opacity: 0; visibility: hidden; pointer-events: none; } .floating-window { flex-direction: column; position: fixed; max-width: 500px; max-height: 90vh; padding: 0; display: none; background-color: var(--page-background); box-shadow: rgba(101, 122, 122, .3) 0 0 0 2px, rgba(101, 122, 122, .6) 0 4px 6px -1px, rgba(101, 122, 122, .05) 0 1px 0 inset; } .floating-window-full-height { flex-direction: column; max-width: 500px; top: 0; height: 100%; border: none; display: none; background-color: var(--background-color); } .floating-window-full-screen { max-width: 100%; max-height: 100%; top: 0; width: 100%; height: 100%; border: none; display: none; background-color: var(--background-color); } .floating-window-body { align-items: start; justify-content: start; flex-grow: 1; flex-shrink: 1; height: 100%; width: 100%; padding: 0; overflow-y: auto; } .floating-window-body.non-scrollable-body { overflow: hidden !important; min-height: 0; } .floating-window-body.non-scrollable-body>.column, .floating-window-body.non-scrollable-body>.column>.column { flex: 1 1 auto; min-height: 0; } .floating-window-body.non-scrollable-body .overflow-autoY { overflow-y: visible !important; } .floating-window-body.non-scrollable-body .scrollable-container { flex: 0 1 auto; min-height: 0; overflow-y: auto !important; } .floating-window-body.non-scrollable-body .scrollable-container>.column { overflow: visible !important; min-height: 0; } .context-menu { width: auto; min-width: 300px; max-width: 100%; height: auto; padding: var(--small-padding); background-color: var(--background-color) !important; } @media only screen and (max-width:768px) { .floating-window-backdrop { background-color: rgba(0, 0, 0, .3); } .floating-window, .floating-window-full-height { width: 100%; max-width: 100%; padding-bottom: 40px; box-shadow: 0 -8px 25px rgba(99, 102, 241, .12), 0 -4px 10px rgba(99, 102, 241, .08); } .context-menu { max-width: 95%; min-width: 300px; width: auto; bottom: unset; border-bottom: 1px solid var(--border-color); border-radius: var(--default-radius); padding: var(--default-padding); } .context-menu>.body { padding-top: 0 !important; padding-bottom: 0 !important; } } .header { display: flex; flex-direction: row; justify-content: start; align-items: center; flex-grow: 0; flex-shrink: 0; width: 100% !important; padding: var(--small-padding); border-radius: 0; border-bottom: 1px solid var(--border-color); border-top-left-radius: var(--default-radius); border-top-right-radius: var(--default-radius); } .header>.spacer { flex-grow: 1; flex-shrink: 1; } .header>.caption, .header>h2, .header>span { display: inline-block; flex-grow: 1; flex-shrink: 1; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 110%; font-weight: 400; } .header>svg { margin-right: var(--small-padding); } .form-caption { display: inline-block; width: 100%; margin: 0; padding: 3px 6px 3px 10px; font-size: 1.1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .body { align-items: start; justify-content: start; flex-grow: 1; flex-shrink: 1; padding: var(--default-padding); height: 100%; width: 100%; overflow-y: auto; } footer { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; width: 100% !important; padding: var(--default-padding); border-radius: 0; border-bottom-left-radius: var(--default-radius); border-bottom-right-radius: var(--default-radius); } .oside-menu { width: 400px !important; } .multi-line-input-form, .single-line-input-form { width: 500px; height: auto; max-height: 90%; } .multi-line-input-form { height: 250px; } .multi-line-input-form textarea { width: 100%; height: 100%; } .messagebox-content { display: flex; flex-direction: column; align-items: start; justify-content: start; gap: var(--default-gap); flex-grow: 1; flex-shrink: 1; padding: var(--default-padding); min-height: 100px; } .messagebox-footer { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--default-gap); flex-grow: 0; flex-shrink: 0; width: 100%; padding: var(--default-padding); } /* #endregion Floating window */ /* #region Login form */ /* #endregion Login form */ /* #region Navbar */ nav { position: fixed; left: 0; top: 0; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; /* stable height so content offset is correct */ height: var(--nav-height-desktop); padding: var(--default-padding); background-color: var(--background-color); border-bottom: 1px solid var(--border-color); z-index: 9999; } /* Mobile nav height */ @media (max-width: 768px) { nav { height: var(--nav-height-mobile); padding: var(--small-padding) var(--default-padding); } } nav .nav-container { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; max-width: var(--max-view-width); gap: 5px; min-width: 0; /* allow shrink */ } nav .oddapy-logo { display: flex; align-items: center; gap: var(--default-gap); text-decoration: none; } nav .oddapy-logo img { width: 30px; height: 30px; } nav .oddapy-logo span { font-size: 1.5rem; font-weight: bold; color: var(--text-color); width: max-content; ; } nav form { display: flex; flex-direction: row; flex: 1 1 auto; align-items: center; min-width: 0; max-width: 600px; width: 100%; border-radius: 25px; overflow: hidden; gap: var(--small-gap); padding: var(--small-padding); padding-left: var(--default-padding); border: 1px solid var(--border-color); background-color: var(--page-background); } nav form>input[type=search] { display: inline-flex; width: 100%; min-height: unset; padding: 0px 10px; border: none; border-radius: 10px 0px 0px 10px; background-color: transparent; } nav form>input[type=search]:hover { background-color: transparent; } nav form>input[type=search]:focus { background-color: transparent; } nav form>input[type=search]:active { background-color: transparent; } nav form>button[type=submit] { display: inline-flex; width: auto; border: none; cursor: pointer; padding: 3px; border-radius: 0px 15px 15px 0px; background-color: transparent; } nav .hspacer { padding: 5px; } nav, nav * { /* allow nav elements to be whatever they need (buttons/forms/inline) */ align-items: center; } nav div { display: flex; flex-direction: row; } .contents div { /* allow injected content to control its own display */ /* if you truly need global div flex, keep this; otherwise remove it */ width: auto; } #btn-close-search-form, #btn-mobile-search, #btn-login { display: none; } @media only screen and (max-width:768px) { nav { padding: var(--small-padding); } nav .tb-button { padding: 10px; } #nav-spacer-1 { display: none !important; } nav .oddapy-logo img { width: 28px; height: 28px; } nav .oddapy-logo span { font-size: 1.2rem; } nav form { display: none; } nav .mobile-search-bar .oddapy-logo, nav .mobile-search-bar .oddapy-logo span, nav .mobile-search-bar #btn-mobile-search, nav .mobile-search-bar #btn-login, nav .mobile-search-bar #btn-new-topic, nav .mobile-search-bar #btn-main-menu { display: none; } nav .mobile-search-bar .hspacer { display: none !important; } nav .mobile-search-bar .nav-search-bar { display: flex; } nav .mobile-search-bar #btn-submit-search { display: none; } nav .mobile-search-bar form, nav .mobile-search-bar form>input[type=search] { border-radius: 5px; } nav .mobile-search-bar form { min-width: initial !important; } nav .mobile-search-bar #btn-close-search-form { display: flex; } #btn-mobile-search, #btn-login { display: flex; } } @media only screen and (max-width:420px) { nav .oddapy-logo span { display: none; } } /* #endregion Navbar */ /* #region Container */ .container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* min-height: 100dvh; */ height: auto; /* KEY: offset content below fixed nav */ padding: var(--default-padding); padding-top: calc(var(--nav-height-desktop) + var(--default-padding)); background-color: var(--page-background); /* KEY: do NOT turn it into a scroll container */ overflow: visible; } @media (max-width: 768px) { .container { padding: 0; padding-top: var(--nav-height-mobile); /* tight on mobile like you had */ overflow: visible; } } .client-area { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; /* gap: var(--default-gap); */ width: 100%; max-width: var(--max-view-width); /* KEY: do not constrain height / do not create scroll container */ height: auto; min-height: 0; overflow: visible; overflow-x: clip; /* keep your spacing */ /* padding: var(--default-padding); */ position: relative; background-color: var(--page-background); } .client-area.posts-page{ background-color: transparent !important; } /* .posts-page .post-breadcrumb{ margin-bottom: var(--default-margin); } */ @media (max-width: 768px) { .client-area { padding: 0px 0px 50px 0px; } } .contents { display: block; width: 100%; height: auto; min-height: 0; overflow: visible; padding: 0; margin-top: var(--default-margin); background-color: transparent; } @media (max-width: 768px) { .contents { padding: 5px; } } .container, .client-area, .contents, .tab-bar, .nav-container { width: 100%; /* then explicitly set the ones that should be full width */ } /* #endregion Container */ /* #region Controls */ .form-cover { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: var(--default-margin); width: 100%; height: auto; position: relative; border-radius: 0; background-color: transparent; } .form-cover>.img-container { position: relative; justify-content: center; align-items: center; width: 100%; height: auto; max-height: 100px; margin-bottom: var(--default-margin); } .form-cover>.img-container>.tb-button { position: absolute; right: 25%; bottom: 10px; border-radius: 50%; padding: var(--default-padding) var(--small-padding); z-index: 1; } .form-cover>.img-container>img { border-radius: 50% !important; width: 100px !important; height: 100px !important; padding: var(--small-padding); background-color: var(--shade-back-color); } .form-cover>span { display: inline-block; width: 100%; text-align: center; } .form-cover>span.title { font-weight: 700; font-size: 1.5rem; margin: var(--default-margin) 0 0 0; } .form-section-container { width: 100%; margin-top: var(--large-margin); } .form-section-container:first-child { margin-top: 0 !important; } .form-section-container>.caption { font-size: 1.1rem !important; font-weight: 700; display: inline-block; width: 100%; max-height: 350px; padding-left: var(--default-padding) !important; } .form-section { display: flex; flex-direction: column; width: 100%; border-radius: var(--default-radius); background-color: var(--page-background); /* padding: var(--default-padding); */ margin-bottom: var(--large-margin); border: 1px solid var(--border-color); overflow-y: auto; } .form-section>.object-area { padding: 0; } .list-item-container { display: flex; flex-direction: column; justify-content: start; align-items: start; width: 100%; padding: var(--default-padding) var(--small-padding); border-radius: var(--default-radius); position: relative; } .list-item-container * { color: var(--text-color); } .list-item-container:hover { background-color: var(--hover-bg-color); } .list-item-container .snippet { font-size: .9rem; } .form-section .list-item-container { border-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom: 1px solid var(--border-color); } .form-section .list-item-container:last-child { border-bottom-left-radius: var(--default-radius); border-bottom-right-radius: var(--default-radius); border-bottom: none; } .form-section .list-item-container:first-child { border-top-left-radius: var(--default-radius); border-top-right-radius: var(--default-radius); } .default-list-item:first-child { border-top-left-radius: var(--default-radius); border-top-right-radius: var(--default-radius); } /* #endregion Controls */ /* Desktop (default) */ .hide-on-desktop { display: none; } .hide-on-mobile { display: flex; } /* Mobile */ @media (max-width: 767px) { .hide-on-desktop { display: block; } .hide-on-mobile { display: none; } } .hspacer { flex: 1 1 auto; display: block !important; } #btn-sort { flex: 0 0 auto; margin-left: auto; } .topic-form { padding: 0px; border: 1px solid var(--border-color) !important; width: 950px; min-width: 450px; max-width: 950px; max-height: 95%; } .tags-form { padding: 0px; border: 1px solid var(--border-color) !important; min-width: 350px; max-width: 850px; max-width: 95%; } .editor-container .ql-container { padding: 0px !important; margin-top: var(--small-margin); } .editor-container .rte-top-toolbar { justify-content: start !important; border: none; background-color: var(--shade-back-color); border-radius: var(--small-radius); } .editor-container .rte-top-toolbar .toolbar-button-group { background-color: transparent; } .editor-container .rte-top-toolbar .tb-button { padding: var(--small-padding); border-radius: var(--small-radius); } .editor-container .rte-top-toolbar .placeholder { display: none; } .quill-preview { padding: 15px !important; border-radius: var(--small-radius); border: 1px solid var(--border-color); width: 100% !important; height: 100% !important; min-height: 350px; max-height: 90% !important; } @media (max-width: 768px) { .quill-preview { padding: 0px !important; } } .tab-button { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--default-gap); padding: var(--small-padding); margin-right: 0px; cursor: pointer; min-width: 100px; text-align: center; border-radius: 0px; border: none; border-color: transparent; border-bottom: 3px solid transparent; background-color: transparent; box-shadow: none; transition: all .2s ease; text-decoration: none; color: var(--text-color); } .tab-button:hover { border-color: var(--brand-color-2); } .tab-button.active { border-color: var(--brand-color-2); } #btn-new-topic { min-width: 120px; padding: 5px 15px !important; } @media only screen and (max-width: 768px) { .insta-help-botton { bottom: 15px; } .tags-form, .topic-form { width: 100%; min-width: unset; max-width: 100%; max-height: 95%; } } /* Modern Flat Select */ .flat-dropdown { /* Reset default styles */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Flat minimal design */ min-height: 36px; border: 1px solid var(--border-color); margin-right: 0; border-radius: var(--small-radius); padding: var(--small-padding); background-color: var(--input-bg); /* Sizing */ width: auto; min-width: 100px; max-width: 300px; min-height: 36px; cursor: pointer; /* Remove outline and add custom focus */ outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Custom arrow */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; } .flat-dropdown:hover { background-color: var(--input-bg-hover); } .flat-dropdown:focus { background-color: var(--input-bg-focused); } /* Add this to your stylesheet */ .quill-preview.ql-blank p:only-child br:only-child { display: none; } .quill-preview.ql-blank:has(p:only-child br:only-child)::before { content: "Type details here..." !important; color: rgba(0, 0, 0, 0.6) !important; /* position: absolute !important; left: 15px !important; */ font-style: italic !important; } .quill-preview li { display: list-item !important; } #select-topics { width: 250px; } .tab-bar { display: flex; flex-direction: row; align-items: center; gap: var(--default-gap); width: 100%; height: 48px; padding: 0px 10px; border-radius: var(--small-radius); background-color: var(--background-color); } /* Keep your existing tab visuals */ .tab-bar>.tab-caption { flex: 0 0 auto; font-weight: bold !important; font-size: 1.1rem; background-color: var(--shade-back-color); padding: var(--small-padding); border-radius: 5px 5px 0 0; border-bottom: 3px solid var(--highlight-border-color); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media (max-width: 768px) { .tab-bar { margin-top: 0; border-radius: 0; border-left: none; border-right: none; /* border-top: 1px solid var(--border-color); */ } .tab-bar>.tab-caption { display: inline-flex; } } .tab-bar>.tab-menu-button { display: none; } .tab-bar>.tab-cat-name { font-weight: bold !important; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 250px; } .posts-page .tab-bar { height: 58px; } .ul-tab { flex: 1 1 auto; list-style: none; list-style: none; margin: 0; padding: 0; width: 100%; gap: 15px; } .ul-tab>li { white-space: nowrap; margin-bottom: 0px; border-radius: var(--small-radius); border-bottom-width: 3px; cursor: pointer; } .ul-tab>li:hover { background-color: var(--shade-back-color); } .ul-tab>li.active { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: var(--shade-back-color) !important; border-bottom: 3px solid var(--highlight-border-color); font-weight: bold; } .ul-tab>li.active a{ font-weight: bold; } .ul-tab>li>a { text-decoration: none; color: var(--text-color) !important; height: 32px; display: inline-block; padding: 5px 10px; } .ul-tab>li>a:visited { color: var(--text-color) !important; } .hide-on-desktop { display: none !important; } /* @media only screen and (max-width: 768px) { * { font-size: 1.0rem; } .container{ padding: 0px; padding-top: 64px; } .tab-bar{ margin-top: 0px; border-radius: 0px; } .tab-bar > .tab-caption{ display: inline-flex; } .rte-buttons>svg { width: 24px; height: 24px; stroke-width: 1.5px; stroke: var(--svg-stroke); } .topic-header{ flex-wrap: wrap; } .topic-header>input[type=text], .topic-header>select { width: 100%; max-width: 100%; } .flat-dropdown{ padding: var(--default-padding); } .hide-on-desktop{ display: initial !important; } } */ /* @media only screen and (max-width: 768px) { * { font-size: 1.0rem; } .container{ padding: 0px; padding-top: 58px; } .client-area { gap: var(--small-gap) !important; padding: 0px !important; margin-bottom: 50px; } .tab-bar{ margin-top: 0px; border-radius: 0px; border-top: 1px solid var(--border-color); } .tab-bar > .tab-caption{ display: inline-flex; } .rte-buttons>svg { width: 24px; height: 24px; stroke-width: 1.5px; stroke: var(--svg-stroke); } .topic-header{ flex-wrap: wrap; } .topic-header>input[type=text], .topic-header>select { width: 100%; max-width: 100%; } .flat-dropdown{ padding: var(--default-padding); } .hide-on-desktop{ display: initial !important; } .oside-menu { width: 100% !important; } } */ @media only screen and (max-width: 768px) { * { font-size: 1.0rem; } .rte-buttons>svg { width: 24px; height: 24px; stroke-width: 1.5px; stroke: var(--svg-stroke); } .topic-header { flex-wrap: wrap; } .topic-header>input[type=text], .topic-header>select { width: 100%; max-width: 100%; } .flat-dropdown { padding: var(--default-padding); } .hide-on-desktop { display: initial !important; } .oside-menu { width: 100% !important; } } .insta-help-botton { display: flex; flex-direction: row; align-items: center; justify-content: center; position: fixed; bottom: 15px; right: 15px; width: 48px; height: 48px; border-radius: 50%; border: none; background-color: var(--page-background); box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06); cursor: pointer; } .insta-help-botton:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .20); transform: translateX(-0.5px) translateY(-0.5px); } .insta-help-botton:active { transform: translateX(0.5px) translateY(0.5px); } .insta-help-botton>svg { transform: scale(140%); } /* ========================================================= Post list item (card-like row) — designed from scratch Works with your existing HTML structure. ========================================================= */ /* Container anchor behaves like a card */ a.post-list-item { display: block; width: 100%; text-decoration: none; color: var(--text-color); background: var(--page-background); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; margin: 10px 0; /* subtle depth */ box-shadow: 0 1px 0 rgba(0, 0, 0, .04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; } a.post-list-item:last-child { margin-bottom: 0px; } /* Hover / focus states */ a.post-list-item:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .08); /* border-color: rgba(0,0,0,.16); background: linear-gradient(0deg, var(--shade-back-color-light), var(--page-background)); */ } a.post-list-item:first-child { margin-top: 0px; } a.post-list-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-color-1) 35%, transparent); outline-offset: 3px; } /* Status accent stripe (uses your data-status attr if present) */ a.post-list-item { position: relative; overflow: hidden; } a.post-list-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; /* border-radius: 999px; */ background: var(--gc-top-left); /* opacity: .9; */ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* My post badge (data-mypost="true") */ a.post-list-item[data-mypost="true"]::after { content: "My post"; position: absolute; top: 10px; right: 12px; font-size: .75rem; line-height: 1; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-color-1) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-1) 30%, transparent); color: color-mix(in srgb, var(--text-color) 75%, var(--brand-color-1)); } /* Header row */ .post-list-item-header { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0 0 8px 0; padding: 0; width: 100%; } /* Title */ @media (max-width: 768px){ .post-list-item .post-title, .post-list-item .post-summary, .post-list-item .post-summary-bar { padding-left: 0px !important; } .post-list-item .post-summary-bar { flex-wrap: wrap; } } .post-list-item-header .post-title { margin: 0; padding: 0; font-size: 1.1rem; font-weight: bold; letter-spacing: -0.01em; line-height: 1.25; /* 2-line clamp */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: 10px; /* space from left accent stripe */ } /* Summary bar */ .post-summary-bar { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 0 0; padding-left: 10px; width: 100%; } /* Post type pill */ .post-type, .post-list-reply-count, .post-list-vote { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 650; line-height: 1; padding: 6px 8px; border-radius: 999px; /* background: color-mix(in srgb, var(--brand-color-2) 12%, transparent); */ border: 1px solid color-mix(in srgb, var(--brand-color-2) 28%, transparent); color: color-mix(in srgb, var(--text-color) 80%, var(--brand-color-2)); } .post-type:has(svg) { padding: 1px 12px 1px 8px; } .post-type svg { margin: 0px; transform: scale(70%); } .post-type[data-type="1"]{ background: color-mix(in srgb, var(--brand-color-1) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-1) 30%, transparent); } .post-type[data-type="2"]{ background: color-mix(in srgb, var(--brand-color-2) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-2) 30%, transparent); } .post-type[data-type="3"]{ background: color-mix(in srgb, var(--brand-color-3) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-3) 30%, transparent); } .post-type[data-type="4"]{ background: color-mix(in srgb, var(--brand-color-4) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-4) 30%, transparent); } .post-type[data-post-type="1"], .post-type[data-post-type="2"], .post-type[data-post-type="3"]{ background: color-mix(in srgb, #0000ee 15%, transparent); border: 1px solid color-mix(in srgb, #0000ee 30%, transparent); } .post-type[data-vote-type="up"]{ background: color-mix(in srgb, var(--color-active-green) 30%, transparent); border: 1px solid color-mix(in srgb, var(--color-active-green) 60%, transparent); } .post-type[data-vote-down="down"]{ background: color-mix(in srgb, var(--brand-color-2) 30%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-2) 60%, transparent); } .post-list-reply-count { background: color-mix(in srgb, var(--priority-medium) 12%, transparent); border: 1px solid color-mix(in srgb, var(--priority-medium) 28%, transparent); color: color-mix(in srgb, var(--text-color) 80%, var(--priority-medium)); } .post-list-vote { background: color-mix(in srgb, var(--habit-performed-on-time) 12%, transparent); border: 1px solid color-mix(in srgb, var(--habit-performed-on-time) 28%, transparent); color: color-mix(in srgb, var(--text-color) 80%, var(--habit-performed-on-time)); } .post-list-user, .post-list-datetime { font-size: 0.82rem; } /* Summary */ .post-summary { margin: 0; padding-left: 10px; font-size: .95rem; line-height: 1.55; color: color-mix(in srgb, var(--text-color) 78%, var(--grayed-text-color)); /* 3-line clamp */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Make the whole card feel tappable on mobile */ @media (max-width: 768px) { a.post-list-item { padding: 14px 14px; border-radius: 12px; } .post-title { font-size: 1.05rem; } } /* Optional: color variants by post type via data-ptype */ .gs-container-background { display: flex; flex-direction: column; background-color: var(--background-color); position: fixed; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; transition: opacity .2s ease, visibility .2s ease; } .gs-container { display: flex; flex-direction: column; justify-content: start; align-items: start; overscroll-behavior: none; background-color: var(--background-color); border: 1px solid var(--border-color); width: auto; min-width: 400px; max-width: 450px; height: auto; min-height: 450px; overflow: hidden; border-radius: var(--default-radius); box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2); -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2); position: relative; transition: opacity .2s ease, visibility .2s ease; } .gs-container>.gs-header { display: flex; flex-direction: column; width: 100%; padding: 20px 0 10px 0; background-color: var(--page-background); } .gs-container>.gs-body { display: flex; flex-direction: column; justify-content: start; align-items: center; gap: var(--default-gap); flex-grow: 1; flex-shrink: 1; padding: 20px var(--default-padding); background-color: var(--background-color); overflow-y: auto; } .gs-container>.gs-extra-footer, .gs-container>.gs-footer { display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0; gap: var(--small-gap); width: 100%; padding: var(--large-padding) var(--default-padding); background-color: var(--background-color); } .gs-container>.gs-footer { border-top: 1px solid var(--border-color); flex-direction: row; align-items: center; justify-content: center; } .gs-container>.gs-extra-footer { padding: var(--default-padding); } .gs-check-label { display: flex; justify-content: start; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; } .gs-check-label:hover { background-color: var(--input-bg-hover-form); } .gs-container>.gs-floating-commands { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: flex; flex-direction: row; padding: 5px 3px; background-color: transparent; z-index: 1001; } .gs-logo { width: 50px !important; height: 50px !important; } .gs-caption { font-size: 1.5rem !important; font-weight: 700; text-align: center; display: inline-block; width: 100%; } .gs-slide-container { position: relative; width: 450px; height: 800px; border-radius: var(--default-radius); box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2); -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2); } .gs-slide-button-right { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; padding: 20px; } .gs-slide-button-left { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; padding: 20px; } @media (max-width: 768px) { .gs-container { max-width: 100%; width: 100% !important; min-width: 300px; height: 100% !important; padding-bottom: 50px; border-radius: 0; } .gs-container>.gs-header { padding: 30px 0; } .gs-container>.gs-body { padding: 20px var(--default-padding); } .gs-logo { width: 75px !important; height: 75px !important; } .gs-caption { font-size: 1.25rem !important; } .gs-slide-container { width: 100% !important; min-width: 300px; height: 100% !important; padding-bottom: 0; border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .gs-slide-button-left, .gs-slide-button-right { display: none; } .gs-extra-footer>.tb-button { padding: 10px; width: 100%; align-items: start; justify-content: start; } } .list-button { display: flex; flex-flow: row; align-items: center; justify-content: start; padding: var(--default-padding) var(--large-padding); width: 100%; border-radius: 0; border-bottom: 1px solid var(--border-color); } .list-button:first-child { border-top-left-radius: var(--default-radius); border-top-right-radius: var(--default-radius); } .list-button:last-child { border-bottom-left-radius: var(--default-radius); border-bottom-right-radius: var(--default-radius); border: none; } .list-button:hover { background-color: var(--hover-bg-color); } .list-button:active, .list-button:visited { background-color: var(--hover-bg-color-dark); } .show-info-tooltip { position: absolute; background: #333; color: #fff; padding: var(--default-padding) var(--large-padding); border-radius: var(--default-radius); white-space: nowrap; width: auto; max-width: 80%; flex-direction: row; align-items: start; gap: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06); transition: bottom 0.2s ease-out, opacity 0.2s ease-out; } @media only screen and (max-width:768px) { .show-info-tooltip { max-width: 95%; width: 95%; } } .show-info-tooltip * { color: #fff; } .show-info-tooltip .show-info-message { white-space: normal; flex-grow: 1; flex-shrink: 1; } .show-info-tooltip .show-info-close { font-size: 1.3rem; cursor: pointer; } .gs-check-label { display: flex; justify-content: start; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; } .gs-check-label:hover { background-color: var(--input-bg-hover-form); } .gs-container>.gs-floating-commands { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: flex; flex-direction: row; padding: 5px 3px; background-color: transparent; z-index: 1001; } .gs-logo { width: 50px !important; height: 50px !important; } .gs-caption { font-size: 1.5rem !important; font-weight: 700; text-align: center; display: inline-block; width: 100%; } input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; outline: 0; cursor: pointer; position: relative; flex-grow: 0; flex-shrink: 0; border: 1.75px solid var(--svg-stroke); background-color: var(--checkbox-bg-color); } input[type=checkbox]:checked::before, input[type=radio]:checked::before { content: "\2713"; font-weight: 700 !important; position: absolute; top: 50%; left: 50%; transform: translate(-55%, -45%); color: var(--brand-color-2); } input[type=checkbox]:checked, input[type=radio]:checked { background-color: var(--checkbox-bg-color); border: 1.75px solid var(--svg-stroke); } input[type=checkbox]:disabled, input[type=radio]:disabled { background-color: var(--checkbox-bg-color); border: 1.75px solid var(--svg-stroke-light); } /* ========================================================= Post Detail Page Styles Extends forum.css - uses existing CSS variables ========================================================= */ /* ========================================================= Breadcrumb Navigation ========================================================= */ .post-breadcrumb { display: flex; flex-direction: row; align-items: center; gap: 0px; margin-bottom: 0; font-size: 0.9rem; color: var(--grayed-text-color); background-color: var(--background-color); border-radius: var(--small-radius); } .post-breadcrumb a { color: var(--grayed-text-color); text-decoration: none; transition: color 0.15s ease; } .post-breadcrumb a:hover { color: var(--text-color); } .post-breadcrumb svg { width: 14px; height: 14px; margin: 0; stroke: var(--grayed-text-color); flex-shrink: 0; } .post-breadcrumb span { color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { .post-breadcrumb { padding: var(--small-padding) 0px; font-size: 0.85rem; border-radius: 0px; } } /* ========================================================= Post Block (Main Post & Replies) ========================================================= */ .post-block { display: flex; flex-direction: column; width: 100%; padding: var(--large-padding); background: var(--page-background); /* border: 1px solid var(--border-color); border-radius: 12px; */ border-bottom: 2px solid var(--border-color); margin-bottom: var(--default-margin); position: relative; } .post-block:last-child{ border-bottom: none; } .post-block.post-main { border-left: 4px solid var(--brand-color-2); border-bottom: none; } .post-block.post-reply { /* border-left: 4px solid var(--brand-color-3); */ margin-left: 0; } @media (max-width: 768px) { .post-block { padding: var(--default-padding); border-radius: 0; border-left-width: 3px; border-right: none; margin-bottom: 0; border-bottom: none; } .post-block:last-child { border-bottom: 1px solid var(--border-color); } } /* ========================================================= Post Header ========================================================= */ .post-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--default-margin); border-bottom: 1px solid var(--border-color); padding-bottom: 5px; } /* Status Row - contains category badge and status badges */ .post-status-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .post-category-badge { display: inline-flex; align-self: flex-start; font-size: 0.8rem; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--brand-color-3) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-3) 30%, transparent); color: var(--brand-color-3); } /* ========================================================= Status Badges (Editable, Private, Closed) ========================================================= */ .status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px; } .status-badge svg { width: 14px; height: 14px; margin: 0; } .status-badge.small { font-size: 0.7rem; padding: 3px 8px; } .status-badge.small svg { width: 12px; height: 12px; } /* Editable Status - Green tint */ .status-badge.status-editable { background: color-mix(in srgb, var(--color-active-green) 15%, transparent); border: 1px solid color-mix(in srgb, var(--color-active-green) 30%, transparent); color: var(--color-active-green); } .status-badge.status-editable svg { stroke: var(--color-active-green); } /* Private Status - Orange tint */ .status-badge.status-private { background: color-mix(in srgb, var(--brand-color-4) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-4) 30%, transparent); color: var(--brand-color-4); } .status-badge.status-private svg { stroke: var(--brand-color-4); } /* Closed Status - Red tint */ .status-badge.status-closed { background: color-mix(in srgb, var(--brand-color-2) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-2) 30%, transparent); color: var(--brand-color-2); } .status-badge.status-closed svg { stroke: var(--brand-color-2); } /* My Post */ .status-badge.my-post { background: color-mix(in srgb, var(--brand-color-1) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-1) 30%, transparent); color: var(--brand-color-1); } .status-badge.my-post svg { stroke: var(--brand-color-1); } .post-block .post-title { padding: 0; color: var(--text-color); } .post-meta { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--grayed-text-color); } .post-meta * { font-size: 0.8rem !important; } .post-author { font-weight: 600; color: var(--text-color); } .meta-separator { color: var(--deemed-text-color); } .post-time, .post-views { color: var(--grayed-text-color); } @media (max-width: 768px) { .post-block .post-title { font-size: 1.2rem; } .post-meta { font-size: 0.85rem; } } /* ========================================================= Post Content ========================================================= */ .post-content { display: block; width: 100%; color: var(--text-color); margin: var(--default-margin) 0px var(--large-margin) 0px; } .post-content p { margin: 0 0 1em 0; } .post-content p:last-child { margin-bottom: 0; } .post-content ul, .post-content ol { margin: 0 0 1em 0; padding-left: 1.5em; } .post-content li { margin-bottom: 0.5em; display: list-item; } .post-content code { background: var(--shade-back-color); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 0.9em; } .post-content pre { background: var(--shade-back-color); padding: var(--default-padding); border-radius: var(--small-radius); overflow-x: auto; margin: 0 0 1em 0; } .post-content blockquote { border-left: 3px solid var(--brand-color-3); margin: 0 0 1em 0; padding-left: var(--default-padding); color: var(--grayed-text-color); } /* ========================================================= Post Actions (Vote, Comment, Reply, Flag, Edit, Delete) ========================================================= */ .post-actions { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--default-gap); padding-top: var(--default-padding); border-top: 1px solid var(--border-color-light); background: transparent; } /* Vote Controls */ .vote-controls { display: flex; flex-direction: row; align-items: center; gap: 4px; background: var(--shade-back-color-light); border-radius: 999px; padding: 4px; } .vote-controls.small { padding: 2px 6px; } .vote-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; transition: all 0.15s ease; } .vote-controls.small .vote-btn { width: 26px; height: 26px; } .vote-btn svg { width: 18px; height: 18px; margin: 0; stroke: var(--grayed-text-color); fill: none; transition: all 0.15s ease; } .vote-controls.small .vote-btn svg { width: 14px; height: 14px; } .vote-btn:hover { background: var(--hover-bg-color); } .vote-btn.upvote[data-upvoted="true"] svg, .vote-btn.upvote:hover svg, .vote-btn.upvote.active svg { stroke: var(--color-active-green); fill: var(--color-active-green); } .vote-btn.upvote[data-downvoted="true"] svg, .vote-btn.downvote:hover svg, .vote-btn.downvote.active svg { stroke: var(--brand-color-2); fill: var(--brand-color-2); } .vote-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .vote-count { font-size: 0.95rem; font-weight: 600; min-width: 24px; text-align: center; color: var(--text-color); } .vote-controls.small .vote-count { font-size: 0.85rem; min-width: 20px; } /* Action Buttons Container */ .action-buttons { display: flex; flex-direction: row; align-items: center; gap: 4px; } /* Action Button */ .action-btn { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 8px 12px; border: none; border-radius: var(--small-radius); background: transparent; font-size: 0.9rem; color: var(--grayed-text-color); cursor: pointer; transition: all 0.15s ease; } .action-btn.small { padding: 6px 8px; font-size: 0.85rem; } .action-btn svg { width: 18px; height: 18px; margin: 0; stroke: var(--grayed-text-color); transition: stroke 0.15s ease; } .action-btn.small svg { width: 16px; height: 16px; } .action-btn:hover { background: var(--hover-bg-color); color: var(--text-color); } .action-btn:hover svg { stroke: var(--text-color); } .action-btn.danger:hover { background: color-mix(in srgb, var(--brand-color-2) 10%, transparent); color: var(--brand-color-2); } .action-btn.danger:hover svg { stroke: var(--brand-color-2); } /* Comment count styling */ /* Author-only buttons (hidden by default, shown via JS for post author) */ .author-only { display: none; } /* Show author buttons when post has data-mypost attribute */ .post-block[data-mypost="true"] .author-only, .comment-item[data-mypost="true"] .author-only { display: flex; } /* Hide edit/delete when item is no longer editable (past 15-min window) */ .post-block[data-is-editable="false"] .requires-editable, .comment-item[data-is-editable="false"] .requires-editable { display: none !important; } /* Hide reply/comment buttons when post is closed */ .post-block.post-main[data-is-closed="true"]~.replies-section .requires-open, .post-block.post-main[data-is-closed="true"] .requires-open { display: none !important; } /* Show closed message when post is closed */ .closed-message { display: none; flex-direction: row; align-items: center; gap: 8px; width: 100%; padding: var(--default-padding); margin-top: var(--small-margin); font-size: 0.9rem; color: var(--brand-color-2); background: color-mix(in srgb, var(--brand-color-2) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand-color-2) 20%, transparent); border-radius: var(--small-radius); } .closed-message svg { width: 18px; height: 18px; margin: 0; stroke: var(--brand-color-2); flex-shrink: 0; } .post-block.post-main[data-is-closed="true"] .closed-message { display: flex; } @media (max-width: 768px) { .post-actions { flex-wrap: wrap; gap: 8px; } .action-btn { padding: 8px 10px; } .action-btn span:not(.comment-count) { display: none; } } /* ========================================================= Comments Section ========================================================= */ .comments-section { display: flex; flex-direction: column; width: 100%; margin-top: var(--default-margin); padding-top: var(--default-margin); border-top: 1px solid var(--border-color-light); background-color: color-mix(in srgb, var(--brand-color-1) 10%, transparent); /* background-color: var(--shade-back-color-light); */ padding: 5px; border-radius: 5px; overflow: hidden; /* transition: max-height 0.3s ease, opacity 0.3s ease; */ } .comments-section.collapsed { max-height: 0; padding-top: 0; margin-top: 0; border-top: none; opacity: 0; pointer-events: none; } .comments-section.expanded { max-height: 2000px; opacity: 1; pointer-events: auto; } .comments-list { display: flex; flex-direction: column; gap: var(--small-gap); width: 100%; } .comment-block{ width: 100% !important; border-bottom: 1px solid var(--border-color); padding: 0px 5px; } .comment-block:last-child{ border-bottom: none; } /* ========================================================= Comment Item ========================================================= */ .comment-item { display: flex; flex-direction: column; padding: var(--default-padding); background: var(--shade-back-color-light); border-radius: var(--small-radius); border-left: 3px solid var(--border-color); width: 100% !important; } .comment-header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; width: 100% !important; margin-bottom: 6px; font-size: 0.85rem; } .comment-author { font-weight: 600; color: var(--text-color); } .author-badge { display: inline-flex; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; background: var(--brand-color-2); color: var(--highlight-bg-text); } .comment-time { color: var(--grayed-text-color); font-size: 0.85rem; } .comment-content { display: block; width: 100%; font-size: 0.90rem; line-height: 1.6; color: var(--text-color); margin-bottom: 8px; } .comment-content p { margin: 0; } .comment-actions { display: flex; flex-direction: row; align-items: center; gap: 4px; margin-top: 4px; } @media (max-width: 768px) { .comment-item { padding: var(--small-padding) var(--default-padding); } } /* ========================================================= Replies Section ========================================================= */ .replies-section { display: flex; flex-direction: column; width: 100%; margin-top: var(--large-margin); } .replies-header { display: flex; flex-direction: row; align-items: center; gap: var(--default-gap); padding: var(--default-padding); margin-bottom: var(--small-margin); border-bottom: 2px solid var(--brand-color-2); } .replies-header h2 { margin: 0 !important; padding: 0 !important; font-size: 1.1rem !important; font-weight: 700; color: var(--text-color); } .reply-count { font-size: 0.9rem; color: var(--grayed-text-color); padding: 4px 10px; border-radius: 999px; background: var(--shade-back-color); } @media (max-width: 768px) { .replies-section { margin-top: var(--default-margin); } .replies-header { padding: var(--default-padding); margin-bottom: 0; border-bottom: 1px solid var(--border-color); /* background: var(--background-color); */ } } /* ========================================================= Empty States ========================================================= */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--large-padding); text-align: center; color: var(--grayed-text-color); } .empty-state svg { width: 48px; height: 48px; margin-bottom: var(--default-margin); stroke: var(--deemed-text-color); } .empty-state p { margin: 0; font-size: 0.95rem; } /* ========================================================= Loading State ========================================================= */ .loading-spinner { display: flex; align-items: center; justify-content: center; padding: var(--large-padding); width: 100%; } .loading-spinner::after { content: ""; width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--brand-color-2); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================= Utility: Smooth scroll anchor offset ========================================================= */ .post-block[id], .comment-item[id] { scroll-margin-top: calc(var(--nav-height-desktop) + 20px); } @media (max-width: 768px) { .post-block[id], .comment-item[id] { scroll-margin-top: calc(var(--nav-height-mobile) + 10px); } } /* ========================================================= Dark Mode Adjustments ========================================================= */ @media screen and (prefers-color-scheme: dark) { .post-category-badge { background: color-mix(in srgb, var(--brand-color-3) 25%, transparent); border-color: color-mix(in srgb, var(--brand-color-3) 40%, transparent); } .comment-item { background: var(--shade-back-color); } .vote-controls { background: var(--shade-back-color); } } .vote-btn[data-flagged="true"] svg, .vote-btn[data-flagged="true"] svg path { stroke: var(--brand-color-2); fill: var(--brand-color-2); } .action-btn.active { background-color: var(--shade-back-color); } .empty-content-message{ width: 100%; padding: 10px 20px; font-size: 1.2rem; } /* #region Common typography */ /* Headings */ h1 { font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; line-height: 1.2; } h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-top: 2rem; margin-bottom: 0.75rem; line-height: 1.3; } h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; line-height: 1.4; color: var(--text-primary); padding: 5px 10px; border-bottom: 1px solid var(--border-color); } h4 { font-size: 1.125rem; font-weight: 600; color: var(--text-secondary); margin-top: 1.25rem; margin-bottom: 0.5rem; line-height: 1.4; } /* SVG */ /* Paragraphs */ p { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 1rem; } /* Links */ a { color: var(--accent-primary); text-decoration: none; } a:hover { color: var(--accent-hover); } /* Lists */ ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; color: var(--text-secondary); } ul { list-style-type: disc; } ol { list-style-type: decimal; } li { line-height: 1.7; margin-bottom: 0.5rem; } li::marker { color: var(--hp-accent-primary); } /* Nested lists */ ul ul, ol ul { list-style-type: circle; margin-top: 0.5rem; margin-bottom: 0.5rem; } ol ol, ul ol { list-style-type: lower-alpha; margin-top: 0.5rem; margin-bottom: 0.5rem; } /* Strong/Bold */ strong { font-weight: 600; color: var(--text-primary); } /* Emphasis/Italic */ em { font-style: italic; color: var(--text-secondary); } /* Code inline */ code { font-family: 'Courier New', monospace; font-size: 0.875rem; background-color: var(--hp-code-bg); color: var(--hp-code-text); padding: 0.125rem 0.375rem; border-radius: 0.25rem; border: 1px solid var(--hp-code-border); } /* Code blocks */ pre { background-color: var(--hp-code-bg); border: 1px solid var(--hp-code-border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin-bottom: 1rem; } pre code { background: none; border: none; padding: 0; font-size: 0.875rem; line-height: 1.6; } /* Blockquote */ blockquote { border-left: 4px solid var(--hp-accent-primary); padding-left: 1rem; margin: 1rem 0; color: var(--text-primary); font-style: italic; } /* Horizontal rule */ hr { border: none; border-top: 1px solid var(--border-color); margin: 2rem 0; } .section-header { padding: 5px 10px; border-bottom: 1px solid var(--border-color); } /* #endregion Common typography */ a.list-item-container{ text-decoration: none; } .context-menu .separator{ border-bottom: 1px solid var(--border-color); width: 100%; } .shaded-info-byte { background-color: var(--shade-back-color); padding: 0px var(--small-padding); font-size: 0.8rem; border-radius: var(--small-radius); border: 1px solid var(--border-color); font-weight: bold; } .rte-editor-container{ display: flex; flex-direction: column; align-items: start; justify-content: start; flex-grow: 1; flex-shrink: 1; position: relative; width: 100% !important; height: 100% !important; overflow-y: auto; } .rte-editor-container .ql-container{ width: 100% !important; height: 100% !important; } /* ========================================================= Forum Post Typography (Light/Dark via CSS variables) Scope: only these elements inside .forum-post: h1, h2, h3, p, ol, li, a, strong, em, u, s, br, span ========================================================= */ /* Optional: If you already have a dark mode selector/class, keep it and map these variables there. Example selectors: [data-theme="dark"], .theme-dark, body.dark */ :root { /* Reuse existing palette */ --forum-post-text: var(--text-color); --forum-post-muted: var(--grayed-text-color); --forum-post-heading: var(--text-color); --forum-post-link: var(--text-color-link); --forum-post-link-hover: var(--highlight-bg-text-color); /* Derived (new) */ --forum-post-selection-bg: var(--bg-color-info); --forum-post-selection-text: var(--text-color); --forum-post-max-width: 100%; --forum-post-h1-size: 1.6rem; --forum-post-h2-size: 1.4rem; --forum-post-h3-size: 1.2rem; --forum-post-heading-line-height: 1.25; --forum-post-paragraph-space: 0.85em; --forum-post-list-indent: 1.35em; --forum-post-focus-ring: 0 0 0 3px rgba(95, 196, 229, 0.35); /* brand-color-1 */ } /* Make selection look intentional inside posts */ /* ::selection { background: var(--forum-post-selection-bg); color: var(--forum-post-selection-text); } */ /* Dark mode mapping (adjust selector to your app) */ [data-theme="dark"], .theme-dark, body.dark { /* Reuse existing variable names if your app already swaps them in dark mode. If you already redefine --text-color, --grayed-text-color, etc. in dark mode, you can omit this entire block and everything will follow automatically. */ /* Only define fallbacks if needed: */ --forum-post-text: var(--text-color); --forum-post-muted: var(--grayed-text-color); --forum-post-heading: var(--text-color); --forum-post-link: var(--text-color-link); --forum-post-link-hover: var(--brand-color-1); /* Keep selection visible in dark */ --forum-post-selection-bg: rgba(95, 196, 229, 0.20); --forum-post-selection-text: var(--text-color); --forum-post-focus-ring: 0 0 0 3px rgba(95, 196, 229, 0.45); } /* ------------------------- Base container behavior ------------------------- */ .forum-post { color: var(--forum-post-text); max-width: var(--forum-post-max-width); } /* ------------------------- Headings ------------------------- */ .forum-post h1, .forum-post h2, .forum-post h3 { color: var(--forum-post-heading); font-weight: 650; line-height: var(--forum-post-heading-line-height); letter-spacing: -0.01em; margin: 1.1em 0 0.45em; text-wrap: balance; } .forum-post h1 { font-size: var(--forum-post-h1-size); margin-top: 0.6em; } .forum-post h2 { font-size: var(--forum-post-h2-size); margin-top: 1.25em; } .forum-post h3 { font-size: var(--forum-post-h3-size); margin-top: 1.1em; font-weight: 600; } /* ------------------------- Paragraphs ------------------------- */ .forum-post p { margin: 0 0 var(--forum-post-paragraph-space); color: var(--forum-post-text); } /* ------------------------- Lists ------------------------- */ .forum-post ol { margin: 0 0 var(--forum-post-paragraph-space); padding-left: var(--forum-post-list-indent); } .forum-post li { margin: 0.15em 0; padding-left: 0.1em; color: var(--forum-post-text); } /* Improve readability for wrapped list items */ .forum-post ol li::marker { color: var(--forum-post-muted); font-variant-numeric: tabular-nums; } /* ------------------------- Inline semantics ------------------------- */ .forum-post strong { font-weight: 650; color: var(--forum-post-text); } .forum-post em { font-style: italic; color: var(--forum-post-text); } /* Keep underline and strike subtle + modern */ .forum-post u { text-decoration-thickness: var(--forum-post-underline-thickness); text-underline-offset: var(--forum-post-underline-offset); text-decoration-skip-ink: auto; } .forum-post s { text-decoration-thickness: 0.08em; opacity: 0.85; } /* br: no special styling needed, but included explicitly per request */ .forum-post br { content: ""; } /* span: default to inheriting; allow utility spans to work cleanly */ /* .forum-post span { color: inherit; font: inherit; line-height: inherit; } */ /* ========================================================= Oddapy Forum — Premium First-run Greetings (Light + Dark) Works with your existing DOM, no markup changes required. Dark mode: auto via prefers-color-scheme, plus manual override using .theme-dark / .theme-light on . ========================================================= */ .first-run-greetings { /* Theme tokens (light defaults) */ --bg: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-2: rgba(255, 255, 255, 0.92); --text: rgba(15, 23, 42, 0.92); --muted: rgba(15, 23, 42, 0.62); --border: rgba(15, 23, 42, 0.10); /* Brand accent */ --accent: #2f6fed; --accent-2: #8b5cf6; /* subtle secondary for premium gradient */ /* Geometry */ --radius: 18px; --pad: 18px; /* Shadows */ --shadow: 0 18px 50px rgba(2, 6, 23, 0.18); --shadow-soft: 0 10px 26px rgba(2, 6, 23, 0.12); /* Ring gradient */ --ring: linear-gradient( 135deg, rgba(47, 111, 237, 0.55), rgba(139, 92, 246, 0.45), rgba(47, 111, 237, 0.35) ); /* Typography */ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); position: relative; max-width: 1080px; margin: 16px auto; border-radius: var(--radius); overflow: hidden; /* Premium card surface */ background: radial-gradient( 1200px 380px at 20% -10%, rgba(47, 111, 237, 0.18), transparent 60% ), radial-gradient( 900px 320px at 90% 0%, rgba(139, 92, 246, 0.14), transparent 55% ), var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow); } /* Gradient ring border (premium) */ .first-run-greetings::before { content: ""; position: absolute; inset: 0; padding: 1px; /* ring thickness */ border-radius: inherit; background: var(--ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; opacity: 0.9; } /* Header — glassy, sticky, premium spacing */ .first-run-greetings .greetings-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px var(--pad); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.50) ); border-bottom: 1px solid rgba(15, 23, 42, 0.10); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Title */ .first-run-greetings .greetings-welcome { display: inline-flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.2px; line-height: 1.2; } /* Add a subtle accent dot before title for polish */ .first-run-greetings .greetings-welcome::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(47, 111, 237, 1), rgba(139, 92, 246, 1)); box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.10); } /* Close button — make it feel premium even if your base button is plain */ .first-run-greetings #btnWelcomeCloser { flex: 0 0 auto; border-radius: 12px !important; border: 1px solid rgba(15, 23, 42, 0.10); background: rgba(255, 255, 255, 0.60); box-shadow: var(--shadow-soft); transition: transform 140ms ease, background 140ms ease, border-color 140ms ease; } .first-run-greetings #btnWelcomeCloser:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.78); border-color: rgba(47, 111, 237, 0.25); } .first-run-greetings #btnWelcomeCloser:active { transform: translateY(0px); } /* Body */ .first-run-greetings .greeting-body { padding: 16px var(--pad) 20px; font-size: 14.5px; line-height: 1.7; color: var(--text); } /* First paragraph: “hero” callout styling */ .first-run-greetings .greeting-body > p:first-of-type, .first-run-greetings .greeting-body > .special-note { margin: 0 0 14px; padding: 14px 14px 14px 14px; border-radius: 14px; background: linear-gradient( 135deg, rgba(47, 111, 237, 0.10), rgba(139, 92, 246, 0.08) ); border: 1px solid rgba(47, 111, 237, 0.18); color: var(--text); } /* Paragraph rhythm */ .first-run-greetings .greeting-body p { margin: 0 0 12px; color: var(--text); } /* Section titles */ .first-run-greetings .greeting-body h2 { margin: 18px 0 10px; font-size: 1.1rem; font-weight: 900; letter-spacing: 0.55px; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } /* Add a small divider line after headings */ .first-run-greetings .greeting-body h2::after { content: ""; height: 3px; width: 56px; background: linear-gradient(90deg, #de2127, transparent); margin-left: 6px; opacity: 0.9; } /* Lists layout */ .first-run-greetings .greeting-body ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; } /* List items as premium tiles */ .first-run-greetings .greeting-body li { position: relative; padding: 12px 14px 12px 44px; border-radius: 14px; background: var(--surface-2); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 8px 20px rgba(2, 6, 23, 0.06); margin-bottom: 0px; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } .first-run-greetings .greeting-body li:hover { transform: translateY(-1px); border-color: rgba(47, 111, 237, 0.20); box-shadow: 0 12px 26px rgba(2, 6, 23, 0.10); } /* Icon chip on each list item */ .first-run-greetings .greeting-body li::before { content: "✓"; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: rgba(47, 111, 237, 1); background: rgba(47, 111, 237, 0.12); border: 1px solid rgba(47, 111, 237, 0.22); } /* Emphasis */ .first-run-greetings .greeting-body strong { color: rgba(15, 23, 42, 0.95); font-weight: 800; } /* “Thanks” line: treat as a subtle CTA badge */ .first-run-greetings .greeting-body .tanks-tag { display: inline-flex; align-items: center; margin: 0 auto; gap: 8px; padding: 10px 12px; border-radius: 999px; background: linear-gradient( 135deg, rgba(47, 111, 237, 0.14), rgba(139, 92, 246, 0.10) ); border: 1px solid rgba(47, 111, 237, 0.22); margin-top: 30px; margin-bottom: 30px; } /* Links (future-proof) */ .first-run-greetings a { color: var(--accent); text-decoration: none; font-weight: 700; } .first-run-greetings a:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 720px) { .first-run-greetings { margin: 12px 12px; border-radius: 16px; } .first-run-greetings .greeting-body { font-size: 14px; } } /* ========================================================= Dark Mode — Auto + Manual Override - Auto: prefers-color-scheme: dark - Manual: add .theme-dark or .theme-light on ========================================================= */ @media (prefers-color-scheme: dark) { .first-run-greetings { --bg: #0b1220; --surface: rgba(17, 24, 39, 0.62); --surface-2: rgba(17, 24, 39, 0.82); --text: rgba(255, 255, 255, 0.88); --muted: rgba(255, 255, 255, 0.60); --border: rgba(255, 255, 255, 0.12); --shadow: 0 20px 60px rgba(0, 0, 0, 0.55); --shadow-soft: 0 12px 26px rgba(0, 0, 0, 0.35); } .first-run-greetings .greetings-header { background: linear-gradient( 180deg, rgba(17, 24, 39, 0.76), rgba(17, 24, 39, 0.50) ); border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .first-run-greetings #btnWelcomeCloser { background: rgba(17, 24, 39, 0.60); border: 1px solid rgba(255, 255, 255, 0.10); } .first-run-greetings .greeting-body > p:first-of-type, .first-run-greetings .greeting-body > .special-note { border: 1px solid rgba(47, 111, 237, 0.22); color: var(--text); } .first-run-greetings .greeting-body li { border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); } .first-run-greetings .greeting-body strong { color: rgba(255, 255, 255, 0.92); } } /* Manual overrides (optional): put on */ /* .theme-dark .first-run-greetings { --bg: #0b1220; --surface: rgba(17, 24, 39, 0.62); --surface-2: rgba(17, 24, 39, 0.82); --text: rgba(255, 255, 255, 0.88); --muted: rgba(255, 255, 255, 0.60); --border: rgba(255, 255, 255, 0.12); --shadow: 0 20px 60px rgba(0, 0, 0, 0.55); --shadow-soft: 0 12px 26px rgba(0, 0, 0, 0.35); } .theme-light .first-run-greetings { --bg: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-2: rgba(255, 255, 255, 0.92); --text: rgba(15, 23, 42, 0.92); --muted: rgba(15, 23, 42, 0.62); --border: rgba(15, 23, 42, 0.10); } */ .no-content-message{ display: flex; flex-direction: column; margin: 0 auto; align-items: center; justify-content: center; max-width: 800px; padding-bottom: 30px; border-radius: 15px; /* margin-top: 30px; */ /* background-color: color-mix(in srgb, var(--background-color) 30%, transparent); border: 1px solid var(--background-color); */ } .no-content-message img{ width: 100%; max-width: 275px; height: auto; object-fit: cover; overflow: hidden; /* background-color: chocolate; */ } .no-content-message p{ text-align: center; } .no-content-message p strong{ font-weight: 700; } .page-footer-container{ display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--default-gradient); width: 100% !important; } .page-footer{ display: flex; flex-direction: row; align-items: start; justify-content: space-between; gap: var(--large-gap); margin-top: var(--large-margin); width: 100%; max-width: 800px; padding: var(--default-padding) var(--large-padding); /* background-color: rgba(255,255,255,0.30); */ } .footer-app { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 25px; border-radius: 15px; min-width: 175px; } .footer-app:hover { background-color: var(--shade-back-color); } .footer-app img{ width: 128px; } .footer-app span{ font-size: 1.5rem; font-weight: bold; } .page-footer ul { list-style: none; min-width: 200px; padding: 5px; /* background-color: bisque; */ } @media (max-width: 768px) { .page-footer{ flex-direction: column; align-items: center; justify-content: center; } .page-footer ul{ width: 320px } .page-footer ul>li{ padding: var(--small-padding) var(--large-padding); } } .page-footer li>a{ color: var(--text-color); } .page-footer li{ padding: var(--small-padding); border-radius: 0px; border-bottom: 1px solid var(--border-color); } .page-footer li:hover{ background-color: var(--shade-back-color); } .page-footer li:first-child{ border-top-left-radius: var(--default-radius); border-top-right-radius: var(--default-radius); } .page-footer li:last-child{ border-bottom-left-radius: var(--default-radius); border-bottom-right-radius: var(--default-radius); border-bottom: none; } .copyright-notice{ text-align: center; color: var(--grayed-text-color); } a[target="_blank"]::after{ content:""; display:inline-block; width:0.9em; height:0.9em; margin-left:0.35em; vertical-align:-0.12em; /* icon inherits text color */ background-color: currentColor; /* inline SVG mask */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke-width='1' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath stroke-width='1' d='M19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke-width='1' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath stroke-width='1' d='M19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z'/%3E%3C/svg%3E") no-repeat center / contain; opacity:0.25; } .control-container { align-items: center; justify-content: center; width: 100%; align-items: start; } .control-container-h { flex-direction: row; align-items: center; justify-content: start; width: 100%; padding: var(--small-padding); } .control-container-h>span.name { display: inline-block; width: 100%; flex-grow: 1; flex-shrink: 1; } .header>div{ overflow-x: hidden; } @media only screen and (max-width:440px) { .myposts-tab-bar { gap: var(--small-gap) !important; padding: var(--small-padding) !important; } .myposts-tab-bar .post-breadcrumb{ padding: var(--small-padding) !important; gap: var(--small-gap) !important; } .myposts-tab-bar .tb-button{ margin-right: 0px !important; } } @media only screen and (max-width:370px) { .myposts-tab-bar .post-breadcrumb *{ font-size: 0.9rem !important; } } .myposts-record-counter{ display: inline-flex; flex-grow: 1; flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; letter-spacing: 1px; } #content-navbar-mobile{ display: none; } #content-navbar{ display: flex; flex-direction: row; align-items: center; flex-grow: 0; flex-shrink: 0; } @media only screen and (max-width:768px) { #content-navbar-mobile{ display: flex; } #content-navbar{ display: none; } .myposts-record-counter{ flex-grow: 0; flex-shrink: 0; } } .forum-rules{ background: linear-gradient(135deg, rgba(47, 111, 237, 0.10), rgba(139, 92, 246, 0.08)); border: 1px solid rgba(47, 111, 237, 0.18); border-radius: 15px; padding: 15px; width: 100% !important; } .forum-rules h3{ width: 100%; /* border: none; */ }