+++ /dev/null
-/* attachment thumbnail list */
-.attachmentThumbnailList, .attachmentFileList {
- padding-top: @wcfGapSmall !important;
-
- > fieldset {
- padding: 0;
-
- > legend {
- border-bottom: 0;
- font-size: @wcfTitleFontSize;
- padding-bottom: @wcfGapSmall;
- }
- }
-}
-
-.attachmentThumbnailList {
- padding-bottom: @wcfGapSmall !important;
-
- > fieldset {
- > ul {
- padding: 0 @wcfGapSmall+@wcfGapTiny 0 @wcfGapTiny;
-
- > li {
- margin: 0 0 @wcfGapMedium @wcfGapSmall;
- vertical-align: top;
- }
- }
- }
-}
-
-.attachmentFileList {
- > fieldset > ul > li {
- &:not(:first-child) {
- margin-top: @wcfGapTiny;
- }
- }
-}
-
-.attachmentThumbnail {
- background-color: white;
- display: inline-block;
- min-height: ~"@{wcf_option_attachment_thumbnail_height}px";
- min-width: ~"@{wcf_option_attachment_thumbnail_width}px";
- position: relative;
-
- > a {
- display: inline-block;
- min-height: ~"@{wcf_option_attachment_thumbnail_height}px";
- min-width: ~"@{wcf_option_attachment_thumbnail_width}px";
- }
-
- > div {
- background-color: rgba(0, 0, 0, 0.6);
- bottom: 0;
- color: #fff;
- position: absolute;
- width: 100%;
- padding: @wcfGapSmall 0;
-
- > p,
- > small {
- margin: 0 @wcfGapSmall;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- word-wrap: normal;
- }
-
- > small {
- display: block;
- height: 0;
-
- .transition(height, .25s, ease-out);
- }
- }
-
- &:hover {
- > div > small {
- height: 1.27em;
- }
- }
-}
-
-/* attachment form */
-.formAttachmentList {
- border-bottom: 1px solid @wcfContainerBorderColor;
- margin-bottom: @wcfGapSmall;
- padding-bottom: @wcfGapSmall;
-
- > li {
- margin-bottom: @wcfGapSmall;
-
- > div {
- > div {
- margin-right: @wcfGapSmall;
-
- > p {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- > a {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
-
- > ul {
- margin-top: @wcfGapSmall;
-
- > li {
- display: inline-block;
- }
- }
- }
- }
-
- &.sortableList {
- list-style-type: none;
- margin-left: 0;
- }
-}
-
-.formAttachmentContent {
- .jsButtonAttachmentInsertAll {
- vertical-align: baseline;
- }
-
- .uploadButton {
- vertical-align: bottom;
- }
-
- > dl {
- div + small {
- margin-top: @wcfGapSmall !important;
- }
- }
-}
-
-@media only screen and (min-width: 801px) {
- .formAttachmentList {
- > li {
- float: left;
- width: 50%;
- }
- }
-}
-
-.box48 .attachmentTinyThumbnail {
- max-height: 48px;
- max-width: 48px;
-}
-
-.box64 .attachmentTinyThumbnail {
- max-height: 64px;
- max-width: 64px;
-}
-
-/* add search icon overlay on embedded attachments/images */
-.embeddedAttachmentLink,
-.embeddedImageLink {
- display: inline-block;
- max-width: 100%;
- min-height: 48px;
- position: relative;
-
- &::after {
- background-color: rgba(0, 0, 0, .8);
- border-radius: 2px;
- bottom: @wcfGapSmall;
- color: white;
- content: @fa-var-search;
- display: block;
- font-family: FontAwesome;
- font-size: 21px;
- opacity: .5;
- padding: 2px 8px;
- position: absolute;
- right: @wcfGapSmall;
- text-decoration: none;
-
- .boxShadow(0, 0, rgba(0, 0, 0, .15), 0, 3px);
- .transition(opacity, .1s);
- }
-
- &:hover {
- &::after {
- opacity: .8;
- }
- }
-}
+++ /dev/null
-/* ############## Profile Comments ############## */
-.comment,
-.commentResponse {
- position: relative;
-}
-
-.commentList .buttonGroupNavigation {
- position: absolute;
- top: @wcfGapTiny;
- right: @wcfGapMedium;
-
- > ul {
- > li {
- float: left;
- opacity: 0;
-
- .transition(opacity, .1s);
-
- > a {
- padding: @wcfGapTiny;
- }
- }
- }
-}
-
-.commentResponseList .buttonGroupNavigation {
- right: @wcfGapSmall;
-}
-
-.commentContent:hover > .buttonGroupNavigation > ul > li {
- opacity: 1;
-}
-
-.commentList textarea {
- /* fixes flicker when expanding */
- line-height: 1.2em;
-
- /* controls textarea grow */
- min-height: @wcfBaseFontSize;
- max-height: @wcfBaseFontSize * 10;
-
- + button {
- margin-top: @wcfGapTiny;
- }
-}
-
-.commentResponse {
- border-top: 1px solid @wcfContainerBorderColor;
- padding: @wcfGapSmall;
-}
-
-.commentOptionContainer {
- > ul {
- font-size: 0;
-
- > li {
- &:not(:last-child)::after {
- content: " - ";
- }
-
- display: inline-block;
- font-size: @wcfSmallFontSize;
- padding-right: 3px;
- }
- }
-}
-
-.commentOptionContainer.jsAddResponseActive,
-.commentResponseList:not(:empty) + .commentOptionContainer {
- border-top: 1px solid @wcfContainerBorderColor;
- padding: @wcfGapSmall @wcfGapSmall 0;
-}
-
-.commentResponseList:empty,
-.commentContent + .commentOptionContainer:not(.jsAddResponseActive) {
- margin-top: @wcfGapTiny;
-}
-
-.commentContent + .commentOptionContainer.jsAddResponseActive {
- margin-top: @wcfGapMedium;
-}
-
-.commentResponseList:not(:empty) {
- margin-top: @wcfGapMedium;
-}
-
-.commentList > li:nth-child(2n) .commentResponseList .commentResponse:nth-child(2n+1) {
- background-color: @wcfContainerBackgroundColor;
-
- .transition(background-color, .1s);
-}
-
-.commentList > li:nth-child(2n+1) .commentResponseList .commentResponse:nth-child(2n+1) {
- background-color: @wcfContainerAccentBackgroundColor;
-
- .transition(background-color, .1s);
-}
-
-.commentResponseList > li:hover {
- background-color: @wcfContainerHoverBackgroundColor !important;
-}
-
-.commentList > li:not(.commentAdd):hover {
- background-color: @wcfContainerBackgroundColor;
-
- &:nth-child(2n) {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-}
-
-/* buttons to load comments/responses */
-.commentList > .commentLoadNext {
- text-align: center;
-
- > button {
- padding-left: 30px;
- padding-right: 30px;
- }
-}
-
-.commentList .userMessage {
- margin-top: 0;
-}
-
-.commentResponseContent {
- position: relative;
-}
-
-/* like display */
-.commentList .likesBadge {
- display: inline-block;
- margin: -2px 0 -2px @wcfGapTiny;
-}
-
-@media only screen and (max-width: 800px) {
- .commentList .buttonGroupNavigation {
- top: 1px;
- right: @wcfGapSmall;
- }
-
- .commentResponseList .buttonGroupNavigation {
- right: 0;
- }
-
- .commentList .containerHeadline > h3 {
- padding-right: @wcfGapLarge + @wcfGapMedium;
- }
-
- .commentResponseContent > .containerHeadline > h3 {
- padding-right: 2*@wcfGapMedium;
- }
-}
+++ /dev/null
-.dialogOverlay {
- background-color: transparent;
- bottom: 0;
- left: 0;
- position: fixed;
- right: 0;
- top: 0;
- visibility: hidden;
- z-index: 399;
-
- transition: visibility 0s linear .3s;
-
- &[aria-hidden=false] {
- /* do not animate opacity or background-color, the transition is anything but smooth due to the large area covered */
- background-color: rgba(255, 255, 255, .4);
- visibility: visible;
-
- transition-delay: 0s;
- }
-}
-
-@-webkit-keyframes wcfDialog {
- 0% { visibility: visible; opacity: 0; top: 8%; }
- 100% { visibility: visible; opacity: 1; top: 10%; }
-}
-
-@-webkit-keyframes wcfDialogOut {
- 0% { visibility: visible; opacity: 1; top: 10%; }
- 100% { visibility: hidden; opacity: 0; top: 12%; }
-}
-
-.dialogContainer {
- background-color: rgba(0, 0, 0, .4);
- border: 3px solid transparent;
- border-radius: 3px;
- box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
- box-sizing: border-box;
- left: 50%;
- max-height: 80%;
- max-width: 80%;
- min-width: 400px;
- position: absolute;
- top: 10%;
- transform: translateX(-50%);
-
- -webkit-animation: wcfDialogOut .3s;
- -webkit-animation-fill-mode: forwards;
-
- &[aria-hidden=false] {
- -webkit-animation: wcfDialog .3s;
- -webkit-animation-fill-mode: forwards;
- }
-
- > header {
- background: linear-gradient(to right, @wcfTabularBoxBackgroundColor, lighten(@wcfTabularBoxBackgroundColor, 10%));
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- color: @wcfTabularBoxColor;
- display: flex;
- padding: 7px 10px;
-
- .textShadow(@wcfTabularBoxBackgroundColor);
-
- > span {
- flex: 1;
- font-size: 1.2rem;
- }
-
- > a {
- color: @wcfTabularBoxColor;
- flex: 0 0 20px;
- font-family: FontAwesome;
- font-size: 18px;
- text-align: right;
- text-decoration: none;
-
- &:before {
- content: @fa-var-times-circle;
- }
-
- > span {
- display: none;
- }
- }
- }
-
- > .dialogContent {
- background-color: @wcfContainerBackgroundColor;
- box-sizing: border-box;
- color: @wcfColor;
- overflow: auto;
-
- &:not(.dialogContentNoPadding) {
- padding: 10px;
- padding-bottom: 0;
-
- &:after {
- content: "";
- display: block;
- height: 10px;
- }
-
- &.dialogForm:after {
- height: 17px;
- }
- }
-
- &:not(.dialogForm) {
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- }
-
- dl:not(.plain) {
- > dt {
- float: none;
- margin-bottom: @wcfGapTiny;
- text-align: left;
- width: auto !important;
-
- &:empty {
- margin-bottom: 0;
- }
- }
-
- > dd {
- margin-left: 0 !important;
- }
- }
-
- .dialogFormSubmit {
- background-color: @wcfContainerAccentBackgroundColor;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- bottom: 0;
- left: 0;
- padding: 7px 10px;
- position: absolute;
- right: 0;
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
-}
-
-/* static dialogs */
-.jsStaticDialogContent {
- display: none;
-}
-
-.dialogContentX {
-
- > .icon-spinner {
- left: 50%;
- margin: -21px -21px 0 0;
- padding: 0 21px 0 21px;
- position: absolute;
- top: 50%;
- }
-
- .formSubmit {
- background-color: @wcfContainerAccentBackgroundColor;
- border-bottom-left-radius: 7px;
- border-bottom-right-radius: 7px;
- border-top: 1px solid @wcfContainerBorderColor;
- bottom: 0;
- left: 0;
- padding: 10px 0;
- position: absolute;
- width: 100%;
- }
-}
-
-/* package (un-)installation */
-#packageInstallationDialogContainer > .boxHeadline {
- margin-top: 0;
-}
-
-.spinner {
- border: 1px solid rgba(0, 0, 0, .3);
- border-radius: 6px;
- box-sizing: border-box;
- color: #fff;
- left: 50%;
- opacity: 0;
- padding: 7px;
- position: fixed;
- text-align: center;
- top: 200px;
- visibility: hidden;
- z-index: 401;
-
- transform: translateX(-50%);
-
- .boxShadow(0, 1px, rgba(0, 0, 0, .5), 7px);
- .linearGradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
-
- transition: visibility 0s linear .1s, opacity .1s linear;
-
- &.active {
- opacity: 1;
- visibility: visible;
-
- transition-delay: 0s;
- }
-
- > .icon {
- color: #fff;
- }
-
- > span:not(.icon) {
- display: block;
- margin-top: @wcfGapSmall;
- }
-}
-
-.systemConfirmation p {
- padding-top: @wcfGapSmall;
-}
-
-/* notification overlay */
-#systemNotification {
- left: 0;
- pointer-events: none;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 460;
-
- > p {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-top-width: 0;
- cursor: pointer;
- display: table;
- margin: 0 auto;
- max-width: 80%;
- pointer-events: auto;
-
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-}
\ No newline at end of file
+++ /dev/null
-dl {
- &:not(.plain) {
- display: flex;
- justify-content: space-between;
-
- &:not(:last-child) {
- margin-bottom: 10px;
- }
-
- > dt {
- flex: 0 0 230px;
- text-align: right;
- }
-
- > dd {
- flex: 0 0 auto;
- /* work-around for IE10 which does not support calc() for flex-basis */
- width: calc(~"100% - 250px");
- }
-
- &.wide {
- > dt {
- display: none;
- }
-
- > dd {
- flex: 0 0 100%;
- }
- }
-
- & + dl:not(.plain) {
- padding-top: 10px;
- }
- }
-
- &.dataList {
- .clearfix;
-
- > dt {
- clear: right;
- color: rgba(128, 128, 128, 1);
- float: left;
- margin-right: 4px;
- text-align: left;
-
- &:after {
- content: ":";
- }
- }
-
- > dd {
- float: right;
- text-align: right;
-
- &:not(:last-child) {
- margin-bottom: 3px;
- }
- }
- }
-
- &.inlineDataList {
- font-size: .85rem;
-
- > dt {
- display: inline-block;
-
- &:after {
- content: ":";
- padding-left: 1px;
- }
- }
-
- > dd {
- display: inline-block;
-
- &:not(:last-of-type):after {
- content: ",";
- padding-left: 1px;
- }
- }
- }
-
- &.statsDataList {
- align-items: center;
- display: flex;
- flex-direction: row-reverse;
- flex-wrap: wrap;
-
- > dt {
- color: @wcfDimmedColor;
- flex: 0 0 60%;
- font-size: .85rem;
- margin-left: 5px;
- overflow: hidden;
- text-align: left;
- white-space: nowrap;
- }
-
- > dd {
- flex: 0 0 35%;
- overflow: hidden;
- text-align: right;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
-
- &:not(.plain) > dd {
- &:not(.floated) > label ~ small {
- margin-left: 24px;
- }
-
- > small:not(.innerError) {
- color: rgb(128, 128, 128);
- display: block;
- margin-top: 5px;
- }
- }
-
- &.condensed {
- display: block;
-
- > dt,
- > dd {
- display: block;
- margin: 0;
- text-align: left;
- width: 100%;
- }
-
- > dd + dt {
- margin-top: 15px;
- }
-
- > dt:not(:empty) {
- margin-bottom: 5px;
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-input[type="date"],
-input[type="datetime"],
-input[type="email"],
-input[type="password"],
-input[type="search"],
-input[type="text"] {
- background-color: @wcfInputBackgroundColor;
- border: 1px solid @wcfInputBorderColor;
- border-radius: 3px;
- color: @wcfInputColor;
- padding: 4px;
- transition: background-color .2s linear, border-color .2s linear;
-
- &:hover {
- background-color: @wcfInputHoverBackgroundColor;
- border-color: @wcfInputHoverBorderColor;
- }
-}
-
-input {
- box-sizing: border-box;
-
- &.tiny {
- width: 80px;
- }
-
- &.short {
- min-width: 80px;
- width: 10%;
- }
-
- &.medium {
- min-width: 150px;
- width: 30%;
- }
-
- &.long {
- min-width: 150px;
- width: 100%;
- }
-}
+++ /dev/null
-select {
- background-color: @wcfInputBackgroundColor;
- border: 1px solid @wcfInputBorderColor;
- border-radius: 3px;
- color: @wcfInputColor;
- padding: 2px 5px;
- position: relative;
- transition: background-color .2s linear, border-color .2s linear;
-
- &:hover {
- background-color: @wcfInputHoverBackgroundColor;
- border-color: @wcfInputHoverBorderColor;
- }
-}
+++ /dev/null
-textarea {
- background-color: @wcfInputBackgroundColor;
- border: 1px solid @wcfInputBorderColor;
- border-radius: 3px;
- box-sizing: border-box;
- color: @wcfInputColor;
- font-family: "Segoe UI";
- padding: 5px;
- transition: background-color .2s linear, border-color .2s linear;
- width: 100%;
-
- &:hover {
- background-color: @wcfInputHoverBackgroundColor;
- border-color: @wcfInputHoverBorderColor;
- }
-}
\ No newline at end of file
+++ /dev/null
-/* ### fieldsets ### */
-fieldset {
- padding-top: @wcfGapMedium;
-
- > legend {
- border-bottom: 1px solid @wcfContainerBorderColor;
- color: @wcfDimmedColor;
- font-family: @wcfHeadlineFontFamily;
- font-size: @wcfSubHeadlineFontSize;
- font-weight: bold;
- width: 100%;
- padding-bottom: @wcfGapTiny;
-
- .textShadow(@wcfContainerBackgroundColor);
-
- + small {
- display: inline-block;
- margin-bottom: @wcfGapTiny;
- position: relative;
- top: -@wcfGapSmall;
- }
- }
-
- > dl:not(:first-of-type) {
- margin-top: @wcfGapSmall+@wcfGapTiny;
- }
-
- &:not(:first-of-type) {
- margin-top: @wcfGapMedium;
- }
-}
-
-/* definition list */
-dl:not(.plain) {
- position: relative;
-
- .clearfix();
-
- > dd:not(:first-of-type), > dt:not(:first-of-type) {
- margin-top: @wcfGapSmall+@wcfGapTiny;
- }
-
- > dt {
- color: @wcfLabelColor;
- float: left;
- text-align: right;
- width: 230px;
-
- > label {
- display: block;
- }
-
- /* Reversed (flips the label aside the checkbox or radio button) -
- use only when automatically generating checkboxes or radio-buttons! */
- &.reversed {
- left: 270px;
- margin-top: 2px;
- position: absolute;
- text-align: left;
- white-space: nowrap;
- width: auto;
- word-wrap: normal;
- right: 0;
-
- ~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
- margin-left: 0;
- }
-
- > label {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
-
- > dd {
- margin-left: 250px;
-
- > small:not(.innerError) {
- color: @wcfDimmedColor;
- display: block;
- margin-top: 3px;
- }
-
- > label {
- color: @wcfLabelColor;
- display: block;
-
- > input[type='checkbox'], > input[type='radio'] {
- margin: 2px 2px 2px 0;
- }
- }
-
- > input[type='checkbox'], > input[type='radio'] {
- ~ small {
- margin-left: 21px;
- margin-top: 2px;
- }
- }
-
- &:not(.floated) {
- > label ~ small {
- margin-left: 21px;
- }
- }
-
- &.floated {
- > label {
- display: inline-block;
- margin-right: @wcfGapSmall;
- }
- }
-
- > input, textarea, select {
- + label {
- margin-top: 2px;
- }
- }
-
- > .innerError + label {
- margin-top: 2px;
- }
-
- &:after {
- clear: left;
- content: "";
- display: block;
- }
- }
-
- /* wide */
- &.wide {
- > dt {
- display: none;
- }
-
- > dd {
- margin-left: 0;
- }
- }
-
- /* disabled state */
- &.disabled {
- > dt, > dd > label {
- color: @wcfDimmedColor;
- }
- }
-
- &.condensed {
- > dt {
- float: none;
- margin-bottom: @wcfGapTiny;
- text-align: left;
- width: auto !important;
-
- &:empty {
- margin-bottom: 0;
- }
- }
-
- > dd {
- margin-left: 0 !important;
- }
- }
-}
-
-@media only screen and (max-width: 1024px) {
- dl:not(.plain) {
- > dt {
- float: none;
- margin-bottom: @wcfGapTiny;
- text-align: left;
- width: auto !important;
-
- &.reversed {
- left: 20px;
- }
- }
-
- > dd {
- margin-left: 0 !important;
- }
- }
-
- fieldset > dl:not(:first-of-type) {
- margin-top: @wcfGapMedium;
- }
-}
-
-/* sidebar */
-.sidebar {
- dl:not(.plain) {
- &:not(:last-child) {
- margin-bottom: @wcfGapMedium;
- }
-
- > dt {
- text-align: left;
- float: none;
- width: auto;
-
- .textShadow(@wcfSidebarBackgroundColor);
- }
-
- > dd {
- margin-top: 2px;
- margin-left: 0;
- }
- }
-}
-
-/* input prefix/suffix */
-.inputAddon {
- display: flex;
-
- > .inputPrefix {
- flex: 0 0 auto;
- margin: 0 !important;
- white-space: nowrap;
- }
-
- > input {
- border-radius: 0;
- flex: 1 auto;
-
- &.tiny {
- flex: 0 0 80px;
- }
-
- &.short {
- flex: 0 1 10%;
- }
-
- &.medium {
- flex: 0 1 30%;
- }
-
- &:first-child {
- border-radius: 3px 0 0 3px;
- }
-
- &:last-child {
- border-radius: 0 3px 3px 0;
- }
- }
-
- > .inputSuffix {
- background-color: rgba(240, 240, 240, 1);
- border: 1px solid @wcfContainerBorderColor;
- border-left-width: 0;
- border-radius: 0 3px 3px 0;
- color: rgba(153, 153, 153, 1);
- font-size: .85rem;
- padding: @wcfGapTiny @wcfGapSmall;
- }
-
- &.inputAddonTextarea {
- flex-direction: column;
-
- > .inputPrefix {
- align-self: flex-start;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- border-bottom-width: 0;
- }
-
- > textarea {
- border-top-left-radius: 0;
- }
- }
-
- &:not(.inputAddonTextarea) {
- > .inputPrefix {
- border-bottom-right-radius: 0;
- border-right-width: 0;
- border-top-right-radius: 0;
-
- &+ input {
- border-bottom-left-radius: 0 !important;
- border-top-left-radius: 0 !important;
- }
- }
- }
-}
-
-/* submit buttons */
-.formSubmit {
- font-size: 0;
- margin-top: @wcfGapMedium;
- text-align: center;
-
- button,
- input[type='reset'],
- input[type='submit'],
- input[type='button'],
- .button {
- font-size: 1rem;
- }
-}
-
-
-/* ### inputs ### */
-/* globals */
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-input[type='checkbox'],
-input[type='radio'],
-select:not([multiple]) {
- cursor: pointer;
-}
-
-input[type='text'],
-input[type='search'], /* Does not work in WebKit browsers */
-input[type='date'],
-input[type='email'],
-input[type='number'],
-input[type='url'],
-input[type='password'],
-textarea,
-select[multiple] {
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- border-radius: @wcfInputBorderRadius;
- font-family: @wcfBaseFontFamily;
- padding: 4px 3px;
- margin: 0;
-}
-
-select {
- margin: 0;
- max-width: 100%;
- min-width: 1px;
- padding: 3px;
-}
-
-input[type='number'] {
- text-align: right;
-}
-
-/* reset textarea font size */
-textarea {
- font-size: 1rem;
-}
-
-/* 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] {
- background-color: @wcfInputBackgroundColor;
- border-color: @wcfInputBorderColor;
- border-style: solid;
- border-width: 1px;
- color: @wcfInputColor;
-
- &::-webkit-input-placeholder { /* WebKit browsers */
- color: lighten(@wcfInputColor, 20%);
- }
- &::-moz-placeholder { /* Mozilla Firefox 19+ */
- color: lighten(@wcfInputColor, 20%);
- }
- &:-ms-input-placeholder { /* Internet Explorer 10+ */
- color: lighten(@wcfInputColor, 20%);
- }
-}
-
-/* hover */
-input[type='text']:hover,
-input[type='search']:hover,
-input[type='date']:hover,
-input[type='datetime']:hover,
-input[type='email']:hover,
-input[type='number']:hover,
-input[type='url']:hover,
-input[type='password']:hover,
-textarea:hover,
-select[multiple]:hover {
- background-color: @wcfInputHoverBackgroundColor;
- border-color: @wcfInputHoverBorderColor;
-}
-
-/* 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 {
- background-color: @wcfInputHoverBackgroundColor;
- border-color: @wcfInputHoverBorderColor;
- outline: 0;
-}
-
-/* read only state */
-input[type='text'][readonly],
-input[type='search'][readonly],
-input[type='email'][readonly],
-input[type='number'][readonly],
-input[type='date'][readonly],
-input[type='datetime'][readonly],
-input[type='url'][readonly],
-input[type='password'][readonly],
-textarea[readonly],
-select[multiple][readonly] {
- background-color: darken(@wcfInputBackgroundColor, 5%);
- border-color: @wcfInputBorderColor;
-}
-
-/* disabled state */
-input[type='text'][disabled],
-input[type='search'][disabled],
-input[type='date'][disabled],
-input[type='datetime'][disabled],
-input[type='email'][disabled],
-input[type='number'][disabled],
-input[type='url'][disabled],
-input[type='password'][disabled],
-textarea[disabled],
-select[multiple][disabled] {
- background-color: darken(@wcfInputBackgroundColor, 5%);
- border-color: @wcfInputBorderColor;
- color: @wcfDimmedColor;
- cursor: not-allowed;
- opacity: 1; /* ios fix */
-}
-
-/* success state */
-.formSuccess {
- input[type='text'],
- input[type='search'],
- input[type='email'],
- input[type='number'],
- input[type='url'],
- input[type='password'],
- textarea {
- background-color: @wcfSuccessBackgroundColor;
- border-color: @wcfSuccessBorderColor;
- }
-}
-
-/* error state */
-.formError {
- input[type='text'],
- input[type='search'],
- input[type='email'],
- input[type='number'],
- input[type='url'],
- input[type='password'],
- textarea {
- background-color: @wcfErrorBackgroundColor;
- border-color: @wcfErrorBorderColor;
- }
-}
-
-/* width */
-textarea {
- width: 100%;
-}
-
-.tiny {
- width: 80px;
-}
-
-.short {
- min-width: 80px;
- width: 10%;
-}
-
-.medium {
- min-width: 150px;
- width: 30%;
-}
-
-.long {
- min-width: 150px;
- width: 100%;
-}
-
-@media only screen and (max-width: 800px) {
- textarea {
- max-height: 160px;
- }
-
- .medium {
- width: 100%;
- }
-}
-
-/* upload button */
-.uploadButton {
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- position: relative;
-
- input {
- cursor: pointer;
- right: 0;
- opacity: 0;
- padding: 4px 0;
- position: absolute;
- top: 0;
- position: absolute;
- }
-}
-
-.uploadButton,
-.uploadFallbackButton {
- margin-top: @wcfGapSmall;
-}
-
-/* element list with checkboxes */
-.structuredList {
- background-color: @wcfContainerBackgroundColor;
-
- li {
- padding: @wcfGapTiny @wcfGapSmall;
- text-align: right;
-
- &:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- }
-
- &:first-child {
- border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
- }
-
- &:last-child {
- border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
- }
-
- &.category {
- background-color: @wcfNavigationHeaderBackgroundColor;
-
- &:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- }
- }
-
- span {
- float: left;
- }
-
- label {
- cursor: pointer;
- margin: 0 @wcfGapSmall;
- padding: 0 @wcfGapLarge;
- }
- }
-}
-
-/* tag input list */
-.editableItemList ul li {
- cursor: pointer;
- margin-left: @wcfGapTiny;
-
- &:first-child {
- margin-left: 0;
- }
-}
-
-/* Fixes weird firefox bug */
-select > option {
- display: block !important;
-}
-
-/* reCaptcha */
-.reCaptcha {
- input.marginTop {
- margin-top: @wcfGapMedium;
- }
-}
-
-/* disable auto zoom in mobile safari */
-@media only screen and (max-width: 800px) {
- select,
- textarea,
- input[type="text"],
- input[type="password"],
- input[type="datetime"],
- input[type="datetime-local"],
- input[type="date"],
- input[type="month"],
- input[type="time"],
- input[type="week"],
- input[type="number"],
- input[type="email"],
- input[type="url"],
- input[type="search"],
- input[type="tel"],
- input[type="color"],
- .cke_editable,
- .redactor-editor {
- font-size: 16px;
- }
-}
-
-.flexibleButtonGroup {
- display: inline-flex;
-
- > li {
- border: 1px solid @wcfContainerBorderColor;
- display: flex;
- flex: 1 auto;
- overflow: hidden;
-
- &:not(:last-child) {
- border-right-width: 0;
- }
-
- &.spaceAfter + li,
- &:first-child {
- border-bottom-left-radius: 3px;
- border-top-left-radius: 3px;
- }
-
- &.spaceAfter,
- &:last-child {
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px;
- }
-
- &.spaceAfter {
- border-right-width: 1px;
- margin-right: @wcfGapMedium;
- }
-
- > input {
- display: none;
-
- &:not(:checked) + label {
- opacity: .6;
- }
-
- &:checked + label {
- opacity: 1;
- }
- }
-
- > a,
- > label{
- color: @wcfColor;
- cursor: pointer;
- font-size: .85rem;
- opacity: .6;
- padding: @wcfGapTiny @wcfGapSmall;
- text-align: center;
-
- transition: all .3s linear;
-
- &:hover {
- opacity: 1 !important;
- }
-
- > .icon {
- cursor: pointer !important;
- }
- }
-
- > a {
- &.active,
- &:hover {
- opacity: 1;
- text-decoration: none;
- }
- }
-
- > input:checked + label.green,
- > a.active.green {
- background-color: rgb(223, 240, 216);
- color: rgb(60, 118, 61);
-
- > .icon {
- color: rgb(60, 118, 61);
- }
- }
-
- > input:checked + label.red,
- > a.active.red {
- background-color: rgb(242, 222, 222);
- color: rgb(169, 68, 66);
-
- > .icon {
- color: rgb(169, 68, 66);
- }
- }
-
- > input:checked + label.yellow,
- > a.active.yellow {
- background-color: rgb(252, 248, 227);
- color: rgb(138, 109, 59);
-
- > .icon {
- color: rgb(138, 109, 59);
- }
- }
- }
-}
-
-/* input item list */
-.inputItemList {
- background-color: @wcfInputBackgroundColor;
- border: 1px solid @wcfInputBorderColor;
- border-radius: @wcfInputBorderRadius;
- color: @wcfInputColor;
- cursor: text;
- display: flex;
- flex-wrap: wrap;
- padding: @wcfGapTiny @wcfGapTiny 0;
-
- transition-duration: .2s;
- transition-property: background-color, border-color, box-shadow;
- transition-timing-function: linear;
-
- &:hover {
- background-color: @wcfInputHoverBackgroundColor;
- border-color: @wcfInputHoverBorderColor;
- }
-
- > li {
- align-items: center;
- display: flex;
- flex: 0 auto;
- margin: 0 @wcfGapSmall @wcfGapTiny 0;
- padding: @wcfGapTiny @wcfGapSmall;
-
- &.item {
- background-color: @wcfColor;
- border-radius: 3px;
- padding-right: @wcfGapLarge;
- position: relative;
-
- &:hover,
- &.active {
- background-color: @wcfTabularBoxBackgroundColor;
- color: @wcfTabularBoxColor;
- }
-
- > span,
- > .icon {
- color: @wcfContentBackgroundColor;
- font-size: .85rem;
- text-shadow: none;
- white-space: nowrap;
- word-wrap: normal;
- }
-
- > .icon {
- bottom: 0;
- height: auto;
- position: absolute;
- right: 0;
- top: 0;
- width: @wcfGapLarge;
-
- &:before {
- left: 50%;
- position: absolute;
- top: 50%;
- transform: translateX(-50%) translateY(-50%);
- }
- }
- }
-
- &.input {
- padding: 0;
- width: 200px;
-
- > input {
- background-color: transparent !important;
- background-image: none !important;
- border-width: 0 !important;
- box-shadow: none !important;
- outline: none !important;
- padding: 0 !important;
- width: 100% !important;
-
- &::-ms-clear {
- /* hide "clear value" button in IE (displayed as "X") */
- display: none;
- }
- }
- }
- }
-}
+++ /dev/null
-/* ### layout globals ### */
-.layoutFluid {
- margin-left: auto;
- margin-right: auto;
- min-width: @wcfLayoutMinWidth;
- max-width: @wcfLayoutMaxWidth;
-}
-
-@media only screen and (max-width: 800px) {
- .layoutFluid {
- min-width: 0;
- max-width: none;
- }
-}
-
-.layoutFixed {
- margin-left: auto;
- margin-right: auto;
- width: @wcfLayoutFixedWidth;
-}
-
-@media only screen and (max-width: 800px) {
- .layoutFixed {
- width: auto;
- }
-}
-
-@media only screen and (min-width: 801px) {
- body {
- min-width: 980px;
- }
-}
-
-/* ### header ### */
-#pageHeader {
- z-index: 100;
-}
-
-@media only screen and (max-width: 800px) {
- #pageHeader {
- margin-top: 48px;
- }
-}
-
-#top {
- display: block;
- height: 1px;
- visibility: hidden;
-}
-
-/* user panel */
-.userPanel {
- background-color: @wcfUserPanelBackgroundColor;
- height: 40px;
- left: 0;
- overflow: hidden;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 200;
-
- .icon {
- color: @wcfUserPanelColor;
-
- .textShadow(@wcfUserPanelBackgroundColor);
- }
-
- > div {
- position: relative;
-
- > ul.userPanelItems {
- .clearfix;
-
- > li {
- float: left;
-
- > a,
- > div:not(.dropdownMenu) {
- color: @wcfUserPanelColor;
- display: block;
- height: 20px;
- padding: 12px 8px 8px 8px;
-
- .textShadow(@wcfUserPanelBackgroundColor);
- .transition(background-color, .2s);
-
- &:hover {
- background-color: @wcfUserPanelHoverBackgroundColor;
- color: @wcfUserPanelHoverColor;
- text-decoration: none;
- }
-
- > .badge.badgeInverse {
- background-color: @wcfTabularBoxBackgroundColor;
- color: @wcfTabularBoxColor;
- }
-
- > img {
- position: relative;
- top: -2px;
- }
- }
-
- > .framed > img {
- margin-top: -5px;
- margin-bottom: -4px;
- padding: 0px;
- top: 0;
- }
- }
- }
-
- > .searchBar {
- background-color: @wcfUserPanelHoverBackgroundColor;
- position: absolute;
- right: 0;
- top: 0;
-
- &::before {
- content: "\f002";
- color: @wcfUserPanelColor;
- font-family: FontAwesome;
- font-size: 14px;
- left: 7px;
- position: absolute;
- top: 12px;
- }
- &.loading::before {
- content: "\f110";
-
- -moz-animation: spin 2s infinite linear;
- -o-animation: spin 2s infinite linear;
- -webkit-animation: spin 2s infinite linear;
- animation: spin 2s infinite linear;
- }
-
- > form {
- display: inline-block;
-
- input[type="search"] {
- background-color: transparent;
- border-width: 0;
- color: @wcfUserPanelColor;
- height: 40px;
- padding: 6px 12px 5px 26px;
- width: 240px;
- -webkit-appearance: textfield;
-
- .textShadow(@wcfUserPanelHoverBackgroundColor);
-
- &:focus {
- outline: 0;
- }
-
- &::-webkit-input-placeholder { /* WebKit browsers */
- color: darken(@wcfUserPanelColor, 20%);
- }
- &::-moz-placeholder { /* Mozilla Firefox 19+ */
- color: darken(@wcfUserPanelColor, 20%);
- }
- &:-ms-input-placeholder { /* Internet Explorer 10+ */
- color: darken(@wcfUserPanelColor, 20%);
- }
-
- /* remove broken cancel-button (webkit) */
- &::-webkit-search-cancel-button{
- display:none;
- }
- }
- }
-
- .dropdownMenu li > span {
- max-width: 210px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .userPanel {
- height: 41px;
-
- .icon {
- font-size: 21px;
- height: auto;
- width: auto;
- }
-
- > div {
- > ul.userPanelItems {
- > li {
- > a,
- > div:not(.dropdownMenu) {
- height: 21px;
- padding: 11px 11px 9px 11px;
- }
-
- > .framed > img {
- margin-top: -4px;
- }
-
- /* hide user panel labels */
- > a > span:not(.icon):not(.badge),
- &#pageLanguageContainer > div > div > div > h3 {
- display: none;
- }
-
- > a > .badge {
- top: -4px;
- }
- }
- }
-
- > .searchBar {
- height: 41px;
- min-width: 40px;
- right: 0 !important;
-
- &::before {
- font-size: 21px;
- }
-
- > form {
- display: none;
-
- input[type="search"] {
- height: 41px;
- padding-left: 40px;
- width: 100%;
- }
- }
-
- &.searchBarOpen {
- width: 100%;
-
- > form {
- display: block;
- }
- }
-
- &::before {
- top: 8px;
- }
- }
- }
- }
-}
-
-/* header logo */
-.logo {
- margin-bottom: @wcfGapLarge;
- margin-top: @wcfGapMedium;
-
- .clearfix;
-
- a {
- display: block;
-
- &:hover {
- text-decoration: none;
- }
-
- h1 {
- color: @wcfPageLinkHoverColor;
- float: right;
- font-size: @wcfHeadlineFontSize;
- padding-top: @wcfGapLarge;
-
- .textShadow(@wcfPageBackgroundColor);
- }
- }
-}
-
-.userPanel + .logo {
- margin-top: @wcfGapMedium + 43px;
-}
-
-@media only screen and (max-width: 800px) {
- .logo {
- display: none;
- }
-}
-
-/* sitemap */
-.sitemapList {
- margin: 0 -@wcfGapSmall;
-
- li {
- > a,
- > h3 {
- overflow: hidden;
- padding: @wcfGapTiny @wcfGapMedium;
- }
-
- > a {
- border-radius: 6px;
- display: block;
-
- .transition(background-color, .1s);
-
- &:hover {
- background-color: @wcfContainerHoverBackgroundColor;
- text-decoration: none;
- }
- }
- }
-
- > li {
- &:not(:first-child) {
- margin-top: @wcfGapSmall;
- }
-
- &:not(:last-child) {
- border-bottom: 1px solid @wcfContainerBorderColor;
- padding-bottom: @wcfGapSmall;
- }
-
- > ul > li {
- > a {
- padding-left: @wcfGapMedium + @wcfGapLarge;
- }
-
- > ul > li a {
- padding-left: @wcfGapMedium + @wcfGapLarge * 2;
- }
- }
- }
-}
-
-/* main menu */
-.mainMenu {
- font-size: 0;
- white-space: nowrap;
-
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-
- > ul {
- background-color: @wcfMainMenuBackgroundColor;
- display: inline-block;
-
- > li {
- display: inline-block;
- font-size: @wcfTitleFontSize;
- vertical-align: middle;
-
- > a {
- color: @wcfMainMenuColor;
- display: inline-block;
- padding: 4px 9px;
-
- .textShadow(@wcfMainMenuBackgroundColor);
-
- &:hover {
- color: @wcfMainMenuActiveColor;
- text-decoration: none;
- }
-
- > span {
- color: @wcfMainMenuColor;
-
- .textShadow(@wcfMainMenuBackgroundColor);
-
- &:hover {
- text-decoration: none;
- }
- }
- }
-
- &.active > a,
- &.active > a:hover {
- background-color: @wcfNavigationHeaderBackgroundColor;
- color: @wcfMainMenuActiveColor;
- font-weight: bold;
- text-align: center;
-
- .textShadow(@wcfNavigationHeaderBackgroundColor);
- }
-
- &:not(:last-child) > a {
- border-right: 1px solid @wcfContainerBorderColor;
- }
- }
- }
-}
-
-@media screen and (min-width: 801px), print {
- .mainMenu > ul > li {
- margin-top: -7px;
- vertical-align: bottom;
-
- > a {
- padding: 9px 21px;
- }
-
- &.active {
- font-size: @wcfSubHeadlineFontSize;
- margin-top: -8px;
-
- > a {
- min-width: 80px;
- padding: 14px 21px 8px;
- }
- }
-
- &:not(.active) {
- padding-top: 5px;
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .mainMenu > ul > li.active {
- margin-bottom: -1px;
-
- > a {
- padding-bottom: 5px;
- }
- }
-}
-
-/* navigation */
-.navigation {
- padding: 0 7px;
-
- > ul {
- display: inline-block;
- font-size: 0;
-
- &.navigationItems, &.navigationIcons {
- float: right;
-
- > li {
- float: right;
- }
- }
-
- &.navigationIcons {
- > li {
- padding: 0 3px;
-
- > a {
- display: inline-block;
- padding: 4px 3px 3px;
- }
- }
- }
-
- &.navigationItems {
- border-right: 1px dotted @wcfContainerBorderColor;
-
- > li {
- > p {
- color: @wcfLinkColor;
- }
- }
- }
-
- &.navigationItems, &.navigationMenuItems {
- > li {
- font-size: 1rem;
- margin: 4px 7px 2px;
-
- > a {
- color: @wcfLinkColor;
-
- &:hover {
- color: @wcfLinkHoverColor;
- text-decoration: none;
- }
- }
- }
- }
-
- &.navigationItems,
- &.navigationMenuItems,
- &.navigationIcons {
- .icon {
- color: @wcfLinkColor;
- }
- }
-
- &.navigationMenuItems {
- float: left;
-
- > li {
- display: inline-block;
-
- > .badge {
- top: -2px;
- }
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .navigation.navigationHeader {
- > ul.navigationIcons,
- > ul.navigationItems/*,
- > ul.navigationMenuItems*/ {
- display: none;
- }
- }
-
- .navigation.navigationFooter {
- > ul.navigationIcons,
- > ul.navigationItems {
- display: none;
- }
-
- > ul.navigationMenuItems > li {
- margin: 4px 7px 4px 0;
- }
- }
-}
-
-.navigationHeader {
- overflow: hidden;
- .clearfix;
-
- background-color: @wcfNavigationHeaderBackgroundColor;
- border-bottom: 1px solid @wcfContainerBorderColor;
- border-top: 1px solid @wcfContainerBorderColor;
-
- > ul.navigationMenuItems {
- white-space: nowrap;
- }
-}
-
-.navigationFooter {
- .clearfix;
-
- background-color: @wcfNavigationFooterBackgroundColor;
- border-top: 1px solid @wcfContainerBorderColor;
-}
-
-@media only screen and (max-width: 800px) {
- .navigationHeader {
- min-height: 4px;
- }
-}
-
-/* ### footer ### */
-.footer {
- padding-bottom: @wcfGapMedium;
- z-index: 100;
-
- .footerContent {
- text-align: center;
-
- a {
- .textShadow(@wcfPageBackgroundColor);
- .transition(color, .1s);
-
- &:hover {
- text-decoration: none;
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .footerContent {
- margin: 0 @wcfGapMedium;
- }
-}
-
-/* ### content ### */
-#main {
- background-color: @wcfContentBackgroundColor;
- border-right: 1px solid transparent; /* workaround for strange display: table issues in webkit */
- box-sizing:border-box;
- -moz-box-sizing:border-box;
- z-index: 110;
-
- &.sidebarOrientationRight {
- background-color: @wcfSidebarBackgroundColor;
- }
-
- > div {
- display: table;
- table-layout: fixed;
- width: 100%;
-
- > div {
- display: table-row;
-
- > .sidebar,
- > .content {
- display: table-cell;
- vertical-align: top;
-
- > .mobileSidebarToggleButton {
- display: none;
- }
- }
-
- > .sidebar {
- background-color: @wcfSidebarBackgroundColor;
- width: 300px;
- z-index: 120;
-
- .transition(width, .2s, ease);
-
- > span {
- /* fix for Chrome in RTL mode */
- display: inline-block;
-
- position: absolute;
-
- > .collapsibleButton {
- background-color: @wcfSidebarBackgroundColor;
- border-radius: 6px 0 0 6px;
- display: block;
- height: 24px;
- left: -20px;
- position: absolute;
- text-decoration: none;
- top: 0;
- width: 24px;
-
- &::before {
- content: "\f054";
- font-family: FontAwesome;
- font-size: 14px;
- position: absolute;
- left: 6px;
- top: 4px;
-
- .textShadow(@wcfSidebarBackgroundColor);
- }
- }
- }
-
- > div {
- overflow: hidden;
- width: 300px;
-
- .transition(width, .2s, ease);
- }
- }
-
- > .content {
- background-color: @wcfContentBackgroundColor;
- min-height: 100px;
- padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
- z-index: 130;
- }
- }
- }
-
- &:not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
- .sidebar {
- display: none;
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- /* hide sidebar */
- #main {
- position: relative;
-
- > div > div {
- > .sidebar,
- > .content {
- width: 100%;
- }
- }
-
- &.sidebarOrientationLeft {
- > div > div {
- > .sidebar {
- display: none;
-
- > div {
- width: 100%;
-
- fieldset {
- width: 100%;
- }
- }
-
- > .mobileSidebarToggleButton {
- border-radius: 0 0 0 @wcfSmallButtonBorderRadius;
- border-width: 0 0 1px 1px;
- display: block;
- right: -3px;
- position: absolute;
- top: 0;
- }
- }
-
- > .content {
- padding-top: 35px;
-
- > .mobileSidebarToggleButton {
- border-radius: 0 0 @wcfSmallButtonBorderRadius 0;
- border-width: 0 1px 1px 0;
- display: block;
- left: -3px;
- position: absolute;
- top: 0;
- }
- }
- }
- }
-
- &.sidebarOrientationRight {
- > div > div {
- > .sidebar {
- display: none;
-
- > div {
- width: 100%;
-
- fieldset {
- width: 100%;
- }
- }
-
- > .mobileSidebarToggleButton {
- border-radius: 0 0 @wcfSmallButtonBorderRadius 0;
- border-width: 0 1px 1px 0;
- display: block;
- left: -3px;
- position: absolute;
- top: 0;
- }
- }
-
- > .content {
- padding-top: 35px;
-
- > .mobileSidebarToggleButton {
- border-radius: 0 0 0 @wcfSmallButtonBorderRadius;
- border-width: 0 0 1px 1px;
- display: block;
- right: -3px;
- position: absolute;
- top: 0;
- }
- }
- }
- }
-
- &.mobileShowSidebar > div > div {
- > .sidebar {
- display: table-cell;
- padding-top: 35px;
- }
-
- > .content {
- display: none;
- }
- }
-
- .content {
- border-left: 0 !important;
- border-right: 0 !important;
- margin-left: 0;
- margin-right: 0;
- padding-left: 0 !important;
- padding-right: 0 !important;
-
- > *:first-child {
- margin-top: 0;
- }
- }
- }
-}
-
-@media only screen and (min-width: 801px) and (max-width: 1239px) {
- #main {
- > div > .content {
- padding-left: @wcfGapLarge + @wcfGapSmall;
- padding-right: @wcfGapLarge + @wcfGapSmall;
- }
- }
-}
-
-@media only screen and (min-width: 801px) {
- #main.sidebarOrientationRight.sidebarCollapsed {
- > div > div {
- > .sidebar {
- width: 20px;
-
- > span > .collapsibleButton {
- &::before {
- content: "\f053";
- }
- }
-
- > div {
- width: 0;
- }
- }
- }
- }
-}
-
-html[dir="rtl"] {
- #main.sidebarOrientationRight > div > div > .sidebar > span > .collapsibleButton::before {
- content: "\f053";
- }
-
- #main.sidebarOrientationRight.sidebarCollapsed > div > div > .sidebar > span > .collapsibleButton::before {
- content: "\f054";
- }
-}
-
-/* basic layout elements */
-.boxHeadline {
- margin-top: @wcfGapMedium;
- overflow: hidden;
-
- h1 {
- font-size: @wcfHeadlineFontSize;
- }
-
- > p {
- color: @wcfDimmedColor;
- font-size: @wcfSmallFontSize;
- }
-
- > .dataList,
- > .inlineDataList {
- color: @wcfDimmedColor;
- font-size: @wcfSmallFontSize;
- }
-}
-
-.boxHeadline > h1,
-.boxSubHeadline > h2 {
- color: @wcfHeadlineColor;
- font-family: @wcfHeadlineFontFamily;
- font-weight: bold;
-
- .textShadow(@wcfContentBackgroundColor);
-
- a {
- color: @wcfHeadlineColor;
- text-decoration: none;
- }
-}
-
-.boxSubHeadline {
- > h2 {
- font-size: @wcfSubHeadlineFontSize;
- }
-}
-
-@media only screen and (max-width: 800px) {
- .boxHeadline {
- margin-top: @wcfGapSmall;
- margin-left: @wcfGapSmall;
- margin-right: @wcfGapSmall;
- }
-}
-
-@media only screen and (min-width: 641px) and (max-width: 800px) {
- .boxHeadline {
- margin-left: @wcfGapMedium;
- margin-right: @wcfGapMedium;
- }
-}
-
-.contentNavigation {
- display: table;
- width: 100%;
-
- > * {
- margin-top: @wcfGapMedium;
- }
-
- > nav.pageNavigation > ul {
- float: left;
- }
-
- > nav:not(.pageNavigation) > ul:not(.buttonGroup) {
- margin-right: 2px;
- float: right;
- .buttonList;
-
- > li {
- &:not(:last-child) {
- margin-right: 0;
- }
-
- &:not(:first-child) {
- margin-left: 8px;
- }
- }
- }
-
- > nav:not(.pageNavigation) > ul.buttonGroup {
- float: right;
- }
-
- > nav:not(.pageNavigation) + nav.jsClipboardEditor > ul,
- > nav:not(.pageNavigation) + nav > ul.buttonGroup {
- margin-right: 8px;
- }
-}
-
-@media only screen and (max-width: 800px) {
- .contentNavigation {
- box-sizing:border-box;
- -moz-box-sizing:border-box;
- -webkit-box-sizing:border-box;
- padding-left: @wcfGapSmall;
- padding-right: @wcfGapSmall;
- }
-}
-
-@media only screen and (min-width: 641px) and (max-width: 800px) {
- .contentNavigation {
- padding-left: @wcfGapMedium;
- padding-right: @wcfGapMedium;
- }
-}
-
-.container {
- background-color: @wcfContainerBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
-}
-
-.containerPadding {
- padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium;
-}
-
-@media only screen and (max-width: 800px) {
- .container {
- border-width: 1px 0;
- }
-
- .containerPadding {
- padding: @wcfGapSmall;
- }
-}
-
-@media only screen and (min-width: 641px) and (max-width: 800px) {
- .containerPadding {
- padding-left: @wcfGapMedium;
- padding-right: @wcfGapMedium;
- }
-}
-
-.containerHeadline {
- > h3 {
- font-size: @wcfTitleFontSize;
- font-weight: bold;
-
- > small {
- color: @wcfDimmedColor;
- font-weight: normal;
- text-shadow: none;
- white-space: nowrap;
- word-wrap: normal;
- }
-
- > .badge {
- top: -1px;
- }
- }
-
- > h3, > h3 > a {
- .textShadow(@wcfContainerBackgroundColor);
- }
-
- + * {
- margin-top: @wcfGapSmall;
- }
-}
-
-.containerList {
- > li {
- padding: @wcfGapMedium @wcfGapLarge;
-
- .transition(background-color, .1s);
-
- &:nth-child(even) {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- &:hover {
- background-color: @wcfContainerHoverBackgroundColor;
-
- > div > div {
- > .buttonGroupNavigation > .buttonList {
- opacity: 1;
- }
-
- > .containerHeadline > .containerContentType {
- color: @wcfDimmedColor;
- }
- }
- }
-
- &.showMore {
- text-align: center;
-
- > button {
- padding-left: 30px;
- padding-right: 30px;
- }
-
- > small {
- color: @wcfDimmedColor;
- }
- }
-
- > div > div {
- position: relative;
-
- > .buttonGroupNavigation {
- margin-top: 0;
- position: absolute;
- right: 0;
- top: 0;
-
- > .buttonList {
- opacity: 0;
-
- .transition(opacity, .1s);
- }
- }
-
- > .containerHeadline {
- > .containerContentType {
- color: lighten(@wcfDimmedColor, 20%);
- position: absolute;
- right: 0;
- top: 3px;
-
- .transition(color, .1s);
- }
-
- .newContentBadge {
- //background-color: darken(@wcfTabularBoxBackgroundColor, 10%);
- color: @wcfTabularBoxColor;
- text-transform: uppercase;
-
- .textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));
- .linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
- }
- }
- }
- }
-
- > * > li {
- padding: @wcfGapMedium @wcfGapLarge;
- }
-
- &.styleList > li > div.box64 {
- > span {
- text-align: center;
- width: 110px;
- }
-
- > div {
- margin-left: 115px;
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .containerList {
- > li {
- padding: @wcfGapSmall;
-
- .containerContentType {
- display: none;
- }
- }
-
- &.infoBoxList {
- > li.box32 {
- > span.icon {
- display: none;
- }
-
- > div {
- margin-left: 0;
- }
- }
- }
- }
-}
-
-@media only screen and (min-width: 641px) and (max-width: 800px) {
- .containerList {
- > li {
- padding: @wcfGapSmall @wcfGapMedium;
- }
- }
-}
-
-@media screen and (min-width: 1240px) {
- .containerList {
- &.doubleColumned {
- overflow: hidden;
-
- > li {
- padding: 0;
- float: left;
- width: 50%;
- height: 90px;
- overflow: hidden;
-
- &:nth-child(even) {
- float: right;
- }
-
- &:nth-child(4n), &:nth-child(4n+1) {
- background-color: @wcfContainerBackgroundColor;
- }
-
- &:nth-child(4n+2), &:nth-child(4n+3) {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- &:hover {
- background-color: @wcfContainerHoverBackgroundColor;
- }
-
- > div {
- padding: @wcfGapMedium @wcfGapLarge;
- }
- }
-
- &::after {
- content: "";
- display: table;
- clear: left;
- }
- }
- }
-}
-
-.nestedCategoryList {
- > li {
- margin-top: @wcfGapMedium;
- overflow: hidden;
-
- &:first-child {
- margin-top: 0;
- }
-
- > div {
- padding: 0 @wcfGapMedium;
-
- > ol {
- margin-top: 0;
-
- > li {
- display: inline-block;
- font-size: @wcfSmallFontSize;
- }
- }
- }
- }
-}
-
-.flexibleCategoryList {
- position: relative;
-
- > li {
- margin-bottom: @wcfGapMedium;
-
- > ol {
- margin-left: @wcfGapLarge;
- }
-
- > ol > li > ol {
- margin-bottom: @wcfGapSmall;
- margin-left: @wcfGapLarge;
-
- > li {
- font-size: @wcfSmallFontSize;
- }
- }
- }
-}
-
-@media all and (min-width: 801px) {
- .nestedCategoryList.doubleColumned {
- > li {
- float: left;
- width: 50%;
-
- &:nth-child(odd):not(:first-child) {
- clear: left;
- }
-
- &:nth-child(2) {
- margin-top: 0;
- }
- }
-
- &::after {
- content: "";
- display: table;
- clear: left;
- }
- }
-
- .flexibleCategoryList:not(.flexibleCategoryListDisabled) {
- /* WebKit */
- -webkit-column-count: 2;
-
- /* Firefox */
- -moz-column-count: 2;
-
- /* CSS 3 / Internet Explorer */
- column-count: 2;
-
- > li {
- /* WebKit */
- -webkit-column-break-inside: avoid;
-
- /* CSS 3 / Internet Explorer */
- break-inside: avoid;
-
- > ol > li > ol {
- font-size: 0;
-
- > li {
- display: inline-block;
- }
- }
- }
- }
-
- /* Firefox */
- @-moz-document url-prefix() {
- .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li {
- display: block;
- overflow: hidden;
- }
- }
-}
-
-.sidebarNestedCategoryList {
- ol {
- margin-left: @wcfGapMedium;
- }
-
- li {
- margin: 6px 0;
- position: relative;
-
- > span {
- position: absolute;
- right: 0;
- top: 2px;
- }
-
- > a {
- display: block;
- overflow: hidden;
- padding-right: 45px;
- text-overflow: ellipsis;
- }
-
- &.active > a {
- font-weight: bold;
- }
- }
-}
-
-.containerBoxList {
- margin-bottom: -@wcfGapSmall;
-
- > li {
- margin-bottom: @wcfGapSmall;
-
- > div {
- overflow: hidden;
- white-space: nowrap;
- word-wrap: normal;
- }
- }
-}
-
-@media all and (min-width: 801px) {
- .containerBoxList {
- &.doubleColumned,
- &.tripleColumned {
- .clearfix();
-
- > li {
- float: left;
-
- > div {
- margin-right: @wcfGapLarge;
- }
- }
- }
-
- &.doubleColumned {
- > li {
- width: 50%;
-
- &:nth-child(odd):not(:first-child) {
- clear: left;
- }
- }
- }
-
- &.tripleColumned {
- > li {
- width: 33%;
-
- &:nth-child(3n+1):not(:first-child) {
- clear: left;
- }
- }
- }
- }
-}
-
-/* boxes with an image */
-.box(@imageSize, @gapOffset: 0) {
- /* using a min-height prevents us from clearing (which causes a lot of issues) */
- min-height: @imageSize + 4px;
-
- > :first-child {
- float: left;
- }
-
- > *:not(:first-child) {
- margin-left: (@imageSize + @gapOffset);
- }
-
- > .framed ~ * {
- margin-left: (@imageSize + @gapOffset) + 4px;
- }
-}
-
-.box16 { .box(16px, 4px); }
-.box24 { .box(24px, 4px); }
-.box32 { .box(32px, 7px); }
-.box48 { .box(48px, 7px); }
-.box64 { .box(64px, 7px); }
-.box96 { .box(96px, 11px); }
-.box128 { .box(128px, 11px); }
-.box256 { .box(256px, 21px); }
-
-/* bread crumbs */
-.breadcrumbs {
- box-sizing: border-box;
- overflow: hidden;
- position: relative;
- text-align: left;
-
- > ul {
- .clearfix;
-
- > li {
- float: left;
- font-size: @wcfSmallFontSize;
- list-style: none;
- max-width: 30%;
- padding-right: 10px;
- position: relative;
-
- &:first-child > a {
- &::before {
- content: "\f015";
- display: inline-block;
- font-family: FontAwesome;
- font-size: 14px;
- margin: -3px 7px -3px 0;
- vertical-align: -1px;
- }
- }
-
- > a {
- color: @wcfColor;
- display: block;
- overflow: hidden;
- padding: 5px 1px 5px 5px;
- text-decoration: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- word-wrap: normal;
-
- .textShadow(@wcfContentBackgroundColor);
- }
-
- > .pointer {
- padding: 5px 0;
- position: absolute;
- top: 0;
- right: 0;
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .content > .breadcrumbs {
- background-color: @wcfContentBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- border-radius: 6px;
- display: inline-block;
- margin-left: @wcfGapSmall;
- margin-right: @wcfGapSmall;
- max-width: 90%;
-
- > ul {
- > li {
- float: none;
- max-width: none;
- padding-right: 0;
-
- &:not(:last-child) {
- display: none;
- }
-
- > a {
- padding: @wcfGapTiny @wcfGapMedium;
-
- &::before {
- content: "\f062";
- font-family: FontAwesome;
- font-size: 14px;
- padding-right: @wcfGapSmall;
- }
- }
-
- > .pointer {
- display: none;
- }
- }
- }
-
- /* hide second breadcrumbs */
- ~ .breadcrumbs {
- display: none;
- }
- }
-}
-
-@media only screen and (min-width: 641px) and (max-width: 800px) {
- .content > .breadcrumbs {
- margin-left: @wcfGapMedium;
- margin-right: @wcfGapMedium;
- }
-}
-
-.smallBreadcrumbs {
- > li {
- display: inline;
- font-size: @wcfSmallFontSize;
- }
-}
-
-.ui-helper-hidden {
- display: none;
-}
-
-.ui-helper-hidden-accessible {
- position: absolute !important;
- clip: rect(1px 1px 1px 1px);
- clip: rect(1px,1px,1px,1px);
-}
-
-/* ### tabular boxes ### */
-.tabularBox {
- background-color: @wcfTabularBoxBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
-
- > .container {
- border: 0;
- }
-}
-
-.tabularBoxTitle > header {
- color: @wcfTabularBoxColor;
- padding: 5px 7px;
-
- > h2 {
- font-size: @wcfTitleFontSize;
- font-weight: bold;
-
- .textShadow(@wcfTabularBoxBackgroundColor);
-
- > a {
- color: @wcfTabularBoxColor;
-
- &:hover {
- color: @wcfTabularBoxHoverColor;
- text-decoration: none;
- }
- }
- }
-
- .icon {
- color: @wcfTabularBoxColor;
-
- .textShadow(@wcfTabularBoxBackgroundColor);
- }
-}
-
-@media only screen and (max-width: 800px) {
- .tabularBox {
- border-width: 1px 0;
- }
-
- .tabularBoxTitle {
- border-top-width: 0;
- }
-}
-
-@media only screen and (min-width: 641px) and (max-width: 800px) {
- .tabularBoxTitle > header {
- padding-left: @wcfGapMedium;
- padding-right: @wcfGapMedium;
- }
-}
-
-.table,
-.cke_wysiwyg_div 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;
- }
- }
- }
-}
-
-@media screen and (max-width: 800px) {
- .responsiveTable {
- display: block;
-
- thead, tbody, th, td, tr {
- display: block;
- }
-
- thead tr {
- display: none;
- }
-
- tr {
- border: 1px solid @wcfContainerBorderColor;
- border-top-width: 0;
-
- &:last-child {
- border-bottom-width: 0;
- }
- }
-
- td {
- text-align: left !important;
- max-width: none !important;
- width: auto !important;
- }
- }
-}
-
-/* ### definition lists ### */
-dl.statsDataList {
- > dt {
- color: @wcfDimmedColor;
- display: block;
- float: right;
- font-size: @wcfSmallFontSize;
- line-height: 1.5;
- overflow: hidden;
- text-align: left;
- white-space: nowrap;
- width: 62%;
- word-wrap: normal;
-
- > a {
- text-decoration: none;
- }
-
- &:not(:first-child) {
- clear: both;
- }
- }
-
- > dd {
- color: @wcfColor;
- float: left;
- font-weight: bold;
- margin: 0;
- overflow: hidden;
- text-align: right;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 35%;
- word-wrap: normal;
-
- > a {
- text-decoration: none;
- }
- }
-
- &::after {
- display: table;
- content: "";
- clear: both;
- }
-}
-
-dl.inlineDataList {
- overflow: hidden;
- /*white-space: nowrap;*/
-
- > dd {
- display: inline-block;
- margin: 0 @wcfGapTiny 0 0;
- padding: 0;
- }
-
- > dt {
- color: @wcfDimmedColor;
- display: inline-block;
- margin: 0;
- text-align: left;
- width: auto;
-
- &::after {
- content: ":";
- }
- }
-}
-
-dl.dataList {
- .clearfix;
-
- dt {
- color: @wcfDimmedColor;
- clear: right;
- float: left;
- margin-right: @wcfGapTiny;
- text-align: left;
-
- &::after {
- content: ":";
- }
- }
-
- dd {
- float: right;
- text-align: right;
-
- &:not(:last-child) {
- margin-bottom: 3px;
- }
- }
-}
-
-ul.inlineDataList, ul.dataList {
- li {
- display: inline-block;
-
- &:not(:last-child)::after {
- content: ",";
- }
- }
-}
-
-ul.inlineDataList {
- display: inline-block;
-}
-
-/* ### page navigation ### */
-.contentNavigation .pageNavigation {
- float: left;
- margin: @wcfGapMedium + 5 0 3px;
-
- ul li {
- margin: 0 2px;
- }
-}
-
-.pageNavigation {
- ul {
- li {
- border-radius: @wcfSmallButtonBorderRadius;
- float: left;
- font-weight: bold;
- margin: 0 1px;
- min-width: 19px;
- padding: 0;
- text-align: center;
-
- &:not(.active):not(.disabled) {
- cursor: pointer;
- }
-
- &.disabled {
- background-image: none;
- border: 1px solid rgba(0, 0, 0, .1);
- cursor: not-allowed;
- }
-
- &.skip {
- > a {
- padding: 2px 0 1px;
- }
-
- > span {
- padding: 3px 0 1px;
- }
- }
-
- &:not(.disabled):hover > a {
- color: @wcfButtonHoverColor;
- }
-
- &:not(.skip) > a {
- padding: 2px 3px;
- }
-
- &.active {
- > span {
- padding: 2px 3px;
- }
- }
-
- > a {
- color: @wcfButtonColor;
- display: block;
- text-decoration: none;
-
- .textShadow(@wcfButtonBackgroundColor);
- }
-
- > span:not(.invisible) {
- display: inline-block;
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .pageNavigation {
- > ul > li {
- &:not(.skip):not(.active) {
- display: none;
- }
-
- &:nth-last-child(2):not(.active) {
- display: block;
- }
-
- &.active {
- > span {
- &.invisible {
- display: inline-block;
- }
-
- &:not(.invisible) {
- display: none;
- }
- }
- }
- }
- }
-}
-
-.statusDisplay .pageNavigation {
- font-size: @wcfSmallFontSize;
- float: left;
- margin-top: 2px;
-
- ul {
- li {
- min-width: 13px;
-
- &:not(.skip) a {
- padding: 1px;
- }
- }
- }
-}
-
-/* ### sidebar ### */
-.sidebar > div > fieldset:not(:last-child), .sidebar > div > div:not(:last-child) {
- border-bottom: 1px solid @wcfContainerBorderColor;
- margin-bottom: @wcfGapMedium;
-}
-
-.sidebar.collapsibleMenu > div > fieldset, .sidebar.collapsibleMenu > div > div {
- border-bottom-width: 0;
-}
-
-.sidebar {
- padding: @wcfGapLarge 0 @wcfGapSmall;
-
- fieldset {
- padding: @wcfGapSmall @wcfGapMedium @wcfGapMedium;
- margin-top: 0;
-
- /* collapsed sidebar overflow fix */
- box-sizing:border-box;
- -moz-box-sizing:border-box; /* firefox */
- min-width: 300px; /* webkit */
- width: 300px; /* firefox */
-
- > legend {
- border-width: 0;
- color: @wcfColor;
- font-family: @wcfBaseFontFamily;
- font-weight: normal;
- font-size: 1rem;
- padding: 0;
- text-transform: uppercase;
-
- .textShadow(@wcfSidebarBackgroundColor);
-
- > .badge {
- float: right;
- }
-
- > a {
- color: @wcfColor;
- text-decoration: none;
- }
-
- &.invisible + div {
- margin-top: -@wcfGapSmall;
- }
- }
-
- &::after {
- content: "";
- height: 0;
- display: block;
- clear: both;
- }
-
- .button.more {
- margin: 5px 0 0;
- float: right;
- }
-
- > nav {
- margin: 0 -@wcfGapMedium 0;
-
- ul {
- > li {
- &.active {
- background-color: @wcfContentBackgroundColor;
-
- > a {
- font-weight: bold;
- }
- }
-
- &:hover:not(.active) {
- > a {
- color: @wcfLinkHoverColor;
- }
- }
-
- > a {
- color: @wcfLinkColor;
- display: block;
- padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall @wcfGapLarge;
-
- .textShadow(@wcfSidebarBackgroundColor);
-
- &:hover {
- text-decoration: none;
- }
- }
- }
- }
- }
- }
-
- .sidebarBoxList > li:not(:last-child) {
- margin-bottom: 7px;
- }
-
- .sidebarBoxList {
- overflow: hidden;
- }
-
- .sidebarBoxHeadline {
- > h3 {
- color: @wcfLinkColor;
- margin-bottom: 1px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- word-wrap: normal;
-
- .textShadow(@wcfSidebarBackgroundColor);
-
- a {
- .textShadow(@wcfSidebarBackgroundColor);
- }
-
- small {
- text-shadow: none;
- }
- }
- }
-
- .formSubmit {
- margin-bottom: @wcfGapMedium;
- margin-top: 0;
- width: 300px;
- }
-
- &.collapsibleMenu {
- legend {
- color: @wcfLinkColor;
- cursor: pointer;
- font-weight: bold;
- font-size: 1.3rem;
- padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
- position: relative;
- margin-left: -@wcfGapMedium;
- text-transform: none;
-
- &::before {
- content: "\f054";
- display: inline-block;
- font-family: FontAwesome;
- font-size: 14px;
- height: 16px;
- left: 21px;
- position: absolute;
- text-align: center;
- top: 2px;
- width: 16px;
- }
-
- &.active::before {
- content: "\f078";
- }
- }
-
- nav {
- ul {
- > li {
- > a {
- padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
- }
- }
- }
- }
- }
-
- dl.dataList {
- font-size: @wcfSmallFontSize;
- overflow: hidden;
- }
-
- /* @deprecated */
- dl.inlineDataList {
- font-size: @wcfSmallFontSize;
-
- > dt {
- float: left;
- }
-
- > dd {
- display: block;
- padding-right: @wcfGapMedium;
- text-align: right;
- }
- }
-}
-
-.sideBySide {
- display: table;
- table-layout: fixed;
- width: 100%;
-
- > * {
- display: table-cell;
- width: 50%;
- }
-}
-
-/* ad locations */
-.wcfAdLocation {
- overflow: hidden;
-}
-
-.wcfAdLocationHeaderContent,
-.wcfAdLocationFooterContent,
-.wcfAdLocationFooterBottom {
- text-align: center;
-
- > div {
- display: inline-block;
- text-align: left;
- }
-}
-
-.wcfAdLocationHeaderContent {
- margin-top: @wcfGapSmall;
-}
-
-.wcfAdLocationFooterContent,
-.wcfAdLocationFooterBottom {
- margin-top: @wcfGapMedium;
-}
-
-.wcfAdLocationSidebarTop,
-.wcfAdLocationSidebarBottom {
- padding: 0 @wcfGapMedium @wcfGapMedium;
- text-align: center;
-
- > div {
- display: inline-block;
- text-align: left;
- }
-}
-
-.wcfAdLocationLogo {
- float: right;
- padding: @wcfGapMedium @wcfGapMedium 0 @wcfGapMedium;
-}
-
-/* print version */
-@media print {
- * {
- background-color: transparent !important;
- background-image: none !important;
- box-shadow: none !important;
- color: #000 !important;
- text-shadow: none !important;
- }
-
- html, body {
- font-size: 12pt !important;
- }
-
- .badge {
- &::before {
- content: "[";
- }
-
- &::after {
- content: "]";
- }
- }
-
- .content {
- padding-left: 0 !important;
- padding-right: 0 !important;
- }
-
- .logo {
- margin-top: 14px !important;
- }
-
- a.externalURL::after {
- content: " (" attr(href) ")";
- font-size: .85rem;
- }
-
- .sidebar,
- .button,
- .navigationIcons,
- .navigationMenuItems,
- .navigationHeader,
- .userPanel,
- .styleChooser {
- display: none !important;
- }
-
-}
-
-/*
-This is a dirty fix for a broken gutter / line number width calculation in Internet Explorer
-see: http://beta.woltlab.com/index.php/Thread/3874-Kosmetik-Darstellungsfehler-IE10-Stil-bearbeiten/?postID=32177#post32177
-*/
-.CodeMirror-linenumber {
- min-width: 32px !important;
-}
-
-/* More line height for better readability */
-.CodeMirror-lines {
- line-height: 1.2;
-}
-
-/* Force LTR in RTL languages */
-.CodeMirror {
- direction: ltr;
-}
-
-/* twitter timeline on ACP index */
-#news-twitter-timeline > iframe {
- width: 100% !important;
-}
-
-/* jQuery UI resizable */
-.ui-resizable { position: relative;}
-.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
-.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
-.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
-.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
-.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
-.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
-.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
-.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
-.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
-.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
-
-/* PerfectScrollbar plugin */
-.ps-container {
- &:hover > .ps-scrollbar-y-rail > .ps-scrollbar-y {
- background-color: rgba(102, 102, 102, .6);
- }
-
- &.ps-active-y > .ps-scrollbar-y-rail {
- display: block;
- }
-
- > .ps-scrollbar-y-rail {
- background-color: rgba(102, 102, 102, 0);
- border-radius: 4px;
- bottom: 0;
- display: none;
- position: absolute;
- right: 2px;
- width: 8px;
-
- .transition(background-color, .3s, linear);
-
- &:hover {
- background-color: rgba(102, 102, 102, .3);
- }
-
- > .ps-scrollbar-y {
- background-color: rgba(102, 102, 102, 0);
- border-radius: 4px;
- position: relative;
-
- .transition(background-color, .3s, linear);
- }
- }
-}
+++ /dev/null
-/* ### message groups ### */
-.messageGroupList {
- .columnSubject {
- > .labelList {
- float: right;
- padding-left: 7px;
- }
-
- > h3 {
- > .messageGroupLink {
- font-size: @wcfTitleFontSize;
- }
-
- > .badge.label {
- top: -2px;
- }
- }
-
- > small {
- display: block;
- }
-
- > nav {
- font-size: @wcfSmallFontSize;
-
- > ul > li {
- display: inline;
- }
- }
- }
-
- tr {
- &.new .columnSubject > h3 > .messageGroupLink {
- font-weight: bold;
- }
-
- &.new .columnAvatar div > p > img,
- &:hover .columnAvatar div > p > img {
- opacity: 1;
- }
-
- &.messageDisabled {
- color: @wcfDisabledColor;
-
- > td {
- background-color: @wcfDisabledBackgroundColor !important;
- }
-
- a:not(.badge) {
- color: @wcfDisabledColor;
- }
- }
-
- &.messageDeleted {
- color: @wcfDeletedColor;
-
- > td {
- background-color: @wcfDeletedBackgroundColor !important;
- }
-
- a:not(.badge) {
- color: @wcfDeletedColor;
- }
- }
-
- .columnSubject .statusDisplay .pageNavigation {
- opacity: 0;
-
- .transition(opacity, .2s);
- }
-
- &:hover .columnSubject .statusDisplay .pageNavigation {
- opacity: 1;
- }
-
- &.new .columnAvatar > div {
- &::after {
- color: @wcfLinkColor;
- content: "\f069";
- font-family: FontAwesome;
- font-weight: normal !important;
- font-style: normal !important;
- font-size: 14px;
- position: absolute;
- text-decoration: none !important;
- top: -4px;
- right: -2px;
-
- .textShadow(@wcfContainerBackgroundColor);
- }
- }
- }
-
- .columnAvatar {
- div {
- position: relative;
- width: 40px;
- height: 38px;
-
- > p > img {
- opacity: .6;
-
- .transition(opacity, .2s);
- }
- }
-
- .myAvatar {
- position: absolute;
- width: 16px;
- height: 16px;
- bottom: -2px;
- left: 24px;
- opacity: 1;
-
- .boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
- }
- }
-
- .columnLastPost {
- white-space: nowrap;
- word-wrap: normal;
-
- > div > div > small {
- color: @wcfDimmedColor;
- }
- }
-
- .messageGroupInfo {
- font-size: @wcfSmallFontSize;
-
- > li {
- display: inline-block;
-
- &:not(:first-child)::before {
- content: " - ";
- }
- }
-
- &.mobileOptimization {
- > li {
- &.messageGroupLastPoster,
- &.messageGroupLastPostTime {
- display: none;
- }
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .messageGroupList {
- .messageGroupInfo.mobileOptimization {
- > li {
- &.messageGroupAuthor,
- &.messageGroupTime {
- display: none;
- }
-
- &.messageGroupLastPoster,
- &.messageGroupLastPostTime {
- display: inline-block;
- }
-
- &.messageGroupLastPoster::before {
- display: none;
- }
- }
- }
- }
-}
-
-/* ### messages ### */
-@media only screen and (min-width: 801px) {
- .messageList {
- .messageGroupStarter {
- position: relative;
-
- > .message::after {
- content: "\f005";
- font-family: FontAwesome;
- font-size: 14px;
- display: block;
- left: 4px;
- position: absolute;
- top: 2px;
-
- .textShadow(@wcfSidebarBackgroundColor);
- }
-
- > .message.messageSidebarOrientationRight::after {
- left: auto;
- right: 4px;
- }
- }
- }
-}
-
-.message {
- background-color: @wcfContainerHoverBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- //overflow: hidden; /* todo: fixes floating issues when using message on pages with a sidebar */
- position: relative;
-
- &:hover {
- .messageHeader .messageQuickOptions > li {
- opacity: 1;
- }
-
- .messageOptions nav {
- opacity: 1;
- }
- }
-
- &.messageDisabled:not(.messageReduced) {
- background-color: @wcfDisabledBackgroundColor;
-
- .messageSidebar {
- color: @wcfDisabledColor;
-
- a {
- color: @wcfDisabledColor;
- }
- }
- }
-
- &.messageDeleted:not(.messageReduced) {
- background-color: @wcfDeletedBackgroundColor;
-
- .messageSidebar {
- color: @wcfDeletedColor;
-
- a {
- color: @wcfDeletedColor;
- }
- }
- }
-
- &.jsMarked:not(.messageReduced) {
- background-color: @wcfSelectedBackgroundColor;
-
- .messageSidebar {
- color: @wcfSelectedColor;
-
- a {
- color: @wcfSelectedColor;
- }
- }
- }
-
- .messageOptions {
- font-size: @wcfSmallFontSize;
- position: relative;
-
- &.forceHidden nav {
- display: none !important;
- }
-
- &.forceOpen nav {
- opacity: 1;
- }
-
- nav {
- bottom: -2px;
- opacity: 0;
- position: absolute;
- right: -22px;
- text-align: right;
-
- .transition(opacity, .1s);
-
- ul.smallButtons {
- > li {
- a.button {
- border-radius: 0;
- }
- }
- }
- }
- }
-
- .messageHeader {
- .messageQuickOptions {
- float: right;
-
- > li {
- display: inline-block;
- opacity: .6;
-
- .transition(opacity, .2s);
-
- span.icon {
- color: @wcfDimmedColor;
-
- .transition(color, .2s);
- }
-
- > a:hover > span.icon {
- color: @wcfLinkColor;
- }
-
- > .badge {
- top: -2px;
- }
- }
-
- input[type=checkbox] {
- position: relative;
- top: 1px;
- }
- }
-
- .permalink {
- color: @wcfDimmedColor;
- }
- }
-
- &.dividers {
- .userCredits {
- border-top: 1px solid @wcfContainerBorderColor;
- }
- }
-}
-
-.touch {
- .message .messageOptions nav {
- opacity: 1;
- }
-
- .messageBody > footer {
- padding-bottom: @wcfGapLarge + @wcfGapSmall;
- }
-}
-
-@media only screen and (max-width: 800px) {
- .message {
- border-width: 1px 0;
- }
-}
-
-/* sidebars orientations */
-.message.messageSidebarOrientationLeft {
- .messageContent {
- border-left: 1px solid @wcfContainerBorderColor;
- margin: 0 0 0 211px;
- }
-
- .messageSidebar {
- float: left;
- }
-}
-
-.message.messageSidebarOrientationRight {
- .messageContent {
- border-right: 1px solid @wcfContainerBorderColor;
- margin: 0 211px 0 0;
- }
-
- .messageSidebar {
- float: right;
- }
-}
-
-/* pointer */
-.message.messageSidebarOrientationLeft,
-.message.messageSidebarOrientationRight {
- .messageHeader {
- &::before,
- &::after {
- border-width: 20px;
- content: "";
- display: block;
- height: 0;
- position: absolute;
- top: 35px;
- width: 0;
- }
-
- &::before {
- z-index: 100;
- }
-
- &::after {
- z-index: 101;
- }
- }
-}
-
-.message.messageSidebarOrientationLeft {
- .messageHeader {
- &::before,
- &::after {
- border-style: inset solid inset none;
- }
-
- &::before {
- border-color: transparent @wcfContainerBorderColor transparent transparent;
- left: -20px;
- }
-
- &::after {
- border-color: transparent @wcfContainerBackgroundColor transparent transparent;
- left: -19px;
- }
- }
-}
-
-.message.messageSidebarOrientationRight {
- .messageHeader {
- &::before,
- &::after {
- border-style: inset none inset solid;
- }
-
- &::before {
- border-color: transparent transparent transparent @wcfContainerBorderColor;
- right: -20px;
- }
-
- &::after {
- border-color: transparent transparent transparent @wcfContainerBackgroundColor;
- right: -19px;
- }
- }
-}
-
-/* new message badge */
-.message .newMessageBadge {
- color: @wcfTabularBoxColor;
- display: block;
- font-size: @wcfSmallFontSize;
- font-weight: bold;
- padding: 6px 10px;
- position: absolute;
- text-transform: uppercase;
- top: 24px;
-
- .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
- .linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
- .textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));
-
- &::before {
- border-bottom: 4px solid darken(@wcfTabularBoxBackgroundColor, 20%);
- content: "";
- display: block;
- position: absolute;
- top: -4px;
- }
-}
-
-.message.messageSidebarOrientationLeft .newMessageBadge {
- border-radius: 0 5px 5px 0;
- left: -219px;
-
- &::before {
- border-left: 6px solid transparent;
- left: 0;
- }
-}
-
-.message.messageSidebarOrientationRight .newMessageBadge {
- right: -219px;
-}
-
-.message.messageReduced .newMessageBadge {
- right: -7px;
- top: 21px;
-}
-
-.message.messageSidebarOrientationRight,
-.message.messageReduced {
- .newMessageBadge {
- border-radius: 5px 0 0 5px;
-
- &::before {
- border-right: 6px solid transparent;
- right: 0;
- }
- }
-}
-
-.messageBody {
- color: @wcfColor;
- display: block;
- line-height: 1.5;
-
- > div:not(.messageFooter):not(.redactor-box):not(.messageTabMenu) {
- overflow: hidden;
- padding-bottom: @wcfGapMedium;
-
- > div.messageText {
- img {
- max-width: 100%;
- }
-
- table img {
- max-width: none;
- }
- }
- }
-
- > footer {
- padding-bottom: @wcfGapMedium;
- }
-
- > .messageSignature {
- color: @wcfDimmedColor;
-
- img {
- max-height: ~"@{wcf_option_signature_max_image_height}px";
- }
- }
-
- .messageFooter {
- > *:not(:first-child) {
- margin-top: @wcfGapSmall;
- }
- }
-}
-
-.messageTextPreview {
- img {
- max-width: 100%;
- }
-
- table img {
- max-width: none;
- }
-}
-
-@messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%);
-@messageFooterNoteGradientColor2: fade(@messageFooterNoteGradientColor, 0%);
-.messageFooterNote {
- border-left: 2px solid @wcfContainerBorderColor;
- color: @wcfDimmedColor;
- font-size: @wcfSmallFontSize;
- padding: @wcfGapTiny @wcfGapSmall;
-
- .linearGradientNative(~"90deg, @{messageFooterNoteGradientColor} 0%, @{messageFooterNoteGradientColor2} 40%");
-}
-
-// rtl fix
-html[dir='rtl'] {
- .messageFooterNote {
- .linearGradientNative(~"270deg, @{messageFooterNoteGradientColor} 0%, @{messageFooterNoteGradientColor2} 40%");
- }
-}
-
-.messageHeader + .messageBody > div:first-child:not(.redactor-box),
-.messageBody > div:not(.messageFooter):not(.messageTabMenu):not(.redactor-box):not(:first-child) {
- border-top: 1px dotted @wcfContainerBorderColor;
- padding: @wcfGapMedium 0;
-}
-
-.message .messageBody {
- padding: @wcfGapMedium @wcfGapLarge 1px;
-}
-
-.message .messageContent {
- background-color: @wcfContainerBackgroundColor;
-
- .messageHeader {
- padding: @wcfGapMedium @wcfGapLarge 0;
- position: relative;
-
- .messageHeadline {
- > h1 {
- color: @wcfColor;
- font-size: @wcfSubHeadlineFontSize;
- font-weight: bold;
- overflow: hidden;
- padding-right: 21px; // reserved space for new badge
- text-overflow: ellipsis;
-
- .textShadow(@wcfContainerBackgroundColor);
-
- + p {
- margin-top: 2px;
- }
- }
-
- > p {
- font-size: @wcfSmallFontSize;
-
- > .likesBadge {
- margin: -2px 0 -1px 4px;
- }
-
- > .username::after {
- content: " - ";
- }
- }
- }
-
- .box32 > .messageHeadline > p:first-child {
- font-size: 1rem;
-
- > .username {
- font-size: @wcfTitleFontSize;
- font-weight: bold;
-
- .textShadow(@wcfContainerBackgroundColor);
- }
-
- > .username {
- display: block;
- }
-
- > .username::after {
- content: "";
- }
-
- > .likesBadge {
- font-size: @wcfSmallFontSize;
- top: -1px;
- }
- }
- }
-}
-
-.message .messageSidebar {
- line-height: 1.3;
- margin-bottom: -1px;
- padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge;
- position: relative;
- text-align: center;
- width: 170px; /* Width toggle */
-
- &::after {
- clear: both;
- content: '';
- display: block;
- }
-
- header .username {
- color: @wcfLinkColor;
- font-size: @wcfTitleFontSize;
- font-weight: bold;
- padding: 0 3px 1px;
-
- .textShadow(@wcfContainerHoverBackgroundColor);
-
- a {
- text-decoration: none;
- }
- }
-
- .userTitle {
- margin: 7px 0 0;
- }
-
- .userRank {
- margin: 2px 0 0;
- }
-
- .userAvatar {
- display: inline-block;
- margin: @wcfGapSmall 0 0;
- position: relative;
- text-align: left;
-
- > .badgeOnline {
- border-radius: 0 5px 5px 0;
- color: rgba(238, 255, 238, 1);
- bottom: 7px;
- left: -5px;
- position: absolute;
- text-transform: uppercase;
-
- .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
- .linearGradient(darken(rgba(0, 153, 0, 1), 10%), rgba(0, 153, 0, 1), darken(rgba(0, 153, 0, 1), 10%));
- .textShadow(darken(rgba(0, 153, 0, 1), 10%));
-
- &::before {
- border-bottom: 4px solid darken(rgba(0, 153, 0, 1), 20%);
- border-left: 6px solid transparent;
- content: "";
- display: block;
- left: 0;
- position: absolute;
- top: -4px;
- }
- }
- }
-
- .userCredits {
- font-size: @wcfSmallFontSize;
- margin: @wcfGapSmall 0 0;
- overflow: hidden;
- padding: @wcfGapSmall 0 0;
- }
-}
-
-.message:not(.messageReduced) .messageOptions {
- .clearfix();
-}
-
-.message:not(.messageReduced) .messageBody {
- .clearfix();
-}
-
-li:nth-child(2n+1) .message {
- &.messageSidebarOrientationLeft .messageHeader::after {
- border-right-color: @wcfContainerAccentBackgroundColor;
- }
-
- &.messageSidebarOrientationRight .messageHeader::after {
- border-left-color: @wcfContainerAccentBackgroundColor;
- }
-
- .messageContent {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-}
-
-.messageReduced {
- .messageOptions > .breadcrumbs {
- bottom: 10px;
- left: 0;
- opacity: 1;
- position: relative;
- }
-
- &.messageDisabled {
- border-color: @wcfDisabledColor;
-
- .messageContent {
- @wcfDisabledBackgroundGradientColor: fade(@wcfDisabledBackgroundColor, 0%);
- .linearGradientNative(~"180deg, @{wcfDisabledBackgroundColor}, @{wcfDisabledBackgroundGradientColor} 90px");
- }
- }
-
- &.messageDeleted {
- border-color: @wcfDeletedColor;
-
- .messageContent {
- @wcfDeletedBackgroundGradientColor: fade(@wcfDeletedBackgroundColor, 0%);
- .linearGradientNative(~"180deg, @{wcfDeletedBackgroundColor}, @{wcfDeletedBackgroundGradientColor} 90px");
- }
- }
-
- &.jsMarked {
- border-color: @wcfSelectedColor;
-
- .messageContent {
- @wcfSelectedBackgroundGradientColor: fade(@wcfSelectedBackgroundColor, 0%);
- .linearGradientNative(~"180deg, @{wcfSelectedBackgroundColor}, @{wcfSelectedBackgroundGradientColor} 90px");
- }
- }
-}
-
-.messageCollapsed {
- color: @wcfDimmedColor;
- opacity: .8;
- padding: @wcfGapMedium @wcfGapLarge;
-
- .transition(opacity, .1s);
-
- &:hover {
- opacity: 1;
- }
-
- &.messageCollapsedExpandable {
- cursor: pointer;
- }
-
- h1 {
- font-size: @wcfSmallFontSize;
- }
-
- .messageCounter {
- padding-top: 3px;
- }
-
- &.jsMarked {
- background-color: @wcfSelectedBackgroundColor !important;
- color: @wcfColor;
-
- a {
- color: @wcfColor;
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .messageCollapsed {
- padding: @wcfGapSmall;
- }
-}
-
-@media only screen and (min-width: 641px) and (max-width: 800px) {
- .messageCollapsed {
- padding: @wcfGapSmall @wcfGapMedium;
- }
-}
-
-/* quick reply and inline editor */
-.messageBody > span.icon-spinner {
- left: 50%;
- margin: -21px -21px 0 0;
- position: absolute;
- top: 50%;
-}
-
-#messageQuickReply {
- .formSubmit {
- padding-bottom: @wcfGapMedium;
- }
-}
-
-/* message quotes */
-#showQuotes {
- bottom: @wcfGapLarge + @wcfGapTiny;
- cursor: pointer;
- opacity: .7;
- position: fixed;
- right: @wcfGapLarge + @wcfGapTiny;
-
- .transition(opacity, .2s);
-
- &:hover {
- opacity: 1;
- }
-}
-
-#messageQuoteList {
- max-width: 800px !important;
-
- li {
- &:not(:first-child) {
- margin-top: @wcfGapSmall;
- }
-
- > span {
- float: left;
-
- > input {
- vertical-align: bottom;
- }
-
- > span {
- cursor: pointer;
- vertical-align: middle;
- }
- }
-
- div.jsQuote {
- margin-left: 60px;
- }
-
- div.jsFullQuote {
- display: none;
- }
- }
-}
-
-#quoteManagerCopy {
- > span:not(.pointer) {
- cursor: pointer;
- }
-
- > .jsQuoteManagerQuoteAndInsert {
- border-left: 1px solid @wcfTooltipColor;
- margin-left: 4px;
- padding-left: 4px;
- }
-
- > .pointer {
- border-width: 5px 5px 0;
- bottom: -5px;
- margin-left: -5px;
- top: auto;
- }
-}
-
-/* share buttons */
-.messageShareButtons {
- > ul > li {
- display: inline-block;
-
- > a {
- text-decoration: none;
-
- > .icon {
- height: 28px;
- }
- }
-
- > .badge {
- background-color: @wcfContainerBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- border-radius: 3px;
- color: @wcfColor;
- line-height: 23px;
- padding: 0 7px;
- position: relative;
- vertical-align: 1px;
-
- &::before {
- border: 6px solid @wcfContainerBorderColor;
- border-color: transparent @wcfContainerBorderColor transparent transparent;
- content: "";
- display: block;
- height: 0;
- margin-top: -6px;
- position: absolute;
- right: 100%;
- top: 50%;
- width: 0;
- }
-
- &::after {
- border: 6px solid @wcfContainerBackgroundColor;
- border-color: transparent @wcfContainerBackgroundColor transparent transparent;
- content: "";
- display: block;
- height: 0;
- margin-right: -1px;
- margin-top: -6px;
- position: absolute;
- right: 100%;
- top: 50%;
- width: 0;
- }
- }
- }
-
- .jsShareFacebook:not(.disabled) {
- > a > .icon {
- color: rgb(59, 89, 152);
- }
- }
-
- .jsShareTwitter:not(.disabled) {
- > a > .icon {
- color: rgb(64, 153, 255);
- }
- }
-
- .jsShareGoogle:not(.disabled) {
- > a > .icon {
- color: rgb(211, 72, 54);
- }
- }
-
- .jsShareReddit:not(.disabled) {
- > a > .icon {
- color: rgb(95, 153, 207);
- }
- }
-}
-
-.contentNavigation > .messageShareButtons {
- float: right;
- margin-right: @wcfGapMedium;
- margin-top: 0;
-}
-
-.messageSearchResultList {
- > li > .box48 > div > .containerHeadline > h3 {
- padding-right: 100px;
- }
-}
-
-.likeButton.active, /* deprecated */
-.wcfLikeButton.active {
- .icon {
- color: rgba(0, 153, 0, 1);
- }
-}
-
-.dislikeButton.active, /* deprecated */
-.wcfDislikeButton.active {
- .icon {
- color: rgba(204, 0, 0, 1);
- }
-}
-
-@media screen and (max-width: 800px), print {
- .message.messageSidebarOrientationLeft,
- .message.messageSidebarOrientationRight {
- .messageContent {
- border: 0;
- margin: 0;
- }
-
- .messageSidebar {
- float: none;
- min-height: 37px;
- }
-
- .messageHeader {
- &::before,
- &::after {
- display: none;
- }
- }
- }
-
- .message .messageHeader .messageQuickOptions,
- .message .messageBody .messageSignature,
- .message .messageSidebar .userCredits {
- display: none;
- }
-
- .message .messageSidebar {
- padding: 7px;
- text-align: left;
- width: auto;
-
- > div {
- margin-left: 40px;
- }
-
- .userAvatar {
- left: 7px;
- position: absolute;
- top: 0;
-
- img {
- height: 32px !important;
- width: 32px !important;
- }
-
- > .badgeOnline {
- display: none;
- }
- }
-
- .userTitle {
- margin-top: -2px;
- }
- }
-
- /* reduce paddings */
- .message .messageContent .messageHeader {
- padding: @wcfGapSmall @wcfGapSmall 0;
- }
-
- .message .messageBody {
- padding: @wcfGapSmall;
- }
-
- .message .messageBody > div:not(.messageFooter):not(.messageTabMenu):not(.redactor-box) {
- padding: @wcfGapSmall 0;
- }
-
- .message .messageBody > footer {
- padding: 0;
- position: absolute;
- right: @wcfGapSmall;
- top: @wcfGapSmall;
- }
-
- .message .messageOptions nav {
- opacity: 1;
- position: static;
- text-align: left;
- }
-
- .message .newMessageBadge {
- display: none;
- }
-}
-
-@media screen and (min-width: 641px) and (max-width: 800px), print {
- .message .messageSidebar,
- .message .messageContent .messageHeader,
- .message .messageBody {
- padding-left: @wcfGapMedium;
- padding-right: @wcfGapMedium;
- }
-
- .message .messageSidebar {
- .userAvatar {
- left: @wcfGapMedium;
- }
- }
-
- .message .messageBody > footer {
- right: @wcfGapMedium;
- }
-}
-
-@media only screen and (max-width: 800px) {
- .moderationList {
- thead {
- display: none;
- }
-
- tbody {
- .columnAssignedUserID,
- .columnLastChangeTime {
- display: none;
- }
- }
- }
-}
-
-/* edit history */
-.editHistoryDiff {
- > .sideBySide:first-child {
- margin-bottom: @wcfGapLarge;
- text-align: center;
- }
-
- .sideBySide {
- > div:first-child {
- padding-right: @wcfGapMedium;
- }
-
- > div:last-child {
- padding-left: @wcfGapMedium;
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .editHistoryVersionList {
- .columnUser,
- .columnEditReason {
- display: none;
- }
- }
-}
-
-.messageFloatObjectLeft {
- float: left;
- margin: 0 @wcfGapMedium @wcfGapSmall 0;
-}
-
-.messageFloatObjectRight {
- float: right;
- margin: 0 0 @wcfGapSmall @wcfGapMedium;
-}
+++ /dev/null
-.sortableListContainer .sortablePlaceholder {
- background-color: @wcfWarningBackgroundColor;
- border: 1px solid @wcfWarningBorderColor;
- color: @wcfWarningColor;
- margin: @wcfGapTiny 0;
- padding: @wcfGapTiny;
-}
-
-.sortablePlaceholder.sortableInvalidTarget {
- background-color: @wcfErrorBackgroundColor;
- border: 1px solid @wcfErrorBorderColor;
- color: @wcfErrorColor;
-}
-
-.sortableList {
- list-style-position: outside;
- list-style-type: decimal;
- margin-left: @wcfGapLarge;
-
- .jsCollapsibleCategory > .sortableNodeLabel {
- background-color: @wcfTabularBoxBackgroundColor;
- color: @wcfTabularBoxColor;
- padding-left: 7px;
-
- > a {
- color: @wcfTabularBoxColor;
- }
-
- .icon {
- color: @wcfTabularBoxColor;
-
- .textShadow(@wcfTabularBoxBackgroundColor);
- }
- }
-
- .statusDisplay {
- float: right;
- }
-}
-
-.sortableNode {
- cursor: move;
-
- &.ui-sortable-helper {
- list-style: none;
- }
-}
-
-.sortableNodeLabel {
- padding: @wcfGapSmall @wcfGapSmall @wcfGapSmall 0;
- display: block;
-}
-
-.sortableList:not(.simpleSortableList) .sortableNodeLabel {
- border-bottom: 1px solid @wcfContainerBorderColor;
-}
-
-.simpleSortableList {
- min-height: @wcfGapLarge;
-}
\ No newline at end of file
+++ /dev/null
-.colorPreview {
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
- border: 1px solid @wcfContainerBorderColor;
- border-radius: @wcfContainerBorderRadius;
- display: inline-block;
-
- &:hover {
- .boxShadow(0, 0, @wcfContainerBorderColor, 15px, 0);
- }
-
- > div {
- border: 2px solid @wcfContentBackgroundColor;
- border-radius: @wcfContainerBorderRadius;
- cursor: pointer;
- display: block;
- height: 60px;
- width: 180px;
- }
-}
-
-.colorList {
- > li {
- float: left;
- padding: @wcfGapSmall;
-
- > figure > figcaption {
- font-size: @wcfSmallFontSize;
- margin-bottom: @wcfGapSmall;
- text-align: center;
- }
- }
-
- &::after {
- clear: both;
- content: "";
- display: block;
- }
-}
-
-#tplStyleAdd #styleLogo {
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
-}