+++ /dev/null
-/* ### blue temptation special css ### */
-/* background-image for body, tabular boxes and dialogs */
-body, .tabularBox, .dialogTitlebar {
- background-image: url(@{style_image_path}blueTemptationHeader.png);
- background-repeat: repeat-x;
-}
-
-/* main menu */
-.mainMenu > ul {
- background-color: rgba(0, 0, 0, .4);
-
- > li {
- > a {
- border-width: 0 !important;
-
- .transition(color, .3s, ease);
- .textShadow(@wcfPageBackgroundColor);
-
- &:hover {
- color: @wcfPageLinkHoverColor;
- }
- }
-
- &.active > a {
- .linearGradient(@wcfNavigationHeaderBackgroundColor, lighten(@wcfNavigationHeaderBackgroundColor, 20%), @wcfNavigationHeaderBackgroundColor);
- }
-
- &:hover {
- color: @wcfMainMenuActiveColor;
- }
- }
-}
-
-@media all and (min-width: 801px) {
- .mainMenu {
- margin: @wcfGapMedium 9px 0;
-
- > ul {
- border-radius: 5px 5px 0 0;
-
- > li.active > a {
- border-radius: 5px 5px 0 0;
- position: relative;
-
- &::after {
- border-bottom-left-radius: 6px;
- border-width: 0 0 1px 1px;
- bottom: 0;
- content: "";
- height: 7px;
- position: absolute;
- right: -7px;
- width: 7px;
-
- .boxShadow(-2px, 2px, @wcfNavigationHeaderBackgroundColor, 0);
- }
-
- &::before {
- border-bottom-right-radius: 6px;
- border-width: 0 1px 1px 0;
- bottom: 0;
- content: "";
- height: 7px;
- left: -7px;
- position: absolute;
- width: 7px;
-
- .boxShadow(2px, 2px, @wcfNavigationHeaderBackgroundColor, 0);
- }
- }
- }
- }
-}
-
-/* navigation header / footer */
-@media all and (min-width: 801px) {
- .navigation {
- border-color: darken(@wcfSidebarBackgroundColor, 8%);
-
- > ul {
- &.navigationIcons {
- > li {
- > a:hover {
- background-color: @wcfSidebarBackgroundColor;
- }
- }
- }
-
- &.navigationItems {
- border-color: darken(@wcfNavigationHeaderBackgroundColor, 20%);
- }
- }
- }
-
- .navigationHeader {
- border-top-width: 0;
- border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
- }
-
- .navigationFooter {
- border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
- }
-}
-
-/* sidebar */
-@media all and (min-width: 801px) {
- .sidebar > div > fieldset:not(:last-child), .sidebar > div > div:not(:last-child) {
- border-color: darken(@wcfSidebarBackgroundColor, 8%);
- }
-
- .sidebar {
- fieldset {
- > nav {
- ul {
- > li {
- &.active {
- .boxShadow(0, 0, rgba(0, 0, 0, 0.1), 2px);
- }
-
- > a {
- .transition(color, .1s);
- }
- }
- }
- }
- }
- }
-
- #main {
- > div {
- > div {
- > .sidebar {
- > span > .collapsibleButton {
- border-width: 1px 0 1px 1px;
- border-style: solid;
- border-color: darken(@wcfSidebarBackgroundColor, 8%);
- clip: rect(-5px 25px 31px -5px);
-
- .boxShadow(0, 0, rgba(0, 0, 0, 0.1), 2px);
- }
- }
- }
- }
-
- &.sidebarOrientationLeft {
- .sidebar {
- border-right: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
-
- > div {
- width: 301px;
-
- fieldset {
- width: 301px;
- }
- }
- }
- }
-
- &.sidebarOrientationRight {
- .sidebar {
- border-left: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
- }
- }
- }
-}
-
-/* ### buttons ### */
-/* default values */
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-.button {
- font-weight: bold;
-}
-
-/* normal state */
-.button,
-input[type='reset']:not([disabled]),
-input[type='submit']:not([disabled]),
-input[type='button']:not([disabled]),
-button:not([disabled]) {
- border-color: lighten(@wcfButtonBorderColor, 7%) @wcfButtonBorderColor darken(@wcfButtonBorderColor, 7%);
-
- .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
- .linearGradient(lighten(@wcfButtonBackgroundColor, 5%), lighten(@wcfButtonBackgroundColor, 10%), lighten(@wcfButtonBackgroundColor, 5%) 2px, @wcfButtonBackgroundColor);
- .transition(~"background-color, background-image, border, box-shadow, color", .1s);
-
- .icon {
- .transition(color, .1s);
- }
-}
-
-/* primary */
-.button.buttonPrimary,
-input[type='submit']:not([disabled]),
-input[type='button']:not([disabled]).buttonPrimary,
-button:not([disabled]).buttonPrimary {
- border-color: lighten(@wcfButtonPrimaryBorderColor, 7%) @wcfButtonPrimaryBorderColor darken(@wcfButtonPrimaryBorderColor, 7%);
-
- .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonPrimaryBorderColor);
- .linearGradient(lighten(@wcfButtonPrimaryBackgroundColor, 5%), lighten(@wcfButtonPrimaryBackgroundColor, 10%), lighten(@wcfButtonPrimaryBackgroundColor, 5%) 2px, @wcfButtonPrimaryBackgroundColor);
-}
-
-/* hover */
-.button:hover,
-input[type='reset']:not([disabled]):hover,
-input[type='submit']:not([disabled]):hover,
-input[type='button']:not([disabled]):hover,
-button:not([disabled]):hover,
-.button.buttonPrimary:hover,
-input[type='submit']:not([disabled]):hover,
-input[type='button']:not([disabled]).buttonPrimary:hover,
-button:not([disabled]).buttonPrimary:hover {
- border-color: lighten(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor darken(@wcfButtonHoverBorderColor, 7%);
- color: @wcfButtonHoverColor;
-
- .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonHoverBorderColor);
- .linearGradient(lighten(@wcfButtonHoverBackgroundColor, 5%), lighten(@wcfButtonHoverBackgroundColor, 10%), lighten(@wcfButtonHoverBackgroundColor, 5%) 2px, @wcfButtonHoverBackgroundColor);
-
- .icon {
- color: @wcfButtonHoverColor;
- }
-}
-
-/* active (permanently) */
-.button.active,
-input[type='button'].active,
-button.active,
-.button.active:hover,
-input[type='button'].active:hover,
-button.active:hover {
- border-color: darken(@wcfButtonColor, 5%);
- color: lighten(@wcfButtonBackgroundColor, 5%);
-
- .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
- .linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
- .textShadow(darken(@wcfButtonColor, 10%));
-
- .icon {
- color: lighten(@wcfButtonBackgroundColor, 5%);
-
- .textShadow(darken(@wcfButtonColor, 10%));
- }
-}
-
-
-
-
-
-/* bread crumbs */
-@media only screen and (min-width: 801px) {
- .breadcrumbs {
- background-color: @wcfContentBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- border-radius: 6px;
-
- > ul {
- > li {
- padding-right: 0;
-
- .transition(max-width, .2s);
-
- &:hover {
- > a {
- background-color: @wcfContainerAccentBackgroundColor;
- position: relative;
- z-index: 10;
- }
-
- > .pointer > span {
- border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
- }
- }
-
- > .pointer {
- border-color: transparent transparent transparent @wcfContainerBorderColor;
- border-style: inset none inset solid;
- border-width: 15px;
- display: block;
- height: 0;
- padding: 0;
- right: -15px;
- top: -3px;
- width: 0;
- z-index: 20;
-
- > span {
- border-color: transparent transparent transparent @wcfContentBackgroundColor;
- border-style: inset none inset solid;
- border-width: 15px;
- display: block;
- height: 0;
- left: -16px;
- overflow: hidden;
- position: absolute;
- text-indent: -9000px;
- top: -15px;
- width: 0;
-
- .transition(border-color, .2s);
- }
- }
-
- > a {
- padding-left: 20px;
-
- .transition(background-color, .2s);
- }
-
- &:first-child > a {
- border-radius: @wcfContainerBorderRadius - 2 0 0 @wcfContainerBorderRadius - 2;
- padding-left: 9px;
- }
- }
-
- &:hover {
- > li {
- max-width: 100%;
- }
- }
- }
- }
-}
-
-/* user panel */
-.userPanel {
- border-bottom: 1px solid rgba(0, 0, 0, .1);
-
- .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-
- > div {
- > .searchBar {
- > form input[type="search"] {
- &:focus, &:active {
- .boxShadow(0, 0, transparent, 0);
- }
- }
- }
- }
-}
-@media only screen and (max-width: 800px) {
- .userPanel {
- background-color: darken(@wcfPageBackgroundColor, 10%);
-
- > div {
- > .searchBar {
- background-color: darken(@wcfPageBackgroundColor, 20%);
- }
- }
- }
-}
-
-
-/* ### border radius ### */
-@media all and (min-width: 801px) {
- .container,
- .message,
- .dropdownMenu,
- .attachmentThumbnail,
- .attachmentThumbnail > img,
- .attachmentThumbnail > a > img,
- .box48 .attachmentTinyThumbnail {
- border-radius: @wcfContainerBorderRadius;
- }
-
- .containerList {
- > li {
- &:first-child {
- border-top-left-radius: @wcfContainerBorderRadius - 1;
- border-top-right-radius: @wcfContainerBorderRadius - 1;
- }
-
- &:last-child {
- border-bottom-left-radius: @wcfContainerBorderRadius - 1;
- border-bottom-right-radius: @wcfContainerBorderRadius - 1;
- }
- }
- }
-
- .message.messageSidebarOrientationLeft .messageContent {
- border-radius: 0 @wcfContainerBorderRadius - 1 @wcfContainerBorderRadius - 1 0;
- }
-
- .message.messageSidebarOrientationRight .messageContent {
- border-radius: @wcfContainerBorderRadius - 1 0 0 @wcfContainerBorderRadius - 1;
- }
-
- .message.messageReduced .messageContent {
- border-radius: @wcfContainerBorderRadius - 1;
- }
-
- .messageOptions {
- nav {
- ul.smallButtons > li {
- &:first-child a.button {
- border-top-left-radius: 14px;
- }
- }
- }
- }
-
- .message.messageSidebarOrientationLeft,
- .message.messageReduced {
- .messageOptions {
- nav {
- ul.smallButtons > li {
- &:last-child a.button {
- border-bottom-right-radius: @wcfContainerBorderRadius;
- }
- }
- }
- }
- }
-
- .tabularBox {
- border-radius: @wcfContainerBorderRadius;
- }
-
- .tabularBox:not(.tabularBoxTitle) .table {
- thead tr:first-child th {
- &:first-child {
- border-top-left-radius: @wcfContainerBorderRadius - 2;
- }
-
- &:last-child {
- border-top-right-radius: @wcfContainerBorderRadius - 2;
- }
- }
- }
-
- .tabularBox .table {
- tbody tr:last-child td {
- &:first-child {
- border-bottom-left-radius: @wcfContainerBorderRadius - 2;
- }
-
- &:last-child {
- border-bottom-right-radius: @wcfContainerBorderRadius - 2;
- }
- }
- }
-
- .container > .table {
- > tbody > tr {
- &:first-child > td {
- &:first-child {
- border-top-left-radius: @wcfContainerBorderRadius - 2;
- }
-
- &:last-child {
- border-top-right-radius: @wcfContainerBorderRadius - 2;
- }
- }
-
- &:last-child > td {
- &:first-child {
- border-bottom-left-radius: @wcfContainerBorderRadius - 2;
- }
-
- &:last-child {
- border-bottom-right-radius: @wcfContainerBorderRadius - 2;
- }
- }
- }
- }
-
- .attachmentThumbnail > div {
- border-radius: 0 0 @wcfContainerBorderRadius - 2 @wcfContainerBorderRadius - 2;
- }
-
- .wbbBoardList:not(.wbbBoardListReduced) {
- > li.wbbDepth1 > div {
- border-top-left-radius: @wcfContainerBorderRadius - 2;
- border-top-right-radius: @wcfContainerBorderRadius - 2;
- }
-
- li.wbbLastBoxElement > div {
- border-bottom-left-radius: @wcfContainerBorderRadius - 2;
- border-bottom-right-radius: @wcfContainerBorderRadius - 2;
- }
-
- .tabularBox:not(.wbbDepth1) {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- }
-
- .wbbBoardListReduced .tabularBox {
- border-radius: 0;
- }
-
- .tabMenuContainer > .menu {
- border-radius: @wcfContainerBorderRadius - 1 @wcfContainerBorderRadius - 1 0 0;
- }
-
- .pollContainer {
- > .formSubmit {
- border-radius: 0 0 5px 5px;
- }
- }
-
- .codeBox > div {
- border-radius: @wcfContainerBorderRadius 0 0 @wcfContainerBorderRadius;
- }
-}
-
-@media screen and (min-width: 1240px) {
- .containerList.doubleColumned {
- > li {
- &:last-child {
- border-radius: 0;
- }
-
- &:first-child {
- border-radius: @wcfContainerBorderRadius - 1 0 0 0;
- }
-
- &:nth-child(2) {
- border-top-right-radius: @wcfContainerBorderRadius - 1;
- }
-
- &:nth-child(even) {
- &:last-child {
- border-bottom-right-radius: @wcfContainerBorderRadius - 1;
- }
- }
-
- &:nth-child(odd) {
- &:last-child, &:nth-last-child(2) {
- border-bottom-left-radius: @wcfContainerBorderRadius - 1;
- }
- }
- }
- }
-}
-
-/* tab menus */
-@media all and (min-width: 801px) {
- .tabMenu {
- padding: 0 10px;
-
- > ul {
- border-top-left-radius: @wcfContainerBorderRadius;
- border-top-right-radius: @wcfContainerBorderRadius;
-
- > li {
- &.ui-state-active {
- > a {
- border-top-right-radius: @wcfContainerBorderRadius;
- border-top-left-radius: @wcfContainerBorderRadius;
-
- &::before {
- border: 1px solid @wcfContainerBorderColor;
- border-bottom-right-radius: 6px;
- border-width: 0 1px 1px 0;
- bottom: -1px;
- clip: rect(0, 6px, 6px, 0);
- content: " ";
- height: 5px;
- left: -6px;
- position: absolute;
- width: 5px;
-
- .boxShadow(2px, 1px, @wcfContainerBackgroundColor, 0);
- }
-
- &::after {
- border: 1px solid @wcfContainerBorderColor;
- border-bottom-left-radius: 6px;
- border-width: 0 0 1px 1px;
- bottom: -1px;
- clip: rect(0, 6px, 6px, 0);
- content: " ";
- height: 5px;
- position: absolute;
- right: -6px;
- width: 5px;
-
- .boxShadow(-2px, 1px, @wcfContainerBackgroundColor, 0);
- }
- }
- }
- }
- }
- }
-}
-
-/* ### inputs ### */
-/* normal state */
-input[type='text'],
-input[type='search'],
-input[type='date'],
-input[type='datetime'],
-input[type='email'],
-input[type='number'],
-input[type='url'],
-input[type='password'],
-textarea,
-select[multiple] {
- border-color: darken(@wcfInputBorderColor, 20%) @wcfInputBorderColor lighten(@wcfInputBorderColor, 10%);
-
- .boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
- .transition(~"background-color, border, box-shadow", .2s);
-}
-
-/* active / focus */
-input[type='text']:active,
-input[type='search']:active,
-input[type='date']:active,
-input[type='datetime']:active,
-input[type='email']:active,
-input[type='number']:active,
-input[type='url']:active,
-input[type='password']:active,
-textarea:active,
-select[multiple]:active,
-
-input[type='text']:focus,
-input[type='search']:focus,
-input[type='date']:focus,
-input[type='datetime']:focus,
-input[type='email']:focus,
-input[type='number']:focus,
-input[type='url']:focus,
-input[type='password']:focus,
-textarea:focus,
-select[multiple]:focus {
- .boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-}
-
-/* error state */
-.formError input[type='text'],
-.formError input[type='search'],
-.formError input[type='email'],
-.formError input[type='number'],
-.formError input[type='url'],
-.formError input[type='password'],
-.formError textarea {
- background-color: @wcfInputBackgroundColor;
- border-color: @wcfErrorBackgroundColor;
-
- .boxShadowNative(~"0 0 5px" fade(@wcfErrorBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-
- &:hover, &:focus {
- background-color: @wcfInputHoverBackgroundColor;
- }
-}
-
-/* success state */
-.formSuccess input[type='text'],
-.formSuccess input[type='search'],
-.formSuccess input[type='email'],
-.formSuccess input[type='number'],
-.formSuccess input[type='url'],
-.formSuccess input[type='password'],
-.formSuccess textarea {
- background-color: @wcfInputBackgroundColor;
- border-color: @wcfSuccessBackgroundColor;
-
- .boxShadowNative(~"0 0 5px" fade(@wcfSuccessBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-
- &:hover, &:focus {
- background-color: @wcfInputHoverBackgroundColor;
- }
-}
-
-
-/* alerts */
-.info,
-.error,
-.success,
-.warning {
- border-radius: 7px;
- border-width: 0;
-
- .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
-}
-
-.info {
- .linearGradient(@wcfInfoBackgroundColor, @wcfInfoBackgroundColor, @wcfInfoBorderColor);
-}
-
-.error {
- .linearGradient(@wcfErrorBackgroundColor, @wcfErrorBackgroundColor, @wcfErrorBorderColor);
-}
-
-.success {
- .linearGradient(@wcfSuccessBackgroundColor, @wcfSuccessBackgroundColor, @wcfSuccessBorderColor);
-}
-
-.warning {
- .linearGradient(@wcfWarningBackgroundColor, @wcfWarningBackgroundColor, @wcfWarningBorderColor);
-}
-
-.innerError {
- border-radius: 7px;
- border-width: 0;
-
- .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
- .linearGradient(@wcfErrorBackgroundColor, @wcfErrorBackgroundColor, @wcfErrorBorderColor);
- .textShadow(@wcfErrorBackgroundColor);
-}
-
-
-/* ### more eye candy ;-) ### */
-@media only screen and (min-width: 801px) {
- .message .messageSidebar {
- /* avatar reflection */
- .userAvatar > a > img {
- -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(rgba(0, 0, 0, .3)));
- }
- }
-}
-
-.message.dividers {
- .userCredits {
- border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%) !important;
-
- .boxShadowInset(0, 1px, @wcfContentBackgroundColor, 0);
- }
-}
-
-.footerContent {
- .textShadow(@wcfPageBackgroundColor);
-}
-
-/* framed last post */
-@media only screen and (min-width: 801px) {
- .wbbBoardList {
- .wbbLastPost {
- top: @wcfGapSmall;
-
- > div {
- background-color: @wcfContentBackgroundColor;
- border-radius: @wcfContainerBorderRadius;
- padding: @wcfGapSmall;
- margin-right: @wcfGapSmall;
-
- .boxShadowNative(~"inset 0 1px 1px rgba(0, 0, 0, .1)");
- }
- }
- }
-}
-
-/* message group starter */
-@media only screen and (min-width: 801px) {
- .messageList {
- .messageGroupStarter {
- > .message.messageSidebarOrientationLeft::before {
- border-top-left-radius: @wcfContainerBorderRadius;
- content: "";
- display: block;
- height: 128px;
- left: 0;
- position: absolute;
- top: 0;
- width: 128px;
-
- .linearGradientNative(~"135deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%");
- }
-
- > .message.messageSidebarOrientationRight::before {
- border-top-right-radius: @wcfContainerBorderRadius;
- content: "";
- display: block;
- height: 128px;
- right: 0;
- position: absolute;
- top: 0;
- width: 128px;
-
- .linearGradientNative(~"225deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%");
- }
- }
- }
-
- // rtl fix
- html[dir='rtl'] {
- .messageList {
- .messageGroupStarter {
- > .message.messageSidebarOrientationLeft::before {
- .linearGradientNative(~"225deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%");
- }
-
- > .message.messageSidebarOrientationRight::before {
- .linearGradientNative(~"135deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%");
- }
- }
- }
- }
-}
-
-/* attachments */
-.attachmentThumbnail {
- .boxShadow(0, 1px, rgba(0, 0, 0, 0.2), 1px);
- .transition(box-shadow, .1s);
-
- &:hover {
- .boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
- }
-}
-
-/* box-shadows */
-.container,
-div.tabularBox,
-.wbbBoardList > li.tabularBox,
-.message {
- .boxShadow(0, 1px, rgba(0, 0, 0, .1), 2px);
-}
-
-.container .container,
-.message .container {
- .boxShadowNative(~"none");
-}
-
-/* dropdown transitions */
-.dropdown .dropdownMenu li {
- .transition(background-color, .1s);
-
- > a {
- .transition(color, .1s);
- }
-}
-
-/* table head transitions */
-.table {
- /* headline */
- th {
- > a {
- .transition(~"background-color, color, box-shadow", .2s);
- }
- }
-}
-
-/* user title */
-.userTitleBadge {
- .boxShadowNative(~"0 1px 0 rgba(255, 255, 255, 1), inset 0 1px 0 rgba(0, 0, 0, .2)");
-}
-
-/* dashboard boxes */
-.dashboardBoxSidebarButton {
- > div {
- > .button {
- -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(rgba(0, 0, 0, .4)));
- }
- }
-}
+++ /dev/null
-/**
- * Blue Temptation
- * Style for WoltLab Community Framework 2
- *
- * @copyright 2001-2015 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- */
-
-@wcfLinkColor: rgba(51, 102, 153, 1);
-@wcfLinkHoverColor: rgba(0, 51, 102, 1);
-@wcfContainerBackgroundColor: rgba(252, 253, 254, 1);
-@wcfContainerAccentBackgroundColor: rgba(241, 245, 250, 1);
-@wcfContainerHoverBackgroundColor: rgba(216, 231, 245, 1);
-@wcfContainerBorderColor: rgba(204, 204, 204, 1);
-@wcfContainerBorderRadius: 6px;
-@wcfTabularBoxBackgroundColor: rgba(51, 102, 153, 1);
-@wcfUserPanelBackgroundColor: rgba(0, 0, 0, 0.5);
-@wcfButtonBackgroundColor: rgba(227, 227, 227, 1);
-@wcfButtonBorderColor: rgba(187, 187, 187, 1);
-@wcfButtonColor: rgba(153, 153, 153, 1);
-@wcfButtonPrimaryBackgroundColor: rgba(216, 231, 245, 1);
-@wcfButtonPrimaryBorderColor: rgba(102, 153, 204, 1);
-@wcfButtonHoverBackgroundColor: rgba(255, 229, 200, 1);
-@wcfButtonHoverBorderColor: rgba(255, 170, 34, 1);
-@wcfInputHoverBackgroundColor: rgba(255, 249, 244, 1);
-@wcfInputHoverBorderColor: rgba(255, 170, 34, 1);
-@wcfLayoutFluidGap: 21px;
-@wcfPageBackgroundColor: rgba(37, 76, 115, 1);
-@wcfPageColor: rgba(255, 255, 255, 1);
-@wcfPageLinkColor: rgba(72, 142, 212, 1);
-@wcfPageLinkHoverColor: rgba(255, 255, 255, 1);
-@wcfDimmedColor: rgba(128, 128, 128, 1);
-@wcfLabelColor: @wcfLinkColor;
-@wcfDropdownHoverBackgroundColor: @wcfSidebarBackgroundColor;
-@wcfWarningColor: rgba(0, 0, 0, 1);
-@wcfWarningBackgroundColor: rgba(239, 203, 80, 1);
-@wcfWarningBorderColor: rgba(233, 191, 43, 1);
-@wcfErrorColor: rgba(255, 255, 255, 1);
-@wcfErrorBackgroundColor: rgba(201, 81, 69, 1);
-@wcfErrorBorderColor: rgba(145, 61, 55, 1);
-@wcfSuccessColor: rgba(255, 255, 255, 1);
-@wcfSuccessBackgroundColor: rgba(116, 164, 70, 1);
-@wcfSuccessBorderColor: rgba(77, 119, 48, 1);
-@wcfInfoColor: rgba(255, 255, 255, 1);
-@wcfInfoBackgroundColor: rgba(70, 116, 164, 1);
-@wcfInfoBorderColor: rgba(48, 77, 119, 1);
-@wcfNavigationHeaderBackgroundColor: lighten(@wcfSidebarBackgroundColor, 3%);
-@wcfNavigationFooterBackgroundColor: lighten(@wcfSidebarBackgroundColor, 3%);
-@wcfUserPanelHoverBackgroundColor: rgba(0, 0, 0, 0.4);