Update static/vendors/bootstrap/less/theme.less

Signed-off-by: Bernard Ojengwa <fccb4cc00c1ba7e51bf5c2b5f77130b9fe8d917e@gmail.com>

//
// Load core variables and mixins
// --------------------------------------------------

@import "variables.less";
@import "mixins.less";

//
// Buttons
// --------------------------------------------------

// Common styles
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
  .box-shadow(@shadow);

  // Reset the shadow
  &:active,
  &.active {
    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  }

  .badge {
    text-shadow: none;
  }
}

// Mixin for generating new styles
.btn-styles(@btn-color: #555) {
  #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
  background-repeat: repeat-x;
  border-color: darken(@btn-color, 14%);

  &:hover,
  &:focus  {
    background-color: darken(@btn-color, 12%);
    background-position: 0 -15px;
  }

  &:active,
  &.active {
    background-color: darken(@btn-color, 12%);
    border-color: darken(@btn-color, 14%);
  }

  &.disabled,
  &:disabled,
  &[disabled] {
    background-color: darken(@btn-color, 12%);
    background-image: none;
  }
}

// Common styles
.btn {
  // Remove the gradient for the pressed/active state
  &:active,
  &.active {
    background-image: none;
  }
}

// Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { .btn-styles(@btn-primary-bg); }
.btn-success { .btn-styles(@btn-success-bg); }
.btn-info    { .btn-styles(@btn-info-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); }
.btn-danger  { .btn-styles(@btn-danger-bg); }

//
// Images
// --------------------------------------------------

.thumbnail,
.img-thumbnail {
  .box-shadow(0 1px 2px rgba(0,0,0,.075));
}

//
// Dropdowns
// --------------------------------------------------

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
  background-color: darken(@dropdown-link-hover-bg, 5%);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
  background-color: darken(@dropdown-link-active-bg, 5%);
}

//
// Navbar
// --------------------------------------------------

// Default navbar
.navbar-default {
  #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
  .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
  border-radius: @navbar-border-radius;
  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  .box-shadow(@shadow);

  .navbar-nav > .open > a,
  .navbar-nav > .active > a {
    #gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%));
    .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
  }
}
.navbar-brand,
.navbar-nav > li > a {
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

// Inverted navbar
.navbar-inverse {
  #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
  .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257

  .navbar-nav > .open > a,
  .navbar-nav > .active > a {
    #gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
    .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
  }

  .navbar-brand,
  .navbar-nav > li > a {
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  }
}

// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
  border-radius: 0;
}

// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
  .navbar .navbar-nav .open .dropdown-menu > .active > a {
    &,
    &:hover,
    &:focus {
      color: #fff;
      #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    }
  }
}

//
// Alerts
// --------------------------------------------------

// Common styles
.alert {
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
  @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
  .box-shadow(@shadow);
}

// Mixin for generating new styles
.alert-styles(@color) {
  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
  border-color: darken(@color, 15%);
}

// Apply the mixin to the alerts
.alert-success    { .alert-styles(@alert-success-bg); }
.alert-info       { .alert-styles(@alert-info-bg); }
.alert-warning    { .alert-styles(@alert-warning-bg); }
.alert-danger     { .alert-styles(@alert-danger-bg); }

//
// Progress bars
// --------------------------------------------------

// Give the progress background some depth
.progress {
  #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

// Mixin for generating new styles
.progress-bar-styles(@color) {
  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}

// Apply the mixin to the progress bars
.progress-bar            { .progress-bar-styles(@progress-bar-bg); }
.progress-bar-success    { .progress-bar-styles(@progress-bar-success-bg); }
.progress-bar-info       { .progress-bar-styles(@progress-bar-info-bg); }
.progress-bar-warning    { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger     { .progress-bar-styles(@progress-bar-danger-bg); }

// Reset the striped class because our mixins don't do multiple gradients and
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
.progress-bar-striped {
  #gradient > .striped();
}

//
// List groups
// --------------------------------------------------

.list-group {
  border-radius: @border-radius-base;
  .box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
  #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
  border-color: darken(@list-group-active-border, 7.5%);

  .badge {
    text-shadow: none;
  }
}

//
// Panels
// --------------------------------------------------

// Common styles
.panel {
  .box-shadow(0 1px 2px rgba(0,0,0,.05));
}

// Mixin for generating new styles
.panel-heading-styles(@color) {
  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
}

// Apply the mixin to the panel headings only
.panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
.panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }
.panel-warning > .panel-heading   { .panel-heading-styles(@panel-warning-heading-bg); }
.panel-danger > .panel-heading    { .panel-heading-styles(@panel-danger-heading-bg); }

//
// Wells
// --------------------------------------------------

.well {
  #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
  border-color: darken(@well-bg, 10%);
  @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
  .box-shadow(@shadow);
}

error: pathspec 'static/vendors/bootstrap/less/theme.less' did not match any file(s) known to git


added back a slight border radius onto category listing on home page.

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/cablelabs/dev-portal.git/'


Removed Codemirror's link underline.

Removed Codemirror's link underline.

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

/* Brackets / CodeMirror Code Formatting */

.CodeMirror pre {
    padding: 0 @code-padding 0 0;
}

.show-line-padding .CodeMirror pre {
    padding-left: @code-padding;
}

.CodeMirror-scroll {
    background-color: @background-color-3;
}

.CodeMirror {
    .code-font();
}

.platform-mac .CodeMirror {
    .code-font-mac();
}

.platform-win .CodeMirror {
    .code-font-win();
}

@code-padding: 15px;

.CodeMirror-activeline-background {
    background: transparent;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: @activeline-bgcolor;
}

.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
    box-shadow: inset @code-padding 0 0 0 @activeline-number-bgcolor;
}

.CodeMirror-focused .CodeMirror-activeline {
    & > div, .CodeMirror-gutter-elt {
        height: 100%;
    }
    .CodeMirror-gutter-elt {
        background: @activeline-number-bgcolor;
        color: @bc-black;
    }
    .inline-widget .CodeMirror-gutter-elt {
        color: @accent-comment;
    }
}

.CodeMirror-focused .cm-matchhighlight {
    border-bottom: 2px solid #78B2F2;
}

.cm-s-default {
    span.cm-keyword {color: @accent-keyword;}
    span.cm-atom {color: @accent-atom;}
    span.cm-number {color: @accent-number;}
    span.cm-def {color: @accent-def;}
    span.cm-variable {color: @accent-variable;}
    span.cm-variable-2 {color: @accent-variable-2;}
    span.cm-variable-3 {color: @accent-variable-3;}
    span.cm-property {color: @accent-property;}
    span.cm-operator {color: @accent-operator;}
    span.cm-comment {color: @accent-comment;}
    span.cm-string {color: @accent-string;}
    span.cm-string-2 {color: @accent-string-2;}
    span.cm-meta {color: @accent-meta;}
    span.cm-error {color: @accent-error;}
    span.cm-qualifier {color: @accent-qualifier;}
    span.cm-builtin {color: @accent-builtin;}
    span.cm-bracket {color: @accent-bracket;}
    span.cm-tag {color: @accent-tag;}
    span.cm-attribute {color: @accent-attribute;}
    span.cm-header {color: @accent-header;}
    span.cm-quote {color: @accent-quote;}
    span.cm-hr {color: @accent-hr;}
    span.cm-link {color: @accent-link; text-decoration: none;}
    span.cm-rangeinfo {color: @accent-rangeinfo;}
    span.cm-minus {color: @accent-minus;}
    span.cm-plus {color: @accent-plus;}

    span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @matching-bracket;}
    span.CodeMirror-nonmatchingbracket {color: @accent-bracket !important;}

    .CodeMirror-cursors {
        .CodeMirror-cursor {
            .code-cursor();
        }

        /* Ensure the cursor shows up in front of code spans with a background color
         * (e.g. matchingbracket).
         */
        z-index: 3;
    }

    .CodeMirror-lines {
        padding: @code-padding 0;

        /* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
         * that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
         * occur on different elements, which means a click event will not be sent. By disabling pointer events here,
         * we are guaranteed that the mouse event will be captured by our parent div, and click events will
         * be dispatched.
         */
        pointer-events: none;
    }

    .CodeMirror-linewidget {
        /* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the
         * parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */
        pointer-events: auto;
    }

    .CodeMirror-gutters {
        background-color: @background-color-3;
        border-right: none;
    }

    .platform-mac & {
        .CodeMirror-scrollbar-filler {
            background-image: url(images/scrollbar-mac-corner.png);
        }
        .CodeMirror-gutter-filler {
            background-image: url(images/scrollbar-mac-bg.png);
        }
    }
    .platform-win & {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: @win-scrollbar-track;
            height: 12px !important;
        }
        .CodeMirror-scrollbar-filler {
            width: 12px !important;
        }
    }
    .platform-linux & {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: @background-color-3;
            height: 12px !important;
        }
        .CodeMirror-scrollbar-filler {
            width: 12px !important;
        }
    }

    .CodeMirror-linenumber {
        color: @accent-comment;
        min-width: 2.5em;
        /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
        padding: 0 @code-padding 0 10px;  /* left padding for project panel selection triangle */
    }
    &.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
}

/*
    CodeMirror's use of descendant selectors for certain styling causes problems when editors are
    nested because, for items in the inner editor, the left-hand clause in the selector will now
    match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.

    TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
    or if any other descendant-selector-driven CM styles can differ between inner & outer editors
    (potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
    that uses a descandant selector where the CSS class name to the left of the space is something
    other than a vanilla .CodeMirror)
 */
.CodeMirror {
    div.CodeMirror-overwrite div.CodeMirror-cursor {
        border-left: none !important;
        border-bottom: 1px solid black !important;
        width: 1.2ex;
    }

    .CodeMirror {
        background: transparent;
    }

    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @matching-bracket;
        color: @accent-bracket !important;
    }

    .CodeMirror .CodeMirror-cursors {
        visibility: hidden;
    }
    .CodeMirror.CodeMirror-focused .CodeMirror-cursors {
        visibility: visible;
    }

    .CodeMirror.cm-s-default .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.cm-s-default.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
    .CodeMirror .CodeMirror-gutters {
        background: transparent;
        border-right: none;
    }

    .CodeMirror-scroll {
        outline: none;
    }

    .CodeMirror-sizer {
        cursor: text;
    }

    .CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar {
        cursor: default;
    }

    .CodeMirror .CodeMirror-activeline-background {
        background: transparent;
    }

    .show-line-padding & .CodeMirror .CodeMirror-activeline-background {
        box-shadow: none;
    }

    .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
        background: transparent;
        color: @accent-comment;
    }

    .CodeMirror-focused .CodeMirror-activeline-background {
        background: @activeline-bgcolor;
    }

    .show-line-padding & .CodeMirror-focused .CodeMirror-activeline-background {
        box-shadow: inset @code-padding 0 0 0 @tc-gray-panel-top-bar;
    }

    .CodeMirror-focused .CodeMirror-activeline {
        .CodeMirror-gutter-elt {
            background: @tc-gray-panel-top-bar;
            color: @bc-black;
        }
    }

    .CodeMirror-matchingtag { background: @matching-bracket; }
}

/*
 * Temporarily override bold and italic syntax highlighting until
 * SourceCodePro supports them in a fixed pitch
 */
span.cm-em {
    font-style: normal;
}
span.cm-header, span.cm-strong {
    font-weight: normal;
}
span.cm-emstrong {
    font-style: normal;
    font-weight: normal;
}

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

/* Brackets / CodeMirror Code Formatting */

.CodeMirror pre {
    padding: 0 @code-padding 0 0;
}

.show-line-padding .CodeMirror pre {
    padding-left: @code-padding;
}

.CodeMirror-scroll {
    background-color: @background-color-3;
}

.CodeMirror {
    .code-font();
}

.platform-mac .CodeMirror {
    .code-font-mac();
}

.platform-win .CodeMirror {
    .code-font-win();
}

@code-padding: 15px;

.CodeMirror-activeline-background {
    background: transparent;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: @activeline-bgcolor;
}

.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
    box-shadow: inset @code-padding 0 0 0 @activeline-number-bgcolor;
}

.CodeMirror-focused .CodeMirror-activeline {
    & > div, .CodeMirror-gutter-elt {
        height: 100%;
    }
    .CodeMirror-gutter-elt {
        background: @activeline-number-bgcolor;
        color: @bc-black;
    }
    .inline-widget .CodeMirror-gutter-elt {
        color: @accent-comment;
    }
}

.CodeMirror-focused .cm-matchhighlight {
    border-bottom: 2px solid #78B2F2;
}

.cm-s-default {
    span.cm-keyword {color: @accent-keyword;}
    span.cm-atom {color: @accent-atom;}
    span.cm-number {color: @accent-number;}
    span.cm-def {color: @accent-def;}
    span.cm-variable {color: @accent-variable;}
    span.cm-variable-2 {color: @accent-variable-2;}
    span.cm-variable-3 {color: @accent-variable-3;}
    span.cm-property {color: @accent-property;}
    span.cm-operator {color: @accent-operator;}
    span.cm-comment {color: @accent-comment;}
    span.cm-string {color: @accent-string;}
    span.cm-string-2 {color: @accent-string-2;}
    span.cm-meta {color: @accent-meta;}
    span.cm-error {color: @accent-error;}
    span.cm-qualifier {color: @accent-qualifier;}
    span.cm-builtin {color: @accent-builtin;}
    span.cm-bracket {color: @accent-bracket;}
    span.cm-tag {color: @accent-tag;}
    span.cm-attribute {color: @accent-attribute;}
    span.cm-header {color: @accent-header;}
    span.cm-quote {color: @accent-quote;}
    span.cm-hr {color: @accent-hr;}
    span.cm-link {color: @accent-link;}
    span.cm-rangeinfo {color: @accent-rangeinfo;}
    span.cm-minus {color: @accent-minus;}
    span.cm-plus {color: @accent-plus;}

    span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @matching-bracket;}
    span.CodeMirror-nonmatchingbracket {color: @accent-bracket !important;}

    .CodeMirror-cursors {
        .CodeMirror-cursor {
            .code-cursor();
        }

        /* Ensure the cursor shows up in front of code spans with a background color
         * (e.g. matchingbracket).
         */
        z-index: 3;
    }

    .CodeMirror-lines {
        padding: @code-padding 0;

        /* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
         * that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
         * occur on different elements, which means a click event will not be sent. By disabling pointer events here,
         * we are guaranteed that the mouse event will be captured by our parent div, and click events will
         * be dispatched.
         */
        pointer-events: none;
    }

    .CodeMirror-linewidget {
        /* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the
         * parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */
        pointer-events: auto;
    }

    .CodeMirror-gutters {
        background-color: @background-color-3;
        border-right: none;
    }

    .platform-mac & {
        .CodeMirror-scrollbar-filler {
            background-image: url(images/scrollbar-mac-corner.png);
        }
        .CodeMirror-gutter-filler {
            background-image: url(images/scrollbar-mac-bg.png);
        }
    }
    .platform-win & {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: @win-scrollbar-track;
            height: 12px !important;
        }
        .CodeMirror-scrollbar-filler {
            width: 12px !important;
        }
    }
    .platform-linux & {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: @background-color-3;
            height: 12px !important;
        }
        .CodeMirror-scrollbar-filler {
            width: 12px !important;
        }
    }

    .CodeMirror-linenumber {
        color: @accent-comment;
        min-width: 2.5em;
        /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
        padding: 0 @code-padding 0 10px;  /* left padding for project panel selection triangle */
    }
    &.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
}

/*
    CodeMirror's use of descendant selectors for certain styling causes problems when editors are
    nested because, for items in the inner editor, the left-hand clause in the selector will now
    match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.

    TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
    or if any other descendant-selector-driven CM styles can differ between inner & outer editors
    (potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
    that uses a descandant selector where the CSS class name to the left of the space is something
    other than a vanilla .CodeMirror)
 */
.CodeMirror {
    div.CodeMirror-overwrite div.CodeMirror-cursor {
        border-left: none !important;
        border-bottom: 1px solid black !important;
        width: 1.2ex;
    }

    .CodeMirror {
        background: transparent;
    }

    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @matching-bracket;
        color: @accent-bracket !important;
    }

    .CodeMirror .CodeMirror-cursors {
        visibility: hidden;
    }
    .CodeMirror.CodeMirror-focused .CodeMirror-cursors {
        visibility: visible;
    }

    .CodeMirror.cm-s-default .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.cm-s-default.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
    .CodeMirror .CodeMirror-gutters {
        background: transparent;
        border-right: none;
    }

    .CodeMirror-scroll {
        outline: none;
    }

    .CodeMirror-sizer {
        cursor: text;
    }

    .CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar {
        cursor: default;
    }

    .CodeMirror .CodeMirror-activeline-background {
        background: transparent;
    }

    .show-line-padding & .CodeMirror .CodeMirror-activeline-background {
        box-shadow: none;
    }

    .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
        background: transparent;
        color: @accent-comment;
    }

    .CodeMirror-focused .CodeMirror-activeline-background {
        background: @activeline-bgcolor;
    }

    .show-line-padding & .CodeMirror-focused .CodeMirror-activeline-background {
        box-shadow: inset @code-padding 0 0 0 @tc-gray-panel-top-bar;
    }

    .CodeMirror-focused .CodeMirror-activeline {
        .CodeMirror-gutter-elt {
            background: @tc-gray-panel-top-bar;
            color: @bc-black;
        }
    }

    .CodeMirror-matchingtag { background: @matching-bracket; }
}

/*
 * Temporarily override bold and italic syntax highlighting until
 * SourceCodePro supports them in a fixed pitch
 */
span.cm-em {
    font-style: normal;
}
span.cm-header, span.cm-strong {
    font-weight: normal;
}
span.cm-emstrong {
    font-style: normal;
    font-weight: normal;
}


Fix clearfix on mobile.

Fix clearfix on mobile.

Include the new mixins.less.

@import '../fonts.less';
@import '../variables.less';
@import '../vendors.less';
@import '../includes/mixins.less';
@import 'mixins.less';

.fonts('../../fonts');

html, body {
  font-size: 15px;
  height: 100%;
}

a {
  color: @mobileHyperlink;
  text-decoration: none;
}

a:hover {
  text-decoration: hover;
}

body {
  font-family: @Moz;
  overflow-x: hidden;
  width: 100%;

  > * {
    -webkit-transform: translateZ(0px);
  }

  > nav {
    background: @mobileNavBackground url('../../img/grain.png') 0 0 repeat;
    color: #fff;
    display: none;
    height: 100%;
    height: -webkit-calc(100%);
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 270px;
    z-index: 0;

    > a,
    > header {
      border-bottom: 1px solid #929e9e;
    }

    > a,
    > a:visited,
    > a:hover {
      color: #fff;
      display: block;
      font-size: 17px;
      padding: 16px 16px 10px 16px;
      text-decoration: none;
    }

    > header {
      .linear-gradient-top(#1a2122, #1a2122, 0, #1b2324, 100%, url('../../img/grain.png'));
      font-size: 14px;
      font-weight: bold;
      height: 29px;
      line-height: 29px;
      padding: 0 16px;
    }

    #search-bar {
      .linear-gradient-top(#253132, #2c393b, 0, #253132, 100%, url('../../img/grain.png'));
      .box-shadow(0 0 3px 0 rgba(0, 0, 0, 0.75));
      padding: 10px 16px;

      form {
        display: block;
        position: relative;

        button[type='submit'] {
          background-color: transparent;
          background-position: -54px -177px;
          border: 0;
          height: 18px;
          margin: 0;
          outline: 0;
          padding: 0;
          position: absolute;
          right: 6px;
          text-indent: -9999px;
          top: 6px;
          width: 18px;
        }

        input[type='search'] {
          background: #283235;
          border: 1px solid rgba(0, 0, 0, 0.25);
          .border-radius(3px);
          .box-shadow(2px 2px 3px 0 rgba(0, 0, 0, 0.25) inset);
          .box-sizing(border-box);
          color: #849b9f;
          font-family: @Moz;
          font-size: 14px;
          outline: none;
          padding: 5px 30px 4px 4px;
          width: 100%;
        }
      }
    }
  }

  &.exposed {
    > nav {
      display: block;
    }

    .slide-on-exposed {
      left: 270px;
    }
  }

  .slide-on-exposed {
    left: 0;
    .transition-property(~'left, right');
    .transition-duration(0.5s);
  }

  > header {
    .gradient(#cd6723, #cd6723, #bb482d);
    border-bottom: 1px solid @mobileHeaderBorder;
    .box-shadow(0 0 4px 0 rgba(0, 0, 0, 0.75));
    color: #fff;
    height: 50px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;

    h1 {
      font-size: 24px;
      font-weight: normal;
      height: 50px;
      line-height: 50px;
      margin: 0 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  > .wrapper {
    background: #fff;
    .box-shadow(0 0 10px 0 rgba(0, 0, 0, 0.8));
    min-height: calc(~'100% - 51px');
    min-height: -moz-calc(~'100% - 51px');
    min-height: -webkit-calc(~'100% - 51px');
    position: absolute;
    top: 51px;
    width: 100%;
    z-index: 1;
  }

  &[data-orientation='right'] {
    > nav,
    .slide-on-exposed {
      left: auto;
      right: 0;
    }

    #menu-button {
      border-right: 0;
      .box-shadow(0 0 0 1px @mobileHeaderBorder);
      float: right;
      margin-left: 10px;
      margin-right: 0;
    }

    &.exposed {
      .slide-on-exposed {
        right: 270px;
      }
    }
  }
}

fieldset {
  border: 0;
  margin: 0;
  outline: none;
  padding: 0;
}

h3 {
  font-size: 20px;
  font-weight: normal;
}

h4 {
  font-size: 17px;
  font-weight: normal;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='url'],
select,
textarea {
  background: #fff;
  border: 1px solid @mobileInputBorder;
  .border-radius(3px);
  .box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.1) inset);
  .box-sizing(border-box);
  display: block;
  font-family: @Moz;
  font-size: 14px;
  margin: 0 0 12px 0;
  outline: none;
  padding: 10px 12px;
  width: 100%;
}

select {
  -webkit-appearance: none;
  height: 41px;
}

.add-button {
  background-position: -36px -1153px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  .box-shadow(0 0 0 1px @mobileHeaderBorder);
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.btn,
.btn:visited,
input[type="submit"],
input[type="submit"]:visited {
  .gradient(#e3e3e3, #fafafa, #cdcdcd);
  border: 1px solid #ababab;
  .border-radius(2px);
  .box-sizing(border-box);
  color: @textDarkGrey;
  cursor: pointer;
  display: block;
  font-family: @Moz;
  font-size: 16px;
  font-weight: bold;
  outline: none;
  margin: 0 0 6px 0;
  padding: 4px 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  width: 100%;

  &.btn-submit {
    .gradient(#00caf2, #00caf2, #00aacd);
    border: 0;
    font-size: 17px;
    padding: 8px 0;
  }
}

.btn:hover {
  text-decoration: none;
}

.centered {
  text-align: center;
}

.collapsable {
  article {
    display: none;
  }

  .toggle {
    color: @mobileHyperlink;
    cursor: pointer;

    > span {
      &.alt {
        display: none;
      }
    }
  }

  &.expanded {
    article {
      display: block;
    }

    .toggle {
      > span {
        display: none;

        &.alt {
          display: inline;
        }
      }
    }
  }
}

.edit-button {
  background-position: -36px -657px;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -10px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.errorlist {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;

  li {
    color: @textDarkOrange;
    margin-bottom: 6px;

    a,
    a:visited,
    a:hover {
      color: @textDarkOrange;
      text-decoration: none;
    }
  }
}

.icon-sprite {
  .icons-sprite();
}

.logo-sprite {
  background: url('../../img/mobile/logos-sprite.png') -50px -50px no-repeat;
  height: 48px;
  width: 48px;

  &.logo-firefox {
    background-position: -50px -50px;
  }
}

.header-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  border-bottom: 1px solid #000;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;

  h2 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    line-height: 50px;
    margin: 0 16px;
  }

  .done-button {
    color: #fff;
    cursor: pointer;
    float: right;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
  }
}

.footer-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  height: 50px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

.overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;

  > header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    .box-shadow(0 0 10px 0 rgba(0, 0, 0, 0.5));
    color: #fff;
    cursor: pointer;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .select-list {
    font-size: 24px;
    list-style: none;
    margin: 0 24px;
    padding: 0;

    > li {
      > a,
      > a:visited,
      > a:hover {
        border-bottom: 1px solid #000;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        display: block;
        padding: 16px 28px 16px 6px;
        position: relative;
        text-decoration: none;
      }

      &.selected {
        > a,
        > a:visited,
        > a:hover {
          color: #00a5c5;

          &:before {
            content: '\2713';
            position: absolute;
            right: 0;
          }
        }
      }

      &:first-of-type {
        > a {
          border-top: 0;
        }
      }

      &:last-of-type {
        > a {
          border-bottom: 0;
        }
      }
    }
  }

  .wrapper {
    bottom: 0;
    color: #fff;
    font-size: 24px;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 51px;

    &.padded {
      padding: 0 24px;
    }
  }
}

.paginator {
  list-style: none;
  margin: 0;
  padding: 10px 16px;

  li {
    .box-sizing(border-box);
    float: left;
    width: 27.5%;

    &.disabled {
      opacity: 0.5;
    }

    &.page {
      padding: 0 16px;
      width: 45%;

      .select-box {
        float: none;
        margin: 0;
      }
    }

    .btn {
      margin-top: 4px;
    }
  }
}

.progress-bar {
  background: rgba(0, 0, 0, 0.1) url('../img/grain.png');
  border: 1px solid rgba(0, 0, 0, 0.03);
  .border-radius(12px);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-align: right;
  z-index: 1;

  &:after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    .border-radius(13px);
    bottom: -2px;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  &:before {
    border: 2px solid rgba(0, 0, 0, 0.01);
    .border-radius(12px);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  > div {
    .gradient(#ff9500, #ff9500, #ed7000);
    .border-radius(12px);
    height: 24px;
    position: relative;
    z-index: 5;

    > span {
      margin-right: 10px;
    }
  }
}

.pulldown-menu {
  background: @mobileNavBackground url('../../img/grain.png');
  .box-shadow(0 0 5px rgba(0, 0, 0, 0.6));
  left: 0;
  margin-top: 51px;
  position: absolute;
  right: 0;
  z-index: 8;

  .pulldown-panel {
    max-height: 0;
    overflow: hidden;
    .transition-property(max-height);
    .transition-duration(0.5s);

    > section {
      border-bottom: 1px solid #2f393b;
      border-top: 1px solid #484d54;
      padding: 10px 16px;

      &:first-of-type {
        border-top: 0;
      }

      &:last-of-type {
        border-bottom: 0;
      }
    }
  }

  &.open {
    .pulldown-panel {
      max-height: 800px;
      .transition-duration(1.55s)
    }
  }

  .pulldown-handle {
    background: url('../../img/mobile/handle.png') 0 0 no-repeat;
    bottom: -19px;
    cursor: pointer;
    height: 19px;
    left: 50%;
    margin-left: -42px;
    position: absolute;
    width: 85px;
  }
}

.return-button {
  background-position: -54px -286px;
  border-right: 1px solid @mobileHeaderBorder;
  .box-shadow(0 0 0 1px rgba(255, 255, 255, 0.3));
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 12px;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

.select-box {
  background: #e7e7e7;
  border: 1px solid rgba(0, 0, 0, 0.35);
  .border-radius(2px);
  color: #333;
  cursor: pointer;
  float: left;
  height: 38px;
  line-height: 38px;
  overflow: hidden;
  padding: 0 14px;
  position: relative;
  text-decoration: none;

  &:after {
    border-color: transparent #333 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
    bottom: 3px;
    content: '';
    position: absolute;
    right: 3px;
  }
}

.smart-width {
  max-width: 100%;
}

.swipeable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topic-sprite {
  background: url('../../img/mobile/topics-sprite.png') -50px -494px no-repeat;
  height: 48px;
  width: 48px;

  &.topic-get-started {
    background-position: -50px -50px;
  }

  &.topic-download-and-install {
    background-position: -50px -198px;
  }

  &.topic-privacy-and-security {
    background-position: -50px -346px;
  }

  &.topic-customize {
    background-position: -50px -494px;
  }

  &.topic-fix-problems {
    background-position:  -50px -642px;
  }

  &.topic-get-community-support {
    background-position: -50px -790px;
  }
}

.trash-button {
  background-position: -36px -1400px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  .box-shadow(0 0 0 1px @mobileHeaderBorder);
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#cancel-button {
  background-position: -53px -781px;
  border-right: 1px solid @mobileHeaderBorder;
  .box-shadow(0 0 0 1px rgba(255, 255, 255, 0.3));
  cursor: pointer;
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 12px;
}

#menu-button {
  background-position: -37px -37px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid @mobileHeaderBorder;
  .box-shadow(0 0 0 1px rgba(255, 255, 255, 0.3));
  cursor: pointer;
  float: left;
  height: 24px;
  margin-right: 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#notifications {
  bottom: 0;
  color: #fff;
  font-family: @Moz;
  font-size: 18px;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;

  > li {
    background: #323C3E url("../../img/grain.png");
    padding: 16px;

    &.announcement {
      background: #ffc;
      color: #f90;
      font-size: 14px;
      padding: 12px 16px;
    }
  }
}

#reply-button {
  background-position: -36px -905px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  .box-shadow(0 0 0 1px @mobileHeaderBorder);
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#send-button {
  background-position: -35px -1029px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  .box-shadow(0 0 0 1px @mobileHeaderBorder);
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.page-not-found {
  background: url(../../img/background-404.jpg) no-repeat;
  background-position: 50% 0;
  border-radius: 5px;
  font-size: 18px;
  line-height: 25px;
  margin: 10px auto;
  max-width: 530px;
  min-height: 500px;
  padding: 10px 0;
  text-align: center;

  h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    line-height: 55px;
    margin-bottom: 80px;
    text-shadow: #222 1px 1px 2px;
  }

  p, div.search-empty {
    background-color: rgba(256, 256, 256, 0.75);
    padding: 5px;
  }

  form {
    margin: 20px 0px;

    .search-query {
      padding: 5px;
    }
  }
}

.footnote {
  display: block;
  font-size: 12px;
  margin: 10px auto;
  max-width: 530px;
}

@media only screen and (max-width: 319px) {
  body {
    > nav {
      width: calc(~'100% - 50px');
      width: -moz-calc(~'100% - 50px');
      width: -webkit-calc(~'100% - 50px');
    }

    &.exposed {
      .slide-on-exposed {
        left: calc(~'100% - 50px');
        left: -moz-calc(~'100% - 50px');
        left: -moz-calc(~'100% - 50px');
      }
    }

    &[data-orientation='right'] {
      &.exposed {
        .slide-on-exposed {
          left: auto;
          right: calc(~'100% - 50px');
          right: -moz-calc(~'100% - 50px');
          right: -moz-calc(~'100% - 50px');
        }
      }
    }
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .icon-sprite {
    .icons-sprite-2x();
  }

  .logo-sprite {
    background-image: url('../../img/mobile/logos-sprite-2x.png');
    .background-size(148px 296px)
  }

  .topic-sprite {
    background-image: url('../../img/mobile/topics-sprite-2x.png');
    .background-size(148px 888px);
  }

  .pulldown-menu {
    .pulldown-handle {
      background-image: url('../../img/mobile/handle-2x.png');
      .background-size(85px 19px);
    }
  }
}

@import '../fonts.less';
@import '../variables.less';
@import '../vendors.less';
@import 'mixins.less';

.fonts('../../fonts');

html, body {
  font-size: 15px;
  height: 100%;
}

a {
  color: @mobileHyperlink;
  text-decoration: none;
}

a:hover {
  text-decoration: hover;
}

body {
  font-family: @Moz;
  overflow-x: hidden;
  width: 100%;

  > * {
    -webkit-transform: translateZ(0px);
  }

  > nav {
    background: @mobileNavBackground url('../../img/grain.png') 0 0 repeat;
    color: #fff;
    display: none;
    height: 100%;
    height: -webkit-calc(100%);
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 270px;
    z-index: 0;

    > a,
    > header {
      border-bottom: 1px solid #929e9e;
    }

    > a,
    > a:visited,
    > a:hover {
      color: #fff;
      display: block;
      font-size: 17px;
      padding: 16px 16px 10px 16px;
      text-decoration: none;
    }

    > header {
      .linear-gradient-top(#1a2122, #1a2122, 0, #1b2324, 100%, url('../../img/grain.png'));
      font-size: 14px;
      font-weight: bold;
      height: 29px;
      line-height: 29px;
      padding: 0 16px;
    }

    #search-bar {
      .linear-gradient-top(#253132, #2c393b, 0, #253132, 100%, url('../../img/grain.png'));
      .box-shadow(0 0 3px 0 rgba(0, 0, 0, 0.75));
      padding: 10px 16px;

      form {
        display: block;
        position: relative;

        button[type='submit'] {
          background-color: transparent;
          background-position: -54px -177px;
          border: 0;
          height: 18px;
          margin: 0;
          outline: 0;
          padding: 0;
          position: absolute;
          right: 6px;
          text-indent: -9999px;
          top: 6px;
          width: 18px;
        }

        input[type='search'] {
          background: #283235;
          border: 1px solid rgba(0, 0, 0, 0.25);
          .border-radius(3px);
          .box-shadow(2px 2px 3px 0 rgba(0, 0, 0, 0.25) inset);
          .box-sizing(border-box);
          color: #849b9f;
          font-family: @Moz;
          font-size: 14px;
          outline: none;
          padding: 5px 30px 4px 4px;
          width: 100%;
        }
      }
    }
  }

  &.exposed {
    > nav {
      display: block;
    }

    .slide-on-exposed {
      left: 270px;
    }
  }

  .slide-on-exposed {
    left: 0;
    .transition-property(~'left, right');
    .transition-duration(0.5s);
  }

  > header {
    .gradient(#cd6723, #cd6723, #bb482d);
    border-bottom: 1px solid @mobileHeaderBorder;
    .box-shadow(0 0 4px 0 rgba(0, 0, 0, 0.75));
    color: #fff;
    height: 50px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;

    h1 {
      font-size: 24px;
      font-weight: normal;
      height: 50px;
      line-height: 50px;
      margin: 0 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  > .wrapper {
    background: #fff;
    .box-shadow(0 0 10px 0 rgba(0, 0, 0, 0.8));
    min-height: calc(~'100% - 51px');
    min-height: -moz-calc(~'100% - 51px');
    min-height: -webkit-calc(~'100% - 51px');
    position: absolute;
    top: 51px;
    width: 100%;
    z-index: 1;
  }

  &[data-orientation='right'] {
    > nav,
    .slide-on-exposed {
      left: auto;
      right: 0;
    }

    #menu-button {
      border-right: 0;
      .box-shadow(0 0 0 1px @mobileHeaderBorder);
      float: right;
      margin-left: 10px;
      margin-right: 0;
    }

    &.exposed {
      .slide-on-exposed {
        right: 270px;
      }
    }
  }
}

fieldset {
  border: 0;
  margin: 0;
  outline: none;
  padding: 0;
}

h3 {
  font-size: 20px;
  font-weight: normal;
}

h4 {
  font-size: 17px;
  font-weight: normal;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='url'],
select,
textarea {
  background: #fff;
  border: 1px solid @mobileInputBorder;
  .border-radius(3px);
  .box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.1) inset);
  .box-sizing(border-box);
  display: block;
  font-family: @Moz;
  font-size: 14px;
  margin: 0 0 12px 0;
  outline: none;
  padding: 10px 12px;
  width: 100%;
}

select {
  -webkit-appearance: none;
  height: 41px;
}

.add-button {
  background-position: -36px -1153px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  .box-shadow(0 0 0 1px @mobileHeaderBorder);
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.btn,
.btn:visited,
input[type="submit"],
input[type="submit"]:visited {
  .gradient(#e3e3e3, #fafafa, #cdcdcd);
  border: 1px solid #ababab;
  .border-radius(2px);
  .box-sizing(border-box);
  color: @textDarkGrey;
  cursor: pointer;
  display: block;
  font-family: @Moz;
  font-size: 16px;
  font-weight: bold;
  outline: none;
  margin: 0 0 6px 0;
  padding: 4px 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  width: 100%;

  &.btn-submit {
    .gradient(#00caf2, #00caf2, #00aacd);
    border: 0;
    font-size: 17px;
    padding: 8px 0;
  }
}

.btn:hover {
  text-decoration: none;
}

.centered {
  text-align: center;
}

.collapsable {
  article {
    display: none;
  }

  .toggle {
    color: @mobileHyperlink;
    cursor: pointer;

    > span {
      &.alt {
        display: none;
      }
    }
  }

  &.expanded {
    article {
      display: block;
    }

    .toggle {
      > span {
        display: none;

        &.alt {
          display: inline;
        }
      }
    }
  }
}

.edit-button {
  background-position: -36px -657px;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -10px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.errorlist {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;

  li {
    color: @textDarkOrange;
    margin-bottom: 6px;

    a,
    a:visited,
    a:hover {
      color: @textDarkOrange;
      text-decoration: none;
    }
  }
}

.icon-sprite {
  .icons-sprite();
}

.logo-sprite {
  background: url('../../img/mobile/logos-sprite.png') -50px -50px no-repeat;
  height: 48px;
  width: 48px;

  &.logo-firefox {
    background-position: -50px -50px;
  }
}

.header-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  border-bottom: 1px solid #000;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;

  h2 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    line-height: 50px;
    margin: 0 16px;
  }

  .done-button {
    color: #fff;
    cursor: pointer;
    float: right;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
  }
}

.footer-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  height: 50px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

.overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;

  > header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    .box-shadow(0 0 10px 0 rgba(0, 0, 0, 0.5));
    color: #fff;
    cursor: pointer;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .select-list {
    font-size: 24px;
    list-style: none;
    margin: 0 24px;
    padding: 0;

    > li {
      > a,
      > a:visited,
      > a:hover {
        border-bottom: 1px solid #000;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        display: block;
        padding: 16px 28px 16px 6px;
        position: relative;
        text-decoration: none;
      }

      &.selected {
        > a,
        > a:visited,
        > a:hover {
          color: #00a5c5;

          &:before {
            content: '\2713';
            position: absolute;
            right: 0;
          }
        }
      }

      &:first-of-type {
        > a {
          border-top: 0;
        }
      }

      &:last-of-type {
        > a {
          border-bottom: 0;
        }
      }
    }
  }

  .wrapper {
    bottom: 0;
    color: #fff;
    font-size: 24px;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 51px;

    &.padded {
      padding: 0 24px;
    }
  }
}

.paginator {
  list-style: none;
  margin: 0;
  padding: 10px 16px;

  li {
    .box-sizing(border-box);
    float: left;
    width: 27.5%;

    &.disabled {
      opacity: 0.5;
    }

    &.page {
      padding: 0 16px;
      width: 45%;

      .select-box {
        float: none;
        margin: 0;
      }
    }

    .btn {
      margin-top: 4px;
    }
  }
}

.progress-bar {
  background: rgba(0, 0, 0, 0.1) url('../img/grain.png');
  border: 1px solid rgba(0, 0, 0, 0.03);
  .border-radius(12px);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-align: right;
  z-index: 1;

  &:after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    .border-radius(13px);
    bottom: -2px;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  &:before {
    border: 2px solid rgba(0, 0, 0, 0.01);
    .border-radius(12px);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  > div {
    .gradient(#ff9500, #ff9500, #ed7000);
    .border-radius(12px);
    height: 24px;
    position: relative;
    z-index: 5;

    > span {
      margin-right: 10px;
    }
  }
}

.pulldown-menu {
  background: @mobileNavBackground url('../../img/grain.png');
  .box-shadow(0 0 5px rgba(0, 0, 0, 0.6));
  left: 0;
  margin-top: 51px;
  position: absolute;
  right: 0;
  z-index: 8;

  .pulldown-panel {
    max-height: 0;
    overflow: hidden;
    .transition-property(max-height);
    .transition-duration(0.5s);

    > section {
      border-bottom: 1px solid #2f393b;
      border-top: 1px solid #484d54;
      padding: 10px 16px;

      &:first-of-type {
        border-top: 0;
      }

      &:last-of-type {
        border-bottom: 0;
      }
    }
  }

  &.open {
    .pulldown-panel {
      max-height: 800px;
      .transition-duration(1.55s)
    }
  }

  .pulldown-handle {
    background: url('../../img/mobile/handle.png') 0 0 no-repeat;
    bottom: -19px;
    cursor: pointer;
    height: 19px;
    left: 50%;
    margin-left: -42px;
    position: absolute;
    width: 85px;
  }
}

.return-button {
  background-position: -54px -286px;
  border-right: 1px solid @mobileHeaderBorder;
  .box-shadow(0 0 0 1px rgba(255, 255, 255, 0.3));
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 12px;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

.select-box {
  background: #e7e7e7;
  border: 1px solid rgba(0, 0, 0, 0.35);
  .border-radius(2px);
  color: #333;
  cursor: pointer;
  float: left;
  height: 38px;
  line-height: 38px;
  overflow: hidden;
  padding: 0 14px;
  position: relative;
  text-decoration: none;

  &:after {
    border-color: transparent #333 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
    bottom: 3px;
    content: '';
    position: absolute;
    right: 3px;
  }
}

.smart-width {
  max-width: 100%;
}

.swipeable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topic-sprite {
  background: url('../../img/mobile/topics-sprite.png') -50px -494px no-repeat;
  height: 48px;
  width: 48px;

  &.topic-get-started {
    background-position: -50px -50px;
  }

  &.topic-download-and-install {
    background-position: -50px -198px;
  }

  &.topic-privacy-and-security {
    background-position: -50px -346px;
  }

  &.topic-customize {
    background-position: -50px -494px;
  }

  &.topic-fix-problems {
    background-position:  -50px -642px;
  }

  &.topic-get-community-support {
    background-position: -50px -790px;
  }
}

.trash-button {
  background-position: -36px -1400px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  .box-shadow(0 0 0 1px @mobileHeaderBorder);
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#cancel-button {
  background-position: -53px -781px;
  border-right: 1px solid @mobileHeaderBorder;
  .box-shadow(0 0 0 1px rgba(255, 255, 255, 0.3));
  cursor: pointer;
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 12px;
}

#menu-button {
  background-position: -37px -37px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid @mobileHeaderBorder;
  .box-shadow(0 0 0 1px rgba(255, 255, 255, 0.3));
  cursor: pointer;
  float: left;
  height: 24px;
  margin-right: 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#notifications {
  bottom: 0;
  color: #fff;
  font-family: @Moz;
  font-size: 18px;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;

  > li {
    background: #323C3E url("../../img/grain.png");
    padding: 16px;

    &.announcement {
      background: #ffc;
      color: #f90;
      font-size: 14px;
      padding: 12px 16px;
    }
  }
}

#reply-button {
  background-position: -36px -905px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  .box-shadow(0 0 0 1px @mobileHeaderBorder);
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#send-button {
  background-position: -35px -1029px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  .box-shadow(0 0 0 1px @mobileHeaderBorder);
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.page-not-found {
  background: url(../../img/background-404.jpg) no-repeat;
  background-position: 50% 0;
  border-radius: 5px;
  font-size: 18px;
  line-height: 25px;
  margin: 10px auto;
  max-width: 530px;
  min-height: 500px;
  padding: 10px 0;
  text-align: center;

  h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    line-height: 55px;
    margin-bottom: 80px;
    text-shadow: #222 1px 1px 2px;
  }

  p, div.search-empty {
    background-color: rgba(256, 256, 256, 0.75);
    padding: 5px;
  }

  form {
    margin: 20px 0px;

    .search-query {
      padding: 5px;
    }
  }
}

.footnote {
  display: block;
  font-size: 12px;
  margin: 10px auto;
  max-width: 530px;
}

@media only screen and (max-width: 319px) {
  body {
    > nav {
      width: calc(~'100% - 50px');
      width: -moz-calc(~'100% - 50px');
      width: -webkit-calc(~'100% - 50px');
    }

    &.exposed {
      .slide-on-exposed {
        left: calc(~'100% - 50px');
        left: -moz-calc(~'100% - 50px');
        left: -moz-calc(~'100% - 50px');
      }
    }

    &[data-orientation='right'] {
      &.exposed {
        .slide-on-exposed {
          left: auto;
          right: calc(~'100% - 50px');
          right: -moz-calc(~'100% - 50px');
          right: -moz-calc(~'100% - 50px');
        }
      }
    }
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .icon-sprite {
    .icons-sprite-2x();
  }

  .logo-sprite {
    background-image: url('../../img/mobile/logos-sprite-2x.png');
    .background-size(148px 296px)
  }

  .topic-sprite {
    background-image: url('../../img/mobile/topics-sprite-2x.png');
    .background-size(148px 888px);
  }

  .pulldown-menu {
    .pulldown-handle {
      background-image: url('../../img/mobile/handle-2x.png');
      .background-size(85px 19px);
    }
  }
}


Add preloader

Add preloader

/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  .svg-background("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#6c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;

}
.swiper-lazy-preloader-white:after {
  .svg-background("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
}
@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

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


fix for Issue #248: n-number steps chevron overlap

.wizard {

	.clearfix;

	border: 1px solid @navbarBorder;
	.border-radius(@baseBorderRadius);
	.box-shadow(0 1px 4px rgba(0,0,0,.065));
	background-color: @tableBackgroundAccent;
	position: relative;
	overflow: hidden;

	ul {
		list-style: none outside none;
		padding: 0;
		margin: 0;
		width: 4000px;

		li {
			float: left;
			margin: 0;
			padding: 0 20px 0 30px;
			height: 46px;
			line-height: 46px;
			position: relative;
			background: #ededed;
			color: @grayLight;
			font-size: 16px;
			cursor: default;

			.chevron {
				border: 24px solid transparent;
				border-left: 14px solid @navbarBorder;
				border-right: 0;
				display: block;
				position: absolute;
				right: -14px;
				top: 0;
                z-index: 1;
			}

			.chevron:before {
				border: 24px solid transparent;
				border-left: 14px solid #ededed;
				border-right: 0;
				content: "";
				display: block;
				position: absolute;
				right: 1px;
				top: -24px;
			}

			&.complete {
				background: #f3f4f5;
				color: @successText;

				&:hover {
					background: #e7eff8;
					cursor: pointer;

					.chevron:before {
						border-left: 14px solid #e7eff8;
					}
				}

				.chevron:before {
					border-left: 14px solid #f3f4f5;
				}
			}
			&.active {
				background: #f1f6fc;
				color: @infoText;

				.chevron:before {
					border-left: 14px solid #f1f6fc;
				}
			}
			.badge {
				margin-right: 8px;
			}
		}

		li:first-child {
			border-radius: 4px 0 0 4px;
			padding-left: 20px;
		}
	}

	.actions {
		z-index: 1000;
		position: absolute;
		right: 0;
		line-height: 46px;
		float: right;
		padding-left: 15px;
		padding-right: 15px;
		vertical-align: middle;
		background-color: #e5e5e5;
		border-left: 1px solid @navbarBorder;

		a {
			line-height: 45px;
			font-size: 12px;
			margin-right: 8px;
		}

		.btn-prev {
			i {
				margin-right: 5px;
			}
		}

		.btn-next {
			i {
				margin-left: 5px;
			}
		}
	}
}

.step-content {
	.step-pane {
		display: none;
	}

	.active {
		display: block;

		.btn-group {
			.active {
				display: inline-block;
			}
		}
	}
}

.wizard {

	.clearfix;

	border: 1px solid @navbarBorder;
	.border-radius(@baseBorderRadius);
	.box-shadow(0 1px 4px rgba(0,0,0,.065));
	background-color: @tableBackgroundAccent;
	position: relative;
	overflow: hidden;

	ul {
		list-style: none outside none;
		padding: 0;
		margin: 0;
		width: 4000px;

		li {
			float: left;
			margin: 0;
			padding: 0 20px 0 30px;
			height: 46px;
			line-height: 46px;
			position: relative;
			background: #ededed;
			color: @grayLight;
			font-size: 16px;
			cursor: default;

			.chevron {
				border: 24px solid transparent;
				border-left: 14px solid @navbarBorder;
				border-right: 0;
				display: block;
				position: absolute;
				right: -14px;
				top: 0;
			}

			.chevron:before {
				border: 24px solid transparent;
				border-left: 14px solid #ededed;
				border-right: 0;
				content: "";
				display: block;
				position: absolute;
				right: 1px;
				top: -24px;
			}

			&.complete {
				background: #f3f4f5;
				color: @successText;

				&:hover {
					background: #e7eff8;
					cursor: pointer;

					.chevron:before {
						border-left: 14px solid #e7eff8;
					}
				}

				.chevron:before {
					border-left: 14px solid #f3f4f5;
				}
			}
			&.active {
				background: #f1f6fc;
				color: @infoText;

				.chevron:before {
					border-left: 14px solid #f1f6fc;
				}
			}
			.badge {
				margin-right: 8px;
			}
		}

		/* set z-index on steps for chevron overlap */
		li:nth-child(1) {
			border-radius: 4px 0 0 4px;
			padding-left: 20px;
			z-index: 10;
		}
		li:nth-child(2) {
			z-index: 9;
		}
		li:nth-child(3) {
			z-index: 8;
		}
		li:nth-child(4) {
			z-index: 7;
		}
		li:nth-child(5) {
			z-index: 6;
		}
		li:nth-child(6) {
			z-index: 5;
		}
		li:nth-child(7) {
			z-index: 4;
		}
		li:nth-child(8) {
			z-index: 3;
		}
		li:nth-child(9) {
			z-index: 2;
		}
		li:nth-child(10) {
			z-index: 1;
		}
	}

	.actions {
		z-index: 1000;
		position: absolute;
		right: 0;
		line-height: 46px;
		float: right;
		padding-left: 15px;
		padding-right: 15px;
		vertical-align: middle;
		background-color: #e5e5e5;
		border-left: 1px solid @navbarBorder;

		a {
			line-height: 45px;
			font-size: 12px;
			margin-right: 8px;
		}

		.btn-prev {
			i {
				margin-right: 5px;
			}
		}

		.btn-next {
			i {
				margin-left: 5px;
			}
		}
	}
}

.step-content {
	.step-pane {
		display: none;
	}

	.active {
		display: block;

		.btn-group {
			.active {
				display: inline-block;
			}
		}
	}
}


修改首页样式

修改首页样式

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/493326889/imwebclub.git/'


Move css rule

Move css rule

/**
*    Copyright 2015 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/>.
*
*/

.contest {
  @_top: contest;
  background-color: #1A2223;
  color: white;
  padding-left: @spacing * 2;
  padding-right: @spacing * 2;
  padding-bottom: @spacing * 2;

  &__description {
    background-color: #293336;
    color: white;
    font-size: 14px;
    font-weight: 300;
    padding: 20px;
    .default-box-shadow();

    > h1, h2, h3, h4, h5, h6 {
      color: white;
    }
  }

  &__voting-notice {
    background-color: #1A2223;
    color: white;
    padding-top: @spacing * 2;
    text-align: center;
    &--padding {
      padding-bottom: @spacing * 2;
    }
  }

  &__accordion {
    background: #1A2223;
    padding: @spacing * 2;
  }

  &__group {
    margin: @spacing auto;
    max-width: 600px;
    background: #161a1b;
    border: none;
    .default-box-shadow();
  }

  &__group-heading {
    display: flex;
    justify-content: space-between;
    padding: @spacing;

    .white-link();
    &:hover, &:visited, &:link, &:active {
      .white-link();
      text-decoration: none;
    }

    &[aria-expanded='true'] {
      .@{_top}__section-toggle {
        transform: rotateZ(180deg);
      }
    }

    &[aria-expanded='false'] {
      .@{_top}__section-toggle {
        transform: rotateZ(0deg);
      }
    }
  }

  &__section-toggle {
    transition: all 300ms;
  }

  &__buttons {
    text-align: center;
    padding: 20px 0px;
  }

  &__vote-summary {
    &--art {
      font-size: 10px;
      padding-top: 10px;
      margin-bottom: 5px;
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  &__vote-summary-text {
    float: right;
    text-transform: uppercase;
    color: #8dacb6;
    font-weight: bold;
    height: 16px;
    display: flex;
    align-items: center;
    width: 32px;
    &--art {
      width: inherit;
      margin-right: 10px
    }
  }

  &__vote-link-banner {
    width: 32px;
    height: 32px;
    border-style: solid;
    border-width: 0 0 64px 64px;
    margin-top: -64px;
    float: right;
    border-color: transparent transparent white transparent;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    &--smaller {
      width: 16px;
      height: 16px;
      border-width: 0 0 32px 32px;
      margin-top: -32px;
      font-size: 10px;
    }
    &--selected {
      border-color: transparent transparent #ffa500 transparent;
    }
  }

  &__vote-star--fixed {
    width: 16px;
    background-color: #1a2223;
  }

  &__vote-count {
    width: 110px;
    text-align: right;
    background-color: #1a2223;
  }

  &__voting-star {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: smaller;
    color: rgba(1, 1, 1, 0.5);

    &:hover, &:focus {
      color: rgba(1, 1, 1, 0.75);
      font-size: inherit;
      text-decoration: none;
    }

    &--spin {
      animation: spin-w-easing 1s ease-in-out infinite;
    }

    &--art {
      margin-top: 90px;
      margin-left: -35px;
    }
    &--art-smaller {
      margin-top: 42px;
      margin-left: -19px;
    }

    &--selected {
      font-size: inherit;
      color: #ffa500;
      &:hover, &:focus {
        color: rgba(255, 165, 0, 0.75);
      }
    }

    &--selected-art, &--selected-art-smaller {
      font-size: inherit;
      color: white;
      &:hover, &:focus {
        color: rgba(255, 255, 255, 0.50);
      }
    }

    &--smaller {
      width: 16px;
      height: 16px;
    }

    &--float-right {
      float: right;
    }
  }
}

/**
*    Copyright 2015 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/>.
*
*/

.contest {
  @_top: contest;
  background-color: #1A2223;
  color: white;
  padding-left: @spacing * 2;
  padding-right: @spacing * 2;
  padding-bottom: @spacing * 2;

  &__description {
    background-color: #293336;
    color: white;
    font-size: 14px;
    font-weight: 300;
    padding: 20px;
    .default-box-shadow();

    > h1, h2, h3, h4, h5, h6 {
      color: white;
    }
  }

  &__voting-notice {
    background-color: #1A2223;
    color: white;
    padding-top: @spacing * 2;
    text-align: center;
    &--padding {
      padding-bottom: @spacing * 2;
    }
  }

  &__accordion {
    background: #1A2223;
    padding: @spacing * 2;
  }

  &__group {
    margin: @spacing auto;
    max-width: 600px;
    background: #161a1b;
    border: none;
    .default-box-shadow();
  }

  &__group-heading {
    display: flex;
    justify-content: space-between;
    padding: @spacing;

    .white-link();
    &:hover, &:visited, &:link, &:active {
      .white-link();
      text-decoration: none;
    }

    & .@{_top}__section-toggle {
      transition: all 300ms;
    }

    &[aria-expanded='true'] {
      .@{_top}__section-toggle {
        transform: rotateZ(180deg);
      }
    }

    &[aria-expanded='false'] {
      .@{_top}__section-toggle {
        transform: rotateZ(0deg);
      }
    }
  }

  &__buttons {
    text-align: center;
    padding: 20px 0px;
  }

  &__vote-summary {
    &--art {
      font-size: 10px;
      padding-top: 10px;
      margin-bottom: 5px;
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  &__vote-summary-text {
    float: right;
    text-transform: uppercase;
    color: #8dacb6;
    font-weight: bold;
    height: 16px;
    display: flex;
    align-items: center;
    width: 32px;
    &--art {
      width: inherit;
      margin-right: 10px
    }
  }

  &__vote-link-banner {
    width: 32px;
    height: 32px;
    border-style: solid;
    border-width: 0 0 64px 64px;
    margin-top: -64px;
    float: right;
    border-color: transparent transparent white transparent;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    &--smaller {
      width: 16px;
      height: 16px;
      border-width: 0 0 32px 32px;
      margin-top: -32px;
      font-size: 10px;
    }
    &--selected {
      border-color: transparent transparent #ffa500 transparent;
    }
  }

  &__vote-star--fixed {
    width: 16px;
    background-color: #1a2223;
  }

  &__vote-count {
    width: 110px;
    text-align: right;
    background-color: #1a2223;
  }

  &__voting-star {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: smaller;
    color: rgba(1, 1, 1, 0.5);

    &:hover, &:focus {
      color: rgba(1, 1, 1, 0.75);
      font-size: inherit;
      text-decoration: none;
    }

    &--spin {
      animation: spin-w-easing 1s ease-in-out infinite;
    }

    &--art {
      margin-top: 90px;
      margin-left: -35px;
    }
    &--art-smaller {
      margin-top: 42px;
      margin-left: -19px;
    }

    &--selected {
      font-size: inherit;
      color: #ffa500;
      &:hover, &:focus {
        color: rgba(255, 165, 0, 0.75);
      }
    }

    &--selected-art, &--selected-art-smaller {
      font-size: inherit;
      color: white;
      &:hover, &:focus {
        color: rgba(255, 255, 255, 0.50);
      }
    }

    &--smaller {
      width: 16px;
      height: 16px;
    }

    &--float-right {
      float: right;
    }
  }
}