Post by Elli on Sept 10, 2019 10:28:15 GMT -7
Base ProBoards v5 CSS
The LESS variables and classes that ProBoards requires to function normally. All other styles can be safely deleted. The "CSS Arrows" and "Padding Classes" sections may optionally be removed with few issues.
Includes snippets: Using REM, Box Sizing Inheritance, and Box Sizing Mixin.
CSS
Includes snippets: Using REM, Box Sizing Inheritance, and Box Sizing Mixin.
CSS
/*!
* Theme Name: Theme Name
* Theme URI: http://example.proboards.com/
* Author: Your Name
* Author URI: http://your-website.com/
* Version: 1.0.0
*/
/* ======================================================
* Mixins
* ====================================================== */
/**
* Used to make empty variables without creating errors
* in the stylesheet.
*/
@empty: ~"";
/**
* Useful for quickly resetting the box-model of an
* element if `border-box` is not desired (not often).
*
* Example usage:
*
* .box-sizing(content-box);
*/
.box-sizing(@box-model: border-box) {
-webkit-box-sizing: @arguments;
box-sizing: @arguments;
}
/**
* A more intuitive way of defining color using hue,
* saturation, lightness, and alpha (opacity) rather
* than RGBA - red, green, blue, and alpha.
*/
.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);
}
/* ======================================================
* ProBoards Theme Creator Variables (Required)
* ====================================================== */
@body_background_color: #fff;
@body_background_image: @empty;
@default_forum_text_color: #000;
@link_color: #004fa0;
@banner_height: 100px;
@banner_background_color: #006cb7;
@banner_background_image: @empty;
@banner_background_position: @empty;
@banner_background_repeat: @empty;
@banner_text_color: #fff;
@banner_text_align: left;
@wrapper_width: 90%;
@all_gradients: @empty;
@title_bar_background_color: #006cb7;
@title_text_color: #fff;
@title_buttons_background_color: #004c97;
@title_buttons_color: #fff;
@buttons_background_color: #dadada;
@buttons_text_color: #000;
@container_background_color_1: #fff;
@container_text_color_1: #000;
@container_background_color_2: #f6f6f6;
@container_text_color_2: #000;
@container_links_color: @link_color;
@container_highlight_color: #f6f6f6;
@container_outer_border_color: #000;
@container_inner_border_color: #e6e6e6;
@pagination_background_color: #fff;
@pagination_text_color: #000;
@pagination_hover_color: #fff;
/* ======================================================
* ProBoards Default Variables
* ====================================================== */
@images_path: '//storage.proboards.com/forum/images';
@body_background_attachment: @empty;
@body_background_repeat: @empty;
@body_background_position: @empty;
@default_forum_text_font_style: @empty;
@default_forum_text_font_weight: @empty;
@default_forum_text_font_size: 1.2rem;
@default_forum_text_font_family: Verdana, Arial, sans-serif;
@default_forum_text_decoration: @empty;
@default_forum_text_case: @empty;
@bold_weight: 700;
@italic_style: italic;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;
@link_active_decoration: @link_decoration;
@link_active_color: @link_color;
@link_visited_decoration: @link_decoration;
@link_visited_color: @link_color;
@link_hover_decoration: @link_decoration;
@link_hover_color: lighten(@link_color, 20%);
@container_links_hover_color: @link_hover_color;
@h2_font: 1.4rem @default_forum_text_font_family;
@h2_decoration: @empty;
@h2_case: @empty;
@h2_color: @empty;
@h3_font: 1.4rem @default_forum_text_font_family;
@h3_decoration: @empty;
@h3_case: @empty;
@h3_color: @empty;
@timestamp_font: italic 100% @default_forum_text_font_family;
@timestamp_color: lighten(@container_text_color_1, 15%);
@description_font: italic 1.1rem @default_forum_text_font_family;
@description_color: @empty;
@viewing_font: 1.1rem @default_forum_text_font_family;
@viewing_color: @empty;
@small_desc_font: 1.1rem @default_forum_text_font_family;
@small_desc_color: @empty;
/* ======================================================
* Base Styles
* ====================================================== */
/**
* Reset box-sizing on all elements
*
* `border-box` includes padding and border in the
* calculations for total width, height values. This is
* more predictable than the default `content-box`, which
* does the opposite.
*
* 1. Apply `inherit` to all elements (global selector)
* 2. Apply the same with a global selector for
* psuedo-elements
*/
* { .box-sizing(inherit); } /* 1 */
*::before, *::after { .box-sizing(inherit); } /* 2 */
/**
* 1. Now add `border-box` to `html`, which will cascade
* down through all elements, but leaves box-sizing
* easy to overwrite on a parent component
*
* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; .box-sizing(); } /* 1 */
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; 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.4; text-decoration: @default_forum_text_decoration; text-transform: @default_forum_text_case; color: @default_forum_text_color; }
/* Links
* ====================================================== */
a { font: @link_font; text-decoration: @link_decoration; color: @link_color; cursor: pointer; }
a:visited { text-decoration: @link_visited_decoration; color: @link_visited_color; }
a:active { text-decoration: @link_active_decoration; color: @link_active_color; }
a:hover,
a:focus { text-decoration: @link_hover_decoration; color: @link_hover_color; }
a.text { cursor: default; }
/* Typography
* ====================================================== */
h1,
h2 { font: @h2_font; text-decoration: @h2_decoration; text-transform: @h2_case; color: @h2_color; }
h3 { font: @h3_font; text-decoration: @h3_decoration; text-transform: @h3_case; color: @h3_color; }
abbr.time, .last-edited, #event_range .time { font: @timestamp_font; color: @timestamp_color; }
abbr.time.recent_time { font-style: normal; font-weight: bold; }
blockquote { margin: 15px 40px; display: block; }
sub, sup { font-size: 1rem; }
hr { height: 0; border: 0; border-top: 1px solid @container_inner_border_color; }
.bold, b { font-weight: @bold_weight; }
.italic, em { font-style: @italic_style; }
.description { font: @description_font; color: @description_color; }
.viewing { font: @viewing_font; color: @viewing_color; }
.small { font: @small_desc_font; }
.note { color: @small_desc_color; }
.placeholder,
.placeholder-empty { color: #888; }
.foot abbr.time,
.small abbr.time { font-size: 100%; }
/* ======================================================
* Utilities
* ====================================================== */
.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: 0; }
.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; margin: -1px; border: 0; padding: 0; word-wrap: normal !important; overflow: hidden; position: absolute !important; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }
.wysiwyg-textarea { width: 100%; height: 200px; }
.post-options,
.message-options { display: none; }
.posting-options-list.options_menu { max-width: 100%; }
.options_menu { max-width: 190px; }
.options_menu li { height: 28px; }
.options_menu a { height: 28px; line-height: 20px !important; }
.options_menu hr { background-color: #aaa; height: 1px; border: none; color: #aaa; }
.controls .checkbox { display: none; }
.clickable { cursor: pointer; }
/* --- ui-helper-clearfix reset --- */
.ui-helper-clearfix { height: initial !important; }
.ui-helper-clearfix::before,
.ui-helper-clearfix::after { content: '' !important; display: table !important; }
.ui-helper-clearfix::after { clear: both !important; }
/* CSS Arrows
* ====================================================== */
.arrow { width: 10px; height: 10px; display: inline-block; position: relative; z-index: 10; }
.arrow > span { content: ''; width: 0; height: 0; border-width: 4px; border-style: solid; border-color: transparent; display: block; position: absolute; left: 50%; top: 50%; }
.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; }
/* 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-sides-thin { padding: 0 3px !important; }
.pad-sides { padding: 0 5px !important; }
.pad-sides-double { padding: 0 10px !important; }
.pad-sides-thick { padding: 0 20px !important; }
.pad-top-bottom-thin { padding: 3px 0 !important; }
.pad-top-bottom { padding: 5px 0 !important; }
.pad-top-bottom-double { padding: 10px 0 !important; }
.pad-top-bottom-thick { padding: 20px 0 !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-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-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-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-all-sides-thick { padding: 5px 20px !important; }
/* Status Text
* ====================================================== */
@status_text_success_color: @container_text_color_1;
@status_text_failure_color: @container_text_color_1;
.saved { color: @status_text_success_color; }
.error { color: @status_text_failure_color; }
.status-box { margin-left: 5px; padding: 1px 5px; font-weight: bold; }
.status-box.saved { background-color: @container_background_color_1; }
.status-box.error { background-color: @container_background_color_1; }
.flood-control { padding: 5px; color: @status_text_failure_color; }
.posting-errors { padding: 5px; color: @status_text_failure_color; }
.noscript-form-error { background: @container_background_color_1; margin: 0 0 10px 0; padding: 5px; font-weight: bold; color: @status_text_failure_color; }
.ui-form-error { background-color: @container_background_color_1; border: 2px solid @status_text_failure_color; padding: 4px; font-size: 1.1rem; color: @container_text_color_1; display: none; position: absolute; z-index: 9000; }
input.ui-error { background-color: @container_background_color_1; padding: 2px; color: @status_text_failure_color; }
.shoutbox_error { color: @status_text_failure_color; }
/* Preview Editor
* ====================================================== */
/**
* These variables have been left in place because this
* is the most direct way to style the Preview Editor.
*/
@ve_posts_odd_background_color: @container_background_color_1;
@ve_posts_odd_text_color: @container_text_color_1;
@ve_lists_links_color: @container_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: 14px;
@ve_default_forum_text_font_family: @default_forum_text_font_family;
@ve_quotes_background: @empty;
@ve_quotes_border: 2px solid @container_inner_border_color;
@ve_quotes_sub_background: @ve_quotes_background;
@ve_quotes_sub_border: @ve_quotes_border;
@ve_posts_code_background: @container_background_color_1;
@ve_posts_code_border: 1px solid @container_inner_border_color;
@ve_posts_code_text_font: @empty;
@ve_posts_code_text_color: @container_text_color_1;
.editor.visual-editor { padding: 5px; }
/* ======================================================
* "Required" ProBoards Variables
* ====================================================== */
/**
* Removing these variables from the stylesheet will
* generate an error, which doesn't seem to prevent the
* stylesheet from saving, but is very annoying.
*/
@posts_even_background_color: @empty;
@posts_even_text_color: @empty;
@messages_odd_background: @empty;
@messages_odd_text_color: @empty;
@messages_even_background: @empty;
@messages_even_text_color: @empty;