background-repeat: no-repeat, repeat;
background-size: 24px, auto;
border-radius: @wcfContainerBorderRadius;
- border-width: @wcfContainerBorderWidth;
- border-style: @wcfContainerBorderStyle;
+ border-width: 1px;
+ border-style: solid;
box-sizing: border-box;
line-height: 1.5;
margin-top: @wcfGapMedium;
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
line-height: 1.5;
color: @errorColor;
- border: @wcfContainerBorderWidth @wcfContainerBorderStyle @errorBorderColor;
+ border: 1px solid @errorBorderColor;
border-radius: @wcfContainerBorderRadius;
background-color: @errorBackgroundColor;
background-image: url('../../icon/systemError.svg');
&.sidebarOrientationLeft {
.content {
- border-left: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+ border-left: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
margin-left: 249px;
}
&.sidebarOrientationRight {
.content {
- border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+ border-right: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
margin-right: 249px;
}
/* ############## Fieldsets ############## */
fieldset {
background-color: @wcfContainerBackgroundColor;
- border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border: 1px solid @wcfContainerBorderColor;
border-radius: @wcfContainerBorderRadius;
box-sizing: border-box;
margin: @wcfGapMedium 0 0;
.container {
background-color: @wcfContainerBackgroundColor;
- border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border: 1px solid @wcfContainerBorderColor;
border-radius: @wcfContainerBorderRadius;
}
.transition(background-color, .1s);
- &:nth-child(2n) {
+ &:nth-child(even) {
background-color: @wcfContainerAccentBackgroundColor;
}
&:first-child {
- .borderRadius(@wcfContainerBorderRadius, 0);
+ border-top-left-radius: @wcfContainerBorderRadius;
+ border-top-right-radius: @wcfContainerBorderRadius;
}
&:last-child {
- .borderRadius(0, @wcfContainerBorderRadius);
+ border-bottom-left-radius: @wcfContainerBorderRadius;
+ border-bottom-right-radius: @wcfContainerBorderRadius;
}
&:hover {
- background-color: @wcfHighlightBackgroundColor;
+ background-color: @wcfContainerHoverBackgroundColor;
}
}
}
hgroup {
> h1 {
+ color: @wcfHeadlineColor;
font-size: 170%;
font-weight: bold;
- border-bottom: 1px solid @wcfColor;
+ border-bottom: 1px solid @wcfHeadlineColor;
padding: 1px 0 10px;
.textShadow(@wcfContentBackgroundColor);
a {
- color: @wcfColor;
+ color: @wcfHeadlineColor;
text-decoration: none;
}
}
.message {
background-color: @wcfHighlightBackgroundColor;
- border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border: 1px solid @wcfContainerBorderColor;
position: relative;
.boxShadow(0, 0, #eee, 7px);
.message.messageSidebarOrientationLeft {
.messageContent {
- border-left: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border-left: 1px solid @wcfContainerBorderColor;
margin: 0 0 0 211px;
}
header > .pointer {
border-color: transparent @wcfContainerBorderColor transparent transparent;
- border-style: @wcfContainerBorderStyle @wcfContainerBorderStyle @wcfContainerBorderStyle none;
+ border-style: solid solid solid none;
left: -20px;
> span {
border-color: transparent @wcfContainerBackgroundColor transparent transparent;
- border-style: @wcfContainerBorderStyle @wcfContainerBorderStyle @wcfContainerBorderStyle none;
+ border-style: solid solid solid none;
left: 1px;
}
}
.message.messageSidebarOrientationRight {
.messageContent {
- border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border-right: 1px solid @wcfContainerBorderColor;
margin: 0 211px 0 0;
}
header > .pointer {
border-color: transparent transparent transparent @wcfContainerBorderColor;
- border-style: @wcfContainerBorderStyle none @wcfContainerBorderStyle @wcfContainerBorderStyle;
+ border-style: solid none solid solid;
right: -20px;
> span {
border-color: transparent transparent transparent @wcfContainerBorderColor;
- border-style: @wcfContainerBorderStyle none @wcfContainerBorderStyle @wcfContainerBorderStyle;
+ border-style: solid none solid solid;
right: 1px;
}
}
.userRank,
.userCredits,
.userStatus {
- border-bottom: @wcfContainerBorderWidth dotted darken(@wcfContainerBorderColor, 10%);
+ border-bottom: 1px dotted darken(@wcfContainerBorderColor, 10%);
}
.messageSidebar div:last-child {
}
> div {
- border-top: @wcfContainerBorderWidth dotted @wcfContainerBorderColor;
+ border-top: 1px dotted @wcfContainerBorderColor;
display: block;
overflow: hidden;
padding: 10px 0;
.message {
.messageSignature {
- border-top: @wcfContainerBorderWidth dotted @wcfContainerBorderColor;
+ border-top: 1px dotted @wcfContainerBorderColor;
color: lighten(@wcfColor, 10%);
display: block;
margin: 10px 0 0;
}
.navigationHeader {
- border-bottom: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+ border-bottom: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
}
.navigationFooter {
- border-top: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+ border-top: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
}
a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
- color: #369;
+ color: @wcfPageLinkColor;
font-size: 110%;
font-weight: bold;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
z-index: 10;
- .linearGradient(@wcfNavigationBackgroundColor, rgba(255, 255, 255, 1), @wcfNavigationBackgroundColor);
+ .linearGradient(@wcfNavigationBackgroundColor, lighten(@wcfNavigationBackgroundColor, 20%), @wcfNavigationBackgroundColor);
+ .textShadow(@wcfNavigationBackgroundColor);
&:after {
border-bottom-left-radius: 6px;
right: -7px;
width: 7px;
- .boxShadow(-2px, 2px, lighten(@wcfHighlightBackgroundColor, 3%), 0);
+ .boxShadow(-2px, 2px, @wcfNavigationBackgroundColor, 0);
}
&:before {
position: absolute;
width: 7px;
- .boxShadow(2px, 2px, lighten(@wcfHighlightBackgroundColor, 3%), 0);
+ .boxShadow(2px, 2px, @wcfNavigationBackgroundColor, 0);
}
}
}
&:hover {
> a {
- color: rgba(255, 255, 255, 1);
+ color: @wcfPageLinkHoverColor;
}
}
}
> a {
- color: #69c;
+ color: @wcfPageLinkColor;
cursor: pointer;
display: inline-block;
font-weight: normal;
padding: 8px 20px;
position: relative;
text-decoration: none;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
white-space: nowrap;
- .transition(border, .3s, ease);
- .transition(background-color, .3s, ease);
- .transition(background-image, .3s, ease);
- .transition(color, .3s, ease);
+ .transition(~"border, background-color, background-image, color", .3s, ease);
+ .textShadow(@wcfPageBackgroundColor);
}
}
}
.tabularBox {
background-image: url(../../images/header.png);
- background-color: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
- border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ background-color: @wcfTabularBoxBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
.borderRadius();
}
.tabularBoxTitle > hgroup {
- color: @wcfPageLinkHoverColor;
+ color: @wcfTabularBoxColor;
padding: @wcfGapSmall;
h1 {
font-size: 120%;
font-weight: bold;
- .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+ .textShadow(@wcfTabularBoxBackgroundColor);
a {
- color: @wcfPageLinkHoverColor;
+ color: @wcfTabularBoxColor;
&:hover {
- color: @wcfPageLinkHoverColor;
+ color: @wcfTabularBoxColor;
text-decoration: none;
}
}
/* headline */
th {
- border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(0, 0, 0, .2);
+ border-right: 1px solid rgba(0, 0, 0, .2);
color: @wcfPageLinkColor;
font-size: 85%;
font-weight: bold;
white-space: nowrap;
.linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+ .textShadow(@wcfTabularBoxBackgroundColor);
a {
color: @wcfPageLinkColor;
/* striped */
tbody {
- tr:nth-child(odd) td {
+ tr:nth-child(even) td {
background-color: @wcfContainerAccentBackgroundColor;
}
}
tbody {
tr {
&:not(:last-child) {
- border-bottom: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(255, 255, 255, .3);
+ border-bottom: 1px solid rgba(255, 255, 255, .3);
}
&:hover {
td {
- background-color: @wcfHighlightBackgroundColor;
+ background-color: @wcfContainerHoverBackgroundColor;
}
}
td:not(:last-child) {
- border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(255, 255, 255, .3);
+ border-right: 1px solid rgba(255, 255, 255, .3);
}
}
}
height: 90px;
overflow: hidden;
+ &:last-child {
+ border-radius: 0;
+ }
+
+ &:first-child {
+ border-radius: @wcfContainerBorderRadius - 1 0 0 0;
+ }
+
&:nth-child(2n) {
float: right;
&:last-child {
- .borderRadius(0, 0, @wcfContainerBorderRadius - 1, 0);
+ border-bottom-right-radius: @wcfContainerBorderRadius - 1;
}
}
&:nth-child(2n+1) {
&:last-child {
- .borderRadius(0, 0, 0, @wcfContainerBorderRadius - 1);
+ border-bottom-left-radius: @wcfContainerBorderRadius - 1;
}
}
&:nth-last-child(2) {
- .borderRadius(0, 0, 0, @wcfContainerBorderRadius - 1);
- }
-
- &:first-child {
- .borderRadius(@wcfContainerBorderRadius - 1, 0, 0, 0);
+ border-bottom-left-radius: @wcfContainerBorderRadius - 1;
}
&:nth-child(2) {
- .borderRadius(0, @wcfContainerBorderRadius - 1, 0, 0);
+ border-top-right-radius: @wcfContainerBorderRadius - 1;
}
> div {
float: right;
input[type="search"] {
- border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border: 1px solid @wcfContainerBorderColor;
border-radius: 30px;
padding: @wcfGapTiny @wcfGapSmall;
}
@wcfPageLinkHoverColor: #fff;
@wcfDimmedColor: lighten(@wcfColor, 15%);
@wcfLabelColor: @wcfLinkColor;
+@wcfHeadlineColor: @wcfColor;
/* font */
@wcfBaseFontSize: 13px;
@wcfContainerAccentBackgroundColor: darken(@wcfContainerBackgroundColor, 3%);
@wcfContainerBorderColor: rgba(187, 204, 221, 1); //#CCC;
@wcfContainerBorderRadius: 5px;
-@wcfContainerBorderWidth: 1px;
-@wcfContainerBorderStyle: solid;
+@wcfContainerHoverBackgroundColor: @wcfHighlightBackgroundColor;
+
+/* tabular box */
+@wcfTabularBoxBackgroundColor: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
+@wcfTabularBoxColor: @wcfPageLinkHoverColor;
/* dropdown */
@wcfDropdownBackgroundColor: @wcfContentBackgroundColor;
}
&:hover {
- background-color: @wcfHighlightBackgroundColor;
+ background-color: @wcfContainerHoverBackgroundColor;
}
}
.wbbBoardNode1 {
- background-color: @wcfContainerAccentBackgroundColor;
+ background-color: @wcfContainerBackgroundColor;
}
.wbbBoardNode2 {
- background-color: @wcfContentBackgroundColor;
+ background-color: @wcfContainerAccentBackgroundColor;
}
.wbbBoardNodeTopEmpty div.wbbBoard {