border-radius: 13px;
color: @wcfPageLinkHoverColor;
display: inline-block;
- font-size: 70%;
- padding: 2px 8px;
+ font-size: @wcfSmallFontSize;
+ padding: 1px 8px 2px;
position: relative;
text-shadow: none;
white-space: nowrap;
.badgeShadow(@wcfContentBackgroundColor);
&.badgeUpdate {
- background-color: #336699;
+ background-color: #369;
color: @wcfPageLinkHoverColor;
}
.badgeShadow(@wcfPageBackgroundColor);
}
+}
+
+/* special */
+.containerHeadline h1 .badge {
+ font-size: 70%;
+ top: -1px;
+}
+
+.boxHeadline > hgroup h1 .badge {
+ font-size: 50%;
+ top: -3px;
+}
+
+.mainMenu .badge {
+ font-size: 70%;
+ top: -1px;
+}
+
+.mainMenu .active .badge {
+ font-size: 65%;
+ top: -2px;
}
\ No newline at end of file
> ul {
> li {
float: left;
- font-size: 85%;
+ font-size: @wcfSmallFontSize;
list-style: none;
max-width: 30%;
position: relative;
background-position: 12px 12px;
background-repeat: no-repeat;
padding: 10px 20px 10px 58px;
+ min-height: 28px;
header {
padding: 0 0 4px 0 !important;
/* ############## Profile Comments ############## */
-.commentList > li, .commentResponseList > li {
- position: relative;
-}
-
-.commentOptions {
- display: block;
- position: absolute;
- top: @wcfGapMedium;
- right: @wcfGapMedium;
+.commentList {
+ .comment, .commentResponse {
+ position: relative;
+ }
- li {
- float: left;
- opacity: 0;
+ .commentOptions {
+ display: block;
+ position: absolute;
+ top: @wcfGapMedium;
+ right: @wcfGapMedium;
- .transition(opacity, .1s);
-
- a {
- padding: 4px;
+ li {
+ float: left;
+ opacity: 0;
+
+ .transition(opacity, .1s);
+
+ a {
+ padding: 4px;
+ }
}
}
-}
-
-.commentResponseList .commentOptions {
- top: @wcfGapSmall;
- right: @wcfGapSmall;
-}
-
-.commentContent:hover .commentOptions li {
- opacity: 1;
-}
-
-.commentAdd small, .commentResponseAdd small {
- color: @wcfDimmedColor;
- margin-top: 3px;
-}
-
-.commentList > li > div > div > .commentContent {
- margin-bottom: @wcfGapMedium;
-}
+
+ .commentResponseList .commentOptions {
+ top: @wcfGapSmall;
+ right: @wcfGapSmall;
+ }
+
+ .commentContent:hover .commentOptions li {
+ opacity: 1;
+ }
-.commentResponseList {
- > li {
+ .commentAdd small, .commentResponseAdd small {
+ color: @wcfDimmedColor;
+ }
+
+ .commentContent:not(.commentResponseContent) {
+ margin-bottom: @wcfGapMedium;
+ }
+
+ .commentResponseList .commentResponse {
border-top: 1px solid @wcfContainerBorderColor;
padding: @wcfGapSmall;
-
- &:nth-child(2n) {
- //background-color: @wcfContainerAccentBackgroundColor;
- }
}
-}
-
-.commentResponseAdd {
- border-top: 1px solid @wcfContainerBorderColor;
- padding: 7px 7px 0;
-}
-
-.commentResponseAdd ~ .commentResponseList > li:first-child {
- margin-top: 7px;
+
+ .commentResponseAdd {
+ border-top: 1px solid @wcfContainerBorderColor;
+ padding: 7px 7px 0;
+ }
+
+ .commentResponseAdd ~ .commentResponseList .commentResponse:first-child {
+ margin-top: 7px;
+ }
}
.commentList > li:nth-child(2n) .commentResponseList > li:nth-child(2n+1) {
}
.dialogTitlebar {
- background-color: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
+ background-color: @wcfTabularBoxBackgroundColor;
background-image: url(../../images/header.png);
background-position: top left;
background-repeat: repeat-x;
.dialogTitle {
color: @wcfPageLinkHoverColor;
display: block;
- font-size: 170%;
+ font-size: @wcfHeadlineFontSize;
font-weight: bold;
.textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
.textShadow(@wcfDropdownHoverBackgroundColor);
}
}
+
+ .containerHeadline {
+ margin-bottom: 0;
+
+ h2 {
+ font-size: @wcfSmallFontSize;
+ }
+ }
}
}
dl > dd > small {
color: @wcfDimmedColor;
display: block;
- font-size: 85%;
- margin: 3px 0 7px;
-}
-
-dl > dd > p {
- margin-top: 5px;
}
/* Nested */
color: @wcfPageColor;
font-family: @wcfBaseFontFamily;
font-size: @wcfBaseFontSize;
- line-height: 1;
+ line-height: @wcfBaseLineHeight;
}
a {
}
small {
- font-size: 85%;
- margin-top: 2px;
+ font-size: @wcfSmallFontSize;
}
.invisible {
background-color: @wcfContainerHoverBackgroundColor;
}
}
+
+ > * > li {
+ padding: @wcfGapMedium @wcfGapLarge;
+ }
}
.containerHeadline {
margin-bottom: @wcfGapSmall;
> h1 {
- font-size: 120%;
+ font-size: @wcfTitleFontSize;
font-weight: bold;
- margin-bottom: 2px;
> small {
color: @wcfDimmedColor;
hgroup {
> h1 {
color: @wcfHeadlineColor;
- font-size: 170%;
+ font-family: @wcfHeadlineFontFamily;
+ font-size: @wcfHeadlineFontSize;
font-weight: bold;
border-bottom: 1px solid @wcfHeadlineColor;
- padding: 1px 0 10px;
+ padding: 1px 0 5px;
.textShadow(@wcfContentBackgroundColor);
> h1 {
border-bottom: 1px solid @wcfDimmedColor;
color: @wcfDimmedColor;
- font-size: 150%;
+ font-family: @wcfHeadlineFontFamily;
+ font-size: @wcfSubHeadlineFontSize;
font-weight: bold;
- padding: 1px 0 10px;
+ padding: 1px 0 5px;
.textShadow(@wcfContainerBackgroundColor);
}
}
.contentOptions {
- font-size: 100%;
- line-height: 1;
+ font-size: @wcfSmallFontSize;
position: relative;
nav {
.likesWidget > ul > li {
text-align: right;
- margin-top: 3px;
display: inline-block;
}
border: 1px solid @wcfContainerBorderColor;
position: relative;
- //.boxShadow(0, 0, #eee, 7px);
.borderRadius();
&:after {
.messageCounter {
float: right;
- font-size: 90%;
+ font-size: @wcfSmallFontSize;
font-weight: bold;
margin-left: @wcfGapSmall;
a {
- padding: 2px 5px;
+ padding: 1px 5px;
}
}
}
.borderRadius();
header {
- padding: 20px 20px 5px;
+ padding: 20px 20px 0;
position: relative;
time {
color: @wcfDimmedColor;
- font-size: 85%;
- margin-top: @wcfGapSmall;
+ font-size: @wcfSmallFontSize;
}
.likesDisplay {
display: inline-block;
- margin: -2px 0 -2px @wcfGapTiny;
+ margin: -2px 0 -2px 4px;
}
.messageTitle {
color: @wcfColor;
- font-size: 130%;
+ font-size: @wcfSubHeadlineFontSize;
font-weight: bold;
- padding: 13px 0 0;
+ padding: @wcfGapSmall 0 0;
.textShadow(@wcfContainerBackgroundColor);
}
}
.message {
- .messageSignature {
- border-top: 1px dotted @wcfContainerBorderColor;
+ .signature {
color: lighten(@wcfColor, 10%);
- display: block;
- margin: 10px 0 0;
- padding: 10px 0;
}
}
}
&.skip {
- padding: 2px 0 1px;
+ padding: 1px 0 1px;
}
&:not(.disabled):hover a {
}
&:not(.skip) a {
- padding: 3px 1px;
+ padding: 2px 1px;
}
&.active, &.active:hover {
border: 1px solid darken(@wcfButtonColor, 5%);
color: lighten(@wcfButtonBackgroundColor, 5%);
- padding: 3px 0;
+ padding: 2px 0;
.linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
.textShadow(#000);
/* Special -> Status Display */
.statusDisplay .pageNavigation {
- font-size: 80%;
+ font-size: @wcfSmallFontSize;
float: left;
- margin-right: 7px;
margin-top: 2px;
ul {
.statusIcons {
float: right;
+ margin-left: 7px;
li {
display: inline-block;
}
}
-
- img {
- cursor: pointer;
- }
}
\ No newline at end of file
.framedIconList {
li {
float: left;
- margin: 0 4px 4px 0;
+ margin: 0 2px 4px 0;
.framed {
display: inline-block;
/* ##### User List #### */
.simpleUserList {
h2, p, dl {
- font-size: 85%;
- }
-
- p, dl {
- margin-bottom: 2px;
+ font-size: @wcfSmallFontSize;
}
}
&:hover {
background-color: rgba(0, 0, 0, .9);
- .searchBar input[type="text"] {
+ .searchBar input[type="search"] {
background-color: darken(@wcfPageBackgroundColor, 5%);
}
}
/* font */
@wcfBaseFontSize: 13px;
@wcfBaseFontFamily: "Trebuchet MS", Arial, sans-serif;
-@wcfBaseLineHeight: 15px;
+@wcfBaseLineHeight: 1.27;
+@wcfHeadlineFontSize: 170%;
+@wcfHeadlineFontFamily: @wcfBaseFontFamily;
+@wcfSubHeadlineFontSize: 140%;
+@wcfTitleFontSize: 120%;
+@wcfSmallFontSize: 85%;
/* container */
@wcfContainerAccentBackgroundColor: darken(@wcfContainerBackgroundColor, 3%);
}
.wbbStats {
- font-size: 85%;
+ font-size: @wcfSmallFontSize;
left: 50%;
margin-top: @wcfGapSmall;
position: absolute;
dt {
float: right;
- padding-bottom: 4px;
width: 40%;
&:after {
dd {
float: left;
margin: 0;
- padding-bottom: 4px;
text-align: right;
width: 58%;
}
h1 a {
display: inline-block;
overflow: hidden;
- padding-bottom: 2px; /* prevents letters from being cut */
text-overflow: ellipsis;
width: 98%;
white-space: nowrap;
}
h2 {
- font-size: 85%;
+ font-size: @wcfSmallFontSize;
time {
color: @wcfDimmedColor;
}
.wbbSubBoards {
- margin-top: @wcfGapSmall;
-
li {
display: inline-block;
}
.wbbBoardDescription {
font-size: 90%;
- padding-top: @wcfGapTiny;
}
.wbbBoardContainer {
.borderRadius(@wcfContainerBorderRadius);
}
- .new > div > hgroup > h1 {
- font-weight: bold;
+ .wbbBoard > div > hgroup > h1 {
+ font-weight: normal;
}
- .wbbBoard > div > hgroup > h1 {
- font-size: 120%;
+ .new > div > hgroup > h1, .wbbSubBoards li.new a {
+ font-weight: bold;
}
.wbbCollapsibleCategory .collapsibleButton {
.wbbThreadList {
.wbbLastPost h2 {
color: @wcfDimmedColor;
- font-size: 85%;
- margin-top: 2px;
+ font-size: @wcfSmallFontSize;
}
.columnLastPost {
}
}
+ .columnTopic .labelList {
+ float: right;
+ padding-left: 7px;
+ }
+
+ .columnTopic .wbbTopicLink {
+ font-size: @wcfTitleFontSize;
+ }
+
tr.new .columnTopic > h1 {
font-weight: bold;
}
color: @wcfLinkColor;
display: inline-block;
font-weight: bold;
- font-size: 85%;
+ font-size: @wcfSmallFontSize;
left: -220px;
top: 30px;
padding: 6px 10px;
}
time {
- font-size: 85%;
+ font-size: @wcfSmallFontSize;
font-style: italic;
}