padding, spacing

padding, spacing

@import 'colors.less';
@import 'cyborg.less';
@import 'animate.less';

.translationReset () {
    -webkit-transform: translate(0%,0px);
    -moz-transform: translate(0%,0px);
    -ms-transform: translate(0%,0px);
    -o-transform: translate(0%,0px);
    transform: translate(0%,0px);
}
.infinite {
    animation-iteration-count: infinite;
}
.middle {
    vertical-align: middle;
}
.lightweight {
    font-weight: 100;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 100;
    .panelGradient();
    z-index: -200;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    -webkit-font-smoothing: antialiased;
}
.fa.fa-rotate-45 {
    transform: rotate(45deg);
}
.fa.fa-rotate-135 {
    transform: rotate(135deg);
}
.slowly {
    -moz-animation-duration: 8s;
    -webkit-animation-duration: 8s;
    -o-animation-duration: 8s;
    animation-duration: 8s;
}
.slower {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
}
.faster {
    -moz-animation-duration: .3s;
    -webkit-animation-duration: .3s;
    -o-animation-duration: .3s;
    animation-duration: .3s;
}

input[type="text"].form-control, textarea.form-control {
    border-radius: 0;
}
#apollo {
    z-index: 70;
}
#container {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    canvas#pixie {
        z-index: 0;
        height: 100%;
        width: 100%;
    }
}
.center { text-align: center }
.align-right { text-align: right }
.align-left { text-align: left }
.notifications {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    opacity: .9;
    z-index: 10000;
}

#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    &.full {
        left: 360px;
    }
}
.main {
    z-index: 70;
}
.on-top {
    z-index: 10000!important;
}
.relative {
    position: relative;
}
.panel {
    .translationReset();
    position: fixed;

    border-radius: 0;
    margin: 0;

    top: 0;
    bottom: 0;

    h1, h2, h3, h4, h5, h6, p, span {
        padding: 0px 10px;
    }

    &.left {
        left: 0;
        background-color: rgba(0,0,0,.7);
        width: 200px;
        &.full {
            width: 360px;
        }
    }
    &.right {
        right: 0;
        .textarea-container {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 13px 21px 8px 73px;
            background: @plainTransGray;

            .chatstate {
                position: absolute;
                top: -14px;
                left: -20px;
                img {
                    float: left;
                    margin-left: 6px;
                }
            }
            /* The next two elements are mashed together. */
            button#upload-button {
                position: fixed;
                margin-left: -51px!important;
                width: 50px;
                height: 52px;
                margin: 0;
                border-radius: 8px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
            }
            textarea {
                resize: none;
                border: 1px inset white;
                border-radius: 8px;
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
                padding: 8px 10px 8px 18px;
                width: 100%;
                height: 52px;
                font-size: 12px;
            }
        }
        &.full {
            background: transparent;
            left: 360px;
        }

        #chat {
            position: fixed;
            display: block;
            width: 100%;
            top: 0;
            right: 2px;
            bottom: 76px;
            left: 0;
            overflow-y: auto;

            table.table {
                background: transparent;

                tr, td {
                    border: none;
                    padding-top: 10px;
                    padding-bottom: 0;
                }
                td:first-child {
                    padding-left: 20px;
                    padding-right: 0;
                    width: 70px;
                    img {
                        width: 50px;
                        height: 50px;
                    }
                }
                td:nth-child(2) {
                    padding-left: 13px;
                    font-weight: 400;

                    /* message from text */
                    h6 {
                        margin-top: 13px;
                        margin-bottom: 10;
                        font-size: 14px;
                        font-weight: bold;
                        color: @fadedText;
                    }

                    ap-message .message {
                        margin-top: 0;

                        p {
                            margin-bottom: 0;
                        }

                        pre {
                            margin-left: 10px;
                        }
                        font-size: 14px;

                        .mentioned {
                            margin: 0;
                            padding: 0;
                            color: @salmon;
                            font-weight: bold;

                            &.me {
                                text-style: oblique;
                            }
                        }

                        img, video, audio {
                            max-width: 100%;
                            max-height: 200px;
                        }
                    }

                    word-break: break-word;

                }
                span.chat-date {
                    font-size: 10px;
                    font-weight: 400;
                    padding-right: 14px;
                    .textGradient();
                }
            }
        }
    }
}

.offline {
    opacity: .2;
}

.selectedRecent {
    background: @panelGradientStart;
}

.clickable {
    cursor: pointer;
}

.scrollable {
    overflow-y: auto;
    height: 100%;
    padding-bottom: 150px;
}

#settings {
    color: #fff;
    position: fixed;
    width: 100%;
    #close-settings {
        margin: 10px;
    }
    #signout {
        margin-top: -17px;
    }
    td {
        .btn {
            width: 60px;
            transition: width .2s ease-in-out;
        }
        .btn.disabled {
            width: 100px;
        }
    }
}

.passport-btn {
    padding: 21px 21px 13px 21px;
}

#btn-settings {
    position: fixed;
    transition: all 0.4s ease;
    top: 42px;
    right: 20px;
}
#btn-settings.settings-visible {
    top: 0px;
    right: 0px;
    padding: 8px 14px;
    font-size: 20px;
    border-color: transparent;
    .panelGradient();
}

#audio-call-controls {
    padding-top: 8px;
    p {
        color: @text;
    }
}

#buddies .btn, #newgroup .btn {
    border-radius: 0;
}

#buddies {

    table.table {
        tr>td:first-child {
            /* to produce 20px from edge */
            padding-left: 18px;

            vertical-align: middle;
            img {
                height: 38px;
                width: 38px;
            }
        }
        tr>td:nth-child(2) {
            h6 {
                padding: 0;
                font-size: 14px;
                ap-presence .presence {
                    padding: 0 10px 0 4px;
                    i.fa-circle {
                        font-size: 10px;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}

#video-call-container {
    #chat-title {
        padding-left: 20px;
        opacity: .4;
        z-index: 75;
    }
    .panel.right.full {
        right: 0;
        left: auto;
        width: 300px;
    }
    #chat {
        background: rgba(0, 0, 0, .1);
    }
    #chat-table {
        td {
            display: block;
            float: left;
        }
    }
    #video-call-controls {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 200;

        button#toggle-audio {
            width: 45px;
        }

        button#toggle-video {
            width: 46px;

            &.btn-default {
                .fa-video-camera {
                    position: absolute;
                    right: 3px;
                    top: 2px;
                }
                .fa-ban {
                    margin-left: -10px;
                }
            }
        }
    }
    #respokeLocalVideo {
        position: fixed;
        left: 0;
        top: 0;
        width: 200px;
        min-height: 110px;
        z-index: 100;

        video {
            height: 100%;
            width: 100%;
        }
    }
    #respokeRemoteVideo {
        position: fixed;
        left: 0;
        right: 300px;
        top: 0;
        bottom: 0;
        height: 100%;
        z-index: 50;

        video {
            height: 100%;
            width: 100%;
        }
    }
}
.call-buttons {
    padding: 0 !important;
    text-align: right;
    button.btn {
        display: inline;
        height: 27px;
        width: 46px;
        margin: 0;
        border: none;
        border-bottom: 1px solid @medLterBase;
    }
}
#recents-query {
    background: transparent;
    &:focus {
        background: white;
    }
    transition: background .3s ease;
}
.notify {
    position: relative;
    padding: 13px;
    color: @text;
    background: @salmon;
    font-size: 18px;
}

#avatar-section {
    #selfie {
        margin-top: 19px;
        margin-left: 19px;

        /* height and width is 50, plus border that shrinks it */
        height: 53px;
        width: 53px;
        border: 3px solid transparent;

        &.available {
            border: 4px solid @success;
        }
        &.away {
            border: 4px solid @danger;
        }
        &.busy {
            border: 4px solid @warning;
        }
    }

}
#me-section {
    h3 {
        margin-top: 14px;
        padding-bottom: 0px;
        margin-bottom: 1px;
        padding-left: 8px;
    }
    h6 {
        margin-bottom: 0;
        margin-top: 0;
    }
}

table a:not(.btn), .table a:not(.btn) {
    color: @yellow;
    text-decoration: none !important;
}

.notify img {
    width: 32px;
    height: 32px;
}

#not-connected {
    .btn {
        opacity: .3;
        position: fixed;
        left: 20px;
        bottom: 20px;
        &:hover {
            opacity: 1;
        }
    }
}

#mentions, #macros {
    ul.mention-list {
        position: fixed;
        bottom: 51px;
        right: 22px;
        z-index: 10000;
        max-height: 120px;
        overflow-x: auto;
        left: 382px;

        .list-group-item {
            padding: 5px 13px;
            font-weight: 600;
        }
        .list-group-item:last-child {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}

@import 'colors.less';
@import 'cyborg.less';
@import 'animate.less';

.translationReset () {
    -webkit-transform: translate(0%,0px);
    -moz-transform: translate(0%,0px);
    -ms-transform: translate(0%,0px);
    -o-transform: translate(0%,0px);
    transform: translate(0%,0px);
}
.infinite {
    animation-iteration-count: infinite;
}
.middle {
    vertical-align: middle;
}
.lightweight {
    font-weight: 100;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 100;
    .panelGradient();
    z-index: -200;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    -webkit-font-smoothing: antialiased;
}
.fa.fa-rotate-45 {
    transform: rotate(45deg);
}
.fa.fa-rotate-135 {
    transform: rotate(135deg);
}
.slowly {
    -moz-animation-duration: 8s;
    -webkit-animation-duration: 8s;
    -o-animation-duration: 8s;
    animation-duration: 8s;
}
.slower {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
}
.faster {
    -moz-animation-duration: .3s;
    -webkit-animation-duration: .3s;
    -o-animation-duration: .3s;
    animation-duration: .3s;
}

input[type="text"].form-control, textarea.form-control {
    border-radius: 0;
}
#apollo {
    z-index: 70;
}
#container {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    canvas#pixie {
        z-index: 0;
        height: 100%;
        width: 100%;
    }
}
.center { text-align: center }
.align-right { text-align: right }
.align-left { text-align: left }
.notifications {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    opacity: .9;
    z-index: 10000;
}

#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    &.full {
        left: 360px;
    }
}
.main {
    z-index: 70;
}
.on-top {
    z-index: 10000!important;
}
.relative {
    position: relative;
}
.panel {
    .translationReset();
    position: fixed;

    border-radius: 0;
    margin: 0;

    top: 0;
    bottom: 0;

    h1, h2, h3, h4, h5, h6, p, span {
        padding: 0px 10px;
    }

    &.left {
        left: 0;
        background-color: rgba(0,0,0,.7);
        width: 200px;
        &.full {
            width: 360px;
        }
    }
    &.right {
        right: 0;
        .textarea-container {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 13px;
            padding-top: 17px;
            padding-left: 48px;
            background: @plainTransGray;

            .chatstate {
                position: absolute;
                top: -14px;
                img {
                    float: left;
                    margin-left: 6px;
                }
            }
            /* The next two elements are mashed together. */
            button#upload-button {
                position: fixed;
                margin-left: -38px !important;
                width: 38px;
                height: 52px;
                margin: 0;
                border-radius: 8px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
            }
            textarea {
                resize: none;
                border: 1px inset white;
                border-radius: 8px;
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
                padding: 8px;
                width: 100%;
                height: 52px;
                font-size: 12px;
            }
        }
        &.full {
            background: transparent;
            left: 360px;
        }

        #chat {
            position: fixed;
            display: block;
            width: 100%;
            top: 0;
            right: 2px;
            bottom: 76px;
            left: 0;
            overflow-y: auto;

            table.table {
                background: transparent;

                tr, td {
                    border: none;
                    padding-top: 10px;
                    padding-bottom: 0;
                }
                td:first-child {
                    padding-left: 20px;
                    padding-right: 0;
                    width: 70px;
                    img {
                        width: 50px;
                        height: 50px;
                    }
                }
                td:nth-child(2) {
                    padding-left: 13px;
                    font-weight: 400;

                    /* message from text */
                    h6 {
                        margin-top: 13px;
                        margin-bottom: 10;
                        font-size: 14px;
                        font-weight: bold;
                        color: @fadedText;
                    }

                    ap-message .message {
                        margin-top: 0;

                        p {
                            margin-bottom: 0;
                        }

                        pre {
                            margin-left: 10px;
                        }
                        font-size: 14px;

                        .mentioned {
                            margin: 0;
                            padding: 0;
                            color: @salmon;
                            font-weight: bold;

                            &.me {
                                text-style: oblique;
                            }
                        }

                        img, video, audio {
                            max-width: 100%;
                            max-height: 200px;
                        }
                    }

                    word-break: break-word;

                }
                span.chat-date {
                    font-size: 10px;
                    font-weight: 400;
                    padding-right: 20px;
                    .textGradient();
                }
            }
        }
    }
}

.offline {
    opacity: .2;
}

.selectedRecent {
    background: @panelGradientStart;
}

.clickable {
    cursor: pointer;
}

.scrollable {
    overflow-y: auto;
    height: 100%;
    padding-bottom: 150px;
}

#settings {
    color: #fff;
    position: fixed;
    width: 100%;
    #close-settings {
        margin: 10px;
    }
    #signout {
        margin-top: -17px;
    }
    td {
        .btn {
            width: 60px;
            transition: width .2s ease-in-out;
        }
        .btn.disabled {
            width: 100px;
        }
    }
}

.passport-btn {
    padding: 21px 21px 13px 21px;
}

#btn-settings {
    position: fixed;
    transition: all 0.4s ease;
    top: 42px;
    right: 20px;
}
#btn-settings.settings-visible {
    top: 0px;
    right: 0px;
    padding: 8px 14px;
    font-size: 20px;
    border-color: transparent;
    .panelGradient();
}

#audio-call-controls {
    padding-top: 8px;
    p {
        color: @text;
    }
}

#buddies .btn, #newgroup .btn {
    border-radius: 0;
}

#buddies {

    table.table {
        td:first-child {
            /* to produce 20px from edge */
            padding-left: 18px;

            vertical-align: middle;
            img {
                height: 38px;
                width: 38px;
            }
        }
        td:nth-child(2) {
            h6 {
                padding: 0;
                font-size: 14px;
                ap-presence {
                    width: 10px;
                    height: 10px;
                }
            }
        }
    }
}

#video-call-container {
    #chat-title {
        padding-left: 20px;
        opacity: .4;
        z-index: 75;
    }
    .panel.right.full {
        right: 0;
        left: auto;
        width: 300px;
    }
    #chat {
        background: rgba(0, 0, 0, .1);
    }
    #chat-table {
        td {
            display: block;
            float: left;
        }
    }
    #video-call-controls {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 200;

        button#toggle-audio {
            width: 45px;
        }

        button#toggle-video {
            width: 46px;

            &.btn-default {
                .fa-video-camera {
                    position: absolute;
                    right: 3px;
                    top: 2px;
                }
                .fa-ban {
                    margin-left: -10px;
                }
            }
        }
    }
    #respokeLocalVideo {
        position: fixed;
        left: 0;
        top: 0;
        width: 200px;
        min-height: 110px;
        z-index: 100;

        video {
            height: 100%;
            width: 100%;
        }
    }
    #respokeRemoteVideo {
        position: fixed;
        left: 0;
        right: 300px;
        top: 0;
        bottom: 0;
        height: 100%;
        z-index: 50;

        video {
            height: 100%;
            width: 100%;
        }
    }
}
.call-buttons {
    padding: 0 !important;
    text-align: right;
    button.btn {
        display: inline;
        height: 27px;
        width: 46px;
        margin: 0;
        border: none;
        border-bottom: 1px solid @medLterBase;
    }
}
#recents-query {
    background: transparent;
    &:focus {
        background: white;
    }
    transition: background .3s ease;
}
.notify {
    position: relative;
    padding: 13px;
    color: @text;
    background: @salmon;
    font-size: 18px;
}

#avatar-section {
    #selfie {
        margin-top: 19px;
        margin-left: 19px;

        /* height and width is 50, plus border that shrinks it */
        height: 53px;
        width: 53px;
        border: 3px solid transparent;

        &.available {
            border: 4px solid @success;
        }
        &.away {
            border: 4px solid @danger;
        }
        &.busy {
            border: 4px solid @warning;
        }
    }

}
#me-section {
    h3 {
        margin-top: 14px;
        padding-bottom: 0px;
        margin-bottom: 1px;
        padding-left: 8px;
    }
    h6 {
        margin-bottom: 0;
        margin-top: 0;
    }
}

table a:not(.btn), .table a:not(.btn) {
    color: @yellow;
    text-decoration: none !important;
}

.notify img {
    width: 32px;
    height: 32px;
}

#not-connected {
    .btn {
        opacity: .3;
        position: fixed;
        left: 20px;
        bottom: 20px;
        &:hover {
            opacity: 1;
        }
    }
}

#mentions, #macros {
    ul.mention-list {
        position: fixed;
        bottom: 51px;
        right: 22px;
        z-index: 10000;
        max-height: 120px;
        overflow-x: auto;
        left: 382px;

        .list-group-item {
            padding: 5px 13px;
            font-weight: 600;
        }
        .list-group-item:last-child {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}


Update body bkgrd to sprint.ly black for sidebar nav

// Vendor
@import "bootstrap/bootstrap.less";
@import "react-select/select.less";
@import "../../node_modules/sprintly-ui/src/less/sprintly-ui";

// Utils
@import "utils/colors";
@import "utils/font-weights";
@import "utils/mixins";
@import "utils/typography";
@import "utils/z-index";

// Components
@import "components/header";
@import "components/columns";
@import "components/item-card";
@import "components/item-summary";
@import "components/sprint";
@import "components/product-selector";
@import "components/filters-toolbar";
@import "components/product-dropdown";
@import "components/search";
@import "components/add-item-modal";
@import "components/tags-input";
@import "components/sidebars/sidebar-filters";
@import "overrides";

html, body {
  height: 100%;
  color: @sprintly-black;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: @sprintly-black;
}

.loading {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;

  small {
    margin: 1rem;
    display: block;
  }
}

// Vendor
@import "bootstrap/bootstrap.less";
@import "react-select/select.less";
@import "../../node_modules/sprintly-ui/src/less/sprintly-ui";

// Utils
@import "utils/colors";
@import "utils/font-weights";
@import "utils/mixins";
@import "utils/typography";
@import "utils/z-index";

// Components
@import "components/header";
@import "components/columns";
@import "components/item-card";
@import "components/item-summary";
@import "components/sprint";
@import "components/product-selector";
@import "components/filters-toolbar";
@import "components/product-dropdown";
@import "components/search";
@import "components/add-item-modal";
@import "components/tags-input";
@import "components/sidebars/sidebar-filters";
@import "overrides";

html, body {
  height: 100%;
  color: @sprintly-black;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.loading {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;

  small {
    margin: 1rem;
    display: block;
  }
}


Remove duplicated `outline` property

Remove duplicated `outline` property

Removing duplicated `outline` property, which is already set in
`.theme-oo-ui-buttonElement ()`.

Change-Id: I47f72f2d6f94f4fb9270b40cbfd901b7b9403060

// Theme variables

@oo-ui-default-image-path: 'themes/wikimediaui/images';
@oo-ui-font-size-browser: 16; // assumed browser default of `16px`
@oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px`

// Pull in the main set of variables from the shared UI base; reaching into node_modules like this
// to avoid a symlink that Windows users won't like.
@import '../../../node_modules/wikimedia-ui-base/wikimedia-ui-base.less';

@background-color-base--hover: #eaecf0;
@background-color-base--read-only: #f8f9fa;

// Primary 'Progressive' and 'Destructive' Colors
@background-color-progressive: #eaf3ff;
@background-color-progressive--hover: rgba( 41, 98, 204, 0.1 );
@color-progressive: #36c; // equals HSB 220°/75%/80%
@color-progressive--hover: #447ff5; // equals HSB 220°/72%/96%
@color-progressive--active: #2a4b8d; // equals HSB 220°/70%/55%
@color-progressive--active-hover: @color-progressive;
@color-progressive--focus: @color-progressive;

@color-destructive-non-primary: #d73333; // Exemption for non-primary buttons, foremost used in VE, lightened up R50 to align to AA contrast ratio

// Disabled Widgets
@background-color-base--disabled: #eaecf0;
@background-color-filled--disabled: #c8ccd1;
@opacity--disabled: 0.51; // `0.51` equals `#7d7d7d` on background-color `#fff`, HSB 0°/0%/49%
@opacity-filled--disabled: 1;
@opacity-indicator--disabled: 0.15; // equals `#c7c8cc` on background-color `#fff`
@opacity-tool--disabled: 0.34; // equals `#a9a9a9` on background-color `#fff`

// Toolbar, Tools & Menus
@background-color-toolbar: @background-color-base;
@background-color-tool--hover: @background-color-base--hover;
@background-color-tool--active: @background-color-progressive;
@background-color-tool--active-hover: @background-color-progressive--hover;
@color-tool--hover: @color-base--emphasized; // Used here in combination with `:hover` background-color turning light grey
@color-tool--active: @color-progressive;
@border-toolbar: @border-width-base solid #c8ccd1;

// Box Sizes
// `@*size` variables are used for `*width` & `*height` properties
@size-base: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `2.5em`≈`32px`

@min-size-icon: 24px; // values used for `min-height` are defined in `px`, see T130691
@min-size-indicator: 12px;
@min-size-tagitem-close: 20px;
@min-width-button-base: 40 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `3.125em`≈`40px` at base `font-size: 12.8px`
@min-width-button-combo-widget: @size-base;
@min-width-icon-numberinput: 20px;
@min-height-widget-base: @size-base;
@min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min + 4px*2 distance top/bottom + 1px*2 border top/bottom
@max-width-base: 50em;
@max-width-input: @max-width-base;

@size-anchor: 9px;
@size-button-base: @size-base;
@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.875em`≈`24px`
@size-icon-numberinput: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.5625em`≈`20px`
@size-icon-tagitem-close: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.9375em`≈`12px`
@size-toggleswitch-grip-min: 16px;
@size-dialog-bar-top: 44 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `3.4375em`≈`44px`
@size-fieldlayout-help-icon: 22 / @oo-ui-font-size-browser / @oo-ui-font-size-base;

@start-framed-icon-only: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.547em`≈`7px`; HACK: We have to break with `@padding-start-input-text-icon` to perfectly center in `@min-width-button-base`
@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.46875em`≈`6px`
@start-framed-indicator-only: 13 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.09375em`≈`14px`; `@size-indicator + 2 * @border-width-base`
@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.703125em`≈`9px`
@start-frameless: -@start-frameless-icon;
@start-frameless-icon: 3 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@start-tagmultiselect-input: 5 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.390625em`≈`5px`; `@padding-horizontal-tagitem` + `@border-width-base`
@end-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.3125em`≈`4px`

@width-button-combo-widget: @min-width-button-combo-widget;

@height-icon-element: 100%;
@height-search: 56 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `4.375em`≈`56px`; `height: 32px` + 2 * `margin: 12px`
@height-tagitem: 22 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.71875em`≈`22px`;

@margin-dialog-bar-button-framed: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-search: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-taboption: @margin-dialog-bar-button-framed;
@margin-button-close: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-top-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-top-tagmultiselect-input: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-top-fieldlayout-help: -( 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base );
@margin-top-fieldsetlayout-help: -( 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base ) / 2;
@margin-bottom-fieldset-header: 8 / @oo-ui-font-size-browser / ( @oo-ui-font-size-base * @font-size-fieldset-header );

@border-base--disabled: @border-width-base solid @border-color-base--disabled;
@border-filled--disabled: @border-width-base solid @border-color-filled--disabled;
@border-dialog-bar: @border-width-base solid @border-color-dialog-bar;

@border-color-base--focus: @color-progressive--focus;
@border-color-framed-progressive--hover: @color-progressive--hover;
@border-color-framed-destructive--hover: @color-destructive--hover;
@border-color-frameless: transparent;
@border-color-frameless--fallback: @color-base--inverted; // Support IE 6: `transparent` is not rendered correctly

@border-color-focus-inset: @color-base--inverted;
@border-color-erroneous: @color-erroneous;
@border-color-base--disabled: #c8ccd1;
@border-color-base--read-only: #c8ccd1;
@border-color-input--hover: @border-color-base--active;
@border-color-dialog-bar: #c8ccd1;

@border-radius-frameless-indicator: 1px; // Together with `@box-shadow-frameless-indicator--focus` it results in well rounded border

@border-style-base: solid;

@padding-base: @padding-top-base @padding-horizontal-base @padding-bottom-base;
@padding-frameless: @padding-top-base @padding-horizontal-frameless @padding-bottom-base;
@padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
@padding-menu: @padding-top-menu @padding-horizontal-base @padding-bottom-menu;
@padding-menu-large: ( @padding-top-menu * 1.5 ) @padding-horizontal-base ( @padding-bottom-menu * 1.5 );
@padding-search: 16 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.625em`≈`16px`
@padding-taboption: @padding-top-base @padding-horizontal-taboption @padding-bottom-base;
@padding-horizontal-base: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.9375em`≈`12px`
@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.3125em`≈`4px`
@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-horizontal-taboption: 13 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.9375em`≈`13px`; @padding-horizontal-base = @border-width-base
@padding-horizontal-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-vertical-label: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-top-base: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.625em`≈`8px`
@padding-top-icon-indicator: 30 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-top-menu: 9 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-bottom-base: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.547em`≈`7px`
@padding-bottom-menu: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-start-input-text-icon: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // As long as we have whitespace in icon canvas, we need reduced `padding-left`.
@padding-start-icon: @size-icon;
@padding-start-icon-only: 26 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `2.03125em`≈`26px`; @min-width-button-base - @padding-horizontal-base - 2 * @border-width-base;
@padding-start-fieldset-header-iconized: 26 / @oo-ui-font-size-browser / ( @oo-ui-font-size-base * @font-size-fieldset-header );
@padding-start-indicator-only: @padding-start-icon-only;
@padding-start-indicator-plus: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-start-frameless-icon-only: 30 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-start-frameless-icon-plus: @padding-start-frameless-icon-only;
@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-start-menu-icon-label: 38 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-end-tagitem-close: 21 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.640625em`≈`21px`;

@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
@box-shadow-menu: @box-shadow-dialog;
@box-shadow-toolbar-top: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
@box-shadow-toolbar-bottom: 0 -1px 1px 0 rgba( 0, 0, 0, 0.1 );
@box-shadow-widget: inset 0 0 0 1px transparent;
@box-shadow-widget--focus: inset 0 0 0 1px @color-progressive;
@box-shadow-progressive--focus: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px @color-base--inverted;
@box-shadow-frameless-indicator--focus: 0 0 0 2px @color-progressive;
@box-shadow-action--focus: @box-shadow-widget--focus, 0 0 0 1px @color-progressive;
@box-shadow-input-binary--active: inset 0 0 0 1px @color-progressive--active;
@box-shadow-erroneous--focus: inset 0 0 0 1px @color-erroneous;
@box-shadow-filled--disabled: inset 0 0 0 1px @color-filled--disabled;

@font-size-fieldset-header: 1.15em; // equals `16.1px` at base `font-size: 12.8px`. Todo: Not able to get unified `16px` due to T

@line-height-reset: 1; // Support: Safari, reset `line-height` in order to normalize it in a follow-up rule across browsers.
@line-height-message: 1.4;
@line-height-fieldset-header-iconized: 24 / @oo-ui-font-size-browser / ( @oo-ui-font-size-base * @font-size-fieldset-header );
@line-height-form-element: 1.4;
@line-height-input-binary-label: 1.5; // Checkboxes, Radios and ToggleSwitchWidget labels need a tad more for increased vertical click area
@line-height-widget-multiline: 1.275;
@line-height-widget-singleline: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px`
@line-height-tagmultiselect-input: 1.563em; // equals `20px` at base `font-size: 12.8px`

@opacity-icon-base: 0.87; // equals `#222` on background-color `#fff`
@opacity-icon-base--hover: 0.73; // equals `#454545` on background-color `#fff`, closest to `#444`
@opacity-icon-base--selected: 1;

// Transition variables
// Some of these values are duplicated in OO.ui.WikimediaUITheme
@transition-ease-quick: 100ms; // `ease` is the initial value
@transition-ease-medium: 250ms;
@transition-ease-out-sine-medium: 200ms cubic-bezier( 0.4, 0.55, 0.55, 1 );

// Binary Input Widgets (CheckboxInput, RadioInput, ToggleSwitch)
@background-color-input-binary--active: @color-progressive--active;
@background-color-input-binary--checked: @color-progressive;
@size-input-binary: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@border-input-binary: @border-width-base solid @border-color-input-binary;
@border-color-input-binary: @border-color-base--active;
@border-color-input-binary--active: @color-progressive--active;
@border-color-input-binary--checked: @color-progressive;
@padding-start-input-binary-label: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@box-shadow-input-binary: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
@border-width-radio--checked: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;

// Theme mixins

// Workaround for Safari 8 bug. Combining a selector like `input[type="checkbox"]:checked + span`
// with transition on background-size, background-color, and a single background-image using SVG
// causes the selector to sometimes not be applied, see T89309
//
// * Syntax mimics the core mixin .oo-ui-background-image-svg().
// * No-op in distributions other than 'vector'.
// * Using -webkit- prefix to limit this stupidity from impacting other browsers. Alas, some
//   non-Safari ones also parse the -webkit- prefix (Chrome, Opera).
// * We take the payload size hit of the unnecessary /* @embed */ hint across the board. It should
//   be mostly mitigated by using gzip compression.
// * Upstream bug report: https://bugs.webkit.org/show_bug.cgi?id=141789
.oo-ui-background-image-safari( @url-without-extension ) when ( @oo-ui-distribution = vector ) {
	@svg: '@{url-without-extension}.svg';
	background-image: -webkit-linear-gradient( transparent, transparent ), e( '/* @embed */' ) url( @svg );
}

.mw-frameless-button-colored( @child, @link, @hover, @active, @focus ) { // following CSS Pseudo Classes
	> @{child} {
		color: @link;
	}

	> @{child}:hover {
		color: @hover;
	}

	> @{child}:active,
	> @{child}:active:focus,
	&.oo-ui-buttonElement-pressed > @{child} {
		color: @active;
		box-shadow: none;
	}
}

.mw-framed-button-colored( @child, @link, @hover, @border-color--hover, @active, @focus ) {
	> @{child} {
		color: @link;
	}

	> @{child}:hover {
		background-color: @hover;
		border-color: @border-color--hover;
	}

	> @{child}:active,
	> @{child}:active:focus,
	&.oo-ui-buttonElement-pressed > @{child},
	&.oo-ui-buttonElement-active > @{child},
	&.oo-ui-popupToolGroup-active > @{child} {
		background-color: lighten( @active, 60% );
		color: @active;
		border-color: @active;
		box-shadow: none;
	}

	> @{child}:focus {
		border-color: @focus;
		box-shadow: inset 0 0 0 1px @focus;
	}
}

.mw-framed-primary-button-colored( @child, @link, @hover, @active, @focus ) {
	> @{child} {
		color: @color-base--inverted;
		background-color: @link;
		border-color: @link;
	}

	> @{child}:hover {
		background-color: @hover;
		border-color: @hover;
	}

	> @{child}:active,
	> @{child}:active:focus,
	&.oo-ui-buttonElement-pressed > @{child},
	&.oo-ui-buttonElement-active > @{child},
	&.oo-ui-popupToolGroup-active > @{child} {
		color: @color-base--inverted;
		background-color: @active;
		border-color: @active;
		box-shadow: none;
	}

	> @{child}:focus {
		border-color: @focus;
		box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px @color-base--inverted;
	}
}

// Theme variables

@oo-ui-default-image-path: 'themes/wikimediaui/images';
@oo-ui-font-size-browser: 16; // assumed browser default of `16px`
@oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px`

// Pull in the main set of variables from the shared UI base; reaching into node_modules like this
// to avoid a symlink that Windows users won't like.
@import '../../../node_modules/wikimedia-ui-base/wikimedia-ui-base.less';

@background-color-base--hover: #eaecf0;
@background-color-base--read-only: #f8f9fa;

// Primary 'Progressive' and 'Destructive' Colors
@background-color-progressive: #eaf3ff;
@background-color-progressive--hover: rgba( 41, 98, 204, 0.1 );
@color-progressive: #36c; // equals HSB 220°/75%/80%
@color-progressive--hover: #447ff5; // equals HSB 220°/72%/96%
@color-progressive--active: #2a4b8d; // equals HSB 220°/70%/55%
@color-progressive--active-hover: @color-progressive;
@color-progressive--focus: @color-progressive;

@color-destructive-non-primary: #d73333; // Exemption for non-primary buttons, foremost used in VE, lightened up R50 to align to AA contrast ratio

// Disabled Widgets
@background-color-base--disabled: #eaecf0;
@background-color-filled--disabled: #c8ccd1;
@opacity--disabled: 0.51; // `0.51` equals `#7d7d7d` on background-color `#fff`, HSB 0°/0%/49%
@opacity-filled--disabled: 1;
@opacity-indicator--disabled: 0.15; // equals `#c7c8cc` on background-color `#fff`
@opacity-tool--disabled: 0.34; // equals `#a9a9a9` on background-color `#fff`

// Toolbar, Tools & Menus
@background-color-toolbar: @background-color-base;
@background-color-tool--hover: @background-color-base--hover;
@background-color-tool--active: @background-color-progressive;
@background-color-tool--active-hover: @background-color-progressive--hover;
@color-tool--hover: @color-base--emphasized; // Used here in combination with `:hover` background-color turning light grey
@color-tool--active: @color-progressive;
@border-toolbar: @border-width-base solid #c8ccd1;

// Box Sizes
// `@*size` variables are used for `*width` & `*height` properties
@size-base: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `2.5em`≈`32px`

@min-size-icon: 24px; // values used for `min-height` are defined in `px`, see T130691
@min-size-indicator: 12px;
@min-size-tagitem-close: 20px;
@min-width-button-base: 40 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `3.125em`≈`40px` at base `font-size: 12.8px`
@min-width-button-combo-widget: @size-base;
@min-width-icon-numberinput: 20px;
@min-height-widget-base: @size-base;
@min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min + 4px*2 distance top/bottom + 1px*2 border top/bottom
@max-width-base: 50em;
@max-width-input: @max-width-base;

@size-anchor: 9px;
@size-button-base: @size-base;
@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.875em`≈`24px`
@size-icon-numberinput: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.5625em`≈`20px`
@size-icon-tagitem-close: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.9375em`≈`12px`
@size-toggleswitch-grip-min: 16px;
@size-dialog-bar-top: 44 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `3.4375em`≈`44px`
@size-fieldlayout-help-icon: 22 / @oo-ui-font-size-browser / @oo-ui-font-size-base;

@start-framed-icon-only: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.547em`≈`7px`; HACK: We have to break with `@padding-start-input-text-icon` to perfectly center in `@min-width-button-base`
@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.46875em`≈`6px`
@start-framed-indicator-only: 13 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.09375em`≈`14px`; `@size-indicator + 2 * @border-width-base`
@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.703125em`≈`9px`
@start-frameless: -@start-frameless-icon;
@start-frameless-icon: 3 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@start-tagmultiselect-input: 5 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.390625em`≈`5px`; `@padding-horizontal-tagitem` + `@border-width-base`
@end-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.3125em`≈`4px`

@width-button-combo-widget: @min-width-button-combo-widget;

@height-icon-element: 100%;
@height-search: 56 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `4.375em`≈`56px`; `height: 32px` + 2 * `margin: 12px`
@height-tagitem: 22 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.71875em`≈`22px`;

@margin-dialog-bar-button-framed: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-search: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-taboption: @margin-dialog-bar-button-framed;
@margin-button-close: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-top-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-top-tagmultiselect-input: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@margin-top-fieldlayout-help: -( 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base );
@margin-top-fieldsetlayout-help: -( 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base ) / 2;
@margin-bottom-fieldset-header: 8 / @oo-ui-font-size-browser / ( @oo-ui-font-size-base * @font-size-fieldset-header );

@border-base--disabled: @border-width-base solid @border-color-base--disabled;
@border-filled--disabled: @border-width-base solid @border-color-filled--disabled;
@border-dialog-bar: @border-width-base solid @border-color-dialog-bar;

@border-color-base--focus: @color-progressive--focus;
@border-color-framed-progressive--hover: @color-progressive--hover;
@border-color-framed-destructive--hover: @color-destructive--hover;
@border-color-frameless: transparent;
@border-color-frameless--fallback: @color-base--inverted; // Support IE 6: `transparent` is not rendered correctly

@border-color-focus-inset: @color-base--inverted;
@border-color-erroneous: @color-erroneous;
@border-color-base--disabled: #c8ccd1;
@border-color-base--read-only: #c8ccd1;
@border-color-input--hover: @border-color-base--active;
@border-color-dialog-bar: #c8ccd1;

@border-radius-frameless-indicator: 1px; // Together with `@box-shadow-frameless-indicator--focus` it results in well rounded border

@border-style-base: solid;

@padding-base: @padding-top-base @padding-horizontal-base @padding-bottom-base;
@padding-frameless: @padding-top-base @padding-horizontal-frameless @padding-bottom-base;
@padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
@padding-menu: @padding-top-menu @padding-horizontal-base @padding-bottom-menu;
@padding-menu-large: ( @padding-top-menu * 1.5 ) @padding-horizontal-base ( @padding-bottom-menu * 1.5 );
@padding-search: 16 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.625em`≈`16px`
@padding-taboption: @padding-top-base @padding-horizontal-taboption @padding-bottom-base;
@padding-horizontal-base: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.9375em`≈`12px`
@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.3125em`≈`4px`
@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-horizontal-taboption: 13 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.9375em`≈`13px`; @padding-horizontal-base = @border-width-base
@padding-horizontal-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-vertical-label: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-top-base: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.625em`≈`8px`
@padding-top-icon-indicator: 30 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-top-menu: 9 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-bottom-base: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.547em`≈`7px`
@padding-bottom-menu: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-start-input-text-icon: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // As long as we have whitespace in icon canvas, we need reduced `padding-left`.
@padding-start-icon: @size-icon;
@padding-start-icon-only: 26 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `2.03125em`≈`26px`; @min-width-button-base - @padding-horizontal-base - 2 * @border-width-base;
@padding-start-fieldset-header-iconized: 26 / @oo-ui-font-size-browser / ( @oo-ui-font-size-base * @font-size-fieldset-header );
@padding-start-indicator-only: @padding-start-icon-only;
@padding-start-indicator-plus: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-start-frameless-icon-only: 30 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-start-frameless-icon-plus: @padding-start-frameless-icon-only;
@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-start-menu-icon-label: 38 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-end-tagitem-close: 21 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.640625em`≈`21px`;

@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
@box-shadow-menu: @box-shadow-dialog;
@box-shadow-toolbar-top: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
@box-shadow-toolbar-bottom: 0 -1px 1px 0 rgba( 0, 0, 0, 0.1 );
@box-shadow-widget: inset 0 0 0 1px transparent;
@box-shadow-widget--focus: inset 0 0 0 1px @color-progressive;
@box-shadow-progressive--focus: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px @color-base--inverted;
@box-shadow-frameless-indicator--focus: 0 0 0 2px @color-progressive;
@box-shadow-action--focus: @box-shadow-widget--focus, 0 0 0 1px @color-progressive;
@box-shadow-input-binary--active: inset 0 0 0 1px @color-progressive--active;
@box-shadow-erroneous--focus: inset 0 0 0 1px @color-erroneous;
@box-shadow-filled--disabled: inset 0 0 0 1px @color-filled--disabled;

@font-size-fieldset-header: 1.15em; // equals `16.1px` at base `font-size: 12.8px`. Todo: Not able to get unified `16px` due to T

@line-height-reset: 1; // Support: Safari, reset `line-height` in order to normalize it in a follow-up rule across browsers.
@line-height-message: 1.4;
@line-height-fieldset-header-iconized: 24 / @oo-ui-font-size-browser / ( @oo-ui-font-size-base * @font-size-fieldset-header );
@line-height-form-element: 1.4;
@line-height-input-binary-label: 1.5; // Checkboxes, Radios and ToggleSwitchWidget labels need a tad more for increased vertical click area
@line-height-widget-multiline: 1.275;
@line-height-widget-singleline: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px`
@line-height-tagmultiselect-input: 1.563em; // equals `20px` at base `font-size: 12.8px`

@opacity-icon-base: 0.87; // equals `#222` on background-color `#fff`
@opacity-icon-base--hover: 0.73; // equals `#454545` on background-color `#fff`, closest to `#444`
@opacity-icon-base--selected: 1;

// Transition variables
// Some of these values are duplicated in OO.ui.WikimediaUITheme
@transition-ease-quick: 100ms; // `ease` is the initial value
@transition-ease-medium: 250ms;
@transition-ease-out-sine-medium: 200ms cubic-bezier( 0.4, 0.55, 0.55, 1 );

// Binary Input Widgets (CheckboxInput, RadioInput, ToggleSwitch)
@background-color-input-binary--active: @color-progressive--active;
@background-color-input-binary--checked: @color-progressive;
@size-input-binary: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@border-input-binary: @border-width-base solid @border-color-input-binary;
@border-color-input-binary: @border-color-base--active;
@border-color-input-binary--active: @color-progressive--active;
@border-color-input-binary--checked: @color-progressive;
@padding-start-input-binary-label: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@box-shadow-input-binary: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
@border-width-radio--checked: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;

// Theme mixins

// Workaround for Safari 8 bug. Combining a selector like `input[type="checkbox"]:checked + span`
// with transition on background-size, background-color, and a single background-image using SVG
// causes the selector to sometimes not be applied, see T89309
//
// * Syntax mimics the core mixin .oo-ui-background-image-svg().
// * No-op in distributions other than 'vector'.
// * Using -webkit- prefix to limit this stupidity from impacting other browsers. Alas, some
//   non-Safari ones also parse the -webkit- prefix (Chrome, Opera).
// * We take the payload size hit of the unnecessary /* @embed */ hint across the board. It should
//   be mostly mitigated by using gzip compression.
// * Upstream bug report: https://bugs.webkit.org/show_bug.cgi?id=141789
.oo-ui-background-image-safari( @url-without-extension ) when ( @oo-ui-distribution = vector ) {
	@svg: '@{url-without-extension}.svg';
	background-image: -webkit-linear-gradient( transparent, transparent ), e( '/* @embed */' ) url( @svg );
}

.mw-frameless-button-colored( @child, @link, @hover, @active, @focus ) { // following CSS Pseudo Classes
	> @{child} {
		color: @link;
	}

	> @{child}:hover {
		color: @hover;
	}

	> @{child}:active,
	> @{child}:active:focus,
	&.oo-ui-buttonElement-pressed > @{child} {
		color: @active;
		box-shadow: none;
	}
}

.mw-framed-button-colored( @child, @link, @hover, @border-color--hover, @active, @focus ) {
	> @{child} {
		color: @link;
	}

	> @{child}:hover {
		background-color: @hover;
		border-color: @border-color--hover;
	}

	> @{child}:active,
	> @{child}:active:focus,
	&.oo-ui-buttonElement-pressed > @{child},
	&.oo-ui-buttonElement-active > @{child},
	&.oo-ui-popupToolGroup-active > @{child} {
		background-color: lighten( @active, 60% );
		color: @active;
		border-color: @active;
		box-shadow: none;
	}

	> @{child}:focus {
		border-color: @focus;
		box-shadow: inset 0 0 0 1px @focus;
		outline: 0;
	}
}

.mw-framed-primary-button-colored( @child, @link, @hover, @active, @focus ) {
	> @{child} {
		color: @color-base--inverted;
		background-color: @link;
		border-color: @link;
	}

	> @{child}:hover {
		background-color: @hover;
		border-color: @hover;
	}

	> @{child}:active,
	> @{child}:active:focus,
	&.oo-ui-buttonElement-pressed > @{child},
	&.oo-ui-buttonElement-active > @{child},
	&.oo-ui-popupToolGroup-active > @{child} {
		color: @color-base--inverted;
		background-color: @active;
		border-color: @active;
		box-shadow: none;
	}

	> @{child}:focus {
		border-color: @focus;
		box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px @color-base--inverted;
		outline: 0;
	}
}


Fix invalid css in tabbar (#6528)

Fix invalid css in tabbar (#6528)

/*
 * Tab bar specific rules.
 */

@import '../../../less/abstracts/theme.less';

.jenkins-config-widgets {
  position: relative;
  border:1px solid var(--input-border);
  border-bottom:none;
  background: var(--light-grey);
  min-height:2.5em;
  .border-radius-top(@border-radius);
  z-index:5;
  overflow: hidden;

  nav:before, nav:after {
    display: none;
  }

  :hover .noTabs{
    color:#bbb;
  }
  .noTabs:hover,
  .showTabs:hover {
    opacity: 0.8;
    background:#bbb;
    color:var(--light-bg-color);
     text-shadow:none;
  }

  @find-container-width: 200px;
  .find-container {
    margin:0;
    display:none;
  }

  .showTabs,
  .noTabs {
    position: absolute;
    border-radius: @border-radius;
    right: 5px;
    top: 5px;
    cursor: pointer;
    color: var(--medium-grey);
    text-shadow: var(--brightest-bg-color 0 1px 2px);
    font-size: var(--font-size-sm);
    padding: 3px 7px;
    display:none;
  }

  .form-config.tabBarFrame {
    position: relative;

    .config-section-activators {
      margin: 0;
      padding: 5px 0 0;
      display: block;
      list-style: none;
    }

    .tabBar {
      .tab {
        border: solid 1px transparent;
        color: var(--text-color-secondary);
        padding: 7px 10px;
        .border-radius-top(5px);
        cursor: pointer;
        margin: 1px 0 0 10px;
        text-decoration: none;
      }
      .tab:hover {
        background: var(--very-light-grey);
        color: var(--text-color-secondary);
        border:1px solid var(--medium-grey);
        border-bottom:1px solid var(--bright-bg-color);
      }
      .tab.active {
        background: var(--background);
        color: var(--text-color);
        font-weight: bold;
        z-index: 2;
        border:1px solid var(--medium-grey);
        border-bottom:1px solid var(--bright-bg-color);
      }
    }

  }

  .form-config.tabBarFrame.mouse-over {
    .noTabs {
      display: inline;
    }
    .noTabs:hover {
      opacity: 0.8;
    }
  }

}

#jenkins .jenkins-config-container {
  width: 100vw;
  max-width: calc(var(--form-item-max-width) + 20px);
  margin: auto;
}

#jenkins{
  .jenkins-config {
    border: 1px solid var(--input-border);
    padding: 2rem 2rem 0 2rem;
    border-top: none;
    background: var(--bright-bg-color);
    .border-radius-bottom(@border-radius);

    .showTabs{
      display:block;
      text-align:right;

    }

    table {
      border-collapse: collapse;

      td {
        padding: 5px;
      }

      .repeated-chunk,
      tr[nameref^="rowSetStart"],
      tr[nameref^="cb"],
      tr[nameref^="radio-block"] {
        background: var(--shade-hint);
        border-left: 5px solid var(--shade);
      }

      .hetero-list-container,
      .repeated-container,
      tr.optional-block-start,
      tr.radio-block-start {
        border-left: 5px solid var(--shade);
        background: none;
      }
    }

    .config-table {
      // Table configuration
      table,
      .table {
        border-collapse: collapse;
      }

      p,
      .help,
      .setting-description {
        font-size: var(--font-size-sm);
      }

      tr.help-area,
      .tr.help-area {
        background: none !important;

        td,
        .td {
          padding: 0 5px;
        }
      }

      span.highlight {
        background-color: #ffff00;
      }
    }
  }
}

.yui-skin-sam .yuimenu {
  z-index: 9999 !important
}

.yui-skin-sam .yui-button-disabled {
  opacity: .75
}

/*
 * Tab bar specific rules.
 */

@import '../../../less/abstracts/theme.less';

.jenkins-config-widgets {
  position: relative;
  border:1px solid var(--input-border);
  border-bottom:none;
  background: var(--light-grey);
  min-height:2.5em;
  .border-radius-top(@border-radius);
  z-index:5;
  overflow: hidden;

  nav:before, nav:after {
    display: none;
  }

  :hover .noTabs{
    color:#bbb;
  }
  .noTabs:hover,
  .showTabs:hover {
    opacity: 0.8;
    background:#bbb;
    color:var(--light-bg-color);
     text-shadow:none;
  }

  @find-container-width: 200px;
  .find-container {
    margin:0;
    display:none;
  }

  .showTabs,
  .noTabs {
    position: absolute;
    border-radius: var(@border-radius);
    right: 5px;
    top: 5px;
    cursor: pointer;
    color: var(--medium-grey);
    text-shadow: var(--brightest-bg-color 0 1px 2px);
    font-size: var(--font-size-sm);
    padding: 3px 7px;
    display:none;
  }

  .form-config.tabBarFrame {
    position: relative;

    .config-section-activators {
      margin: 0;
      padding: 5px 0 0;
      display: block;
      list-style: none;
    }

    .tabBar {
      .tab {
        border: solid 1px transparent;
        color: var(--text-color-secondary);
        padding: 7px 10px;
        .border-radius-top(5px);
        cursor: pointer;
        margin: 1px 0 0 10px;
        text-decoration: none;
      }
      .tab:hover {
        background: var(--very-light-grey);
        color: var(--text-color-secondary);
        border:1px solid var(--medium-grey);
        border-bottom:1px solid var(--bright-bg-color);
      }
      .tab.active {
        background: var(--background);
        color: var(--text-color);
        font-weight: bold;
        z-index: 2;
        border:1px solid var(--medium-grey);
        border-bottom:1px solid var(--bright-bg-color);
      }
    }

  }

  .form-config.tabBarFrame.mouse-over {
    .noTabs {
      display: inline;
    }
    .noTabs:hover {
      opacity: 0.8;
    }
  }

}

#jenkins .jenkins-config-container {
  width: 100vw;
  max-width: calc(var(--form-item-max-width) + 20px);
  margin: auto;
}

#jenkins{
  .jenkins-config {
    border: 1px solid var(--input-border);
    padding: 2rem 2rem 0 2rem;
    border-top: none;
    background: var(--bright-bg-color);
    .border-radius-bottom(@border-radius);

    .showTabs{
      display:block;
      text-align:right;

    }

    table {
      border-collapse: collapse;

      td {
        padding: 5px;
      }

      .repeated-chunk,
      tr[nameref^="rowSetStart"],
      tr[nameref^="cb"],
      tr[nameref^="radio-block"] {
        background: var(--shade-hint);
        border-left: 5px solid var(--shade);
      }

      .hetero-list-container,
      .repeated-container,
      tr.optional-block-start,
      tr.radio-block-start {
        border-left: 5px solid var(--shade);
        background: none;
      }
    }

    .config-table {
      // Table configuration
      table,
      .table {
        border-collapse: collapse;
      }

      p,
      .help,
      .setting-description {
        font-size: var(--font-size-sm);
      }

      tr.help-area,
      .tr.help-area {
        background: none !important;

        td,
        .td {
          padding: 0 5px;
        }
      }

      span.highlight {
        background-color: #ffff00;
      }
    }
  }
}

.yui-skin-sam .yuimenu {
  z-index: 9999 !important
}

.yui-skin-sam .yui-button-disabled {
  opacity: .75
}


Fixed visuals for interactive dropdowns in mobile view

.dropdown {
	.dropdownToggle:active,
	&.dropdownOpen .dropdownToggle {
		outline: 0;
	}

	&.preInput {
		display: table;
		width: 100%;

		input {
			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius 0;
			display: table-cell;
			margin: 0;
			width: 99%;
		}

		textarea {
			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius;
			display: block;
			margin-top: 0;
		}

		.dropdownCaption {
			cursor: pointer;
			display: table-cell;
			letter-spacing: -1px;
			padding: 0 @wcfGapSmall 0 @wcfGapTiny;
			vertical-align: middle;
			width: 1%;

			&.button {
				border-right-width: 0;
				border-radius: @wcfInputBorderRadius 0 0 @wcfInputBorderRadius;
			}

			span {
				margin-right: -1px;
				padding-left: @wcfGapTiny;
				white-space: nowrap;
				word-wrap: normal;

				&.active::after {
					content: "\f0d7";
					font-family: FontAwesome;
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}

		.dropdownCaptionTextarea {
			cursor: pointer;
			margin: 0 0 -1px 0;
			padding-left: @wcfGapSmall;
			padding-right: @wcfGapSmall;

			&.button {
				border-radius: @wcfInputBorderRadius @wcfInputBorderRadius 0 0;
			}

			&~ .dropdownMenu {
				top: 10%;
			}

			span {
				white-space: nowrap;
				word-wrap: normal;

				&.active::after {
					content: "\f0d7";
					font-family: FontAwesome;
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}
	}

	&.dropdownOpen {
		.dropdownToggle {
			//color: @wcfPageLinkHoverColor;
		}

		.dropdownMenu {
			display: block;
		}
	}

	.dropdownToggle {
		cursor: pointer;
	}
}

.dropdownMenu {
	background-color: @wcfDropdownBackgroundColor;
	border: 1px solid @wcfDropdownBorderColor;
	color: @wcfDropdownColor;
	display: none;
	float: left;
	min-width: 160px;
	padding: 4px 0;
	position: absolute;
	text-align: left;
	z-index: 450;

	.boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);

	&::after {
		border: 7px solid transparent;
		border-bottom-color: @wcfDropdownBorderColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 9px;
		position: absolute;
		top: -7px;
		z-index: 100;
	}

	&::before {
		border: 6px solid transparent;
		border-bottom-color: @wcfDropdownBackgroundColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 10px;
		position: absolute;
		top: -6px;
		z-index: 101;
	}

	&.dropdownArrowRight {
		&::after {
			left: auto;
			right: 9px;
		}

		&::before {
			left: auto;
			right: 10px;
		}
	}

	&.dropdownArrowBottom {
		&::after {
			border: 7px transparent solid;
			border-top-color: @wcfDropdownBorderColor;
			border-bottom-width: 0;
			bottom: -7px;
			top: auto;
		}

		&::before {
			border: 6px transparent solid;
			border-top-color: @wcfDropdownBackgroundColor;
			border-bottom-width: 0;
			bottom: -6px;
			top: auto;
		}
	}

	&.dropdownOpen {
		display: block;
	}

	li {
		display: block;

		&:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
		&.dropdownList > li:hover:not(.dropdownDivider),
		&.dropdownNavigationItem,
		&.active {
			background-color: @wcfDropdownHoverBackgroundColor;
		}

		&.dropdownDivider {
			border-top: 1px dotted @wcfDropdownBorderColor;
			margin: @wcfGapTiny;
		}

		&.dropdownText {
			font-size: @wcfSmallFontSize;
			padding: @wcfGapTiny @wcfGapMedium;
		}

		&.boxFlag {
			padding-top: 2px;
		}

		> a,
		> span {
			clear: both;
			color: @wcfDropdownColor;
			cursor: pointer;
			display: block;
			max-width: 350px;
			overflow: hidden;
			padding: @wcfGapTiny @wcfGapMedium;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;

			.textShadow(@wcfDropdownBackgroundColor);

			&:hover {
				color: @wcfDropdownColor;

				.textShadow(@wcfDropdownHoverBackgroundColor);
			}

			> div > h3 {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		> a > small {
			display: block;
		}

		> a + span.badge {
			display: none;
		}

		> .box16 {
			cursor: pointer;
			min-height: 0;
			padding: @wcfGapTiny @wcfGapTiny @wcfGapTiny @wcfGapSmall;

			> div {
				margin-left: 21px;
			}
		}

		> label {
			display: block;
		}

		.containerHeadline {
			margin-bottom: 0;

			> p {
				font-size: @wcfSmallFontSize;
			}
		}
	}

	.scrollableDropdownMenu {
		max-height: 300px;
		overflow: auto;
	}
}

.boxFlag > .box24, .boxFlag.box24 {
	min-height: 20px;
}

@media only screen and (max-width: 800px) {
	.dropdownMenu {
		left: 0 !important;
		right: 0 !important;

		li {
			overflow: hidden;

			> a,
			> span {
				max-width: none;
				white-space: normal;
			}
		}
	}
}

.interactiveDropdown {
	background-color: @wcfContainerAccentBackgroundColor;
	border: 1px solid @wcfDropdownBorderColor;
	color: @wcfDropdownColor;
	display: block;
	position: absolute;
	z-index: 450;

	.boxShadow(0, 3px, rgba(0, 0, 0, .25), 8px);

	&:not(.open) {
		display: none !important;
	}

	> .interactiveDropdownHeader {
		padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);

		> .interactiveDropdownTitle {
			font-weight: bold;
		}

		> .interactiveDropdownLinks {
			float: right;

			> li {
				display: inline-block;
				margin-left: (@wcfGapSmall + @wcfGapTiny);
			}
		}

		&:after {
			clear: both;
		}
	}

	> .interactiveDropdownItemsContainer {
		border: 1px solid @wcfDropdownBorderColor;
		border-width: 1px 0;
		max-height: 300px;

		&.ps-container {
			> .interactiveDropdownItems {
				position: relative;
				z-index: 100;
			}

			> .ps-scrollbar-y-rail {
				z-index: 200;
			}
		}

		> .interactiveDropdownItems {
			> li {
				background-color: @wcfDropdownBackgroundColor;

				.transition(~"background-color, background-position", .3s, linear);

				&.loading,
				&.noItems {
					font-size: 1.2rem;
					padding: @wcfGapLarge @wcfGapMedium;
					text-align: center;
				}

				&:not(.loading):not(.noItems) {
					overflow: hidden;
					padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
					position: relative;

					.textShadow(@wcfContainerAccentBackgroundColor);

					&:not(:last-child) {
						border-bottom: 1px solid @wcfDropdownBorderColor;
					}

					&:hover {
						background-color: @wcfDropdownHoverBackgroundColor;
					}

					&.interactiveDropdownItemOutstanding {
						background-color: @wcfDropdownHoverBackgroundColor;
						background-repeat: no-repeat;
						background-size: 200%;

						.linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%");

						&:hover {
							background-position: 100%;
						}
					}

					&.interactiveDropdownItemOutstandingIcon > div.box32 {
						padding-right: 16px + (@wcfGapSmall + @wcfGapTiny);
					}

					&.notificationItem {
						.userLink {
							font-weight: bold;
						}
					}

					&.interactiveDropdownItemShadow {
						> .box32 {
							position: relative;
						}

						> .box32,
						> .interactiveDropdownItemMarkAsRead {
							pointer-events: none;
							z-index: 20;

							a {
								pointer-events: all;
							}
						}

						> .interactiveDropdownItemShadowLink {
							bottom: 0;
							left: 0;
							position: absolute;
							right: 0;
							top: 0;
							z-index: 10;
						}
					}

					&.groupedNotificationItem > .box32 > .framed > span.fa-users:before {
						position: relative;
						top: 3px;
					}
				}
			}

			&.interactiveDropdownItemsUserMenu {
				> li {
					&.dropdownDivider {
						padding: 0 !important;
					}

					&:not(.dropdownDivider) {
						border-bottom-width: 0 !important;
						padding: (@wcfGapSmall + @wcfGapTiny);
					}

					> .box32 > .containerHeadline {
						> h3 {
							font-size: 1.1rem;
						}
					}

					> .box64 {
						position: relative;

						> .containerHeadline > .interactiveDropdownUserMenuLinkList {
							bottom: 0;
							position: absolute;
						}
					}

					.interactiveDropdownUserMenuLinkList > li {
						display: inline-block;
						font-size: .85rem;

						&:after {
							content: " \2013 ";
						}

						&:last-child:after {
							content: "";
						}
					}
				}
			}
		}
	}

	> .interactiveDropdownShowAll {
		display: block;
		padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
		text-align: center;
	}

	> .pointer {
		border: 10px solid transparent;
		border-bottom-color: @wcfDropdownBorderColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		position: absolute;
		top: -10px;
		z-index: 100;

		> span {
			border: 8px solid transparent;
			border-bottom-color: @wcfContainerAccentBackgroundColor;
			border-top-width: 0;
			content: "";
			display: inline-block;
			left: -8px;
			position: absolute;
			top: 2px;
			z-index: 101;
		}
	}

	&.interactiveDropdownUserMenu {
		> .interactiveDropdownItemsContainer {
			overflow: visible;
			max-height: none;
		}

		> .pointer {
			border-width: 0 7px 7px 7px;
			top: -7px;

			> span {
				border-width: 0 5px 5px 5px;
				left: -5px;
			}
		}
	}
}

@media only screen and (min-width: 801px) {
	.interactiveDropdown {
		min-width: 350px;

		> .interactiveDropdownItemsContainer {
			overflow: hidden;
			position: relative;

			> .interactiveDropdownItems > li:not(.loading) {
				max-width: 400px;
				box-sizing: border-box;

				&.interactiveDropdownItemOutstandingIcon {
					> div.interactiveDropdownItemMarkAsRead {
						opacity: .6;
						position: absolute;
						right: (@wcfGapSmall + @wcfGapTiny);
						top: 50%;

						transform: translateY(-50%);
						-ms-transform: translateY(-50%);
						-webkit-transform: translateY(-50%);

						.transition(opacity, .3s, linear);
					}

					&:hover > div.interactiveDropdownItemMarkAsRead {
						opacity: 1;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 800px) {
	.interactiveDropdown {
		border-width: 1px 0;
		box-sizing: border-box;
		left: 0 !important;
		right: 0 !important;
		width: 100%;

		> .interactiveDropdownItemsContainer {
			overflow-x: auto;

			> .interactiveDropdownItems > li.interactiveDropdownItemOutstandingIcon > div.interactiveDropdownItemMarkAsRead {
				bottom: 0;
				position: absolute;
				right: 0;
				top: 0;
				width: (@wcfGapSmall + @wcfGapTiny) + 16px + (@wcfGapSmall + @wcfGapTiny);

				> a {
					display: block;
					height: 100%;
					text-align: center;

					> .icon {
						position: relative;
						top: 50%;

						transform: translateY(-50%);
						-ms-transform: translateY(-50%);
						-webkit-transform: translateY(-50%);
					}
				}
			}
		}
	}
}

.dropdown {
	.dropdownToggle:active,
	&.dropdownOpen .dropdownToggle {
		outline: 0;
	}

	&.preInput {
		display: table;
		width: 100%;

		input {
			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius 0;
			display: table-cell;
			margin: 0;
			width: 99%;
		}

		textarea {
			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius;
			display: block;
			margin-top: 0;
		}

		.dropdownCaption {
			cursor: pointer;
			display: table-cell;
			letter-spacing: -1px;
			padding: 0 @wcfGapSmall 0 @wcfGapTiny;
			vertical-align: middle;
			width: 1%;

			&.button {
				border-right-width: 0;
				border-radius: @wcfInputBorderRadius 0 0 @wcfInputBorderRadius;
			}

			span {
				margin-right: -1px;
				padding-left: @wcfGapTiny;
				white-space: nowrap;
				word-wrap: normal;

				&.active::after {
					content: "\f0d7";
					font-family: FontAwesome;
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}

		.dropdownCaptionTextarea {
			cursor: pointer;
			margin: 0 0 -1px 0;
			padding-left: @wcfGapSmall;
			padding-right: @wcfGapSmall;

			&.button {
				border-radius: @wcfInputBorderRadius @wcfInputBorderRadius 0 0;
			}

			&~ .dropdownMenu {
				top: 10%;
			}

			span {
				white-space: nowrap;
				word-wrap: normal;

				&.active::after {
					content: "\f0d7";
					font-family: FontAwesome;
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}
	}

	&.dropdownOpen {
		.dropdownToggle {
			//color: @wcfPageLinkHoverColor;
		}

		.dropdownMenu {
			display: block;
		}
	}

	.dropdownToggle {
		cursor: pointer;
	}
}

.dropdownMenu {
	background-color: @wcfDropdownBackgroundColor;
	border: 1px solid @wcfDropdownBorderColor;
	color: @wcfDropdownColor;
	display: none;
	float: left;
	min-width: 160px;
	padding: 4px 0;
	position: absolute;
	text-align: left;
	z-index: 450;

	.boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);

	&::after {
		border: 7px solid transparent;
		border-bottom-color: @wcfDropdownBorderColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 9px;
		position: absolute;
		top: -7px;
		z-index: 100;
	}

	&::before {
		border: 6px solid transparent;
		border-bottom-color: @wcfDropdownBackgroundColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 10px;
		position: absolute;
		top: -6px;
		z-index: 101;
	}

	&.dropdownArrowRight {
		&::after {
			left: auto;
			right: 9px;
		}

		&::before {
			left: auto;
			right: 10px;
		}
	}

	&.dropdownArrowBottom {
		&::after {
			border: 7px transparent solid;
			border-top-color: @wcfDropdownBorderColor;
			border-bottom-width: 0;
			bottom: -7px;
			top: auto;
		}

		&::before {
			border: 6px transparent solid;
			border-top-color: @wcfDropdownBackgroundColor;
			border-bottom-width: 0;
			bottom: -6px;
			top: auto;
		}
	}

	&.dropdownOpen {
		display: block;
	}

	li {
		display: block;

		&:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
		&.dropdownList > li:hover:not(.dropdownDivider),
		&.dropdownNavigationItem,
		&.active {
			background-color: @wcfDropdownHoverBackgroundColor;
		}

		&.dropdownDivider {
			border-top: 1px dotted @wcfDropdownBorderColor;
			margin: @wcfGapTiny;
		}

		&.dropdownText {
			font-size: @wcfSmallFontSize;
			padding: @wcfGapTiny @wcfGapMedium;
		}

		&.boxFlag {
			padding-top: 2px;
		}

		> a,
		> span {
			clear: both;
			color: @wcfDropdownColor;
			cursor: pointer;
			display: block;
			max-width: 350px;
			overflow: hidden;
			padding: @wcfGapTiny @wcfGapMedium;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;

			.textShadow(@wcfDropdownBackgroundColor);

			&:hover {
				color: @wcfDropdownColor;

				.textShadow(@wcfDropdownHoverBackgroundColor);
			}

			> div > h3 {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		> a > small {
			display: block;
		}

		> a + span.badge {
			display: none;
		}

		> .box16 {
			cursor: pointer;
			min-height: 0;
			padding: @wcfGapTiny @wcfGapTiny @wcfGapTiny @wcfGapSmall;

			> div {
				margin-left: 21px;
			}
		}

		> label {
			display: block;
		}

		.containerHeadline {
			margin-bottom: 0;

			> p {
				font-size: @wcfSmallFontSize;
			}
		}
	}

	.scrollableDropdownMenu {
		max-height: 300px;
		overflow: auto;
	}
}

.boxFlag > .box24, .boxFlag.box24 {
	min-height: 20px;
}

@media only screen and (max-width: 800px) {
	.dropdownMenu {
		left: 0 !important;
		right: 0 !important;

		li {
			overflow: hidden;

			> a,
			> span {
				max-width: none;
				white-space: normal;
			}
		}
	}
}

.interactiveDropdown {
	background-color: @wcfContainerAccentBackgroundColor;
	border: 1px solid @wcfDropdownBorderColor;
	color: @wcfDropdownColor;
	display: block;
	position: absolute;
	z-index: 450;

	.boxShadow(0, 3px, rgba(0, 0, 0, .25), 8px);

	&:not(.open) {
		display: none !important;
	}

	> .interactiveDropdownHeader {
		padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);

		> .interactiveDropdownTitle {
			font-weight: bold;
		}

		> .interactiveDropdownLinks {
			float: right;

			> li {
				display: inline-block;
				margin-left: (@wcfGapSmall + @wcfGapTiny);
			}
		}

		&:after {
			clear: both;
		}
	}

	> .interactiveDropdownItemsContainer {
		border: 1px solid @wcfDropdownBorderColor;
		border-width: 1px 0;
		max-height: 300px;

		&.ps-container {
			> .interactiveDropdownItems {
				position: relative;
				z-index: 100;
			}

			> .ps-scrollbar-y-rail {
				z-index: 200;
			}
		}

		> .interactiveDropdownItems {
			> li {
				background-color: @wcfDropdownBackgroundColor;

				.transition(~"background-color, background-position", .3s, linear);

				&.loading,
				&.noItems {
					font-size: 1.2rem;
					padding: @wcfGapLarge @wcfGapMedium;
					text-align: center;
				}

				&:not(.loading):not(.noItems) {
					overflow: hidden;
					padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
					position: relative;

					.textShadow(@wcfContainerAccentBackgroundColor);

					&:not(:last-child) {
						border-bottom: 1px solid @wcfDropdownBorderColor;
					}

					&:hover {
						background-color: @wcfDropdownHoverBackgroundColor;
					}

					&.interactiveDropdownItemOutstanding {
						background-color: @wcfDropdownHoverBackgroundColor;
						background-repeat: no-repeat;
						background-size: 200%;

						.linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%");

						&:hover {
							background-position: 100%;
						}
					}

					&.interactiveDropdownItemOutstandingIcon > div.box32 {
						padding-right: 16px + (@wcfGapSmall + @wcfGapTiny);
					}

					&.notificationItem {
						.userLink {
							font-weight: bold;
						}
					}

					&.interactiveDropdownItemShadow {
						> .box32 {
							position: relative;
						}

						> .box32,
						> .interactiveDropdownItemMarkAsRead {
							pointer-events: none;
							z-index: 20;

							a {
								pointer-events: all;
							}
						}

						> .interactiveDropdownItemShadowLink {
							bottom: 0;
							left: 0;
							position: absolute;
							right: 0;
							top: 0;
							z-index: 10;
						}
					}

					&.groupedNotificationItem > .box32 > .framed > span.fa-users:before {
						position: relative;
						top: 3px;
					}
				}
			}

			&.interactiveDropdownItemsUserMenu {
				> li {
					&.dropdownDivider {
						padding: 0 !important;
					}

					&:not(.dropdownDivider) {
						border-bottom-width: 0 !important;
						padding: (@wcfGapSmall + @wcfGapTiny);
					}

					> .box32 > .containerHeadline {
						> h3 {
							font-size: 1.1rem;
						}
					}

					> .box64 {
						position: relative;

						> .containerHeadline > .interactiveDropdownUserMenuLinkList {
							bottom: 0;
							position: absolute;
						}
					}

					.interactiveDropdownUserMenuLinkList > li {
						display: inline-block;
						font-size: .85rem;

						&:after {
							content: " \2013 ";
						}

						&:last-child:after {
							content: "";
						}
					}
				}
			}
		}
	}

	> .interactiveDropdownShowAll {
		display: block;
		padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
		text-align: center;
	}

	> .pointer {
		border: 10px solid transparent;
		border-bottom-color: @wcfDropdownBorderColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		position: absolute;
		top: -10px;
		z-index: 100;

		> span {
			border: 8px solid transparent;
			border-bottom-color: @wcfContainerAccentBackgroundColor;
			border-top-width: 0;
			content: "";
			display: inline-block;
			left: -8px;
			position: absolute;
			top: 2px;
			z-index: 101;
		}
	}

	&.interactiveDropdownUserMenu {
		> .interactiveDropdownItemsContainer {
			overflow: visible;
			max-height: none;
		}

		> .pointer {
			border-width: 0 7px 7px 7px;
			top: -7px;

			> span {
				border-width: 0 5px 5px 5px;
				left: -5px;
			}
		}
	}
}

@media only screen and (min-width: 801px) {
	.interactiveDropdown {
		min-width: 350px;

		> .interactiveDropdownItemsContainer {
			overflow: hidden;
			position: relative;

			> .interactiveDropdownItems > li:not(.loading) {
				max-width: 400px;
				box-sizing: border-box;

				&.interactiveDropdownItemOutstandingIcon {
					> div.interactiveDropdownItemMarkAsRead {
						opacity: .6;
						position: absolute;
						right: (@wcfGapSmall + @wcfGapTiny);
						top: 50%;

						transform: translateY(-50%);
						-ms-transform: translateY(-50%);
						-webkit-transform: translateY(-50%);

						.transition(opacity, .3s, linear);
					}

					&:hover > div.interactiveDropdownItemMarkAsRead {
						opacity: 1;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 800px) {
	.interactiveDropdown {
		left: 0 !important;
		right: 0 !important;
		width: 100%;

		> .interactiveDropdownItemsContainer {
			overflow-x: auto;

			> .interactiveDropdownItems > li.interactiveDropdownItemOutstandingIcon > div.interactiveDropdownItemMarkAsRead {
				bottom: 0;
				position: absolute;
				right: 0;
				top: 0;
				width: (@wcfGapSmall + @wcfGapTiny) + 16px + (@wcfGapSmall + @wcfGapTiny);

				> a {
					display: block;
					height: 100%;
					text-align: center;

					> .icon {
						position: relative;
						top: 50%;

						transform: translateY(-50%);
						-ms-transform: translateY(-50%);
						-webkit-transform: translateY(-50%);
					}
				}
			}
		}
	}
}


minor style fixes.

minor style fixes.