Post by Matte on Aug 11, 2021 8:14:12 GMT -8
I feel like I'm overlooking something simple here, but I just can't seem to get the left and right arrows on my news bar to change color. I've played around with and altered the styling of the news bar to match my theme, but the one thing I haven't been able to find is a way to target the arrow color.
Here's my CSS for the nav tree / participated button / news bar
Here's my CSS for the nav tree / participated button / news bar
/* Navigation Tree + Participated Button + News Bar */
@nav_tree_color: @container_text_color_1;
@nav_tree_font: 70% @default_forum_text_font_family;
@nav_tree_decoration: none;
@nav_tree_background_color: @container_background_color_1;
@nav_tree_border_width: 1px;
@nav_tree_border_style: solid;
@nav_tree_border_color: @container_outer_border_color;
@nav_tree_border_radius: 4px;
@nav_tree_hover_color: @nav_tree_color;
@nav_tree_hover_font: @nav_tree_font;
@nav_tree_hover_decoration: none;
@nav_tree_hover_background_color: @container_highlight_color;
.recent-threads-button, #navigation-tree { color: @nav_tree_color; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; background: @nav_tree_background_color; margin-bottom: 10px; height: 20px; .rounded-corners(@nav_tree_border_radius); }
.recent-threads-button.new .new-icon { display: inline-block; }
#navigation-tree { overflow: hidden; }
#nav-tree { white-space: nowrap; }
.popup_html { position: absolute; top: 0; left: 0; z-index: 999999; }
#nav-tree ul { display: none; list-style-type: none; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; background-color: @nav_tree_background_color; .box-shadow(); }
#nav-tree > li { display: inline-block; position: relative; height: 20px; }
#nav-tree > li a { font: @nav_tree_font; color: @nav_tree_color; text-decoration: @nav_tree_decoration; display: block; padding: 4px 10px 4px 15px; margin: 0 1px 0 5px; }
#nav-tree > li:hover, #nav-tree .ui-menu li:hover { color: @nav_tree_hover_color !important; background-color: @nav_tree_hover_background_color; }
#nav-tree > li:hover > div > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color !important; text-decoration: @nav_tree_hover_decoration; }
#nav-tree .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color !important; text-decoration: @nav_tree_hover_decoration; }
#nav-tree > li:first-child { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
#nav-tree > li:first-child a { margin-left: -2px; }
#nav-tree .ui-menu { display: none; position: absolute; float: left; }
#nav-tree .ui-menu a { .rounded-corners(0px); }
#nav-tree .ui-menu li { position: relative; white-space: nowrap; padding: 2px 10px 2px 5px; }
#nav-tree .ui-menu li ul { display: none; z-index: 9999; position: absolute; }
#nav-tree .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }
#nav-tree .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }
#nav-tree li.new_span > a > .new-icon { float: none; display: inline-block; }
#nav-tree li.state-selected > a { font-weight: bold !important; }
#nav-tree .menu_arrow { width: 0; height: 0; position: absolute; top: 0px; right: -10px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_border_color; z-index: 1001; }
#nav-tree .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_background_color; z-index: 1002; }
#nav-tree > li:hover .menu_arrow { border-color: transparent transparent transparent @nav_tree_border_color; }
#nav-tree > li:hover .menu_arrow span { border-color: transparent transparent transparent @nav_tree_hover_background_color; }
.popup_html ul { display: none; list-style-type: none; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; background-color: @nav_tree_background_color; .box-shadow(); }
.popup_html li a { font: @nav_tree_font; color: @nav_tree_color; text-decoration: @nav_tree_decoration; display: block; padding: 4px 10px 4px 15px; margin: 0 1px 0 5px; }
.popup_html li:hover, .popup_html .ui-menu li:hover { color: @nav_tree_hover_color !important; background-color: @nav_tree_hover_background_color; }
.popup_html li:hover > div > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color !important; text-decoration: @nav_tree_hover_decoration; }
.popup_html .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color !important; text-decoration: @nav_tree_hover_decoration; }
.popup_html li { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
.popup_html li a { margin-left: -2px; }
.popup_html .ui-menu { display: none; position: absolute; float: left; z-index: 11; }
.popup_html .ui-menu a { .rounded-corners(0px); overflow: hidden; max-width: 550px; }
.popup_html .ui-menu li { position: relative; white-space: nowrap; padding: 2px 15px 2px 5px; }
.popup_html .ui-menu li ul { display: none; z-index: 9999; position: absolute; }
.popup_html .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }
.popup_html .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }
.popup_html li.new_span > a > .new-icon { float: none; display: inline-block; }
.popup_html li.state-selected > a { font-weight: bold !important; }
.popup_html .menu_arrow { width: 0; height: 0; position: absolute; top: 0px; right: -10px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_border_color; z-index: 1001; }
.popup_html .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_background_color; z-index: 1002; }
.popup_html li:hover .menu_arrow { border-color: transparent transparent transparent @nav_tree_border_color; }
.popup_html li:hover .menu_arrow span { border-color: transparent transparent transparent @nav_tree_hover_background_color; }
/* Participated Button */
.recent-threads-button { font: @nav_tree_font; cursor: pointer; float: right; height: 14px; margin: 0 0 10px 10px; padding: 4px 6px 2px 6px; text-align: center; }
.recent-threads-button:hover { color: @nav_tree_hover_color !important; font: @nav_tree_hover_font; text-decoration: @nav_tree_hover_decoration; background-color: @nav_tree_hover_background_color; }
.recent-threads-button .new-icon { margin: 0px 5px 0px 0px; }
/* News Bar */
#news { color: @nav_tree_color; font: @nav_tree_font; text-decoration: @nav_tree_decoration; z-index: 9; height: 22px; font: @nav_tree_font; background-color: @nav_tree_background_color; overflow: hidden; white-space:nowrap; margin: 0 auto 10px; .rounded-corners(@nav_tree_border_radius); }
#news .items { height: 22px; position: relative; overflow: hidden; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #000000; .rounded-corners(0px 4px 4px 0px);}
#news .items > div > div { padding: 1px 10px; line-height: 22px !important; }
#news .items div img { vertical-align: text-bottom; }
#news .nav { background-color: #3f3f3f; float: left; background-position: center; }
#news .nav > span { width: auto !important; border-width: 0px 1px 0px 0px; border-style: solid; border-color: transparent; cursor: default; float: left; display: inline-block; padding: 2px 3px; height: 22px; }
#news .nav > span.title { color: #ffffff; text-align: center; display: inline-block; height: 22px; padding: 1px 10px; line-height: 22px !important; }
#news .nav .arrow.left { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); padding-left:10px; }
#news .nav .arrow.right { padding-right:10px; }
#news .nav .arrow.left span { border-right-color: @nav_tree_border_color; }
#news .nav .arrow.right span { border-left-color: @nav_tree_border_color; }
#news .nav .arrow.left:hover { border-right: 1px solid #3f3f3f; background-color: #333333; }
#news .nav .arrow.right:hover { border-right: 1px solid #3f3f3f; border-left: 1px solid #3f3f3f; margin-left: -1px; background-color: #333333; }
