fix reviewer tools tabnav for real (bug 847330)

@import 'lib';

#breadcrumbs {
    margin-bottom: 15px;
}

h2, h3 {
    margin: 10px 0 0;
}

#page p + h2 {
    margin-top: 10px;
}

th {
    font-weight: bold;
}

dt {
    float: left;
    min-width: 20%;
}

dd {
    margin-bottom: 0;
    &:after {
        content: " ";
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }
    a {
        margin: -5px;
        padding: 5px;
    }
    &.warn {
        color: @red;
        font-weight: bold;
    }
}

/* Review Page */

header {
    .addon {
        min-height: 38px;
        padding-left: 50px;
        position: relative;
    }
    .icon {
        min-height: 32px;
        min-width: 32px;
        padding: 4px;
        position: absolute;
        left: 0;
        background: @white;
        border-radius: 2px;
        box-shadow: 0 1px 2px #000;
    }
    .author {
        margin: 0 0 20px;
    }
    #actions {
        float: right;
        margin-top: 15px;
        li {
            margin-left: 10px;
        }
    }
}

.html-rtl header {
    .icon {
        margin-left: 5px;
    }
    h1 {
        float: right;
    }
    #actions {
        float: left;
    }
}

#addon {
    float: left;
    width: 75%;
    #summary p, .userinput {
        color: @medium-gray;
        line-height: 15px;
    }
    em.no-results {
        display: block;
        font-style: italic;
        font-size: 13px;
        font-weight: normal;
        padding: 0;
    }
}

.html-rtl #addon {
    float: right;
}

#scroll_sidebar_parent {
    float: right;
    position: relative;
    width: 16%;
    strong {
        display: block;
        margin-top: 10px;
    }
    li {
        margin-top: 5px;
    }
}

#aux-nav a {
    color: @medium-gray;
}

.site-title {
    display: block;
    font: bold 36px/38px @open-stack;
    text-shadow: 0 1px 1px fadeOut(#000, 25%);
    text-transform: uppercase;
    padding: 15px 0;
    max-width: 530px;
    a {
        color: #fff;
        display: block;
        text-decoration: none;
        width: 100%;
        small {
            color: @light-gray;
            display: block;
            font-size: 12px;
            line-height: 14px;
            padding: 0 2px;
        }
        &:hover {
            color: darken(#fff, 10%);
            small {
                color: darken(@light-gray, 20%);
            }
        }
    }
}

#site-header {
    background-color: darken(#5b3f4f, 5%);
    height: 81px;
    .menu-nav {
        padding: 0;
    }
}

.menu-nav {
    margin: 0;
}

@media (max-width: 860px) {
    #site-header {
        h1, .menu-nav {
            padding: 0 2%;
        }
    }
}

/* sprites for data grid icons */

.sprite-reviewer {
    float: left;
    margin-right: 4px;
    background: url(../../img/mkt/icons/mkt-reviewer-icons.png) no-repeat;
    width: 16px;
    height: 16px;
    position: relative;
    top: 4px;
    text-decoration: none;
}
.sprite-reviewer-editor {
    background-position: 0 0;
}
.sprite-reviewer-notes {
    background-position: -16px 0;
}
.sprite-reviewer-packaged-app {
    background-position: 0 -16px;
}
.sprite-reviewer-locked {
    background-position: -16px -16px;
}
.sprite-reviewer-premium {
    background-position: -32px 0;
}
.sprite-reviewer-info {
    background-position: -32px -16px;
}
.sprite-reviewer-blocked {
    background-position: 0 -32px;
}

.sort-icon {
    background: url(../../img/developers/editor-sprite.png) no-repeat top left;
}
.ed-sprite-sort-asc {
    background-position: right -321px;
}
.ed-sprite-sort-both {
    background-position: right -378px;
}
.ed-sprite-sort-desc {
    background-position: right -435px;
}
.queue-outer {
    border-radius: 5px;
    border: 4px solid #E0EFFD;
    margin-bottom: 2em;
    .no-results {
        margin: 0;
        padding: 6em 1em;
        font-size: 1.1em;
    }
}
.queue-inner {
    border-radius: 3px;
    background-color: @white;
    border: 1px solid #2E5186;
    a em {
        font-size: 0.8em;
        opacity: 0.6;
    }
}

.device-list {
    width: 121px;
}

/* Version notes */
#popup-notes .version-notes {
    overflow: auto;
    max-height: 200px;
    margin-bottom: 1em;
}
.addon-version-notes {
    position: relative;
}
table.data-grid .addon-version-notes a {
    text-decoration: none;
}
.data-grid .extra-info {
    text-align: center;
    em {
        display: block;
    }
}

.island {
    position: relative;
    z-index: 1;
}

.html-rtl .tabnav {
    text-align: right;
}

#page ul.tabnav {
    padding: 0;
    a {
        border-radius: 5px 5px 0 0;
        background-color: @taupe;
        border: 1px solid transparent;
        border-bottom: 0;
        font-weight: bold;
        color: @medium-gray;
        display: inline-block;
        padding: 10px 15px 20px;
        text-decoration: none;
    }
}

/* Home */
#editors_main .listing {
    .results-inner {
        padding: 0;
        time {
            color: #aaa;
            font-style: italic;
        }
    }
    .row {
        padding: 0.5em;
        margin: 0 5px;
        border-bottom: 1px dotted #ADD0DC;
        &:last-child {
            border-bottom-width: 0px;
        }
    }
}

.listing .listing-header {
    text-align: center;
    font-weight: bold;
}

.editor-stats-title,
.editor-stats-table {
    width: 50%;
    float: left;
}

#editors-stats-charts .editor-stats-title,
#editors-stats-charts .editor-stats-table {
    width: 100%;
    float: none;
}

.editor-stats-title span,
.editor-stats-title a {
    font-weight: bold;
    padding-left: 7px;
}

.editor-stats-table {
    & > div {
        padding: 0 10px 5px;
        margin: 5px 0 0;
        border-left: 1px dotted #ADD0DC;
    }
    &:first-child > div {
        border-left-width: 0px;
    }
    table {
        width: 100%;
        margin: 0;
        tr:first-child td {
            border-top-width: 0px;
        }
    }
    td, th {
        padding: 0;
        border-top: 1px solid #F0F7FE;
    }
    .int {
        text-align: right;
        color: #37A632;
        font-weight: bold;
    }
    .date {
        text-align: right;
        color: #999;
        font-style: italic;
    }
}

.listing-header {
    line-height: 1.8em;
}

.daily-message {
    display: none;
    position: relative;
    div {
        padding: 15px;
    }
    .close {
        background-color: @border-gray;
        border-radius: 15px;
        color: @white;
        font-weight: bold;
        height: 15px;
        line-height: 12px;
        position: absolute;
        right: 5px;
        text-align: center;
        top: 5px;
        width: 15px;
        text-decoration: none;
        display: none;
        &:hover {
            background-color: @light-gray;
            text-decoration: none;
        }
    }
    p {
        margin: 0;
    }
    h2 {
        font-size: 1em;
        font-weight: bold;
        margin-top: 0;
    }
}

.featured-inner-padded {
    padding: 15px;
}

table.data-grid tr.comments td {
    border-top: none;
    background: #def;
}
thead th {
    &:first-child {
        width: 0;
    }
}

.waiting_old, .waiting_med, .waiting_new {
    height: 20px;
    box-shadow: 0px 2px rgba(0, 0, 0, 0.1) inset;
    float: left;
    -moz-transition: 0.3s background-color;
}

.waiting_old:hover, .waiting_med:hover, .waiting_new:hover {
    -moz-transition: 0.1s background-color;
}

.waiting_old {
    background-color: #FFD3D3;
    &:hover {
        background-color: #FCBCBC;
    }
}

.waiting_med {
    background-color: #FFFFB4;
    &:hover {
        background-color: #F5F484;
    }
}
.waiting_new {
    background-color: #B8E6B8;
    &:hover {
        background-color: #9DE19C;
    }
}

div.editor-waiting {
    border: 1px solid @note-gray;
    border-radius: 5px;
    overflow: hidden;
}

div.editor-stats-dark {
    background-color: #F3F3F3;
    border-top: 1px dotted @medium-gray;
    display: block;
    padding: 5px 10px 10px;
}

div.editor-stats-table > div.editor-stats-dark {
    border-left: 1px solid #DDDDDD;
}

/* Moderated reviews css */

#reviews-flagged {
    .review-flagged {
        border-top: 1px dotted @medium-gray;
        line-height: 20px;
        margin: 0 0 1em 1em;
        padding: 1em;
        ul {
            margin-bottom: 0;
        }
    }
    &:first-child {
        border-top: 0;
    }
    .reviews-flagged-reasons {
        background-color: lighten(@red, 50%);
        border-radius: 10px;
        clear: both;
        margin: 0;
        padding: 0 10px;
        li {
            border-top: 1px dotted @light-gray;
            padding: 10px 0;
            &:first-child {
                border-top: 0;
            }
        }
    }
    h3 {
        margin: 0;
    }
    p {
        margin-bottom: 1.5em;
    }
    .review-flagged-actions {
        border-left: 1px dashed @medium-gray;
        float: right;
        margin-left: 10px;
        padding-left: 10px;
        width: 200px;
        label {
            font-weight: normal;
        }
    }
    form {
        margin: 0;
    }
    div.review-saved {
        margin-bottom: 0;
        padding: 10px;
        text-align: right;
    }
    label[for$=action_0] {
        color: @green;
    }
    label[for$=action_2] {
        color: @maroon;
    }
    .stars {
        float: left;
    }
    span.light {
        color: @note-gray;
    }
}
.html-rtl #reviews-flagged {
    .stars {
        float: right;
    }
}

/* data grid search form */
#log-filter form {
    margin: 0;
}
.log-filter-outside {
    float: right;
    label {
        font-weight: normal;
    }
    input::-webkit-input-placeholder {
       color: #BBB;
    }
    input:-moz-placeholder {
       color: #BBB;
    }
    div.date_range {
        padding: 0.5em 0 0;
    }
}

#queue-search {
    padding: 1em;
    margin-bottom: 1em;
    #clear-queue-search {
        text-transform: lowercase;
    }
    .date_range {
        padding: 1em;
    }
    label[for="id_text_query"] {
        margin-right: .5em;
    }
    button {
        margin: 0 .5em;
    }
}
.advanced-search {
    margin-top: 26px;
    &.hidden {
        display: none;
    }
    label {
        margin-bottom: .5em;
    }
    ul label {
        font-weight: normal;
    }
    .form-elem, .form-row {
        margin-bottom: 10px;
    }
    .form-row {
        clear: both;
    }
    .basic-filters {
        float: left;
        position: relative;
        top: 3px;
        width: 350px;
        select, input {
            position: relative;
            bottom: 3px;
        }
        label {
            display: block;
            float: left;
            width: 13em;
        }
    }
    .device-type-select, .premium-type-select {
        float: left;
        label {
            display: block;
        }
    }
    .device-type-select {
        width: 200px;
    }
    .premium-type-select {
        width: 250px;
    }
    .premium-type-select:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}
#id_text_query {
    width: 25em;
    height: 2em;
}

/* Add-on Review Log */
#log-listing tr th:nth-child(1) {
    width: 20%;
}
#log-listing tr th:nth-child(2) {
    width: 40%;
}
#log-listing tr th:nth-child(3) {
    width: 25%;
}
#log-listing tr th:nth-child(4) {
    width: 15%;
}
#log-listing .hide {
    display: none;
}

#scroll_sidebar {
    position: absolute;
    top: 0;
    .sticky {
        position: fixed;
        top: 10px;
    }
}

#history {
    border-radius: 5px;
    padding: 0;
    width: 100%;
    #review-files-header {
        padding: 0 15px;
    }
    h3 span {
        color: @medium-gray;
        padding: 0 5px;
    }
    table {
        line-height: 1.3;
        width: 100%;
    }
    .log-group {
        color: @medium-gray;
        margin: 10px 0 0;
    }
    .log-comments {
        ul {
            list-style: disc inside;
            margin: 5px 0;
        }
    }
    .log-attachments {
        li{
            margin: 4px 0 0 1px;
            &:first-child {
                margin-top: 6px;
            }
            &.image a {
                background-position: 0 -1369px;
            }
        }
        a {
            background: url("../../img/icons/news-feed-sprite.png") 0 -1407px no-repeat;
            display: inline-block;
            min-height: 16px;
            padding-left: 22px;
        }
    }
}

#review-files {
    width: 100%;
    .listing-header > th {
        background: @faded-blue;
        padding: 5px 15px;
    }
    .listing-header,
    .listing-body {
         border-top: 1px solid #A5BFCE;
    }
    td {
        border-radius: 0 0 5px 5px;
        background-color: #FAFAFA;
        padding: 15px;
    }
}
#review-files-header h3 {
    span {
        font-size: 0.7em;
    }
    h3 a.on {
        color: #333;
        font-weight: bold;
    }
    #review-files-paginate {
        float: right;
        margin-top: 2em;
    }
}
#review-files-paginate ol {
    float: right;
    margin: 0;
    padding-left: 10px;
    text-align: right;
    top: -20px;
    width: auto;
}
#review-files table.activity {
    th {
      width: 25%;
      padding-right: 1em;
    }
    tr {
        border-top: 1px dotted #ccc;
        td {
            padding: 15px 0;
        }
        &:first-child td {
            padding-top: 0;
        }
        &:last-child td {
            padding-bottom: 0;
        }
    }
    tr:first-child {
        border-top: 0 none;
    }
}
#review-files .listing-header span.light {
    font-weight: normal;
    color: #999;
}
#review-files tr.listing-header {
    &:hover {
        cursor: pointer;
        .gradient-two-color(@white, #CCE6FF);
    }
    &:active {
        cursor: pointer;
        .gradient-two-color(#e0effd, @white);
    }
}
#review-files .files {
    div:first-child {
        padding-top: 0;
    }
    li, & > div {
        padding-top: 5px;
        line-height: 1.3em;
    }
    ul {
        margin: 0 0 5px 15px;
    }
}
#review-files .no-activity {
    color: #777;
    font-style: italic;
    text-align: center;
}
#review-files .install {
    padding: 0;
}

#review-actions-form {
    background: @white;
    display: none;
    padding: 10px;
    textarea, input[type=text], select {
        border: 1px solid #AFBDD3;
    }
    textarea {
        height: 200px;
    }
    .review-actions-desc {
        text-align: center;
    }
    label {
        display: inline-block;
        margin: 5px 0;
    }
    .review-actions-tested label {
        margin: 5px 10px 5px 25px;
    }
    .review-actions-device-override {
        ul {
            margin-top: 5px;
            li {
                display: inline-block;
                margin-right: 15px;
            }
        }
    }
}

.review-actions {
    border-radius: 5px;
    box-shadow: 0 -2px 0 @faded-blue inset, 0 0 1px rgba(0, 0, 0, 0.1);
    border: 1px solid @border-blue;
    margin: 15px 0 30px;

    #review-actions-form {
        display: none;
    }
    .action_nav {
        ul {
            margin: 0;
            display: table;
            width: 100%;
        }
        li {
            .gradient-two-color(@white, #e0effd);
            border-top: 1px solid #2E5186;
            border-bottom: 1px solid #2E5186;
            border-right: 1px solid #A5BFCE;
            display: table-cell;
            text-align: center;
            text-shadow: 1px 1px 0 @white;
            &:active {
                .gradient-two-color(#e0effd, @white);
            }
            input {
                display: none;
            }
            label {
                display: block;
                padding: 10px 5px;
            }
            &:first-child {
                border-left: 1px solid #2E5186;
                border-radius: 5px 0 0 5px;
            }

            &:last-child {
                border-right: 1px solid #2E5186;
                border-radius: 0 5px 5px 0;
            }
        }
    }
}

.review-actions.on {
    #review-actions-form {
        border: 1px solid #2E5186;
        border-top-width: 0;
        border-radius: 0 0 5px 5px;
    }
    .action_nav {
        ul li.on-tab {
            background: #fff;
            border-bottom: none;
        }
        li {
            border-bottom: 1px solid #A5BFCE;
            &:first-child {
                border-radius: 5px 0 0;
            }
            &:last-child {
                border-radius: 0 5px 0 0;
            }
        }
    }
}

/* Hide "files" for now. */
.review-actions-files {
    display: none !important;
}

#review-actions-files-warning {
    color: #B47100;
}

.review-actions-canned {
    margin-top: 10px;
    text-align: right;
    #id_canned_response optgroup[label=""] {
        display: none;
    }
    select {
        padding: 0;
    }
}

.review-actions-attachments {
    .formset {
        margin-top: 1.5em;
    }
    .fileinput {
        margin-bottom: 0.33em;
    }
    a.add-row {
        background: url("../../img/icons/news-feed-sprite.png") no-repeat 0 -1444px;
        display: inline-block;
        margin-top: 6px;
        min-height: 15px;
        padding: 1px 0 0 22px;
    }
}

@media (min-width: @tablet-min) {
    .review-actions-attachments {
        .formset {
            margin-top: 1em;
        }
        .fileinput {
            display: inline-block;
            margin-right: 25px;
        }
    }
}

.review-actions-section {
    border-top: 1px dotted #ccc;
    margin-top: 1em;
    padding-top: 1em;
    label {
        font-weight: normal;
    }
}

.review-actions-save {
    text-align: right;
}

.history-comment {
    white-space: pre-wrap;
    .history-comment-version {
        padding: 10px;
        overflow: auto;
    }
}

.history-comment-byline {
    padding: 0 10px;
    font-style: italic;
}

.review-paging {
    border-bottom: 1px dotted #ccc;
    margin-bottom: 2em;
    padding-bottom: 1em;
    text-align: center;
}

#editor-motd {
    textarea {
        height: 5em;
        margin-bottom: 0.5em;
    }

    .buttons {
        text-align: right;
    }
}

.currently_viewing_warning {
    display: none;
}

.scroll_sidebar_parent .currently_viewing_warning {
    margin-top: 0;
    border: medium none;
    border-radius: 8px;
}

div.currently_viewing_warning {
    background-color: #FFE4E4;
    margin: 1em 0;
    border: 1px dashed #FE7272;
    padding: 10px;
}

div.currently_viewing_warning strong {
    display: block;
}

span.currently_viewing_warning {
    color: red;
    padding-right: 15px;
}

.concealed {
    font-size: 15px;
    font-weight: bold;
    padding: 4px 10px 7px;
    &:hover {
        .gradient-two-color(#ccc, #bbb);
        color: @dark-gray;
    }
}

#actions {
    .button.product {
        position: relative;
        width: 100%;
        z-index: 1;
    }
    .button {
        display: block;
    }
    .faked-purchase,
    .approval {
        border-radius: 0 0 5px 5px;
        display: block;
        margin-top: -5px;
        padding: 15px 15px 10px;
        position: relative;
        z-index: 0;
    }
    .no-apps {
        text-align: center;
        margin-top: 10px;
        line-height: 20px;
        display: none;
        a {
            background: url(../../img/mkt/icons/nightly.png) 5px 0 no-repeat;
            padding: 0 5px 0 30px;
            display: inline-block;
        }
    }
    .faked-purchase {
        border-radius: 0 0 5px 5px;
        background: fadeOut(@red, 90%);
        font-size: 12px;
        text-align: center;
        b {
            color: @maroon;
            display: block;
            text-transform: uppercase;
        }
    }
}

#reviewers-score-bar {
    ul li {
        float: left;
        width: 32%;
        margin: 0 0.5%;
    }
    h3 {
        margin-top: 0;
    }
    tr.you-are-here {
        font-weight: bold;
    }
    td.number {
        text-align: right;
    }
    p.total {
        margin-bottom: 10px;
    }
}

.html-rtl #reviewers-score-bar {
    ul li {
        float: right;
    }
    td.number {
        text-align: left;
    }
}

#view-manifest {
    &:hover, b {
        color: #036;
    }
    b {
        &:before {
            content: "(";
        }
        &:after {
            content: ")";
        }
    }
}

#leaderboard {
    td.name {
        width: 70%;
    }
    th.rank {
        color: @orange;
    }
    td.level {
        color: @medium-gray;
        white-space: nowrap;
    }
}

#manifest-headers,
#manifest-permissions,
#manifest-contents {
    .border-box;
    color: @dark-gray;
    clear: both;
    font: 12px/14px @mono-stack;
    list-style: none;
    margin: 15px 0;
    overflow-x: auto;
    white-space: pre;
    width: 100%;
}

#manifest-headers,
#manifest-permissions {
    background-color: @faint-gray;
    border: @dark-gray 2px solid;
    padding: 5px 10px;
}

#manifest-contents {
    background-color: #def;
    border: darken(#def, 75%) 2px solid;
    // Using counters so we can style the line numbers.
    counter-reset: item;
    li {
        counter-increment: item;
        padding: 5px 10px;
        &:before {
            background-color: @faint-gray;
            display: inline-block;
            color: @note-gray;
            content: counter(item);
            margin: -5px 10px -5px -10px;
            padding: 5px;
            text-align: right;
            width: 3ex;
        }
        &:nth-child(2n + 1) {
            background: lighten(#def, 4%);
        }
    }
}

iframe#manifest-contents {
    min-height: 250px;
}

// Addresses issue with drop-downs menus vs. active queue tab.
#site-nav {
    z-index: 10;
}

@media (max-width: @landscape-max) {
    #id_text_query {
        display: block;
        font-size: 18px;
        margin-top: .5em;
        width: 100%;
    }
    #queue-search button {
        margin: .5em .5em 0 0;
    }
    html, body {
        background: @bg-gray @grain-src;
    }
    #breadcrumbs,
    #actions + strong,
    #actions + strong + ul,
    #helpfulLinks,
    #footer {
        display: none;
    }
    #reviewers-score-bar {
        margin-bottom: 15px;
    }
    #site-header h1 {
        .border-box;
        border-top: 1px solid @light-gray;
        margin: 0;
        max-width: 100%;
        padding: 0;
        a {
            .border-box;
            border-top: 1px solid @faint-gray;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            padding: 10px;
        }
        small {
            display: inline-block;
            font-size: 14px;
            font-weight: 200;
            padding: 0;
            &:after {
                color: #bbb;
                content: "\00a0\00a0/\00a0";
                display: inline-block;
                font-size: 14px;
                vertical-align: top;
            }
        }
    }
    #site-header {
        .menu-nav, .upper-header {
            padding: 0;
        }
    }
    #aux-nav {
        background: @border-gray;
        float: none;
        font-size: 11px;
        max-width: 100%;
        > ul > li {
            border-right: 1px solid darken(@border-gray, 10%);
        }
    }
    #site-nav {
        border: 1px solid #bbb;
    }
    #site-nav .menu-nav > ul {
        > li {
            margin: 0;
            &:first-child > a {
                padding-left: 10px;
            }
            &:last-child {
                border-right: 1px dotted @light-gray;
            }
            > a {
                font-size: 11px;
                font-weight: 400;
                padding: 10px;
            }
        }
    }
    .menu-nav > ul > li > ul a {
        padding: 16px 8px;
    }
    #wrap {
        padding: 10px 0 0;
    }
    ul.tabnav {
        li {
            display: none;
            &.selected {
                display: block;
            }
        }
        a {
            .border-box;
            font-size: 12px;
            padding: 10px;
            pointer-events: none;
            width: 100%;
            &:active {
                background-color: lighten(@taupe, 5%);
                color: @note-gray;
            }
        }
        + .island {
            border-radius: 0;
            padding: 0;
        }
    }
    .data-grid {
        .addon-row a {
            display: block;
            font-size: 12px;
            line-height: 14px;
            margin: -15px -30px;
            padding: 15px 30px;
            text-align: left;
        }
        .desktop-only,
        .unsupported,
        .abuse-reports,
        .waiting-time {
            display: none;
        }
        .number {
            text-align: right;
        }
    }
    .device-list {
        margin: 0 auto;
        .firefoxos {
            width: 20px;
        }
    }
    #page h1 {
        font-size: 18px;
        line-height: 20px;
        margin: 10px 0 15px;
    }
    #scroll_sidebar_parent,
    #addon {
        float: none;
        width: 100%;
    }
    #scroll_sidebar_parent,
    #scroll_sidebar {
        position: inherit;
    }
    #scroll_sidebar {
        margin-bottom: 15px;
    }
    #actions {
        li {
            .border-box;
            float: left;
            margin: 0;
            width: 33.33%;
            + li {
                padding-left: 5px;
            }
        }
        .app-install .button {
            font-weight: 600;
        }
        .button {
            height: inherit;
            font-weight: 100;
            padding: 8px;
            &.product {
                top: -2px;
            }
        }
    }
    dt {
        min-width: 30%;
    }
    .app-name a {
        font-weight: 600;
    }
}

@mobileborder: #d7d2c3;
@media (max-width: @mobile-max) {
    .mobile-queue-search, .mobile-paginator {
        display: block;
    }
    .impala-paginator {
        display: none;
    }
    .toggle-queue-search, #queue-search .button span, ul.tabnav a {
        font-size: 16px;
    }
    .button {
        margin-top: 0px;
        min-width: 0%;
        margin-right: 0;
        top: 8px;
        span {
            bottom: 9px;
            position: relative;
        }
    }
    #site-nav {
        border: 0px;
        .pad {
            height: 100%;
            padding: 0;
        }
        nav.menu-nav {
            height: 100%;
            ul {
                height: 100%;
            }
            li {
                height: 100%;
                &.selected {
                    background: rgb(62, 52, 62);
                    a {
                        color: @white;
                    }
                }
                a {
                    font-size: 16px;
                    position: relative;
                    top: 4px;
                }
            }
            & > ul li:not(.open):hover > ul, &.open > ul {
                display: none;
            }
        }
    }
    #queue-search {
        padding: 0;
        margin: 26px 0 6px;
        label[for="id_text_query"] {
            display: none;
        }
        input#id_text_query {
            display: inline-block;
            margin-right: 5px;
            margin-top: 0;
            width: 75%;
        }
        .button {
            height: 36px;
            max-width: 22%;
            margin-right: 0;
        }
        .toggle-queue-search {
            bottom: 64px;
            float: right;
            line-height: 6px;
            margin-right: 3px;
            position: relative;
        }
    }
    .island #queue-search {
        display: none;
    }
    #reviewers-score-bar {
        display: none;
    }
    dt {
        float: none;
        margin: 0 0 3px;
        width: 100%;
    }
    dd {
        margin-bottom: 15px;
    }
    #actions li {
        width: 50%;
        &.app-install {
            .button {
                display: block;
            }
        }
        &:first-child {
            padding-right: 3px;
        }
        &:nth-child(2) {
            padding-left: 3px;
        }
        &:last-child {
            display: none;
        }
        &.app-install button.product, .button {
            padding: 0;
            top: 0;
            height: 48px;
            font-size: 13px;
            font-weight: normal;
            border: 0;
        }
    }
    #page h1.menutrigger {
        background: #d7d2c4;
        color: #686868;
        line-height: 38px;
        margin: 0;
        padding: 0 8px;
        border-radius: 3px 3px 0 0;

    }
    .statuslist, .island.alpha {
        border: 1px solid @mobileborder;
        border-radius: 4px;
        background: #fff;
        margin-bottom: 15px;
    }
    .statuslist {
        > li {
            padding: 0 15px;
            line-height: 40px;
            &:first-child {
                border-bottom: 1px solid @mobileborder;
            }
            &:only-child {
                border-bottom: 0;
            }
        }
        &.padded > li {
            padding: 15px;
        }
    }
    .review-actions .action_nav li:first-child,
    .review-actions .action_nav li:last-child,
    .review-actions .action_nav li {
        border: 1px solid #2E5186;
    }
    .review-actions .action_nav li {
        border-radius: 0;
    }
    .review-actions .action_nav li:first-child {
        border-radius: 5px 5px 0 0;
    }
    .review-actions .action_nav li:last-child {
        border-radius: 0 0 5px 5px;
    }
    .review-actions .action_nav li {
        display: block;
    }
    header .author {
        margin: -30px 0 20px 50px;
    }
    .tabnav + .island {
        .border-box;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    #page ul.tabnav {
        li {
            margin: 0 1px;
            position: relative;
            a {
                padding: 10px 15px 15px;
            }
        }
        &+ .island {
            .border-box;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
        }
    }
    html {
        font-size: 10px;
    }
    #page form[role="dialog"][data-type="action"] {
        z-index: 1007;
        button {
            position: static;
        }
    }
    .tabnav-sprite {
        bottom: 6px;
        display: block;
        position: absolute;
        right: 6px;
        &:before {
            /* Triangle bottom-right. */
            border-bottom: 10px solid @medium-gray;
            border-left: 10px solid transparent;
            content: '';
            display: block;
            height: 0;
            width: 0;
        }
    }
    // No mobile man is an island.
    .island {
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    .island > p {
        padding: 5px 6px;
        line-height: 22px;
    }
    #scroll_sidebar_parent li {
        margin-top: 0;
    }
    .expandable {
        .thumbnail, .expandcontent {
            max-width: 200px;
        }
        .expandcontent {
            float: left;
            max-height: 200px;
            overflow: hidden;
            &.short {
                max-height: 48px;
            }
            &.expanded {
                max-height: inherit;
            }
        }
        .showmore {
            float: right;
            margin-top: 4px;
            font-weight: bold;
        }
    }
    #review-files-header {
        border-bottom: 1px solid #A5BFCE;
        h3 {
            float: none;
        }
    }
    #addon-queue {
        th {
            font-size: 13px;
            padding: 13px 0;
        }
        td {
            padding: 13px 0;
            &.app-name {
                max-width: 144px;
            }
            &.flags {
                min-width: 42px;
            }
        }
        .payments {
            display: none;
        }
    }
    #log-filter, #log-listing thead {
        display: none;
    }
    nav.paginator .rel {
        a {
            height: 32px;
            line-height: 32px;
            vertical-align: middle;
            &.button {
                min-width: 0;
            }
            &.jump {
                line-height: 32px;
                padding: 8px;
            }
        }
    }
    #reviews-flagged {
        background: #fff;
        .review-flagged {
            margin: 0;
            border: 0;
            border-bottom: 1px solid @mobileborder;
            padding: 15px;
            &:nth-child(2n) {
                background-color: #f8f8f8;
            }
            &:only-child, &:last-child {
                border-bottom: 0;
            }
        }
        h3 {
            font-weight: bold;
            margin-bottom: 7px;
        }
        .stars {
            float: none;
            display: block;
        }
        .review-flagged-actions {
            margin: 15px 0 0;
            padding: 0;
            border: 0;
            float: none;
            width: auto;
            * {
                .border-box;
            }
            strong {
                display: block;
                margin-bottom: 6px;
            }
        }
        .review-saved {
            border-top: 1px solid @mobileborder;
            button {
                width: 100%;
            }
        }
        .skip, .nuke, .keep {
            border: 1px solid @mobileborder;
            text-align: center;
            padding: 15px;
            box-shadow: inset 0 13px 15px #fff;
            background: rgba(225, 225, 215, .5);
            color: rgb(164, 148, 96);
            &.active {
                box-shadow: inset 0 0 4px rgba(215, 210, 195, 1);
                color: rgba(0, 0, 0, .35);
            }
        }
        .keep, .nuke {
            float: left;
            width: 50%;
            border-radius: 5px 0 0 0;
            overflow: hidden;
            height: 75px;
        }
        .nuke {
            border-left: 0;
            border-radius: 0 5px 0 0;
            line-height: 40px;
        }
        .skip {
            border-top: 0;
            clear: both;
        }
    }
    .device-list {
        bottom: 10px;
        position: relative;
        width: 80px;
        ul {
            position: relative;
        }
        li {
            position: absolute;
        }
        .desktop {
            left: -37px;
        }
        .android-tablet {
            left: -27px;
            top: 10px;
        }
        .firefoxos {
            left: 18px;
        }
        .android-mobile {
            left: -2px;
        }
    }
    .mobile-paginator nav.paginator {
        border-top: 0;
        margin-bottom: 13px;
        .rel {
            margin-bottom: 6px;
            a.button {
                height: 36px;
                span {
                    bottom: 0;
                }
            }
            a.jump {
                padding: 0px 10px;
            }
        }
        .num {
            position: relative;
            top: 8px;
        }
    }
}

@media (min-width: @tablet-min) {
    .site-title a {
        padding-left: 250px;
        position: relative;
        left: -250px;
    }
    .data-grid {
        .addon-row a {
            max-width: 600px;
        }
        .number {
            text-align: right;
        }
    }
    /* editors/queue tabs */
    .tabnav {
        margin: 0 10px;
    }
    #page .tabnav li {
        display: inline;
        position: relative;
        top: 13px;
        margin: 0 5px;
        z-index: 0;
        &:after {
            /* Cover the bottom part of the box-shadow. */
            background: @white;
            content: "";
            display: block;
            float: left;
            height: 15px;
            margin-bottom: -15px;
            position: relative;
            top: 1px;
            width: 100%;
        }
        &.selected {
            z-index: 2;
            a {
                box-shadow: 0 -2px 0 fadeOut(@taupe, 80%) inset,
                            0 0 1px rgba(0, 0, 0, 0.1);
                background-color: @white;
                border-color: @taupe;
            }
            a, a:hover {
                color: @dark-gray;
            }
        }
    }
    #actions li {
        margin-bottom: 20px;
        max-width: 264px;
        min-width: 192px;
    }
}

@import 'lib';

#breadcrumbs {
    margin-bottom: 15px;
}

h2, h3 {
    margin: 10px 0 0;
}

#page p + h2 {
    margin-top: 10px;
}

th {
    font-weight: bold;
}

dt {
    float: left;
    min-width: 20%;
}

dd {
    margin-bottom: 0;
    &:after {
        content: " ";
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }
    a {
        margin: -5px;
        padding: 5px;
    }
    &.warn {
        color: @red;
        font-weight: bold;
    }
}

/* Review Page */

header {
    .addon {
        min-height: 38px;
        padding-left: 50px;
        position: relative;
    }
    .icon {
        min-height: 32px;
        min-width: 32px;
        padding: 4px;
        position: absolute;
        left: 0;
        background: @white;
        border-radius: 2px;
        box-shadow: 0 1px 2px #000;
    }
    .author {
        margin: 0 0 20px;
    }
    #actions {
        float: right;
        margin-top: 15px;
        li {
            margin-left: 10px;
        }
    }
}

.html-rtl header {
    .icon {
        margin-left: 5px;
    }
    h1 {
        float: right;
    }
    #actions {
        float: left;
    }
}

#addon {
    float: left;
    width: 75%;
    #summary p, .userinput {
        color: @medium-gray;
        line-height: 15px;
    }
    em.no-results {
        display: block;
        font-style: italic;
        font-size: 13px;
        font-weight: normal;
        padding: 0;
    }
}

.html-rtl #addon {
    float: right;
}

#scroll_sidebar_parent {
    float: right;
    position: relative;
    width: 16%;
    strong {
        display: block;
        margin-top: 10px;
    }
    li {
        margin-top: 5px;
    }
}

#aux-nav a {
    color: @medium-gray;
}

.site-title {
    display: block;
    font: bold 36px/38px @open-stack;
    text-shadow: 0 1px 1px fadeOut(#000, 25%);
    text-transform: uppercase;
    padding: 15px 0;
    max-width: 530px;
    a {
        color: #fff;
        display: block;
        text-decoration: none;
        width: 100%;
        small {
            color: @light-gray;
            display: block;
            font-size: 12px;
            line-height: 14px;
            padding: 0 2px;
        }
        &:hover {
            color: darken(#fff, 10%);
            small {
                color: darken(@light-gray, 20%);
            }
        }
    }
}

#site-header {
    background-color: darken(#5b3f4f, 5%);
    height: 81px;
    .menu-nav {
        padding: 0;
    }
}

.menu-nav {
    margin: 0;
}

@media (max-width: 860px) {
    #site-header {
        h1, .menu-nav {
            padding: 0 2%;
        }
    }
}

/* sprites for data grid icons */

.sprite-reviewer {
    float: left;
    margin-right: 4px;
    background: url(../../img/mkt/icons/mkt-reviewer-icons.png) no-repeat;
    width: 16px;
    height: 16px;
    position: relative;
    top: 4px;
    text-decoration: none;
}
.sprite-reviewer-editor {
    background-position: 0 0;
}
.sprite-reviewer-notes {
    background-position: -16px 0;
}
.sprite-reviewer-packaged-app {
    background-position: 0 -16px;
}
.sprite-reviewer-locked {
    background-position: -16px -16px;
}
.sprite-reviewer-premium {
    background-position: -32px 0;
}
.sprite-reviewer-info {
    background-position: -32px -16px;
}
.sprite-reviewer-blocked {
    background-position: 0 -32px;
}

.sort-icon {
    background: url(../../img/developers/editor-sprite.png) no-repeat top left;
}
.ed-sprite-sort-asc {
    background-position: right -321px;
}
.ed-sprite-sort-both {
    background-position: right -378px;
}
.ed-sprite-sort-desc {
    background-position: right -435px;
}
.queue-outer {
    border-radius: 5px;
    border: 4px solid #E0EFFD;
    margin-bottom: 2em;
    .no-results {
        margin: 0;
        padding: 6em 1em;
        font-size: 1.1em;
    }
}
.queue-inner {
    border-radius: 3px;
    background-color: @white;
    border: 1px solid #2E5186;
    a em {
        font-size: 0.8em;
        opacity: 0.6;
    }
}

.device-list {
    width: 121px;
}

/* Version notes */
#popup-notes .version-notes {
    overflow: auto;
    max-height: 200px;
    margin-bottom: 1em;
}
.addon-version-notes {
    position: relative;
}
table.data-grid .addon-version-notes a {
    text-decoration: none;
}
.data-grid .extra-info {
    text-align: center;
    em {
        display: block;
    }
}

.island {
    position: relative;
    z-index: 1;
}

.html-rtl .tabnav {
    text-align: right;
}

#page ul.tabnav {
    padding: 0;
    a {
        border-radius: 5px 5px 0 0;
        background-color: @taupe;
        border: 1px solid transparent;
        border-bottom: 0;
        font-weight: bold;
        color: @medium-gray;
        display: inline-block;
        padding: 10px 15px 20px;
        text-decoration: none;
    }
}

/* Home */
#editors_main .listing {
    .results-inner {
        padding: 0;
        time {
            color: #aaa;
            font-style: italic;
        }
    }
    .row {
        padding: 0.5em;
        margin: 0 5px;
        border-bottom: 1px dotted #ADD0DC;
        &:last-child {
            border-bottom-width: 0px;
        }
    }
}

.listing .listing-header {
    text-align: center;
    font-weight: bold;
}

.editor-stats-title,
.editor-stats-table {
    width: 50%;
    float: left;
}

#editors-stats-charts .editor-stats-title,
#editors-stats-charts .editor-stats-table {
    width: 100%;
    float: none;
}

.editor-stats-title span,
.editor-stats-title a {
    font-weight: bold;
    padding-left: 7px;
}

.editor-stats-table {
    & > div {
        padding: 0 10px 5px;
        margin: 5px 0 0;
        border-left: 1px dotted #ADD0DC;
    }
    &:first-child > div {
        border-left-width: 0px;
    }
    table {
        width: 100%;
        margin: 0;
        tr:first-child td {
            border-top-width: 0px;
        }
    }
    td, th {
        padding: 0;
        border-top: 1px solid #F0F7FE;
    }
    .int {
        text-align: right;
        color: #37A632;
        font-weight: bold;
    }
    .date {
        text-align: right;
        color: #999;
        font-style: italic;
    }
}

.listing-header {
    line-height: 1.8em;
}

.daily-message {
    display: none;
    position: relative;
    div {
        padding: 15px;
    }
    .close {
        background-color: @border-gray;
        border-radius: 15px;
        color: @white;
        font-weight: bold;
        height: 15px;
        line-height: 12px;
        position: absolute;
        right: 5px;
        text-align: center;
        top: 5px;
        width: 15px;
        text-decoration: none;
        display: none;
        &:hover {
            background-color: @light-gray;
            text-decoration: none;
        }
    }
    p {
        margin: 0;
    }
    h2 {
        font-size: 1em;
        font-weight: bold;
        margin-top: 0;
    }
}

.featured-inner-padded {
    padding: 15px;
}

table.data-grid tr.comments td {
    border-top: none;
    background: #def;
}
thead th {
    &:first-child {
        width: 0;
    }
}

.waiting_old, .waiting_med, .waiting_new {
    height: 20px;
    box-shadow: 0px 2px rgba(0, 0, 0, 0.1) inset;
    float: left;
    -moz-transition: 0.3s background-color;
}

.waiting_old:hover, .waiting_med:hover, .waiting_new:hover {
    -moz-transition: 0.1s background-color;
}

.waiting_old {
    background-color: #FFD3D3;
    &:hover {
        background-color: #FCBCBC;
    }
}

.waiting_med {
    background-color: #FFFFB4;
    &:hover {
        background-color: #F5F484;
    }
}
.waiting_new {
    background-color: #B8E6B8;
    &:hover {
        background-color: #9DE19C;
    }
}

div.editor-waiting {
    border: 1px solid @note-gray;
    border-radius: 5px;
    overflow: hidden;
}

div.editor-stats-dark {
    background-color: #F3F3F3;
    border-top: 1px dotted @medium-gray;
    display: block;
    padding: 5px 10px 10px;
}

div.editor-stats-table > div.editor-stats-dark {
    border-left: 1px solid #DDDDDD;
}

/* Moderated reviews css */

#reviews-flagged {
    .review-flagged {
        border-top: 1px dotted @medium-gray;
        line-height: 20px;
        margin: 0 0 1em 1em;
        padding: 1em;
        ul {
            margin-bottom: 0;
        }
    }
    &:first-child {
        border-top: 0;
    }
    .reviews-flagged-reasons {
        background-color: lighten(@red, 50%);
        border-radius: 10px;
        clear: both;
        margin: 0;
        padding: 0 10px;
        li {
            border-top: 1px dotted @light-gray;
            padding: 10px 0;
            &:first-child {
                border-top: 0;
            }
        }
    }
    h3 {
        margin: 0;
    }
    p {
        margin-bottom: 1.5em;
    }
    .review-flagged-actions {
        border-left: 1px dashed @medium-gray;
        float: right;
        margin-left: 10px;
        padding-left: 10px;
        width: 200px;
        label {
            font-weight: normal;
        }
    }
    form {
        margin: 0;
    }
    div.review-saved {
        margin-bottom: 0;
        padding: 10px;
        text-align: right;
    }
    label[for$=action_0] {
        color: @green;
    }
    label[for$=action_2] {
        color: @maroon;
    }
    .stars {
        float: left;
    }
    span.light {
        color: @note-gray;
    }
}
.html-rtl #reviews-flagged {
    .stars {
        float: right;
    }
}

/* data grid search form */
#log-filter form {
    margin: 0;
}
.log-filter-outside {
    float: right;
    label {
        font-weight: normal;
    }
    input::-webkit-input-placeholder {
       color: #BBB;
    }
    input:-moz-placeholder {
       color: #BBB;
    }
    div.date_range {
        padding: 0.5em 0 0;
    }
}

#queue-search {
    padding: 1em;
    margin-bottom: 1em;
    #clear-queue-search {
        text-transform: lowercase;
    }
    .date_range {
        padding: 1em;
    }
    label[for="id_text_query"] {
        margin-right: .5em;
    }
    button {
        margin: 0 .5em;
    }
}
.advanced-search {
    margin-top: 26px;
    &.hidden {
        display: none;
    }
    label {
        margin-bottom: .5em;
    }
    ul label {
        font-weight: normal;
    }
    .form-elem, .form-row {
        margin-bottom: 10px;
    }
    .form-row {
        clear: both;
    }
    .basic-filters {
        float: left;
        position: relative;
        top: 3px;
        width: 350px;
        select, input {
            position: relative;
            bottom: 3px;
        }
        label {
            display: block;
            float: left;
            width: 13em;
        }
    }
    .device-type-select, .premium-type-select {
        float: left;
        label {
            display: block;
        }
    }
    .device-type-select {
        width: 200px;
    }
    .premium-type-select {
        width: 250px;
    }
    .premium-type-select:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}
#id_text_query {
    width: 25em;
    height: 2em;
}

/* Add-on Review Log */
#log-listing tr th:nth-child(1) {
    width: 20%;
}
#log-listing tr th:nth-child(2) {
    width: 40%;
}
#log-listing tr th:nth-child(3) {
    width: 25%;
}
#log-listing tr th:nth-child(4) {
    width: 15%;
}
#log-listing .hide {
    display: none;
}

#scroll_sidebar {
    position: absolute;
    top: 0;
    .sticky {
        position: fixed;
        top: 10px;
    }
}

#history {
    border-radius: 5px;
    padding: 0;
    width: 100%;
    #review-files-header {
        padding: 0 15px;
    }
    h3 span {
        color: @medium-gray;
        padding: 0 5px;
    }
    table {
        line-height: 1.3;
        width: 100%;
    }
    .log-group {
        color: @medium-gray;
        margin: 10px 0 0;
    }
    .log-comments {
        ul {
            list-style: disc inside;
            margin: 5px 0;
        }
    }
    .log-attachments {
        li{
            margin: 4px 0 0 1px;
            &:first-child {
                margin-top: 6px;
            }
            &.image a {
                background-position: 0 -1369px;
            }
        }
        a {
            background: url("../../img/icons/news-feed-sprite.png") 0 -1407px no-repeat;
            display: inline-block;
            min-height: 16px;
            padding-left: 22px;
        }
    }
}

#review-files {
    width: 100%;
    .listing-header > th {
        background: @faded-blue;
        padding: 5px 15px;
    }
    .listing-header,
    .listing-body {
         border-top: 1px solid #A5BFCE;
    }
    td {
        border-radius: 0 0 5px 5px;
        background-color: #FAFAFA;
        padding: 15px;
    }
}
#review-files-header h3 {
    span {
        font-size: 0.7em;
    }
    h3 a.on {
        color: #333;
        font-weight: bold;
    }
    #review-files-paginate {
        float: right;
        margin-top: 2em;
    }
}
#review-files-paginate ol {
    float: right;
    margin: 0;
    padding-left: 10px;
    text-align: right;
    top: -20px;
    width: auto;
}
#review-files table.activity {
    th {
      width: 25%;
      padding-right: 1em;
    }
    tr {
        border-top: 1px dotted #ccc;
        td {
            padding: 15px 0;
        }
        &:first-child td {
            padding-top: 0;
        }
        &:last-child td {
            padding-bottom: 0;
        }
    }
    tr:first-child {
        border-top: 0 none;
    }
}
#review-files .listing-header span.light {
    font-weight: normal;
    color: #999;
}
#review-files tr.listing-header {
    &:hover {
        cursor: pointer;
        .gradient-two-color(@white, #CCE6FF);
    }
    &:active {
        cursor: pointer;
        .gradient-two-color(#e0effd, @white);
    }
}
#review-files .files {
    div:first-child {
        padding-top: 0;
    }
    li, & > div {
        padding-top: 5px;
        line-height: 1.3em;
    }
    ul {
        margin: 0 0 5px 15px;
    }
}
#review-files .no-activity {
    color: #777;
    font-style: italic;
    text-align: center;
}
#review-files .install {
    padding: 0;
}

#review-actions-form {
    background: @white;
    display: none;
    padding: 10px;
    textarea, input[type=text], select {
        border: 1px solid #AFBDD3;
    }
    textarea {
        height: 200px;
    }
    .review-actions-desc {
        text-align: center;
    }
    label {
        display: inline-block;
        margin: 5px 0;
    }
    .review-actions-tested label {
        margin: 5px 10px 5px 25px;
    }
    .review-actions-device-override {
        ul {
            margin-top: 5px;
            li {
                display: inline-block;
                margin-right: 15px;
            }
        }
    }
}

.review-actions {
    border-radius: 5px;
    box-shadow: 0 -2px 0 @faded-blue inset, 0 0 1px rgba(0, 0, 0, 0.1);
    border: 1px solid @border-blue;
    margin: 15px 0 30px;

    #review-actions-form {
        display: none;
    }
    .action_nav {
        ul {
            margin: 0;
            display: table;
            width: 100%;
        }
        li {
            .gradient-two-color(@white, #e0effd);
            border-top: 1px solid #2E5186;
            border-bottom: 1px solid #2E5186;
            border-right: 1px solid #A5BFCE;
            display: table-cell;
            text-align: center;
            text-shadow: 1px 1px 0 @white;
            &:active {
                .gradient-two-color(#e0effd, @white);
            }
            input {
                display: none;
            }
            label {
                display: block;
                padding: 10px 5px;
            }
            &:first-child {
                border-left: 1px solid #2E5186;
                border-radius: 5px 0 0 5px;
            }

            &:last-child {
                border-right: 1px solid #2E5186;
                border-radius: 0 5px 5px 0;
            }
        }
    }
}

.review-actions.on {
    #review-actions-form {
        border: 1px solid #2E5186;
        border-top-width: 0;
        border-radius: 0 0 5px 5px;
    }
    .action_nav {
        ul li.on-tab {
            background: #fff;
            border-bottom: none;
        }
        li {
            border-bottom: 1px solid #A5BFCE;
            &:first-child {
                border-radius: 5px 0 0;
            }
            &:last-child {
                border-radius: 0 5px 0 0;
            }
        }
    }
}

/* Hide "files" for now. */
.review-actions-files {
    display: none !important;
}

#review-actions-files-warning {
    color: #B47100;
}

.review-actions-canned {
    margin-top: 10px;
    text-align: right;
    #id_canned_response optgroup[label=""] {
        display: none;
    }
    select {
        padding: 0;
    }
}

.review-actions-attachments {
    .formset {
        margin-top: 1.5em;
    }
    .fileinput {
        margin-bottom: 0.33em;
    }
    a.add-row {
        background: url("../../img/icons/news-feed-sprite.png") no-repeat 0 -1444px;
        display: inline-block;
        margin-top: 6px;
        min-height: 15px;
        padding: 1px 0 0 22px;
    }
}

@media (min-width: @tablet-min) {
    .review-actions-attachments {
        .formset {
            margin-top: 1em;
        }
        .fileinput {
            display: inline-block;
            margin-right: 25px;
        }
    }
}

.review-actions-section {
    border-top: 1px dotted #ccc;
    margin-top: 1em;
    padding-top: 1em;
    label {
        font-weight: normal;
    }
}

.review-actions-save {
    text-align: right;
}

.history-comment {
    white-space: pre-wrap;
    .history-comment-version {
        padding: 10px;
        overflow: auto;
    }
}

.history-comment-byline {
    padding: 0 10px;
    font-style: italic;
}

.review-paging {
    border-bottom: 1px dotted #ccc;
    margin-bottom: 2em;
    padding-bottom: 1em;
    text-align: center;
}

#editor-motd {
    textarea {
        height: 5em;
        margin-bottom: 0.5em;
    }

    .buttons {
        text-align: right;
    }
}

.currently_viewing_warning {
    display: none;
}

.scroll_sidebar_parent .currently_viewing_warning {
    margin-top: 0;
    border: medium none;
    border-radius: 8px;
}

div.currently_viewing_warning {
    background-color: #FFE4E4;
    margin: 1em 0;
    border: 1px dashed #FE7272;
    padding: 10px;
}

div.currently_viewing_warning strong {
    display: block;
}

span.currently_viewing_warning {
    color: red;
    padding-right: 15px;
}

.concealed {
    font-size: 15px;
    font-weight: bold;
    padding: 4px 10px 7px;
    &:hover {
        .gradient-two-color(#ccc, #bbb);
        color: @dark-gray;
    }
}

#actions {
    .button.product {
        position: relative;
        width: 100%;
        z-index: 1;
    }
    .button {
        display: block;
    }
    .faked-purchase,
    .approval {
        border-radius: 0 0 5px 5px;
        display: block;
        margin-top: -5px;
        padding: 15px 15px 10px;
        position: relative;
        z-index: 0;
    }
    .no-apps {
        text-align: center;
        margin-top: 10px;
        line-height: 20px;
        display: none;
        a {
            background: url(../../img/mkt/icons/nightly.png) 5px 0 no-repeat;
            padding: 0 5px 0 30px;
            display: inline-block;
        }
    }
    .faked-purchase {
        border-radius: 0 0 5px 5px;
        background: fadeOut(@red, 90%);
        font-size: 12px;
        text-align: center;
        b {
            color: @maroon;
            display: block;
            text-transform: uppercase;
        }
    }
}

#reviewers-score-bar {
    ul li {
        float: left;
        width: 32%;
        margin: 0 0.5%;
    }
    h3 {
        margin-top: 0;
    }
    tr.you-are-here {
        font-weight: bold;
    }
    td.number {
        text-align: right;
    }
    p.total {
        margin-bottom: 10px;
    }
}

.html-rtl #reviewers-score-bar {
    ul li {
        float: right;
    }
    td.number {
        text-align: left;
    }
}

#view-manifest {
    &:hover, b {
        color: #036;
    }
    b {
        &:before {
            content: "(";
        }
        &:after {
            content: ")";
        }
    }
}

#leaderboard {
    td.name {
        width: 70%;
    }
    th.rank {
        color: @orange;
    }
    td.level {
        color: @medium-gray;
        white-space: nowrap;
    }
}

#manifest-headers,
#manifest-permissions,
#manifest-contents {
    .border-box;
    color: @dark-gray;
    clear: both;
    font: 12px/14px @mono-stack;
    list-style: none;
    margin: 15px 0;
    overflow-x: auto;
    white-space: pre;
    width: 100%;
}

#manifest-headers,
#manifest-permissions {
    background-color: @faint-gray;
    border: @dark-gray 2px solid;
    padding: 5px 10px;
}

#manifest-contents {
    background-color: #def;
    border: darken(#def, 75%) 2px solid;
    // Using counters so we can style the line numbers.
    counter-reset: item;
    li {
        counter-increment: item;
        padding: 5px 10px;
        &:before {
            background-color: @faint-gray;
            display: inline-block;
            color: @note-gray;
            content: counter(item);
            margin: -5px 10px -5px -10px;
            padding: 5px;
            text-align: right;
            width: 3ex;
        }
        &:nth-child(2n + 1) {
            background: lighten(#def, 4%);
        }
    }
}

iframe#manifest-contents {
    min-height: 250px;
}

// Addresses issue with drop-downs menus vs. active queue tab.
#site-nav {
    z-index: 10;
}

@media (max-width: @landscape-max) {
    #id_text_query {
        display: block;
        font-size: 18px;
        margin-top: .5em;
        width: 100%;
    }
    #queue-search button {
        margin: .5em .5em 0 0;
    }
    html, body {
        background: @bg-gray @grain-src;
    }
    #breadcrumbs,
    #actions + strong,
    #actions + strong + ul,
    #helpfulLinks,
    #footer {
        display: none;
    }
    #reviewers-score-bar {
        margin-bottom: 15px;
    }
    #site-header h1 {
        .border-box;
        border-top: 1px solid @light-gray;
        margin: 0;
        max-width: 100%;
        padding: 0;
        a {
            .border-box;
            border-top: 1px solid @faint-gray;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            padding: 10px;
        }
        small {
            display: inline-block;
            font-size: 14px;
            font-weight: 200;
            padding: 0;
            &:after {
                color: #bbb;
                content: "\00a0\00a0/\00a0";
                display: inline-block;
                font-size: 14px;
                vertical-align: top;
            }
        }
    }
    #site-header {
        .menu-nav, .upper-header {
            padding: 0;
        }
    }
    #aux-nav {
        background: @border-gray;
        float: none;
        font-size: 11px;
        max-width: 100%;
        > ul > li {
            border-right: 1px solid darken(@border-gray, 10%);
        }
    }
    #site-nav {
        border: 1px solid #bbb;
    }
    #site-nav .menu-nav > ul {
        > li {
            margin: 0;
            &:first-child > a {
                padding-left: 10px;
            }
            &:last-child {
                border-right: 1px dotted @light-gray;
            }
            > a {
                font-size: 11px;
                font-weight: 400;
                padding: 10px;
            }
        }
    }
    .menu-nav > ul > li > ul a {
        padding: 16px 8px;
    }
    #wrap {
        padding: 10px 0 0;
    }
    ul.tabnav {
        li {
            display: none;
            &.selected {
                display: block;
            }
        }
        a {
            .border-box;
            font-size: 12px;
            padding: 10px;
            pointer-events: none;
            width: 100%;
            &:active {
                background-color: lighten(@taupe, 5%);
                color: @note-gray;
            }
        }
        + .island {
            border-radius: 0;
            padding: 0;
        }
    }
    .data-grid {
        .addon-row a {
            display: block;
            font-size: 12px;
            line-height: 14px;
            margin: -15px -30px;
            padding: 15px 30px;
            text-align: left;
        }
        .desktop-only,
        .unsupported,
        .abuse-reports,
        .waiting-time {
            display: none;
        }
        .number {
            text-align: right;
        }
    }
    .device-list {
        margin: 0 auto;
        .firefoxos {
            width: 20px;
        }
    }
    #page h1 {
        font-size: 18px;
        line-height: 20px;
        margin: 10px 0 15px;
    }
    #scroll_sidebar_parent,
    #addon {
        float: none;
        width: 100%;
    }
    #scroll_sidebar_parent,
    #scroll_sidebar {
        position: inherit;
    }
    #scroll_sidebar {
        margin-bottom: 15px;
    }
    #actions {
        li {
            .border-box;
            float: left;
            margin: 0;
            width: 33.33%;
            + li {
                padding-left: 5px;
            }
        }
        .app-install .button {
            font-weight: 600;
        }
        .button {
            height: inherit;
            font-weight: 100;
            padding: 8px;
            &.product {
                top: -2px;
            }
        }
    }
    dt {
        min-width: 30%;
    }
    .app-name a {
        font-weight: 600;
    }
}

@mobileborder: #d7d2c3;
@media (max-width: @mobile-max) {
    .mobile-queue-search, .mobile-paginator {
        display: block;
    }
    .impala-paginator {
        display: none;
    }
    .toggle-queue-search, #queue-search .button span, ul.tabnav a {
        font-size: 16px;
    }
    .button {
        margin-top: 0px;
        min-width: 0%;
        margin-right: 0;
        top: 8px;
        span {
            bottom: 9px;
            position: relative;
        }
    }
    #site-nav {
        border: 0px;
        .pad {
            height: 100%;
            padding: 0;
        }
        nav.menu-nav {
            height: 100%;
            ul {
                height: 100%;
            }
            li {
                height: 100%;
                &.selected {
                    background: rgb(62, 52, 62);
                    a {
                        color: @white;
                    }
                }
                a {
                    font-size: 16px;
                    position: relative;
                    top: 4px;
                }
            }
            & > ul li:not(.open):hover > ul, &.open > ul {
                display: none;
            }
        }
    }
    #queue-search {
        padding: 0;
        margin: 26px 0 6px;
        label[for="id_text_query"] {
            display: none;
        }
        input#id_text_query {
            display: inline-block;
            margin-right: 5px;
            margin-top: 0;
            width: 75%;
        }
        .button {
            height: 36px;
            max-width: 22%;
            margin-right: 0;
        }
        .toggle-queue-search {
            bottom: 64px;
            float: right;
            line-height: 6px;
            margin-right: 3px;
            position: relative;
        }
    }
    .island #queue-search {
        display: none;
    }
    #reviewers-score-bar {
        display: none;
    }
    dt {
        float: none;
        margin: 0 0 3px;
        width: 100%;
    }
    dd {
        margin-bottom: 15px;
    }
    #actions li {
        width: 50%;
        &.app-install {
            .button {
                display: block;
            }
        }
        &:first-child {
            padding-right: 3px;
        }
        &:nth-child(2) {
            padding-left: 3px;
        }
        &:last-child {
            display: none;
        }
        &.app-install button.product, .button {
            padding: 0;
            top: 0;
            height: 48px;
            font-size: 13px;
            font-weight: normal;
            border: 0;
        }
    }
    #page h1.menutrigger {
        background: #d7d2c4;
        color: #686868;
        line-height: 38px;
        margin: 0;
        padding: 0 8px;
        border-radius: 3px 3px 0 0;

    }
    .statuslist, .island.alpha {
        border: 1px solid @mobileborder;
        border-radius: 4px;
        background: #fff;
        margin-bottom: 15px;
    }
    .statuslist {
        > li {
            padding: 0 15px;
            line-height: 40px;
            &:first-child {
                border-bottom: 1px solid @mobileborder;
            }
            &:only-child {
                border-bottom: 0;
            }
        }
        &.padded > li {
            padding: 15px;
        }
    }
    .review-actions .action_nav li:first-child,
    .review-actions .action_nav li:last-child,
    .review-actions .action_nav li {
        border: 1px solid #2E5186;
    }
    .review-actions .action_nav li {
        border-radius: 0;
    }
    .review-actions .action_nav li:first-child {
        border-radius: 5px 5px 0 0;
    }
    .review-actions .action_nav li:last-child {
        border-radius: 0 0 5px 5px;
    }
    .review-actions .action_nav li {
        display: block;
    }
    header .author {
        margin: -30px 0 20px 50px;
    }
    .tabnav + .island {
        .border-box;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    #page ul.tabnav {
        li {
            margin: 0 1px;
            position: relative;
            a {
                padding: 10px 15px 15px;
            }
        }
        &+ .island {
            .border-box;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
        }
    }
    html {
        font-size: 10px;
    }
    #page form[role="dialog"][data-type="action"] {
        z-index: 1007;
        button {
            position: static;
        }
    }
    .tabnav-sprite {
        bottom: 6px;
        display: block;
        position: absolute;
        right: 6px;
        &:before {
            /* Triangle bottom-right. */
            border-bottom: 10px solid @medium-gray;
            border-left: 10px solid transparent;
            content: '';
            display: block;
            height: 0;
            width: 0;
        }
    }
    // No mobile man is an island.
    .island {
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    .island > p {
        padding: 5px 6px;
        line-height: 22px;
    }
    #scroll_sidebar_parent li {
        margin-top: 0;
    }
    .expandable {
        .thumbnail, .expandcontent {
            max-width: 200px;
        }
        .expandcontent {
            float: left;
            max-height: 200px;
            overflow: hidden;
            &.short {
                max-height: 48px;
            }
            &.expanded {
                max-height: inherit;
            }
        }
        .showmore {
            float: right;
            margin-top: 4px;
            font-weight: bold;
        }
    }
    #review-files-header {
        border-bottom: 1px solid #A5BFCE;
        h3 {
            float: none;
        }
    }
    #addon-queue {
        th {
            font-size: 13px;
            padding: 13px 0;
        }
        td {
            padding: 13px 0;
            &.app-name {
                max-width: 144px;
            }
            &.flags {
                min-width: 42px;
            }
        }
        .payments {
            display: none;
        }
    }
    #log-filter, #log-listing thead {
        display: none;
    }
    nav.paginator .rel {
        a {
            height: 32px;
            line-height: 32px;
            vertical-align: middle;
            &.button {
                min-width: 0;
            }
            &.jump {
                line-height: 32px;
                padding: 8px;
            }
        }
    }
    #reviews-flagged {
        background: #fff;
        .review-flagged {
            margin: 0;
            border: 0;
            border-bottom: 1px solid @mobileborder;
            padding: 15px;
            &:nth-child(2n) {
                background-color: #f8f8f8;
            }
            &:only-child, &:last-child {
                border-bottom: 0;
            }
        }
        h3 {
            font-weight: bold;
            margin-bottom: 7px;
        }
        .stars {
            float: none;
            display: block;
        }
        .review-flagged-actions {
            margin: 15px 0 0;
            padding: 0;
            border: 0;
            float: none;
            width: auto;
            * {
                .border-box;
            }
            strong {
                display: block;
                margin-bottom: 6px;
            }
        }
        .review-saved {
            border-top: 1px solid @mobileborder;
            button {
                width: 100%;
            }
        }
        .skip, .nuke, .keep {
            border: 1px solid @mobileborder;
            text-align: center;
            padding: 15px;
            box-shadow: inset 0 13px 15px #fff;
            background: rgba(225, 225, 215, .5);
            color: rgb(164, 148, 96);
            &.active {
                box-shadow: inset 0 0 4px rgba(215, 210, 195, 1);
                color: rgba(0, 0, 0, .35);
            }
        }
        .keep, .nuke {
            float: left;
            width: 50%;
            border-radius: 5px 0 0 0;
            overflow: hidden;
            height: 75px;
        }
        .nuke {
            border-left: 0;
            border-radius: 0 5px 0 0;
            line-height: 40px;
        }
        .skip {
            border-top: 0;
            clear: both;
        }
    }
    .device-list {
        bottom: 10px;
        position: relative;
        width: 80px;
        ul {
            position: relative;
        }
        li {
            position: absolute;
        }
        .desktop {
            left: -37px;
        }
        .android-tablet {
            left: -27px;
            top: 10px;
        }
        .firefoxos {
            left: 18px;
        }
        .android-mobile {
            left: -2px;
        }
    }
    .mobile-paginator nav.paginator {
        border-top: 0;
        margin-bottom: 13px;
        .rel {
            margin-bottom: 6px;
            a.button {
                height: 36px;
                span {
                    bottom: 0;
                }
            }
            a.jump {
                padding: 0px 10px;
            }
        }
        .num {
            position: relative;
            top: 8px;
        }
    }
}

@media (min-width: @tablet-min) {
    .site-title a {
        padding-left: 250px;
        position: relative;
        left: -250px;
    }
    .data-grid {
        .addon-row a {
            max-width: 600px;
        }
        .number {
            text-align: right;
        }
    }
    /* editors/queue tabs */
    .tabnav {
        margin: 0 10px;
    }
    .tabnav li {
        display: inline;
        position: relative;
        top: 13px;
        margin: 0 5px;
        z-index: 0;
        &:after {
            /* Cover the bottom part of the box-shadow. */
            background: @white;
            content: "";
            display: block;
            float: left;
            height: 15px;
            margin-bottom: -15px;
            position: relative;
            top: 1px;
            width: 100%;
        }
        &.selected {
            z-index: 2;
            a {
                box-shadow: 0 -2px 0 fadeOut(@taupe, 80%) inset,
                            0 0 1px rgba(0, 0, 0, 0.1);
                background-color: @white;
                border-color: @taupe;
            }
            a, a:hover {
                color: @dark-gray;
            }
        }
    }
    #actions li {
        margin-bottom: 20px;
        max-width: 264px;
        min-width: 192px;
    }
}


Signed-off-by: duxinlixiaoxue <1207931454@qq.com>

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/XUEJS/xue-project.git/'


Added Flexbox grid styles

Added Flexbox grid styles

//
// Flex Blox Class Library
// --------------------------------------------------

// Begin at screen-sm, that way it has no effect on phone portrait views
@media (min-width: @screen-sm) {
  // Flex Parent
  .fb-parent {display: flex;}
  .fb-row    {flex-direction: row;}
  .fb-column {flex-direction: column;}
  .fb-wrap   {flex-wrap: wrap;}
  .fb-nowrap {flex-wrap: nowrap;}

  // Align Items
  .fb-ai-start    {align-items: flex-start;}
  .fb-ai-baseline {align-items: baseline;}
  .fb-ai-center   {align-items: center;}
  .fb-ai-end      {align-items: flex-end;}
  .fb-ai-stretch  {align-items: stretch;}

  // Align Content

  .fb-ac-start    {align-content: flex-start;}
  .fb-ac-baseline {align-content: baseline;}
  .fb-ac-center   {align-content: center;}
  .fb-ac-end      {align-content: flex-end;}
  .fb-ac-stretch  {align-content: stretch;}

  // Justify Content
  .fb-j-start   {justify-content: flex-start;}
  .fb-j-center  {justify-content: center;}
  .fb-j-around  {justify-content: space-around;}
  .fb-j-between {justify-content: space-between;}
  .fb-j-end     {justify-content: flex-end;}

  // Align Self
  .fb-as-start    {align-self: flex-start;}
  .fb-as-baseline {align-self: baseline;}
  .fb-as-center   {align-self: center;}
  .fb-as-end      {align-self: flex-end;}
  .fb-as-stretch  {align-self: stretch;}

  // Child Flex
  .fb-child    {flex: 0 0 auto;}
  .fb-grow   {flex-grow: 1;}
  .fb-shrink {flex-shrink: 1;}

  // Grouped Syntax
  .flex-end {
    display: flex;
    align-items: flex-end;
  }

  .flex-center {
    display: flex;
    align-items: center;
  }

  .flex-children {
    display: flex;

    > * {
      flex: 1 1 auto;
    }

  }

  .flex-row {
    flex-flow: row wrap;
  }

  .flex-column {
    flex-flow: column wrap;
  }

  .flex-stretch {
    align-items: stretch;
  }

  .flex-center {
    justify-content: center;
  }

  // Fix bootstrap nav with flexbox styles applied
  .nav.nav-pills.flex-children,
  .nav.nav-pills.fb-parent {
    li+li {
      margin-left: 0;
    }
  }

  // Fix bootstrap row with flexbox styles applied
  .row.flex-children,
  .row.fb-parent {
    &::before,
    &::after {
      flex: 1 1 auto;
    }
  }

  // Flexbox Grid Classes
  .fb-sm-25 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 25%;
    }
  }

  .fb-sm-33 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 33%;
    }
  }

  .fb-sm-40 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 40%;
    }
  }

  .fb-sm-50 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 50%;
    }
  }

  .fb-sm-60 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 60%;
    }
  }

  .fb-sm-66 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 66%;
    }
  }

  .fb-sm-75 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 75%;
    }
  }

  .fb-sm-100 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 100%;
    }
  }

  // Flex based re-order
  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .order-sm-13 {
    order: 13;
  }

  .order-sm-14 {
    order: 14;
  }

  .order-sm-15 {
    order: 15;
  }
}

// screen-md
@media (min-width: @screen-md) {
  //
  // Flex Blox Class Library
  // --------------------------------------------------
  .fb-md-25 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 25%;
    }
  }

  .fb-md-33 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 33%;
    }
  }

  .fb-md-40 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 40%;
    }
  }

  .fb-md-50 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 50%;
    }
  }

  .fb-md-60 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 60%;
    }
  }

  .fb-md-66 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 66%;
    }
  }

  .fb-md-75 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 75%;
    }
  }

  .fb-md-100 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 100%;
    }
  }

  // Flex reorder
  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .order-md-13 {
    order: 13;
  }

  .order-md-14 {
    order: 14;
  }

  .order-md-15 {
    order: 15;
  }
}

// screen-lg
@media (min-width: @screen-lg) {
  //
  // Flex Blox Class Library
  // --------------------------------------------------
  .fb-lg-25 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 25%;
    }
  }

  .fb-lg-33 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 33%;
    }
  }

  .fb-lg-40 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 40%;
    }
  }

  .fb-lg-50 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 50%;
    }
  }

  .fb-lg-60 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 60%;
    }
  }

  .fb-lg-66 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 66%;
    }
  }

  .fb-lg-75 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 75%;
    }
  }

  .fb-lg-100 {
    &:not(.flex-children),
    &.flex-children > * {
      flex-basis: 100%;
    }
  }

  // Flex Reorder
  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .order-lg-13 {
    order: 13;
  }

  .order-lg-14 {
    order: 14;
  }

  .order-lg-15 {
    order: 15;
  }
}

error: pathspec 'framework/less/fb-grid.less' did not match any file(s) known to git


A bit fix for app scrolling

A bit fix for app scrolling

/* === Views === */
.views, .view {
    position: relative;
    .size(100%,100%);
    z-index: 5000;
}
.views {
    position: relative;
    .scrollable();
}
.view {
    overflow: hidden;
    .border-box();
}

/* === Views === */
.views, .view {
    position: relative;
    .size(100%,100%);
    overflow: hidden;
    z-index: 5000;
}
.view {
    .border-box();
}


Z-index levels

Z-index levels

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/theworkers/HLTheme.git/'


fix(addButtonTransition): added borderColor to Button transition

fix(addButtonTransition): added borderColor to Button transition

fatal: unable to access 'https://github.com/seekinternational/seek-asia-style-guide.git/': The requested URL returned error: 403


Fix for transition class

Fix for transition class

 /*
 * # Semantic - Transition
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'module';
@element : 'transition';

@import '../../semantic.config';

/*******************************
          Transitions
*******************************/

/*
  Some transitions adapted from Animate CSS
  https://github.com/daneden/animate.css
*/

.transition {
  animation-iteration-count: 1;
  animation-duration: @transitionDefaultDuration;
  animation-timing-function: @transitionDefaultEasing;
  animation-fill-mode: @transitionDefaultFill;
}

/*******************************
            States
*******************************/

/* Animating */
.animating.transition {
  backface-visibility: @backfaceVisibility;
  transform: @use3DAcceleration;
  visibility: visible !important;
}

/* Loading */
.loading.transition {
  position: absolute;
  top: -999999px;
  left: -99999px;
}

/* Hidden */
.hidden.transition {
  display: none;
  visibility: hidden;
}

/* Visible */
.visible.transition {
  display: block;
  visibility: visible !important;
  backface-visibility: @backfaceVisibility;
  transform: @use3DAcceleration;
}

/* Disabled */
.disabled.transition {
  animation-play-state: paused;
}

/*******************************
          Variations
*******************************/

.looping.transition {
  animation-iteration-count: infinite;
}

/*******************************
             Types
*******************************/

.loadUIOverrides();

 /*
 * # Semantic - Transition
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'module';
@element : 'transition';

@import '../../semantic.config';

/*******************************
          Transitions
*******************************/

/*
  Some transitions adapted from Animate CSS
  https://github.com/daneden/animate.css
*/

.transition {
  animation-iteration-count: 1;
  animation-duration: @transitionDefaultDuration;
  animation-timing-function: @transitionDefaultEasing;
  animation-fill-mode: @transitionDefaultFill;
}

/*******************************
            States
*******************************/

/* Animating */
.animating.transition {
  backface-visibility: @backfaceVisibility;
  transform: @use3DAcceleration;
  visibility: visible !important;
}

/* Loading */
.loading.transition {
  position: absolute;
  top: -999999px;
  left: -99999px;
}

/* Hidden */
.hidden.transition {
  display: none;
  visibility: hidden;
}

/* Visible */
.visible.transition {
  visibility: visible !important;
  backface-visibility: @backfaceVisibility;
  transform: @use3DAcceleration;
}

/* Disabled */
.disabled.transition {
  animation-play-state: paused;
}

/*******************************
          Variations
*******************************/

.looping.transition {
  animation-iteration-count: infinite;
}

/*******************************
             Types
*******************************/

.loadUIOverrides();


margin-bottom: 0

margin-bottom: 0

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/dedalozzo/pit-bootstrap.git/'


BAP-10769: UI upload form looks incorrect -  fix cursor and color

.oro_attachment_file{
  border: none;
  padding: 5px 5px 0 5px;
  width: 295px;
  line-height: 20px;
  margin-top: 5px;
  margin-bottom: 0;
  .removeFile{
    margin: 0;
  }
  .filename{
    display:inline-block;
    width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
  }
  .delete{
    float: right;
    line-height: 20px;
    margin-top: -4px;
    &:after {
      display:inline-block;
      font:14px/1em 'FontAwesome';
      color:#ddd;
      content: "\f014";
      text-indent:0;
    }
    &:hover:after {
      color:#888;
    }
  }
}
.attachment-file {
  div.uploader {
    border: none;
    float: none;
    input {
      cursor: pointer;
      width: 345px;
    }
    input:hover ~ span.action {
      color: #006acc;
    }
    span.action {
      border: none;
      background: none;
      color: #08c;
      cursor: pointer;
    }
    .active  span.action {
      background: none;
    }
    span.filename {
      width: 85px;
    }
    .focus {
      border: none;
      box-shadow: none;
    }
  }
  div.uploader.focus {
    border: none;
    box-shadow: none;
    span.action {
      color: #006acc;
    }
  }
}

.oro_attachment_file{
  border: none;
  padding: 5px 5px 0 5px;
  width: 295px;
  line-height: 20px;
  margin-top: 5px;
  margin-bottom: 0;
  .removeFile{
    margin: 0;
  }
  .filename{
    display:inline-block;
    width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
  }
  .delete{
    float: right;
    line-height: 20px;
    margin-top: -4px;
    &:after {
      display:inline-block;
      font:14px/1em 'FontAwesome';
      color:#ddd;
      content: "\f014";
      text-indent:0;
    }
    &:hover:after {
      color:#888;
    }
  }
}
.attachment-file {
  div.uploader {
    border: none;
    float: none;
    input {
      cursor: pointer;
      width: 345px;
    }
    span.action {
      border: none;
      background: none;
      color: #08c;
      cursor: pointer;
    }
    .active  span.action {
      background: none;
    }
    span.filename {
      width: 85px;
    }
    .focus {
      border: none;
      box-shadow: none;
    }
  }
  div.uploader.focus {
    border: none;
    box-shadow: none;
    span.action {
      color: #006acc;
    }
  }
}


A couple minor cosmetic tweaks to search widget margins

/**
 * Licensed to Jasig under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Jasig licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a
 * copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.portal-header {
    background: @header-background-color;
    color: @header-text-color;

    a {
        color: @header-link-color;
    }
    .portal-nav {
        .container {
            padding: 0;
        }
    }
}

.portal-global {
    /* TODO:  Convert the div.portal-global to be the div.region-pre-header
       (in the XSL) and move these styles to regions.less */
    padding: 6px 2px 2px 2px;
    min-height: 43px;
    .gradient(@portal-global-background-color, @portal-global-background-gradient);
    border-bottom: 1px solid @portal-global-border-color;
    .drop-shadow;
    text-align: right;
}

.portal-editing {
    .inline-block-list;

    li {
        .float;
    }
}

h1.portal-logo {
    font-size: 400%;
    text-rendering: optimizelegibility;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.075);
    margin: 30px 0 10px 0;
}

h1.portal-logo a {
    color: @header-text-color;
}

h1.portal-logo a:hover {
    text-decoration: none;
}

#webSearchContainer {
    margin: 12px 0 8px 0;
}

#webSearchSubmit {
    span {
        display: none;
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
/*
 * Breakpoints: 240px, 320px, 480px, 600px, 769px, and 992px.
 */

@media only screen and (min-width: 769px) {
    .portal-header {

        .portal-global {
            min-height: inherit;
        }

        .container {
            padding: 0;

            .portal-user {
                a {
                    margin-left: 10px;
                }
                .notification-icon {
                    margin-right: 10px;
                    a {
                        text-decoration: none;
                    }
                }
            }
        }

        #webSearchContainer {
            margin-top: 48px;
        }

    }
}

#up-notification {
  position: fixed;
  z-index: 99999;
  width: 100%;
}

div.global-container {
    padding: 0;
}

/**
 * Licensed to Jasig under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Jasig licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a
 * copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.portal-header {
    background: @header-background-color;
    color: @header-text-color;

    a {
        color: @header-link-color;
    }
    .portal-nav {
        .container {
            padding: 0;
        }
    }
}

.portal-global {
    /* TODO:  Convert the div.portal-global to be the div.region-pre-header
       (in the XSL) and move these styles to regions.less */
    padding: 6px 2px 2px 2px;
    min-height: 43px;
    .gradient(@portal-global-background-color, @portal-global-background-gradient);
    border-bottom: 1px solid @portal-global-border-color;
    .drop-shadow;
    text-align: right;
}

.portal-editing {
    .inline-block-list;

    li {
        .float;
    }
}

h1.portal-logo {
    font-size: 400%;
    text-rendering: optimizelegibility;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.075);
    margin: 30px 0 10px 0;
}

h1.portal-logo a {
    color: @header-text-color;
}

h1.portal-logo a:hover {
    text-decoration: none;
}

#webSearchContainer {
    margin: 12px 0 20px 0;
}

#webSearchSubmit {
    span {
        display: none;
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
/*
 * Breakpoints: 240px, 320px, 480px, 600px, 769px, and 992px.
 */

@media only screen and (min-width: 769px) {
    .portal-header {

        .portal-global {
            min-height: inherit;
        }

        .container {
            padding: 0;

            .portal-user {
                a {
                    margin-left: 10px;
                }
                .notification-icon {
                    margin-right: 10px;
                    a {
                        text-decoration: none;
                    }
                }
            }
        }

        #webSearchContainer {
            margin-top: 24px;
        }

    }
}

#up-notification {
  position: fixed;
  z-index: 99999;
  width: 100%;
}

div.global-container {
    padding: 0;
}


initial angstrom.less - commit

initial angstrom.less - commit

angstrom.less, that powers the Angstrom Presentation Layer.

/*!
 * Angstrom [vA1.0.0]
 * Copyright © 2015, Ångström Science.
 * [https://github.com/angstrom-science]
 * Licensed under Apache License [v2.0] (https://github.com/angstrom-science/Angstrom/blob/master/LICENSE)
 */

error: pathspec 'src/less/angstrom.less' did not match any file(s) known to git


use min-width is better

use min-width is better

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

@import "app";

.wiki-page__content{
  min-width: 0;
  word-wrap: break-word;
}

.wiki-header {
  .at2x-simple("/images/headers/tournament.jpg");
  background-size: cover;

  .text {
    padding-left: 130px;

    h1, h2 {
      .default-text-shadow;
      color: #fff;

      font-style: normal;
    }

    h1 { font-size: 32px; margin-bottom: 10px; }
    h2 { font-size: 16px; }
  }
}

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

@import "app";

.wiki-page__content{
  max-width: 100%;
  word-wrap: break-word;
}

.wiki-header {
  .at2x-simple("/images/headers/tournament.jpg");
  background-size: cover;

  .text {
    padding-left: 130px;

    h1, h2 {
      .default-text-shadow;
      color: #fff;

      font-style: normal;
    }

    h1 { font-size: 32px; margin-bottom: 10px; }
    h2 { font-size: 16px; }
  }
}


Added date style.

Added date style.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/topics-im/topics.git/'


Margin after navigation tool-bar

Margin after navigation tool-bar

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/schatten/planner.git/'


Create base.less

Create base.less

error: pathspec 'styles/base.less' did not match any file(s) known to git


Default style

Default style

error: pathspec 'src/styles/main.less' did not match any file(s) known to git


update vars based on .IA files

update vars based on .IA files

fatal: unable to access 'https://github.com/MerlinBB/atp-marketing.git/': The requested URL returned error: 403


Fix bug: media hx left 15px

Fix bug: media hx left 15px

section.container {
    margin: 2em 10px;
}

@media screen and (min-width: 700px) {
    body {
        width: 700px;
        margin: 0 auto;
    }
    header {
        padding: 20px 100px;
    }
}

@media screen and (max-width: 700px) {
    body {
        width: 100%;
    }
    header {
        padding: 20px 0;
        a.logo-link,
        ul.nav.nav-list {
            float: none;
            display: block;
            text-align: center;
        }
    }
    .post-content {
        h2, h3, h4, h5, h6 {
            max-width: 300px;
        }
    }
    .archive {
        h2 {
            margin: 0px 10px;
        }
        .post-time {
            margin: 0px;
            width: auto;
            font-size: 13px;
            display: block;
        }
    }

    .ds-thread,
    #disqus_thread {
        margin: 2em 10px;
    }
    #comments {
        #ds-thread.ds-narrow {
            #ds-reset {
                .ds-avatar img {
                    margin: 0px -10px;
                }
            }
        }
    }
}

section.container {
    margin: 2em 10px;
}

@media screen and (min-width: 700px) {
    body {
        width: 700px;
        margin: 0 auto;
    }
    header {
        padding: 20px 100px;
    }
}

@media screen and (max-width: 700px) {
    body {
        width: 100%;
    }
    header {
        padding: 20px 0;
        a.logo-link,
        ul.nav.nav-list {
            float: none;
            display: block;
            text-align: center;
        }
    }
    .post-content {
        h2, h3, h4, h5, h6 {
            max-width: 300px;
            left: 15px;
        }
    }
    .archive {
        h2 {
            margin: 0px 10px;
        }
        .post-time {
            margin: 0px;
            width: auto;
            font-size: 13px;
            display: block;
        }
    }

    .ds-thread,
    #disqus_thread {
        margin: 2em 10px;
    }
    #comments {
        #ds-thread.ds-narrow {
            #ds-reset {
                .ds-avatar img {
                    margin: 0px -10px;
                }
            }
        }
    }
}


default

default


updata grids.less

updata grids.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/mob-framework/mob.git/'