415 lines
14 KiB
SCSS
415 lines
14 KiB
SCSS
//
|
|
// Do not edit configuration values in this file.
|
|
//
|
|
// Instead add your own configuration to _custom_config.scss
|
|
// Copy line from this file, paste it to _custom_config.scss and change value.
|
|
//
|
|
|
|
// Configuration file
|
|
$show-logo: true !default; // true or false
|
|
$center-logo: true !default; // true or false
|
|
$logo-block-padding: 10px 0 !default;
|
|
$responsive-hide-logo: false !default; // Hide logo on mobile devices. true or false
|
|
|
|
$show-forum-title: false !default; // true or false
|
|
|
|
$profile-width: 150px !default;
|
|
$profile-side: left !default; // left or right
|
|
$post-margin: ($profile-width + 10px) !default;
|
|
|
|
$use-wrapper: false !default; // true or false
|
|
$max-width: none !default; // Maximum width. Set to "none" to make layout fluid
|
|
|
|
$split-forums: true !default; // Changes layout of forums list. Values are true or false
|
|
|
|
$tabbed-navigation: false !default; // true or false. Toggles tabbed navigation layout
|
|
|
|
//
|
|
// Fonts
|
|
//
|
|
|
|
$font-size: 11px !default; // Base font size
|
|
$font-family: Verdana, Helvetica, Arial, sans-serif !default; // Default font
|
|
$line-height: 1.4 !default; // Line height
|
|
|
|
$h1-font-size: $font-size + 10px !default;
|
|
$h1-font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !default;
|
|
|
|
$h2-font-size: $font-size + 8px !default;
|
|
$h2-font-family: "Droid Sans","Open Sans","Trebuchet MS",Helvetica,Arial,sans-serif !default;
|
|
|
|
$paragraph-line-height: 1.3 !default;
|
|
|
|
$nav-primary-font-size: $font-size + 1px !default;
|
|
$nav-secondary-font-size: $font-size + 1px !default;
|
|
|
|
$heading-font-size: $font-size + 4px !default;
|
|
$panel-heading-font-size: $font-size + 4px !default;
|
|
|
|
$list-heading-font-size: $font-size + 1px !default;
|
|
$list-heading-line-height: $font-size + 7px !default;
|
|
$list-heading-font-family: "Droid Sans","Open Sans","Trebuchet MS",Helvetica,Arial,sans-serif !default;
|
|
|
|
$forum-heading-font-size: $list-heading-font-size + 2px !default;
|
|
$forum-heading-font-family: $list-heading-font-family !default;
|
|
$forum-heading-font-weight: 500 !default;
|
|
|
|
$button-font-size: $font-size + 3px !default;
|
|
$button-line-height: floor(($font-size + 8px) / 2) * 2 !default; // Convert to even number
|
|
$button-glyph-font-size: floor($font-size / 2) * 2 !default; // Convert to even number
|
|
|
|
$dropdown-header-font-size: $font-size + 2px !default;
|
|
$dropdown-header-font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|
$dropdown-header-line-height: 30px !default;
|
|
|
|
$forum-link-font-size: $font-size + 5px !default;
|
|
$forum-link-line-height: 1.2 !default;
|
|
$forum-link-font-family: "Droid Sans","Open Sans","Trebuchet MS",Helvetica,Arial,sans-serif !default;
|
|
|
|
$forum-list-column-font-size: $font-size + 1px !default;
|
|
$forum-list-last-column-font-size: $font-size !default;
|
|
$forum-list-description-font-size: $font-size + 2px !default;
|
|
|
|
$topic-link-font-size: $font-size + 4px !default;
|
|
$topic-link-font-family: $forum-link-font-family !default;
|
|
|
|
$tab-font-size: $font-size !default;
|
|
$tab-line-height: $tab-font-size * 2 + 4px !default;
|
|
|
|
// Posts
|
|
$post-content-font-size: $font-size + 2px !default; // Post content
|
|
$post-content-line-height: 1.4 !default;
|
|
$post-content-font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !default;
|
|
|
|
$post-title-font-size: $font-size + 5px !default;
|
|
$post-title-line-height: 1.25 !default;
|
|
$post-title-font-family: $h2-font-family !default;
|
|
|
|
$post-signature-font-size: $font-size + 1px !default;
|
|
$post-quote-font-size: $post-content-font-size - 1px !default;
|
|
$post-code-font-size: $post-content-font-size - 1px !default;
|
|
|
|
$post-block-title-font-size: $post-quote-font-size !default; // Quote title, code title
|
|
$post-block-title-line-height: 1.6 !default;
|
|
$post-block-title-font-family: $post-content-font-family !default;
|
|
|
|
$post-profile-font-size: $font-size !default;
|
|
$post-profile-line-height: $line-height !default;
|
|
|
|
// Forms
|
|
$input-button-font-size: $font-size + 2px !default;
|
|
$input-button-font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif !default;
|
|
$bbcode-button-font-size: $font-size + 1px !default;
|
|
|
|
//
|
|
// Color palette
|
|
//
|
|
|
|
// Absolute black and white colors. Reverse them for dark styles
|
|
$black-color: #000 !default; // Main color to mix with. Black for light styles, white for dark styles
|
|
$white-color: #fff !default; // Opposite of $black-color
|
|
|
|
// Page colors
|
|
$page-background: #e8e8e8 !default; // HTML element
|
|
$content-background: #e0e0e0 !default; // Page inside content wrapper
|
|
$content-border-color: #e0e0e0 !default; // Border color for content wrapper
|
|
|
|
// Primary colors
|
|
$primary-color: #1fa67a !default; // Main color, used for links and stuff
|
|
$secondary-color: #d06d3c !default; // Secondary color, usually in red - yellow range
|
|
$overlay-color: $white-color !default; // Text on top of sections that use colorful background.
|
|
$block-background: #f4f4f4 !default; // Background of blocks
|
|
$block-background-reported: #f5ede9 !default; // Background for reported posts
|
|
|
|
// Global color values
|
|
$text-color: #141414 !default; // Text color
|
|
$bold-text-color: $black-color !default; // Text color with higher contrast to background. #000 or #fff
|
|
$post-text-color: $text-color !default; // Text inside posts
|
|
$link-color: $primary-color !default; // Links
|
|
$link-hover-color: $secondary-color !default; // Links, hover state
|
|
$muted-color: mix($black-color, $content-background, 40%) !default; // Gray color
|
|
$faint-color: mix($black-color, $content-background, 30%) !default; // Gray color
|
|
$rules-color: $secondary-color !default; // Forum rules
|
|
|
|
//
|
|
// Calculated colors
|
|
//
|
|
|
|
// Misc. DO NOT EDIT!
|
|
$light: if(lightness($black-color) < 50%, true, false) !default;
|
|
|
|
// Blocks
|
|
$block-background2: #f6f6f6 !default; // Blocks with .bg2 background color
|
|
$block-background3: #f8f8f8 !default; // Blocks with .bg3 background color - mostly UCP/MCP and posting form
|
|
|
|
$block-border: #e0e0e0 !default; // Border color for blocks
|
|
$border-radius: 3px !default; // Main border radius
|
|
$block-top-border: lighten($block-background, 10%) !default; // Top border of forums in forums list
|
|
$block-bottom-border: darken($block-background, 5%) !default; // Bottom border of forums in forums list
|
|
$block-inner-border: $block-bottom-border !default; // Border inside blocks where there is only 1 border instead of top/bottom borders
|
|
|
|
$block-title-color: desaturate($link-color, 5%) !default; // Title inside blocks, such as post title
|
|
|
|
// Tabs
|
|
$tab-color: desaturate($link-color, 20%) !default;
|
|
$tab-background: $block-background !default;
|
|
|
|
$tab-hover-color: $link-hover-color !default;
|
|
$tab-hover-background: $block-background3 !default;
|
|
|
|
$tab-selected-color: mix($text-color, $block-background3, 90%) !default;
|
|
$tab-selected-background: $block-background3 !default;
|
|
|
|
// Header
|
|
$header-bg: $content-background !default;
|
|
$header-text: $text-color !default;
|
|
$header-link: $overlay-color !default;
|
|
$header-link-hover: mix($header-link, $header-bg, 80%) !default;
|
|
|
|
// Primary navigation
|
|
$primary-nav-bg: $primary-color !default;
|
|
$primary-nav-color: $overlay-color !default;
|
|
|
|
$primary-nav-selected-bg: $block-background !default;
|
|
$primary-nav-selected-color: $primary-color !default;
|
|
|
|
$primary-nav-hover-bg: $block-background !default;
|
|
$primary-nav-hover-color: $secondary-color !default;
|
|
|
|
$primary-nav-alert-bg: hsl(0, saturation($secondary-color), lightness($secondary-color)) !default;
|
|
$primary-nav-alert-color: $overlay-color !default;
|
|
$primary-nav-alert-shadow: 1px 1px 3px rgba(0, 0, 0, .2) !default;
|
|
|
|
// Secondary navigation
|
|
$secondary-nav-hover-link: $link-hover-color !default;
|
|
|
|
// Dropdown
|
|
$dropdown-bg: $block-background !default;
|
|
$dropdown-border: $primary-color !default;
|
|
$dropdown-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5) !default;
|
|
$dropdown-shadow-up: 1px 0 5px rgba(0, 0, 0, 0.5) !default;
|
|
$dropdown-inner-border: if($light, darken($dropdown-bg, 10%), lighten($dropdown-bg, 10%)) !default;
|
|
|
|
$dropdown-heading-top: $dropdown-border !default;
|
|
$dropdown-heading-bottom: $dropdown-heading-top !default;
|
|
$dropdown-heading-color: $overlay-color !default;
|
|
$dropdown-heading-link-color: $overlay-color !default;
|
|
$dropdown-heading-link-hover-color: $overlay-color !default;
|
|
|
|
$forum-description-color: $overlay-color !default;
|
|
$forum-description-bg: mix($black-color, $block-background, 75%) !default;
|
|
|
|
// Notifications
|
|
$notification-unread-bg: mix($content-background, $rules-color, 90%) !default;
|
|
$notification-unread-color: $rules-color !default;
|
|
$notification-unread-strong-color: $black-color !default;
|
|
|
|
$dropdown-notification-bg: $block-background !default;
|
|
$dropdown-notification-hover-bg: $block-background2 !default;
|
|
$dropdown-notification-color: $link-color !default;
|
|
$dropdown-notification-strong-color: desaturate(if(lightness($dropdown-notification-color) < 50%, darken($dropdown-notification-color, 30%), lighten($dropdown-notification-color, 30%)), 100%) !default;
|
|
|
|
// Panels
|
|
$panel-title-color: desaturate(if($light, darken($primary-color, 10%), lighten($primary-color, 10%)), 25%) !default;
|
|
$panel-title-border: $block-inner-border !default;
|
|
|
|
// Content outside of blocks
|
|
$page-title-color: $primary-color !default;
|
|
$stats-title-color: $primary-color !default;
|
|
$content-top-border: lighten($content-background, 10%) !default;
|
|
$content-bottom-border: darken($content-background, 10%) !default;
|
|
$content-inner-border: $content-bottom-border !default;
|
|
|
|
// Heading section
|
|
$heading-bg: $primary-color !default;
|
|
$heading-border: $heading-bg !default;
|
|
$heading-color: $overlay-color !default;
|
|
$heading-link: $overlay-color !default;
|
|
$heading-link-hover: $overlay-color !default;
|
|
|
|
// Inputs
|
|
$input-text: $text-color !default; // Input text color
|
|
$input-bg: $white-color !default; // Input background
|
|
$input-border: #c6c6c6 !default; // Input border color
|
|
$input-hover-text: $input-text !default;
|
|
$input-hover-bg: $input-bg !default;
|
|
$input-hover-border: $secondary-color !default;
|
|
$input-focus-text: $input-text !default;
|
|
$input-focus-bg: $input-bg !default;
|
|
$input-focus-border: $primary-color !default;
|
|
$input-border-radius: 2px !default;
|
|
|
|
$search-box-border: #c6c6c6 !default; // Border for search box block
|
|
$search-box-border-header: #ccc !default; // Same as above, for search box in header
|
|
$search-box-shadow: 1px 1px 3px rgba(0, 0, 0, .1) !default; // Box-shadow for search box in header
|
|
|
|
// Buttons
|
|
$button-bg: mix($block-background, $primary-color, 10%) !default;
|
|
$button-border-radius: 3px !default;
|
|
$button-border: $button-bg !default;
|
|
$button-icon: $overlay-color !default;
|
|
$button-icon-hover: $overlay-color !default;
|
|
$button-text: $overlay-color !default;
|
|
|
|
$button-top-padding: 2px !default;
|
|
$button-side-padding: 8px !default;
|
|
$button-border-width: 1px !default;
|
|
$button-height: $button-line-height + ($button-top-padding + $button-border-width) * 2 !default;
|
|
|
|
$big-button-border-radius: 4px !default; // For big buttons and blocks like quick search
|
|
|
|
// BBCode
|
|
$bbcode-border-radius: 0px !default;
|
|
$bbcode-background: #fff !default;
|
|
$bbcode-background2: #f4f4f4 !default;
|
|
$bbcode-outer-border: if($light, darken($bbcode-background, 7%), lighten($bbcode-background, 7%)) !default;
|
|
$bbcode-inner-border: if($light, darken($bbcode-background, 5%), lighten($bbcode-background, 5%)) !default;
|
|
$bbcode-heading-text: #666 !default;
|
|
|
|
// Code colors
|
|
@function code-color($hue) {
|
|
@return hsl($hue, saturation($primary-color), lightness($primary-color));
|
|
}
|
|
$bbcode-code-color: code-color(128deg) !default;
|
|
|
|
// Do not edit few lines below
|
|
$post-side: if($profile-side == left, right, left) !default;
|
|
|
|
// Mixins
|
|
@mixin section {
|
|
background: $block-background;
|
|
border: 0 solid $block-border;
|
|
border-radius: $border-radius;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
@mixin section-forum {
|
|
@include section;
|
|
padding: 5px;
|
|
}
|
|
|
|
// Undo section mixin
|
|
@mixin section-empty {
|
|
background: transparent;
|
|
border-width: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
}
|
|
|
|
// Heading block
|
|
@mixin section-heading {
|
|
margin: -5px -10px 5px;
|
|
border-radius: max(0, $border-radius - 1px);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
background: $heading-bg;
|
|
border: 0 solid $heading-border;
|
|
padding: 5px;
|
|
text-transform: none;
|
|
font-size: $heading-font-size;
|
|
line-height: $line-height;
|
|
font-weight: normal;
|
|
color: $heading-color;
|
|
|
|
@if $border-radius > 1px {
|
|
@media (max-width: 700px) {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $heading-link;
|
|
&:hover {
|
|
color: $heading-link-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin section-heading-forum {
|
|
@include section-heading;
|
|
@if $split-forums == false {
|
|
margin: -5px -5px 0;
|
|
}
|
|
@else {
|
|
@include section-heading-separate;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@mixin section-heading-separate {
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
@mixin section-heading-cp {
|
|
background-color: transparent;
|
|
color: $stats-title-color;
|
|
background-image: none;
|
|
a {
|
|
color: $link-color;
|
|
&:hover {
|
|
color: $link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin table-heading {
|
|
background: $heading-bg;
|
|
border: 0 solid $heading-border;
|
|
color: $heading-color;
|
|
|
|
@if $border-radius > 1px {
|
|
&:first-child {
|
|
border-top-left-radius: max(0, $border-radius - 1px);
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: max(0, $border-radius - 1px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin table-heading-transparent {
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
@mixin placeholder {
|
|
&::-moz-placeholder {
|
|
@content
|
|
}
|
|
&::-webkit-input-placeholder {
|
|
@content
|
|
}
|
|
&:-ms-input-placeholder {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin tabbed-nav-layout-all {
|
|
@if ($use-wrapper) {
|
|
&, #wrap & {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin tabbed-nav-layout-alt {
|
|
@if ($use-wrapper) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin tabbed-nav-layout-default {
|
|
@if ($use-wrapper) {
|
|
#wrap & {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@content;
|
|
}
|
|
}
|