more hovercard class cleaning

more hovercard class cleaning

@import 'lib';

.listing-grid {
    li {
        overflow: visible;
        float: left;
        height: 66px;
    }
    &.personas li {
        height: 78px;
    }
    &.cols-3 li { width: 100% / 3; }
    &.cols-2 li { width: 100% / 2; }
    &.cols-1 li { width: 100%; }
    section {
        display: none;
        position: relative;
        &:first-child {
            display: block;
        }
    }
}
.hovercard {
    position: relative;
    border: 1px solid transparent;
    z-index: 20;
    .more, .desc {
        font-family: @sans-stack;
        color: #333;
        font-size: 12px;
        z-index: 29;
        margin-top: 0;
    }
    .desc {
        max-height: 2.6em;
        overflow: hidden;
    }
    h3 {
        color: @link;
        font-weight: bold;
        margin: 0 0 2px 0;
        font-size: 13px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 200px;
    }
    .more {
        display: none;
        position: relative;
        padding: 0 14px 8px 12px;
        p:first-child {
            margin-top: 0;
        }
    }
    a {
        text-decoration: none;
    }
    .adu {
        color: #390;
        font-size: 11px;
    }
    .byline {
        margin: 8px 0;
        font-size: 11px;
        font-style: italic;
        a {
            display: inline;
            color: inherit;
        }
    }
    &:hover {
        z-index: 25;
        background: #fff;
        border-color: #ccc;
        .box-shadow(0 0 4px rgba(0,0,0,.4));
        .more {
            background: #fff;
            display: block;
            z-index: 28;
        }
        h3 {
            text-decoration: underline;
            white-space: normal;
        }
    }
    &.persona {
        overflow: hidden;
        padding: 9px;
        height: 78px;
        a {
            overflow: hidden;
            display: block;
        }
        .persona-preview {
            width: 200px;
            height: 48px;
            float: right;
            overflow: hidden;
            position: relative;
            img {
                width: 200px;
                height: 67px;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .more {
            padding: 0;
            margin-top: 10px;
        }
        h3 {
            clear: right;
        }
        &:hover {
            .border-radius(5px);
            height: auto;
        }
    }
    &.addon {
        margin: 5px 5px 5px 61px;
        .summary, .icon {
            position: relative;
            padding: 8px;
        }
        .summary {
            height: 48px;
            z-index: 21;
            overflow: hidden;
            div {
                white-space: nowrap;
            }
        }
        .icon {
            position: absolute;
            left: -57px;
            top: -1px;
            padding-right: 0;
            height: 48px;
            width: 48px;
            border-width: 1px 0 1px 1px;
            border-style: solid;
            z-index: 22;
            border-color: transparent;
            img {
                margin: 8px;
                width: 32px;
                height: 32px;
                border: 0;
                padding: 0;
            }
        }
        .more .vital {
            border-top: 1px dotted #CCCCCC;
            padding: 8px 0 0;
            margin: 8px 0 4px;
        }
        &:before {
            content: "";
            display: block;
            position: absolute;
            height: 66px;
            width: 56px;
            top: -1px;
            left: -57px;
            z-index: 1;
        }
        &:hover {
            float: left;
            z-index: 25;
            background: #fff;
            border-color: #ccc;
            .box-shadow(0 0 4px rgba(0,0,0,.4));
            .summary {
                background: white;
                z-index: 26;
                height: auto;
                min-height: 48px;
            }
            .icon {
                background: #fff;
                border-color: #ccc;
                z-index: 27;
            }
            &:before {
                .box-shadow(0 0 4px rgba(0,0,0,.4));
            }
        }
    }
    .collection {
        &:hover {
            .summary {
                overflow: visible;
                height: auto;
            }
            .desc {
                overflow: visible;
                max-height: none;
            }
            .more {
                font-size: 11px;
                border-top: 1px dotted #CCCCCC;
                padding: 8px 0;
                margin: 0 8px;
            }
        }
    }
    .category, .vital {
        color: #666;
        font-size: 11px;
        line-height: 10px;
        white-space: nowrap;
    }
    .summary .vital {
        margin-top: 4px;
        font-size: 10px;
        line-height: 12px;
    }
}
.featured {
    h3 {
        font-size: 16px;
        line-height: 18px;
    }
    li {
        height: 212px;
        width: 240px;
    }
    .hovercard {
        padding: 9px;
        margin: 0;
        &.addon {
            &:before {
                display: none;
                content: none;
            }
            .summary {
                height: 192px;
                padding: 0;
                div {
                    width: 220px;
                    height: 170px;
                    position: relative;
                    img {
                        padding: 8px;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        margin: auto;
                        border: 1px solid #ccc;
                        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
                        position: absolute;
                    }
                }
            }
        }
        &:hover {
            &.addon .summary {
                height: auto;
            }
            .more {
                padding: 14px 0 0;
            }
        }
    }
}

.secondary {
    .hovercard.addon {
        line-height: inherit;
        width: 196px;
        position: relative;
        left: -8px;
        border: 0;
        margin: 0;
        .icon {
            float: left;
            position: static;
            left: auto;
            right: auto;
            border: 0;
        }
        .summary a, p {
            padding: 0;
        }
        .summary a {
            display: inline;
        }
        &:before {
            content: none;
        }
    }
}
.html-rtl .listing-grid {
    li {
        float: right;
    }
    .hovercard {
        &.addon {
            margin: 5px 61px 5px 5px;
        }
        .more {
            padding: 0 12px 8px 14px;
        }
        .icon {
            left: auto;
            right: -57px;
            padding-left: 0;
            padding-right: 8px;
            border-width: 1px 1px 1px 0;
        }
        &:before {
            left: auto;
            right: -57px;
        }
    }
    .addon:hover {
        float: right;
    }
    &.featured {
        .hovercard.addon {
            margin: 0;
        }
    }
}

@import 'lib';

.listing-grid {
    li {
        overflow: visible;
        float: left;
        height: 66px;
    }
    &.personas li {
        height: 78px;
    }
    &.cols-3 li { width: 100% / 3; }
    &.cols-2 li { width: 100% / 2; }
    &.cols-1 li { width: 100%; }
    section {
        display: none;
        position: relative;
        &:first-child {
            display: block;
        }
    }
}
.hovercard {
    position: relative;
    border: 1px solid transparent;
    z-index: 20;
    .more, .desc {
        font-family: @sans-stack;
        color: #333;
        font-size: 12px;
        z-index: 29;
        margin-top: 0;
    }
    .desc {
        max-height: 2.6em;
        overflow: hidden;
    }
    h3 {
        color: @link;
        font-weight: bold;
        margin: 0 0 2px 0;
        font-size: 13px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 200px;
    }
    .more {
        display: none;
        position: relative;
        padding: 0 14px 8px 12px;
        p:first-child {
            margin-top: 0;
        }
    }
    a {
        text-decoration: none;
    }
    .adu {
        color: #390;
        font-size: 11px;
    }
    .byline {
        margin: 8px 0;
        font-size: 11px;
        font-style: italic;
        a {
            display: inline;
            color: inherit;
        }
    }
    &:hover {
        z-index: 25;
        background: #fff;
        border-color: #ccc;
        .box-shadow(0 0 4px rgba(0,0,0,.4));
        .more {
            background: #fff;
            display: block;
            z-index: 28;
        }
        h3 {
            text-decoration: underline;
            white-space: normal;
        }
    }
    &.persona {
        overflow: hidden;
        padding: 9px;
        height: 78px;
        a {
            overflow: hidden;
            display: block;
        }
        .persona-preview {
            width: 200px;
            height: 48px;
            float: right;
            overflow: hidden;
            position: relative;
            img {
                width: 200px;
                height: 67px;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .more {
            padding: 0;
            margin-top: 10px;
        }
        h3 {
            clear: right;
        }
        &:hover {
            .border-radius(5px);
            height: auto;
        }
    }
    &.addon {
        margin: 5px 5px 5px 61px;
        .summary, .icon {
            position: relative;
            padding: 8px;
        }
        .summary {
            height: 48px;
            z-index: 21;
            overflow: hidden;
            div {
                white-space: nowrap;
            }
        }
        .icon {
            position: absolute;
            left: -57px;
            top: -1px;
            padding-right: 0;
            height: 48px;
            width: 48px;
            border-width: 1px 0 1px 1px;
            border-style: solid;
            z-index: 22;
            border-color: transparent;
            img {
                margin: 8px;
                width: 32px;
                height: 32px;
                border: 0;
                padding: 0;
            }
        }
        .more .vital {
            border-top: 1px dotted #CCCCCC;
            padding: 8px 0 0;
            margin: 8px 0 4px;
        }
        &:before {
            content: "";
            display: block;
            position: absolute;
            height: 66px;
            width: 56px;
            top: -1px;
            left: -57px;
            z-index: 1;
        }
        &:hover {
            float: left;
            z-index: 25;
            background: #fff;
            border-color: #ccc;
            .box-shadow(0 0 4px rgba(0,0,0,.4));
            .summary {
                background: white;
                z-index: 26;
                height: auto;
                min-height: 48px;
            }
            .icon {
                background: #fff;
                border-color: #ccc;
                z-index: 27;
            }
            &:before {
                .box-shadow(0 0 4px rgba(0,0,0,.4));
            }
        }
    }
    .collection {
        &:hover {
            .summary {
                overflow: visible;
                height: auto;
            }
            .desc {
                overflow: visible;
                max-height: none;
            }
            .more {
                font-size: 11px;
                border-top: 1px dotted #CCCCCC;
                padding: 8px 0;
                margin: 0 8px;
            }
        }
    }
    .category, .vital {
        color: #666;
        font-size: 11px;
        line-height: 10px;
        white-space: nowrap;
    }
    .summary .vital {
        margin-top: 4px;
        font-size: 10px;
        line-height: 12px;
    }
    &.featured {
        h3 {
            font-size: 16px;
            line-height: 18px;
        }
        li {
            height: 212px;
            width: 240px;
        }
        .hovercard {
            padding: 9px;
            margin: 0;
            &.addon {
                &:before {
                    display: none;
                    content: none;
                }
                .summary {
                    height: 192px;
                    padding: 0;
                    div {
                        width: 220px;
                        height: 170px;
                        position: relative;
                        img {
                            padding: 8px;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            margin: auto;
                            border: 1px solid #ccc;
                            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
                            position: absolute;
                        }
                    }
                }
            }
            &:hover {
                &.addon .summary {
                    height: auto;
                }
                .more {
                    padding: 14px 0 0;
                }
            }
        }
    }
}

.secondary {
    .hovercard.addon {
        line-height: inherit;
        width: 196px;
        position: relative;
        left: -8px;
        border: 0;
        margin: 0;
        .icon {
            float: left;
            position: static;
            left: auto;
            right: auto;
            border: 0;
        }
        .summary a, p {
            padding: 0;
        }
        .summary a {
            display: inline;
        }
        &:before {
            content: none;
        }
    }
}
.html-rtl .listing-grid {
    li {
        float: right;
    }
    .hovercard {
        &.addon {
            margin: 5px 61px 5px 5px;
        }
        .more {
            padding: 0 12px 8px 14px;
        }
        .icon {
            left: auto;
            right: -57px;
            padding-left: 0;
            padding-right: 8px;
            border-width: 1px 1px 1px 0;
        }
        &:before {
            left: auto;
            right: -57px;
        }
    }
    .addon:hover {
        float: right;
    }
    &.featured {
        .hovercard.addon {
            margin: 0;
        }
    }
}


added missing files

added missing files

// colors
html {

  &.x-small {
    --fontsize: 10px;
  }

  &.small {
    --fontsize: 12px;
  }

  &.medium {
    --fontsize: 14px;
  }

  &.large {
    --fontsize: 16px;
  }

  &.x-large {
    --fontsize: 18px;
  }
}

error: pathspec 'src/ui/css/yakyak/fonts.less' did not match any file(s) known to git


Add classic-uw-template.less

Add classic-uw-template.less

error: pathspec 'src/less/uw-ui-toolkit/examples/classic-uw-template.less' did not match any file(s) known to git


Update style

Update 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/parallelsymmetry/bitboard.git/'


[FEATURE] sap.m.ObjectIdentifier styles for HCB

[INTERNAL]
Rebased to apply eslint fixes

Change-Id: Ie8ea32f01b81d8aca659304c96c568e623616b9c
Signed-off-by: Deyan Yanakiev <2614bfd3515c6c39ab25ed6159ddb09df1e2cc71@sap.com>

.sapMObjectIdentifierIcons,
.sapMObjectIdentifierTitle,
.sapMObjectIdentifierText,
.sapMObjectIdentifier {
	color: @sapHCStandardFG;
}

.sapMOITitleActive {
	color: @sapHCStandardFG;
	text-decoration: underline;
}

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

error: pathspec 'src/sap.m/src/sap/m/themes/sap_hcb/ObjectIdentifier.less' did not match any file(s) known to git


adding suggest bg color to less

adding suggest bg color to 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/lasanthak/abv.git/'


dark theme v1.0

dark theme v1.0

/* dorkula base colors */
@yellow:                #FFeF68;
@orange:                #FFA500;
@red:                   #CE2029;
@magenta:               #e07a7a;
@violet:                #cc89e0;
@blue:                  #61afef;
@cyan:                  #51b6c3;
@green:                 #94c273;
@code-gray:             #6a737d;
@code-fg:               #B5C2D9;
@code-yellow:           @yellow;
@code-red:              @red;
@code-violet:           @violet;
@code-green:            @green;
@code-blue:             @blue;
@code-orange:           @orange;
@code-cyan:             @cyan;
@theme-flavor:          #000000;
@theme-flavor-inverse:  #ffffff;

/* dorkula notebook colors */
@notebook-bg:           #222;
@notebook-fg:           #999;
@notebook-base:         #333;

/* jtplot figure style */
@axisFace:              #404023;
@figureFace:            #404023;
@textColor:             #999;
@edgeColor:             #BBB;
@gridColor:             #676767;

/* selection, hover, prompts, brackets colors */
@selected-bg:           #cdcdcd;
@selected-half:         rgba(133, 133, 133,.45);
@selected-third:        rgba(133, 133, 131,.22);
@selected-tenth:        rgba(80, 90, 133,.06);
@selected-error:        rgba(192, 192, 192, .3);
@selected-active:       @selected-bg;
@navbar-selected:       @selected-active;
@selected-fg:           #e3e3e3;
@selected-fg-bright:    #fff;
@unemphasize-fg:        #969696;

/* code, text, markdown, & tooltip colors */
@cc-input-bg:           #333;
@cc-input-fg:           #e3e3e3;
@cc-output-bg-default:  #444;
@cc-output-fg:          #adadad;
@text-cell-fg:          #e3e3e3;
@unrendered-text:       #0088ee;
@header-fg:             #ee5500;
@tooltip-bg-color:      #444;
@tooltip-fg-color:      @cc-input-fg;
@nb-name-fg:            @header-fg;
@nb-name-hover:         #3333ee;

/* cell border colors */
@cc-border-selected:    @selected-bg;
@cc-border-edit:        #8e8e8e;
@tc-border-selected:    #8e8e8e;
@tc-border-edit:        @tc-border-selected;

/* menus, dividers, prompt-borders, brackets */
@divider:               rgba(175, 175, 175, .4);
@disabled:              #888888;
@input-prompt:          #AAA;
@input-hover-bg:        #2a2a39;
@prompt-hover-color:    #444;
@prompt-line:           rgba(150, 150, 150, .75);
@tc-prompt-std:         rgba(225, 225, 225, .3);
@matching-bracket:      #ee5500;
@menubar-bg:            #444;
@menubar-fg:            @notebook-fg;
@menubar-hover:         @dropdown-bg;
@nb-header-bg:          @orange;
@nb-header-fg:          #e3e3e3;
@dropdown-bg:           lighten(#242431, 8%);
@dropdown-border:       @selected-third;
@dropdown-hover:        darken(@dropdown-bg, 2%);

/* panels and form-control styles */
@panel-header-bg:       #2e2e2e;
@panel-bg:              #373737;
@modal-bg:              @panel-bg;
@alert-info-bg:         #4a4a4a;
@form-input-bg:         @codeblock-bg;
@form-input-border:     @codeblock-bg;
@cmd-palette-bg:        #373737;
@cmd-palette-form:      #474747;
@cmd-palette-hover:     #505050;

/* buttons, widgets, kernels colors */
@item-theme:            #e3e3e3;
@item-blue:             #4C8BE2;
@item-cyan:             #2c85f7;
@item-green:            #94c273;
@item-red:              #dc6972;
@item-orange:           #fea47f;

@item-danger:           #e16256;
@item-success:          #83a83b;
@item-info:             #3498db;
@item-warning:          #ff914d;

/* tables and dataframes colors */
@table-color:           #e3e3e3;
@table-bg:              #434343;
@table-border:          #aaa;
@df-header-bg:          #434343;
@df-header:             #e3e3e3;
@df-header-border:      #5d5d5d;
@df-cell-bg:            #555;
@codeblock-bg:          #111;
@codeblock-border:      @codeblock-bg;

/* btn, scrollbar and shadow colors */
@button-bg:             #333;
@button-border:         @button-bg;
@button-color:          @notebook-fg;
@button-hover:          @item-theme;
@button-hover-bg:       #222;
@button-hover-border:   @button-hover-bg;
@button-focus-bg:       rgba(198, 198, 198, .75);
@button-focus-fg:       #c3c3c3;
@button-panel-bg:       @panel-header-bg;
@button-panel-hover:    #3A313C;
@scrollbar:             #555555;
@scroll-trough:         #3d3d3d;
@scrollbar-inactive:    #666666;
@box-shadow:            #585858;
@md-header-link:        rgba(0,0,0,.32);

/* dorkula ansi colors */
@ansiblack:             #2b303b;
@ansiblue:              @blue;
@ansigray:              #777;
@ansigreen:             #8FCA9A;
@ansipurple:            #b399ef;
@ansicyan:              #77ABE7;
@ansiyellow:            @yellow;
@ansired:               #e07a7a;
@stderr-bg:             #e07a7a;
@stderr-fg:             #D0D4E6;
@js-error:              @stderr-bg;

/* dorkula codemirror colors */
@cm-selected:           #373D4B;
@cm-gutters:            #353a48;
@cm-linenumber:         @input-prompt;
@cm-comment:            @input-prompt;
@cm-atom:               @blue;
@cm-number:             @orange;
@cm-property:           @blue;
@cm-attribute:          @violet;
@cm-keyword:            #555555;
@cm-string:             @green;
@cm-meta:               @yellow;
@cm-operator:           @blue;
@cm-builtin:            @red;
@cm-variable:           @cc-input-fg;
@cm-variable2:          @red;
@cm-variable3:          @violet;

@cm-def:                @blue;
@cm-error:              @selected-error;
@cm-tag:                @blue;
@cm-link:               @green;
@cm-storage:            @blue;
@cm-entity:             @blue;
@cm-latex:              #8fb36a;

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


fixed tab content to take over whole page

///*
// * Tabs component theme overrides
// *------------------------------------------------------------------------------------------
// */

//============== update to Dell-bootstrap-ui
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    width: 100%;
    margin-left: 0;
}

/*
  font-family: icon-ui;
  font-size: 16px;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

.icon-ui-arrowright:before {
  content: "\e601";
}

  */

@media (min-width: 520px) and (max-width: @screen-xs-max) {
    .nav-tabs {
        display: block;
        width: 107%;
        margin-left: -15px;
        margin-right: -15px;
        > li {
            background: @white;
            width: 105%;
            border: 1px solid @nav-tabs-border-color;
            margin-bottom: -1px;
            margin-left: -1px;
            height: auto;
            padding-right: 4%;

            &:first-child {
                margin-left: -1px;
                border-top: 1px solid @nav-tabs-border-color;
            }
            &:last-child {
                margin-left: -1px;
                border-bottom: 1px solid @nav-tabs-border-color;
            }
            &:hover {
                background: @dell-highlight-blue;
                color: @dell-blue;
            }
            &.active {
                background: @white;
                border-bottom-color: transparent;
                overflow: hidden;
                > a,
                > a:hover,
                > a:focus {
                    border-color: transparent;
                    width: 100%;
                    margin-left: -1px;
                    margin-bottom: -1px !important;
                    border-top: none;
                    padding: 10px 15px;
                    color: @dell-blue;

                }
                a:hover {
                    background: @dell-highlight-blue;
                }
                &:last-child {
                    margin-left: -1px;
                    margin-bottom: 0;
                }
            }
            > a {
                text-align: left !important;
                border: none;
                background: none;
                &:hover,
                &:focus {
                    border-color: transparent;
                    background: none;
                    color: @dell-blue;
                }
            }
        }

        &.nav-justified {
            width: 107%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }

                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }

        &.nav-centered {
            width: 107%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }

                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }
    }
}

@media (min-width: 100px) and (max-width: 520px) {
    .nav-tabs {
        display: block;
        width: 112%;
        margin-left: -15px;
        margin-right: -15px;

        > li {
            background: @white;
            width: 103%;
            border: 1px solid @nav-tabs-border-color;
            margin-bottom: -1px;
            margin-left: -1px;
            height: auto;
            padding-right: 5%;
            &:first-child {
                margin-left: -1px;
                border-top: 1px solid @nav-tabs-border-color;
            }
            &:last-child {
                margin-left: -1px;
                border-bottom: 1px solid @nav-tabs-border-color;
            }
            &:hover {
                background: @dell-highlight-blue;
                color: @dell-blue;
            }
            &.active {
                background: @white;
                border-bottom-color: transparent;
                overflow: hidden;
                > a,
                > a:hover,
                > a:focus {
                    border-color: transparent;
                    width: 100%;
                    margin-left: -1px;
                    margin-bottom: -1px !important;
                    border-top: none;
                    padding: 10px 15px;
                    color: @dell-blue;
                }
                a:hover {
                    background: @dell-highlight-blue;
                }
                &:last-child {
                    margin-left: -1px;
                    margin-bottom: 0;
                }
            }
            > a {
                text-align: left !important;
                border: none;
                background: none;
                &:hover,
                &:focus {
                    border-color: transparent;
                    background: none;
                    color: @dell-blue;
                }
            }
        }

        &.nav-justified {
            width: 112%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }
                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }

        &.nav-centered {
            width: 112%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }
                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }
    }
}

.nav-tabs h4 {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.nav-center-rule {
    border-bottom: 1px solid #ccc;
    top: -11px;
    position: relative;
    z-index: -1;
}
ul.nav-center {
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

.tab-image {
    width: 100px;
    margin-top: 15px;
}

@media (max-width: @screen-md-max) {
    .tab-image {
        width: 80px;
        margin-top: 15px;
    }

}

@media (max-width: @screen-xs-max) {
    .nav-center-rule {
        border-bottom: none;
        bottom:0;
        position: relative;
    }
    .nav-center-container {
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .nav-tabs h4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .row-offcanvas-right .nav-tabs > li> a > .icon-ui-arrowright {
        float:right;
    }

    .vertical-align {
        position: relative
    }

    .vertical-align-element {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
    .vertical-align-element-carat {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 2%;
    }

    .tab-image {
        width: 90px;
        margin-right: 20px;
        margin-top: 0;
        float: left !important;
        padding-bottom: 50px;

    }

    .block-of-text {
        min-height: 120px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav div.vertical-align {
        padding-right: 25px !important;
    }

}

    /*
     * Tab Off Canvas
     * --------------------------------------------------
     */
    @media screen and (max-width: 767px) {
        .row-offcanvas {
            position: relative;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .row-offcanvas-right {
            right: 0;
            [data-toggle="offcanvas"] {
                text-align:left;
                padding: 10px;
                margin-bottom:10px;
                .icon-ui-arrowleft {
                    top: 2px;
                    position: relative;
                }
            }
        }

        .row-offcanvas-left {
            left: 0;
            [data-toggle="offcanvas"] {
                text-align:right;
                padding: 10px;
                margin-bottom:10px;
                .icon-ui-arrowright {
                    top: 2px;
                    position: relative;
                }
            }
        }
        .nav-centered > li > a > .icon-ui-arrowright {
            top: -15px;
            position: relative;
        }

        .row-offcanvas-right
        .sidebar-offcanvas {
            //        right: -50%; /* 6 columns */
            right: 108%;
            position: fixed;
            top: 0;
            width: 102%;
            left: -100%;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .row-offcanvas-left
        .sidebar-offcanvas {
            left: -50%; /* 6 columns */
        }

        .row-offcanvas-left .tab-content {
            position: fixed;
            top: 0;
            left: 100%;
            width: 102%;
            background: @body-bg;
            height: 3000px;
            // animation goes here
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            &.active {
                left: 0;
            }

        }

        .row-offcanvas-right .tab-content {
            position: fixed;
            top: 0;
            right: 100%;
            width: 102%;
            z-index:1000;

            // animation goes here
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            &.active {
                right: 0;
            }
            .tab-pane {
                min-height: 3000px;
                background: @body-bg;
            }
        }
        .row-offcanvas .nav-centered + .tab-content {
            top: -11px;
        }

        .row-offcanvas-left.active {
            left: 50%; /* 6 columns */
        }
        .tab-content .row {
            margin-left: 15px;
            margin-right: 15px;
        }
        .offcanvas-back-btn {
            &.well {
                height: 45px;
                padding: 5px 20px 10px 30px;
            }
            &:before, {
                color: @dell-blue;
                font-family:    'icon-ui';
                content: none !important;
                position: absolute;
                left: 30px;
                padding-top: 7px;
            }
            > .btn-link {
                text-decoration: none;
            }
            .btn {
                padding: 6px 0 !important;
            }
            [class^=icon] {
                top: 2px;
                position: relative;
            }
        }
        .tab-image {
            padding-bottom: 10px;
        }
    }

.nav-centered {
    .nav-centered();
    .nav-tabs-centered();
}

// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-centered {
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:1;

  > li {
    float: none;
    &.active {
        border-bottom-color: @body-bg;
    }
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  + .tab-content {
    border-top: 1px solid @nav-tabs-justified-link-border-color;
    position:relative;
    z-index:0;
    top: -11px;
    padding-top: 10px;
    &.active {
        z-index:1000;

    }
  }

  @media (min-width: @screen-sm-min) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }

  @media (max-width: @screen-xs-max) {
    > li {
        &.active {
            z-index:1;
            border-bottom-color: @dell-gray-stroke;
        }
        > a {
            padding-top:20px;
            display:table;
            cursor:pointer;

        }
    }
  }

}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-centered {
  border-bottom: 0;

  > li > a {
    // Override margin from .nav-tabs
    margin-right: 0;
    border-radius: @border-radius-base;
  }

  > .active > a,
  > .active > a:hover,
  > .active > a:focus {
    border: 1px solid @nav-tabs-justified-link-border-color;
  }

  @media (min-width: @screen-sm-min) {
    > li > a {
      //border-bottom: 1px solid @nav-tabs-justified-link-border-color;
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .active > a,
    > .active > a:hover,
    > .active > a:focus {
      border-bottom-color: @nav-tabs-justified-active-link-border-color;
    }
  }
}

///*
// * Tabs component theme overrides
// *------------------------------------------------------------------------------------------
// */

//============== update to Dell-bootstrap-ui
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    width: 100%;
    margin-left: 0;
}

/*
  font-family: icon-ui;
  font-size: 16px;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

.icon-ui-arrowright:before {
  content: "\e601";
}

  */

@media (min-width: 520px) and (max-width: @screen-xs-max) {
    .nav-tabs {
        display: block;
        width: 107%;
        margin-left: -15px;
        margin-right: -15px;
        > li {
            background: @white;
            width: 105%;
            border: 1px solid @nav-tabs-border-color;
            margin-bottom: -1px;
            margin-left: -1px;
            height: auto;
            padding-right: 4%;

            &:first-child {
                margin-left: -1px;
                border-top: 1px solid @nav-tabs-border-color;
            }
            &:last-child {
                margin-left: -1px;
                border-bottom: 1px solid @nav-tabs-border-color;
            }
            &:hover {
                background: @dell-highlight-blue;
                color: @dell-blue;
            }
            &.active {
                background: @white;
                border-bottom-color: transparent;
                overflow: hidden;
                > a,
                > a:hover,
                > a:focus {
                    border-color: transparent;
                    width: 100%;
                    margin-left: -1px;
                    margin-bottom: -1px !important;
                    border-top: none;
                    padding: 10px 15px;
                    color: @dell-blue;

                }
                a:hover {
                    background: @dell-highlight-blue;
                }
                &:last-child {
                    margin-left: -1px;
                    margin-bottom: 0;
                }
            }
            > a {
                text-align: left !important;
                border: none;
                background: none;
                &:hover,
                &:focus {
                    border-color: transparent;
                    background: none;
                    color: @dell-blue;
                }
            }
        }

        &.nav-justified {
            width: 107%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }

                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }

        &.nav-centered {
            width: 107%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }

                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }
    }
}

@media (min-width: 100px) and (max-width: 520px) {
    .nav-tabs {
        display: block;
        width: 112%;
        margin-left: -15px;
        margin-right: -15px;

        > li {
            background: @white;
            width: 103%;
            border: 1px solid @nav-tabs-border-color;
            margin-bottom: -1px;
            margin-left: -1px;
            height: auto;
            padding-right: 5%;
            &:first-child {
                margin-left: -1px;
                border-top: 1px solid @nav-tabs-border-color;
            }
            &:last-child {
                margin-left: -1px;
                border-bottom: 1px solid @nav-tabs-border-color;
            }
            &:hover {
                background: @dell-highlight-blue;
                color: @dell-blue;
            }
            &.active {
                background: @white;
                border-bottom-color: transparent;
                overflow: hidden;
                > a,
                > a:hover,
                > a:focus {
                    border-color: transparent;
                    width: 100%;
                    margin-left: -1px;
                    margin-bottom: -1px !important;
                    border-top: none;
                    padding: 10px 15px;
                    color: @dell-blue;
                }
                a:hover {
                    background: @dell-highlight-blue;
                }
                &:last-child {
                    margin-left: -1px;
                    margin-bottom: 0;
                }
            }
            > a {
                text-align: left !important;
                border: none;
                background: none;
                &:hover,
                &:focus {
                    border-color: transparent;
                    background: none;
                    color: @dell-blue;
                }
            }
        }

        &.nav-justified {
            width: 112%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }
                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }

        &.nav-centered {
            width: 112%;
            margin-left: -15px;
            margin-right: -15px;
            > li {
                a {
                    border: none;
                    width: 100%;
                    margin-left: -1px;
                }
                a,
                a:hover {
                    margin-bottom: -1px;
                    border-top: none !important;
                    margin-left: -1px;
                }

                &.active > a {
                    border: none;
                    margin-left: -1px;
                    padding: 10px 15px;
                    width: 100%;

                    &:hover,
                    &:focus {
                        border: none;
                        width: 100%;
                        margin-left: -1px;
                        padding: 10px 15px;
                    }
                }
                &:first-child {
                    margin-left: -1px;
                    border-top: 1px solid @nav-tabs-border-color;
                }
                &:last-child {
                    margin-left: -1px;
                    border-bottom: 1px solid @nav-tabs-border-color;
                }
            }
        }
    }
}

.nav-tabs h4 {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.nav-center-rule {
    border-bottom: 1px solid #ccc;
    top: -11px;
    position: relative;
    z-index: -1;
}
ul.nav-center {
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

.tab-image {
    width: 100px;
    margin-top: 15px;
}

@media (max-width: @screen-md-max) {
    .tab-image {
        width: 80px;
        margin-top: 15px;
    }

}

@media (max-width: @screen-xs-max) {
    .nav-center-rule {
        border-bottom: none;
        bottom:0;
        position: relative;
    }
    .nav-center-container {
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .nav-tabs h4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .row-offcanvas-right .nav-tabs > li> a > .icon-ui-arrowright {
        float:right;
    }

    .vertical-align {
        position: relative
    }

    .vertical-align-element {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
    .vertical-align-element-carat {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 2%;
    }

    .tab-image {
        width: 90px;
        margin-right: 20px;
        margin-top: 0;
        float: left !important;
        padding-bottom: 50px;

    }

    .block-of-text {
        min-height: 120px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav div.vertical-align {
        padding-right: 25px !important;
    }

}

    /*
     * Tab Off Canvas
     * --------------------------------------------------
     */
    @media screen and (max-width: 767px) {
        .row-offcanvas {
            position: relative;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .row-offcanvas-right {
            right: 0;
            [data-toggle="offcanvas"] {
                text-align:left;
                padding: 10px;
                margin-bottom:10px;
                .icon-ui-arrowleft {
                    top: 2px;
                    position: relative;
                }
            }
        }

        .row-offcanvas-left {
            left: 0;
            [data-toggle="offcanvas"] {
                text-align:right;
                padding: 10px;
                margin-bottom:10px;
                .icon-ui-arrowright {
                    top: 2px;
                    position: relative;
                }
            }
        }
        .nav-centered > li > a > .icon-ui-arrowright {
            top: -15px;
            position: relative;
        }

        .row-offcanvas-right
        .sidebar-offcanvas {
            //        right: -50%; /* 6 columns */
            right: 108%;
            position: fixed;
            top: 0;
            width: 102%;
            left: -100%;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

        .row-offcanvas-left
        .sidebar-offcanvas {
            left: -50%; /* 6 columns */
        }

        .row-offcanvas-left .tab-content {
            position: fixed;
            top: 0;
            left: 100%;
            width: 102%;
            background: @body-bg;
            height: 3000px;
            // animation goes here
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            &.active {
                left: 0;
            }

        }

        .row-offcanvas-right .tab-content {
            position: fixed;
            top: 0;
            right: 100%;
            width: 102%;
            z-index:1000;

            // animation goes here
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            &.active {
                right: 0;
            }
            .tab-pane {
                min-height: 3000px;
                background: @body-bg;
            }
        }
        .row-offcanvas .nav-centered + .tab-content {
            top: -11px;
        }

        .row-offcanvas-left.active {
            left: 50%; /* 6 columns */
        }
        .tab-content .row {
            margin-left: 15px;
            margin-right: 15px;
        }
        .offcanvas-back-btn {
            &.well {
                height: 45px;
                padding: 5px 20px 10px 30px;
            }
            &:before, {
                color: @dell-blue;
                font-family:    'icon-ui';
                content: none !important;
                position: absolute;
                left: 30px;
                padding-top: 7px;
            }
            > .btn-link {
                text-decoration: none;
            }
            .btn {
                padding: 6px 0 !important;
            }
            [class^=icon] {
                top: 2px;
                position: relative;
            }
        }
        .tab-image {
            padding-bottom: 10px;
        }
    }

.nav-centered {
    .nav-centered();
    .nav-tabs-centered();
}

// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-centered {
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:1;

  > li {
    float: none;
    &.active {
        border-bottom-color: @body-bg;
    }
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  + .tab-content {
    border-top: 1px solid @nav-tabs-justified-link-border-color;
    position:relative;
    z-index:0;
    top: -11px;
    padding-top: 10px;
  }

  @media (min-width: @screen-sm-min) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }

  @media (max-width: @screen-xs-max) {
    > li {
        &.active {
            z-index:1;
            border-bottom-color: @dell-gray-stroke;
        }
        > a {
            padding-top:20px;
            display:table;
            cursor:pointer;

        }
    }
  }

}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-centered {
  border-bottom: 0;

  > li > a {
    // Override margin from .nav-tabs
    margin-right: 0;
    border-radius: @border-radius-base;
  }

  > .active > a,
  > .active > a:hover,
  > .active > a:focus {
    border: 1px solid @nav-tabs-justified-link-border-color;
  }

  @media (min-width: @screen-sm-min) {
    > li > a {
      //border-bottom: 1px solid @nav-tabs-justified-link-border-color;
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .active > a,
    > .active > a:hover,
    > .active > a:focus {
      border-bottom-color: @nav-tabs-justified-active-link-border-color;
    }
  }
}


just added

just added

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/'


feat(system): menu.less use less gray variable

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/artemeon/core.git/'


Versión con mySQL - Fin

Versión con mySQL - Fin

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/luisferfranco/soy.git/'


Revert "Update css to support claim"

Revert "Update css to support claim"

This reverts commit 7bb250b8a1808d29276fa6b646d9236101e3c3cc.

fatal: unable to access 'https://github.com/gryffon/ringteki.git/': The requested URL returned error: 403


add xl breakpoint classes for text align

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/aoimedia/uikit.git/'


Changed headings

Changed headings

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/mhwildeman/CollecteApp.git/'


Change text to white (it looks nicer)

Change text to white (it looks nicer)

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/TheJokersThief/AreYouDepressed-.git/'


do not scroll for screenshots if we do not have to

fatal: unable to access 'https://github.com/anaran/olympia.git/': The requested URL returned error: 403


font-size variables

font-size variables

fatal: unable to access 'https://github.com/leedorian/bootCommerce.git/': The requested URL returned error: 403


removed because I changed the way to import fonts


Add lazyloaded background image

Add lazyloaded background image

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/a25kk/ck.git/'


Add fluid container variation

Add fluid container variation

/*!
 * # Semantic UI - Container
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

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

@type    : 'element';
@element : 'container';

@import (multiple) '../../theme.config';

& {

/*******************************
            Container
*******************************/

.ui.container {
  display: block;
  max-width: @maxWidth !important;
}

@media only screen and (max-width: @largestMobileScreen) {
  .ui.container {
    width: @mobileWidth;
    margin-left: @mobileGutter !important;
    margin-right: @mobileGutter !important;
  }
  .ui.grid.container {
    width: @mobileGridWidth !important;
  }
}
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
  .ui.container {
    width: @tabletWidth;
    margin-left: @tabletGutter !important;
    margin-right: @tabletGutter !important;
  }
  .ui.grid.container {
    width: @tabletGridWidth !important;
  }
}
@media only screen and (min-width: @smallMonitorBreakpoint) and (max-width: @largeMonitorBreakpoint) {
  .ui.container {
    width: @smallMonitorWidth;
    margin-left: @smallMonitorGutter !important;
    margin-right: @smallMonitorGutter !important;
  }
  .ui.grid.container {
    width: @smallMonitorGridWidth !important;
  }
}
@media only screen and (min-width: @largeMonitorBreakpoint) {
  .ui.container {
    width: @largeMonitorWidth;
    margin-left: @largeMonitorGutter !important;
    margin-right: @largeMonitorGutter !important;
  }
  .ui.grid.container {
    width: @largeMonitorGridWidth !important;
  }
}

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

/* Text Container */
.ui.text.container {
  font-family: @textFontFamily;
  max-width: @textWidth !important;
  line-height: @textLineHeight;
}

.ui.text.container {
  font-size: @textSize;
}

/* Fluid */
.ui.fluid.container {
  width: 100%;
}

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

.ui[class*="left aligned"].container {
  text-align: left;
}
.ui[class*="center aligned"].container {
  text-align: center;
}
.ui[class*="right aligned"].container {
  text-align: right;
}

}

/*!
 * # Semantic UI - Container
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

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

@type    : 'element';
@element : 'container';

@import (multiple) '../../theme.config';

& {

/*******************************
            Container
*******************************/

.ui.container {
  display: block;
  max-width: @maxWidth !important;
}

@media only screen and (max-width: @largestMobileScreen) {
  .ui.container {
    width: @mobileWidth;
    margin-left: @mobileGutter !important;
    margin-right: @mobileGutter !important;
  }
  .ui.grid.container {
    width: @mobileGridWidth !important;
  }
}
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
  .ui.container {
    width: @tabletWidth;
    margin-left: @tabletGutter !important;
    margin-right: @tabletGutter !important;
  }
  .ui.grid.container {
    width: @tabletGridWidth !important;
  }
}
@media only screen and (min-width: @smallMonitorBreakpoint) and (max-width: @largeMonitorBreakpoint) {
  .ui.container {
    width: @smallMonitorWidth;
    margin-left: @smallMonitorGutter !important;
    margin-right: @smallMonitorGutter !important;
  }
  .ui.grid.container {
    width: @smallMonitorGridWidth !important;
  }
}
@media only screen and (min-width: @largeMonitorBreakpoint) {
  .ui.container {
    width: @largeMonitorWidth;
    margin-left: @largeMonitorGutter !important;
    margin-right: @largeMonitorGutter !important;
  }
  .ui.grid.container {
    width: @largeMonitorGridWidth !important;
  }
}

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

.ui.text.container {
  font-family: @textFontFamily;
  max-width: @textWidth !important;
  line-height: @textLineHeight;
}

.ui.text.container {
  font-size: @textSize;
}

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

.ui[class*="left aligned"].container {
  text-align: left;
}
.ui[class*="center aligned"].container {
  text-align: center;
}
.ui[class*="right aligned"].container {
  text-align: right;
}

}


correcting sidebar image widget margins

correcting sidebar image widget margins

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/lukesmmr/piracanga.git/'


adjusting the audio player height slightly

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


Styles

Styles

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/Digipalvelutehdas/APIKA.git/'


Signed-off-by: Ge-yuan-jun <daydaygyj@gmail.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/'


updated autocomplete style

updated autocomplete style

@import url(src/css/core/global.less);

.form-search {
	margin: 0 5px 0 0;
	position: relative;
	.form-group {
		background-color: @input-bg;
		border-radius: 3px;

		> div {
			float: left !important;
		}
	}
	input.form-control {
		width: 25rem;
		border: none;
		box-shadow: none;
	}
	.btn-submit {
		padding: 3px 7px;
		color: @navbar-default-link-active-color;
	}

	.dropdown-menu {
		box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 8px 0px;
		transform: translatey(0rem);
		max-height: none;
		background-color: white;
		opacity: 1;
		> li.active a {
			color: @inverse;
		}
		> li a {
			color: #444;
			line-height: 3;
		}
	}
}

@media (min-width: 320px) {
	.form-search {
		.btn-submit {
			position: absolute;
			right: 5px;
			top: 8px;
		}
	}
}
@media (min-width: 460px) {
	.form-search {
		input.form-control {
			display: inline-block;
		}
		.btn-submit {
			position: relative;
			top: auto;
			right: auto;
		}
	}
}

@import url(src/css/core/global.less);

.form-search {
	margin: 0 5px 0 0;
	position: relative;
	.form-group {
		background-color: @input-bg;
		border-radius: 3px;

		> div {
			float: left !important;
		}
	}
	input.form-control {
		width: 25rem;
		border: none;
		box-shadow: none;
	}
	.btn-submit {
		padding: 3px 7px;
		color: @navbar-default-link-active-color;
	}

	.dropdown-menu {
		box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 8px 0px;
		transform: translatey(0rem);
		max-height: none;
		background-color: white;
		opacity: 1;

		> li a {
			color: #444;

		}
	}
}

@media (min-width: 320px) {
	.form-search {
		.btn-submit {
			position: absolute;
			right: 5px;
			top: 8px;
		}
	}
}
@media (min-width: 460px) {
	.form-search {
		input.form-control {
			display: inline-block;
		}
		.btn-submit {
			position: relative;
			top: auto;
			right: auto;
		}
	}
}


we do not need letterbox for video thumbs

@import 'lib';

@text-gray: #424f5a;
@link: #2d87ca;

h1 .num {
    color: @orange;
    font-size: 16px;
    vertical-align: top;
}

.checkmark {
    display: block;
    color: @black;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    &:before {
        .border-radius(10px);
        background-color: @green;
        color: @white;
        content: "\2714";  /* checkmark */
        display: inline-block;
        font-weight: normal;
        height: 20px;
        line-height: 18px;
        margin-right: 7px;
        position: relative;
        text-align: center;
        width: 20px;
    }
    &.purchased {
        &:before {
            content: "$";
        }
    }
    &.installed {
        &:before {
            background: url(../../img/mkt/icons/disk.png) 50% 50% no-repeat;
            .border-radius(0);
            content: "\00a0";
        }
    }
}

.listing .purchased {
    margin-bottom: 10px;
}

.actions {
    .button {
        position: relative;
        z-index: 1;
    }
    .faked-purchase,
    .approval {
        .border-radius(0 0 5px 5px);
        color: @black;
        display: block;
        margin-top: -5px;
        padding: 15px 15px 10px;
        position: relative;
        z-index: 0;
    }
    .noApps {
        text-align: center;
        margin-top: 10px;
        a {
            background: url(../../img/mkt/icons/nightly.png) 5px 0 no-repeat;
            padding: 0 5px 0 30px;
        }
    }
    .faked-purchase.vitals {
        .border-radius(0 0 0 0);
        background: fadeOut(@red, 90%);
        font-size: 11px;
        font-weight: 600;
        float: none;
        margin-left: 0;
        text-align: center;
    }
    .approval {
        background: fadeOut(@green, 90%);
    }
    .faked-purchase + .approval {
        margin-top: -10px;
        padding-top: 10px;
    }
}

.product-details + #product-status {
    margin-top: 24px;
}

#upsell {
    background: @yellow;
    margin-top: 30px;
    h3 {
        color: darken(@yellow, 75%);
        margin-bottom: 10px;
    }
    .upsell, .prose, .vitals {
        padding-left: 86px;
        width: 75%;
    }
    .upsell {
        .ellipsis;
        display: block;
        float: left;
        font-weight: 200;
        font-size: 21px;
        min-height: 35px;
        line-height: 32px;
        position: relative;
    }
    .special {
        .border-box;
        display: block;
        float: right;
        max-width: 20%;
    }
    .icon {
        display: block;
        margin-right: 15px;
        position: absolute;
        left: 0;
        top: 0;
        vertical-align: top;
    }
    .prose {
        color: @medium-gray;
        margin-bottom: 10px;
    }
}

.html-rtl #upsell {
    h3, .upsell, .prose, .vitals {
        padding: 0 45px 0 0;
    }
    .upsell {
        float: right;
    }
    .special {
        float: left;
    }
    .icon {
        margin: 0 0 0 15px;
        right: 0;
        left: auto;
    }
}

.visual {
    float: left;
    max-width: 128px;
    max-height: 128px;
    img {
        max-width: 128px;
        max-height: 128px;
    }
}

.product-details {
    font-size: 14px;
    text-shadow: 0 1px 0 @white;
    .icon {
        .max-width(2);
    }
    .actions {
        .min-width(3);
        .max-width(4);
        float: right;
        margin-bottom: 16px;
        .button {
            display: block;
        }
    }
    .vitals {
        float: left;
        margin-left: 22px;
        .max-width(9);
        h1 {
            font-size: 32px;
            font-weight: 100;
            margin: 0 0 0 -1px;
        }
        .authors {
            font-weight: normal;
            font-size: 14px;
            margin-top: 7px;
        }
        .pricetag, .cats {
            &:after {
                color: @note-gray;
                content: "\00B7";
                margin-left: 3px;
                padding-right: 3px;
            }
        }
        .price {
            text-shadow: 0 1px 0 @black;
            &:after {
                text-shadow: 0 1px 0 @white;
            }
        }
        p {
            display: inline-block;
            margin: 10px 0 5px;
        }
    }
}

.previews {
    ul {
        white-space: nowrap;
        padding: 0;
        text-align: center;
    }
    li {
        list-style-type: none;
        display: inline-block;
        margin: 0;
        padding: 0;
        a {
            .border-box;
            .border-radius(3px);
            .box-shadow(0 1px 2px @medium-gray);
            background: @faint-gray;
            display: block;
            height: 120px;
            padding: 8px;
            position: relative;
            margin: 0 16px;
            width: 120px;
            &:hover {
                .box-shadow(0 1px 2px @dark-gray);
            }
            &:after {
                background-image: url(../../img/mkt/icons/zoom.png);
                opacity: .9;
                bottom: 10px;
                top: auto;
            }
            .img {
                background-position: 50% 50%;
                background-repeat: no-repeat;
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                max-height: 120px;
                max-width: 120px;
                text-align: center;
            }
            &.video {
                &:before,
                .img {
                    .transition-property(~'opacity, visibility');
                    .transition-duration(.3s);
                }
                &:before {
                    background: url(../../img/mkt/icons/video.png) 50% 50% no-repeat;
                    content: "";
                    display: block;
                    height: 100%;
                    opacity: .9;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    width: 100%;
                }
                .img {
                    opacity: .8;
                }
                &:hover {
                    .img {
                        opacity: 1;
                    }
                    &:before {
                        opacity: 0;
                        visibility: hidden;
                    }
                }
            }
        }
    }
    &.slider {
        border-top: 1px solid #a0a4a7;
        border-bottom: 1px solid #babec0;
        .gradient-two-color(rgba(203, 210, 214, .33), rgba(216, 221, 223, .33))
    }
}

.description {
    clear: both;
    color: @text-gray;
    padding: 15px 30px 15px 0;
    p {
        .max-width(14);
        font-size: 14px;
    }
    .more {
        display: block;
        + h3 {
            font-size: 18px;
            line-height: 20px;
            margin: 15px 0 5px;
        }
    }
    .collapse {
        display: none;
        &.show {
            display: block;
        }
    }
    a.collapse.wide {
        .transition(~'.2s opacity');
        background: url(../../img/mkt/arrows/collapse.png) no-repeat 100% 50%;
        display: block;
        float: right;
        height: 8px;
        margin-right: -30px;
        padding: 20px 0;
        opacity: .7;
        outline: none;
        text-indent: -9999px;
        width: 30px;
        &:hover,
        &.expanded {
            opacity: 1;
        }
        &.expanded {
            .transform(~'scaleY(-1)');
        }
    }
}

.developer-comments {
    margin-bottom: 10px;
}

.support {
    font-size: 14px;
    .average-rating {
        .fat-button;
        .width(4);
        margin: 10px 0;
    }
    .overall-reviews {
        text-align: left;
        &:hover {
            span {
                color: darken(@green, 5%);
                text-decoration: none;
            }
        }
    }
    a, time {
        display: inline-block;
        padding: 5px 20px 5px 0;
    }
    ul {
        margin: 0;
        list-style-type: none;
        padding: 0;
    }
    li {
        .width(7);
        float: left;
        margin-bottom: 10px;
        min-height: 100px;
    }
    h3 {
        font-size: 22px;
    }
    p {
        margin: 0;
    }
}

.html-rtl .support {
    p a, time {
        padding: 5px 0 5px 20px;
    }
}

// This should go everywhere mozApps.install() is possible.
#install-error section {
    height: 20%;
    text-align: center;
    h3 {
        font-weight: bold;
    }
}

#preapproval-shortcut {
    margin: 0;
}

// Slider next/prev page controls are smaller here.
.alt-slider .controls a {
    height: 120px;
}

// Anything larger than mobile.
@media (min-width: @4col) {
    #reviews {
        margin: 40px 0 20px;
    }
    .support li {
        margin-top: 20px;
    }
    .not-rated {
        font-size: 16px;
    }
    .support {
        p a.arrow:after {
            background-image: url(../../img/mkt/arrows/support.png);
            background-position: 100% 0;
            right: 0;
            top: 8px;
        }
    }
}

@media (max-width: @7col) {
    .support li {
        .width(2);
    }
}

@media (max-width: @4col) {
    #page > .description {
        border-width: 1px 0;
        padding: 10px;
        .summary {
            margin: 0 0 5px;
            max-width: 100%;
            width: 100%;
        }
        .show .more {
            margin-top: 15px;
        }
        a.collapse.narrow {
            .transition(none);
            display: block;
            font-size: 13px;
            font-weight: bold;
            opacity: .9;
            text-align: right;
            &:hover,
            &.expanded {
                opacity: 1;
            }
            &.expanded {
                display: none;
                .transform(none);
            }
        }
    }
    #upsell.narrow {
        .highlight;
        margin: 20px 10px 0;
        padding: 10px 33px 10px 52px;
        position: relative;
        &:after {
            background: @arrow-src 100% 50% no-repeat;
            content: "";
            display: block;
            height: 14px;
            opacity: .8;
            position: absolute;
            top: 20px;
            right: 10px;
            width: 13px;
        }
        .avail, .name, .icon {
            opacity: .85;
        }
        &:hover {
            border-color: @bg-gray;
            text-decoration: none;
            &:after, .avail, .name, .icon {
                opacity: 1;
            }
        }
        .avail, .name {
            .ellipsis;
            display: block;
        }
        .avail {
            color: @green;
            font-weight: 400;
            line-height: 12px;
            margin-bottom: -4px;
            padding-bottom: 5px;
        }
        .name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: -4px;
            padding-bottom: 0;
        }
        .icon {
            top: 10px;
            left: 10px;
            max-height: 32px;
            max-width: 32px;
        }
    }
    .downloads {
        font-size: 12px;
    }
    .product-details {
        .visual {
            margin: 0 10px 10px 0;
        }
        .vitals,
        .actions {
            float: none;
            width: 100%;
        }
        .actions {
            clear: both;
            margin: 10px auto;
            max-width: 100%;
            width: 100%;
            .button {
                .border-box;
                .border-radius(4px);
                font-size: 14px;
                width: 50%;
                &.product {
                    height: 38px;
                    line-height: 37px;
                    &:hover {
                        line-height: 33px;
                    }
                    &:active, &.purchasing, &.installing {
                        line-height: 39px;
                    }
                }
            }
            .purchased {
                display: none;
            }
            .checkmark {
                .border-box;
                background: none;
                margin-top: -45px;
                pointer-events: none;
                z-index: 1;
                width: 50%;
                &:before {
                    background-color: lighten(@green, 10%);
                    .box-shadow(0 1px 1px @btn-b-dark,
                                inset 0 1px 1px rgba(0,0,0,.7));
                }
                b {
                    display: block;
                    .hidetext;
                }
            }
            .install, .disabled {
                + .checkmark {
                    display: none;
                }
            }
        }
        .vitals {
            margin: 0;
            height: 64px;
            max-width: 100%;
            position: relative;
            h1, .authors, .downloads {
                .ellipsis;
            }
            h1 {
                font-size: 21px;
                font-weight: 400;
                line-height: 24px;
                padding-bottom: 4px;
            }
            .authors {
                color: @medium-gray;
                font-weight: 400;
                margin: 0;
                padding-bottom: 2px;
            }
            .device-list {
                position: absolute;
                right: 0;
                bottom: -47px;
                width: 105px;
            }
            .pricetag {
                display: none;
            }
            p {
                display: block;
                float: left;
                margin: 0;
            }
        }
    }
    #add-first-review {
        display: none;
    }
    .support {
        .not-rated,
        .average-rating {
            margin: 20px 0 10px;
        }
        .not-rated {
            color: @medium-gray;
        }
        .average-rating {
            width: 100%;
        }
        a {
            .fat-button;
        }
        li {
            .border-box;
            float: left;
            margin: 10px 0 0;
            min-height: inherit;
            padding-right: 5px;
            width: 50%;
            &:nth-child(2n) {
                padding: 0 0 0 5px;
            }
        }
        dl {
            margin: 15px 0 0;
        }
        dt, dd {
            color: @text;
            display: inline-block;
        }
        dt {
            margin-right: 5px;
        }
    }
    .previews.slider {
        background: @grain-src darken(@light-gray, 0%);
        .box-shadow(inset 0 2px 4px rgba(0,0,0,.2));
        border-top-color: @note-gray;
        border-bottom-color: @barely-gray;
    }
}

@import 'lib';

@text-gray: #424f5a;
@link: #2d87ca;

h1 .num {
    color: @orange;
    font-size: 16px;
    vertical-align: top;
}

.checkmark {
    display: block;
    color: @black;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    &:before {
        .border-radius(10px);
        background-color: @green;
        color: @white;
        content: "\2714";  /* checkmark */
        display: inline-block;
        font-weight: normal;
        height: 20px;
        line-height: 18px;
        margin-right: 7px;
        position: relative;
        text-align: center;
        width: 20px;
    }
    &.purchased {
        &:before {
            content: "$";
        }
    }
    &.installed {
        &:before {
            background: url(../../img/mkt/icons/disk.png) 50% 50% no-repeat;
            .border-radius(0);
            content: "\00a0";
        }
    }
}

.listing .purchased {
    margin-bottom: 10px;
}

.actions {
    .button {
        position: relative;
        z-index: 1;
    }
    .faked-purchase,
    .approval {
        .border-radius(0 0 5px 5px);
        color: @black;
        display: block;
        margin-top: -5px;
        padding: 15px 15px 10px;
        position: relative;
        z-index: 0;
    }
    .noApps {
        text-align: center;
        margin-top: 10px;
        a {
            background: url(../../img/mkt/icons/nightly.png) 5px 0 no-repeat;
            padding: 0 5px 0 30px;
        }
    }
    .faked-purchase.vitals {
        .border-radius(0 0 0 0);
        background: fadeOut(@red, 90%);
        font-size: 11px;
        font-weight: 600;
        float: none;
        margin-left: 0;
        text-align: center;
    }
    .approval {
        background: fadeOut(@green, 90%);
    }
    .faked-purchase + .approval {
        margin-top: -10px;
        padding-top: 10px;
    }
}

.product-details + #product-status {
    margin-top: 24px;
}

#upsell {
    background: @yellow;
    margin-top: 30px;
    h3 {
        color: darken(@yellow, 75%);
        margin-bottom: 10px;
    }
    .upsell, .prose, .vitals {
        padding-left: 86px;
        width: 75%;
    }
    .upsell {
        .ellipsis;
        display: block;
        float: left;
        font-weight: 200;
        font-size: 21px;
        min-height: 35px;
        line-height: 32px;
        position: relative;
    }
    .special {
        .border-box;
        display: block;
        float: right;
        max-width: 20%;
    }
    .icon {
        display: block;
        margin-right: 15px;
        position: absolute;
        left: 0;
        top: 0;
        vertical-align: top;
    }
    .prose {
        color: @medium-gray;
        margin-bottom: 10px;
    }
}

.html-rtl #upsell {
    h3, .upsell, .prose, .vitals {
        padding: 0 45px 0 0;
    }
    .upsell {
        float: right;
    }
    .special {
        float: left;
    }
    .icon {
        margin: 0 0 0 15px;
        right: 0;
        left: auto;
    }
}

.visual {
    float: left;
    max-width: 128px;
    max-height: 128px;
    img {
        max-width: 128px;
        max-height: 128px;
    }
}

.product-details {
    font-size: 14px;
    text-shadow: 0 1px 0 @white;
    .icon {
        .max-width(2);
    }
    .actions {
        .min-width(3);
        .max-width(4);
        float: right;
        margin-bottom: 16px;
        .button {
            display: block;
        }
    }
    .vitals {
        float: left;
        margin-left: 22px;
        .max-width(9);
        h1 {
            font-size: 32px;
            font-weight: 100;
            margin: 0 0 0 -1px;
        }
        .authors {
            font-weight: normal;
            font-size: 14px;
            margin-top: 7px;
        }
        .pricetag, .cats {
            &:after {
                color: @note-gray;
                content: "\00B7";
                margin-left: 3px;
                padding-right: 3px;
            }
        }
        .price {
            text-shadow: 0 1px 0 @black;
            &:after {
                text-shadow: 0 1px 0 @white;
            }
        }
        p {
            display: inline-block;
            margin: 10px 0 5px;
        }
    }
}

.previews {
    ul {
        white-space: nowrap;
        padding: 0;
        text-align: center;
    }
    li {
        list-style-type: none;
        display: inline-block;
        margin: 0;
        padding: 0;
        a {
            .border-box;
            .border-radius(3px);
            .box-shadow(0 1px 2px @medium-gray);
            background: @faint-gray;
            display: block;
            height: 120px;
            padding: 8px;
            position: relative;
            margin: 0 16px;
            width: 120px;
            &:hover {
                .box-shadow(0 1px 2px @dark-gray);
            }
            &:after {
                background-image: url(../../img/mkt/icons/zoom.png);
                opacity: .9;
                bottom: 10px;
                top: auto;
            }
            .img {
                background-position: 50% 50%;
                background-repeat: no-repeat;
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                max-height: 120px;
                max-width: 120px;
                text-align: center;
            }
            &.video {
                background: @black;
                &:before,
                .img {
                    .transition-property(~'opacity, visibility');
                    .transition-duration(.3s);
                }
                &:before {
                    background: url(../../img/mkt/icons/video.png) 50% 50% no-repeat;
                    content: "";
                    display: block;
                    height: 100%;
                    opacity: .9;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    width: 100%;
                }
                .img {
                    opacity: .8;
                }
                &:hover {
                    .img {
                        opacity: 1;
                    }
                    &:before {
                        opacity: 0;
                        visibility: hidden;
                    }
                }
            }
        }
    }
    &.slider {
        border-top: 1px solid #a0a4a7;
        border-bottom: 1px solid #babec0;
        .gradient-two-color(rgba(203, 210, 214, .33), rgba(216, 221, 223, .33))
    }
}

.description {
    clear: both;
    color: @text-gray;
    padding: 15px 30px 15px 0;
    p {
        .max-width(14);
        font-size: 14px;
    }
    .more {
        display: block;
        + h3 {
            font-size: 18px;
            line-height: 20px;
            margin: 15px 0 5px;
        }
    }
    .collapse {
        display: none;
        &.show {
            display: block;
        }
    }
    a.collapse.wide {
        .transition(~'.2s opacity');
        background: url(../../img/mkt/arrows/collapse.png) no-repeat 100% 50%;
        display: block;
        float: right;
        height: 8px;
        margin-right: -30px;
        padding: 20px 0;
        opacity: .7;
        outline: none;
        text-indent: -9999px;
        width: 30px;
        &:hover,
        &.expanded {
            opacity: 1;
        }
        &.expanded {
            .transform(~'scaleY(-1)');
        }
    }
}

.developer-comments {
    margin-bottom: 10px;
}

.support {
    font-size: 14px;
    .average-rating {
        .fat-button;
        .width(4);
        margin: 10px 0;
    }
    .overall-reviews {
        text-align: left;
        &:hover {
            span {
                color: darken(@green, 5%);
                text-decoration: none;
            }
        }
    }
    a, time {
        display: inline-block;
        padding: 5px 20px 5px 0;
    }
    ul {
        margin: 0;
        list-style-type: none;
        padding: 0;
    }
    li {
        .width(7);
        float: left;
        margin-bottom: 10px;
        min-height: 100px;
    }
    h3 {
        font-size: 22px;
    }
    p {
        margin: 0;
    }
}

.html-rtl .support {
    p a, time {
        padding: 5px 0 5px 20px;
    }
}

// This should go everywhere mozApps.install() is possible.
#install-error section {
    height: 20%;
    text-align: center;
    h3 {
        font-weight: bold;
    }
}

#preapproval-shortcut {
    margin: 0;
}

// Slider next/prev page controls are smaller here.
.alt-slider .controls a {
    height: 120px;
}

// Anything larger than mobile.
@media (min-width: @4col) {
    #reviews {
        margin: 40px 0 20px;
    }
    .support li {
        margin-top: 20px;
    }
    .not-rated {
        font-size: 16px;
    }
    .support {
        p a.arrow:after {
            background-image: url(../../img/mkt/arrows/support.png);
            background-position: 100% 0;
            right: 0;
            top: 8px;
        }
    }
}

@media (max-width: @7col) {
    .support li {
        .width(2);
    }
}

@media (max-width: @4col) {
    #page > .description {
        border-width: 1px 0;
        padding: 10px;
        .summary {
            margin: 0 0 5px;
            max-width: 100%;
            width: 100%;
        }
        .show .more {
            margin-top: 15px;
        }
        a.collapse.narrow {
            .transition(none);
            display: block;
            font-size: 13px;
            font-weight: bold;
            opacity: .9;
            text-align: right;
            &:hover,
            &.expanded {
                opacity: 1;
            }
            &.expanded {
                display: none;
                .transform(none);
            }
        }
    }
    #upsell.narrow {
        .highlight;
        margin: 20px 10px 0;
        padding: 10px 33px 10px 52px;
        position: relative;
        &:after {
            background: @arrow-src 100% 50% no-repeat;
            content: "";
            display: block;
            height: 14px;
            opacity: .8;
            position: absolute;
            top: 20px;
            right: 10px;
            width: 13px;
        }
        .avail, .name, .icon {
            opacity: .85;
        }
        &:hover {
            border-color: @bg-gray;
            text-decoration: none;
            &:after, .avail, .name, .icon {
                opacity: 1;
            }
        }
        .avail, .name {
            .ellipsis;
            display: block;
        }
        .avail {
            color: @green;
            font-weight: 400;
            line-height: 12px;
            margin-bottom: -4px;
            padding-bottom: 5px;
        }
        .name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: -4px;
            padding-bottom: 0;
        }
        .icon {
            top: 10px;
            left: 10px;
            max-height: 32px;
            max-width: 32px;
        }
    }
    .downloads {
        font-size: 12px;
    }
    .product-details {
        .visual {
            margin: 0 10px 10px 0;
        }
        .vitals,
        .actions {
            float: none;
            width: 100%;
        }
        .actions {
            clear: both;
            margin: 10px auto;
            max-width: 100%;
            width: 100%;
            .button {
                .border-box;
                .border-radius(4px);
                font-size: 14px;
                width: 50%;
                &.product {
                    height: 38px;
                    line-height: 37px;
                    &:hover {
                        line-height: 33px;
                    }
                    &:active, &.purchasing, &.installing {
                        line-height: 39px;
                    }
                }
            }
            .purchased {
                display: none;
            }
            .checkmark {
                .border-box;
                background: none;
                margin-top: -45px;
                pointer-events: none;
                z-index: 1;
                width: 50%;
                &:before {
                    background-color: lighten(@green, 10%);
                    .box-shadow(0 1px 1px @btn-b-dark,
                                inset 0 1px 1px rgba(0,0,0,.7));
                }
                b {
                    display: block;
                    .hidetext;
                }
            }
            .install, .disabled {
                + .checkmark {
                    display: none;
                }
            }
        }
        .vitals {
            margin: 0;
            height: 64px;
            max-width: 100%;
            position: relative;
            h1, .authors, .downloads {
                .ellipsis;
            }
            h1 {
                font-size: 21px;
                font-weight: 400;
                line-height: 24px;
                padding-bottom: 4px;
            }
            .authors {
                color: @medium-gray;
                font-weight: 400;
                margin: 0;
                padding-bottom: 2px;
            }
            .device-list {
                position: absolute;
                right: 0;
                bottom: -47px;
                width: 105px;
            }
            .pricetag {
                display: none;
            }
            p {
                display: block;
                float: left;
                margin: 0;
            }
        }
    }
    #add-first-review {
        display: none;
    }
    .support {
        .not-rated,
        .average-rating {
            margin: 20px 0 10px;
        }
        .not-rated {
            color: @medium-gray;
        }
        .average-rating {
            width: 100%;
        }
        a {
            .fat-button;
        }
        li {
            .border-box;
            float: left;
            margin: 10px 0 0;
            min-height: inherit;
            padding-right: 5px;
            width: 50%;
            &:nth-child(2n) {
                padding: 0 0 0 5px;
            }
        }
        dl {
            margin: 15px 0 0;
        }
        dt, dd {
            color: @text;
            display: inline-block;
        }
        dt {
            margin-right: 5px;
        }
    }
    .previews.slider {
        background: @grain-src darken(@light-gray, 0%);
        .box-shadow(inset 0 2px 4px rgba(0,0,0,.2));
        border-top-color: @note-gray;
        border-bottom-color: @barely-gray;
    }
}


signPageless

signPageless

body {
  background: #ffffff;
}

#wrap1{
  #header {
    width: 27%;
    min-width: 366px;
    height: 40px;
    margin: 0 auto;
    margin-top: 150px;
    display: flex;
    flex-wrap: wrap;

    #span1 {
      display: block;
      width: 50%;
      font-size: 30px;
      line-height: 40px;
      font-family: myfont2;
      color: #434343;
    }

    #span2 {
      display: block;
      width: 50%;
      font-size: 24px;
      line-height: 40px;
      text-align: right;
      font-family: myfont3;
      color: #434343;
    }
  }
}

#SignIn {
  width: 27%;
  min-width: 366px;
  padding: 30px;
  margin: 0 auto;
  background-color: #ffffff;
  border: gray 1px ridge;

  input {
    width: 358px;
    height: 36px;
    background-color: #fafafa;
    border: #CCC 1px solid;
    padding: 4px;
    margin-bottom: 30px;
    border-radius: 4px;
    font-size: 22px;
  }
  #button {
    width: 366px;
    display: block;
    padding: 9px 14px;
    border-radius: 5px;
    background-color: #6fb98a;
    min-height: 20px;
    color: #ffffff;
    font-size: 14px;
    font-family: myfont1;
    line-height: normal;
    margin-top: 10px;
    margin-bottom: 45px;
  }
  #mail {
    font-family: myfont1;
    color: #434343;
    font-size: 14px;
  }
  #password {
    display: block;
    float: left;
    font-family: myfont1;
    font-size: 14px;
  }
  #forget {
    color: #85c9c0;
    text-decoration: none;
    display: block;
    font-family: myfont1;
    float: right;
    font-size: 12px;
  }
  #footer {
    width: 180px;
    float: right;
    font-family: myfont1;
    font-size: 14px;

    a {
      color: #85c9c0;
      text-decoration: none;
    }
  }
}

#wrap2{
  #header {
    width: 27%;
    min-width: 366px;
    height: 40px;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;

    #span1 {
      display: block;
      width: 50%;
      font-size: 30px;
      line-height: 40px;
      font-family: myfont2;
      color: #434343;
    }

    #span2 {
      display: block;
      width: 50%;
      font-size: 24px;
      line-height: 40px;
      text-align: right;
      font-family: myfont3;
      color: #434343;
    }
  }
}

#SignUp {
  width: 366px;
  height: 520px;
  background-color: #ffffff;
  border: gray 1px ridge;
  padding: 30px;
  margin: 3px auto;

  .signup {
    display: block;
    font-family: myfont1;
    float: left;
    color: #434343;
    font-size: 14px;
  }
  input {
    width: 366px;
    height: 30px;
    background-color: #fafafa;
    padding: 4px;
    border: #CCC 1px solid;
    border-radius: 4px;
    margin-bottom: 25px;
    font-size: 17px;
  }
  #button {
    width: 374px;
    min-height: 30px;
    display: block;
    padding: 9px 14px;
    border-radius: 5px;
    background-color: #6fb98a;
    color: #ffffff;
    font-size: 14px;
    font-family: myfont1;
    line-height: normal;
    margin-bottom: 40px;
  }
}

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