Forogramero
body {
font-family: Poppins, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
.Hero-title, .Hero h1 {
font-weight: 700;
font-size: 36px;
line-height: 48px;
display: inline;
position: relative;
}
.Hero {
margin-top: -1px;
background: #35adce;
text-align: center;
color: #000;
}
/* Fixed width and left alignment */
.Hero.WelcomeHero .container,
.Hero.WelcomeHero .containerNarrow {
max-width: 1100px;
margin: 0 auto;
text-align: left;
}
/* Tag Hero background color */
.Hero.TagHero {
background-color:#35adce;
}
/* Hero container: fixed width and left aligned */
.Hero.TagHero .container,
.Hero.TagHero .containerNarrow {
max-width: 1100px; /* fixed desktop width */
margin: 0 auto; /* center container */
text-align: left;
}
/* Side navigation dropdown buttons */
.Dropdown-menu.dropdown-menu li a {
-webkit-text-size-adjust: 100%;
--flarum-screen: desktop-hd;
font-family: Poppins, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
cursor: pointer;
white-space: nowrap;
text-align: left;
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: #666;
}
/* FORCE header search input: white background, black text */
.Header .Search .FormControl,
.App-header .Search .FormControl,
.item-search .Search .FormControl {
background-color: #fff !important;
color: #000 !important;
border-radius: 0 !important;
}
/* Placeholder text */
.Header .Search .FormControl::placeholder,
.App-header .Search .FormControl::placeholder {
color: #666 !important;
}
/* Cursor color */
.Header .Search .FormControl {
caret-color: #000 !important;
}
/* Hide Welcome Hero close button */
.Hero.WelcomeHero .Hero-close {
display: none !important;
}
.Hero.TagHero .containerNarrow {
margin-top: -16px;
margin-bottom: -12px;
}
.Hero.WelcomeHero {
margin-top: -16px;
margin-bottom: -12px;
}
/* Sort dropdown toggle button */
.IndexPage-toolbar-view .Dropdown-toggle.Button {
background-color: #000 !important;
color: #fff !important;
border-radius: 0 !important;
}
/* Caret (arrow) */
.IndexPage-toolbar-view .Dropdown-toggle .Button-caret {
color: #fff !important;
}
/* Toolbar action buttons (refresh, mark all as read) */
.IndexPage-toolbar-action .Button {
background-color: #000 !important;
color: #fff !important;
border-radius: 0 !important;
}
/* Ensure icons stay white */
.IndexPage-toolbar-action .Button-icon {
color: #fff !important;
}
/* Category (tag) icons only */
.TagLinkButton .Button-icon {
color: #000 !important;
}
.DiscussionListItem-info li {
display: inline-flex !important;
}
/* Bold ONLY unread discussion titles */
.DiscussionListItem-content:not(.read) .DiscussionListItem-title {
font-weight: 700;
}
/* Only the replied line */
.DiscussionListItem-info li.item-terminalPost {
color: #000 !important;
}
/* Category tag label styling */
.item-tags .TagLabel {
background-color: #000 !important;
color: #fff !important;
border-radius: 0 !important;
font-size: 11px;
padding: 2px 4px;
}
body {
font-family: Poppins, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
.Hero-title, .Hero h1 {
font-weight: 700;
font-size: 36px;
line-height: 48px;
display: inline;
position: relative;
}
.Hero {
margin-top: -1px;
background: #35adce;
text-align: center;
color: #000;
}
/* Fixed width and left alignment */
.Hero.WelcomeHero .container,
.Hero.WelcomeHero .containerNarrow {
max-width: 1100px;
margin: 0 auto;
text-align: left;
}
/* Hero container: fixed width and left aligned */
.Hero.TagHero .container,
.Hero.TagHero .containerNarrow {
max-width: 1100px; /* fixed desktop width */
margin: 0 auto; /* center container */
text-align: left;
}
/* Side navigation dropdown buttons */
.Dropdown-menu.dropdown-menu li a {
-webkit-text-size-adjust: 100%;
--flarum-screen: desktop-hd;
font-family: Poppins, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
cursor: pointer;
white-space: nowrap;
text-align: left;
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: #666;
}
/* FORCE header search input: white background, black text */
.Header .Search .FormControl,
.App-header .Search .FormControl,
.item-search .Search .FormControl {
background-color: #fff !important;
color: #000 !important;
border-radius: 0 !important;
}
/* Placeholder text */
.Header .Search .FormControl::placeholder,
.App-header .Search .FormControl::placeholder {
color: #666 !important;
}
/* Cursor color */
.Header .Search .FormControl {
caret-color: #000 !important;
}
/* Hide Welcome Hero close button */
.Hero.WelcomeHero .Hero-close {
display: none !important;
margin-top: -16px;
margin-bottom: -12px;
}
.Hero.TagHero .containerNarrow {
margin-top: -16px;
margin-bottom: -12px;
}
.Hero.WelcomeHero {
margin-top: -16px;
margin-bottom: -12px;
}
/* Sort dropdown toggle button */
.IndexPage-toolbar-view .Dropdown-toggle.Button {
background-color: #000 !important;
color: #fff !important;
border-radius: 0 !important;
}
/* Caret (arrow) */
.IndexPage-toolbar-view .Dropdown-toggle .Button-caret {
color: #fff !important;
}
/* Toolbar action buttons (refresh, mark all as read) */
.IndexPage-toolbar-action .Button {
background-color: #000 !important;
color: #fff !important;
border-radius: 0 !important;
}
/* Ensure icons stay white */
.IndexPage-toolbar-action .Button-icon {
color: #fff !important;
}
/* Category (tag) icons only */
.TagLinkButton .Button-icon {
color: #000 !important;
}
.DiscussionListItem-info li {
display: inline-flex !important;
}
/* Bold ONLY unread discussion titles */
.DiscussionListItem-content:not(.read) .DiscussionListItem-title {
font-weight: 700;
}
/* Only the replied line */
.DiscussionListItem-info li.item-terminalPost {
color: #000 !important;
}
/* Category tag label styling */
.item-tags .TagLabel {
background-color: #000 !important;
color: #fff !important;
border-radius: 0 !important;
font-size: 11px;
padding: 2px 4px;
}
/* Left hover bar (hidden by default) */
.IndexPage .DiscussionListItem::before,
.TagPage .DiscussionListItem::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: #000;
opacity: 0;
pointer-events: none;
}
/* Show bar on hover */
.IndexPage .DiscussionListItem:hover::before,
.TagPage .DiscussionListItem:hover::before {
opacity: 1;
}
/* Always show discussion controls */
.DiscussionListItem-controls {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: none !important;
}
/* Remove hover / focus / active effects */
.DiscussionListItem-controls .Button,
.DiscussionListItem-controls .Button:hover,
.DiscussionListItem-controls .Button:focus,
.DiscussionListItem-controls .Button:active {
background: none !important;
box-shadow: none !important;
outline: none !important;
}
.DiscussionPage .PostStream .PostStream-item { background-color: #f5f5f5;
padding: 12px 24px 8px 16px;
margin-bottom: 24px; border: none; }
/* Always show post actions */
.Post-actions {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Make post action text bold and black */
.Post-actions .Button-label {
font-weight: 700;
color: #000 !important;
}
/* Hide Like button in post actions */
.Post-actions .item-like {
display: none !important;
}
/* Header hover: user, notifications, flags (search excluded) */
.Header-controls
.item-session .Dropdown-toggle:hover,
.Header-controls
.item-notifications .Dropdown-toggle:hover,
.Header-controls
.item-flags .Dropdown-toggle:hover {
background-color: #fff !important;
color: #000 !important;
}
/* Main page discussion list ONLY */
.IndexPage .DiscussionListItem {
position: relative;
border: 2px solid #000;
border-radius: 0;
margin-bottom: 12px;
}
/* Sign Up & Log In – default */
.item-signUp .Button-label,
.item-logIn .Button-label {
color: #fff !important;
font-weight: 400;
}
/* Hover effect */
.item-signUp .Button:hover,
.item-logIn .Button:hover {
background-color: #fff !important;
border-radius: 999px; /* fully rounded */
}
/* Keep text white even on hover */
.item-signUp .Button:hover .Button-label,
.item-logIn .Button:hover .Button-label {
color: #000 !important;
}
/* Write a Reply placeholder */
.Post.ReplyPlaceholder {
margin-top: 0px !important; /* reduce top space */
border: none !important;
box-shadow: none !important;
}
/* Remove hover / focus border & outline */
.Post.ReplyPlaceholder:hover,
.Post.ReplyPlaceholder:focus,
.Post.ReplyPlaceholder:active {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.Button--primary {
background-color: #fcc31e;
color: #000;
border-radius: 9999px;
font-weight: 600;
font-size: 16px;
border: none;
cursor: pointer;
box-shadow: 4px 4px 0 #000000;
/* CRITICAL FIXES */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-clip: padding-box;
}
/* Hover: transparent effect */
.Button--primary:hover {
background-color: rgba(252, 195, 30, 0.85);
}
/* Active: pressed */
.Button--primary:active {
background-color: #fcc31e;
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 #000000;
}
/* Focus states (browser override prevention) */
.Button--primary:focus,
.Button--primary:focus-visible {
background-color: #fcc31e;
outline: none;
}
/* Flarum dropdown OPEN state — FORCE yellow */
.Dropdown.open .Dropdown-toggle.Button--primary,
.Dropdown-toggle.Button--primary[aria-expanded="true"],
.Button--primary.Button--active {
background-color: #fcc31e !important;
color: #000 !important;
}
/* ONLY real dropdown MENUS (li-based) */
.Dropdown-menu.dropdown-menu > li {
background-color: #fff;
}
/* Menu container */
.Dropdown-menu.dropdown-menu:has(> li) {
background-color: #fff;
box-shadow: 4px 4px 0 #000000;
border-radius: 0;
padding: 6px 0;
border: 1px solid #000;
}
/* Menu items */
.Dropdown-menu.dropdown-menu > li > a {
color: #000;
}
/* Icons inside menu items */
.Dropdown-menu.dropdown-menu > li > a .icon {
color: #000;
}
/* Icons turn white on hover */
.Dropdown-menu--right li:hover .icon {
color: #fff !important;
}
/* Hover */
.Dropdown-menu.dropdown-menu > li > a:hover {
background-color: #000 ;
color: #fff;
}
/* ONLY right-side dropdown menus (discussion actions, user menu) */
.Dropdown-menu--right li:hover > button,
.Dropdown-menu--right li:hover > a {
background-color: #000 !important;
color: #fff !important;
}
/* Icons turn white on hover */
.Dropdown-menu--right li:hover .icon {
color: #fff !important;
}
/* Text turns white on hover */
.Dropdown-menu--right li:hover > button,
.Dropdown-menu--right li:hover .Button-label {
color: #fff !important;
}
/* Keep session menu background WHITE while dropdown is open */
.item-session .Dropdown.open .Dropdown-toggle,
.item-session .Dropdown-toggle[aria-expanded="true"] {
background-color: #fff !important;
color: #000 !important;
}
.Composer {
border-radius: 0 !important;
box-shadow: none !important;
border: 2px solid #000 !important;
}
.TextEditor-controls
{
border-top: 1px solid #000;
}
.TagTile a,
.TagTile h3,
.TagTile p,
.TagTile span,
.TagTile time,
.TagTile i {
color: #000000;
}
.TagTile {
border: 2px solid #000000;
margin: 8px;
background-color: #ffffff !important;
}
.TagTile-lastPostedDiscussion {
background: #000 !important;
opacity: 1 !important;
margin: 0px !important;
}
.TagTile-lastPostedDiscussion-title,
.TagTile-lastPostedDiscussion time {
padding-left: 14px;
color: #ffd400 !important;
}
/* MAIN PAGE ONLY: remove default hover visuals */
.IndexPage .DiscussionListItem:hover {
background-color: transparent !important;
box-shadow: none !important;
}
.TagTile {
max-width: 320px;
}
/* Treat every upload/download group as a single button */
[data-fof-upload-download-uuid] {
display: inline-flex;
border: 2px solid #000;
border-radius: 0;
cursor: pointer;
/* Shadow */
box-shadow: 4px 4px 0 #000;
margin: 8px;
}
/* Press effect — NO transform */
[data-fof-upload-download-uuid]:active {
box-shadow: 2px 2px 0 #000;
}
/* Remove individual button borders & interactions */
[data-fof-upload-download-uuid] .Button {
border: none !important;
border-radius: 0 !important;
color: #000 !important;
pointer-events: none;
}
/* Remove shadow from the download icon button only */
[data-fof-upload-download-uuid]
.Button.hasIcon.Button--icon.Button--primary {
box-shadow: none !important;
}
/* Secondary (child) tags — always gray */
.TagLabel--child {
background-color: #ccc !important;
color: #000 !important;
}
/* Override inline --tag-bg color */
.TagLabel--child.colored {
background-color: #ccc !important;
}
/* Ensure text stays readable */
.TagLabel--child .TagLabel-name,
.TagLabel--child .TagLabel-text {
color: #000 !important;
}
/* Discussion page hero — left align content */
.DiscussionHero {
text-align: left !important;
}
/* Primary tag */
.DiscussionHero a.TagLabel:not(.TagLabel--child),
.DiscussionHero a.TagLabel:not(.TagLabel--child) * {
border-radius: 0 !important;
}
/* Child tag */
.DiscussionHero a.TagLabel.TagLabel--child,
.DiscussionHero a.TagLabel.TagLabel--child * {
border-radius: 0 !important;
}
.DiscussionHero a.TagLabel:not(.TagLabel--child) {
background-color: #fff !important;
color: #000 !important;
}
.DiscussionHero .DiscussionHero-items {
padding-top: 0!important;
}
.Post-body hr {
border-top: 2px solid #000;
}
.Button.LogInButton--google {
background-color: #fff;
color: #000;
border-radius: 0;
border:1px solid #000;
cursor: pointer;
box-shadow: 4px 4px 0 #000000;
}
/* Hover */
.Button.LogInButton--google:hover {
background-color: #e6e6e6;
}
/* Active */
.Button.LogInButton--google:active {
background-color: #e6e6e6;
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 #000000;
}
.Modal-content {
border: 2px solid #000;
border-radius: 0;
}
.Modal-content .App-titleControl {
font-weight: 700;
}
.Modal-content input,
.Modal-content .FormControl {
border-radius: 0 !important;
}
.Modal-body {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.LogInModal-signUp,
.LogInModal-signUp a {
font-weight: 700;
}
/* Notifications dropdown – remove default border, then add custom one */
.NotificationsDropdown .Dropdown-menu,
.NotificationsDropdown .NotificationList {
border: none !important; /* remove default border */
border-radius: 0 !important;
box-shadow: 4px 4px 0 #000000;
}
.NotificationsDropdown .Dropdown-menu {
border: 1px solid #000 !important;
}
/* Make notification excerpt text white on hover */
.NotificationsDropdown .Notification:hover .Notification-excerpt {
color: #ffffff !important;
}
.ButtonGroup.Dropdown--split.itemCount1 .SplitDropdown-button.Button.Button--primary.hasIcon {
border-radius: 9999px !important;
}
Enjoy
