Viên ngọc phương Đông

ruạṛ

//
// 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:							false !default;	// true or false
$logo-block-padding:					0 20px 0 0 !default;
$responsive-hide-logo:					false !default;	// Hide logo on mobile devices. true or false

$show-forum-title:						true !default;	// true or false

$profile-width:							150px !default;
$profile-side:							left !default;	// left or right
$post-margin:							($profile-width + 10px) !default;

$use-wrapper:							true !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 + 13px !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 !default;

$heading-font-size:						$font-size + 4px !default;
$panel-heading-font-size:				$font-size + 6px !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:							#fff !default;		// Main color to mix with. Black for light styles, white for dark styles
$white-color:							#000 !default;		// Opposite of $black-color

// Page colors
$page-background:						#181818 !default;	// HTML element
$content-background:					#181818 !default;	// Page inside content wrapper
$content-border-color:					#181818 !default;	// Border color for content wrapper

// Primary colors
$primary-color:							#4398ef !default;	// Main color, used for links and stuff
$secondary-color:						#f04343 !default;	// Secondary color, usually in red - yellow range
$overlay-color:							#fff !default;	// Text on top of sections that use colorful background.
$block-background:						#383838 !default;	// Background of blocks
$block-background-reported:				#403030 !default;	// Background for reported posts

// Global color values
$text-color:							#bbb !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, 60%) !default;	// Gray color
$faint-color:							mix($black-color, $content-background, 30%) !default;	// Gray color
$rules-color:							lighten($secondary-color, 10%) !default;	// Forum rules

//
// Calculated colors
//

// Misc. DO NOT EDIT!
$light:									if(lightness($black-color) < 50%, true, false) !default;

// Blocks
$block-background2:						#343434 !default;	// Blocks with .bg2 background color
$block-background3:						#303030 !default;	// Blocks with .bg3 background color - mostly UCP/MCP and posting form

$block-border:							#202020 !default;	// Border color for blocks
$border-radius:							5px !default;		// Main border radius
$block-top-border:						lighten($block-background, 5%) !default;	// Top border of forums in forums list
$block-bottom-border:					darken($block-background, 10%) !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:							#fff !default;
$header-link:							$overlay-color !default;
$header-link-hover:						mix($header-link, $header-bg, 80%) !default;

// Primary navigation
$primary-nav-bg:						desaturate(darken($primary-color, 35%), 25%) !default;
$primary-nav-color:						$overlay-color !default;

$primary-nav-selected-bg:				mix($primary-nav-bg, $content-background, 20%) !default;
$primary-nav-selected-color:			$primary-color !default;

$primary-nav-hover-bg:					desaturate(darken($primary-color, 25%), 20%) !default;
$primary-nav-hover-color:				$overlay-color !default;

$primary-nav-alert-bg:					$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:						desaturate(darken($primary-color, 25%), 20%) !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:				#fff !default;
$forum-description-bg:					darken(desaturate($primary-color, 25%), 10%) !default;
$forum-description-gradient-start:		rgba(255, 255, 255, .1) !default;
$forum-description-gradient-end:		rgba(255, 255, 255, 0) !default;

// Notifications
$notification-unread-bg:				mix($secondary-color, $block-background, 7%) !default;
$notification-unread-color:				$secondary-color !default;
$notification-unread-strong-color:		#fff !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:					transparent !default;

// Content outside of blocks
$page-title-color:						$primary-color !default;
$stats-title-color:						desaturate(darken($primary-color, 10%), 25%) !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:							desaturate(darken($primary-color, 35%), 25%) !default;
$heading-border:						$heading-bg !default;
$heading-color:							$overlay-color !default;
$heading-link:							$overlay-color !default;
$heading-link-hover:					mix($heading-link, $heading-bg, 80%) !default;

// Inputs
$input-text:							$text-color !default;	// Input text color
$input-bg:								$white-color !default;	// Input background
$input-border:							#444 !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:						$bold-text-color !default;
$input-focus-bg:						$input-bg !default;
$input-focus-border:					$primary-color !default;
$input-border-radius:					2px !default;

$search-box-border:						desaturate(darken($primary-color, 35%), 25%) !default;	// Border for search box block
$search-box-border-header:				desaturate(darken($primary-color, 35%), 25%) !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:								desaturate(darken($primary-color, 35%), 25%) !default;
$button-border-radius:					3px !default;
$button-border:							$button-bg !default;
$button-icon:							#d0d0d0 !default;
$button-icon-hover:						#fff !default;
$button-text:							$text-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:					3px !default;
$bbcode-background:						#181818 !default;
$bbcode-background2:					#282828 !default;
$bbcode-outer-border:					if($light, darken($bbcode-background, 7%), lighten($bbcode-background, 4%)) !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;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000, endColorstr=#00000000);
}

@mixin section-forum {
	@include section;
	padding: 4px;
}

// Undo section mixin
@mixin section-empty {
	background: transparent;
	border-width: 0;
	border-radius: 0;
	box-shadow: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	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;
	border: 0 solid $heading-border;
	padding: 6px;
	text-transform: none;
	font-size: $heading-font-size;
	line-height: $line-height;
	font-weight: normal;
	color: $heading-color;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);

background: $heading-bg url('./images/category.png') 0 0 repeat-x;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, 0) 100%), url('./images/category.png');
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, 0) 100%), url('./images/category.png');
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#18FFFFFF, endColorstr=#00FFFFFF);

@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: max(0, $border-radius - 1px);
}

@mixin section-heading-cp {
	background-color: transparent;
	color: $stats-title-color;
	box-shadow: none;
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	a {
		color: $link-color;
		&:hover {
			color: $link-hover-color;
		}
	}
}

@mixin table-heading {
	background: $heading-bg;
	border: 0 solid $heading-border;
	color: $heading-color;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, 0) 100%);
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30FFFFFF, endColorstr=#00FFFFFF);
	box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.2);

@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;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	box-shadow: none;
	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;
	}
}