Post by Aenwyn on Aug 1, 2024 6:39:28 GMT -8
Forum URL: inhername.proboards.com/
I'm afraid this is going to be a lot of code in a spoiler because I don't understand what is wrong.
I'm using Elli's skin Breathe, so I didn't write the skin code myself.
Originally, the participated threads tab was in a dropdown menu which wasn't ideal.
Code for this here
I wanted to add it instead of the three lines. The issue is that it displays like this:
Code (only added the last part since I didn't change anything before that, except apparently the separator div class because I though that was the issue)
If I remove the <li> from around the participated threads, it looks like this:
Which is what I want, I want that 'NEW' to show, but it turns into an empty square when the li is around it, as seen in picture 2. The issue here is that it's not on the same line as the other icons and stuff.
I'm going to include the whole CSS code next (it's a lot, I know, I'm sorry) because it seems like there's codes for new icons everywhere and I'm too confused to make sense of it. I think its maybe a <li> issue but I'm not sure?
More information about the ul and il is here
I know this is a looooot of code but any help would be greatly appreciated!
I'm afraid this is going to be a lot of code in a spoiler because I don't understand what is wrong.
I'm using Elli's skin Breathe, so I didn't write the skin code myself.
Originally, the participated threads tab was in a dropdown menu which wasn't ideal.
Code for this here
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<header role="banner">
<div id="banner-container">
<div id="banner">
<h1 class="forum-name">
<svg>
<text x="50%" y="50%" dy="0.43em">
$[forum.name]
</text>
</svg>
</h1>
<h2 class="sub-head">
A medieval fantasy RPG
</h2>
</div>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-container">
<div id="navigation-menu" class="ui-helper-clearfix">
<div class="navigation-left">
$[navigation.tree]
</div>
<ul class="navigation-right" role="navigation">
<li class="static">
<a href="javascript:void(0);">
Site Info
<i class="fa fa-caret-down dropdown-arrow"></i>
</a>
<div class="dropdown info-dropdown fallback">
<div class="grid-row">
<div class="grid-col-4">
<div class="grid-content has-children">
<div class="grid-row top">
<div class="grid-col-12">
<div class="grid-content">
<h3>Welcome to In Her Name</h3>
<hr>
<div class="scroll-content welcome">
<p>In her name, in Almera's name, the kingdom of Almeran seeks to reunite the territory of Idrenor once again. Will they succeed, or will the rebellion of Rodale prove to still be just as powerful as it had been when the territory was torn apart by conflict?</p>
</div>
</div>
</div>
</div>
<div class="grid-row bottom">
<div class="grid-col-12">
<div class="grid-content">
<!-- COPYRIGHT | DO NOT MODIFY OR REMOVE -->
<p class="copyright">Theme by <a href="http://ellimccale.com" target="_blank">elli mccale</a><br>
<a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nd/4.0/80x15.png" /></a>
</p>
<!-- END COPYRIGHT -->
</div>
</div>
</div>
</div>
</div>
<div class="grid-col-4">
<div class="grid-content">
<ul class="link-list">
</ul>
</div>
</div>
<div class="grid-col-4">
<div class="grid-content">
<h3>Updates</h3>
<hr>
<div class="scroll-content updates">
</div>
</div>
</div>
<div class="grid-col-4 grid-col-4-images">
<div class="grid-content has-children">
<div class="grid-row top">
<div class="grid-col-12">
<div class="grid-content images">
<img src="https://i.ibb.co/dPZCShn/2.jpg" />
</div>
</div>
</div>
<div class="grid-row bottom">
<div class="grid-col-12">
<div class="grid-content images">
<img src="https://i.ibb.co/mX8mYF2/1.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{if !$[current_user.is_member]}
<li>Welcome, Guest</li>
<li>{if $[login_link]}$[login_link]{/if}</li>
<li>{if $[register_link]}$[register_link]{/if}</li>
{foreach $[navigation.menu]}
{if $[navigation.menu.name] == "Search"}
<li>
<a href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
<i class="fa fa-search"></i>
<span>Search</span>
</a>
</li>
{/if}
{if $[navigation.menu.name] == "Calendar"}
<li>
<a href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
<i class="fa fa-calendar"></i>
<span>Calendar</span>
</a>
</li>
{/if}
{/foreach}
{else}
<li>
<a href="javascript:void(0);">
<span>User Options | </span>
Hello, $[current_user.name]
<i class="fa fa-caret-down dropdown-arrow"></i>
</a>
<ul class="dropdown profile-dropdown fallback">
<li><a href="$[current_user.href]"><i class="fa fa-user"></i> Profile</a></li>
<li><a href="$[current_user.href]/personal"><i class="fa fa-cogs"></i> Edit Settings</a></li>
{if $[current_user.can_admin]}
<li><a href="/admin"><i class="fa fa-wrench"></i> Admin</a></li>
{/if}
<li class="separator"></li>
<li><a href="$[logout_link.href]"><i class="fa fa-sign-out"></i> Logout</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<i class="fa fa-bell"></i>
<span>Notifications</span>
{if $[current_user.new_notifications]}
<div class="tip-holder" onclick="window.location='$[current_user.href]/notifications'; return false;">
<div class="tip-number">$[current_user.new_notifications]</div>
</div>
{/if}
</a>
</li>
{foreach $[navigation.menu]}
{if $[navigation.menu.name] == "Messages"}
<li>
<a href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
<i class="fa fa-envelope"></i>
<span>Messages</span>
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
</div>
{/if}
</a>
</li>
{/if}
{if $[navigation.menu.name] == "Search"}
<li>
<a href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
<i class="fa fa-search"></i>
<span>Search</span>
</a>
</li>
{/if}
{if $[navigation.menu.name] == "Calendar"}
<li>
<a href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
<i class="fa fa-calendar"></i>
<span>Calendar</span>
</a>
</li>
{/if}
{/foreach}
{/if}
<li>
<a href="javascript:void(0);">
<span>Topics</span>
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown topics-dropdown fallback">
<li><a href="/threads/recent"><i class="fa fa-comment"></i> Recent Threads</a></li>
<li><a href="/posts/recent"><i class="fa fa-commenting"></i> Recent Posts</a></li>
{foreach $[navigation.menu]}
{if $[navigation.menu.name] == "Bookmarks"}
<li>
<a href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
<i class="fa fa-bookmark"></i>
Bookmarks
</a>
</li>
{/if}
{/foreach}
{if $[participated_threads_link]}
<li class="separator"></li>
<li>$[participated_threads_link]</li>
{/if}
</ul>
</li>
</ul>
</div>
</div>
</header>I wanted to add it instead of the three lines. The issue is that it displays like this:
Code (only added the last part since I didn't change anything before that, except apparently the separator div class because I though that was the issue)
{/if}
{if $[navigation.menu.name] == "Calendar"}
<li>
<a href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
<i class="fa fa-calendar"></i>
<span>Calendar</span>
</a>
</li>
{/if}
{/foreach}
{/if}
{if $[participated_threads_link]}
<li>$[participated_threads_link]</li>
{/if}
</ul>
</div>
</div>
</header>If I remove the <li> from around the participated threads, it looks like this:
Which is what I want, I want that 'NEW' to show, but it turns into an empty square when the li is around it, as seen in picture 2. The issue here is that it's not on the same line as the other icons and stuff.
I'm going to include the whole CSS code next (it's a lot, I know, I'm sorry) because it seems like there's codes for new icons everywhere and I'm too confused to make sense of it. I think its maybe a <li> issue but I'm not sure?
/*!
* Theme name: Breathe
* Theme URI: http://breathe-theme.proboards.com/
* Author: Elli
* Author URI: http://ellimccale.com/
* Version: 1.0.5
*/
/* ======================================================
* FONTSPRING @FONT-FACE SYNTAX | http://bit.ly/1o3mKsg
* ====================================================== */
/**
* @license
* MyFonts Webfont Build ID 3181512, 2016-03-04T13:53:25-0500
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license at the URLs below.
*
* Webfont: SteelfishRg-Regular by Typodermic
* URL: http://www.myfonts.com/fonts/typodermic/steelfish/regular/
* Copyright: (c) 2001-2012 Typodermic Fonts Inc. See attached license agreement. If agreement is missing visit typodermicfonts.com for more info.
* Licensed pageviews: 1,000,000
*
*
* License: http://www.myfonts.com/viewlicense?type=web&buildid=3181512
*
* © 2016 MyFonts Inc
*/
@font-face {
font-family: 'Steelfish Regular';
src: url('http://ellimccale.com/projects/proboards/breathe/fonts/steelfish.eot?') format('eot'),
url('http://ellimccale.com/projects/proboards/breathe/fonts/steelfish.woff') format('woff'),
url('http://ellimccale.com/projects/proboards/breathe/fonts/steelfish.ttf') format('truetype');
}
/* ======================================================
* MIXINS
* ====================================================== */
@empty: ~"";
.box-sizing(@box-model: border-box) {
box-sizing: @arguments;
-moz-box-sizing: @arguments;
-webkit-box-sizing: @arguments;
-ms-box-sizing: @arguments;
}
.hsla-bgcolor-safe(transparent, @alpha) {
background-color: transparent;
}
.hsla-bgcolor-safe(@color, @alpha) when (iscolor(@color)) {
background-color: @color;
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.transition(@transition) {
transition: @arguments;
-moz-transition: @arguments;
-webkit-transition: @arguments;
}
.border-radius(@value) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
}
/* Use this mixin on #navigation-menu */
.fixed-navigation {
position: fixed !important;
top: 0 !important;
z-index: 1003;
.box-sizing();
}
// Reference: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.absolute-center() { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
/* ======================================================
* THEME CUSTOMIZATIONS
* ====================================================== */
@bg_color_1: #b5bac0;
@bg_color_2: #e2e6eb;
@bg_color_3: #222a21;
@text_color_1: #585c61;
@text_color_2: #e2e6eb;
@text_color_3: #151d27;
@pop_of_color: #667d6b;
@white: #fff;
@font_1: Georgia, serif;
@font_2: Georgia, serif;
/* ======================================================
* THEME CREATOR REQUIRED VARIABLES
* ====================================================== */
@body_background_color: #222a21;
@body_background_image: inherit;
@default_forum_text_color: @text_color_3;
@link_color: @pop_of_color;
@link_visited_color: @pop_of_color;
@banner_height: 500px;
@banner_background_color: @bg_color_3;
@banner_background_image: url('//storage.proboards.com/7389043/images/TRUaRIAdqPtPZWPNMnHC.jpg');
@banner_background_position: center center;
@banner_text_color: @text_color_2;
@banner_text_align: center;
@wrapper_width: 1100px;
@all_gradients: none;
@title_bar_background_color: @bg_color_3;
@title_text_color: @text_color_2;
@title_buttons_background_color: @bg_color_3;
@title_buttons_color: @text_color_2;
@buttons_background_color: @bg_color_2;
@buttons_text_color: @text_color_1;
@container_background_color_1: @bg_color_2;
@container_text_color_1: @text_color_1;
@container_background_color_2: @bg_color_2;
@container_text_color_2: @text_color_1;
@container_links_color: @link_color;
@container_highlight_color: @bg_color_2;
@container_outer_border_color: @bg_color_1;
@container_inner_border_color: @bg_color_1;
@pagination_background_color: @bg_color_2;
@pagination_text_color: @text_color_1;
@pagination_hover_color: @white;
/* ======================================================
* GLOBAL VARIABLES
* ====================================================== */
@body_background_attachment: fixed;
@body_background_repeat: repeat;
@body_background_position: @empty;
@default_forum_text_font_style: @empty;
@default_forum_text_font_weight: @empty;
@default_forum_text_font_size: 12px;
@default_forum_text_font_family: Georgia, serif;
@default_forum_text_decoration: @empty;
@default_forum_text_case: inherit;
@default_forum_text_caps: @empty;
@bold_weight: 700;
@bold_size: @empty;
@italic_style: italic;
@link_font: inherit;
@link_decoration: none;
@link_active_color: @link_color;
@link_active_decoration: @link_decoration;
@link_visited_decoration: @link_decoration;
@link_hover_color: lighten(saturate(@link_color, 10%), 10%);
@link_hover_decoration: @link_decoration;
@container_links_hover_color: @link_hover_color;
@h2_color: @empty;
@h2_font: 100% Georgia, serif;
@h2_decoration: @empty;
@h2_case: @empty;
@h2_caps: @empty;
@h3_color: @empty;
@h3_font: 140% Georgia, serif;
@h3_decoration: @empty;
@h3_case: @empty;
@h3_caps: @empty;
@timestamp_color: @container_text_color_1;
@timestamp_font: inherit;
@description_color: @empty;
@description_font: inherit;
@viewing_color: @empty;
@viewing_font: 12px @default_forum_text_font_family;
@small_desc_color: lighten(@default_forum_text_color, 15%);
@small_desc_font: 10px @default_forum_text_font_family;
/* ======================================================
* BASE STYLES
* ====================================================== */
/* --- body --- */
* { word-wrap: break-word; }
body { background-color: @body_background_color; background-image: @body_background_image; background-attachment: @body_background_attachment; background-repeat: @body_background_repeat; background-position: @body_background_position; line-height: 1.4; color: @default_forum_text_color; font-style: @default_forum_text_font_style; font-weight: @default_forum_text_font_weight; font-size: @default_forum_text_font_size; font-family: @default_forum_text_font_family; line-height: 1.5; letter-spacing: 0.025em; text-decoration: @default_forum_text_decoration; text-transform: @default_forum_text_case; font-variant: @default_forum_text_caps; }
body::-webkit-scrollbar { width: 10px; height: 10px }
body::-webkit-scrollbar-track { background-color: @bg_color_1; }
body::-webkit-scrollbar-thumb { background-color: @bg_color_3; border: 3px solid @bg_color_1; cursor: pointer; }
/* --- links --- */
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; .transition(color 0.3s ease);
&:visited { color: @link_visited_color; text-decoration: @link_visited_decoration; }
&:hover { color: @link_hover_color; text-decoration: @link_hover_decoration; }
&:active { color: @link_active_color; text-decoration: @link_active_decoration; }
}
a.text { cursor: default; }
/* --- typography --- */
h1, h2 { color: @h2_color; font: @h2_font; text-decoration: @h2_decoration; text-transform: @h2_case; font-variant: @h2_caps; }
h3 { color: @h3_color; font: @h3_font; text-decoration: @h3_decoration; text-transform: @h3_case; font-variant: @h3_caps; }
abbr.time, .last-edited, #event_range .time { color: @timestamp_color; font: @timestamp_font; }
abbr.time.recent_time { font-weight: normal; font-style: normal; }
blockquote { display: block; margin: 15px 40px; }
sub, sup { font-size: 80%; }
.bold, b { font-weight: @bold_weight; font-size: @bold_size; }
.italic { font-style: @italic_style; }
.description { color: @description_color; font: @description_font; }
.viewing { color: @viewing_color; font: @viewing_font; }
.small { font: @small_desc_font; vertical-align: middle; }
.note { color: @small_desc_color; }
.placeholder, .placeholder-empty { color: #888888; }
.foot abbr.time, .small abbr.time { font-size: 100%; }
/* ======================================================
* HEADER
* ====================================================== */
/* --- banner --- */
@banner_background_repeat: no-repeat;
@banner_background_size: cover;
@banner_text_font: italic normal 80px Georgia, serif;
@banner_text_decoration: none;
@banner_text_case: uppercase;
@banner_text_caps: normal;
@banner_sub_font: 14px Georgia, serif;
@banner_sub_decoration: none;
@banner_sub_case: lowercase;
@banner_sub_caps: @empty;
header { margin-bottom: 30px; display: block; position: relative; }
#banner-container { width: 100%; display: table; }
#banner { background-color: @banner_background_color; background-image: @banner_background_image; background-position: @banner_background_position; background-repeat: @banner_background_repeat; background-size: @banner_background_size; height: @banner_height; padding: 0 15px; text-align: @banner_text_align; display: table-cell; vertical-align: middle; overflow: hidden; }
.forum-name { width: @wrapper_width; height: 144px; margin: 0 @wrapper_right_margin 0 @wrapper_left_margin; font: @banner_text_font; font-variant: @banner_text_caps; line-height: 144px; letter-spacing: 0.2em; text-decoration: @banner_text_decoration; text-transform: @banner_text_case; color: transparent; overflow: hidden; }
.forum-name svg { width: 100%; height: 100%; }
.forum-name svg text { text-anchor: middle; stroke-width: 1; stroke: @banner_text_color; fill: #e2e6eb; }
.sub-head { font: @banner_sub_font; font-variant: @banner_sub_caps; line-height: 22px; letter-spacing: 0.3em; text-decoration: @banner_sub_decoration; text-transform: @banner_sub_case; text-align: @banner_text_align; color: @banner_text_color; }
/* --- navigation menu --- */
@nav_bar_background: @title_bar_background_color left center repeat-x;
@nav_bar_border: 0 solid @container_outer_border_color;
@nav_bar_button_color: @title_text_color;
@nav_bar_button_font: 14px @default_forum_text_font_family;
@nav_bar_button_decoration: none;
@nav_bar_button_case: lowercase;
@nav_bar_button_background: @empty;
@nav_bar_button_hover_color: @nav_bar_button_color;
@nav_bar_button_hover_font: @nav_bar_button_font;
@nav_bar_button_hover_decoration: @nav_bar_button_decoration;
@nav_bar_button_hover_background: @nav_bar_button_background;
@nav_bar_bubble_text_color: @text_color_2;
@nav_bar_bubble_font: 10px @default_forum_text_font_family;
@nav_bar_bubble_background: #e74c3c;
#navigation-container { background: transparent; width: 100%; height: 60px; position: absolute; top: 0; .transition(background-color 0.3s ease); }
#navigation-container.sticky { background: @nav_bar_background !important; border: @nav_bar_border; .fixed-navigation(); }
#navigation-menu { width: @wrapper_width; margin: 0 @wrapper_right_margin 0 @wrapper_left_margin; position: relative; }
#navigation-menu > .navigation-left { float: left; }
#navigation-menu > .navigation-right { float: right; }
#navigation-menu > ul > li,
#navigation-menu > ul > li > ul > li{ background: @nav_bar_button_background; padding-left: 25px; font: @nav_bar_button_font; line-height: 60px !important; letter-spacing: 0.025em; text-transform: @nav_bar_button_case; color: @nav_bar_button_color; display: block; float: left; position: relative;
&:last-child { padding-right: 0; }
&:hover { background: @nav_bar_button_hover_background; font: @nav_bar_button_hover_font; line-height: 60px !important; color: @nav_bar_button_hover_color !important; }
}
#navigation-menu > ul > li.static { position: static; }
#navigation-menu > ul > li > a,
#navigation-menu > ul > li > ul > li > a{ font: inherit; text-decoration: @nav_bar_button_decoration; color: inherit; display: block; position: relative;
&:hover, &:focus { font: inherit; text-decoration: @nav_bar_button_hover_decoration !important; color: @white !important; }
}
#navigation-menu > ul > li > a > i,
#navigation-menu > ul > li > ul > li > a > i { font-size: 13px; }
#navigation-menu > ul > li > a > i.fa-bars { font-size: 15px; position: relative; top: 1px; }
#navigation-menu > ul > li > a > i.dropdown-arrow { padding-left: 10px; font-size: 14px; line-height: 60px; color: inherit; float: right; }
#navigation-menu > ul > li > a > span { font: 0/0 a; color: transparent !important; position: absolute; top: 0; }
#navigation-menu div.tip-holder { cursor: pointer; position: absolute; top: 17px; left: 8px; z-index: 1001; }
#navigation-menu div.tip-holder div.tip-number { background-color: @nav_bar_bubble_background; height: 13px; padding: 0 4px 0 5px; font: @nav_bar_bubble_font; line-height: 13px; color: @nav_bar_bubble_text_color; .border-radius(3px); .box-sizing(); }
/* --- dropdown menus --- */
#navigation-menu .dropdown { background-color: @container_background_color_1; min-width: 200px; display: none; float: left; position: absolute; top: 100%; right: 0; z-index: 998; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
#navigation-menu > ul li:hover > .dropdown.fallback { display: block; }
#navigation-menu .dropdown.profile-dropdown,
#navigation-menu .dropdown.topics-dropdown { padding: 5px 0; }
#navigation-menu .dropdown.profile-dropdown > li,
#navigation-menu .dropdown.topics-dropdown > li { padding: 0; line-height: 1.5 !important; color: @container_text_color_1; float: none;
&:hover, &:focus { background: mix(@bg_color_1, @bg_color_2, 20%); color: @container_text_color_1 !important; }
}
#navigation-menu .dropdown.profile-dropdown > li.separator,
#navigation-menu .dropdown.topics-dropdown > li.separator { width: auto; margin: 6px 0px; border-top: 1px solid mix(@container_inner_border_color, @white, 70%); }
#navigation-menu .dropdown.profile-dropdown > li > a,
#navigation-menu .dropdown.topics-dropdown > li > a { padding: 10px 30px 10px 25px; color: inherit; .transition(none);
&:hover, &:focus { color: inherit !important; }
}
#navigation-menu .dropdown.profile-dropdown > li > a > i,
#navigation-menu .dropdown.topics-dropdown > li > a > i { width: 15px; padding-right: 5px; }
#navigation-menu .dropdown.info-dropdown { min-width: 100%; padding: 45px; height: 380px; .box-sizing(); }
.grid-row { display: -webkit-box; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin: -15px; overflow: hidden; }
@media(max-width: 1655px) { .grid-row { margin: -5px; } }
.grid-row > [class^="grid-col"] > .grid-content > .grid-row:not(.top) { margin: 0 -5px -5px -5px; }
.grid-row > [class^="grid-col"] > .grid-content > .grid-row:not(.bottom) { margin: -5px -5px 0 -5px; }
.grid-col-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 0 100%; -ms-flex: 1 0 100%; flex: 1 0 100%; max-width: 100%; padding: 5px; .box-sizing(); }
.grid-col-4 { display: -webkit-box; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 15px; .box-sizing(); }
.grid-col-4-images { min-width: 330px; max-width: 330px; }
@media(max-width: 1655px) { .grid-col-4 { padding: 5px; } .grid-col-4-images { min-width: 310px; max-width: 310px; } }
.grid-content { display: -webkit-box; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 100%; min-height: 1px; padding: 25px 30px; border: 1px solid @container_inner_border_color; color: @container_text_color_1; position: relative; overflow: hidden; .box-sizing(); }
.grid-content.has-children { padding: 0; border: 0; }
.grid-content.images { padding: 0; border-width: 0; }
.grid-content.images img { width: 100%; height: auto; margin: auto; }
.grid-content h3 { margin-bottom: 10px; font: @title_text_font; line-height: 24px; letter-spacing: 0.2em; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; color: @text_color_1; }
@media(max-width: 1655px) { .grid-content h3 { font-size: 20px; line-height: 20px; } }
.grid-content hr { width: 100px; margin-left: 0; margin-bottom: 20px; border: 0; border-top: 1px solid @container_inner_border_color }
.grid-content .scroll-content { max-height: 170px; margin-right: -20px; padding-right: 20px; font: 12px @default_forum_text_font_family; line-height: 1.5; text-transform: initial; overflow-y: auto; }
.grid-content .scroll-content::-webkit-scrollbar { width: 9px; height: 9px }
.grid-content .scroll-content::-webkit-scrollbar-track { background-color: @bg_color_2; }
.grid-content .scroll-content::-webkit-scrollbar-thumb { background-color: @bg_color_1; border: 3px solid @bg_color_2; cursor: pointer; }
.grid-content .scroll-content p { margin-bottom: 1em;
&:last-of-type { margin-bottom: 0; }
}
.grid-content .scroll-content.welcome { height: 68px; }
.grid-content .scroll-content.updates { height: 170px; }
.grid-content .scroll-content.updates strong { color: @pop_of_color; }
.grid-content .copyright { margin: 0; font: 10px @default_forum_text_font_family; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; }
.grid-content .copyright a { text-decoration: none; }
.grid-content .copyright img { margin-top: 8px; }
.grid-content .link-list > li { margin-bottom: 2px; }
.grid-content .link-list > li > a { background-color: @buttons_background_color; background-image: @buttons_background_image; background-attachment: @buttons_background_attachment; background-repeat: @buttons_background_repeat; background-position: @buttons_background_position; width: 100%; min-height: 29px; padding: 0 20px; border: @buttons_border; font: @buttons_text_font; line-height: 29px; letter-spacing: 0.1em; text-decoration: @buttons_text_decoration; text-transform: @buttons_text_case; color: @buttons_text_color; white-space: nowrap; display: block; .transition(padding 0.2s ease); .box-sizing();
&:hover, &:focus { background: @buttons_hover_background; padding-left: 30px; border: @buttons_hover_border; font: @buttons_hover_text_font; line-height: 29px; text-decoration: @buttons_hover_text_decoration; color: @buttons_hover_text_color; }
&:active { background: @buttons_active_background; border: @buttons_active_border; font: @buttons_active_text_font; line-height: 29px; text-decoration: @buttons_active_text_decoration; color: @buttons_active_text_color; }
}
/* ======================================================
* NAVIGATION TREE + PARTICIPATED THREADS BUTTON
* ====================================================== */
/* --- navigation tree --- */
@nav_tree_color: @text_color_1;
@nav_tree_font: 14px @default_forum_text_font_family;
@nav_tree_decoration: none;
@nav_tree_case: lowercase;
@nav_tree_background_color: @bg_color_2;
@nav_tree_border_width: 0;
@nav_tree_border_style: solid;
@nav_tree_border_color: @container_outer_border_color;
@nav_tree_hover_color: @nav_tree_color;
@nav_tree_hover_font: @nav_tree_font;
@nav_tree_hover_decoration: none;
@nav_tree_hover_background_color: mix(@bg_color_1, @bg_color_2, 20%);
#navigation-tree { background: @nav_tree_background_color; height: 60px; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; color: @nav_tree_color; overflow: hidden; }
#nav-tree { white-space: nowrap; }
#nav-tree ul { background-color: @nav_tree_background_color; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; list-style-type: none; display: none; }
#nav-tree > li { height: 60px; display: inline-block; position: relative; }
#nav-tree > li + li a::before { content: " / "; padding-right: 15px; color: @title_text_color; display: inline-block; }
#nav-tree > li a { padding: 0 15px 0 0; font: @nav_tree_font; line-height: 60px; letter-spacing: 0.025em; text-transform: @nav_tree_case; text-decoration: @nav_tree_decoration; color: @title_text_color; display: block; }
#nav-tree > li:hover,
#nav-tree .ui-menu li:hover { color: @nav_tree_hover_color; }
#nav-tree > li:hover > div > a { font: @nav_tree_hover_font; line-height: 60px; color: @title_text_color; text-decoration: @nav_tree_hover_decoration; }
#nav-tree .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
#nav-tree .ui-menu { display: none; position: absolute; float: left; }
#nav-tree .ui-menu a { }
#nav-tree .ui-menu li { position: relative; white-space: nowrap; padding: 0 15px 0 0; }
#nav-tree .ui-menu li ul { display: none; z-index: 9999; position: absolute; }
#nav-tree .ui-menu li .arrow { position: absolute; right: 5px; 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; }
.popup_html { position: absolute; top: 0; left: 0; z-index: 999999; }
.popup_html ul { padding: 5px 0; 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: 0 0 10px rgba(0,0,0,0.2); }
.popup_html li a { margin: 0 2px 0 0; padding: 9px 15px 9px 15px; font: @nav_tree_font; text-transform: @nav_tree_case; text-decoration: @nav_tree_decoration; color: @nav_tree_color; display: block; }
.popup_html li:hover,
.popup_html .ui-menu li:hover { color: @nav_tree_hover_color; background-color: @nav_tree_hover_background_color; }
.popup_html li:hover > div > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
.popup_html .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
.popup_html .ui-menu { display: none; position: absolute; top: 60px !important; float: left; z-index: 11; }
.popup_html .ui-menu a { 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 threads button --- */
.recent-threads-button .new-icon { margin: 6px 9px 0 0; }
.recent-threads-button.new .new-icon { display: inline-block; }
/* --- participated threads dialog --- */
@participated_background: @container_background_color_1;
@participated_inner_border: 1px solid @container_inner_border_color;
@participated_text_color: @container_text_color_1;
@participated_text_font: @empty;
@participated_links_color: @empty;
@participated_links_font: @empty;
@participated_links_decoration: @empty;
@participated_subject_align: left;
@participated_last_post_align: right;
@participated_hover_background: @container_highlight_color;
@participated_hover_text_color: @empty;
@participated_hover_text_font: @empty;
@participated_hover_links_color: @empty;
@participated_hover_links_font: @empty;
@participated_hover_links_decoration: @empty;
#recent-threads { background: @participated_background; color: @participated_text_color; font: @participated_text_font; }
#recent-threads a { color: @participated_links_color; font: @participated_links_font; text-decoration: @participated_links_decoration; }
#recent-threads table { table-layout: auto; }
#recent-threads th { border-bottom: 1px solid; }
#recent-threads .subject { text-align: @participated_subject_align; }
#recent-threads .latest { text-align: @participated_last_post_align; }
#recent-threads th, #recent-threads td { border: @participated_inner_border; border-top-width: 0px; border-left-width: 0px; }
#recent-threads tbody tr:hover { color: @participated_hover_text_color; font: @participated_hover_text_font; background: @participated_hover_background; }
#recent-threads tbody tr:hover a { color: @participated_hover_links_color; font: @participated_hover_links_font; text-decoration: @participated_hover_links_decoration; }
/* ======================================================
* MAIN PAGE
* ====================================================== */
/* --- wrapper --- */
@wrapper_background_image: @empty;
@wrapper_background_color: @bg_color_2;
@wrapper_background_attachment: @empty;
@wrapper_background_repeat: @empty;
@wrapper_background_position: @empty;
@wrapper_padding: 50px;
@wrapper_top_margin: 30px;
@wrapper_right_margin: auto;
@wrapper_bottom_margin: 50px;
@wrapper_left_margin: auto;
#wrapper { background: @wrapper_background_color @wrapper_background_image @wrapper_background_position @wrapper_background_repeat @wrapper_background_attachment; width: @wrapper_width; margin: @wrapper_top_margin @wrapper_right_margin @wrapper_bottom_margin @wrapper_left_margin; padding: @wrapper_padding; overflow-x: hidden; .box-sizing(); }
/* --- news --- */
@news_background_color: @container_background_color_1;
@news_border_width: 1px;
@news_border_style: solid;
@news_border_color: @container_outer_border_color;
@news_font: @default_forum_text_font_family;
@news_decoration: none;
@news_color: @container_text_color_1;
@news_hover_background_color: mix(@bg_color_1, @bg_color_2, 20%);
#news { background-color: @news_background_color; height: 24px !important; margin: 0 auto 15px; border: @news_border_width @news_border_style @news_border_color; font: @news_font; text-decoration: @news_decoration; color: @news_color; z-index: 9; overflow: hidden; }
#news .items { height: 24px; position: relative; overflow: hidden; }
#news .items > div > div { padding: 0 10px; line-height: 20px !important; }
#news .items div img { vertical-align: text-bottom; }
#news .items .itemSlide { line-height: 24px !important; }
#news .nav { float: left; background-position: center; }
#news .nav > span { height: 24px; padding: 0 3px; border-width: 0 1px 0 0; border-style: solid; border-color: transparent; cursor: default; float: left; display: inline-block; }
#news .nav > span.title { height: 24px !important; padding: 0 10px; line-height: 24px !important; text-align: center; display: inline-block; }
#news .nav .arrow.left { }
#news .nav .arrow.left span { border-right-color: @news_border_color; }
#news .nav .arrow.right span { border-left-color: @news_border_color; }
#news .nav:hover { background-color: @news_hover_background_color; }
#news .nav:hover > span { border: @news_border_width @news_border_style @news_border_color; border-width: 0 @news_border_width 0 0; }
#news .nav:hover .arrow { background-color: @news_hover_background_color; }
/* --- info center --- */
@info_background: @empty;
@info_inner_border: 1px solid @container_inner_border_color;
@info_titles_font: bold 14px @font_1;
@info_titles_case: inherit;
@info_titles_color: @container_links_color;
@info_text_font: normal 1em Georgia, serif;
@info_text_color: @container_text_color_1;
@info_links_font: @empty;
@info_links_decoration: @link_hover_decoration;
@info_links_case: inherit;
@info_links_color: @container_links_color;
@info_links_hover_color: @container_links_hover_color;
.stats.container > .content { border-width: 0; }
.stats .content { font: @info_text_font; color: @info_text_color; }
.stats .content a { font: @info_links_font; text-transform: @info_links_case; text-decoration: @info_links_decoration; color: @info_links_color; }
.stats .content a:hover { font: @info_links_font; text-decoration: @info_links_decoration; color: @info_links_hover_color; }
.stats .content > table { background: @info_background; width: 100%; table-layout: auto; }
.stats .content > table > tbody > tr.spacer { height: 10px; }
.stats .content > table > tbody > tr > td { padding: 25px 30px; border: @info_inner_border; }
.stats .content > table > tbody > tr > td:not(:first-child) { border-left-width: 0; }
.stats .content > table > tbody > tr > td:not(:last-child) { border-right-width: 0; }
.stats .content > table > tbody > tr.spacer > td { padding: 0; border-width: 0; }
.stats .content > table > tbody > tr > td strong { margin-bottom: 8px; font: @info_titles_font; text-transform: @info_titles_case; text-align: left; color: @info_titles_color; display: inline-block; }
.stats .content > table > tbody > tr > td span.member-stats { line-height: @info_titles_font; text-transform: @info_titles_case; float: right; }
.stats .content > table > tbody > tr:last-child > td a { white-space: nowrap; }
/* --- affiliates -- */
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
.affiliates.container > .content { padding: 15px 15px 5px; text-align: center; .box-sizing(); }
.affiliates .marquee-container { padding-bottom: 5px; white-space: nowrap; overflow: hidden; position: relative;}
.affiliates .marquee-container span { display: inline-block; padding-left: 100%; text-indent: 0; -webkit-animation: marquee 30s linear infinite; -moz-animation: marquee 30s linear infinite; animation: marquee 30s linear infinite;
&:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; }
}
.affiliates a { width: 88px; height: 31px; margin-right: 10px; display: inline-block; }
.affiliates a > img { width: 100%; height: auto; }
/* --- legend --- */
.legend .content td { padding: 10px 5px; vertical-align: middle; color: @container_text_color_1; }
.legend .content td:first-child { padding-left: 15px; }
.legend .content td * { vertical-align: middle; }
.legend .new-icon { display: block; }
/* --- shoutbox --- */
@shoutbox_message_background: @empty;
@shoutbox_message_border: @empty;
@shoutbox_message_text_color: @empty;
@shoutbox_message_text_font: @empty;
@shoutbox_shouts_background: @empty;
@shoutbox_shouts_border: 1px solid @container_inner_border_color;
@shoutbox_shouts_text_color: @empty;
@shoutbox_shouts_text_font: @empty;
@shoutbox_shouts_edit_color: @empty;
@shoutbox_shouts_edit_font: 85% @default_forum_text_font_family;
@shoutbox_shouts_edit_decoration: @empty;
@shoutbox_shouts_delete_background: @empty;
@shoutbox_shouts_delete_border: 1px solid @container_inner_border_color;
@shoutbox_shouts_delete_text_color: @container_text_color_1;
@shoutbox_shouts_delete_text_font: bold 100% @default_forum_text_font_family;
@shoutbox_shouts_delete_text_decoration: none;
@shoutbox_shouts_selected_background: @container_highlight_color;
@shoutbox_reply_background: @empty;
@shoutbox_reply_border: 1px solid @container_inner_border_color;
@shoutbox_reply_counter_color: @container_text_color_1;
@shoutbox_reply_counter_font: 85% @default_forum_text_font_family;
.shoutbox.container > .content { padding: 30px; }
.shoutbox_welcome_message { color: @shoutbox_message_text_color; font: @shoutbox_message_text_font; background: @shoutbox_message_background; border: @shoutbox_message_border; margin-bottom: 10px; }
.shoutbox_messages .shoutbox-post { color: @shoutbox_shouts_text_color; font: @shoutbox_shouts_text_font; background: @shoutbox_shouts_background; border: @shoutbox_shouts_border; text-align: left; position: relative; overflow: hidden; margin-top: 10px; margin-right: 10px; padding: 5px 15px 5px 10px; }
.shoutbox_messages .shoutbox_edit_button { color: @shoutbox_shouts_edit_color; font: @shoutbox_shouts_edit_font; text-decoration: @shoutbox_shouts_edit_decoration; display: inline-block; width: 32px; margin-right: 5px; visibility: visible; }
.shoutbox_messages .hidden { visibility: hidden; }
.shoutbox_messages .shoutbox_delete_button { color: @shoutbox_shouts_delete_text_color; font: @shoutbox_shouts_delete_text_font; text-decoration: @shoutbox_shouts_delete_text_decoration; background: @shoutbox_shouts_delete_background; border: @shoutbox_shouts_delete_border; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; position: absolute; right: -7px; top: 0; width: 15px; cursor: pointer; margin-left: 20px; margin-top: 0px; padding: 3px; height: 100%; display: inline-block; }
.shoutbox_messages { overflow-y: scroll; text-align: center; position: relative; }
.shoutbox_messages::-webkit-scrollbar { width: 10px; height: 10px }
.shoutbox_messages::-webkit-scrollbar-track { background-color: @bg_color_2; }
.shoutbox_messages::-webkit-scrollbar-thumb { background-color: @bg_color_3; border: 3px solid @bg_color_2; cursor: pointer; }
.shoutbox_messages .shoutbox-post:first-child { margin-top: 0px; }
.shoutbox_messages .message { padding-right: 10px; word-wrap: break-word; }
.shoutbox_messages .details { float: right; margin: 0px 15px 0px 10px; height: 16px; vertical-align: bottom; }
.shoutbox .state-selected { background: @shoutbox_shouts_selected_background; }
.shoutbox_form { background: @shoutbox_reply_background; border: @shoutbox_reply_border; padding: 10px; height: 100px; }
.shoutbox_form .shoutbox_counter { color: @shoutbox_reply_counter_color; font: @shoutbox_reply_counter_font; float: right; margin-top: -5px; }
.shoutbox_form textarea.gray { color: #666666; }
.shoutbox .content { padding: 10px; }
.shoutbox_form.reply-box-bottom { margin-top: 10px; }
.shoutbox_form.reply-box-top { margin-bottom: 10px; }
.shoutbox_form input[type="text"] { margin-top: 2px; margin-bottom: 4px; }
.shoutbox_form .button img { display: inline; padding: 2px 0 0; }
.shoutbox_form .shoutbox_refresh_button { float: right; padding: 2px 6px 0px 6px; }
.shoutbox_form ul.tools { white-space: nowrap; display: inline-block; }
.shoutbox_form ul.tools li { float: left; margin: 0; padding: 0; border: 0; height: 22px; width: 26px; text-align: center; line-height: 18px !important; }
.shoutbox_form ul.tools li img { padding: 0; }
.shoutbox_form textarea { height: 38px; width: 100%; margin-right: 0px; margin-bottom: 5px; margin-top: 5px; position: inherit; .box-sizing(); }
.shoutbox_form .shoutbox_post_button { margin-left: 0px; }
.shoutbox_form .shoutbox_cancel_button { vertical-align: bottom; }
.shoutbox_name { padding: 10px 0; height: 22px; }
.shoutbox_name input { height: 15px; width: 50%; min-width: 150px; }
.shoutbox_container { position: relative; }
.shoutbox_container > .shoutbox_form_container { position: absolute; width: 100%; }
.shoutbox_container.orientation-top { padding-top: 174px; }
.shoutbox_container.orientation-top.no-post { padding-top: 0; }
.shoutbox_container.orientation-top > .shoutbox_form_container { top: 0; }
.shoutbox_container.orientation-bottom { padding-bottom: 174px; }
.shoutbox_container.orientation-bottom.no-post { padding-bottom: 0; }
.shoutbox_container.orientation-bottom > .shoutbox_form_container { bottom: 0; }
/* --- ads --- */
#top-ad-banner { margin: 30px auto !important; }
#bottom-ad-banner { margin: 10px auto !important; }
#related-topics-stories td { padding: 25px 30px; }
/* --- footer --- */
@footer_background: ~"";
@footer_width: @wrapper_width;
@footer_border: ~"";
@footer_text_color: @default_forum_text_color;
@footer_text_font: normal 1em Georgia, serif;
@footer_text_decoration: @link_decoration;
@footer_link_color: @link_color;
@footer_link_font: 100% @footer_text_font;
@footer_link_decoration: @link_decoration;
@footer_hover_color: @link_hover_color;
@footer_hover_font: @footer_link_font;
@footer_hover_decoration: @link_hover_decoration;
@footer_pipe_color: @default_forum_text_color;
#footer { background: @footer_background; width: @footer_width; margin: 0 @wrapper_right_margin 30px @wrapper_left_margin; border: @footer_border; font: 80% @footer_text_font; text-align: center; color: @footer_text_color; }
#footer a { font: @footer_link_font; text-decoration: @footer_link_decoration; color: @footer_link_color; }
#footer a:hover { font: @footer_hover_font; text-decoration: @footer_hover_decoration; color: @footer_hover_color; }
#footer .footer-links { color: @footer_pipe_color; }
/* ======================================================
* PAGES
* ====================================================== */
/* --- help page --- */
.help-topics li { display: block; float: left; padding: 5px 10px; min-width: 280px; }
.help.content ul { margin-left: 31px; list-style-type: disc; }
.help.content ol { margin-left: 31px; list-style-type: decimal; }
.help.content ol li, .help.content ul li { padding: 2px 0; }
.help.content h1 { font-size: 18px; font-weight: bold; }
.help.content h2 { font-size: 16px; font-weight: bold; }
.help.content h3 { font-size: 14px; font-weight: bold; }
.help.content code { display: block; border: @posts_code_border; padding: 5px; margin: 0 16px; background: @posts_code_background; color: @posts_code_text_color; font: @posts_code_text_font; white-space: pre-wrap; }
/* --- search page --- */
.search .content { padding: 10px 0px 0px 10px; }
.search .content form > div { padding: 10px; margin: 10px; }
.search .header, #how { font-size: 14px; padding: 10px; }
.search .options-container { padding: 10px; width: 432px; font-size: 11px; margin-right: 10px; height: 215px; overflow: hidden; }
.search .options-container th { padding-bottom: 5px; font-size: 14px; text-align: left; font-weight: normal; }
.search .options-container td { padding: 5px 5px 5px 0; }
.search .footer { font-size: 14px; line-height: 20px !important; }
.search .footer input { float: right; }
.search .footer #transcription { width: 89%; font-size: 11px; line-height: 35px; }
.search .disabled { background-color: #DDDDDD; }
.search #what input, .search #where input, .search #who input { width: 230px; }
.search #who select { width: 235px; }
.search #when input { width: 80px; }
.search input[id*="-placeholder"] { cursor: pointer; }
#where-board-subboard, #where-without, #where-category, #who-member-group { display: none; }
/* --- calendar page --- */
@cal_background: @container_background_color_1;
@cal_border: 1px solid @container_inner_border_color;
@cal_inner_border: 1px solid @container_inner_border_color;
@cal_link_alignment: right;
@cal_title_color: @container_text_color_1;
@cal_title_font: @empty;
@cal_day_background: @container_highlight_color;
@cal_day_link_color: @container_links_color;
@cal_day_link_font: @empty;
@cal_day_link_decoration: @empty;
@cal_cur_month_background: @container_background_color_2;
@cal_cur_month_link_color: @container_links_color;
@cal_cur_month_link_font: @empty;
@cal_cur_month_link_decoration: @empty;
@cal_month_background: @container_background_color_1;
@cal_month_link_color: @container_text_color_1;
@cal_month_link_font: @empty;
@cal_month_link_decoration: @empty;
@cal_list_align_icon: center;
@cal_list_align_last: right;
@cal_list_last_color: @empty;
@cal_list_last_font: @empty;
.calendar.container > .content { border-width: 0; }
.cal-box { background: @cal_background; border: @cal_border; width: 100%; border-collapse: separate; }
.cal-box th { padding: 3px 0px; }
.cal-box th, .cal-current-panel .cal-box td, #calendar-list .cal-box td { border: @cal_inner_border; border-top-width: 0px; border-left-width: 0px; }
.cal-box th, .cal-box th * { color: @cal_title_color; font: @cal_title_font; }
.cal-box .current-day .head, .cal-box .today .head, .ui-datepicker td.ui-datepicker-today a { background: @cal_day_background; }
.cal-box .current-day .head a, .cal-box .today .head a, .ui-datepicker td.ui-datepicker-today a { color: @cal_day_link_color; font: @cal_day_link_font; text-decoration: @cal_day_link_decoration; }
.cal-box .head { background: @cal_cur_month_background; }
.cal-box a { color: @cal_cur_month_link_color; font: @cal_cur_month_link_font; text-decoration: @cal_cur_month_link_decoration; }
.cal-box .off .head a { color: @cal_month_link_color; font: @cal_month_link_font; text-decoration: @cal_month_link_decoration; }
.cal-current-panel { vertical-align: top; }
.cal-current-panel .cal-box .last { border-right: none; }
.cal-current-panel .cal-box .last td { border-bottom: none; }
.cal-current-panel .body { min-height: 74px; height: 74px; padding-bottom: 15px; padding: 3px; overflow: hidden; }
.cal-current-panel .body a, .cal-current-panel .birthday-event { white-space: nowrap; }
.cal-current-panel .off .head { background: @cal_month_background; }
.cal-current-panel .head { text-align: @cal_link_alignment; cursor: pointer; padding-bottom: 3px; height: 16px; overflow: hidden; }
.cal-current-panel .head a { font-weight: bold; font-size: 12px; padding: 2px; overflow: hidden; }
.cal-preview-panel { width: 180px; padding-right: 10px; vertical-align: top; }
.cal-preview-panel .header th { border-right: none; }
.cal-preview-panel .header th a { color: @container_links_color; }
.cal-preview-panel td { padding: 2px 0px; }
.cal-preview-panel .weekdays td { padding-top: 5px; }
.cal-preview-panel .cal-box { table-layout: auto; width: 100%; text-align: center; padding-bottom: 10px; margin-bottom: 10px; }
.cal-preview-panel .cal-box .head { padding: 0px 1px 2px 0px; }
.cal-preview-panel .off .head { background-color: transparent; }
.cal-preview-panel a.has-events { font-weight: bold; }
#calendar-list { vertical-align: top; }
#calendar-list .new .new-icon { display: inline-block; }
#calendar-list table { table-layout: auto; }
#calendar-list table.cal-box td { border-width: 0px 0px 1px 0px; }
#calendar-list tr:last-child td { border-bottom: none; }
#calendar-list tr:first-child th { }
#calendar-list th { padding: 5px 15px; text-align: left; border-right: none; }
#calendar-list td.icon { width: 60px; height: 60px; text-align: @cal_list_align_icon; border: @cal_inner_border; border-width: 0px 1px 1px 0px; }
#calendar-list td.main { cursor: pointer; padding: 0 10px; }
#calendar-list td.last_post { color: @cal_list_last_color; font: @cal_list_last_font; text-align: @cal_list_align_last; width: 250px; padding-right: 10px; }
.calendar .content { padding: 10px; }
.calendar .content > table { width: 100%; vertical-align: top; }
.calendar .content > table > tr > td { vertical-align: top; }
.calendar .control-bar .calendar-jump .button { float: left; }
.calendar .control-bar .calendar_go_button { display: none; margin: 0 5px 0 10px; }
#to-date-container { display: none; }
.ui-datepicker { .hsla-bgcolor-safe(@container_outer_border_color, .5); }
.ui-datepicker .ui-datepicker-header { background-color: @title_bar_background_color; background-image: @all_gradients; border-color: @container_outer_border_color; }
.ui-datepicker .ui-datepicker-title { color: @title_text_color; }
.ui-datepicker table { background-color: @container_background_color_1; border-color: @container_outer_border_color; }
.ie7 .calendar .control-bar .calendar_go_button { margin-left: 0; }
.ie7 .calendar .control-bar .controls .ui-selectMenu-box { margin-left: 0; margin-right: 10px; }
/* --- members page --- */
@members_background: @empty;
@members_text_color: @empty;
@members_text_font: @empty;
@members_text_align: left;
@members_align_name: left;
@members_align_username: left;
@members_align_rank: left;
@members_align_group: left;
@members_align_posts: left;
@members_align_date_registered: left;
@members_align_last_online: right;
.members.container > .content { border-width: 0; }
.members table.list > thead > tr > th,
.members table.list > tbody > tr > td { padding-left: 10px; padding-right: 10px; }
.members table.list > thead > tr > th.sortable { cursor: pointer; overflow: hidden; }
.members table.list > tbody > tr:not(.spacer) > td { padding-top: 5px; padding-bottom: 5px; }
.members table.list > tbody > tr > td { background: @members_background; font: @members_text_font; color: @members_text_color; word-wrap: break-word; }
.members table.list > tbody > tr > td:not(:first-child) { border-left-width: 0; }
.members table.list > tbody > tr > td:not(:last-child) { border-right-width: 0; }
.members table.list .name { width: 20%; padding-left: 0; text-align: @members_align_name; }
.members table.list .username { width: 17%; text-align: @members_align_username; }
.members table.list .rank { width: 15%; text-align: @members_align_rank; }
.members table.list .posts { width: 10%; text-align: @members_align_posts; }
.members table.list .date-registered { width: 18%; text-align: @members_align_date_registered; }
.members table.list .last-online { width: 18%; padding-right: 30px; text-align: @members_align_last_online; }
/* --- custom pages --- */
.pbcpe-widget-title { color: @default_forum_text_color; }
/* --- login & registration pages --- */
#register-form table { table-layout: auto; }
#register-form td { padding: 5px; }
#register-form td > * { vertical-align: middle; }
#register-form textarea { height: 100px; width: 300px; }
#register-form select { margin: 0; }
#request-msg textarea { margin: 5px 0; height: 100px; width: 50%; }
#forum-message-container { background: @container_background_color_2; color: @container_text_color_2; margin: 10px; padding: 10px; }
/* ======================================================
* CONTAINERS + TITLE BARS + CONTROL BARS + DIALOGS
* ====================================================== */
/* --- containers --- */
@content_background: @container_background_color_1;
@content_border_width: 1px;
@content_border_style: solid;
@content_area_background: @container_background_color_1;
@content_area_border: 1px solid @container_inner_border_color;
@content_area_text_color: @container_text_color_1;
@content_area_text_font: normal 1em Georgia, serif;
@content_area_links_font: @content_area_text_font;
@content_area_links_decoration: @empty;
.container { margin-bottom: 30px; color: @container_text_color_1;
&:last-of-type { margin-bottom: 0; }
}
.container > .content,
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane,
.container.copy .clone { background: @content_background; margin-top: 10px; padding: 0; border-width: @content_border_width; border-style: @content_border_style; border-color: @container_outer_border_color; color: @container_text_color_1; }
.container > .content { overflow: hidden; }
.content-box { background: @content_area_background; border: @content_area_border; color: @content_area_text_color; font: @content_area_text_font; }
.content-box a, .container a { color: @container_links_color; font: @content_area_links_font; text-decoration: @content_area_links_decoration; }
.content-box a:hover, .container a:hover { color: @container_links_hover_color; font: @content_area_links_font; text-decoration: @content_area_links_decoration; }
.container abbr.time { color: @timestamp_color; }
.container .note { color: lighten(@container_text_color_1, 15%); }
/* --- title bars --- */
@title_bar_background_image: @empty;
@title_bar_background_attachment: @empty;
@title_bar_background_repeat: @empty;
@title_bar_background_position: @empty;
@title_bar_border: @empty;
@title_text_font: 24px @font_2;
@title_text_decoration: @empty;
@title_text_transform: uppercase;
@title_text_variant: @empty;
@title_text_align: @empty;
@title_text_shadow: @empty;
@title_buttons_background_image: @empty;
@title_buttons_background_attachment: @empty;
@title_buttons_background_repeat: @empty;
@title_buttons_background_position: @empty;
@title_buttons_border: 1px solid @bg_color_1;
@title_buttons_font: 12px @default_forum_text_font_family;
@title_buttons_decoration: @empty;
@title_buttons_case: lowercase;
@title_buttons_hover_background: @bg_color_2;
@title_buttons_hover_border: 1px solid @bg_color_2;
@title_buttons_hover_font: @title_buttons_font;
@title_buttons_hover_decoration: @title_buttons_decoration;
@title_buttons_hover_color: @text_color_1;
.container > .title-bar { background-color: @title_bar_background_color; background-image: @title_bar_background_image; background-attachment: @title_bar_background_attachment; background-repeat: @title_bar_background_repeat; background-position: @title_bar_background_position; height: 60px; margin-bottom:1px; padding: 12px 30px; border: @title_bar_border; .box-sizing(); }
.container > .title-bar h1,
.container > .title-bar h2,
.container > .title-bar h3 { font: @title_text_font; line-height: 36px !important; letter-spacing: 0.2em; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; color: @title_text_color; display: inline; }
.container > .title-bar.bbcode { min-height: 60px; padding: 0px; }
.container > .title-bar.bbcode h2 { width: (@wrapper_width - 10); padding: 0px; line-height: inherit !important; display: block; }
*+html .container > .title-bar.bbcode h2 { line-height: 16px !important; }
.title_wrapper { padding: 7px 10px; overflow: hidden; }
.title_wrapper img { display: block; }
/* --- control bars --- */
@action_bar_background: @container_inner_border_color;
@action_bar_border: 1px solid @container_outer_border_color;
.container > .control-bar { background: @action_bar_background; margin-bottom: 0; padding: 11px 30px 8px; border: @action_bar_border; border-width: 0; top: 60px !important; }
.container > .control-bar > .controls { float: right; padding: 0 5px; color: @text_color_1; }
.container > .title-bar > .controls { float: right; }
.container > .title-bar > .controls li a,
.container > .title-bar > .controls li div { background-color: @title_buttons_background_color; background-image: @title_buttons_background_image; background-attachment: @title_buttons_background_attachment; background-repeat: @title_buttons_background_repeat; background-position: @title_buttons_background_position; height: 33px; padding: 0 30px; border: @title_buttons_border; font: @title_buttons_font; line-height: 33px !important; text-decoration: @title_buttons_decoration; text-transform: @title_buttons_case; color: @title_buttons_color; .transition(none); }
.container > .title-bar > .controls:hover li a,
.container > .title-bar > .controls:hover li div { background: @title_buttons_hover_background; border: @title_buttons_hover_border; font: @title_buttons_hover_font; text-decoration: @title_buttons_hover_decoration !important; color: @title_buttons_hover_color !important; }
.controls > li a { display: inline-block; }
.control-bar .ui-pagination { padding: 0; }
.control-bar > div.float-left { padding-top: 0; padding-bottom: 0; }
.control-bar > div.float-left i { padding-right: 10px; line-height: 32px; }
.control-bar .controls ul { z-index: 233; }
.control-bar .controls .ui-selectMenu-box { margin-top: -1px; margin-left: 10px; }
.control-bar .ui-search { padding: 0 0 0 5px !important; }
/* --- dialogs --- */
.ui-selectMenu-box { height: 28px; border: 1px solid @container_inner_border_color; text-transform: lowercase; .border-radius(0); }
.ui-selectMenu-box .status { margin: 0 12px 0 10px; line-height: 28px; }
.ui-selectMenu-box .arrow { height: 28px; }
.ui-selectMenu-box .arrow.down > span { border-top-color: #000000; }
.ui-dialog .ui-dialog-titlebar { padding: 12px 20px; position: relative; background-color: @title_bar_background_color; background-image: @title_bar_background_image; background-attachment: @title_bar_background_attachment; background-repeat: @title_bar_background_repeat; background-position: @title_bar_background_position; border: @title_bar_border; }
.ui-dialog .ui-dialog-title { color: @title_text_color; font: @title_text_font; letter-spacing: 0.2em; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; text-shadow: @title_text_shadow; float: left; margin: .1em 16px .2em 0; }
.ui-dialog { .hsla-bgcolor-safe(@container_outer_border_color, .5); }
.ui-dialog .ui-dialog-titlebar-close { right: 20px; }
.ui-dialog .ui-dialog-titlebar-close:hover span, .ui-dialog .ui-dialog-titlebar-close:focus span { background-image:url('//images.proboards.com/v5/ui-icons.png'); background-position: -20px, 0px; }
.ui-dialog .dialog-fixed > .control-bar { padding-left: 20px; padding-right: 20px; }
.ui-dialog .dialog-fixed > .control-bar > .controls { padding: 0; }
.ui-dialog .dialog-fixed > .control-bar > .controls .ui-selectMenu-box { margin-left: 0; margin-right: 10px; }
.ui-dialog div.ui-dialog-buttonpane.ui-widget-content { text-align: right; margin-top: 10px; padding: 0 0 0 10px; border-width: 1px; }
.ui-dialog div.section { text-align: center; background-color: @container_background_color_1; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; padding: 10px; margin: 10px 0; }
.ui-widget-overlay { opacity: .3; }
.ui-search .search-input.filters-input { }
.ui-search .search-input { padding: 3px 12px; border: 1px solid transparent !important; line-height: 16px !important; text-transform: lowercase; }
.ui-search .search-filters-button { background: @forms_field_background; width: auto; height: auto; min-height: 28px; padding: 4px 7px; border: 1px solid transparent !important; border-left-color: @container_inner_border_color !important; display: inline-block; vertical-align: top; cursor: pointer; .box-sizing(); }
.ui-search .search-filters-button .icon { display: inline-block; width: auto; height: auto; }
.ui-search .search-filters-button.state-active { background: @forms_field_background; }
.event_icon { cursor: pointer; }
.container.copy .clone { border-collapse: inherit; border-bottom-width: 0px; }
/* --- guests online dialog --- */
#guests-online table { width: 150px; margin: auto; }
#guests-online th, #guests-online td { padding: 2px 0; text-align: @members_align_name; }
/* ======================================================
* PAGINATION
* ====================================================== */
@pagination_micro_background_color: transparent;
@pagination_micro_hover_color: @pagination_hover_color;
@pagination_micro_text_color: @pagination_text_color;
.ui-pagination { display: inline-block; overflow: hidden; }
.ui-pagination li { cursor: pointer; list-style: none; float: left; margin-right: 2px;
&:last-child { margin-right: 0px; }
}
.ui-pagination li > a,
.ui-pagination li > div { background-color: @pagination_background_color; padding: 5px 6px; border: 0 solid @container_inner_border_color; text-decoration: none; text-transform: lowercase; color: @pagination_text_color; display: inline-block;
&:hover { background-color: @pagination_hover_color; border-width: 0; text-decoration: none; color: @pagination_text_color; }
}
.ui-pagination li.ui-pagination-next a,
.ui-pagination li.ui-pagination-next div,
.ui-pagination li.ui-pagination-prev a,
.ui-pagination li.ui-pagination-prev div{ padding-left: 14px; padding-right: 14px; }
.ui-pagination li.state-selected > a { background-color: @pagination_background_color; border-width: 0; color: @pagination_text_color; cursor: default; opacity: .5; filter: alpha(opacity=50); }
.ui-pagination li.state-disabled > a { border-width: 0; cursor: default; opacity: .5; filter: alpha(opacity=50);
&:hover { background-color: @pagination_background_color; border-width: 0; }
}
.ui-micro-pagination { overflow: hidden; font-size: 12px; float: right; }
.ui-micro-pagination ul,
.ui-micro-pagination ul li div { display: inline; }
.ui-micro-pagination ul li { list-style: none; display: inline; margin-right: 2px;
&:last-child { margin-right: 0px; }
}
.ui-micro-pagination ul li > a { display: inline-block; text-decoration: none; padding: 4px 6px; color: @pagination_micro_text_color; background-color: @pagination_micro_background_color; border: 1px solid @container_inner_border_color;
&:hover { background-color: @pagination_micro_hover_color; color: @pagination_micro_text_color; }
}
/* ======================================================
* BUTTONS + LABELS + ICONS + TOOLTIPS
* ====================================================== */
/* --- buttons --- */
@buttons_background_image: @empty;
@buttons_background_attachment: @empty;
@buttons_background_repeat: @empty;
@buttons_background_position: @empty;
@buttons_border: 1px solid @container_inner_border_color;
@buttons_text_font: 11px @default_forum_text_font_family;
@buttons_text_decoration: none;
@buttons_text_case: lowercase;
@buttons_hover_background: mix(@bg_color_1, @bg_color_2, 20%);
@buttons_hover_border: 1px solid @container_inner_border_color;
@buttons_hover_text_color: @text_color_1;
@buttons_hover_text_font: @buttons_text_font;
@buttons_hover_text_decoration: @buttons_text_decoration;
@buttons_active_background: mix(@bg_color_1, @bg_color_2, 20%);
@buttons_active_border: 1px solid @container_inner_border_color;
@buttons_active_text_color: @text_color_1;
@buttons_active_text_font: @buttons_text_font;
@buttons_active_text_decoration: @buttons_text_decoration;
.button { background-image: none; -webkit-border-radius: 0; border-radius: 0; }
.button, a.button, input[type="submit"], input[type="button"], button { background-color: @buttons_background_color; background-image: @buttons_background_image; background-attachment: @buttons_background_attachment; background-repeat: @buttons_background_repeat; background-position: @buttons_background_position; min-height: 26px; margin-left: 5px; padding: 0 20px; border: @buttons_border; font: @buttons_text_font; line-height: 26px !important; letter-spacing: 0.1em; text-decoration: @buttons_text_decoration; text-transform: @buttons_text_case; color: @buttons_text_color !important; display: inline-block; vertical-align: middle; cursor: pointer; white-space: nowrap; .transition(none); }
.button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { color: @buttons_hover_text_color !important; font: @buttons_hover_text_font; text-decoration: @buttons_hover_text_decoration; background: @buttons_hover_background; border: @buttons_hover_border; }
.button:active, input[type="submit"]:active, input[type="button"]:active, button:active, .shoutbox_refresh_button.active, .liked.likes-button, .button.state-selected { color: @buttons_active_text_color !important; font: @buttons_active_text_font; text-decoration: @buttons_active_text_decoration; background: @buttons_active_background; border: @buttons_active_border; }
.button .status { padding: 0 8px; border: @buttons_border; border-width: 0px 1px 0px 0px; float: left; overflow: hidden; word-wrap: break-word; white-space: nowrap; }
.button .icon { padding: 6px 3px 5px; border: 0; float: left; line-height: normal !important; }
input[type="submit"], input[type="button"], button { min-height: 33px; padding: 0 30px; line-height: 33px !important; }
.button-x { position: absolute; top: 50%; right: 3px; margin-top: -8px; cursor: pointer; display: block; text-indent: -9999px; width: 16px; height: 16px; background: url('//images.proboards.com/v5/icons-default.png') -16px -32px no-repeat; }
.button-x:hover { background: url('//images.proboards.com/v5/icons-default.png') 0px -32px no-repeat; }
.button.post-options { }
.reply_button { float: right; }
/* --- new icon --- */
@new_background: @title_buttons_background_color @all_gradients left center repeat-x;
@new_border: 1px solid darken(@title_buttons_background_color, 15%);
@new_link_transform: uppercase;
@new_link_color: @title_buttons_color;
@new_link_font: 7px Georgia, serif;
@new_link_decoration: none;
@new_hover_background: @new_background;
@new_hover_border: @new_border;
@new_hover_link_transform: @new_link_transform;
@new_hover_link_color: @new_link_color;
@new_hover_link_font: @new_link_font;
@new_hover_link_decoration: @new_link_decoration;
.new-icon, .new-icon a { color: @new_link_color !important; font: @new_link_font; text-decoration: @new_link_decoration; text-transform: @new_link_transform; text-align: center; line-height: 9px !important; height: 9px; }
.new-icon { background: @new_background; border: @new_border; display: none; float: left; margin: 3px 5px 3px 0px; padding: 0px 2px; word-wrap: normal;
a { position: relative;
&:after { content: ""; padding: 16px; position: absolute; left: -8px; top: -8px; }
}
}
.new-icon:hover { background: @new_hover_background; border: @new_hover_border; }
.new-icon:hover, .new-icon:hover a { color: @new_hover_link_color !important; font: @new_hover_link_font; text-decoration: @new_hover_link_decoration; text-transform: @new_hover_link_transform; }
/* --- labels --- */
@labels_weight: bold;
@labels_size: 80%;
@labels_case: none;
@labels_caps: normal;
.ui-label { font-size: @labels_size; font-weight: @labels_weight; text-transform: @labels_case; font-variant: @labels_caps; position: relative; top: -1px; margin: 0 5px 0 0; display: inline; }
.label-row { height: 20px; line-height: 20px !important; margin: 10px 0; clear: left; }
.label-row * { float: left; }
.label-row .ui-label, .label-row span.label-delete-button { margin-bottom: -5px; margin-left: 5px; }
#manage-labels-container .style-wrapper .color_input { border: 1px solid #AAAAAA; }
#manage-labels-container .style-wrapper .color-picker { border: 1px solid #AAAAAA; background: #EEEEEE; }
#manage-labels-container .style-wrapper .color-picker-preview { border: 1px solid #AAAAAA; border-right: none; }
/* --- icons --- */
@font_awesome_like_icon_color: @buttons_text_color;
@font_awesome_like_icon_liked_color: #e74c3c;
@font_awesome_settings_icon_color: @buttons_text_color;
@font_awesome_search_icon_color: @buttons_text_color;
@font_awesome_lock_icon_color: @buttons_text_color;
@font_awesome_bookmark_icon_color: @buttons_text_color;
@font_awesome_poll_icon_color: @buttons_text_color;
@font_awesome_checkmark_icon_color: #19cf86;
@font_awesome_thread_icon_color: @text_color_2;
@font_awesome_thread_announcement_icon_color: @text_color_2;
@font_awesome_thread_sticky_icon_color: @text_color_2;
@font_awesome_message_icon_color: @text_color_2;
@font_awesome_message_new_icon_color: @text_color_2;
.likes-button > .fa-heart { color: @font_awesome_like_icon_color !important; }
.likes-button.liked > .fa-heart { color: @font_awesome_like_icon_liked_color !important; }
.button .status > .fa-cog { font-size: 13px; color: @font_awesome_settings_icon_color !important; }
.ui-search .search-filters-button .icon > .fa-search { color: @font_awesome_search_icon_color; }
.lock_icon > .fa-lock { font-size: 17px; color: @font_awesome_lock_icon_color; }
.bookmark_icon > .fa-bookmark { font-size: 16px; color: @font_awesome_bookmark_icon_color; }
.poll_icon > .fa-bar-chart { font-size: 16px; color: @font_awesome_poll_icon_color; }
.ui-poll .results tr td .select-box > .fa-check { padding: 2px 1px 2px 3px; color: @font_awesome_checkmark_icon_color; }
.threads .item > td.icon > .fa-comment-o { font-size: 18px; color: @font_awesome_thread_icon_color; }
.threads .item > td.icon > .fa-bullhorn { font-size: 16px; color: @font_awesome_thread_announcement_icon_color; }
.threads .item > td.icon > .fa-sticky-note-o { font-size: 17px; color: @font_awesome_thread_sticky_icon_color; }
.conversations .item > .icon > .fa-envelope-o { font-size: 14px; color: @font_awesome_message_icon_color; }
.conversations .item.new > .icon > .fa-envelope { font-size: 14px; color: @font_awesome_message_new_icon_color; }
/* --- forum tooltips --- */
@ttp_background: @bg_color_3;
@ttp_text_color: @text_color_2;
@ttp_border_color: @ttp_background;
#tiptip_holder.tip_top #tiptip_arrow { border-top-color: @ttp_border_color !important; }
#tiptip_holder.tip_top #tiptip_arrow_inner { border-top-color: @ttp_background !important; }
#tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: @ttp_border_color !important; }
#tiptip_holder.tip_bottom #tiptip_arrow_inner { border-bottom-color: @ttp_background !important; }
#tiptip_holder.tip_left #tiptip_arrow { border-left-color: @ttp_border_color !important; }
#tiptip_holder.tip_left #tiptip_arrow_inner { border-left-color: @ttp_background !important; }
#tiptip_holder.tip_right #tiptip_arrow { border-right-color: @ttp_border_color !important; }
#tiptip_holder.tip_right #tiptip_arrow_inner { border-right-color: @ttp_background !important; }
#tiptip_content { background-color: @ttp_background !important; color: @ttp_text_color !important; border-color: @ttp_border_color !important; }
/* ======================================================
* TABLES + LISTS + FORMS
* ====================================================== */
/* --- tables --- */
@lists_background: @empty;
@lists_inner_border_width: 1px;
@lists_inner_border_style: solid;
@lists_text_font: normal 11px Georgia, serif;
@lists_text_color: @container_text_color_1;
@lists_header_font: bold 11px @default_forum_text_font_family;
@lists_header_case: lowercase;
@lists_header_color: @container_text_color_1;
@lists_links_font: @empty;
@lists_links_decoration: none;
@lists_links_color: @container_links_color;
@lists_hover_background_image: @empty;
@lists_hover_background_attachment: @empty;
@lists_hover_background_repeat: @empty;
@lists_hover_background_position: @empty;
@lists_hover_text_color: @lists_text_color;
@lists_hover_text_font: @lists_text_font;
@lists_hover_links_color: @container_links_hover_color;
@lists_hover_links_font: @lists_links_font;
@lists_hover_links_decoration: none;
@lists_selected_background: @container_highlight_color;
@lists_selected_text_color: @lists_text_color;
@lists_selected_text_font: @lists_text_font;
@lists_selected_links_color: @lists_links_color;
@lists_selected_links_font: @lists_links_font;
@lists_selected_links_decoration: none;
table { table-layout: fixed; }
table.list { background: @lists_background; font: @lists_text_font; color: @lists_text_color; table-layout: fixed; width: 100%; .box-sizing(); }
table.list > tbody > tr.spacer { height: 5px;
&:last-of-type { display: none; }
}
table.list > thead > tr > th,
table.list > tbody > tr > td { border-width: @lists_inner_border_width; border-style: @lists_inner_border_style; border-color: @container_inner_border_color; vertical-align: middle; padding: 25px 30px; .box-sizing(); }
table.list > thead > tr > th { padding: 5px 30px; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; font: @lists_header_font; text-transform: @lists_header_case; color: @lists_header_color; white-space: nowrap; }
table.list > tbody > tr.spacer > td { padding: 0; border-width: 0; }
table.list th.icon,
table.list td.icon { width: 50px; padding-left: 0; padding-right: 0; text-align: center; }
table.list th.main,
table.list td.main { padding-left: 0; }
table.list .checkbox { width: 30px; padding: 0; text-align: center; }
table.list abbr.time,
table.list .last-edited { color: @timestamp_color; }
.list .item > .main { cursor: pointer; overflow: hidden; }
.list a { color: @lists_links_color; font: @lists_links_font; text-decoration: @lists_links_decoration; }
.list .item.state-hover, .list .board.item:hover, #calendar-list .item:hover { color: @lists_hover_text_color; font: @lists_hover_text_font; background-color: @container_highlight_color; background-image: @lists_hover_background_image; background-attachment: @lists_hover_background_attachment; background-repeat: @lists_hover_background_repeat; background-position: @lists_hover_background_position; }
.list .item > .main.state-hover .link a, .list .item:hover > .main .link a { color: @lists_hover_links_color; font: @lists_hover_links_font; text-decoration: @lists_hover_links_decoration; }
.list .item.state-selected { color: @lists_selected_text_color; font: @lists_selected_text_font; background: @lists_selected_background; }
.list .item.state-selected a { color: @lists_selected_links_color; font: @lists_selected_links_font; text-decoration: @lists_selected_links_decoration; }
.list .item .list-item-checkbox { visibility: hidden; }
.list .item.state-hover .list-item-checkbox, .list .item.state-selected .list-item-checkbox { visibility: visible; }
/* --- forms --- */
@forms_field_background: #FFFFFF;
@forms_field_border: 1px solid @container_inner_border_color;
@forms_field_text_color: @empty;
@forms_field_text_font: normal 1em Georgia, serif;
@forms_area_background: @empty;
@forms_area_border: @empty;
@forms_area_text_color: @empty;
@forms_area_text_font: normal 1em Georgia, serif;
@forms_select_background: @empty;
@forms_select_border: @empty;
@forms_select_text_color: @empty;
@forms_select_text_font: normal 1em Georgia, serif;
input[type="text"], input[type="email"], input[type="password"] { background: @forms_field_background; width: 300px; height: 28px; padding: 3px 8px; border: @forms_field_border; font: @forms_field_text_font; color: @forms_field_text_color; .box-sizing(); }
input[type="text"].short { width: 50px; }
input[type="text"].search-input { width: inherit; }
input.date { width: 77px; }
input.time { width: 55px; }
textarea { color: @forms_area_text_color; font: @forms_area_text_font; background: @forms_area_background; border: @forms_area_border; resize: none; }
textarea::-webkit-scrollbar { width: 14px; height: 14px }
textarea::-webkit-scrollbar-track { background-color: @white; }
textarea::-webkit-scrollbar-thumb { background-color: @bg_color_1; border: 5px solid @white; cursor: pointer; }
select { color: @forms_select_text_color; font: @forms_select_text_font; background-color: @forms_select_background; border: @forms_select_border; height: 26px; padding: 2px; }
.setting-wrapper + .setting-wrapper { margin-top: 4px; }
.setting-wrapper input { vertical-align: middle; }
/* ======================================================
* TABS
* ====================================================== */
@tabs_background: @container_inner_border_color none left center repeat-x;
@tabs_border: 1px solid @container_inner_border_color;
@tabs_unselected_background: mix(@bg_color_1, @bg_color_2, 20%);
@tabs_unselected_border: 1px solid @container_inner_border_color;
@tabs_unselected_text_color: @container_links_color;
@tabs_unselected_text_font: 100% @default_forum_text_font_family;
@tabs_unselected_text_decoration: none;
@tabs_selected_background: @container_background_color_1;
@tabs_selected_border: @tabs_unselected_border;
@tabs_selected_text_color: @container_links_color;
@tabs_selected_text_font: @tabs_unselected_text_font;
@tabs_selected_text_decoration: @tabs_unselected_text_decoration;
@tabs_hover_background: @container_highlight_color;
@tabs_hover_border: @tabs_unselected_border;
@tabs_hover_text_color: @tabs_unselected_text_color;
@tabs_hover_text_font: @tabs_unselected_text_font;
@tabs_hover_text_decoration: @tabs_unselected_text_decoration;
.ui-tabMenu ul { background: @tabs_background; border: @tabs_border; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; padding: 5px 5px 0 5px; }
.ui-tabMenu ul li { background: @tabs_unselected_background; height: 26px; border: @tabs_unselected_border; list-style: none; float: left; position: relative; top: 1px; }
.ui-tabMenu ul li a { color: @tabs_unselected_text_color; font: @tabs_unselected_text_font; text-decoration: @tabs_unselected_text_decoration; float: left; padding: 5px 14px; white-space: nowrap; }
.ui-tabMenu ul li:hover { background: @tabs_hover_background; border: @tabs_hover_border; }
.ui-tabMenu ul li:hover a { color: @tabs_hover_text_color; font: @tabs_hover_text_font; text-decoration: @tabs_hover_text_decoration; }
.ui-tabMenu ul li.ui-active { background: @tabs_selected_background; border: @tabs_selected_border; border-bottom-color: transparent; opacity: 1; }
.ui-tabMenu ul li.ui-active a { color: @tabs_selected_text_color; font: @tabs_selected_text_font; text-decoration: @tabs_selected_text_decoration; border-bottom: 1px solid @tabs_selected_background; }
/* ======================================================
* BOARD LIST
* ====================================================== */
@board_names_font: 15px Georgia, serif;
@board_names_case: uppercase;
@board_names_color: @empty;
@board_desc_font: 12px Georgia, serif;
@board_desc_color: @empty;
@board_mod_font: 12px Georgia, serif;
@board_mod_color: @empty;
@board_count_font: 20px Georgia, serif;
@board_count_color: @empty;
@board_last_post_font: normal normal 12px Georgia, serif;
@board_last_post_link_font: normal @board_last_post_font;
@board_last_post_link_case: inherit;
@board_sub_background: #4c5b4b scroll;
@board_sub_font: 12px Georgia, serif;
@board_sub_case: inherit;
@board_sub_color: @text_color_2;
@board_align_main: left;
@board_align_count: center;
@board_align_last_post: right;
.boards.container > .content { border-width: 0; }
.boards table.list { table-layout: auto; }
.boards table.list > tbody > tr.spacer { height: 10px; }
.boards table.list > tbody > tr > td:not(:first-child) { border-left-width: 0; }
.boards table.list > tbody > tr > td:not(:last-child) { border-right-width: 0; }
.boards table.list > tbody > tr > td.main { width: auto; padding-left: 30px; text-align: @board_align_main; }
.boards table.list > tbody > tr > td.main .link a { font: @board_names_font; text-transform: @board_names_case; color: @board_names_color; }
.boards table.list > tbody > tr > td.main .description { margin-top: 6px; font: @board_desc_font; color: @board_desc_color; }
.boards table.list > tbody > tr > td.main .moderators { margin-top: 6px; font: @board_mod_font; color: @board_mod_color; }
.boards table.list > tbody > tr > td.threads,
.boards table.list > tbody > tr > td.posts { width: 9%; text-align: @board_align_count; white-space: nowrap; }
.boards table.list > tbody > tr > td.threads .count,
.boards table.list > tbody > tr > td.posts .count { font: @board_count_font; color: @board_count_color; display: block; }
.boards table.list > tbody > tr > td.latest { width: 25%; text-align: @board_align_last_post; }
.boards table.list > tbody > tr > td.latest .last-post { margin-bottom: 3px; font: @board_last_post_font; display: block; }
.boards table.list > tbody > tr > td.latest .last-post a { font: @board_last_post_link_font; text-transform: @board_last_post_link_case; }
.boards table.list > tbody > tr > td.sub-boards { background: @board_sub_background; padding-top: 8px; padding-bottom: 8px; font: @board_sub_font; text-transform: @board_sub_case; color: @board_sub_color; }
.boards table.list > tbody > tr > td.sub-boards a { color: inherit; }
/* --- board password page --- */
.container.password > .content { padding: 25px 30px !important; }
#password-wrapper { margin: 15px 0 0; }
#password-wrapper div { display: inline-block; }
#password-wrapper input[type="submit"] { min-height: 26px; margin-left: 5px; margin-top: -1px; padding: 0 20px; line-height: 26px !important; }
#password-wrapper input[type="password"] { margin-left: 10px; }
/* ======================================================
* THREAD LIST
* ====================================================== */
@thread_names_font: 15px Georgia, serif;
@thread_names_case: normal;
@thread_names_color: @empty;
@thread_descriptions_font: 1em Georgia, serif;
@thread_descriptions_case: normal;
@thread_descriptions_color: @empty;
@thread_created_by_font: 1em Georgia, serif;
@thread_created_by_case: normal;
@thread_created_by_color: @empty;
@thread_last_post_link_case: normal;
@thread_align_subject: left;
@thread_align_replies: center;
@thread_align_views: center;
@thread_align_last_post: right;
.threads.container > .content { border-width: 0; }
.threads table.list { table-layout: auto; }
.threads table.list > tbody > tr.announcement > td.icon { background-color: @bg_color_3; border-color: @bg_color_3; border-top-color: @container_inner_border_color; }
.threads table.list > tbody > tr.locked { background-color: darken(@bg_color_2, 3%); }
.threads table.list > tbody > tr:not(.spacer) > td { padding-top: 15px; padding-bottom: 15px; }
.threads table.list > tbody > tr > td:not(:first-child) { border-left-width: 0; }
.threads table.list > tbody > tr > td:not(:last-child) { border-right-width: 0; }
.threads table.list > tbody > tr > td.icon { background-color: @bg_color_1; }
.threads table.list > tbody > tr > td.latest a { text-transform: @thread_last_post_link_case; }
.threads table.list > tbody > tr > td > table > tbody > tr > td.title { padding-bottom: 3px; }
.threads table.list > tbody > tr > td > table > tbody > tr > td.title .link { padding-right: 8px; font: @thread_names_font; text-transform: @thread_names_case; color: @thread_names_color; }
.threads table.list > tbody > tr > td > table > tbody > tr > td.title br { display: none; }
.threads table.list > tbody > tr > td > table > tbody > tr > td.title .thread_description_list { font: @thread_descriptions_font; text-transform: @thread_descriptions_case; display: inline-block; }
.threads table.list > tbody > tr > td > table > tbody > tr > td.created-by { font: @thread_created_by_font; text-transform: @thread_created_by_case; color: @thread_created_by_color; }
.threads .main { text-align: @thread_align_subject; }
.threads .pages { width: 240px; }
.threads .replies { width: 120px; text-align: @thread_align_replies; }
.threads .views { width: 120px; text-align: @thread_align_views; }
.threads .latest { width: 240px; text-align: @thread_align_last_post; cursor: pointer; }
.threads .control-icons i { padding-right: 7px; }
.threads .control-icons .lock_icon, .threads .control-icons .falling_icon, .threads .control-icons .event_icon, #bookmarks.threads .bookmark_icon { width: 0; padding-right: 0; }
.threads .item.new .new-icon { margin: 6px 8px 0 0; display: inline-block; }
/* ======================================================
* POST LIST
* ====================================================== */
@posts_odd_background_color: @container_background_color_1;
@posts_odd_background_image: @empty;
@posts_odd_background_attachment: @empty;
@posts_odd_background_repeat: @empty;
@posts_odd_background_position: @empty;
@posts_odd_text_color: @container_text_color_1;
@posts_even_background_color: @container_background_color_2;
@posts_even_background_image: @empty;
@posts_even_background_attachment: @empty;
@posts_even_background_repeat: @empty;
@posts_even_background_position: @empty;
@posts_even_text_color: @container_text_color_2;
@posts_separator_border: 1px solid @container_inner_border_color;
@posts_likes_font: 11px @default_forum_text_font_family;
@posts_likes_case: lowercase;
@posts_likes_align: right;
@posts_likes_color: @empty;
@posts_foot_text_font: 11px @default_forum_text_font_family;
@posts_foot_text_case: normal;
@posts_foot_text_color: @empty;
@posts_code_background: @container_background_color_1;
@posts_code_border: 1px solid @container_inner_border_color;
@posts_code_text_color: @container_text_color_1;
@posts_code_text_font: @empty;
@posts_signatures_border: 1px solid @container_inner_border_color;
@posts_signatures_text_color: @empty;
@posts_signatures_text_font: 10px @default_forum_text_font_family;
.posts.container > .content { border-width: 0; }
.posts table.list > tbody > tr.spacer { height: 20px; }
.posts .post > td { padding: 0; border: @posts_separator_border; }
.posts .post.blocked > td.unblocked { display: none; }
.posts .post > td > table { width: 100%; }
.posts .poll { margin-bottom: 10px; border: @posts_separator_border; }
.posts .post .left-panel { background-color: mix(@bg_color_1, @bg_color_2, 20%); width: 260px; padding: 30px; vertical-align: top; position: relative; .box-sizing(); }
.posts .post .content { padding: 50px 75px; vertical-align: top; }
.posts #labels { padding: 5px; text-align: right; display: none; }
.posts span.labels { margin-bottom: 10px; padding: 8px 30px; border: @posts_separator_border; display: block; }
.posts span.labels .ui-label { padding-right: 5px; display: inline-block; zoom: 1; }
.posts.summary .post .content-head { margin-bottom: 10px; padding-bottom: 10px; border-bottom: @posts_separator_border; }
.posts.summary .post .content-head .info { float: none; }
.posts .post .message { text-align: justify; margin-bottom: 1.3em; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }
.posts .post .message table { width: inherit; }
.posts .post .message table td { padding: 3px; }
.posts .post .message ul {margin-left: 31px; list-style-type: disc; }
.posts .post .message ol {margin-left: 31px; list-style-type: decimal; }
.posts .post .message code { background: @posts_code_background; margin-left: 16px; margin-right: 16px; padding: 5px; border: @posts_code_border; font: @posts_code_text_font; color: @posts_code_text_color; white-space: pre-wrap; display: block; }
.posts .post .sub-foot { padding: 25px 30px; vertical-align: bottom; }
.posts .post .sub-foot .signature { margin-top: 15px; padding-top: 25px; border-top: @posts_signatures_border; font: @posts_signatures_text_font; color: @posts_signatures_text_color; vertical-align: bottom; }
.posts .post .foot { height: 1px; padding: 10px 30px; border-top: @posts_separator_border; vertical-align: middle; }
.posts .post .foot .info { font: @posts_foot_text_font; line-height: 28px !important; text-transform: @posts_foot_text_case; color: @posts_foot_text_color; float: left; }
.posts .post .foot .posted-on,
.posts .post .foot .edited_by,
.posts .post .foot .post-method,
.posts .post.recent .foot .thread-link { padding-right: 10px; display: inline; }
.posts .post .foot .thread-link { max-width: 450px; overflow: hidden; display: none; }
.posts .post .foot .controls { float: right; border-collapse: separate; }
.posts .post .foot .controls > a,
.posts .post .foot .controls > .button { margin-left: 10px; float: left; }
.posts .post .foot .controls > a.likes-button { padding: 0 7px; font-size:12px; }
.likes { display: block; }
.likes, .likes:hover { font: @posts_likes_font; text-transform: @posts_likes_case; text-align: @posts_likes_align; color: @posts_likes_color; }
.likes-button { padding: 4px 0px 0px 5px; display: none; }
.liked.likes { display: inline; }
.quote_clear { clear: both; }
.posts .post, .post .quote div.quote div.quote_body { background-color: @posts_odd_background_color; background-image: @posts_odd_background_image; background-attachment: @posts_odd_background_attachment; background-repeat: @posts_odd_background_repeat; background-position: @posts_odd_background_position; font-size: 12px; line-height: 1.6; color: @posts_odd_text_color; }
.post.item abbr.time, .post.item .quote .quote abbr.time { color: @posts_odd_text_color; }
.post.item .quote abbr.time, { color: @posts_even_text_color; }
.posts.item .ui-pagination { padding-left: 0px; }
/* --- polls --- */
@polls_selection_border: 1px solid @container_inner_border_color;
@polls_selection_background: @container_highlight_color;
@polls_rank_default_background: @bg_color_1;
@polls_rank_default_border: none;
@polls_rank_default_rank_color: @text_color_2;
@polls_rank_default_rank_background: transparent;
@polls_rank_default_rank_border: 5px;
@polls_rank_first_background_color: @bg_color_3;
@polls_rank_second_background_color: fade(@bg_color_3, 50%);
@polls_rank_third_background_color: fade(@bg_color_3, 30%);
.ui-poll .results td .select-box { min-width: 15px; min-height: 15px; border: @polls_selection_border; }
.ui-poll .results tr.ui-selected { background: @polls_selection_background; }
.ui-poll .poll-vote-bar .bar { background: @polls_rank_default_background; border: @polls_rank_default_border; border-right-width: 0px; float: left; height: 18px; min-width: 5px; .border-radius(0); }
.ui-poll .poll-vote-bar .rank { float: left; background: @polls_rank_default_background; border: @polls_rank_default_border; border-left-width: 0px; height: 18px; padding-left: 2px; .border-radius(0); }
.ui-poll .poll-vote-bar .rank div { color: @polls_rank_default_rank_color; font-weight: bold; font-size: 9px; background: @polls_rank_default_rank_background; padding: 1px 3px; opacity: 1; filter: alpha(opacity=100); .border-radius(0); }
.ui-poll .poll-vote-bar.rank-1 .rank, .ui-poll .poll-vote-bar.rank-1 .bar { background-color: @polls_rank_first_background_color; }
.ui-poll .poll-vote-bar.rank-2 .rank, .ui-poll .poll-vote-bar.rank-2 .bar { background-color: @polls_rank_second_background_color; }
.ui-poll .poll-vote-bar.rank-3 .rank, .ui-poll .poll-vote-bar.rank-3 .bar { background-color: @polls_rank_third_background_color; }
.ui-poll { padding: 25px 30px; }
.ui-poll h3 { margin-bottom: 10px; }
.ui-poll table { table-layout: fixed; width: auto; }
.ui-poll .icon-poll { margin-right: 0; }
.ui-poll .results { margin: 10px 0; }
.ui-poll .results td { padding: 5px 10px; }
.ui-poll .results tr.ui-hover { background-color: @container_highlight_color; cursor: default; }
.ui-poll .results td:first-child { padding-left: 0; padding-right: 0; }
.ui-poll .results .stats { float: left; margin-left: 5px; line-height: 18px !important; }
.ui-poll .voted ul { list-style: disc; padding-left: 20px; }
.ui-poll .vote-input { margin-top: 5px; }
.ui-poll .vote-input-cooldown { margin-left: 5px; margin-top: 2px; }
.ui-poll .poll-vote-bar { float: left; overflow: hidden; min-width: 10px; }
.ui-poll .results tr td .select-box i { visibility: hidden; display: block; }
.ui-poll .results tr.ui-selected td .select-box i { visibility: visible; }
/* --- quotes --- */
@quotes_background: @empty;
@quotes_border: 2px solid @container_inner_border_color;
@quotes_sub_background: @quotes_background;
@quotes_sub_border: @quotes_border;
#content .content .quote div.quote_body { background: @quotes_background; border: @quotes_border; margin-top: 7px; padding: 10px 10px; }
#content .content .quote div.quote div.quote_body { background: @quotes_sub_background; border: @quotes_sub_border; }
.quote { margin: 0 10px; padding-bottom: 10px; position: relative; top: 0px; }
.quote div.quote_avatar_container { float: left; }
.quote div.no_avatar_placeholder { display: inline-block; height: 30px; width: 30px; position: absolute; top: 14px; left: 4px; }
.quote div.quote_header { display: block; margin: 7px 0px 16px 35px; }
.quote.no_header { padding-top: 10px; }
/* --- quick reply --- */
.quick-reply textarea { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; height: 150px; padding: 10px; width: 100%; resize: none; .box-sizing(); }
.quick-reply .content { padding: 0; border-width: 0; }
.quick-reply .message { margin-bottom: 10px; }
.quick-reply .guest_name { padding: 0 10px 10px 0px; vertical-align: middle; }
.quick-reply .guest_name label { display: inline; font-weight: 800; }
.quick-reply input[type="submit"] { margin-left: 0; }
/* ======================================================
* EDITING AREA
* ====================================================== */
.ui-wysiwyg .editors { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; }
.wysiwyg-tabs li { float: left; position: relative; bottom: 1px; margin: 1px 2px 0 0; list-style: none; background: @tabs_unselected_background; border: 1px solid @container_inner_border_color; border-top-width: 0; }
.wysiwyg-tabs li:hover { background: @tabs_hover_background; border: @tabs_hover_border; border-top-width: 0; }
.wysiwyg-tabs li a { color: @tabs_unselected_text_color; font: @tabs_unselected_text_font; text-decoration: @tabs_unselected_text_decoration; float: left; padding: 5px 15px; }
.wysiwyg-tabs li.ui-active { background-color: @white; background-image: @posts_odd_background_image; background-attachment: @posts_odd_background_attachment; background-repeat: @posts_odd_background_repeat; background-position: @posts_odd_background_position; border: @tabs_selected_border; border-top-width: 0; margin-top: 0px; padding-top: 1px; }
.wysiwyg-tabs li.ui-active a { color: @tabs_selected_text_color; font: @tabs_selected_text_font; text-decoration: @tabs_selected_text_decoration; }
.wysiwyg-smiley-menu .state-disabled { display: none; }
/* --- posting page --- */
@smiles_menu_width: 280px;
@smile_padding: 5px;
.wysiwyg-area label { font-weight: 800; }
.wysiwyg-area .outline { padding: 10px; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; }
.wysiwyg-area .content { padding: 25px 30px 15px 30px; }
.wysiwyg-area .content > form > div { margin-bottom: 10px; }
.wysiwyg-area .subject_line .controls { float: right; }
.wysiwyg-area .subject_line .subject_input { overflow: hidden; padding-right: 13px; }
.wysiwyg-area .subject_line input { width: 100%; }
.wysiwyg-area .subject_line table { width: 100%; table-layout: auto; }
.wysiwyg-area .subject_line .subject_input { line-height: 28px !important; }
.wysiwyg-area .subject_line table .subject { width: 70px; }
.wysiwyg-area .end-date, .wysiwyg-area .attachment, .new-area .captcha { display: none; }
.wysiwyg-area .poll .poll-options { line-height: 30px !important; }
.wysiwyg-area .poll [name="poll_max_answers"] { width: 25px; }
.wysiwyg-area .poll table { width: 100%; table-layout: auto; }
.wysiwyg-area .poll td { vertical-align: top; padding: 5px 10px 5px 0px; line-height: 230%; }
.wysiwyg-area .poll th { text-align: left; padding-bottom: 5px; }
.wysiwyg-area .submit { height: 36px; vertical-align: middle; line-height: 30px !important; }
.ui-wysiwyg .button { border: none; margin: 0; padding: 0; color: #000000; background: none; }
.ui-wysiwyg .button-fontName, .ui-wysiwyg .button-fontSize { background-color: transparent; }
.ui-wysiwyg .ui-selectMenu { line-height: normal; }
.ui-wysiwyg .ui-selectMenu-box { height: 22px; }
.ui-wysiwyg .ui-selectMenu-box .status { border: none; line-height: 22px !important; padding: 0; width: auto; }
.ui-wysiwyg .ui-selectMenu-box .icon { border: none; }
.ui-wysiwyg .ui-selectMenu-box .arrow { height: 22px; }
.new-area .user-search .content { padding: 0px 19px 0px 0px; }
.new-area .recipients h4 { display: block; margin-bottom: 3px; }
.new-area .guest_name input { width: 485px; }
.wysiwyg-area .edit_reason > label { float: left; line-height: 28px; width: 180px; }
.wysiwyg-area .edit_reason > div { margin-left: 180px; margin-right: 8px; }
.wysiwyg-area .edit_reason > div > input { width: 100%; }
.grp_recipients_div { display: none; }
.grp_recipients_div a { display: block; clear: both; padding-top: 10px; }
.loadingOverlay { background-image: url('//images.proboards.com/v5/loader/processing.gif'); background-position: center center; background-repeat: no-repeat; position: absolute; }
#announcement-options { display: none; width: 500px; }
.smiley-menu { width: @smiles_menu_width; }
.smiley-menu > li > a { padding: @smile_padding; }
.smiley-menu > li:hover > a { padding: @smile_padding; }
/* --- BBCode editor --- */
@bbcode_editor_background_color: @white;
@bbcode_editor_text_color: @posts_odd_text_color;
@bbcode_editor_text_font_family: @empty;
.ui-wysiwyg .editors .bbcode-editor textarea { background-color: @bbcode_editor_background_color; padding: 15px 20px !important; font-family: @bbcode_editor_text_font_family; color: @bbcode_editor_text_color; .box-sizing(); }
/* --- preview editor --- */
@ve_posts_odd_text_color: @posts_odd_text_color;
@ve_posts_odd_background_color: @posts_odd_background_color;
@ve_posts_odd_background_image: @posts_odd_background_image;
@ve_posts_odd_background_attachment: @posts_odd_background_attachment;
@ve_posts_odd_background_repeat: @posts_odd_background_repeat;
@ve_posts_odd_background_position: @posts_odd_background_position;
@ve_lists_links_color: @lists_links_color;
@ve_default_forum_text_font_style: @default_forum_text_font_style;
@ve_default_forum_text_font_weight: @default_forum_text_font_weight;
@ve_default_forum_text_font_size: @default_forum_text_font_size;
@ve_default_forum_text_font_family: @default_forum_text_font_family;
@ve_quotes_background: @quotes_background;
@ve_quotes_border: @quotes_border;
@ve_quotes_sub_background: @quotes_sub_background;
@ve_quotes_sub_border: @quotes_sub_border;
@ve_posts_code_background: @posts_code_background;
@ve_posts_code_border: @posts_code_border;
@ve_posts_code_text_color: @posts_code_text_color;
@ve_posts_code_text_font: @posts_code_text_font;
/* ======================================================
* CONVERSATION LIST + MESSAGE LIST
* ====================================================== */
/* --- conversation list --- */
@conversation_names_font: bold 15px @default_forum_text_font_family;
@conversation_names_case: lowercase;
@conversation_names_color: @empty;
@conversation_created_by_font: italic @lists_text_font;
@conversation_created_by_case: lowercase;
@conversation_created_by_color: @empty;
@conversation_last_post_link_case: lowercase;
@conversation_align_subject: left;
@conversation_align_created_by: center;
@conversation_align_replies: center;
@conversation_align_last_reply: right;
.conversations.container > .content { border-width: 0; }
.conversations table.list { table-layout: auto; }
.conversations table.list > tbody > tr.new > td.icon { background-color: @bg_color_3; border-color: @bg_color_3; border-top-color: @container_inner_border_color; }
.conversations table.list > tbody > tr:not(.spacer) > td { padding-top: 15px; padding-bottom: 15px; }
.conversations table.list > tbody > tr > td:not(:first-child) { border-left-width: 0; }
.conversations table.list > tbody > tr > td:not(:last-child) { border-right-width: 0; }
.conversations table.list > tbody > tr > td.icon { background-color: @bg_color_1; }
.conversations table.list > tbody > tr > td.created-by,
.conversations table.list > tbody > tr > td.recipients { font: @conversation_created_by_font; text-transform: @conversation_created_by_case; color: @conversation_created_by_color; }
.conversations table.list > tbody > tr > td.latest a { text-transform: @thread_last_post_link_case; }
.conversations table.list > tbody > tr > td > table > tbody > tr > td.title .link { font: @conversation_names_font; text-transform: @conversation_names_case; color: @conversation_names_color; }
.conversations .main { text-align: @conversation_align_subject; }
.conversations .pages { width: 240px; }
.conversations .created-by,
.conversations .recipients { width: 240px; text-align: @conversation_align_created_by; }
.conversations .replies { width: 120px; text-align: @conversation_align_replies; }
.conversations .latest { width: 240px; text-align: @conversation_align_last_reply; cursor: pointer; }
.conversations .item.new .new-icon { margin: 6px 8px 0 0; display: inline-block; }
/* --- message list --- */
@messages_odd_background: @container_background_color_1;
@messages_odd_text_color: @container_text_color_1;
@messages_even_background: @container_background_color_2;
@messages_even_text_color: @container_text_color_2;
@messages_header_border: 1px solid @container_inner_border_color;
@messages_participants_border: 1px solid @container_inner_border_color;
@messages_code_background: @container_background_color_1;
@messages_code_border: 1px solid @container_inner_border_color;
@messages_code_text_color: @container_text_color_1;
@messages_code_text_font: @empty;
@messages_foot_text_font: 11px @default_forum_text_font_family;
@messages_foot_text_case: lowercase;
@messages_foot_text_color: @empty;
@messages_signatures_border: 1px solid @container_inner_border_color;
@messages_signatures_text_color: @empty;
@messages_signatures_text_font: 10px @default_forum_text_font_family;
.messages.container > .content { border-width: 0; }
.messages table.list > tbody > tr.spacer { height: 20px; }
.messages .message > td { background: @messages_odd_background; padding: 0; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; color: @messages_odd_text_color; }
.messages .message > td > table { width: 100%; }
.messages .message .left-panel { background-color: mix(@bg_color_1, @bg_color_2, 20%); width: 260px; padding: 30px; vertical-align: top; .box-sizing(); }
.messages .message .content { padding: 25px 30px; vertical-align: top; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }
.messages.summary .message .content-head { width: 100%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: @messages_header_border; }
.messages .message .message { margin-bottom: 1.3em; overflow-x: auto; overflow-y: hidden; }
.messages .message .message table { width: inherit; }
.messages .message .message table td { padding: 3px; }
.messages .message .message ul {margin-left: 31px; list-style-type: disc;}
.messages .message .message ol {margin-left: 31px; list-style-type: decimal;}
.messages .message .message code { background: @messages_code_background; margin-left: 16px; margin-right: 16px; padding: 5px; border: @messages_code_border; font: @messages_code_text_font; color: @messages_code_text_color; white-space: pre-wrap; display: block; }
.messages .message .sub-foot { padding: 25px 30px; vertical-align: bottom; }
.messages .message .sub-foot .signature { margin-top: 15px; padding-top: 15px; border-top: @messages_signatures_border; font: @messages_signatures_text_font; color: @messages_signatures_text_color; vertical-align: bottom; }
.messages .message .foot { height: 1px; padding: 10px 30px; border-top: @messages_header_border; vertical-align: middle; }
.messages .message .foot .info { float: left; margin-top: 3px; line-height: 20px !important; }
.messages .message .foot .info .posted-on { padding-right: 10px; font: @messages_foot_text_font; text-transform: @messages_foot_text_case; color: @messages_foot_text_color; display: inline-block; }
.messages .message .foot .controls { min-width: 100px; float: right; }
.messages .message .foot .controls > a,
.messages .message .foot .controls > .button{ float: left; margin-left: 10px; }
.messages .message .quote div.quote div.quote_body { background: @messages_odd_background; color: @messages_odd_text_color; }
.messages .message, .messages .message .quote div.quote_body { background: @messages_even_background; font-size: 12px; line-height: 1.6; color: @messages_even_text_color; }
.message.item abbr.time, .message.item .quote .quote abbr.time { color: @messages_odd_text_color; }
.message.item .quote abbr.time { color: @messages_even_text_color; }
.messages .participants, .thread_description_page { margin-bottom: 10px; padding: 8px 30px !important; border: @messages_participants_border; }
.posting-options-list, .messaging-options-list { display: none; }
/* ======================================================
* PROFILE
* ====================================================== */
.show-user table { width: 100%; }
.show-user table.list > tbody > tr > td { padding: 8px 20px; text-transform: lowercase;
&:not(.main) { border-left-width: 0; }
&:not(:last-child) { border-right-width: 0; }
}
.show-user table.list > thead > tr.heading th,
.show-user table.list > tbody > tr.heading td { padding-top: 0; padding-bottom: 15px; text-align: center; }
.show-user table.list > tbody > tr > th.avatar,
.show-user table.list > tbody > tr > td.avatar { display: none; }
.show-user table.list > tbody > tr > td.delete { width: 90px; vertical-align: middle; text-align: right; }
.show-user table.list > tbody > tr > td.delete a { display: none; }
.show-user table.list > tbody > tr > td.time-container { width: 22%; text-align: right; }
.show-user a.show-more { padding: 8px 0 0; font-weight: bold; text-align: center; display: block; }
.show-user .notifications .new-icon { display: inline-block; }
.show-user .friends-stats { float: right; }
.show-user .empty-result-message { text-align: center; padding-bottom: 25px; }
.show-user .profile-cover-image { background-color: @bg_color_1; background-position: 0 50%; background-repeat: no-repeat; background-size: 100%; width: 100%; height: 250px; position: relative; }
.show-user .profile-cover-image .ui-tabMenu { position: absolute; right: 0; bottom: 0; left: 162px; }
.show-user .profile-cover-image .ui-tabMenu ul { background: none; }
.show-user .profile-user { padding: 0 30px 10px;
&::before,&::after { display: table; content: ""; }
&::after { clear: both; }
}
.show-user .profile-user-avatar { background-color: @container_background_color_1; width: 100px; height: 100px; margin-top: -86px; padding: 5px; border: 1px solid @container_inner_border_color; float: left; position: relative; .box-sizing(content-box); }
.show-user .profile-user-fields { padding: 20px; float: left; }
.show-user .profile-user-fields > span { display: block; }
.show-user .profile-user-fields span.username { margin-bottom: 5px; font: bold 24px @default_forum_text_font_family; line-height: 24px; text-transform: inherit; }
.show-user .profile-user-fields span.offline { padding-left: 3px; font-size: 28px; font-weight: bold; color: @container_text_color_1; position: relative; top: 4px; }
.show-user .profile-user-fields span.offline.online { color: @pop_of_color; }
.show-user .profile-user-fields span.user-group { font-size: 12px; line-height: 16px; text-transform: uppercase; }
.show-user .profile-user-options { padding: 30px 0; float: right; }
.show-user .controls > * { float: right; }
.show-user .controls #options-container { padding: 0; }
.show-user .content-box { padding: 0 30px 30px !important; border-width: 0; vertical-align: top;
&::before,&::after { display: table; content: ""; }
&::after { clear: both; }
}
.show-user .online-friends .micro-profile,
.show-user .offline-friends .micro-profile { margin-top: 0; margin-right: 8px; margin-bottom: 10px; vertical-align: top; display: inline-block;
&:last-of-type { margin-right: 0; }
}
.show-user table.groups > tbody > tr > td { padding: 15px 0; text-align: center;
&:first-child { padding-left: 20px; border-left-width: 1px; text-align: left; }
}
.show-user table.groups > tbody > tr > td.group_desc { width: 40%; }
.show-user table.groups > tbody > tr > td.leaders { width: 25%; }
.show-user table.groups > tbody > tr > td.members { width: 10%; }
.show-user table.groups > tbody > tr > td.status { width: 15%; }
.show-user .badge-wish { text-align: center; height: 100px; margin-right: 10px; }
.show-user .badge-wish img { display: block; }
.show-user .visit-badge-store { text-align: center; width: 130px; }
.show-user .visit-badge-store .badge-store-text { width: 110px; height: 54px; margin: 10px auto 5px auto; }
.badge-thumbs { padding: 5px 130px 5px 5px !important; position: relative; min-height: 36px; }
.badge-thumbs .badge-thumb { margin: 5px; }
.badge-thumbs .button { position: absolute; top: 50%; right: 10px; margin-top: -13px; }
.app {
}
.app a {
font-size:14px;
font-family:arial ;
}
/* --- summary --- */
.show-user table > tbody > tr > td.summary-left-col { padding: 0 30px 30px 30px; vertical-align: top; }
.show-user table > tbody > tr > td.summary-right-col { background-color: mix(@bg_color_1, @bg_color_2, 20%); width: 260px; padding: 30px; vertical-align: top; .box-sizing(); }
.show-user .summary-status { margin-bottom: 30px; }
.show-user .summary-status div.personal-text { background-color: mix(@bg_color_2, @white, 50%); margin-bottom: 7px; padding: 8px 20px; border: 1px solid @container_outer_border_color; position: relative; .border-radius(3px);
&::before,&::after { content: ""; width: 0; height: 0; border: solid transparent; position: absolute; bottom: 100%; left: 86px; }
&::before { border-color: rgba(255,255,255,0); border-bottom-color: @container_outer_border_color; border-width: 9px; margin-left: -9px; }
&::after { border-color: rgba(255,255,255,0); border-bottom-color: mix(@bg_color_2, @white, 50%); border-width: 8px; margin-left: -8px; }
}
.show-user .summary-status td.status-input input[type="text"] { width: 100%; height: 36px; }
.show-user .summary-status td.status-submit { width: 132px; text-align: right; }
.show-user .summary-status td.status-submit input[type="submit"] { min-height: 36px; padding-left: 20px; padding-right: 20px; line-height: 36px !important; }
.show-user .summary-content-box { margin-bottom: 10px; padding: 15px 20px !important; border: 1px solid @container_outer_border_color;
&:last-of-type { margin-bottom: 0; }
}
.show-user .summary-content-box table > tbody > tr:last-child > td { padding-bottom: 0; }
.show-user .summary-content-box table > tbody > tr > td { padding-bottom: 7px; }
.show-user .summary-content-box table > tbody > tr > td.field { width: 170px; font-weight: bold; color: @container_text_color_1; }
.show-user .summary-content-box table > tbody > tr > td.field a { color: inherit; }
.show-user .summary-content-box.follow { margin-bottom: 30px; padding: 0 !important; border-width: 0;
&:last-of-type { margin-bottom: 0; }
}
.show-user .summary-content-box.follow h4 { font-size: 15px; text-transform: lowercase; text-align: right; color: @text_color_1; }
.show-user .summary-content-box.follow h4 a { color: inherit; }
.show-user .summary-content-box.follow .micro-profile { width: 178px; margin-top: 8px; margin-bottom: -3px; }
/* --- edit profile --- */
.big_username { font-size: 20pt; }
.edit-user .title { font-weight: bold; margin-bottom: 4px; }
.edit-user textarea { padding: 2px; margin: 0; }
.edit-user input, .edit-user select, .edit-user textarea { display: inline-block; zoom: 1; margin-top: 5px; margin-left: 0; }
.edit-user .content-box { margin: 10px 30px 30px 30px; padding: 0; border-width: 0; }
.edit-user .content-box.options { position: relative; zoom: 1; }
.edit-user .content-box.options table { table-layout: auto; }
.edit-user .content-box.options td { padding: 9px 5px; }
.edit-user .content-box.options input[type="radio"] { margin-top: 0px; }
.edit-user .pad { padding: 10px; }
.edit-user .pad.info { padding: 30px 30px 0; clear: both; }
.edit-user .pad .username { font-size: 1em; font-weight: normal; margin-top: 14px; }
.edit-user .note { font-style: italic; font-size: 85%; }
.edit-user label { display: block; font-weight: 800; }
.edit-user .radio label, .edit-user .checkbox label { margin-right: 15px; display: inline; font-weight: 400; }
.edit-user .avatar.content-box { padding: 10px 10px 0px 0px; }
.edit-user .avatar h4 { margin-bottom: 5px; }
.edit-user .user-search { padding-top: 3px; }
.edit-user .avatar { margin-bottom: 30px; }
.edit-user .notifications table { table-layout: auto; }
.edit-user .notifications th, .edit-user .notifications td { padding: 0px 5px; }
.edit-user .notifications th.description { width: 760px; }
.edit-user .edit_button_spacer { min-width: 275px; display: inline-block; }
#user_block_list .user-search-selection .ui-selectlist-item { float: none; clear: both; margin-bottom: 10px; }
#user_block_list .user-search-selection .ui-selectlist-item .block_list_options { float: left; width: 430px; padding-left: 20px; }
#user_block_list .selectlist-wrapper { float: left; position: relative; }
#user_block_list .block_list_options input { margin: 0 5px 5px 5px; padding: 0; height: 13px; }
#user_block_list .block_list_options label { position: relative; top: -2px; }
.edit-user #avatar-options .content-box { position: relative; margin: 10px 0 0 30px; border-width: 1px; float: left; min-height: 296px; padding: 15px; text-align: center; width: 200px; }
.edit-user #avatar-options .content-box + .content-box { margin-left: 10px; }
.edit-user #avatar-options .content-box.options { width: 100%; min-width: 279px; max-width: 350px; text-align: left; }
#forum-avatars-wrapper img:hover { border-width: 3px; border-style: solid; border-color: @link_color; margin: -3px; }
#image-avatar-editor-container .wrapper { padding: 10px 5px 5px 5px; margin-top: 15px; }
.ie7 #image-avatar-editor-container .wrapper { width: 520px; }
#image-avatar-editor-container .wrapper.first { clear: both; margin-top: 10px; }
#image-avatar-editor-container span.fileupload-buttonbar { display: inline-block; margin: 10px 0; }
#image-avatar-editor-container .files { margin: 0; }
#image-avatar-editor-container #link-image { height: 18px; }
#image-avatar-editor-container #link-image.button { cursor: pointer; }
#forum-avatar-editor-container { padding: 0; }
#forum-avatars-wrapper { width: 510px; margin: 0 auto; padding: 10px; }
#forum-avatars-wrapper .avatar-wrapper { float: left; margin: 10px; }
#forum-avatars-wrapper img { max-height: 150px; max-width: 150px; }
/* --- badge options tab --- */
#badge-options h4 { margin-top: 10px; }
#badge-options .badges-have .badge-thumbs { width: 240px; }
#badge-options .badges-dont-have .badge-thumbs { width: 110px; }
#badge-options .badge-thumbs { float: left; padding: 5px !important; }
#badge-options .badge-thumbs .badge-thumb, #badge-options .badge-thumbs .badge-icons { float: left; }
#badge-options .badge-icons img { margin: 5px 0 5px 10px; vertical-align: middle; }
#badge-options .badge-thumbs .badge-icons img, #badge-options .badge-thumbs .badge-icons input { margin: 5px 0 0 10px; width: 16px; height: 16px; }
#badge-options .badge-thumbs .badge-icons input { margin-top: 8px; padding: 0; }
#badge-options .badge-thumbs .small { vertical-align: bottom; }
#badge-options .badges-dont-have .badge-icons img { margin-top: 16px; }
#badge-options .badge-gift, #badge-options .badge-use-action { color: @container_text_color_1; }
/* ======================================================
* MICRO PROFILES + MINI PROFILES
* ====================================================== */
/* --- micro profiles --- */
@micro_background: @container_background_color_1;
@micro_border: 1px solid @container_inner_border_color;
@micro_text_color: @empty;
@micro_text_font: @empty;
@micro_link_color: @empty;
@micro_link_font: @empty;
@micro_link_decoration: @empty;
@micro_remove_background: @container_background_color_1;
@micro_remove_border: 1px solid @container_inner_border_color;
@micro_remove_text_color: @container_text_color_1;
@micro_remove_text_font: bold 80% @default_forum_text_font_family;
.micro-profile { color: @micro_text_color; font: @micro_text_font; position: relative; height: 50px; width: 200px; display: inline-block; padding: 10px; margin-top: 5px; margin-bottom: 3px; border: @micro_border; background: @micro_background; overflow: hidden; }
.micro-profile .avatar { display: block; width: 50px; position: absolute; top: 10px; border-width: 0px; }
.micro-profile .info { max-width: 118px; position: absolute; top: 10px; left: 70px; }
.micro-profile .info span.user { text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; }
.micro-profile .info input { width: 136px; height: 28px; padding: 3px 8px; border: 1px solid @container_outer_border_color; .box-sizing(); }
.grp_recipients_div li { color: @micro_text_color; font: @micro_text_font; position: relative; width: 240px; display: inline-block; margin: 3px; padding: 3px 22px 3px 5px; border: @micro_border; background: @micro_background; overflow: hidden; float: left; }
.micro-profile a, .grp_recipients_div li a { color: @micro_link_color; font: @micro_link_font; text-decoration: @micro_link_decoration; }
.user-search-selection .ui-selectlist-item .close { color: @micro_remove_text_color; font: @micro_remove_text_font; background: @micro_remove_background; border: @micro_remove_border; cursor: pointer; height: 72px; padding: 35px 3px; position: absolute; right: 0; top: 5px; .box-sizing(); }
.user-search-box { width: 200px; }
.user-search-selectlist { z-index: 99999; }
.user-search-selectlist .content { cursor: pointer; padding: 1px 0px; }
.user-search-selectlist .micro-profile .info { width: 200px; }
.user-search-selection .ui-selectlist-item { float: left; margin-right: 20px; }
.user-search-selection .ui-selectlist-item .micro-profile { }
.user-search-displaybox { min-width: 250px; z-index: 99999; }
.user-search-displaybox .control-bar { padding: 6px 10px; border: none; }
.user-search-displaybox .control-bar .ui-pagination { padding: 5px; display: inherit; }
.user-search-selectlist .micro-profile { margin: 1px auto; display: inherit; }
.ie7 .user-search-pagination-note { margin: 5px 0; }
.ie7 .user-search-displaybox .control-bar { width: 350px; }
.ie7 .user-search-displaybox { min-width: 350px; }
.ie7 .user-search-selectlist .micro-profile { margin: 1px 68px 1px 67px; width: 198px; display: inline-block; }
/* --- mini profiles --- */
@mini_background: transparent;
@mini_border: none;
@mini_username_font: 16px Georgia, serif;
@mini_username_case: normal;
@mini_username_align: center;
@mini_custom_title_font: 11px Georgia, serif;
@mini_custom_title_case: normal;
@mini_custom_title_align: center;
@mini_custom_title_color: @empty;
@mini_group_font: 11px @default_forum_text_font_family;
@mini_group_case: uppercase;
@mini_group_align: center;
@mini_stars_align: center;
@mini_info_background: @container_background_color_1;
@mini_info_border: 1px solid @container_outer_border_color;
@mini_info_font: 11px @default_forum_text_font_family;
@mini_info_align: left;
@mini_info_case: lowercase;
@mini_info_color: @container_text_color_1;
@mini_warning_background: @bg_color_1;
@mini_warning_border: none;
@mini_warning_bar_color: #f1c40f;
@mini_warning_text_align: right;
@mini_warning_number_text_color: #FFFFFF;
@mini_warning_number_text_font: bold 10px @default_forum_text_font_family;
@mini_warning_number_text_decoration: @empty;
.mini-profile { background: @mini_background; width: 200px; border: @mini_border; overflow: hidden; }
.mini-profile .avatar { max-width: 200px; max-height: 200px; margin: auto; border-width: 0; overflow-x: hidden; overflow-y: hidden; vertical-align: middle; }
.mini-profile .username { margin-top: 10px; font: @mini_username_font; line-height: 32px; text-transform: @mini_username_case; text-align: @mini_username_align; display: block; }
.mini-profile .username span.offline { padding-left: 3px; font-weight: bold; font-size: 22px; color: @bg_color_1; position: relative; top: 3px; }
.mini-profile .username span.online { color: @pop_of_color; }
.mini-profile .custom-title { margin-top: -3px; margin-bottom: 8px; font: @mini_custom_title_font; text-align: @mini_custom_title_align; text-transform: @mini_custom_title_case; color: @mini_custom_title_color; display: block; }
.mini-profile .group,
.mini-profile .rank { font: @mini_group_font; text-align: @mini_group_align; text-transform: @mini_group_case; display: block; }
.mini-profile .stars { margin-top: 5px; text-align: @mini_stars_align; display: block; }
.mini-profile .info { background: @mini_info_background; max-width: 200px; margin-top: 20px; margin-bottom: 7px; padding: 5px 10px; border: @mini_info_border; font: @mini_info_font; text-align: @mini_info_align; text-transform: @mini_info_case; color: @mini_info_color; display: block;
&::before,&::after { display: table; content: ""; }
&::after { clear: both; }
}
.mini-profile .info + .info { margin-top: 0; }
.mini-profile .info span.field { margin-right: 10px; float: left; }
.mini-profile .info span.value { font-weight: bold; text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; text-align: right; }
.warning-bar-container { background: @mini_warning_background; border: @mini_warning_border; }
.warning-bar { background: @mini_warning_bar_color; height: 18px; line-height: 18px; text-align: @mini_warning_text_align; min-width: 40px !important; }
.warning-bar .number { font: @mini_warning_number_text_font; text-decoration: @mini_warning_number_text_decoration; color: @mini_warning_number_text_color; padding: 0 2px; }
.avatar-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flex; display: flex; vertical-align: middle; }
.avatar-wrapper * { margin: auto; }
.avatar-wrapper > div,
#avatar-preview.flash_present.image_present > div { position: relative; }
.avatar-wrapper div object,
.flash-avatar object,
#avatar-preview.flash_present.image_present div object,
.avatar-wrapper > div > img { position: absolute; top: 0; left: 0; }
.avatar-wrapper > div > div { display: table-cell; vertical-align: middle; }
.avatar_size_default,
.avatar_size_default embed,
.avatar_size_default object,
.avatar_size_default > div,
.avatar-wrapper.avatar_size_default > div > div { height: 200px; width: 200px; }
.avatar_size_default img,
.avatar_size_default default { max-height: 200px; max-width: 200px; }
.avatar_size_medium,
.avatar_size_medium embed,
.avatar_size_medium object,
.avatar_size_medium > div,
.avatar-wrapper.avatar_size_medium > div > div { height: 100px; width: 100px; }
.avatar_size_medium img,
.avatar_size_medium default { max-height: 100px; max-width: 100px; }
.avatar_size_small,
.avatar_size_small embed,
.avatar_size_small object,
.avatar_size_small > div,
.avatar-wrapper.avatar_size_small > div > div { height: 50px; width: 50px; }
.avatar_size_small img,
.avatar_size_small default { max-height: 50px; max-width: 50px; }
.avatar_size_quote,
.avatar_size_quote embed,
.avatar_size_quote object,
.avatar_size_quote > div,
.avatar-wrapper.avatar_size_quote > div > div { height: 30px; width: 30px; }
.avatar_size_quote img,
.avatar_size_quote default { max-height: 30px; max-width: 30px; }
#flash-avatar-preview .flash-avatar object { position: relative; }
#avatar-preview.flash_present div object { position: inherit; }
#avatar-preview.flash_present > div { position: inherit; }
#avatar-preview .hide { display: none; }
.avatar_size_placeholder { height: 150px; width: 150px; }
.mini-profile .badges img { height: 24px; width: 24px; }
/* ======================================================
* HELPER CLASSES
* ====================================================== */
.pointer { cursor: pointer; }
.border-round { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; }
.clear { clear: both; }
.float-right { float: right; }
.float-left { float: left; }
.hide, .spoiler { display: none; }
.absolute-hide { display: none; position: absolute; }
.block-item { display: block; }
.center { text-align: center; }
.no-right-margin { margin-right: 0px; }
.valigntt { vertical-align: text-top; }
.auto-overflow { overflow: auto; }
.inline-block { display: inline-block; }
.break-word { word-wrap: break-word; }
.nowrap { white-space: nowrap; }
.aria-hidden { width: 1px; height: 1px; overflow: hidden; text-indent: -1000px; position: absolute; top: 0; left: 0; display: block; }
.wysiwyg-textarea { width: 100%; height: 200px; }
.post-options, .message-options { padding: 0; display: none; }
.options_menu { max-width: 190px; }
.posting-options-list.options_menu { max-width: 100%; }
.options_menu li { height: 28px; }
.options_menu a { height: 20px; line-height: 20px !important; }
.options_menu hr { color: #AAAAAA; background-color: #AAAAAA; height: 1px; border: none; }
.controls .checkbox { display: none; }
.clickable { cursor: pointer; }
/* --- css arrows --- */
.arrow { position: relative; display: inline-block; width: 10px; height: 10px; z-index: 10; }
.arrow > span { content: ''; position: absolute; left: 50%; top: 50%; display: block; border-color: transparent; border-style: solid; border-width: 4px; height: 0; width: 0; }
.arrow.up > span { margin-left: -4px; margin-top: -6px; border-bottom-color: @container_text_color_1; }
.arrow.right > span { margin-left: -2px; margin-top: -4px; border-left-color: @container_text_color_1; }
.arrow.down > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_text_color_1; }
.arrow.left > span { margin-left: -7px; margin-top: -4px; border-right-color: @container_text_color_1; }
.arrow.big > span { border-width: 5px; }
.arrow.big.up > span { margin-left: -5px; margin-top: -7px; }
.arrow.big.right > span { margin-top: -5px; }
.arrow.big.down > span { margin-left: -5px; }
.arrow.big.left > span { margin-left: -8px; margin-top: -5px; }
/* --- thread + message selection --- */
#thread_listing, #conversation_listing { padding: 0; }
/* ======================================================
* STATUS TEXT
* ====================================================== */
@status_text_success_color: @container_text_color_1;
@status_text_failure_color: @container_text_color_1;
.saved { color: @status_text_success_color; }
.status-box { font-weight: 800; margin-left: 5px; padding: 1px 5px; }
.status-box.error { background-color: @container_background_color_1; }
.status-box.saved { background-color: @container_background_color_1; }
.error { color: @status_text_failure_color; }
.container.error > .content { padding: 25px 30px !important; }
.flood-control { padding: 5px; color: @status_text_failure_color; }
.posting-errors { padding: 5px; color: @status_text_failure_color; }
.noscript-form-error { color: @status_text_failure_color; background: @container_background_color_1; font-weight: 800; padding: 5px; margin: 0 0 10px 0; }
.ui-form-error { display: none; position: absolute; z-index: 9000; color: @container_text_color_1; border: 2px solid @status_text_failure_color; padding: 4px; font-size: 80%; background-color: @container_background_color_1; }
input.ui-error { background-color: @container_background_color_1; color: @status_text_failure_color; padding: 2px; }
.shoutbox_error { color: @status_text_failure_color; }
/* ======================================================
* PADDING CLASSES
* ====================================================== */
.pad-all-thin { padding: 3px !important; }
.pad-all { padding: 5px !important; }
.pad-all-double { padding: 10px !important; }
.pad-all-thick { padding: 20px !important; }
.pad-all-triple { padding: 30px !important; }
.pad-sides-thin { padding: 0px 3px !important; }
.pad-sides { padding: 0px 5px !important; }
.pad-sides-double { padding: 0px 10px !important; }
.pad-sides-thick { padding: 0px 20px !important; }
.pad-sides-triple { padding: 0px 30px !important; }
.pad-top-bottom-thin { padding: 3px 0px !important; }
.pad-top-bottom { padding: 5px 0px !important; }
.pad-top-bottom-double { padding: 10px 0px !important; }
.pad-top-bottom-thick { padding: 20px 0px !important; }
.pad-top-bottom-triple { padding: 30px 0px !important; }
.pad-top-thin { padding-top: 3px !important; }
.pad-top { padding-top: 5px !important; }
.pad-top-double { padding-top: 10px !important; }
.pad-top-thick { padding-top: 20px !important; }
.pad-top-triple { padding-top: 30px !important; }
.pad-right-thin { padding-right: 3px !important; }
.pad-right { padding-right: 5px !important; }
.pad-right-double { padding-right: 10px !important; }
.pad-right-thick { padding-right: 20px !important; }
.pad-right-triple { padding-right: 30px !important; }
.pad-bottom-thin { padding-bottom: 3px !important; }
.pad-bottom { padding-bottom: 5px !important; }
.pad-bottom-double { padding-bottom: 10px !important; }
.pad-bottom-thick { padding-bottom: 20px !important; }
.pad-bottom-triple { padding-bottom: 30px !important; }
.pad-left-thin { padding-left: 3px !important; }
.pad-left { padding-left: 5px !important; }
.pad-left-double { padding-left: 10px !important; }
.pad-left-thick { padding-left: 20px !important; }
.pad-left-triple { padding-left: 30px !important; }
.pad-all-sides-thick { padding: 5px 20px !important; }
/* ======================================================
* BROWSER HACKS
* ====================================================== */
/* --- IE7 --- */
.ie7 * { word-wrap: normal; }
.ie7 .shoutbox .shoutbox-post * { word-wrap: break-word; }
.ie7 .show-user .status-input input { width: 95%; margin-top: 0px; }
.ie7 .show-user .status-submit { width: 130px; text-align: right; }
.ie7 .show-user .edit-controls { text-align: right; padding-right: 10px; }
.ie7 .show-user .edit-controls .icon { text-align: center; }
.ie7 .search .options-container { height: 250px; }
.ie7 .calendar .cal-box { border-collapse: collapse; }
.ie7 .ui-pagination { float: left; }
.ie7 .recipients .user-search-selection .ui-selectlist-item .close { right: 0px; }
.ie7 .user-search-selection .ui-selectlist-item .close { right: -8px; }
.ie7 .micro-profile { zoom: 1; display: inline; width: 188px; margin: 0px 0px 3px 0px; padding-right: 9px; text-align: left; }
.ie7 .container.copy table.list { border-collapse: separate; }
.ie7 .ui-search .search-input { margin-top: -1px; }
.ie7 .threads .main table, .ie7 .conversations .main table { table-layout: auto; }
.ie7 table.list .checkbox { padding-left: 1px; }
.ie7 .avatar-wrapper span { display: inline-block; height: 100%; }
.ie7 .cal-preview-panel .cal-box .head { padding: 2px 0px 2px 4px; }
.ie7 input[type="text"] { padding-top: 5px; vertical-align: middle; }
.ie7 select { vertical-align: middle; }
.ie7 input[type=text].search-input { width: auto; padding: 4px 2px 0px 2px; }
.ie7 .search #what input, .ie7 .search #where input, .ie7 .search #who input, .ie7 .search #who select { width: 210px; }
.ie7 .legend table { table-layout: auto; }
.ie7 .edit-user .options.content-box input[type="submit"] { left: auto; }
/* I'm aware that this line is ridiculous. It removes the extra black border around submit buttons, by making black transparent and setting the color to off-black */
.ie7 input[type="submit"], .ie7 input[type="button"], .ie7 button { padding: 1px 6px 3px 6px; height: 26px; color: lighten(@buttons_text_color, 1%); background-color: lighten(@buttons_background_color, 1%); filter:chroma(color=#000000); overflow: visible; }
.ie7 .container > .control-bar { margin-bottom: 0px; }
.ie7 a.likes-button, .ie7 .messages .quote-button { margin-right: 3px; min-height: 23px; }
.ie7 .user-search-box input[type=text].search-input, .ie7 .filter input[type="text"].search-input { width: 112px; }
.ie7 .recent-threads-button { padding-right: 2px; }
.ie7 .subject_line .controls { margin-top: 1px; }
.ie7 .ui-poll .results td.answer { width: 175px; }
.ie7 .shoutbox_messages .shoutbox-post.content-box { padding-right: 16px; }
.ie7 footer ul { width: 530px; }
.ie7 .options_menu li.ui-menu-has-sub-menu > .arrow { display: inline; }
.ie7 .options_menu li { width: 190px; position: static; }
.ie7 .options_menu li .arrow { margin-top: -22px; top: auto; }
.ie7 .options_menu hr { display: none; }
.ie7 .quick-reply textarea { width: 99%; }
.ie7 .ui-poll table { table-layout: auto; }
.ie7 .ui-poll .results .stats { float: none; }
.ie7 .users { width: 100%; }
.ie7 .users .ui-pagination { margin: 0 auto; display: inline; float: none; }
.ie7 .name_and_group.float-right { float: none; }
.ie7 .shoutbox_form ul.tools li img { border: 1px solid transparent; }
.ie7 .shoutbox_form textarea { word-wrap: break-word; }
.ie7 #banner { padding: 0px 0px; }
.ie7 a#logo { padding: 0px 20px; line-height: 100px !important; }
.ie7 div.post-options { display: inline !important; }
.ie7 .ui-menu li { background-image: none; }
.ie7 .ui-menu li:hover > a { background-image: none; }
.ie7 .attachment-button-text { padding: 0 5px 3px 5px; }
.ie7 .wysiwyg-area .edit_reason > div { height: 28px; margin-left: 0; margin-right: 8px; }
.ie7 .wysiwyg-area .submit { line-height: 1px !important; }
.ie7 .show-user .controls { margin-right: 10px; }
.ie7 #nav-tree > li { display: inline; }
.ie7 #navigation-tree, .ie7 #nav-tree, .ie7 #nav-tree > li { height: 21px; }
.ie7 .recent-threads-button { height: 15px; }
.ie7 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; }
.ie7 #password-wrapper div { display: inline; }
.ie7 #password-wrapper div input[name="password"] { position: relative; top: 5px; }
.ie7 #banner { min-height: @banner_height; height: auto; }
.ie7 #nav-tree { position: relative; overflow: hidden; }
.ie7 .show-user table .center-col:first-child table { table-layout: auto; }
.ie7 .popup_html .ui-menu { position: relative; z-index: 99999999; }
.ie7 #navigation-menu > ul li a { min-width: 21px; }
.ie7 #welcome { min-width: 200px; }
.ie7 .avatar_size_default { font-size: 120px; }
.ie7 .avatar_size_medium { font-size: 60px; }
.ie7 .avatar_size_small { font-size: 40px; }
.ie7 .avatar_size_quote { font-size: 24px; }
/* --- IE8 --- */
.ie8 select {padding-top: 2px; padding-bottom: 2px; }
.ie8 .user-search-selection .ui-selectlist-item .close { right: 0px; }
.ie8 .container.copy table.list { border-collapse: separate; }
.ie8 .boards .threads { padding-left: 8px; padding-right: 8px; }
.ie8 .options_menu { max-width: 190px; }
.ie8 input[type="text"] { line-height: 20px; }
.ie8 .recent-threads-button { line-height: 1.4em; }
.ie8 .shoutbox_messages .shoutbox-post.content-box { padding-right: 16px; }
.ie8 .user-search .user-search-box .user-search-input { width: 135px; }
.ie8 table.list td.icon, .ie8 table.list th.icon { width: 54px; }
.ie8 #nav-tree { display: inline-block; }
.ie8 #content #navigation-tree, .ie8 #nav-tree, .ie8 #nav-tree > li { height: 21px; }
.ie8 #content .recent-threads-button { height: 15px; }
.ie8 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; }
.ie8 #nav-tree > li { padding-right: 1px; }
.ie8 .popup_html ul { max-width: 550px; }
.ie8 input[type="submit"], input[type="button"], button { min-height: 20px; }
.ie8 .avatar-wrapper { display: block; position: relative;
img { .absolute-center; }
}
/* --- IE9 --- */
.ie9 .avatar-wrapper > div > div { display: inherit; }
.ie9 .user-search-selection .ui-selectlist-item .close { right: 1px; }
.ie9 #nav-tree { display: inline-block; }
/* --- firefox hacks --- */
body:empty select { padding: 4px 2px; }
body:empty .ui-search .search-filters-button { padding-left: 6px; }
body:empty .ui-tabMenu ul li { height: 27px; }
/* --- screen-only (tablets/iphones) --- */
@media only handheld {
textarea { font-size: 2em; }
}
/* Mini-Profile */
.mininame {
text-transform:uppercase;
font-size:14px !important;
font-family:arial !important;
color:#555555;
}
.mininame a {
font-size:14px !important;
font-family:arial !important;
}
.minigroup {
text-transform:uppercase;
font-size:10px;
font-family: Georgia, Serif;
color:#ffffff;
}
.minihover {
background-color:rgba(0,0,0,0);
width:180px;
height:280px;
padding:10px;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-moz-transition-duration:.5s;
}
.minihover:hover {
background-color:rgba(0,0,0,.15);
-webkit-transition-duration:.5s;
transition-duration:.5s;
-moz-transition-duration:.5s;
}
.minihover2 {
width:160px;
height:260px;
padding:10px;
background-color:#ffffff;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-webkit-transition-duration:.8s;
transition-duration:.8s;
-moz-transition-duration:.8s;
}
.minihover:hover .minihover2 {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-webkit-transition-duration:.8s;
transition-duration:.8s;
-moz-transition-duration:.8s;
}
.miniavatar {
width:100px;
height:100px;
padding:5px;
border:solid 1px #dddddd;
}
.miniooc {
font:10px arial;
text-align:center;
padding-bottom:3px;
text-transform:uppercase;
border-bottom:solid 1px #dddddd;
color:#000000;
background-color:#ffffff;
}
.minionoff {
font:10px Arial;
text-align:center;
padding-top:3px;
color:#555555;
}
.ministuff {
width:75px;
padding:5px 0px;
border:solid 1px #dddddd;
margin-top:3px;
text-align:center;
font:9px Arial;
color:#555555;
background-color:#ffffff;
position:relative;
z-index:1;
text-transform:uppercase;
}
.miniapp {
text-align:center;
font:9px Arial !important;
color:#555555;
background-color:#ffffff;
position:relative;
z-index:1;
text-transform:uppercase;
}More information about the ul and il is here
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
<!-- Custom fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<script>
$(document).ready(function(){
// Sticky mini profile using Sticky-kit
(function() {
// Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
(function(){var t,i;t=this.jQuery||window.jQuery,i=t(window),t.fn.stick_in_parent=function(o){var s,e,n,r,c,l,a,p,u,d,f;for(null==o&&(o={}),f=o.sticky_class,c=o.inner_scrolling,d=o.recalc_every,u=o.parent,p=o.offset_top,a=o.spacer,e=o.bottoming,null==p&&(p=0),null==u&&(u=void 0),null==c&&(c=!0),null==f&&(f="is_stuck"),s=t(document),null==e&&(e=!0),n=function(o,n,r,l,h,g,k,m){var v,y,_,b,w,x,C,I,z,A,j,M;if(!o.data("sticky_kit")){if(o.data("sticky_kit",!0),w=s.height(),C=o.parent(),null!=u&&(C=C.closest(u)),!C.length)throw"failed to find stick parent";if(v=_=!1,(j=null!=a?a&&o.closest(a):t("<div />"))&&j.css("position",o.css("position")),I=function(){var t,i,e;return!m&&(w=s.height(),t=parseInt(C.css("border-top-width"),10),i=parseInt(C.css("padding-top"),10),n=parseInt(C.css("padding-bottom"),10),r=C.offset().top+t+i,l=C.height(),_&&(v=_=!1,null==a&&(o.insertAfter(j),j.detach()),o.css({position:"",top:"",width:"",bottom:""}).removeClass(f),e=!0),h=o.offset().top-(parseInt(o.css("margin-top"),10)||0)-p,g=o.outerHeight(!0),k=o.css("float"),j&&j.css({width:o.outerWidth(!0),height:g,display:o.css("display"),"vertical-align":o.css("vertical-align"),"float":k}),e)?M():void 0},I(),g!==l)return b=void 0,x=p,A=d,M=function(){var t,u,y,z;return!m&&(y=!1,null!=A&&(--A,0>=A&&(A=d,I(),y=!0)),y||s.height()===w||I(),y=i.scrollTop(),null!=b&&(u=y-b),b=y,_?(e&&(z=y+g+x>l+r,v&&!z&&(v=!1,o.css({position:"fixed",bottom:"",top:x}).trigger("sticky_kit:unbottom"))),h>y&&(_=!1,x=p,null==a&&("left"!==k&&"right"!==k||o.insertAfter(j),j.detach()),t={position:"",width:"",top:""},o.css(t).removeClass(f).trigger("sticky_kit:unstick")),c&&(t=i.height(),g+p>t&&!v&&(x-=u,x=Math.max(t-g,x),x=Math.min(p,x),_&&o.css({top:x+"px"})))):y>h&&(_=!0,t={position:"fixed",top:x},t.width="border-box"===o.css("box-sizing")?o.outerWidth()+"px":o.width()+"px",o.css(t).addClass(f),null==a&&(o.after(j),"left"!==k&&"right"!==k||j.append(o)),o.trigger("sticky_kit:stick")),_&&e&&(null==z&&(z=y+g+x>l+r),!v&&z))?(v=!0,"static"===C.css("position")&&C.css({position:"relative"}),o.css({position:"absolute",bottom:n,top:"auto"}).trigger("sticky_kit:bottom")):void 0},z=function(){return I(),M()},y=function(){return m=!0,i.off("touchmove",M),i.off("scroll",M),i.off("resize",z),t(document.body).off("sticky_kit:recalc",z),o.off("sticky_kit:detach",y),o.removeData("sticky_kit"),o.css({position:"",bottom:"",top:"",width:""}),C.position("position",""),_?(null==a&&("left"!==k&&"right"!==k||o.insertAfter(j),j.remove()),o.removeClass(f)):void 0},i.on("touchmove",M),i.on("scroll",M),i.on("resize",z),t(document.body).on("sticky_kit:recalc",z),o.on("sticky_kit:detach",y),setTimeout(M,0)}},r=0,l=this.length;l>r;r++)o=this[r],n(t(o));return this}}).call(this);
$('.mini-profile').stick_in_parent({
offset_top: -500
});
})();
// Delayed sticky navigation menu
(function() {
var $nav = $('#navigation-container');
var pos = $nav.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 1) {
$nav.addClass('sticky');
} else {
$nav.removeClass('sticky');
}
});
})();
// Navigation menu dropdowns
(function() {
var dropdownSibling = $('#navigation-menu > ul li > a');
var dropdown = $('.dropdown');
dropdown.hide().removeClass('fallback');
dropdownSibling.click(function() {
$(this).find('i.fa-caret-down').toggleClass('fa-caret-up');
$(this).next(dropdown).slideToggle('fast');
});
$(document).click(function(e) {
// Collapse dropdown if anywhere else on the document is clicked
// Also change caret icon direction
var target = e.target;
if (!$(target).is(dropdownSibling) && !$(target).parents().is(dropdownSibling)) {
dropdownSibling.find('i.fa-caret-down').removeClass('fa-caret-up');
dropdown.slideUp('fast');
}
});
dropdown.click(function(e) {
// Stop dropdown from collapsing when clicked on itself
e.stopPropagation();
});
})();
// Create darkened overlay behind recent threads modal
(function() {
if($('#recent-threads, #guests-online').length){
$('#recent-threads, #guests-online').dialog('option', 'modal', true);
} else {
$(document).on('dialogcreate', function(event){
if(event.target.id == 'recent-threads' || 'guests-online'){
$(event.target).dialog('option', 'modal', true);
}
});
}
})();
// Fix the navigation tree
(function() {
$('#nav-tree .menu_arrow').remove();
$('#nav-tree, .nav-tree-branch').removeClass('ui-helper-clearfix');
// Remove double angle quotes from pagination
var $paginationNext = $('.ui-pagination-next > a');
var $paginationPrev = $('.ui-pagination-prev > a');
$paginationNext.text($paginationNext.text().replace('»', ''));
$paginationPrev.text($paginationPrev.text().replace('«', ''));
})();
// Replace default icons with Font Awesome glyphs
function replaceDefaultIcons() {
// Replace interaction icons with Font Awesome glyphs
$('a.likes-button > img').replaceWith('<i class="fa fa-heart"></i>');
$('.button .status > img').replaceWith('<i class="fa fa-cog"></i>');
$('.ui-search .search-filters-button .icon > img').replaceWith('<i class="fa fa-search"></i>');
// Replace thread/conversations icons with Font Awesome glyphs
$('.thread > .icon > img').replaceWith('<i class="fa fa-comment-o"></i>');
$('.thread.sticky > .icon > i').replaceWith('<i class="fa fa-sticky-note-o"></i>');
$('.thread.announcement > .icon > i').replaceWith('<i class="fa fa-bullhorn"></i>');
$('.conversations .item > .icon > img').replaceWith('<i class="fa fa-envelope-o"></i>');
$('.conversations .item.new > .icon > i').replaceWith('<i class="fa fa-envelope"></i>');
// Append Font Awesome glyphs to tricky icons
$('.lock_icon').append('<i class="fa fa-lock"></i>');
$('.bookmark_icon').append('<i class="fa fa-bookmark"></i>');
$('.poll_icon').append('<i class="fa fa-bar-chart"></i>');
// Create an array for tricky icons
var $trickyIcons = ['.lock_icon','.bookmark_icon','.poll_icon'];
// Loop through each item of the tricky icons array
$.each($trickyIcons, function(index, value){
// Loop through each item of the array on the page
$(value).each(function(){
// Check if child images are set to display: none
if($(this).children('img').css('display') == 'none'){
// Hide the parent if so
// This works better than hiding the icon
// It hides the padding as well
$(this).css('display','none');
};
// Finally, remove child image from the DOM
$(this).find('img').remove();
});
});
// Create variable for the checkmark container
var $checkContainer = $('.ui-poll .results tr td .select-box');
// Loop through each .select-box
$checkContainer.each(function(){
// Append the Font Awesome checkmark to .select-box
$(this).append($('<i class="fa fa-check"></i>'));
// Then remove the image from the DOM
$(this).children('img').remove();
});
}
replaceDefaultIcons();
pb.events.on('pageChange', replaceDefaultIcons);
});
</script>
<script>I know this is a looooot of code but any help would be greatly appreciated!
