delete space

delete space

Signed-off-by: samcome <2f2b24732de0cc8b60252b5746fb9a719bc74d7b@me.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/samcome/samcome.github.io.git/'


Only capitalize breadcrumb heading types

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


Update static/vendors/bootstrap/less/labels.less

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

//
// Labels
// --------------------------------------------------

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: @label-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;

  // Add hover effects, but only for links
  a& {
    &:hover,
    &:focus {
      color: @label-link-hover-color;
      text-decoration: none;
      cursor: pointer;
    }
  }

  // Empty labels collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Quick fix for labels in buttons
  .btn & {
    position: relative;
    top: -1px;
  }
}

// Colors
// Contextual variations (linked labels get darker on :hover)

.label-default {
  .label-variant(@label-default-bg);
}

.label-primary {
  .label-variant(@label-primary-bg);
}

.label-success {
  .label-variant(@label-success-bg);
}

.label-info {
  .label-variant(@label-info-bg);
}

.label-warning {
  .label-variant(@label-warning-bg);
}

.label-danger {
  .label-variant(@label-danger-bg);
}

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


Update static/vendors/bootstrap/less/pager.less

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

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


fixed blurry icons in Firefox

fixed blurry icons in Firefox

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


Styling of templates dropdown.

Styling of templates dropdown.

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


adding global style variables

adding global style variables

// Background color for `<body>`
@body-bg: #f9f9f9;
// Global text color on `<body>`
@text-color: #484848;
// Global textual link color
@link-color: #c05b4d;
// Global font size
@font-size: 1.0em;

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


remove issue

remove issue


Remove the default (red) color on code blocks.

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

/* Brackets patterns (and overrides and re-definitions of Bootstrap patterns)
 *
 * This file should contain all _reusable_ UI elements / LESS definitions
 * That is, things that will either a.) be used for more than one element or
 * b.) exist in multiple versions of brackets (e.g. App, In-Browser, etc.)
 *
 * Note that if you want a UI element to be themeable, you should put the
 * themeable part in "brackets_theme_default" as variables/mixins.
 *
 */

.panel {
    .vbox;
    .box-flex(1);

    padding: 0;
    margin: 0;

    background: @project-panel-base-color url("images/propertiespanel_back.png") repeat-x 0 0;
    color: #bbb;
    letter-spacing: .01em;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
}

/* Toolbar-related styles */

/* Simple toolbar layout (project panel, find in files, etc.)
   We don't set this directly on .toolbar because it'd be a pain to override all the pieces
   if other code (e.g. #main-toolbar) wants to do a different layout */
.simple-toolbar-layout.toolbar {
    .hbox;
    .box-align(center);
    overflow: hidden;

    .title-wrapper {
        /* This is necessary because text-overflow: ellipsis doesn't work when it's set
           directly on a flexing box in Chrome currently. */
        .box-flex(1);
    }
    .buttons {
        .hbox;
        margin-left: 4px;
    }
}

/* Horizontal titlebar/menubar (in-browser only)

   CSS hack based on this code: http://jsfiddle.net/cD657/3/ (via StackOverflow)
   This center-aligns the title across the full width of the toolbar (ignoring the width of the nav floated
   left and buttons floated right), yet still have the browser automatically wrap the floats onto a 2nd row
   if they collide with the title. But the centered content must be a block element with fixed width. Since
   the editor title (filename) varies in width, we rely on JS code to update the width whenever the string
   changes.

   Another wrinkle: wrapping to/from the two-line toolbar layout requires notifying the CodeMirror editor that
   its height changed. Currently, we assume this can ONLY happen in two cases:
    - the window resizes (handled by general listener in EditorManager)
    - title content changes (the same JS code that sets .title-wrapper's fixed width is expected to handle this)
*/
#titlebar {
    // Visible only in-browser
    body.in-appshell & {
        display: none;
    }

    text-align: center;
    .nav {  // menubar
        float: left;
        text-align: left;
    }
    .title {
        float: none;
        display: inline;  // must be an inline for JS to measure text size
    }
    .title-wrapper {
        margin: 0 auto;
        display: block;  // must be a block for the fixed width applied by JS to be respected
        // width set in px is appled/updated by JavaScript in DocumentCommandHandlers
    }
}

/* Vertical icon toolbar on right */
#main-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    width: @main-toolbar-width;
    height: 100%;
    box-sizing: border-box;

    background: @main-toolbar-background-color;
    padding: 5px 0px;

    // Ensure icons are vertically stacked & horizontally centered
    .vbox;
    .box-flex(1);
    text-align: center;

    .buttons {
        text-align: center;
        margin: 0;

        > a {
            margin: 5px 0px 5px 0px;
            padding: 0 !important;
            position: static !important;
            top: 0 !important;
            left: 0 !important;
        }

        > a:active {
            opacity: 0.5;
        }
    }
}

/* Toolbar appearance - shared by all toolbars, independent of layout */

@toolbar-top-gap-px: 5px;

.toolbar {
    font-size: @label-font-size;
    padding: 4px 8px;
    background-color: @bc-white;
    color: @bc-black;

    position: relative;  // needed for abs-positioned elements in toolbar (e.g. right-aligned "X")

    .title-wrapper {
        // Title is taller than menu text, so reduce top padding to keep its baseline aligned
        padding: (@toolbar-top-gap-px - 3px) 0 3px 0;
    }
    .title {
        font-size: @title-font-size;
        line-height: normal;
        font-weight: @font-weight-light;

        // On Win, the size+weight combo used above does not look good for the bullet character
        .dirty-dot {
            font-weight: normal;
        }

        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .buttons {
        margin: @toolbar-top-gap-px 0 0 4px;

        span, a {
            cursor: default;
        }
    }
}

/* Menu-related styles */

@menubar-top-padding: 8px;
@menubar-bottom-padding: 6px;
@menubar-h-padding: 9px;
@item-highlight-color: #e0f0fa;

.toolbar .nav, .context-menu, .codehint-menu {

    // The 1px adjustments here are to account for the border around the top-level menu items.
    margin: (@toolbar-top-gap-px - @menubar-top-padding - 1) 0 (-@menubar-bottom-padding + 1) (-@menubar-h-padding + 4);

    // General item appearance
    a {
        color: @bc-black;
        text-shadow: none;
        cursor: default;
    }

    // Menubar item appearance
    .dropdown-toggle {
        padding: @menubar-top-padding @menubar-h-padding @menubar-bottom-padding;
        border: 1px solid rgba(0, 0, 0, 0); // transparent border just to hold the layout so it doesn't shift on hover
        color: fadeout(@bc-black, 25%);
        font-weight: @font-weight-light;
    }
    .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
        /* Note: we need several selectors for this in order to match the specificity of all the various Bootstrap
           color rules we need to override (and Bootstrap has several selectors because the colors really differ
           in their defaults). */
        color: @bc-black;
        background: @item-highlight-color;
        border-color: #dbeaf4;
    }

    // no triangle icon after menu items
    .dropdown-toggle:after {
        border: 0;
        margin: 0;
    }

    // Ensure a minimum amount of space to the left of the shortcut
    .menu-shortcut {
        margin-left: 15px;
    }
}

// Menu dropdown appearance
.dropdown-menu {
    top: 34px; // Offset from top of menubar item

    margin-top: 0;
    background-color: @bc-white;
    border: 1px solid #c8c8c8;
    .border-radius(0 0 3px 3px);
    .box-shadow(0 6px 18px 0 rgba(0, 0, 0, .2));

    // Menu items
    li {
        a {
            font-size: @menu-item-font-size;
            line-height: 18px;

            // Slightly less padding on left to account for checkmark.
            // More padding on top than bottom to center font within its bg highlight better.
            padding: 2px 10px 0px 6px;

            color: @bc-black;
            text-shadow: none;
            white-space: nowrap;
            .box-shadow(none);

            &.wide-result {
                white-space: normal;
            }

            &:hover, &.highlight {
                color: @bc-black;
                background: @item-highlight-color;
            }

            &.disabled {
                color: @bc-gray;

                &:hover {
                    background: @bc-white;
                }
            }

            /* hidden checkmark for all list item content ensures consistent left spacing */
            &::before {
                content: "✓\00a0"; /* non-breaking space */
                visibility: hidden;
            }
            /* toggle checkmark visibility */
            &.checked::before {
                visibility: visible;
            }
        }
    }

    .divider {
        background-color: #eaeaea;
        border: 0;
    }
}

/* Context menu styles */

.context-menu, .codehint-menu {
    position: absolute;
    z-index: @z-index-brackets-context-menu-base;
    list-style-type: none;

    .dropdown-menu {
        .border-radius(3px);
    }

    .menu-shortcut {
        float: right;
    }
}

.codehint-menu {
    .dropdown-menu {
        .box-shadow(none);
        max-height: 160px;
        overflow-y: auto;

        padding: 0;

        li {
            a {
                // Less padding than on menus. More padding on top than bottom
                // to center font within its bg highlight better.
                padding: 2px 20px 0px 0px;

                // Don't show highlighting on hover for code hints...
                &:hover {
                    color: @bc-black;
                    background-color: @bc-white;
                }

				// ...except for selected item
                &.highlight:hover {
                    color: @bc-black;
                    background-color: @item-highlight-color;
                }
            }
        }
    }
}

#context-menu-bar {
    margin: 0;
}

/* Dialog-related styles */

.modal {
    background-color: @tc-gray-panel;
    width: auto;
}

.modal .close {
    cursor: default;
}

.modal-header {
    border-bottom: 1px solid rgba(0,0,0,0.09);
}

.modal-body, .modal-header {
    /* See styles/bootstrap/patterns.less .modal class.
       Pushing this value down to .modal-header and .modal-body
       to allow the overall modal to take the width of the footer */
    width: 580px;
}

.modal-footer {
    text-align: right;
    background-color: @tc-gray-panel;
    border-top: 1px solid rgba(0,0,0,0.09);
    box-shadow: none;
    white-space: nowrap;
}

.modal-footer .btn {
    float: none;
}
.modal-footer .btn.left {
    float: left;

    /* Transfer the margin to the right of each left-aligned button, so the left side lines up properly
     * with the title.
     */
    margin-left: 0;
    margin-right: 5px;
}

.platform-win {
    /* Reverse Save/Cancel button order on Win */
    .modal-footer {
        text-align: left;
    }
    .modal-footer .btn:not(.left) {
        float: right;
    }
}

.modal-body ul {
    /* Bootstrap's type.less defines a heavy margin-bottom on ul/ol that we don't want in dialogs
       since they have heavy padding instead. */
    margin-bottom: 0;
}

.dialog-title {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 40px;
    font-weight: @font-weight-light;
}

.dialog-message {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    font-weight: @font-weight-light;
}

/* bootstrap's base color for generic li is gray */
.dialog-message li {
    line-height: 26px;
    color: @grayDark;
}

.dialog-message select {
    margin-left: 10px;
}

.dialog-filename {
    font-weight: @font-weight-semibold;
    word-wrap: break-word;
}

/* Any Dialog text in this style is automatically turned into a link that opens in the browser. Use data-href for the link's target. */
.clickable-link {
    cursor: pointer;
}

.btn {
    cursor: default;
    font-size: 16px;
    font-weight: @font-weight-semibold;
    color: #454545;

    // On hover, gradient slides away to reveal a solid-color bg. Want same bg color in non-hover
    // too so we don't see the color cross-fading during the gradient slide animation
    background-color: #fff;
    &:hover {
        background-position: 0 15px;
    }

    &.primary {
        background-color: @blue;
    }
}

/* Update dialog */
.update-dialog .modal-body {
    position: relative;
    .update-icon {
        position: absolute;
        left: 30px; // relative to border of modal-body
        top: 20px;
        width: 80px;
        height: 80px;
    }
    .update-text {
        // Icon is 120px, so we need at least that much left padding/margin to avoid overlap
        margin: 0 10px 0 123px;

        .update-info {
            max-height: 200px;
            overflow: auto;

            // Enable text selection
            cursor: auto;
            .user-select(text);
        }
    }
}

/* Project Settings and Install Extension dialogs */
.project-settings-dialog .modal-body, .install-extension-dialog .modal-body {
    text-align: center;

    .field-container {
        display: inline-block;
    }
    label {
        float: none;
    }
    input.url {
        display: inline;
    }
}

.project-settings-dialog .modal-body input.url {
    margin: 10px;
    width: 400px;
}

.install-extension-dialog .modal-body input.url {
    margin: 10px 0;
    width: 550px;
}

/* Extension Manager dialog */
.extension-manager-dialog {
    top: 50%;
    left: 50%;
    margin-top: -325px;
    margin-left: -350px;

    .modal-header {
        width: 700px;

        .search {
            background: #fff url("images/topcoat-search-20.svg") 3px 4px no-repeat;
            float: right;
            margin-top: 6px;
            padding-left: 27px;
            padding-right: 20px;
        }
        .search-clear {
            position: relative;
            display: block;
            float: right;
            left: -5px;
            margin: 13px 0 0 -20px;
            opacity: 0.7;
            background: url("images/topcoat-cancel-15.svg") no-repeat;
            width: 15px;
            height: 16px;
            z-index: 1;

            &:disabled {
                opacity: 0.3;
                cursor: default;
            }
        }
        .search-clear:active {
            opacity: 0.5;
            &:disabled {
                opacity: 0.3;
            }
        }
    }
    .modal-body {
        width: 730px;
        height: 500px;
        text-align: center;
        overflow-y: scroll;
        padding: 0;

        .empty-message {
            display: none;
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -1em;
            text-align: center;
        }

        .extension-list {
            td {
                height: 2em;
            }
            .ext-info {
                padding-left: 15px;
                width: 220px;
            }
            .ext-name {
                color: #000;
                display: block;
                font-size: 15px;
                font-weight: @font-weight-light;
            }
            .ext-desc {
                color: #222;
                font-weight: @font-weight-light;
                width: auto;
            }
            .muted {
                color: #888;
            }
            .error {
                font-weight: @font-weight-semibold;
                color: #ff5656;
            }
            .ext-version,
            .ext-date,
            .ext-author {
                font-size: 11px;
            }
            .ext-action {
                font-size: 12px;
                padding-right: 15px;
                text-align: right;
                vertical-align: middle;
                width: 150px;
            }
            .spinner {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -18px;
                margin-left: -18px;
            }
            .load-error {
                display: inline-block;
                margin-top: 240px;
            }
            .install {
                width: 90px;
            }
        }
    }
}

/* About dialog */
.about-dialog .modal-body {
    // Simple two-column layout: image on left, text taking up remaining space on right
    position: relative;
    .about-icon {
        position: absolute;
        left: 10px;  // relative to border of modal-body (bounds outside padding)
        top:  11px;
    }
    .about-text {
        // Icon is 120px, so we need at least that much left padding/margin to avoid overlap
        margin: 0 10px 0 123px;

        #about-build-number {
            color: #b0b0b0;
        }
        .about-info {
            max-height: 300px;
            overflow: auto;
        }
        .about-contributors {
            min-height: 100px;
        }
        .about-contributors img {
            opacity: 0;
            -webkit-transition: opacity 1s;
            -moz-transition: opacity 1s;
            -o-transition: opacity 1s;
            transition: opacity 1s;
        }
    }

    h2 {
        font-weight: normal;
        font-size: 25px;
        margin-bottom: -4px;
        margin-top: 3px;
    }
    .dialog-message {
        font-size: 14px;
        line-height: 17px;

        // Enable text selection
        cursor: auto;
        .user-select(text);
    }
}

/* Input */
input, textarea {
    background-color: #fff;
    border: 1px solid #9c9e9e;
    .border-radius(3px);
    @shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);

    // Placeholder text gets special styles; can't be bundled together though for some reason
    &::-webkit-input-placeholder {
        color: #888;
    }
    // Focus states (we use .focused since IE8 and down doesn't support :focus)
    &:focus,
    &.focused {
        outline: 0;
        background-color: #fff;
        color: #000;
        text-shadow: none;
        border: 1px solid @tc-gray-component-focused-border;
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12), 0 0 0 2px #6fb5f1;
    }

    &:disabled {
        opacity: 0.3;
        cursor: default;
    }
}

/* Twipsy tooltips */
.tooltip-inner {
    .box-shadow(0 3px 6px 0 rgba(0, 0, 0, .36));
    max-width: none;
    white-space: nowrap;
}

/* Buttons */

// Base .btn styles
.btn {
    // Button Base
    background-image: none;

    background-color: #e5e9e9;
    text-shadow: 0 1px 0 #fff;
    color: #454545;
    font-weight: @font-weight-semibold;
    line-height: normal;
    border: 1px solid #9c9e9e;
    .border-radius(3px);
    box-shadow: inset 0 1px 0 #fff;

    &:hover {
        background-color: #edf1f1;
        color: #454545;
    }

    // Focus state for keyboard and accessibility
    &:focus {
        border: 1px solid @tc-gray-component-focused-border;
        box-shadow: inset 0 1px 0 #fff, 0 0 0 2px #6fb5f1;
        outline: none;
    }

    // Primary Button Type
    &.primary {
        background-image: none;
        background-color: #288edf;
        border: 1px solid  #0055ad;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.36);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.36);
        &.active,
        &:active {
            background-image: none;
            background-color: #0380e8;
            box-shadow: inset 0 1px 0 rgba(0,0,0,0.12);
        }

        &:focus {
            border: 1px solid @tc-gray-component-focused-border;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
            outline: none;
        }
    }

    // Active and Disabled states
    &.active,
    &:active {
        background-image: none;
        background-color: #d3d7d7;
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.12);
    }

    &.disabled, &[disabled] {
        .opacity(30);
    }

    // Button Sizes
    &.large {
        font-size: @baseFontSize + 1px;
        .border-radius(3px);
    }
    &.small {
        font-size: @baseFontSize - 1px;
    }
}

.btn-mini {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: normal;
  line-height: 14px;
}

/* Tables */

table {
    th {
        font-weight: @font-weight-semibold;
    }
    td {
        border-top: 1px solid transparent;
    }
    tbody th {
        border-top: 1px solid transparent);
    }
}

.table-striped tbody {
    tr:nth-child(odd) td,
    tr:nth-child(odd) th {
        background-color: #e6e9e9; // TopCoat palette
    }
    tr:nth-child(even) td,
    tr:nth-child(even) th {
        background-color: @tc-gray-panel; // turn off bootstrap hover highlight
    }
}
.row-highlight tbody {
    tr:hover td,
    tr:hover th {
        background-color: @tc-highlight; // TopCoat palette
    }
}

/* Emphasis */

strong {
    font-weight: @font-weight-semibold;
}

/* Type */

code {
  color: @bc-black;
  background-color: transparent;
}

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

/* Brackets patterns (and overrides and re-definitions of Bootstrap patterns)
 *
 * This file should contain all _reusable_ UI elements / LESS definitions
 * That is, things that will either a.) be used for more than one element or
 * b.) exist in multiple versions of brackets (e.g. App, In-Browser, etc.)
 *
 * Note that if you want a UI element to be themeable, you should put the
 * themeable part in "brackets_theme_default" as variables/mixins.
 *
 */

.panel {
    .vbox;
    .box-flex(1);

    padding: 0;
    margin: 0;

    background: @project-panel-base-color url("images/propertiespanel_back.png") repeat-x 0 0;
    color: #bbb;
    letter-spacing: .01em;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
}

/* Toolbar-related styles */

/* Simple toolbar layout (project panel, find in files, etc.)
   We don't set this directly on .toolbar because it'd be a pain to override all the pieces
   if other code (e.g. #main-toolbar) wants to do a different layout */
.simple-toolbar-layout.toolbar {
    .hbox;
    .box-align(center);
    overflow: hidden;

    .title-wrapper {
        /* This is necessary because text-overflow: ellipsis doesn't work when it's set
           directly on a flexing box in Chrome currently. */
        .box-flex(1);
    }
    .buttons {
        .hbox;
        margin-left: 4px;
    }
}

/* Horizontal titlebar/menubar (in-browser only)

   CSS hack based on this code: http://jsfiddle.net/cD657/3/ (via StackOverflow)
   This center-aligns the title across the full width of the toolbar (ignoring the width of the nav floated
   left and buttons floated right), yet still have the browser automatically wrap the floats onto a 2nd row
   if they collide with the title. But the centered content must be a block element with fixed width. Since
   the editor title (filename) varies in width, we rely on JS code to update the width whenever the string
   changes.

   Another wrinkle: wrapping to/from the two-line toolbar layout requires notifying the CodeMirror editor that
   its height changed. Currently, we assume this can ONLY happen in two cases:
    - the window resizes (handled by general listener in EditorManager)
    - title content changes (the same JS code that sets .title-wrapper's fixed width is expected to handle this)
*/
#titlebar {
    // Visible only in-browser
    body.in-appshell & {
        display: none;
    }

    text-align: center;
    .nav {  // menubar
        float: left;
        text-align: left;
    }
    .title {
        float: none;
        display: inline;  // must be an inline for JS to measure text size
    }
    .title-wrapper {
        margin: 0 auto;
        display: block;  // must be a block for the fixed width applied by JS to be respected
        // width set in px is appled/updated by JavaScript in DocumentCommandHandlers
    }
}

/* Vertical icon toolbar on right */
#main-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    width: @main-toolbar-width;
    height: 100%;
    box-sizing: border-box;

    background: @main-toolbar-background-color;
    padding: 5px 0px;

    // Ensure icons are vertically stacked & horizontally centered
    .vbox;
    .box-flex(1);
    text-align: center;

    .buttons {
        text-align: center;
        margin: 0;

        > a {
            margin: 5px 0px 5px 0px;
            padding: 0 !important;
            position: static !important;
            top: 0 !important;
            left: 0 !important;
        }

        > a:active {
            opacity: 0.5;
        }
    }
}

/* Toolbar appearance - shared by all toolbars, independent of layout */

@toolbar-top-gap-px: 5px;

.toolbar {
    font-size: @label-font-size;
    padding: 4px 8px;
    background-color: @bc-white;
    color: @bc-black;

    position: relative;  // needed for abs-positioned elements in toolbar (e.g. right-aligned "X")

    .title-wrapper {
        // Title is taller than menu text, so reduce top padding to keep its baseline aligned
        padding: (@toolbar-top-gap-px - 3px) 0 3px 0;
    }
    .title {
        font-size: @title-font-size;
        line-height: normal;
        font-weight: @font-weight-light;

        // On Win, the size+weight combo used above does not look good for the bullet character
        .dirty-dot {
            font-weight: normal;
        }

        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .buttons {
        margin: @toolbar-top-gap-px 0 0 4px;

        span, a {
            cursor: default;
        }
    }
}

/* Menu-related styles */

@menubar-top-padding: 8px;
@menubar-bottom-padding: 6px;
@menubar-h-padding: 9px;
@item-highlight-color: #e0f0fa;

.toolbar .nav, .context-menu, .codehint-menu {

    // The 1px adjustments here are to account for the border around the top-level menu items.
    margin: (@toolbar-top-gap-px - @menubar-top-padding - 1) 0 (-@menubar-bottom-padding + 1) (-@menubar-h-padding + 4);

    // General item appearance
    a {
        color: @bc-black;
        text-shadow: none;
        cursor: default;
    }

    // Menubar item appearance
    .dropdown-toggle {
        padding: @menubar-top-padding @menubar-h-padding @menubar-bottom-padding;
        border: 1px solid rgba(0, 0, 0, 0); // transparent border just to hold the layout so it doesn't shift on hover
        color: fadeout(@bc-black, 25%);
        font-weight: @font-weight-light;
    }
    .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
        /* Note: we need several selectors for this in order to match the specificity of all the various Bootstrap
           color rules we need to override (and Bootstrap has several selectors because the colors really differ
           in their defaults). */
        color: @bc-black;
        background: @item-highlight-color;
        border-color: #dbeaf4;
    }

    // no triangle icon after menu items
    .dropdown-toggle:after {
        border: 0;
        margin: 0;
    }

    // Ensure a minimum amount of space to the left of the shortcut
    .menu-shortcut {
        margin-left: 15px;
    }
}

// Menu dropdown appearance
.dropdown-menu {
    top: 34px; // Offset from top of menubar item

    margin-top: 0;
    background-color: @bc-white;
    border: 1px solid #c8c8c8;
    .border-radius(0 0 3px 3px);
    .box-shadow(0 6px 18px 0 rgba(0, 0, 0, .2));

    // Menu items
    li {
        a {
            font-size: @menu-item-font-size;
            line-height: 18px;

            // Slightly less padding on left to account for checkmark.
            // More padding on top than bottom to center font within its bg highlight better.
            padding: 2px 10px 0px 6px;

            color: @bc-black;
            text-shadow: none;
            white-space: nowrap;
            .box-shadow(none);

            &.wide-result {
                white-space: normal;
            }

            &:hover, &.highlight {
                color: @bc-black;
                background: @item-highlight-color;
            }

            &.disabled {
                color: @bc-gray;

                &:hover {
                    background: @bc-white;
                }
            }

            /* hidden checkmark for all list item content ensures consistent left spacing */
            &::before {
                content: "✓\00a0"; /* non-breaking space */
                visibility: hidden;
            }
            /* toggle checkmark visibility */
            &.checked::before {
                visibility: visible;
            }
        }
    }

    .divider {
        background-color: #eaeaea;
        border: 0;
    }
}

/* Context menu styles */

.context-menu, .codehint-menu {
    position: absolute;
    z-index: @z-index-brackets-context-menu-base;
    list-style-type: none;

    .dropdown-menu {
        .border-radius(3px);
    }

    .menu-shortcut {
        float: right;
    }
}

.codehint-menu {
    .dropdown-menu {
        .box-shadow(none);
        max-height: 160px;
        overflow-y: auto;

        padding: 0;

        li {
            a {
                // Less padding than on menus. More padding on top than bottom
                // to center font within its bg highlight better.
                padding: 2px 20px 0px 0px;

                // Don't show highlighting on hover for code hints...
                &:hover {
                    color: @bc-black;
                    background-color: @bc-white;
                }

				// ...except for selected item
                &.highlight:hover {
                    color: @bc-black;
                    background-color: @item-highlight-color;
                }
            }
        }
    }
}

#context-menu-bar {
    margin: 0;
}

/* Dialog-related styles */

.modal {
    background-color: @tc-gray-panel;
    width: auto;
}

.modal .close {
    cursor: default;
}

.modal-header {
    border-bottom: 1px solid rgba(0,0,0,0.09);
}

.modal-body, .modal-header {
    /* See styles/bootstrap/patterns.less .modal class.
       Pushing this value down to .modal-header and .modal-body
       to allow the overall modal to take the width of the footer */
    width: 580px;
}

.modal-footer {
    text-align: right;
    background-color: @tc-gray-panel;
    border-top: 1px solid rgba(0,0,0,0.09);
    box-shadow: none;
    white-space: nowrap;
}

.modal-footer .btn {
    float: none;
}
.modal-footer .btn.left {
    float: left;

    /* Transfer the margin to the right of each left-aligned button, so the left side lines up properly
     * with the title.
     */
    margin-left: 0;
    margin-right: 5px;
}

.platform-win {
    /* Reverse Save/Cancel button order on Win */
    .modal-footer {
        text-align: left;
    }
    .modal-footer .btn:not(.left) {
        float: right;
    }
}

.modal-body ul {
    /* Bootstrap's type.less defines a heavy margin-bottom on ul/ol that we don't want in dialogs
       since they have heavy padding instead. */
    margin-bottom: 0;
}

.dialog-title {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 40px;
    font-weight: @font-weight-light;
}

.dialog-message {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    font-weight: @font-weight-light;
}

/* bootstrap's base color for generic li is gray */
.dialog-message li {
    line-height: 26px;
    color: @grayDark;
}

.dialog-message select {
    margin-left: 10px;
}

.dialog-filename {
    font-weight: @font-weight-semibold;
    word-wrap: break-word;
}

/* Any Dialog text in this style is automatically turned into a link that opens in the browser. Use data-href for the link's target. */
.clickable-link {
    cursor: pointer;
}

.btn {
    cursor: default;
    font-size: 16px;
    font-weight: @font-weight-semibold;
    color: #454545;

    // On hover, gradient slides away to reveal a solid-color bg. Want same bg color in non-hover
    // too so we don't see the color cross-fading during the gradient slide animation
    background-color: #fff;
    &:hover {
        background-position: 0 15px;
    }

    &.primary {
        background-color: @blue;
    }
}

/* Update dialog */
.update-dialog .modal-body {
    position: relative;
    .update-icon {
        position: absolute;
        left: 30px; // relative to border of modal-body
        top: 20px;
        width: 80px;
        height: 80px;
    }
    .update-text {
        // Icon is 120px, so we need at least that much left padding/margin to avoid overlap
        margin: 0 10px 0 123px;

        .update-info {
            max-height: 200px;
            overflow: auto;

            // Enable text selection
            cursor: auto;
            .user-select(text);
        }
    }
}

/* Project Settings and Install Extension dialogs */
.project-settings-dialog .modal-body, .install-extension-dialog .modal-body {
    text-align: center;

    .field-container {
        display: inline-block;
    }
    label {
        float: none;
    }
    input.url {
        display: inline;
    }
}

.project-settings-dialog .modal-body input.url {
    margin: 10px;
    width: 400px;
}

.install-extension-dialog .modal-body input.url {
    margin: 10px 0;
    width: 550px;
}

/* Extension Manager dialog */
.extension-manager-dialog {
    top: 50%;
    left: 50%;
    margin-top: -325px;
    margin-left: -350px;

    .modal-header {
        width: 700px;

        .search {
            background: #fff url("images/topcoat-search-20.svg") 3px 4px no-repeat;
            float: right;
            margin-top: 6px;
            padding-left: 27px;
            padding-right: 20px;
        }
        .search-clear {
            position: relative;
            display: block;
            float: right;
            left: -5px;
            margin: 13px 0 0 -20px;
            opacity: 0.7;
            background: url("images/topcoat-cancel-15.svg") no-repeat;
            width: 15px;
            height: 16px;
            z-index: 1;

            &:disabled {
                opacity: 0.3;
                cursor: default;
            }
        }
        .search-clear:active {
            opacity: 0.5;
            &:disabled {
                opacity: 0.3;
            }
        }
    }
    .modal-body {
        width: 730px;
        height: 500px;
        text-align: center;
        overflow-y: scroll;
        padding: 0;

        .empty-message {
            display: none;
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -1em;
            text-align: center;
        }

        .extension-list {
            td {
                height: 2em;
            }
            .ext-info {
                padding-left: 15px;
                width: 220px;
            }
            .ext-name {
                color: #000;
                display: block;
                font-size: 15px;
                font-weight: @font-weight-light;
            }
            .ext-desc {
                color: #222;
                font-weight: @font-weight-light;
                width: auto;
            }
            .muted {
                color: #888;
            }
            .error {
                font-weight: @font-weight-semibold;
                color: #ff5656;
            }
            .ext-version,
            .ext-date,
            .ext-author {
                font-size: 11px;
            }
            .ext-action {
                font-size: 12px;
                padding-right: 15px;
                text-align: right;
                vertical-align: middle;
                width: 150px;
            }
            .spinner {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -18px;
                margin-left: -18px;
            }
            .load-error {
                display: inline-block;
                margin-top: 240px;
            }
            .install {
                width: 90px;
            }
        }
    }
}

/* About dialog */
.about-dialog .modal-body {
    // Simple two-column layout: image on left, text taking up remaining space on right
    position: relative;
    .about-icon {
        position: absolute;
        left: 10px;  // relative to border of modal-body (bounds outside padding)
        top:  11px;
    }
    .about-text {
        // Icon is 120px, so we need at least that much left padding/margin to avoid overlap
        margin: 0 10px 0 123px;

        #about-build-number {
            color: #b0b0b0;
        }
        .about-info {
            max-height: 300px;
            overflow: auto;
        }
        .about-contributors {
            min-height: 100px;
        }
        .about-contributors img {
            opacity: 0;
            -webkit-transition: opacity 1s;
            -moz-transition: opacity 1s;
            -o-transition: opacity 1s;
            transition: opacity 1s;
        }
    }

    h2 {
        font-weight: normal;
        font-size: 25px;
        margin-bottom: -4px;
        margin-top: 3px;
    }
    .dialog-message {
        font-size: 14px;
        line-height: 17px;

        // Enable text selection
        cursor: auto;
        .user-select(text);
    }
}

/* Input */
input, textarea {
    background-color: #fff;
    border: 1px solid #9c9e9e;
    .border-radius(3px);
    @shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);

    // Placeholder text gets special styles; can't be bundled together though for some reason
    &::-webkit-input-placeholder {
        color: #888;
    }
    // Focus states (we use .focused since IE8 and down doesn't support :focus)
    &:focus,
    &.focused {
        outline: 0;
        background-color: #fff;
        color: #000;
        text-shadow: none;
        border: 1px solid @tc-gray-component-focused-border;
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12), 0 0 0 2px #6fb5f1;
    }

    &:disabled {
        opacity: 0.3;
        cursor: default;
    }
}

/* Twipsy tooltips */
.tooltip-inner {
    .box-shadow(0 3px 6px 0 rgba(0, 0, 0, .36));
    max-width: none;
    white-space: nowrap;
}

/* Buttons */

// Base .btn styles
.btn {
    // Button Base
    background-image: none;

    background-color: #e5e9e9;
    text-shadow: 0 1px 0 #fff;
    color: #454545;
    font-weight: @font-weight-semibold;
    line-height: normal;
    border: 1px solid #9c9e9e;
    .border-radius(3px);
    box-shadow: inset 0 1px 0 #fff;

    &:hover {
        background-color: #edf1f1;
        color: #454545;
    }

    // Focus state for keyboard and accessibility
    &:focus {
        border: 1px solid @tc-gray-component-focused-border;
        box-shadow: inset 0 1px 0 #fff, 0 0 0 2px #6fb5f1;
        outline: none;
    }

    // Primary Button Type
    &.primary {
        background-image: none;
        background-color: #288edf;
        border: 1px solid  #0055ad;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.36);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.36);
        &.active,
        &:active {
            background-image: none;
            background-color: #0380e8;
            box-shadow: inset 0 1px 0 rgba(0,0,0,0.12);
        }

        &:focus {
            border: 1px solid @tc-gray-component-focused-border;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
            outline: none;
        }
    }

    // Active and Disabled states
    &.active,
    &:active {
        background-image: none;
        background-color: #d3d7d7;
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.12);
    }

    &.disabled, &[disabled] {
        .opacity(30);
    }

    // Button Sizes
    &.large {
        font-size: @baseFontSize + 1px;
        .border-radius(3px);
    }
    &.small {
        font-size: @baseFontSize - 1px;
    }
}

.btn-mini {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: normal;
  line-height: 14px;
}

/* Tables */

table {
    th {
        font-weight: @font-weight-semibold;
    }
    td {
        border-top: 1px solid transparent;
    }
    tbody th {
        border-top: 1px solid transparent);
    }
}

.table-striped tbody {
    tr:nth-child(odd) td,
    tr:nth-child(odd) th {
        background-color: #e6e9e9; // TopCoat palette
    }
    tr:nth-child(even) td,
    tr:nth-child(even) th {
        background-color: @tc-gray-panel; // turn off bootstrap hover highlight
    }
}
.row-highlight tbody {
    tr:hover td,
    tr:hover th {
        background-color: @tc-highlight; // TopCoat palette
    }
}

/* Emphasis */

strong {
    font-weight: @font-weight-semibold;
}

/* Type */

code {
  background-color: transparent;
}


add comments

add comments

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

/* Brackets patterns (and overrides and re-definitions of Bootstrap patterns)
 *
 * This file should contain all _reusable_ UI elements / LESS definitions
 * That is, things that will either a.) be used for more than one element or
 * b.) exist in multiple versions of brackets (e.g. App, In-Browser, etc.)
 *
 * Note that if you want a UI element to be themeable, you should put the
 * themeable part in "brackets_theme_default" as variables/mixins.
 *
 */

.project-panel-background {
    background: rgb(73,77,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,77,77) 0%, rgb(59,63,65) 51%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(73,77,77)), color-stop(51%,rgb(59,63,65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* IE10+ */
    background: linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#494d4d', endColorstr='#3b3f41',GradientType=0 )";  /* IE6-9 */
}

.panel {
    .vbox;
    .box-flex(1);

    padding: 0;
    margin: 0;

    .project-panel-background;
    color: #bbb;
    letter-spacing: .01em;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
}

/* Toolbar-related styles */

/* Simple toolbar layout (project panel, find in files, etc.)
   We don't set this directly on .toolbar because it'd be a pain to override all the pieces
   if other code (e.g. #main-toolbar) wants to do a different layout */
.simple-toolbar-layout.toolbar {
    .hbox;
    .box-align(center);
    .title-wrapper {
        /* This is necessary because text-overflow: ellipsis doesn't work when it's set
           directly on a flexing box in Chrome currently. */
        .box-flex(1);
    }
    .buttons {
        .hbox;
        margin-left: 4px;
    }
}

/* Editor toolbar layout

   CSS hack based on this code: http://jsfiddle.net/cD657/3/ (via StackOverflow)
   This center-aligns the title across the full width of the toolbar (ignoring the width of the nav floated
   left and buttons floated right), yet still have the browser automatically wrap the floats onto a 2nd row
   if they collide with the title. But the centered content must be a block element with fixed width. Since
   the editor title (filename) varies in width, we rely on JS code to update the width whenever the string
   changes.

   Another wrinkle: wrapping to/from the two-line toolbar layout requires notifying the CodeMirror editor that
   its height changed. Currently, we assume this can ONLY happen in two cases:
    - the window resizes (handled by general listener in EditorManager)
    - title content changes (the same JS code that sets .title-wrapper's fixed width is expected to handle this)
*/
#main-toolbar.toolbar {
    text-align: center;
    .nav {
        float: left;
        text-align: left;
    }
    .title {
        float: none;
        display: inline;  // must be an inline for JS to measure text size
    }
    .title-wrapper {
        margin: 0 auto;
        display: block;  // must be a block for the fixed width applied by JS to be respected
        // width set in px is appled/updated by JavaScript in DocumentCommandHandlers
    }
    .buttons {
        float: right;
        text-align: left;
    }
}

/* Toolbar appearance - shared by all toolbars, independent of layout */

@toolbar-top-gap-px: 5px;

.toolbar {
    font-size: @label-font-size;
    padding: 4px 8px;
    background-color: @bc-white;
    color: @bc-black;

    position: relative; // starts a new stacking group so that the drop shadow shows up on top of the code editor
    .box-shadow(0 1px 1px 0 fadeout(@bc-black, 90%));

    .title-wrapper {
        // Title is taller than menu text, so reduce top padding to keep its baseline aligned
        padding: (@toolbar-top-gap-px - 3px) 0 3px 0;
    }
    .title {
        font-size: @title-font-size;
        line-height: normal;
        font-weight: @font-weight-light;

        // On Win, the size+weight combo used above does not look good for the bullet character
        .dirty-dot {
            font-weight: normal;
        }

        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .buttons {
        margin: @toolbar-top-gap-px 0 0 4px;

        .experimental-label {
            color: #a0a0a0;
            font-size: 15px;
            line-height: 20px;  // prevent jumping when 20px-tall JSLint star is added/removed
            font-weight: normal;
            font-style: italic;
            padding-right: 22px;
        }
    }
}

/* Menu-related styles */

@menubar-top-padding: 8px;
@menubar-bottom-padding: 6px;
@menubar-h-padding: 9px;
@item-highlight-color: #e0f0fa;

.toolbar .nav, .context-menu, .codehint-menu {

    // The 1px adjustments here are to account for the border around the top-level menu items.
    margin: (@toolbar-top-gap-px - @menubar-top-padding - 1) 0 (-@menubar-bottom-padding + 1) (-@menubar-h-padding + 4);

    // General item appearance
    a {
        color: @bc-black;
        text-shadow: none;
    }

    // Menubar item appearance
    .dropdown-toggle {
        padding: @menubar-top-padding @menubar-h-padding @menubar-bottom-padding;
        border: 1px solid rgba(0, 0, 0, 0); // transparent border just to hold the layout so it doesn't shift on hover
        color: fadeout(@bc-black, 25%);
        font-weight: @font-weight-light;
    }
    .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
        /* Note: we need several selectors for this in order to match the specificity of all the various Bootstrap
           color rules we need to override (and Bootstrap has several selectors because the colors really differ
           in their defaults). */
        color: @bc-black;
        background: @item-highlight-color;
        border-color: #dbeaf4;
    }

    // no triangle icon after menu items
    .dropdown-toggle:after {
        border: 0;
        margin: 0;
    }

    // Menu dropdown appearance
    .dropdown-menu {
        top: 34px; // Offset from top of menubar item

        background-color: @bc-white;
        border: 1px solid #c8c8c8;
        .border-radius(0 0 3px 3px);
        .box-shadow(0 6px 18px 0 rgba(0, 0, 0, .2));

        // Menu items
        li {
            a {
                font-size: @menu-item-font-size;
                line-height: 18px;

                // Slightly less padding on left to account for checkmark.
                // More padding on top than bottom to center font within its bg highlight better.
                padding: 2px 10px 0px 6px;

                color: @bc-black;
                text-shadow: none;
                white-space: nowrap;
                .box-shadow(none);

                &:hover, &.highlight {
                    color: @bc-black;
                    background: @item-highlight-color;
                }

                &.disabled {
                    color: @bc-gray;

                    &:hover {
                        background: @bc-white;
                    }
                }

                /* hidden checkmark for all list item content ensures consistent left spacing */
                &::before {
                    content: "✓\00a0"; /* non-breaking space */
                    visibility: hidden;
                }
                /* toggle checkmark visibility */
                &.checked::before {
                    visibility: visible;
                }
            }
        }

        .divider {
            background-color: #eaeaea;
            border: 0;
        }
    }

    // Ensure a minimum amount of space to the left of the shortcut
    .menu-shortcut {
        margin-left: 15px;
    }
}

#codehint-text {
    position: absolute;
    left: 0;
    top: 0;
    z-index: @z-index-brackets-context-menu-base;
}

/* Context menu styles */

.context-menu, .codehint-menu {
    position: absolute;
    z-index: @z-index-brackets-context-menu-base;
    list-style-type: none;

    .dropdown-menu {
        .border-radius(3px);
    }

    .menu-shortcut {
        float: right;
    }
}

.codehint-menu {
    .dropdown-menu {
        .box-shadow(none);

        li {
            a {
                // Less padding than on menus. More padding on top than bottom
                // to center font within its bg highlight better.
                padding: 2px 0px 0px 0px;

                // Don't show highlighting on hover for code hints...
                &:hover {
                    color: @bc-black;
                    background-color: @bc-white;
                }

				// ...except for selected item
                &.highlight:hover {
                    color: @bc-black;
                    background-color: @item-highlight-color;
                }
            }
        }
    }
}

#context-menu-bar {
    margin: 0;
}

/* Dialog-related styles */

.modal-footer .btn.left {
    float: left;
}

.modal-body ul {
    /* Bootstrap's type.less defines a heavy margin-bottom on ul/ol that we don't want in dialogs
       since they have heavy padding instead. */
    margin-bottom: 0;
}

.dialog-title {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 40px;
    font-weight: @font-weight-light;
}

.dialog-message {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    font-weight: @font-weight-light;
}

/* bootstrap's base color for generic li is gray */
.dialog-message li {
    line-height: 26px;
    color: @grayDark;
}

.dialog-filename {
    font-weight: @font-weight-semibold;
    white-space: nowrap;
}

.btn {
    font-size: 16px;
    font-weight: @font-weight-semibold;
    color: #454545;

    // On hover, gradient slides away to reveal a solid-color bg. Want same bg color in non-hover
    // too so we don't see the color cross-fading during the gradient slide animation
    background-color: #fff;
    &:hover {
        background-position: 0 15px;
    }

    &.primary {
        background-color: @blue;
    }
}

/* About dialog */
.about-dialog .modal-body {
    // Simple two-column layout: image on left, text taking up remaining space on right
    position: relative;
    .about-icon {
        position: absolute;
        left: 10px;  // relative to border of modal-body (bounds outside padding)
        top:  11px;
    }
    .about-text {
        // Icon is 120px, so we need at least that much left padding/margin to avoid overlap
        margin: 0 10px 0 123px;

        #about-build-number {
            color: #b0b0b0;
        }
    }

    h2 {
        font-weight: normal;
        font-size: 25px;
        margin-bottom: -8px;
        margin-top: 3px;
    }
    .dialog-message {
        font-size: 14px;
        line-height: 17px;

        // Enable text selection, since URLs aren't clickable
        cursor: auto;
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        -o-user-select: text;
        user-select: text;
    }
}

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

/* Brackets patterns (and overrides and re-definitions of Bootstrap patterns)
 *
 * This file should contain all _reusable_ UI elements / LESS definitions
 * That is, things that will either a.) be used for more than one element or
 * b.) exist in multiple versions of brackets (e.g. App, In-Browser, etc.)
 *
 * Note that if you want a UI element to be themeable, you should put the
 * themeable part in "brackets_theme_default" as variables/mixins.
 *
 */

.project-panel-background {
    background: rgb(73,77,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,77,77) 0%, rgb(59,63,65) 51%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(73,77,77)), color-stop(51%,rgb(59,63,65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* IE10+ */
    background: linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#494d4d', endColorstr='#3b3f41',GradientType=0 )";  /* IE6-9 */
}

.panel {
    .vbox;
    .box-flex(1);

    padding: 0;
    margin: 0;

    .project-panel-background;
    color: #bbb;
    letter-spacing: .01em;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
}

/* Toolbar-related styles */

/* Simple toolbar layout (project panel, find in files, etc.)
   We don't set this directly on .toolbar because it'd be a pain to override all the pieces
   if other code (e.g. #main-toolbar) wants to do a different layout */
.simple-toolbar-layout.toolbar {
    .hbox;
    .box-align(center);
    .title-wrapper {
        /* This is necessary because text-overflow: ellipsis doesn't work when it's set
           directly on a flexing box in Chrome currently. */
        .box-flex(1);
    }
    .buttons {
        .hbox;
        margin-left: 4px;
    }
}

/* Editor toolbar layout

   CSS hack based on this code: http://jsfiddle.net/cD657/3/ (via StackOverflow)
   This center-aligns the title across the full width of the toolbar (ignoring the width of the nav floated
   left and buttons floated right), yet still have the browser automatically wrap the floats onto a 2nd row
   if they collide with the title. But the centered content must be a block element with fixed width. Since
   the editor title (filename) varies in width, we rely on JS code to update the width whenever the string
   changes.

   Another wrinkle: wrapping to/from the two-line toolbar layout requires notifying the CodeMirror editor that
   its height changed. Currently, we assume this can ONLY happen in two cases:
    - the window resizes (handled by general listener in EditorManager)
    - title content changes (the same JS code that sets .title-wrapper's fixed width is expected to handle this)
*/
#main-toolbar.toolbar {
    text-align: center;
    .nav {
        float: left;
        text-align: left;
    }
    .title {
        float: none;
        display: inline;  // must be an inline for JS to measure text size
    }
    .title-wrapper {
        margin: 0 auto;
        display: block;  // must be a block for the fixed width applied by JS to be respected
        // width set in px is appled/updated by JavaScript in DocumentCommandHandlers
    }
    .buttons {
        float: right;
        text-align: left;
    }
}

/* Toolbar appearance - shared by all toolbars, independent of layout */

@toolbar-top-gap-px: 5px;

.toolbar {
    font-size: @label-font-size;
    padding: 4px 8px;
    background-color: @bc-white;
    color: @bc-black;

    position: relative; // starts a new stacking group so that the drop shadow shows up on top of the code editor
    .box-shadow(0 1px 1px 0 fadeout(@bc-black, 90%));

    .title-wrapper {
        // Title is taller than menu text, so reduce top padding to keep its baseline aligned
        padding: (@toolbar-top-gap-px - 3px) 0 3px 0;
    }
    .title {
        font-size: @title-font-size;
        line-height: normal;
        font-weight: @font-weight-light;

        // On Win, the size+weight combo used above does not look good for the bullet character
        .dirty-dot {
            font-weight: normal;
        }

        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .buttons {
        margin: @toolbar-top-gap-px 0 0 4px;

        .experimental-label {
            color: #a0a0a0;
            font-size: 15px;
            line-height: 20px;  // prevent jumping when 20px-tall JSLint star is added/removed
            font-weight: normal;
            font-style: italic;
            padding-right: 22px;
        }
    }
}

/* Menu-related styles */

@menubar-top-padding: 8px;
@menubar-bottom-padding: 6px;
@menubar-h-padding: 9px;
@item-highlight-color: #e0f0fa;

.toolbar .nav, .context-menu, .codehint-menu {

    // The 1px adjustments here are to account for the border around the top-level menu items.
    margin: (@toolbar-top-gap-px - @menubar-top-padding - 1) 0 (-@menubar-bottom-padding + 1) (-@menubar-h-padding + 4);

    // General item appearance
    a {
        color: @bc-black;
        text-shadow: none;
    }

    // Menubar item appearance
    .dropdown-toggle {
        padding: @menubar-top-padding @menubar-h-padding @menubar-bottom-padding;
        border: 1px solid rgba(0, 0, 0, 0); // transparent border just to hold the layout so it doesn't shift on hover
        color: fadeout(@bc-black, 25%);
        font-weight: @font-weight-light;
    }
    .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
        /* Note: we need several selectors for this in order to match the specificity of all the various Bootstrap
           color rules we need to override (and Bootstrap has several selectors because the colors really differ
           in their defaults). */
        color: @bc-black;
        background: @item-highlight-color;
        border-color: #dbeaf4;
    }

    // no triangle icon after menu items
    .dropdown-toggle:after {
        border: 0;
        margin: 0;
    }

    // Menu dropdown appearance
    .dropdown-menu {
        top: 34px; // Offset from top of menubar item

        background-color: @bc-white;
        border: 1px solid #c8c8c8;
        .border-radius(0 0 3px 3px);
        .box-shadow(0 6px 18px 0 rgba(0, 0, 0, .2));

        // Menu items
        li {
            a {
                font-size: @menu-item-font-size;
                line-height: 18px;

                // Slightly less padding on left to account for checkmark.
                // More padding on top than bottom to center font within its bg highlight better.
                padding: 2px 10px 0px 6px;

                color: @bc-black;
                text-shadow: none;
                white-space: nowrap;
                .box-shadow(none);

                &:hover, &.highlight {
                    color: @bc-black;
                    background: @item-highlight-color;
                }

                &.disabled {
                    color: @bc-gray;

                    &:hover {
                        background: @bc-white;
                    }
                }

                /* hidden checkmark for all list item content ensures consistent left spacing */
                &::before {
                    content: "✓\00a0"; /* non-breaking space */
                    visibility: hidden;
                }
                /* toggle checkmark visibility */
                &.checked::before {
                    visibility: visible;
                }
            }
        }

        .divider {
            background-color: #eaeaea;
            border: 0;
        }
    }

    // Ensure a minimum amount of space to the left of the shortcut
    .menu-shortcut {
        margin-left: 15px;
    }
}

#codehint-text {
    position: absolute;
    left: 0;
    top: 0;
    z-index: @z-index-brackets-context-menu-base;
}

/* Context menu styles */

.context-menu, .codehint-menu {
    position: absolute;
    z-index: @z-index-brackets-context-menu-base;
    list-style-type: none;

    .dropdown-menu {
        .border-radius(3px);
    }

    .menu-shortcut {
        float: right;
    }
}

.codehint-menu {
    .dropdown-menu {
        .box-shadow(none);

        li {
            a {
                // Less padding than on menus. More padding on top than bottom
                // to center font within its bg highlight better.
                padding: 2px 0px 0px 0px;

                &:hover {
                    color: @bc-black;
                    background-color: @bc-white;
                }

                &.highlight:hover {
                    color: @bc-black;
                    background-color: @item-highlight-color;
                }
            }
        }
    }
}

#context-menu-bar {
    margin: 0;
}

/* Dialog-related styles */

.modal-footer .btn.left {
    float: left;
}

.modal-body ul {
    /* Bootstrap's type.less defines a heavy margin-bottom on ul/ol that we don't want in dialogs
       since they have heavy padding instead. */
    margin-bottom: 0;
}

.dialog-title {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 40px;
    font-weight: @font-weight-light;
}

.dialog-message {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    font-weight: @font-weight-light;
}

/* bootstrap's base color for generic li is gray */
.dialog-message li {
    line-height: 26px;
    color: @grayDark;
}

.dialog-filename {
    font-weight: @font-weight-semibold;
    white-space: nowrap;
}

.btn {
    font-size: 16px;
    font-weight: @font-weight-semibold;
    color: #454545;

    // On hover, gradient slides away to reveal a solid-color bg. Want same bg color in non-hover
    // too so we don't see the color cross-fading during the gradient slide animation
    background-color: #fff;
    &:hover {
        background-position: 0 15px;
    }

    &.primary {
        background-color: @blue;
    }
}

/* About dialog */
.about-dialog .modal-body {
    // Simple two-column layout: image on left, text taking up remaining space on right
    position: relative;
    .about-icon {
        position: absolute;
        left: 10px;  // relative to border of modal-body (bounds outside padding)
        top:  11px;
    }
    .about-text {
        // Icon is 120px, so we need at least that much left padding/margin to avoid overlap
        margin: 0 10px 0 123px;

        #about-build-number {
            color: #b0b0b0;
        }
    }

    h2 {
        font-weight: normal;
        font-size: 25px;
        margin-bottom: -8px;
        margin-top: 3px;
    }
    .dialog-message {
        font-size: 14px;
        line-height: 17px;

        // Enable text selection, since URLs aren't clickable
        cursor: auto;
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        -o-user-select: text;
        user-select: text;
    }
}


Updated comment for alternative info box

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


Fix item menu item border

Fix item menu item border

fatal: unable to access 'https://github.com/dieface/Semantic-UI.git/': The requested URL returned error: 403


better LESS naming conventions

better LESS naming conventions

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


style update

style update

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/e154/angular-bpmn.git/'


less re-structure, added more stylings for navbar and elements

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


made pending status pulsating

made pending status pulsating

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/rafalprzywarski/test-status.git/'


Delete fixed-width.less

Delete fixed-width.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/hackersvsharassment/hackersvsharassment.github.io.git/'


changed state-error in state-danger

changed state-error in state-danger

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


incremented the bottom padding of the menubar

fatal: unable to access 'https://github.com/dedalozzo/pit-bootstrap.git/': The requested URL returned error: 403


Added home.less

Added home.less

.home {
	&:hover{
		&_.SignUpForm{
			top: 270px;
		}
	}
}

error: pathspec 'public/modules/core/css/home.less' did not match any file(s) known to git


change quote border

change quote border

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/SilentComics/silentcomics.github.io.git/'


antd/lib/style/color/colorPalette should be lower case color

fatal: remote error: upload-pack: not our ref 45ac35e46119294c3c48b8b6f992a84352196e76
fatal: the remote end hung up unexpectedly


Create mixins.less

Create mixins.less

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


Remove unused styles

Remove unused styles

body {
  margin: 0;
  font-family: @font-family-base;
  font-size: 14px;
  line-height: 20px;
  color: @gray;
  -webkit-font-smoothing: antialiased;
  .transition(.1s padding ease-in-out);
  overflow-x: hidden;
  background: @bgColor;
  // padding-left: @sidebar-width;
}

/**
* body.narrow
* ============================================================================
*/

body.narrow {
  background: #fff;

  .container {
    max-width: 660px !important;
  }

  footer {
    display: none;
  }
}

/**
* body.auth
* ============================================================================
*/

body.auth {
  .container {
    max-width: 400px !important;
  }
}

/**
* Container / Content
* ============================================================================
*/

.container {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

/**
* Header
* ============================================================================
*/

header {
  background: @grayDark;
  color: #fff;
  padding: 12px 0;

  a {
    color: #fff;
  }

}

.sub-header {
  background: #fff;
  color: @gray;
  border-bottom: 1px solid @trim;
  position: relative;
  height: 66px;
  padding: 25px 0 0;
  margin: 0 0 20px;
  line-height: 1;
  font-size: 16px;
  .clearfix;

  .logo-logged-in {
    position: relative;
    padding-left: 38px;
    .icon-sentry-logo {
      position: absolute;
      left: 0;
    }
  }

  .breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
    white-space: nowrap;
    float: left;
    position: relative;

    li {
      position: relative;
      font-weight: 500;

      &+li {
        padding-left: 23px;

        &:before {
          position: absolute;
          left: 9px;
          padding: 0;
        }
      }

      &.truncate {
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &:first-child {

        a {
          font-size: 0;
          padding-left: 20px;

          &:before {
            display: block;
            font-family: "sentry-simple";
            content: "\e620";
            font-size: 17px;
            position: absolute;
            left: -20px;
            top: -25px;
            opacity: .85;
            height: 65px;
            width: 60px;
            line-height: 66px;
            text-align: center;
            border-right: 1px solid lighten(@trim, 2);
          }

          &:hover:before {
            background: rgba(246, 247, 248, 0.6);
          }
        }
      }

      &:last-child {
        a {
          font-weight: 400;
          color: lighten(@gray, 15);
        }
      }

      &:nth-child(2) {
        padding-left: 38px;
        &:before {
          display: none;
        }
      }

      &:first-child:last-child {

        &:after {
          font-weight: 400;
          content: "Home";
          padding-left: 38px;
          opacity: .6;
        }
      }
    }

    .icon-settings {
      font-size: 15px;
      color: rgba(79, 87, 96, 0.30);
      margin-left: 2px;
      position: relative;
      top: 1px;
    }

    em {
      color: #B5B9BD;
      font-style: normal;
    }
  }

  a {
    color: @gray;
    &:hover, &:active, &:focus {
      color: darken(@gray, 10);
      text-decoration: none;
    }
  }

  h1 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
  }

  .icon-sentry-logo-full, .icon-sentry-logo {
    font-size: 24px;
    position: relative;
    top: 0;
  }

  .icon-sentry-logo-full {
    top: -4px;
  }

  .nav-tabs {
    margin-top: -2px;
    li {
      margin: 0 0 0 20px;

      a {
        padding-bottom: 19px;
      }
    }
  }
}

.range-picker {
  .dropdown-toggle {
    font-size: 18px;
    font-weight: 500;

    .icon-arrow-down {
      top: 2px;
      margin-left: 4px;
    }
  }
}

.messages-container {
  position: fixed;
  bottom: 0;
  left: 20 + @sidebar-width;
  right: 20px;
  z-index: 1000;
  margin: 0;
}

/**
* Rightbar
* ============================================================================
*/

.rightbar {
  display: none;
  position: absolute;
  width: 220px;
  right: -20px;
  top: -11px;

  .nav-stacked {
    li, li+li {
      margin: 0;
    }
    a {
      font-weight: 500;
      font-size: 15px;
      background: none;
      border-radius: 0;
      padding: 15px 20px;

      &:hover {
        background: rgba(105, 109, 128, .06);
      }

      .badge {
        background: @red;
      }
    }

    li.active a {
      font-weight: 600;
      background: @blue;
    }
  }

  h6 {
    color: darken(@gray-light, 10);
    margin: 15px 20px;
  }
}

/**
* App Sidebar
* ============================================================================
*/

.app-sidebar {
  background: @grayDark;
  color: #fff;
  width: @sidebar-width;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  color: #fff;

  .transition(.1s left ease-in-out);

  a {
    color: #fff;

    &.divider {
      padding-left: 10px;
    }
  }

  .icon-settings {
    opacity: .5;
    font-size: 14px;
    color: lighten(@gray, 6);

    &:hover {
      opacity: 1;
    }
  }

  h6 {
    margin: 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: lighten(@gray, 6);

    &:first-child {
      margin-top: 5px;
    }

    a {
      color: lighten(@gray, 6);
    }
  }

  ul {
    margin-bottom: 15px;
  }

  li {
    a {
      .truncate();
    }
  }

  li.active {
    position: relative;
    &:before {
      width: 6px;
      height: 6px;
      background: @blue;
      border-radius: 6px;
      content: "";
      display: block;
      position: absolute;
      left: -12px;
      top: 6px;
    }
  }

  .icon {
    opacity: .5;
    margin-right: 10px;
    position: relative;
    top: 1px;
    color: #ACB9C5;
  }

  .team-filter {
    .form-control {
      border: none;
      box-shadow: 0;
      padding: 4px 10px;
      background: #fff;
    }
  }

  h6, .truncate li strong a, .username {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .app-sidebar-content {
    position: fixed;
    left: 0;
    top: 66px;
    bottom: 60px;
    padding: 0 20px 20px;
    width: @sidebar-width;
    overflow: auto;
    .transition(.1s left ease-in-out);

    // Scrollbar

    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-track {
        background: #252A31;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background: @grayDark;
        border: 1px solid #252A31;
    }
  }
}

/**
* Content sidebar
* ============================================================================
*/

.content .sidebar {
  float: right;
}

/**
* Reset Grid
* ============================================================================
*/

.row {
  margin-left: -10px;
  margin-right: -10px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 10px;
  padding-left: 10px;
}

/**
* Footer
* ============================================================================
*/

footer {
  line-height: 30px;
  text-align: center;
  color: lighten(@gray, 25);
  font-weight: 500;
  border-top: 1px solid lighten(@trim, 3);
  margin-top: 20px;
  padding: 22px 0;

  .pull-right {
    a {
      margin-left: 20px;
    }
  }

  a {
    color: lighten(@gray, 25);
    &:hover {
      color: @gray;
    }
  }

  .icon-sentry-logo {
    color: lighten(@gray, 25);
    font-size: 28px;
    width: 32px;
    margin: 0 auto;
    display: block;
  }
}

/**
* Windowed
* ============================================================================
*/

.windowed-small {
  background: #fbfbfc;
  padding-top: 100px;

  .container {
    max-width: 600px !important;
    width: auto !important;
    margin: 0 auto;
  }

  header {
    margin-top: -100px;
    background: none;
    margin-bottom: 30px;
  }

  footer {
    display: none;
  }
}

/**
* Print
* ============================================================================
*/

@media print {
    body {
        color: @black;
    }
    header {
        display: none;
    }
    .sidebar, .toolbar {
      display: none;
    }
    .content {
      padding: 0 !important;
    }
    #CModal, footer { display: none; }
}

/**
* Responsive small screens
* ============================================================================
*/
@media(max-width:767px) {
  body {
    overflow-x: hidden;
    zoom: .85;
  }

  header {
    padding: 15px 0 13px;

    .icon-sentry-logo {
      font-size: 16px;
      padding-top: 3px;
    }

    .dropdown, .project-dropdown {
      position: static;
      padding-top: 3px;

      .team-name {
        font-size: 14px;
      }

      .dropdown-menu {
        width: auto;
        left: 0;
        right: 0;
        top: 40px;
        border-radius: 0;
        max-height: 9999px;
        overflow-x: hidden;

        ul li {
          width: 100%;
          font-size: 16px;
          margin: 0;

          a {
            padding: 10px 20px;
            left: 0;
            margin-left: -20px;
            margin-right: -20px;
          }
        }
      }
    }
  }
}

/**
* Responsive large screens
* ============================================================================
*/

@media(min-width: 1720px) {
  body {
    zoom: 150%;
  }
}

body {
  margin: 0;
  font-family: @font-family-base;
  font-size: 14px;
  line-height: 20px;
  color: @gray;
  -webkit-font-smoothing: antialiased;
  .transition(.1s padding ease-in-out);
  overflow-x: hidden;
  background: @bgColor;
  // padding-left: @sidebar-width;
}

/**
* body.narrow
* ============================================================================
*/

body.narrow {
  background: #fff;

  .container {
    max-width: 660px !important;
  }

  footer {
    display: none;
  }
}

/**
* body.auth
* ============================================================================
*/

body.auth {
  .container {
    max-width: 400px !important;
  }
}

/**
* body.rightbar
* ============================================================================
*/

body.show-rightbar {
  background: @bgColor url(../images/dashboard/sidebar-bg.png) top right repeat-y;
  background-size: 220px 2px;

  .content {
    position: relative;
    padding-right: 220px;
  }

  .rightbar {
    display: block
  }

  footer {
    margin-right: 220px;
  }
}

/**
* Container / Content
* ============================================================================
*/

.container {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

/**
* Header
* ============================================================================
*/

header {
  background: @grayDark;
  color: #fff;
  padding: 12px 0;

  a {
    color: #fff;
  }

}

.sub-header {
  background: #fff;
  color: @gray;
  border-bottom: 1px solid @trim;
  position: relative;
  height: 66px;
  padding: 25px 0 0;
  margin: 0 0 20px;
  line-height: 1;
  font-size: 16px;
  .clearfix;

  .logo-logged-in {
    position: relative;
    padding-left: 38px;
    .icon-sentry-logo {
      position: absolute;
      left: 0;
    }
  }

  .breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
    white-space: nowrap;
    float: left;
    position: relative;

    li {
      position: relative;
      font-weight: 500;

      &+li {
        padding-left: 23px;

        &:before {
          position: absolute;
          left: 9px;
          padding: 0;
        }
      }

      &.truncate {
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &:first-child {

        a {
          font-size: 0;
          padding-left: 20px;

          &:before {
            display: block;
            font-family: "sentry-simple";
            content: "\e620";
            font-size: 17px;
            position: absolute;
            left: -20px;
            top: -25px;
            opacity: .85;
            height: 65px;
            width: 60px;
            line-height: 66px;
            text-align: center;
            border-right: 1px solid lighten(@trim, 2);
          }

          &:hover:before {
            background: rgba(246, 247, 248, 0.6);
          }
        }
      }

      &:last-child {
        a {
          font-weight: 400;
          color: lighten(@gray, 15);
        }
      }

      &:nth-child(2) {
        padding-left: 38px;
        &:before {
          display: none;
        }
      }

      &:first-child:last-child {

        &:after {
          font-weight: 400;
          content: "Home";
          padding-left: 38px;
          opacity: .6;
        }
      }
    }

    .icon-settings {
      font-size: 15px;
      color: rgba(79, 87, 96, 0.30);
      margin-left: 2px;
      position: relative;
      top: 1px;
    }

    em {
      color: #B5B9BD;
      font-style: normal;
    }
  }

  a {
    color: @gray;
    &:hover, &:active, &:focus {
      color: darken(@gray, 10);
      text-decoration: none;
    }
  }

  h1 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
  }

  .icon-sentry-logo-full, .icon-sentry-logo {
    font-size: 24px;
    position: relative;
    top: 0;
  }

  .icon-sentry-logo-full {
    top: -4px;
  }

  .nav-tabs {
    margin-top: -2px;
    li {
      margin: 0 0 0 20px;

      a {
        padding-bottom: 19px;
      }
    }
  }
}

.range-picker {
  .dropdown-toggle {
    font-size: 18px;
    font-weight: 500;

    .icon-arrow-down {
      top: 2px;
      margin-left: 4px;
    }
  }
}

.messages-container {
  position: fixed;
  bottom: 0;
  left: 20 + @sidebar-width;
  right: 20px;
  z-index: 1000;
  margin: 0;
}

/**
* Rightbar
* ============================================================================
*/

.rightbar {
  display: none;
  position: absolute;
  width: 220px;
  right: -20px;
  top: -11px;

  .nav-stacked {
    li, li+li {
      margin: 0;
    }
    a {
      font-weight: 500;
      font-size: 15px;
      background: none;
      border-radius: 0;
      padding: 15px 20px;

      &:hover {
        background: rgba(105, 109, 128, .06);
      }

      .badge {
        background: @red;
      }
    }

    li.active a {
      font-weight: 600;
      background: @blue;
    }
  }

  h6 {
    color: darken(@gray-light, 10);
    margin: 15px 20px;
  }
}

/**
* App Sidebar
* ============================================================================
*/

.app-sidebar {
  background: @grayDark;
  color: #fff;
  width: @sidebar-width;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  color: #fff;

  .transition(.1s left ease-in-out);

  a {
    color: #fff;

    &.divider {
      padding-left: 10px;
    }
  }

  .icon-settings {
    opacity: .5;
    font-size: 14px;
    color: lighten(@gray, 6);

    &:hover {
      opacity: 1;
    }
  }

  h6 {
    margin: 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: lighten(@gray, 6);

    &:first-child {
      margin-top: 5px;
    }

    a {
      color: lighten(@gray, 6);
    }
  }

  ul {
    margin-bottom: 15px;
  }

  li {
    a {
      .truncate();
    }
  }

  li.active {
    position: relative;
    &:before {
      width: 6px;
      height: 6px;
      background: @blue;
      border-radius: 6px;
      content: "";
      display: block;
      position: absolute;
      left: -12px;
      top: 6px;
    }
  }

  .icon {
    opacity: .5;
    margin-right: 10px;
    position: relative;
    top: 1px;
    color: #ACB9C5;
  }

  .team-filter {
    .form-control {
      border: none;
      box-shadow: 0;
      padding: 4px 10px;
      background: #fff;
    }
  }

  h6, .truncate li strong a, .username {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .app-sidebar-content {
    position: fixed;
    left: 0;
    top: 66px;
    bottom: 60px;
    padding: 0 20px 20px;
    width: @sidebar-width;
    overflow: auto;
    .transition(.1s left ease-in-out);

    // Scrollbar

    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-track {
        background: #252A31;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background: @grayDark;
        border: 1px solid #252A31;
    }
  }
}

/**
* Content sidebar
* ============================================================================
*/

.content .sidebar {
  float: right;
}

/**
* Reset Grid
* ============================================================================
*/

.row {
  margin-left: -10px;
  margin-right: -10px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 10px;
  padding-left: 10px;
}

/**
* Footer
* ============================================================================
*/

footer {
  line-height: 30px;
  text-align: center;
  color: lighten(@gray, 25);
  font-weight: 500;
  border-top: 1px solid lighten(@trim, 3);
  margin-top: 20px;
  padding: 22px 0;

  .pull-right {
    a {
      margin-left: 20px;
    }
  }

  a {
    color: lighten(@gray, 25);
    &:hover {
      color: @gray;
    }
  }

  .icon-sentry-logo {
    color: lighten(@gray, 25);
    font-size: 28px;
    width: 32px;
    margin: 0 auto;
    display: block;
  }
}

/**
* Windowed
* ============================================================================
*/

.windowed-small {
  background: #fbfbfc;
  padding-top: 100px;

  .container {
    max-width: 600px !important;
    width: auto !important;
    margin: 0 auto;
  }

  header {
    margin-top: -100px;
    background: none;
    margin-bottom: 30px;
  }

  footer {
    display: none;
  }
}

/**
* Print
* ============================================================================
*/

@media print {
    body {
        color: @black;
    }
    header {
        display: none;
    }
    .sidebar, .toolbar {
      display: none;
    }
    .content {
      padding: 0 !important;
    }
    #CModal, footer { display: none; }
}

/**
* Responsive small screens
* ============================================================================
*/
@media(max-width:767px) {
  body {
    overflow-x: hidden;
    zoom: .85;
  }

  header {
    padding: 15px 0 13px;

    .icon-sentry-logo {
      font-size: 16px;
      padding-top: 3px;
    }

    .dropdown, .project-dropdown {
      position: static;
      padding-top: 3px;

      .team-name {
        font-size: 14px;
      }

      .dropdown-menu {
        width: auto;
        left: 0;
        right: 0;
        top: 40px;
        border-radius: 0;
        max-height: 9999px;
        overflow-x: hidden;

        ul li {
          width: 100%;
          font-size: 16px;
          margin: 0;

          a {
            padding: 10px 20px;
            left: 0;
            margin-left: -20px;
            margin-right: -20px;
          }
        }
      }
    }
  }
}

/**
* Responsive large screens
* ============================================================================
*/

@media(min-width: 1720px) {
  body {
    zoom: 150%;
  }
}


Fix incident list padding

Fix incident list padding

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