+++ /dev/null
-.aclList,
-.aclPermissionList {
- margin-top: 0;
- min-height: 100px;
-
- > li {
- display: block;
- padding: @wcfGapTiny;
-
- &:first-child {
- border-top-left-radius: @wcfContainerBorderRadius;
- border-top-right-radius: @wcfContainerBorderRadius;
- }
-
- &:last-child:not(:first-child) {
- border-bottom-left-radius: @wcfContainerBorderRadius;
- border-bottom-right-radius: @wcfContainerBorderRadius;
- }
- }
-}
-
-.aclList {
- margin-bottom: @wcfGapSmall;
-
- > li {
- cursor: pointer;
-
- &:hover,
- &.active:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- }
-
- &.active {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- > span:last-child {
- float: right;
- margin-right: @wcfGapSmall;
- }
- }
-}
-
-.aclPermissionList {
- margin-top: @wcfGapSmall;
- min-height: 200px;
- text-align: right;
-
- > li {
- &:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- }
-
- &.aclCategory {
- background-color: @wcfContainerHoverBackgroundColor;
- padding: @wcfGapTiny @wcfGapSmall+@wcfGapTiny;
- text-align: left;
- }
-
- &.aclFullAccess {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- > span {
- float: left;
- padding-left: @wcfGapSmall;
- }
-
- > label {
- cursor: pointer;
- margin: 0 @wcfGapSmall;
- padding: 0 @wcfGapLarge;
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-/* Code Box */
-.codeBox {
- background-color: @wcfContentBackgroundColor;
- clear: both;
- margin: (@wcfGapSmall + @wcfGapTiny) 0;
-
- > div {
- padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium @wcfGapMedium;
-
- .boxShadowNative(~"inset 4em 0 0 " @wcfContainerBackgroundColor ~", inset 4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
-
- > div {
- margin: 0 0 @wcfGapSmall 3.4em;
-
- > h3 {
- font-size: @wcfTitleFontSize;
- font-weight: bold;
- padding-left: @wcfGapSmall;
- position: relative;
-
- > span.icon {
- position: absolute;
- right: 0;
- top: 3px;
- }
- }
- }
-
- > ol {
- list-style-type: decimal;
- margin-left: 3.4em;
-
- > li {
- font-family: Consolas, 'Courier New', monospace;
- margin: 0;
- padding-left: @wcfGapSmall;
- position: relative;
- white-space: pre-wrap;
- word-break: break-all;
- word-wrap: break-word;
-
- > .lineAnchor {
- display: block;
- height: 1.4em;
- left: -3.6em;
- position: absolute;
- top: 0;
- width: 3.0em;
- }
-
- &:target {
- background-color: @wcfHighlightBackgroundColor;
- }
- }
- }
- }
-
- &.minimized {
- max-height: 200px;
- overflow: hidden;
- position: relative;
-
- > .codeBoxExpand {
- background-color: @wcfContainerBackgroundColor;
- border-top: 1px solid @wcfContainerBorderColor;
- bottom: 0;
- cursor: pointer;
- display: block;
- height: 20px;
- left: 0;
- padding: 4px;
- position: absolute;
- right: 0;
- text-align: center;
-
- .boxShadow(0, -10px, @wcfContainerBackgroundColor, 25px, 5px);
- }
- }
-}
-
-// rtl fix
-html[dir='rtl'] {
- .codeBox {
- > div {
- .boxShadowNative(~"inset -4em 0 0 " @wcfContainerBackgroundColor ~", inset -4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .codeBox {
- > div {
- padding: @wcfGapSmall;
-
- .boxShadow(0, 0, transparent);
-
- > div {
- margin-left: 0;
-
- > h3 {
- padding-left: 0;
- }
- }
-
- > ol {
- list-style-type: none;
- margin-left: 0;
- overflow: auto;
-
- > li {
- padding-left: 0;
- white-space: pre;
- word-wrap: normal;
- }
- }
- }
- }
-}
-
-/* ############## Code Styles ############## */
-
-/* -- -- -- Code Box -- -- -- */
-
-.codeBox .hlQuotes {
- color: red;
-}
-
-.codeBox .hlComments,
-.codeBox .hlOperators {
- color: green;
-}
-
-.codeBox .hlKeywords1 {
- color: blue;
-}
-
-.codeBox .hlKeywords2 {
- color: darkred;
-}
-
-.codeBox .hlKeywords3 {
- color: darkviolet;
-}
-
-.codeBox .hlKeywords4 {
- color: darkgoldenrod;
-}
-
-.codeBox .hlKeywords5 {
- color: crimson;
-}
-
-.codeBox .hlNumbers {
- color: darkorange;
-}
-
-/* -- -- -- Code Highlighters -- -- -- */
-
-/* DIFF */
-
-.diffHighlighter .hlComments {
- color: darkviolet;
-}
-
-.diffHighlighter .hlRemoved {
- color: red;
-}
-
-.diffHighlighter .hlAdded {
- color: green;
-}
-
-/* PHP */
-
-.phpHighlighter .hlKeywords2 {
- color: green;
-}
-
-.phpHighlighter .hlComments {
- color: darkgoldenrod;
-}
-
-/* CSS */
-
-.cssHighlighter .hlComments {
- color: #236e26;
-}
-
-.cssHighlighter .hlColors {
- color: #751116;
-}
-
-.cssHighlighter .hlNumbers,
-.sqlHighlighter .hlNumbers {
- color: #1906fd;
-}
-
-.cssHighlighter .hlKeywords1 {
- color: #87154f;
-}
-
-.cssHighlighter .hlKeywords2 {
- color: #994509;
-}
-
-.cssHighlighter .hlKeywords3,
-.cssHighlighter .hlKeywords4 {
- color: inherit;
-}
-
-/* SQL */
-
-.sqlHighlighter .hlKeywords1 {
- color: #663821;
-}
-
-.sqlHighlighter .hlKeywords2 {
- color: #871550;
-}
-
-/* Quote Box */
-.quoteBox {
- min-height: 28px;
- position: relative;
-
- .clearfix;
-
- &.quoteBoxSimple {
- clear: both;
- margin: (@wcfGapSmall + @wcfGapTiny) 0;
- padding-left: 54px;
- }
-
- &.container {
- background-color: @wcfContentBackgroundColor;
- }
-
- > header {
- padding-bottom: @wcfGapTiny;
- border-bottom: 1px dotted @wcfContainerBorderColor;
- margin-bottom: @wcfGapSmall;
-
- .userSelectNone;
-
- > h3 {
- font-weight: bold;
- }
- }
-
- /* quote icon */
- > div:first-of-type {
- &::before {
- content: "\f10d";
- color: @wcfDimmedColor;
- font-family: FontAwesome;
- font-size: 28px;
- position: absolute;
- left: @wcfGapMedium;
- top: @wcfGapSmall;
- }
- }
-
- /* nested quotes */
- .quoteBox {
- margin-left: 0;
- padding-left: @wcfGapLarge;
- min-height: 0;
-
- > div:first-of-type {
- &::before {
- display: none;
- }
- }
- }
-}
-
-.quoteBoxAuthor {
- clear: both;
- margin: (@wcfGapSmall + @wcfGapTiny) 0;
- position: relative;
-
- .clearfix;
-
- > .quoteAuthorAvatar {
- float: left;
-
- &::before,
- &::after {
- border-style: inset solid inset none;
- border-width: 15px;
- content: "";
- display: block;
- height: 0;
- position: absolute;
- top: 15px;
- width: 0;
- }
-
- &::before {
- border-color: transparent @wcfContainerBorderColor transparent transparent;
- left: 75px;
- z-index: 100;
- }
-
- &::after {
- border-color: transparent @wcfContentBackgroundColor transparent transparent;
- left: 76px;
- z-index: 101;
- }
-
- + .quoteBox {
- margin-left: 90px;
- padding-left: @wcfGapLarge;
-
- /* hide quote icon */
- > div:first-of-type {
- &::before {
- display: none;
- }
- }
- }
-
- > a {
- display: inline-block;
- }
- }
-
- /* nested quotes */
- .quoteBoxAuthor {
- > .quoteAuthorAvatar {
- display: none;
-
- + .quoteBox {
- margin-left: 0;
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .quoteBoxAuthor {
- > .quoteAuthorAvatar {
- display: none;
- }
- }
-
- .quoteBox {
- margin-left: 0 !important;
- padding-left: 28px !important;
-
- > div:first-of-type {
- &::before {
- display: block !important;
- font-size: 14px;
- left: @wcfGapSmall;
- }
- }
-
- /* nested quotes */
- .quoteBox {
- padding-left: @wcfGapSmall !important;
-
- > div:first-of-type {
- &::before {
- display: none !important;
- }
- }
- }
- }
-}
-
-/* spoiler box */
-.spoilerBox {
- background-color: @wcfContentBackgroundColor;
- clear: both;
- font-size: 1rem;
- padding-bottom: @wcfGapSmall;
-
- > header {
- margin-bottom: @wcfGapSmall;
-
- .userSelectNone;
- }
-
- > div {
- overflow: hidden;
- padding-bottom: @wcfGapSmall;
- }
-}
-
-/* inline code tag */
-kbd,
-.inlineCode {
- background-color: @wcfContentBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- border-radius: 3px;
- display: inline-block;
- font-family: Consolas, 'Courier New', monospace;
- margin: 0 2px;
- padding: 0 5px;
- word-break: break-all;
- word-wrap: break-word;
-}
-
-/* smiley list */
-ul.smileyList > li {
- display: inline;
-}
-
-/* bbcode table */
-.bbcodeTable {
- display: inline-block;
-}
-
-@media screen and (max-width: 800px) {
- .bbcodeTable {
- display: block;
- }
-}
-
-/* media provider */
-/* thanks for this generic class name usage, github */
-.gist .highlight {
- background-color: inherit;
-}
+++ /dev/null
-.collapsibleBbcode {
- > .toggleButton {
- background-color: @wcfContainerBackgroundColor;
- border-top: 1px solid @wcfContainerBorderColor;
- cursor: pointer;
- display: block;
- height: 20px;
- padding: 4px;
- text-align: center;
- }
-
- &.collapsed {
- max-height: 200px;
- overflow: hidden;
- position: relative;
-
- > .toggleButton {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
-
- .boxShadow(0, -10px, @wcfContainerBackgroundColor, 25px, 5px);
- }
- }
-}
+++ /dev/null
-.codeBox {
- background-color: @wcfContentBackgroundColor;
- border: 1px solid rgb(79, 129, 189);
- border-width: 1px 0;
- clear: both;
- margin: 20px 0;
-
- &:first-child {
- margin-top: 0;
- }
-
- > div {
- padding: 10px;
-
- .boxShadowNative(~"inset 4em 0 0 " @wcfContainerBackgroundColor ~", inset 4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
-
- > div {
- margin: 0 0 10px 3.4em;
-
- > h3 {
- .wcfFontLarge;
-
- /*font-size: @wcfTitleFontSize;
- font-weight: bold;*/
- padding-left: @wcfGapSmall;
- position: relative;
-
- > .icon {
- position: absolute;
- right: 0;
- top: 3px;
- }
- }
- }
-
- > ol {
- list-style-type: decimal;
- margin-left: 3.4em;
-
- > li {
- font-family: Consolas, 'Courier New', monospace;
- margin: 0;
- padding-left: @wcfGapSmall;
- position: relative;
- white-space: pre-wrap;
- word-break: break-all;
- word-wrap: break-word;
-
- > .lineAnchor {
- display: block;
- height: 1.4em;
- left: -3.6em;
- position: absolute;
- top: 0;
- width: 3.0em;
- }
-
- &:target {
- background-color: @wcfHighlightBackgroundColor;
- }
- }
- }
- }
-}
-
-// rtl fix
-html[dir='rtl'] {
- .codeBox {
- > div {
- .boxShadowNative(~"inset -4em 0 0 " @wcfContainerBackgroundColor ~", inset -4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .codeBox {
- > div {
- padding: @wcfGapSmall;
-
- .boxShadow(0, 0, transparent);
-
- > div {
- margin-left: 0;
-
- > h3 {
- padding-left: 0;
- }
- }
-
- > ol {
- list-style-type: none;
- margin-left: 0;
- overflow: auto;
-
- > li {
- padding-left: 0;
- white-space: pre;
- word-wrap: normal;
- }
- }
- }
- }
-}
+++ /dev/null
-kbd {
- border: 1px solid rgb(238, 238, 238);
- border-radius: 3px;
- padding: 3px 5px;
-}
+++ /dev/null
-/* ### globals ### */
-html, body {
- font-size: @wcfBaseFontSize;
-}
-
-body {
- background-color: @wcfPageBackgroundColor;
- color: @wcfColor;
- font-family: @wcfBaseFontFamily;
- line-height: @wcfBaseLineHeight;
- position: relative;
- word-wrap: break-word;
-}
-
-small {
- font-size: @wcfSmallFontSize;
-}
-
-img {
- vertical-align: middle;
-
- &.disabled {
- opacity: .3;
- }
-}
-
-a {
- color: @wcfLinkColor;
- cursor: pointer;
- text-decoration: none;
-
- &:hover {
- color: @wcfLinkHoverColor;
- text-decoration: underline;
- }
-
- &.externalURL::after {
- content: "\f08e";
- display: inline-block;
- font-family: FontAwesome !important;
- font-size: 14px !important;
- font-weight: normal !important;
- font-style: normal !important;
- margin-left: @wcfGapTiny;
- vertical-align: -1px;
- }
-}
-
-pre {
- word-wrap: normal;
- white-space: pre;
-}
-
-.footerContent, .logo {
- color: @wcfPageColor;
-
- a {
- color: @wcfPageLinkColor;
-
- &:hover {
- color: @wcfPageLinkHoverColor;
- }
- }
-}
-
-.nativeList {
- margin: 1em 0;
- margin-left: 40px;
-
- ul,
- ol {
- margin-bottom: 0;
- margin-top: 0;
- }
-
- li {
- margin: @wcfGapSmall 0;
- }
-}
-
-ul.nativeList {
- list-style-type: disc;
-}
-ol.nativeList {
- list-style-type: decimal;
-}
-
-.htmlContent {
- p {
- margin: 1em 0;
- }
-
- h1 {
- font-size: @wcfSubHeadlineFontSize;
- }
-
- h2 {
- font-size: @wcfTitleFontSize;
- }
-
- h1, h2, h3, h4, h5, h6 {
- font-weight: bold;
- margin: 0.5em 0;
- }
-
- ul, ol {
- .nativeList;
- }
-
- ul {
- list-style-type: disc;
- }
-
- ol {
- list-style-type: decimal;
- }
-}
-
-/* workaroud for broken date display on rtl pages in chrome */
-.datetime {
- display: inline-block;
-}
-
-/* hide broken reCaptcha iframe */
-body > iframe[src="about:blank"] {
- display:none;
-}
-
-::selection {
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
- color: #300;
- background-color: rgba(255, 170, 34, .7);
-}
-
-.invisible {
- display: none;
-}
-
-.marginTopLarge {
- margin-top: @wcfGapLarge;
-}
-
-.marginTop,
-.marginMedium {
- margin-top: @wcfGapMedium;
-}
-
-.marginTopSmall {
- margin-top: @wcfGapSmall;
-}
-
-.marginTopTiny {
- margin-top: @wcfGapTiny;
-}
-
-.textLeft {
- text-align: left;
-}
-
-.textCenter,
-.center {
- text-align: center;
-}
-
-.textRight {
- text-align: right;
-}
-
-.textJustify {
- text-align: justify;
-}
-
-.pointer {
- cursor: pointer;
-}
-
-.dimmed {
- color: @wcfDimmedColor;
-}
-
-.monospace {
- font-family: Consolas, 'Courier New', monospace !important;
-}
-
-.iconFlag {
- background-color: @wcfContentBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- padding: 1px;
-
- height: 15px;
- width: 24px;
-}
-
-.framed {
- > canvas,
- > img,
- > .icon {
- background-color: @wcfContentBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- padding: 1px;
- }
-}
-
-.highlight {
- background-color: @wcfHighlightBackgroundColor;
-}
-
-.grayscale {
- //filter: url(../images/grayscale-filter.svg#grayscale);
- // Firefox does not allow SVG filters to be retrieved from a different domain, embed it directly (Firefox 35+ seems to support the native property!)
- filter: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22grayscale%22%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200%22%2F%3E%3C%2Ffilter%3E%3C%2Fsvg%3E#grayscale);
- filter: gray;
- -webkit-filter: grayscale(1);
-}
-
-/* fixes fieldset overflow issues */
-/* webkit */
-fieldset {
- min-width: 0;
-}
-/* firefox */
-@-moz-document url-prefix() {
- fieldset {
- display: table-column;
- }
-}
-
-.elementPointer {
- position: absolute;
- top: 0;
- transform: translateY(-100%);
-
- &.center {
- left: 50%;
- transform: translateX(-50%) translateY(-100%);
- }
-
- &.left {
- left: 4px;
- }
-
- &.right {
- right: 4px;
- }
-
- &.flipVertical {
- bottom: 0;
- top: auto;
- transform: translateY(100%);
-
- &.center {
- transform: translateX(-50%) translateY(100%);
- }
- }
-}
-
-/* balloon tooltips */
-.balloonTooltip {
- background-color: @wcfTooltipBackgroundColor;
- border-radius: 6px;
- color: @wcfTooltipColor;
- font-size: @wcfSmallFontSize;
- max-width: 300px;
- opacity: 0;
- padding: 5px 10px 7px;
- position: absolute;
- visibility: hidden;
- z-index: 800;
-
- transition: visibility 0s linear .2s, opacity .2s linear .2s;
-
- > .elementPointer {
- border-color: @wcfTooltipBackgroundColor transparent;
- border-style: solid;
- border-width: 0 5px 5px;
-
- &.flipVertical {
- border-width: 5px 5px 0;
- }
- }
-
- .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-
- &.active {
- opacity: 1;
- visibility: visible;
-
- transition-delay: 0s;
- }
-}
-
-/* ### badges ### */
-/* default values */
-.badge {
- background-color: @wcfColor;
- border-radius: 9px;
- color: @wcfContentBackgroundColor;
- display: inline-block;
- font-size: @wcfSmallFontSize;
- font-weight: bold;
- padding: 1px 6px 1px;
- position: relative;
- text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */
- vertical-align: middle;
- white-space: nowrap;
- word-wrap: normal;
-
- &.label {
- border-radius: 4px;
- font-weight: normal;
- }
-
- /* colors */
- &.badgeUpdate {
- background-color: @wcfTabularBoxBackgroundColor;
- color: @wcfTabularBoxColor;
- }
-
- &.badgeInverse {
- background-color: @wcfTabularBoxColor;
- color: @wcfTabularBoxBackgroundColor;
- }
-
- /* default label colors */
- &.green {
- background-color: rgba(0, 153, 0, 1);
- color: rgba(238, 255, 238, 1);
- }
-
- &.red {
- background-color: rgba(204, 0, 0, 1);
- color: rgba(255, 238, 238, 1);
- }
-
- &.black {
- background-color: #333;
- color: #fff;
- }
-
- &.brown {
- background-color: #c63;
- color: #fff;
- }
-
- &.orange {
- background-color: #f90;
- color: #fff;
- }
-
- &.yellow {
- background-color: #ff0;
- color: #333;
- }
-
- &.blue {
- background-color: #369;
- color: #fff;
- }
-
- &.purple {
- background-color: #c0f;
- color: #fff;
- }
-
- &.pink {
- background-color: #f0c;
- color: #fff;
- }
-}
-
-a.badge:hover {
- color: @wcfContentBackgroundColor;
- text-decoration: none;
-
- &.black {
- background-color: #000;
- }
-
- &.brown {
- background-color: #930;
- }
-
- &.red {
- background-color: #900;
- }
-
- &.orange {
- background-color: #f60;
- }
-
- &.yellow {
- background-color: #cc0;
- }
-
- &.green {
- background-color: #060;
- }
-
- &.blue {
- background-color: #036;
- }
-
- &.purple {
- background-color: #90c;
- }
-
- &.pink {
- background-color: #c09;
- }
-}
-
-/* the CSS below can be detected through JavaScript and works better than matchMedia-API (not supported by IE9) */
-@media only screen and (max-width: 800px) {
- html {
- caption-side: bottom;
- }
-
- body {
- caption-side: top;
- }
-}
-
-@media only screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 2) {
- // Preserve HTML font-size when iPhone orientation changes from portrait to landscape
- html {
- -webkit-text-size-adjust: 100%;
- }
-
- // Fixes zoom when iPhone orientation changes from portrait to landscape
- /*
-
- disabled this for now, it seems to cause some weird zoom-in bugs on iOS 9 and everything works w/o it too
-
- html.iOS,
- html.iOS > body {
- width: 100%;
- overflow: hidden;
- }
- */
-}
\ No newline at end of file
+++ /dev/null
-.googleMap {
- height: 400px;
-}
-
-.sidebarGoogleMap {
- height: 250px;
-}
-
-// CSS code taken from map type controls
-.googleMapsCustomControlContainer {
- cursor: pointer !important;
- margin-top: 5px;
-
- .googleMapsCustomControl {
- .userSelectNone;
-
- text-align: center;
- position: relative;
- color: rgb(86, 86, 86);
- font-size: 11px !important;
- background-color: rgb(255, 255, 255);
- padding: 1px 6px;
- border-radius: 3px;
- background-clip: padding-box;
- border: 1px solid rgba(0, 0, 0, 0.14902);
- box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
- min-width: 29px;
-
- &:hover {
- background-color: rgb(235, 235, 235);
- color: rgb(0, 0, 0);
- }
-
- &.active {
- color: rgb(0, 0, 0);
- font-weight: 500;
- }
- }
-}
-
-.googleMapsUseLocationSuggestionLink {
- font-size: @wcfSmallFontSize;
-}
+++ /dev/null
-#lbOverlay {
- background-color: #000;
- bottom: 0;
- left: 0;
- position: fixed;
- right: 0;
- top: 0;
- z-index: 399;
-}
-
-#lbPrevLink,
-#lbNextLink {
- display: block;
- overflow: hidden;
- position: absolute;
- top: 0;
- width: 50%;
- outline: none;
-
- > span {
- background-color: #fff;
- display: none;
- padding: @wcfGapSmall;
- position: absolute;
- top: 20%;
- }
-
- &:hover > span {
- .boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
- }
-}
-
-#lbPrevLink {
- left: 0;
-
- > span {
- border-radius: 0 30px 30px 0;
- left: 0;
- padding-right: @wcfGapMedium;
- }
-}
-
-#lbNextLink {
- right: 0;
-
- > span {
- border-radius: 30px 0 0 30px;
- padding-left: @wcfGapMedium;
- right: 0;
- }
-}
-
-#lbEnlarge,
-#lbCloseLink {
- cursor: pointer;
- display: block;
- float: right;
- padding-right: @wcfGapSmall;
- outline: none;
-}
-
-#lbCenter, #lbBottomContainer {
- background-color: #fff;
- overflow: hidden;
- position: absolute;
- z-index: 400;
-}
-
-#lbCenter > .icon-spinner {
- left: 50%;
- margin: -21px 0 0 -21px;
- position: absolute;
- top: 50%;
-}
-
-#lbImage {
- background-repeat: no-repeat;
- background-size: cover;
- border: 10px solid #fff;
- left: 0;
- position: absolute;
- top: 0;
-
- &:hover {
- #lbNextLink,
- #lbPrevLink {
- > span {
- display: block;
- }
- }
- }
-}
-
-#lbBottom {
- border: 10px solid #fff;
- border-top-style: none;
- color: #666;
-}
-
-#lbCaption, #lbNumber {
- margin-right: 71px;
-}
-
-#lbCaption {
- font-weight: bold;
-}
-
-/* ImageViewer for WCF */
-@wcfImageViewerBorderColor: rgba(51, 51, 51, 1);
-@wcfImageViewerFontColor: rgba(211, 211, 211, 1);
-
-.wcfImageViewer {
- background-color: rgba(0, 0, 0, 1);
- bottom: 0;
- display: none;
- left: 0;
- opacity: 0;
- position: fixed;
- right: 0;
- top: 0;
- z-index: 399;
-
- .icon {
- color: rgba(102, 102, 102, 1);
-
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
- }
-
- &.open {
- display: block;
- opacity: 1;
- }
-
- &.maximized:not(.wcfImageViewerMobile) {
- > header {
- top: -100px;
- }
-
- > div {
- bottom: 0;
- border-color: fade(@wcfImageViewerBorderColor, 0%);
- top: 0;
- }
-
- > footer {
- bottom: -100px;
- }
- }
-
- &.wcfImageViewerStatic > header > div {
- > h1,
- > h2,
- > h3 {
- margin-left: 0 !important;
- }
- }
-
- &.wcfImageViewerMobile {
- > header,
- > footer {
- background-color: rgba(0, 0, 0, 1);
- opacity: 1;
- position: absolute;
- visibility: visible;
- z-index: 402;
- }
-
- &.maximized {
- > header,
- > footer {
- opacity: 0;
- visibility: hidden;
-
- transition: visibility 0s linear .5s, opacity .5s linear;
- }
-
- > div > ul > li.pointer {
- opacity: 0;
- }
- }
-
- > div {
- bottom: 0;
- top: 0;
-
- > ul {
- > li {
- background-color: rgba(224, 224, 224, 1);
- border-radius: 30px;
- margin-top: -24px;
- opacity: 0;
- position: absolute;
- top: 50%;
-
- .transition(opacity, .3s);
-
- &.pointer {
- opacity: 1;
- }
-
- &.wcfImageViewerSlideshowButtonPrevious {
- left: 10px;
-
- > span {
- left: -3px;
- position: relative;
- top: 2px;
- }
- }
-
- &.wcfImageViewerSlideshowButtonNext {
- right: 10px;
-
- > span {
- position: relative;
- right: -1px;
- top: 2px;
- }
- }
-
- &.wcfImageViewerSlideshowButtonFull {
- bottom: 80px;
- left: 50%;
- top: auto;
-
- transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- -webkit-transform: translateX(-50%);
-
- > span {
- font-size: 32px;
- left: 2px;
- position: relative;
- top: 10px;
- }
- }
-
- &.wcfImageViewerSlideshowButtonToggle,
- &.wcfImageViewerSlideshowButtonEnlarge,
- {
- display: none;
- }
- }
- }
- }
-
- > footer {
- > .wcfImageViewerButtonPrevious,
- > .wcfImageViewerButtonNext {
- display: none;
- }
-
- > div {
- margin: 0;
- }
- }
- }
-
- > header,
- > div,
- > footer {
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- left: 0;
- position: fixed;
- right: 0;
- z-index: 400;
- }
-
- > header {
- height: 100px;
- overflow: hidden;
- padding: 1rem;
- top: 0;
-
- > div {
- > h1,
- > h2,
- > h3 {
- color: @wcfImageViewerFontColor;
- margin-left: 80px !important;
-
- > a {
- color: @wcfImageViewerFontColor;
- }
- }
-
- > h1 {
- font-size: 1.75rem;
- }
-
- > h2 {
- font-size: 1.25rem;
- }
-
- > h3 {
- color: @wcfImageViewerFontColor;
- font-size: .85rem;
- margin-top: .25rem;
- }
-
- > a > img {
- height: 64px;
- width: 64px;
- }
- }
-
- > .wcfImageViewerButtonClose {
- opacity: .6;
- position: absolute;
- right: 26px;
- top: 26px;
-
- .transition(opacity, .3s);
-
- &:hover {
- opacity: 1;
- }
- }
- }
-
- > div {
- background-color: rgba(0, 0, 0, 1);
- border-bottom: 1px solid @wcfImageViewerBorderColor;
- border-top: 1px solid @wcfImageViewerBorderColor;
- bottom: 100px;
- top: 100px;
- z-index: 401;
-
- .transition(~"top, bottom, border-color", .3s);
-
- &.loading:before {
- content: @spinner;
- margin: -24px 0 0 -24px;
- left: 50%;
- position: absolute;
- top: 50%;
-
- color: @wcfColor;
- display: inline-block;
- font-family: FontAwesome;
- font-weight: normal !important;
- font-style: normal !important;
- line-height: 1em;
- text-align: center;
-
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
-
- .textShadow(@wcfContentBackgroundColor);
-
- .icon48;
- .icon-spinner;
- }
-
- > img {
- opacity: 0;
- position: absolute;
- top: 50%;
- z-index: 10;
-
- .transition(opacity, .75s);
-
- &.animateTransformation {
- transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s;
- -webkit-transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s;
- }
-
- &.active {
- opacity: 1;
- z-index: 20;
- }
- }
- }
-
- &:not(.wcfImageViewerMobile) {
- > header {
- .transition(top, .3s);
- }
-
- > footer {
- .transition(bottom, .3s);
- }
-
- > div {
- cursor: pointer;
-
- > img,
- > ul {
- cursor: default;
- }
-
- > ul {
- background-color: rgba(0, 0, 0, 1);
- border: 1px solid @wcfImageViewerBorderColor;
- border-bottom-width: 0;
- border-radius: 5px 5px 0 0;
- bottom: 0;
- display: inline-block;
- left: 50%;
- margin-left: -122px;
- opacity: .4;
- position: absolute;
- z-index: 30;
-
- .transition(opacity, .5s);
-
- &:hover {
- opacity: 1;
- }
-
- > li {
- display: inline-block;
- opacity: .6;
-
- .transition(opacity, .5s);
-
- &.pointer > span.icon {
- cursor: pointer;
- }
-
- &.active,
- &.pointer:hover {
- opacity: 1;
- }
-
- &.wcfImageViewerSlideshowButtonToggle > span,
- &.wcfImageViewerSlideshowButtonEnlarge > span,
- &.wcfImageViewerSlideshowButtonFull > span {
- font-size: 28px;
-
- &:before {
- left: 2px;
- position: relative;
- top: 9px;
- }
- }
-
- &.wcfImageViewerSlideshowButtonEnlarge,
- &.wcfImageViewerSlideshowButtonFull {
- border-left: 1px solid @wcfImageViewerBorderColor;
- box-sizing: border-box;
- }
-
- > span {
- vertical-align: middle;
- }
- }
- }
- }
- }
-
- > footer {
- bottom: 0;
- height: 100px;
- padding: 10px;
-
- &:hover > div > ul > li > img {
- filter: none;
- -webkit-filter: none;
- }
-
- > span {
- bottom: 0;
- font-size: 48px;
- padding-top: 26px;
- opacity: 0;
- position: absolute;
- top: 0;
- width: 30px;
- z-index: 2;
-
- .transition(opacity, .5s);
-
- &.pointer {
- opacity: .6;
-
- &:hover {
- opacity: 1;
- }
- }
-
- &.wcfImageViewerButtonPrevious {
- left: 5px;
- }
-
- &.wcfImageViewerButtonNext {
- right: 5px;
- }
- }
-
- > div {
- height: 80px;
- margin: 0 35px;
- overflow: hidden;
- white-space: nowrap;
-
- > ul {
- font-size: 0;
- height: 80px;
- z-index: 1;
-
- transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s;
- -webkit-transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s;
-
- > li {
- display: inline-block;
- height: 80px;
- opacity: .6;
- position: relative;
- width: 80px;
-
- .transition(opacity, .5s);
-
- &.active,
- &:hover {
- opacity: 1;
- }
-
- &:not(:last-child) {
- margin-right: 10px;
- }
-
- &.active > img {
- filter: none;
- -webkit-filter: none;
- }
-
- &.loading{
- &:before {
- content: @spinner;
- margin: -16px 0 0 -16px;
- left: 50%;
- position: absolute;
- top: 50%;
- z-index: -1;
-
- color: @wcfColor;
- display: inline-block;
- font-family: FontAwesome;
- font-weight: normal !important;
- font-style: normal !important;
- line-height: 1em;
- text-align: center;
-
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
-
- .textShadow(@wcfContentBackgroundColor);
-
- .icon32;
- .icon-spinner;
- }
-
- > img {
- opacity: 0;
- }
- }
-
- > img {
- height: 80px;
- opacity: 1;
- width: 80px;
-
- .grayscale;
- transition: filter .5s, opacity 1s;
- -webkit-transition: -webkit-filter .5s, opacity 1s;
- }
- }
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .wcfImageViewer {
- > header {
- height: 80px;
-
- > .wcfImageViewerButtonClose {
- right: 16px;
- top: 16px;
- }
- }
-
- > footer {
- height: 80px;
-
- > div {
- height: 60px;
-
- > ul {
- height: 60px;
-
- > li {
- height: 60px;
- }
- }
- }
- }
- }
-}
+++ /dev/null
-/* #### Labels #### */
-/* label list */
-.labelList {
- font-size: 0;
- margin-bottom: -@wcfGapTiny;
-
- > li {
- display: inline-block;
- margin-bottom: @wcfGapTiny;
-
- &:not(:last-child) {
- margin-right: @wcfGapTiny;
- }
- }
-}
-
-.boxHeadline.labeledHeadline {
- font-size: 0;
-
- > ul {
- display: inline-block;
- font-size: 1rem;
-
- &:not(:empty) {
- margin-right: @wcfGapSmall;
- }
- }
-
- > ul.statusIcons {
- > li {
- display: inline-block;
- }
- }
-
- > ul.labelList {
- position: relative;
- top: -4px;
- }
-}
-
-.boxHeadline.labeledHeadline > h1,
-.boxSubHeadline.labeledHeadline > h2 {
- display: inline-block;
- margin-right: @wcfGapSmall;
-}
-
-/* ACP label list */
-#labelList {
- .clearfix();
-
- li {
- float: left;
- margin-right: 1%;
- width: 30%;
-
- &.labelCustomClass {
- position: relative;
-
- input[type='radio'] {
- left: 0;
- position: absolute;
- top: 0;
- }
-
- span {
- display: block;
- margin-left: 24px;
- }
- }
- }
-}
-
-.labelChooser > .dropdownToggle > span {
- cursor: pointer;
-}
\ No newline at end of file
+++ /dev/null
-#pollOptionContainer .sortableList {
- padding: @wcfGapSmall 0;
-
- .sortableNode {
- margin-top: @wcfGapSmall;
-
- .sortableButtonContainer > img {
- cursor: pointer;
- margin-right: @wcfGapMedium;
- }
- }
-}
-
-.pollContainer {
- float: left;
- margin: 0 @wcfGapMedium @wcfGapSmall 0;
- max-width: 50%;
- min-width: 300px;
-
- > .formSubmit {
- background-color: @wcfContainerAccentBackgroundColor;
- border-top: 1px solid @wcfContainerBorderColor;
- margin: @wcfGapMedium -@wcfGapLarge -@wcfGapMedium -@wcfGapLarge;
- padding: 10px 0;
- }
-}
-
-.pollInnerContainer {
- > p:first-of-type {
- margin-top: @wcfGapSmall;
- }
-}
-
-.pollResultList {
- li {
- margin-bottom: 8px;
- padding: 1px 0;
- position: relative;
- z-index: 0;
-
- .transition(background-color, .1s);
-
- &:last-child {
- margin-bottom: 0px;
- }
-
- &:hover {
- background-color: @wcfContainerAccentBackgroundColor;
- border-radius: 0 5px 5px 0;
- }
-
- .pollMeter {
- background-color: @wcfContainerHoverBackgroundColor;
- border-radius: 0 5px 5px 0;
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- z-index: -1;
- }
-
- .caption {
- color: @wcfLinkColor;
- padding: 2px 0;
-
- .optionName {
- display: block;
- padding: 0 3.5em 0 @wcfGapSmall;
- }
-
- .relativeVotes {
- position: absolute;
- right: 7px;
- top: 3px;
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .pollContainer > .formSubmit {
- margin: @wcfGapMedium -@wcfGapMedium -@wcfGapSmall -@wcfGapMedium;
- }
-}
\ No newline at end of file
+++ /dev/null
-.slideshowContainer {
- overflow: hidden;
- position: relative;
-
- > ul:not(.slideshowButtonList) > li:not(:first-child) {
- display: none;
- }
-
- > .slideshowItemList {
- position: absolute;
-
- .transition(left, .8s, ease-out);
-
- > li.slideshowItem {
- display: block;
- float: left;
- overflow: hidden;
- position: absolute;
- top: 0;
-
- /* fixes font rendering bug */
- -webkit-transform: translate3d(0, 0, 0);
- }
- }
-
- > .slideshowButtonList {
- position: absolute;
- right: 0;
- top: 0;
-
- > li {
- display: inline-block;
-
- > a > .icon {
- color: @wcfContainerHoverBackgroundColor;
-
- &.active {
- color: @wcfLinkColor;
- }
- }
-
- &:hover > a > .icon {
- color: @wcfLinkHoverColor;
- }
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-.tagList {
- > li {
- display: inline-block;
- }
-}
-
-.tag {
- border-radius: 0 4px 4px 0;
- font-weight: normal;
- height: 13px;
- margin-left: 6px;
- padding-bottom: 2px;
- padding-left: 10px;
-
- &::before {
- border-color: transparent @wcfColor transparent transparent;
- border-style: inset solid inset inset;
- border-width: 8px 8px 8px 0;
- clip: rect(auto auto auto 2px);
- content: "";
- height: 0;
- left: -8px;
- position: absolute;
- top: 0;
- width: 0;
- }
-
- &::after {
- background: @wcfContentBackgroundColor;
- border-radius: 2px;
- content: "";
- height: 4px;
- left: -2px;
- position: absolute;
- top: 6px;
- width: 4px;
-
- .boxShadow(0, -1px, rgba(0, 0, 0, .2), 2px);
- }
-
- &:hover {
- background-color: @wcfTabularBoxBackgroundColor;
- color: @wcfTabularBoxColor;
-
- &::before {
- border-right-color: @wcfTabularBoxBackgroundColor;
- }
- }
-}
-
-.editableItemList li.tag {
- margin-bottom: 11px;
- margin-left: 10px;
-}
-
-.editableItemList li.tag:first-child {
- margin-left: 6px;
-}
+++ /dev/null
-#pollOptionContainer .sortableList {
- padding: @wcfGapSmall 0;
-
- .sortableNode {
- margin-top: @wcfGapSmall;
-
- .sortableButtonContainer > img {
- cursor: pointer;
- margin-right: @wcfGapMedium;
- }
- }
-}
-
-.pollContainer {
- float: left;
- margin: 0 15px 10px 0;
- max-width: 50%;
- min-width: 300px;
-
- > .formSubmit {
- background-color: @wcfContainerAccentBackgroundColor;
- border-top: 1px solid @wcfContainerBorderColor;
- margin-top: 20px;
- padding: 10px 0;
- }
-}
-
-.pollInnerContainer {
- > dl {
- flex-wrap: wrap;
- }
-
- > p:first-of-type {
- margin-top: @wcfGapSmall;
- }
-}
-
-.pollResultList {
- li {
- margin-bottom: 8px;
- padding: 1px 0;
- position: relative;
- z-index: 0;
-
- .transition(background-color, .1s);
-
- &:last-child {
- margin-bottom: 0px;
- }
-
- &:hover {
- background-color: @wcfContainerAccentBackgroundColor;
- border-radius: 0 5px 5px 0;
- }
-
- .pollMeter {
- background-color: @wcfContainerHoverBackgroundColor;
- border-radius: 0 5px 5px 0;
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- z-index: -1;
- }
-
- .caption {
- color: @wcfLinkColor;
- padding: 2px 0;
-
- .optionName {
- display: block;
- padding: 0 3.5em 0 @wcfGapSmall;
- }
-
- .relativeVotes {
- position: absolute;
- right: 7px;
- top: 3px;
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .pollContainer > .formSubmit {
- margin: @wcfGapMedium -@wcfGapMedium -@wcfGapSmall -@wcfGapMedium;
- }
-}
\ No newline at end of file
+++ /dev/null
-.table {
- border-spacing: 0;
- width: 100%;
-
- /* cells */
- th,
- td {
- padding: @wcfGapSmall;
- text-align: left;
- vertical-align: middle;
- // non standard only webkit
- word-break: break-word;
-
- > label {
- cursor: pointer;
- display: block;
- margin: -@wcfGapSmall;
- padding: @wcfGapSmall;
-
- > input[type="checkbox"] {
- margin: -1px 3px 0;
- }
- }
- }
-
- /* headline */
- th {
- border-right: 1px solid rgba(0, 0, 0, .2);
- color: @wcfTabularBoxColor;
- font-size: @wcfSmallFontSize;
- font-weight: bold;
- white-space: nowrap;
- word-wrap: normal;
-
- .textShadow(@wcfTabularBoxBackgroundColor);
- .linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
-
- > a {
- color: @wcfTabularBoxColor;
- display: block;
- margin: -@wcfGapSmall;
- position: relative;
-
- &:hover {
- text-decoration: none;
- }
-
- > img {
- margin: -5px 0;
- }
- }
-
- &.active > a {
- background-color: rgba(0, 0, 0, .1);
- color: @wcfTabularBoxHoverColor;
-
- .boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
- }
-
- &.ASC > a,
- &.DESC > a {
- padding-right: 20px;
- }
-
- &.ASC > a::after,
- &.DESC > a::after {
- display: inline-block;
- font-family: FontAwesome;
- font-size: 14px;
- position: absolute;
- margin-left: @wcfGapTiny;
-
- .textShadow(@wcfTabularBoxBackgroundColor);
- }
-
- &.ASC > a::after {
- content: "\f0de";
- top: 8px;
- }
-
- &.DESC > a::after {
- content: "\f0dd";
- top: 3px;
- }
-
- &:hover > a {
- background-color: rgba(0, 0, 0, .2);
- color: @wcfTabularBoxHoverColor;
- }
-
- > * {
- padding: @wcfGapSmall;
- }
- }
-
- /* content */
- td {
- background-color: @wcfContainerBackgroundColor;
-
- .transition(background, .1s);
-
- &.columnMark,
- &.columnStatus {
- text-align: center;
- width: 1px;
- white-space: nowrap;
- word-wrap: normal;
- }
-
- &.columnDigits,
- &.columnID {
- text-align: right;
- width: 1px;
- white-space: nowrap;
- word-wrap: normal;
- }
-
- &.columnIcon {
- text-align: left;
- width: 1px;
- white-space: nowrap;
- word-wrap: normal;
- }
-
- &.columnTitle {
- font-weight: bold;
- text-align: left;
- }
-
- &.columnText {
- font-weight: normal;
- text-align: left;
- max-width: 20%;
- }
-
- &.columnDate {
- font-size: @wcfSmallFontSize;
- text-align: right;
- width: 1px;
- white-space: nowrap;
- word-wrap: normal;
- }
-
- &.columnURL, &.columnSmallText {
- font-size: @wcfSmallFontSize;
- text-align: left;
- }
- }
-
- /* striped */
- > tbody {
- > tr:nth-child(even) > td {
- background-color: @wcfContainerAccentBackgroundColor;
- }
- }
-
- /* hover */
- > tbody {
- > tr {
- &:not(:last-child) {
- > td {
- border-bottom: 1px solid rgba(255, 255, 255, .3);
- }
- }
-
- &:hover {
- > td {
- background-color: @wcfContainerHoverBackgroundColor;
- }
- }
-
- > td:not(:last-child) {
- border-right: 1px solid rgba(255, 255, 255, .3);
- }
-
- > td.focus {
- background-color: @wcfContainerHoverBackgroundColor;
- }
-
- > td.left {
- text-align: left;
- }
-
- > td.right {
- text-align: right;
- }
- }
- }
-
- .statusDisplay {
- float: right;
-
- .statusIcons {
- float: right;
- margin-left: @wcfGapSmall;
-
- li {
- display: inline-block;
- }
- }
- }
-
- tr {
- &.jsMarked {
- color: @wcfSelectedColor;
-
- > td {
- background-color: @wcfSelectedBackgroundColor !important;
- }
-
- a:not(.badge) {
- color: @wcfSelectedColor;
- }
- }
- }
-}
+++ /dev/null
-/* user profile sidebar */
-.sidebar {
- .userAvatar {
- text-align: center;
- overflow: hidden;
-
- > a {
- display: block;
- }
- }
-
- .userList > li > a {
- font-size: @wcfSmallFontSize;
- }
-}
-
-.framedIconList {
- li {
- float: left;
- margin: 0 2px 4px 0;
-
- .framed {
- display: inline-block;
- }
- }
-
- &::after {
- content: "";
- height: 0;
- display: block;
- clear: both;
- }
-}
-
-/* user information */
-.userInformation {
- > .inlineDataList,
- > .dataList {
- font-size: @wcfSmallFontSize;
- }
-
- > .dataList {
- margin-top: 0;
- }
-
- > .inlineDataList {
- margin-top: @wcfGapSmall;
-
- ~ .inlineDataList {
- margin-top: 0;
- }
- }
-
- > .containerHeadline + .inlineDataList {
- margin-top: 0;
- }
-
- > .containerHeadline > p {
- margin-bottom: 2px;
- }
-
- > .userFacts {
- overflow: hidden;
- }
-}
-
-.userTitleBadge {
- font-weight: normal;
- max-width: 154px;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.userProfilePreview {
- position: relative;
-
- > .userInformation {
- padding-bottom: 16px;// + @wcfGapTiny;
-
- > .userStats,
- > .userFields {
- margin-bottom: @wcfGapTiny+1;
- padding-top: @wcfGapTiny+1;
- border-top: 1px dotted @wcfContainerBorderColor;
- }
-
- > .userFields {
- padding-bottom: @wcfGapTiny+1;
- border-bottom: 1px dotted @wcfContainerBorderColor;
- }
-
- > .buttonGroupNavigation {
- position: absolute;
- bottom: 0;
- right: 0;
- }
- }
-}
-
-/* ##### User List #### */
-.userHeadline {
- padding-right: 428px;
- position: relative;
-
- > nav.buttonGroupNavigation {
- position: absolute;
- right: @wcfGapSmall;
- top: @wcfGapSmall;
- }
-
- > .dataList {
- overflow: hidden;
- }
-}
-
-.letters {
- > li {
- margin-bottom: @wcfGapTiny;
-
- > .button {
- min-width: 1.2em;
- text-align: center;
- }
- }
-}
-
-/* recent activities */
-.recentActivityList {
- > li {
- /* todo: remove with 2.2 */
- &.recentActivitiesMore {
- text-align: center;
-
- > button {
- padding-left: 30px;
- padding-right: 30px;
- }
-
- > small {
- color: @wcfDimmedColor;
- }
- }
-
- > div.box48 > div {
- overflow: hidden;
- }
- }
-}
-
-.likeList {
- > li:first-child {
- padding-bottom: @wcfGapSmall;
- text-align: right;
-
- &:hover {
- background-color: @wcfContainerBackgroundColor;
- }
-
- > ul.buttonGroup {
- display: inline-block;
- margin-bottom: @wcfGapSmall;
-
- &:not(:first-child) {
- margin-left: @wcfGapTiny;
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .likeList {
- > li:first-child {
- padding-bottom: 0;
- }
- }
-}
-
-/* dashboard boxes */
-.dashboardBoxSidebarButton {
- padding-bottom: @wcfGapLarge !important;
-
- > div {
- text-align: center;
-
- > .button {
- font-size: @wcfTitleFontSize;
- padding: 5px 13px;
- }
- }
-}
-
-.usersOnlineInfoBox {
- .usersOnlineLegend {
- margin-top: @wcfGapSmall;
-
- > p {
- display: inline-block;
- }
-
- > ul {
- display: inline-block;
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- #tplUser .userHeadline {
- overflow: visible;
- padding-right: 30px;
-
- > .invisible {
- display: block;
- float: left;
- }
-
- > *:not(.invisible) {
- margin-left: 59px;
- }
- }
-}
-
-/* avatar cropping */
-.userAvatarCrop {
- cursor: pointer;
-}
-
-#userAvatarCropSelection {
- position: relative;
- margin: 0 auto;
-}
-
-#userAvatarCropOverlay {
- background-color: #000000;
- height: 100%;
- opacity: 0.5;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- z-index: 10;
-}
-
-#userAvatarCropOverlaySelection {
- cursor: move;
- position: absolute;
- left: 0;
- top: 0;
- height: 128px;
- overflow: hidden;
- width: 128px;
- z-index: 20;
-}
-
-/* 3rd party login */
-.buttonList.thirdPartyLogin {
- text-align: center;
-}
-
-.thirdPartyLoginButton {
- border-radius: 3px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- color: #fff;
- display: inline-block;
- font-size: 0;
-
- &:hover {
- color: #fff;
- text-decoration: none;
- }
-
- > .icon {
- border-right: 1px solid rgba(0, 0, 0, 0.1);
- color: #fff;
- text-shadow: none;
- padding: 4px 6px;
- }
-
- > span:not(.icon) {
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 1rem;
- padding: 4px 12px;
- }
-
- &.googleLoginButton {
- background-color: rgb(221, 75, 57);
-
- &:hover {
- background-color: rgb(202, 53, 35);
- }
- }
-
- &.facebookLoginButton {
- background-color: rgb(59, 89, 152);
-
- &:hover {
- background-color: rgb(48, 72, 123);
- }
- }
-
- &.twitterLoginButton {
- background-color: rgb(85, 172, 238);
-
- &:hover {
- background-color: rgb(48, 154, 234);
- }
- }
-
- &.githubLoginButton {
- background-color: rgb(68, 68, 68);
-
- &:hover {
- background-color: rgb(48, 48, 48);
- }
- }
-}
-
-/* user notifications */
-.userNotificationItemList > .notificationItem {
- &.groupedNotificationItem > div > .framed > span.fa-users:before {
- position: relative;
- top: 3px;
- }
-
- &.notificationUnconfirmed {
- position: relative;
-
- > div > .details {
- padding-right: 16px + @wcfGapLarge;
- }
-
- > .notificationItemMarkAsConfirmed {
- opacity: .6;
- position: absolute;
- right: @wcfGapLarge;
- top: 50%;
-
- transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
-
- .transition(opacity, .3s, linear);
- }
-
- &:hover > .notificationItemMarkAsConfirmed {
- opacity: 1;
- }
- }
-
- > div > .details {
- padding-top: 3px;
-
- .userLink {
- font-weight: bold;
- }
- }
-}
-
-/* user notification settings */
-#notificationSettings .notificationSettingsEmail {
- &:not(.active) {
- display: none;
- }
-
- &.dropdownOpen > a {
- opacity: 1;
- }
-}
-
-.dashboardBoxRecentActivityHeadline {
- overflow: visible;
- position: relative;
- min-height: 30px;
-
- > nav.buttonGroupNavigation {
- position: absolute;
- right: 4px;
- top: 2px;
- }
-}
-
-#aboutMe img {
- max-width: 100%;
-}
\ No newline at end of file