Create modals.less

Create modals.less

//
// Modals
// --------------------------------------------------

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and shit

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal;
  -webkit-overflow-scrolling: touch;

  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate3d(0, -25%, 0);
    .transition-transform(~"0.3s ease-out");
  }
  &.in .modal-dialog { .translate3d(0, 0, 0) }
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

// Shell div to position the modal with bottom padding
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

// Actual modal
.modal-content {
  position: relative;
  background-color: @modal-content-bg;
  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
  border: 1px solid @modal-content-border-color;
  border-radius: @border-radius-large;
  .box-shadow(0 3px 9px rgba(0,0,0,.5));
  background-clip: padding-box;
  // Remove focus outline from opened modal
  outline: 0;
}

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal-background;
  background-color: @modal-backdrop-bg;
  // Fade for backdrop
  &.fade { .opacity(0); }
  &.in { .opacity(@modal-backdrop-opacity); }
}

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
  padding: @modal-title-padding;
  border-bottom: 1px solid @modal-header-border-color;
  min-height: (@modal-title-padding + @modal-title-line-height);
}
// Close icon
.modal-header .close {
  margin-top: -2px;
}

// Title text within header
.modal-title {
  margin: 0;
  line-height: @modal-title-line-height;
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  padding: @modal-inner-padding;
}

// Footer (for actions)
.modal-footer {
  padding: @modal-inner-padding;
  text-align: right; // right align buttons
  border-top: 1px solid @modal-footer-border-color;
  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons

  // Properly space out buttons
  .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .btn-group .btn + .btn {
    margin-left: -1px;
  }
  // and override it for block buttons as well
  .btn-block + .btn-block {
    margin-left: 0;
  }
}

// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

// Scale up the modal
@media (min-width: @screen-sm-min) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    width: @modal-md;
    margin: 30px auto;
  }
  .modal-content {
    .box-shadow(0 5px 15px rgba(0,0,0,.5));
  }

  // Modal sizes
  .modal-sm { width: @modal-sm; }
}

@media (min-width: @screen-md-min) {
  .modal-lg { width: @modal-lg; }
}

error: pathspec 'static/app/components/bootstrap/css/less/modals.less' did not match any file(s) known to git


preview blur increased

preview blur increased

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/alfa-x/calendar-es6.git/'


add icon/mdi less

add icon/mdi less

.mdi-navigation-menu {
	background-image: url('/vendor/icon/navigation-menu.svg');
}

.mdi-content-inbox {
	background-image: url('/vendor/icon/content-inbox.svg');
}

.mdi-content-draft {
	background-image: url('/vendor/icon/content-draft.svg');
}

.mdi-content-send {
	background-image: url('/vendor/icon/content-send.svg');
}

.mdi-action-query-builder {
	background-image: url('/vendor/icon/action-query-builder.svg');
}

.mdi-action-done {
	background-image: url('/vendor/icon/action-done.svg');
}

error: pathspec 'lib/skin/material/icon/mdi.less' did not match any file(s) known to git


Fix hidden icon being chopped off and position

@import "icon-variables";
@import "icon-font";
@import "ui-mixins";

// - - - - - - - - - - - - - - -
// ICONS BASED ON FILE EXTENSION
// - - - - - - - - - - - - - - -

// PROJECT / REPO ICON
.name.icon.icon-repo {

  // TEXT
  font-weight: bold;
  padding: 0px 0px 0px 5px;
  position: relative;
  display: inline-block;
  top: -1px;

  // ICON
  &:before {
    color: #29A8DE;
    content: '\e601';
    display: inline-block;
    font-family: icomoon;
    font-size: 20px;
    left: -5px;
    position: relative;
    top: 5px;
  }

}

// OPEN/CLOSE SELECTOR FOR FOLDERS
.header.list-item:before {
  color: @color-default;
}

// DIRECTORY ICONS
.name.icon.icon-file-directory {

  // TEXT
  background: none;
  border: none;
  color: @color-default;
  display: inline-block;
  font-weight: bold;
  padding: 0px 0px 0px 2px;
  position: relative;
  top: -1px;

  // ICON
  &:before {
    color: @color-default;
    content: '\e613';
    display: inline-block;
    font-family: icomoon;
    font-size: 13px;
    left: -2px;
    position: relative;
    top: 1px;
  }
}

// DEFAULT / FALLBACK ICON
.name.icon {
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 0;

  &:before {
    font-family: icomoon;
    content: @icon-default;
    font-size: 15px;
    display: inline-block;
    position: relative;
    top: 2px;
    left: -3px;
    margin-right: 2px;
    color: @color-default;
  }

}

// DEFAULT TAB ICON
.tab-bar .tab .title {
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 0;
  width: 100%;

  &:before {
    font-family: icomoon;
    content: @icon-default;
    font-size: 15px;
    position: relative;
    top: 2px;
    left: -4px;
    /* margin-right: -3px; */
    color: @color-default;
  }
}

.tab-bar .tab.active .title {
  top: -2px;
}

// HIDDEN / IGNORED STYLES

.status-ignored {

  .header.list-item:before {
    color: @text-color-ignored;
  }

  .name.icon {
    color: @text-color-ignored;

    &:before {
      color: @text-color-ignored;
    }

  }

}

/* .icon-tab(extension, type, font-size, top, right, left, offset)
default = '', '', 20px, 6px, -3px, -5px, -4px

.icon-tree(extension, type, font-size, top, right, left, offset)
default = '', '', 20px, 6px, 0px, -5px, -4px */

.tab-bar .tab .title.icon-tools {
  position: relative;
  display: inline-block;
  top: 2px;
  padding: 0;
  width: 100%;

  &:before {
    font-family: icomoon;
    content: @icon-settings;
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -2px;
    margin-right: 5px;
    color: @color-settings;
  }
}

// CSS
.icon-tab('.css', css, 20px, 6px, -1px, -5px, -5px);
.icon-tree('.css', css, 20px, 5px, 1px, -6px, -3px);

// CSON
.icon-tab('.cson', 'json', 20px, 6px, -3px, -5px, -4px);
.icon-tree('.cson', 'json', 20px, 5px, 2px, -5px, -4px);

// Handlebars
.icon-tab('.hbs', 'handlebars', 22px, 6px, 0px, -5px );
.icon-tree('.hbs', 'handlebars', 20px, 5px, 2px, -5px, -3px);

// Hidden files
.icon-tab('.gitignore', 'hidden', 20px, 6px, -3px, -3px, -5px);
.icon-tree('.gitignore', 'hidden', 20px, 6px, 1px, -5px, -4px);

.icon-tab('.gitmodules', 'hidden', 20px, 6px, -3px, -3px, -5px);
.icon-tree('.gitmodules', 'hidden', 20px, 6px, 1px, -5px, -4px);

.icon-tab('.config', 'hidden', 20px, 6px, -3px, -3px, -5px);
.icon-tree('.config', 'hidden', 20px, 6px, 1px, -5px, -4px);

.icon-tab('.DS_Store', 'hidden', 20px, 6px, -3px, -3px, -5px);
.icon-tree('.DS_Store', 'hidden', 20px, 6px, 1px, -5px, -4px);

// HTML
.icon-tab('.html', html, 22px, 6px);
.icon-tree('.html', html, 22px, 5px, 2px, -6px,-5px);

// Jade
.icon-tab('.jade', 'jade', 20px, 5px, -3px, -5px, -5px);
.icon-tree('.jade', 'jade', 20px, 5px, 2px, -5px, -3px);

// JavaScript
.icon-tab('.js', 'js', 20px, 6px, -3px, -5px, -5px);
.icon-tree('.js', 'js', 20px, 6px, 2px, -6px, -4px);

// Coffescript
.icon-tab('.coffee', 'coffee', 16px, 5px, 4px, 2px, -3px);
.icon-tree('.coffee', 'coffee', 15px, 4px, 2px, -1px, -1px);

// JSON
.icon-tab('.json', 'json', 20px, 5px, -3px, -5px, -5px);
.icon-tree('.json', 'json', 20px, 5px, 2px, -5px, -3px);

// LESS
.icon-tab('.less', less, 20px, 6px, -3px, -5px, -5px);
.icon-tree('.less', less, 20px, 6px, 2px, -5px, -3px);

// LICENSE
.icon-tab('LICENSE', 'license', 15px, 3px, 2px, 0px, -2px);
.icon-tree('LICENSE', 'license', 16px, 3px, 2px, -3px, -1px);
.icon-tab('License', 'license', 15px, 3px, 2px, 0px, -4px);
.icon-tree('License', 'license', 16px, 3px, 2px, -3px, -2px);
.icon-tab('license', 'license', 15px, 3px, 2px, 0px, -4px);
.icon-tree('license', 'license', 16px, 3px, 2px, -3px, -2px);

// Markdown
.icon-tab('.md', 'md', 20px, 5px, -3px, -5px, -5px);
.icon-tree('.md', 'md', 20px, 5px, 2px, -5px, -2px);

// Mustache
.icon-tab('.mustache', 'mustache', 22px, 6px, 0px, -5px );
.icon-tree('.mustache', 'mustache', 20px, 5px, 2px, -5px, -3px);

// NPM
.icon-tab('npm-debug.log', 'npm', 20px, 6px, 0px, -5px, -4px);
.icon-tree('npm-debug.log', 'npm', 20px, 6px, 2px, -5px, -4px);
.icon-tab('.npmignore', 'npm', 20px, 6px, 0px, -5px, -4px);
.icon-tree('.npmignore', 'npm', 20px, 6px, 2px, -5px, -4px);

// PHP
.icon-tab('.php', 'php', 24px, 6px, -3px, -5px, -6px);
.icon-tree('.php', 'php', 24px, 6px, 3px, -7px, -5px);

// Procfile
.icon-tab('procfile', 'procfile', 14px, 2px, 3px, 0px, 0px);
.icon-tree('procfile', 'procfile', 14px, 2px, 3px, -1px, -1px);
.icon-tab('Procfile', 'procfile', 14px, 2px, 3px, 0px, 0px);
.icon-tree('Procfile', 'procfile', 14px, 2px, 3px, -1px, -1px);
.icon-tab('PROCFILE', 'procfile', 14px, 2px, 3px, 0px, 0px);
.icon-tree('PROCFILE', 'procfile', 14px, 2px, 3px, -1px, -1px);

// Python
.icon-tab('.py', 'py', 20px, 5px, -3px, -5px, -5px);
.icon-tree('.py', 'py', 20px, 5px, 3px, -4px, -3px);

// Ruby
.icon-tab('.rb', 'rb', 15px, 3px, -1px, -5px, -2px);
.icon-tree('.rb', 'rb', 15px, 3px, 4px, -1px, -1px);

// Sass
.icon-tab('.sass', 'sass', 20px, 4px, -3px, -5px, -5px);
.icon-tree('.sass', 'sass', 20px, 5px, 4px, -3px, -3px);
.icon-tab('.scss', 'sass', 20px, 4px, -3px, -5px, -5px);
.icon-tree('.scss', 'sass', 20px, 5px, 4px, -3px, -3px);

// Settings
.icon-tab('.svgx', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.svgx', 'img', 15px, 3px, 2px, -3px, -2px);

// Stylus
.icon-tab('.styl', 'styl', 20px, 5px, -2px, -5px, -5px);
.icon-tree('.styl', 'styl', 20px, 4px, 3px, -4px, -3px);

// XML
.icon-tab('.xml', 'xml', 15px, 2px, 3px, 0px, -2px);
.icon-tree('.xml', 'xml', 15px, 2px, 2px, -2px, -1px);

// IMAGES
.icon-tab('.ai', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.ai', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.bpm', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.bpm', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.gif', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.gif', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.jpeg', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.jpeg', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.jpg', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.jpg', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.png', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.png', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.psd', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.psd', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.svg', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.svg', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.svgx', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.svgx', 'img', 15px, 3px, 2px, -3px, -2px);

// THESE NEED TO COME LAST SO THE DON'T GET OVERRIDEN!

// Bower
.icon-tab('bower.json', 'bower', 20px, 5px, 2px, -4px, -5px);
.icon-tree('bower.json', 'bower', 20px, 5px, 2px, -4px, -3px);
.icon-tab('Bower.json', 'bower', 20px, 5px, 2px, -4px, -5px);
.icon-tree('Bower.json', 'bower', 20px, 5px, 2px, -4px, -3px);
.icon-tab('BOWER.json', 'bower', 20px, 5px, 2px, -4px, -5px);
.icon-tree('BOWER.json', 'bower', 20px, 5px, 2px, -4px, -3px);
.icon-tab('.bowerrc', 'bower', 20px, 5px, 2px, -4px, -5px);
.icon-tree('.bowerrc', 'bower', 20px, 5px, 2px, -4px, -3px);

// Grunt
.icon-tab('gruntfile.js', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('gruntfile.js', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('Gruntfile.js', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('Gruntfile.js', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('GruntFile.js', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('GruntFile.js', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('GRUNTFILE.js', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('GRUNTFILE.js', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('gruntfile.coffee', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('gruntfile.coffee', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('Gruntfile.coffee', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('Gruntfile.coffee', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('GruntFile.coffee', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('GruntFile.coffee', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('GRUNTFILE.coffee', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('GRUNTFILE.coffee', 'grunt', 18px, 4px, 2px, -5px, -2px);

// Gulp
.icon-tab('gulpfile.js', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('gulpfile.js', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('Gulpfile.js', 'gulp', 17px, 3px, -3px, -5px, -3px);
.icon-tree('Gulpfile.js', 'gulp', 20px, 4px, 2px, -5px, -3px);
.icon-tab('GulpFile.js', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('GulpFile.js', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('GULPFILE.js', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('GULPFILE.js', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('gulpfile.coffee', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('gulpfile.coffee', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('Gulpfile.coffee', 'gulp', 17px, 3px, -3px, -5px, -3px);
.icon-tree('Gulpfile.coffee', 'gulp', 20px, 4px, 2px, -5px, -3px);
.icon-tab('GulpFile.coffee', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('GulpFile.coffee', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('GULPFILE.coffee', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('GULPFILE.coffee', 'gulp', 20px, 6px, 2px, -5px, -3px);

// - - - - - - -
// STATUS COLORS
// - - - - - - -

// STATUS: ADDED
.directory.entry.list-nested-item.status-added > .header.list-item {

  // OPEN/CLOSE SELECTOR
  &:before {
    color: @color-status-added;
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-added;

    // ICON
    &:before {
      color: @color-status-added;
    }
  }

}

  .file.entry.list-item.status-added {

    .name.icon {

      // TEXT
      color: @color-status-added;

      // ICON
      &:before {
        color: @color-status-added !important;
      }

      &.icon-file-text:before {
        color: @color-status-added;
      }
    }
  }

// STATUS: MODIFIED
.directory.entry.list-nested-item.status-modified > .header.list-item {

  // OPEN/CLOSE SELECTOR
  &:before {
    color: @color-status-modified;
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-modified;

    // ICON
    &:before {
      color: @color-status-modified;
    }
  }

}

  .file.entry.list-item.status-modified {
    .name.icon {

      // TEXT
      color: @color-status-modified;

      // ICON
      &:before {
        color: @color-status-modified;
      }
    }
  }

// STATUS: IGNORED
.directory.entry.list-nested-item.status-ignored {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-ignored;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-ignored;

    // ICON
    &:before {
      color: @color-status-ignored;
    }
  }

}

  .file.entry.list-item.status-ignored {
    .name.icon {

      // TEXT
      color: @color-status-ignored;

      // ICON
      &:before {
        color: @color-status-ignored;
      }
    }
  }

// STATUS: REMOVED
.directory.entry.list-nested-item.status-removed {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-removed;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-removed;

    // ICON
    &:before {
      color: @color-status-removed;
    }
  }

}

  // FILE
  .file.entry.list-item.status-removed {
    .name.icon {

      // TEXT
      color: @color-status-removed;

      // ICON
      &:before {
        color: @color-status-removed;
      }
    }
  }

// STATUS: RENAMED
.directory.entry.list-nested-item.status-renamed {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-renamed;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-renamed;

    // ICON
    &:before {
      color: @color-status-renamed;
    }
  }

}

  // FILE
  .file.entry.list-item.status-renamed {
    .name.icon {

      // TEXT
      color: @color-status-renamed;

      // ICON
      &:before {
        color: @color-status-renamed;
      }
    }
  }

@import "icon-variables";
@import "icon-font";
@import "ui-mixins";

// - - - - - - - - - - - - - - -
// ICONS BASED ON FILE EXTENSION
// - - - - - - - - - - - - - - -

// PROJECT / REPO ICON
.name.icon.icon-repo {

  // TEXT
  font-weight: bold;
  padding: 0px 0px 0px 5px;
  position: relative;
  display: inline-block;
  top: -1px;

  // ICON
  &:before {
    color: #29A8DE;
    content: '\e601';
    display: inline-block;
    font-family: icomoon;
    font-size: 20px;
    left: -5px;
    position: relative;
    top: 5px;
  }

}

// OPEN/CLOSE SELECTOR FOR FOLDERS
.header.list-item:before {
  color: @color-default;
}

// DIRECTORY ICONS
.name.icon.icon-file-directory {

  // TEXT
  background: none;
  border: none;
  color: @color-default;
  display: inline-block;
  font-weight: bold;
  padding: 0px 0px 0px 2px;
  position: relative;
  top: -1px;

  // ICON
  &:before {
    color: @color-default;
    content: '\e613';
    display: inline-block;
    font-family: icomoon;
    font-size: 13px;
    left: -2px;
    position: relative;
    top: 1px;
  }
}

// DEFAULT / FALLBACK ICON
.name.icon {
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 0;

  &:before {
    font-family: icomoon;
    content: @icon-default;
    font-size: 15px;
    display: inline-block;
    position: relative;
    top: 2px;
    left: -3px;
    margin-right: 2px;
    color: @color-default;
  }

}

// DEFAULT TAB ICON
.tab-bar .tab .title {
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 0;
  width: 100%;

  &:before {
    font-family: icomoon;
    content: @icon-default;
    font-size: 15px;
    position: relative;
    top: 2px;
    left: -4px;
    /* margin-right: -3px; */
    color: @color-default;
  }
}

.tab-bar .tab.active .title {
  top: -2px;
}

// HIDDEN / IGNORED STYLES

.status-ignored {

  .header.list-item:before {
    color: @text-color-ignored;
  }

  .name.icon {
    color: @text-color-ignored;

    &:before {
      color: @text-color-ignored;
    }

  }

}

/* .icon-tab(extension, type, font-size, top, right, left, offset)
default = '', '', 20px, 6px, -3px, -5px, -4px

.icon-tree(extension, type, font-size, top, right, left, offset)
default = '', '', 20px, 6px, 0px, -5px, -4px */

.tab-bar .tab .title.icon-tools {
  position: relative;
  display: inline-block;
  top: 2px;
  padding: 0;
  width: 100%;

  &:before {
    font-family: icomoon;
    content: @icon-settings;
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -2px;
    margin-right: 5px;
    color: @color-settings;
  }
}

// CSS
.icon-tab('.css', css, 20px, 6px, -1px, -5px, -5px);
.icon-tree('.css', css, 20px, 5px, 1px, -6px, -3px);

// CSON
.icon-tab('.cson', 'json', 20px, 6px, -3px, -5px, -4px);
.icon-tree('.cson', 'json', 20px, 5px, 2px, -5px, -4px);

// Handlebars
.icon-tab('.hbs', 'handlebars', 22px, 6px, 0px, -5px );
.icon-tree('.hbs', 'handlebars', 20px, 5px, 2px, -5px, -3px);

// Hidden files
.icon-tab('.gitignore', 'hidden', 20px, 6px, -3px, -5px, -4px);
.icon-tree('.gitignore', 'hidden', 20px, 6px, 1px, -5px, -4px);

.icon-tab('.gitmodules', 'hidden', 20px, 6px, -3px, -5px, -4px);
.icon-tree('.gitmodules', 'hidden', 20px, 6px, 1px, -5px, -4px);

.icon-tab('.config', 'hidden', 20px, 6px, -3px, -5px, -4px);
.icon-tree('.config', 'hidden', 20px, 6px, 1px, -5px, -4px);

.icon-tab('.DS_Store', 'hidden', 20px, 6px, -3px, -5px, -4px);
.icon-tree('.DS_Store', 'hidden', 20px, 6px, 1px, -5px, -4px);

// HTML
.icon-tab('.html', html, 22px, 6px);
.icon-tree('.html', html, 22px, 5px, 2px, -6px,-5px);

// Jade
.icon-tab('.jade', 'jade', 20px, 5px, -3px, -5px, -5px);
.icon-tree('.jade', 'jade', 20px, 5px, 2px, -5px, -3px);

// JavaScript
.icon-tab('.js', 'js', 20px, 6px, -3px, -5px, -5px);
.icon-tree('.js', 'js', 20px, 6px, 2px, -6px, -4px);

// Coffescript
.icon-tab('.coffee', 'coffee', 16px, 5px, 4px, 2px, -3px);
.icon-tree('.coffee', 'coffee', 15px, 4px, 2px, -1px, -1px);

// JSON
.icon-tab('.json', 'json', 20px, 5px, -3px, -5px, -5px);
.icon-tree('.json', 'json', 20px, 5px, 2px, -5px, -3px);

// LESS
.icon-tab('.less', less, 20px, 6px, -3px, -5px, -5px);
.icon-tree('.less', less, 20px, 6px, 2px, -5px, -3px);

// LICENSE
.icon-tab('LICENSE', 'license', 15px, 3px, 2px, 0px, -2px);
.icon-tree('LICENSE', 'license', 16px, 3px, 2px, -3px, -1px);
.icon-tab('License', 'license', 15px, 3px, 2px, 0px, -4px);
.icon-tree('License', 'license', 16px, 3px, 2px, -3px, -2px);
.icon-tab('license', 'license', 15px, 3px, 2px, 0px, -4px);
.icon-tree('license', 'license', 16px, 3px, 2px, -3px, -2px);

// Markdown
.icon-tab('.md', 'md', 20px, 5px, -3px, -5px, -5px);
.icon-tree('.md', 'md', 20px, 5px, 2px, -5px, -2px);

// Mustache
.icon-tab('.mustache', 'mustache', 22px, 6px, 0px, -5px );
.icon-tree('.mustache', 'mustache', 20px, 5px, 2px, -5px, -3px);

// NPM
.icon-tab('npm-debug.log', 'npm', 20px, 6px, 0px, -5px, -4px);
.icon-tree('npm-debug.log', 'npm', 20px, 6px, 2px, -5px, -4px);
.icon-tab('.npmignore', 'npm', 20px, 6px, 0px, -5px, -4px);
.icon-tree('.npmignore', 'npm', 20px, 6px, 2px, -5px, -4px);

// PHP
.icon-tab('.php', 'php', 24px, 6px, -3px, -5px, -6px);
.icon-tree('.php', 'php', 24px, 6px, 3px, -7px, -5px);

// Procfile
.icon-tab('procfile', 'procfile', 14px, 2px, 3px, 0px, 0px);
.icon-tree('procfile', 'procfile', 14px, 2px, 3px, -1px, -1px);
.icon-tab('Procfile', 'procfile', 14px, 2px, 3px, 0px, 0px);
.icon-tree('Procfile', 'procfile', 14px, 2px, 3px, -1px, -1px);
.icon-tab('PROCFILE', 'procfile', 14px, 2px, 3px, 0px, 0px);
.icon-tree('PROCFILE', 'procfile', 14px, 2px, 3px, -1px, -1px);

// Python
.icon-tab('.py', 'py', 20px, 5px, -3px, -5px, -5px);
.icon-tree('.py', 'py', 20px, 5px, 3px, -4px, -3px);

// Ruby
.icon-tab('.rb', 'rb', 15px, 3px, -1px, -5px, -2px);
.icon-tree('.rb', 'rb', 15px, 3px, 4px, -1px, -1px);

// Sass
.icon-tab('.sass', 'sass', 20px, 4px, -3px, -5px, -5px);
.icon-tree('.sass', 'sass', 20px, 5px, 4px, -3px, -3px);
.icon-tab('.scss', 'sass', 20px, 4px, -3px, -5px, -5px);
.icon-tree('.scss', 'sass', 20px, 5px, 4px, -3px, -3px);

// Settings
.icon-tab('.svgx', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.svgx', 'img', 15px, 3px, 2px, -3px, -2px);

// Stylus
.icon-tab('.styl', 'styl', 20px, 5px, -2px, -5px, -5px);
.icon-tree('.styl', 'styl', 20px, 4px, 3px, -4px, -3px);

// XML
.icon-tab('.xml', 'xml', 15px, 2px, 3px, 0px, -2px);
.icon-tree('.xml', 'xml', 15px, 2px, 2px, -2px, -1px);

// IMAGES
.icon-tab('.ai', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.ai', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.bpm', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.bpm', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.gif', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.gif', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.jpeg', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.jpeg', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.jpg', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.jpg', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.png', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.png', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.psd', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.psd', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.svg', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.svg', 'img', 15px, 3px, 2px, -3px, -2px);

.icon-tab('.svgx', 'img', 15px, 3px, 4px, 0px, -3px);
.icon-tree('.svgx', 'img', 15px, 3px, 2px, -3px, -2px);

// THESE NEED TO COME LAST SO THE DON'T GET OVERRIDEN!

// Bower
.icon-tab('bower.json', 'bower', 20px, 5px, 2px, -4px, -5px);
.icon-tree('bower.json', 'bower', 20px, 5px, 2px, -4px, -3px);
.icon-tab('Bower.json', 'bower', 20px, 5px, 2px, -4px, -5px);
.icon-tree('Bower.json', 'bower', 20px, 5px, 2px, -4px, -3px);
.icon-tab('BOWER.json', 'bower', 20px, 5px, 2px, -4px, -5px);
.icon-tree('BOWER.json', 'bower', 20px, 5px, 2px, -4px, -3px);
.icon-tab('.bowerrc', 'bower', 20px, 5px, 2px, -4px, -5px);
.icon-tree('.bowerrc', 'bower', 20px, 5px, 2px, -4px, -3px);

// Grunt
.icon-tab('gruntfile.js', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('gruntfile.js', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('Gruntfile.js', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('Gruntfile.js', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('GruntFile.js', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('GruntFile.js', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('GRUNTFILE.js', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('GRUNTFILE.js', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('gruntfile.coffee', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('gruntfile.coffee', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('Gruntfile.coffee', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('Gruntfile.coffee', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('GruntFile.coffee', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('GruntFile.coffee', 'grunt', 18px, 4px, 2px, -5px, -2px);
.icon-tab('GRUNTFILE.coffee', 'grunt', 15px, 3px, 3px, 0px, -2px);
.icon-tree('GRUNTFILE.coffee', 'grunt', 18px, 4px, 2px, -5px, -2px);

// Gulp
.icon-tab('gulpfile.js', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('gulpfile.js', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('Gulpfile.js', 'gulp', 17px, 3px, -3px, -5px, -3px);
.icon-tree('Gulpfile.js', 'gulp', 20px, 4px, 2px, -5px, -3px);
.icon-tab('GulpFile.js', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('GulpFile.js', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('GULPFILE.js', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('GULPFILE.js', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('gulpfile.coffee', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('gulpfile.coffee', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('Gulpfile.coffee', 'gulp', 17px, 3px, -3px, -5px, -3px);
.icon-tree('Gulpfile.coffee', 'gulp', 20px, 4px, 2px, -5px, -3px);
.icon-tab('GulpFile.coffee', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('GulpFile.coffee', 'gulp', 20px, 6px, 2px, -5px, -3px);
.icon-tab('GULPFILE.coffee', 'gulp', 20px, 6px, -3px, -5px, -3px);
.icon-tree('GULPFILE.coffee', 'gulp', 20px, 6px, 2px, -5px, -3px);

// - - - - - - -
// STATUS COLORS
// - - - - - - -

// STATUS: ADDED
.directory.entry.list-nested-item.status-added > .header.list-item {

  // OPEN/CLOSE SELECTOR
  &:before {
    color: @color-status-added;
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-added;

    // ICON
    &:before {
      color: @color-status-added;
    }
  }

}

  .file.entry.list-item.status-added {

    .name.icon {

      // TEXT
      color: @color-status-added;

      // ICON
      &:before {
        color: @color-status-added !important;
      }

      &.icon-file-text:before {
        color: @color-status-added;
      }
    }
  }

// STATUS: MODIFIED
.directory.entry.list-nested-item.status-modified > .header.list-item {

  // OPEN/CLOSE SELECTOR
  &:before {
    color: @color-status-modified;
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-modified;

    // ICON
    &:before {
      color: @color-status-modified;
    }
  }

}

  .file.entry.list-item.status-modified {
    .name.icon {

      // TEXT
      color: @color-status-modified;

      // ICON
      &:before {
        color: @color-status-modified;
      }
    }
  }

// STATUS: IGNORED
.directory.entry.list-nested-item.status-ignored {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-ignored;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-ignored;

    // ICON
    &:before {
      color: @color-status-ignored;
    }
  }

}

  .file.entry.list-item.status-ignored {
    .name.icon {

      // TEXT
      color: @color-status-ignored;

      // ICON
      &:before {
        color: @color-status-ignored;
      }
    }
  }

// STATUS: REMOVED
.directory.entry.list-nested-item.status-removed {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-removed;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-removed;

    // ICON
    &:before {
      color: @color-status-removed;
    }
  }

}

  // FILE
  .file.entry.list-item.status-removed {
    .name.icon {

      // TEXT
      color: @color-status-removed;

      // ICON
      &:before {
        color: @color-status-removed;
      }
    }
  }

// STATUS: RENAMED
.directory.entry.list-nested-item.status-renamed {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-renamed;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-renamed;

    // ICON
    &:before {
      color: @color-status-renamed;
    }
  }

}

  // FILE
  .file.entry.list-item.status-renamed {
    .name.icon {

      // TEXT
      color: @color-status-renamed;

      // ICON
      &:before {
        color: @color-status-renamed;
      }
    }
  }


added color to burger icons

added color to burger icons

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/orloxx/frontend-arc.git/'


[FIX] web_kanban: alignment of kanban_record with the control panel

.o_kanban_view {

    &.o_kanban_mobile {
        .o_kanban_record {
            width: 400px;
        }
        span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
        }
    }

    &.o_kanban_dashboard.o_kanban_ungrouped {

        .o_visible {
            width: 100%;

            /* This is a hack ; without this, a scrollbar appears
             * to scroll horizontally because of inline-block and width: 100%,
             * but they are both necessary.
            */
            overflow: hidden;
        }

        /* This is a hack but this is the least ugly way to do it:
         * We want two blocks (a visible one and an invisible one)
         * to be overlap but both height should be equal to the
         * height of the biggest block. Solution : put 0 width for
         * the invisible on. The 0 padding and margin is mandatory for
         * the elements to use the same space in both state (visible
         * and invisible).
        */
        .o_invisible {
            width: 0;
            visibility: hidden;
            padding-left: 0px !important;
            padding-right: 0px !important;
            margin-left: 0px !important;
            margin-right: 0px !important;
            overflow: hidden;

            * {
                padding-left: 0px !important;
                padding-right: 0px !important;
                margin-left: 0px !important;
                margin-right: 0px !important;
            }

            .oe_kanban_colorpicker {

                li {
                    height: 0px;
                }
            }
        }

        // If invisible, elem will no take more than its original height
        a, span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
            display: block;
        }

        .o_kanban_record {
            padding: 0;
            position: relative;
            margin-right: 16px;
            @media (max-width: @grid-float-breakpoint) {
                margin-bottom: 10px;
                margin-right: 0px;
            }
        }

        a {
            color: @odoo-brand-optional;
        }

        .o_kanban_card_header {
            .o-flex-display();
            background-color: lightgrey;
            position: relative;

            .o_kanban_card_header_title {
                .o-flex(3, 0, 0);
                padding: 8px 16px;

                .o_primary {
                    color: @odoo-brand-optional;
                    font-weight: 700;
                }

                .o_secondary {
                }
            }

            .o_kanban_manage_button_section {
                .o-flex(1, 0, 0);
                padding: 16px;

                .o_kanban_manage_toggle_button {
                    text-align: right;
                }
            }
        }

        .o_kanban_card_content {
            display: inline-block;
            vertical-align: top;

            .o_kanban_primary_left {
                padding: 16px;
            }
            .o_kanban_primary_right {
                padding: 16px;
            }
            .o_kanban_primary_bottom {
                background-color: lightgrey;
                position: absolute;
                bottom: 0;
                padding: 15px;
            }
        }

        .o_kanban_card_manage_pane {
            display: inline-block;
            vertical-align: top;
            padding: 0 8px;
        }

        .o_kanban_card_manage_section {
            padding: 8px;
        }

        .o_kanban_card_manage_title {
            font-weight: bold;
            border-color: lightgrey;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            margin-bottom: 8px;
            padding-bottom: 8px;
        }

        .o_kanban_card_manage_settings {
            text-align: right;
            padding: 8px;

            border-color: lightgrey;
            border-top-style: solid;
            border-top-width: 1px;
        }

        .oe_kanban_colorpicker {
            height: 20px;
        }
    }
}

.o_kanban_view {

    &.o_kanban_mobile {
        .o_kanban_record {
            width: 400px;
        }
        span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
        }
    }

    &.o_kanban_dashboard {

        .o_visible {
            width: 100%;
        }

        /* This is a hack but this is the least ugly way to do it:
         * We want two blocks (a visible one and an invisible one)
         * to be overlap but both height should be equal to the
         * height of the biggest block. Solution : put 0 width for
         * the invisible on. The 0 padding and margin is mandatory for
         * the elements to use the same space in both state (visible
         * and invisible).
        */
        .o_invisible {
            width: 0;
            visibility: hidden;
            padding-left: 0px !important;
            padding-right: 0px !important;
            margin-left: 0px !important;
            margin-right: 0px !important;

            * {
                padding-left: 0px !important;
                padding-right: 0px !important;
                margin-left: 0px !important;
                margin-right: 0px !important;
            }

            .oe_kanban_colorpicker {

                li {
                    height: 0px;
                }
            }
        }

        // If invisible, elem will no take more than its original height
        a, span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
            display: block;
        }

        .o_kanban_record {
            padding: 0;
            position: relative;
            margin: 4px 8px;
        }

        a {
            color: @odoo-brand-optional;
        }

        .o_kanban_card_header {
            .o-flex-display();
            background-color: lightgrey;
            position: relative;

            .o_kanban_card_header_title {
                .o-flex(3, 0, 0);
                padding: 8px 16px;

                .o_primary {
                    color: @odoo-brand-optional;
                    font-weight: 700;
                }

                .o_secondary {
                }
            }

            .o_kanban_manage_button_section {
                .o-flex(1, 0, 0);
                padding: 16px;

                .o_kanban_manage_toggle_button {
                    text-align: right;
                }
            }
        }

        .o_kanban_card_content {
            display: inline-block;
            vertical-align: top;

            .o_kanban_primary_left {
                padding: 16px;
            }
            .o_kanban_primary_right {
                padding: 16px;
            }
            .o_kanban_primary_bottom {
                background-color: lightgrey;
                position: absolute;
                bottom: 0;
                padding: 15px;
            }
        }

        .o_kanban_card_manage_pane {
            display: inline-block;
            vertical-align: top;
            padding: 0 8px;
        }

        .o_kanban_card_manage_section {
            padding: 8px;
        }

        .o_kanban_card_manage_title {
            font-weight: bold;
            border-color: lightgrey;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            margin-bottom: 8px;
            padding-bottom: 8px;
        }

        .o_kanban_card_manage_settings {
            text-align: right;
            padding: 8px;

            border-color: lightgrey;
            border-top-style: solid;
            border-top-width: 1px;
        }
    }
}


NEW: module_pages | portaleditor -> changed the hover-behaviour

@fa-font-path:              "../fonts/fontawesome/font";
@peColorHover:              #9a9a9a;
@peColorHoverBackground:    rgba(154, 154, 154, 0.2);
@peColorBackgroundInactive: #ccc;
@wysiwygOutlineColor:       #afafaf;
@wysiwygOutlineColorHover:  #7b7b7b;
@green:                     #6CB121;
@btn-primary-bg:            @gray-darker;
@gray-darker:               #bfbfbf;

@peButtonToolbarBackground: #5E696D;
@peButtonToolbarBackgroundHover: @green; // #02BAF2;
@peGreenTransparent: rgba(108, 177, 33, 0.48); // #02BAF2;

@border-radius-base:        0px;
@border-radius-small:       0px;
@border-radius-large:       0px;

/* P O R T A L E D I T O R   T O O L B A R */
#peToolbar {

    background: url("../img/navbar-inner-background.png") no-repeat scroll 300px 0 #E5E5E5;
    height: 36px;
    border-bottom: 1px solid #CECECE;

    z-index: 1000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #575757;
    font-size: 10px;
    white-space: nowrap;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    display: block !important;
	line-height: 12px;

    .box-shadow(0 1px 4px rgba(0,0,0,.065));

    table {
        height: 36px;
		margin: 0;
		padding: 0;
        border: none;

        td {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: #575757;
            font-size: 10px;
            white-space: nowrap;
			padding: 0;
			background-color: transparent;
			border: none;

            a {
                color: #575757;
            }
        }
    }

    .info {
        height: 45px;
        margin-left: 200px;

        td.key {
            padding-right: 5px;
            text-align: right;
        }

        td.value {
            padding-right: 20px;
            text-align: left;
        }
    }

    img {
        border: none;
    }

    //Fontawesome configuration start
    .fa-stack {
        vertical-align: -20%;

        .fa-stack-1x {
            text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
        }

        .fa-stack-base-full {
        }
    }

    [class^='fa-']:before, [class*=' fa-']:before, [class^='fa-stack']:before, [class*=' fa-stack']:before  {
        font-size: @font-size-base+4;
    }

    [class*=' fa-stack-1x']:before {
        font-size: @font-size-base - 2;
    }
    //Fontawesome configuration end
}

//push the main content downwards
#peToolbarSpacer {
    clear: both;
    height: 36px;
}

/* P O R T A L E D I T O R   C O N T A I N E R */
.peAddButton, .peElementWrapper,
[data-systemid] {

    //todo: not an elegant solution at all
    padding-top: 5px;

    &:hover {

        display: block !important;
        //outline: 1px solid @peColorHover !important;
        //background: @peColorHoverBackground !important;
        outline: 5px solid @peGreenTransparent !important;

        *[data-kajona-editable] {
            outline: 1px dotted @wysiwygOutlineColor;
        }

        &[data-element='block'] {
            outline: 2px solid @wysiwygOutlineColor;
        }

    }

    &.peInactiveElement {
        background-color: @peColorBackgroundInactive;
        .opacity(0.5);
    }

    .peActionToolbar {
        position: absolute;
        display: none;
        z-index: 400;
        .opacity(1) !important;

        .peActionToolbarActionContainer {

            background-color: @peButtonToolbarBackground;
            a {
                color: #fff;
                display: inline-block;
                width: 20px;
                text-align: center;
                padding: 5px;
                font-size: 13px;
                font-weight:normal;

                i {
                    font-size: 16px;
                }

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

        .peActionToolbarCaretBottom {
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid @peButtonToolbarBackground;
        }

        .peActionToolbarCaretTop {
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid @peButtonToolbarBackground;
        }
    }

    &:hover {
         > .peActionToolbar {
            display: block;
        }
    }

}

.peAddButton {
    .peActionToolbar {
        .peActionToolbarActionContainer {
            a {
                width: auto;
                display: block;
                text-align: left;
                font-family: Arial, Verdana, Helvetica, sans-serif;
            }
        }
    }
}

/* MOVE / DRAG N DROP */

.peElementMovePlaceholder {
    border: 3px dotted @wysiwygOutlineColor;
    .box-sizing(border-box);
}

.pePlaceholderWrapperDropTarget {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,0,0,.05) 8px, rgba(0,0,0,.05) 16px);
    min-height: 20px;
}

.peNewButton {
    margin-bottom: 2px !important;
    display: block !important;
    border: none !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    cursor: pointer;
    color: @btn-primary-bg;
}

.peContextMenu {
    margin: 0px 10px 0;
    background-color: #fff !important;
    border-radius: 0px;
    ul {
        padding: 0;
        list-style: none;
        margin: 0;
        border: 1px solid black;
        background-color: #fff !important;
        a {
            display: block;
            color: #000;
            text-decoration: none;
            padding: 4px;

            &:hover {
                background-color: #cccccc !important;
            }
        }
    }
}

/* WYSIWYG Inline Editor */
body *[data-kajona-editable] {
    &:hover,
    &:focus {
        outline: 1px dotted @wysiwygOutlineColorHover;
    }

    &.peFailed {

        @keyframes shake {
            from, to {
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                transform: translate3d(10px, 0, 0);
            }
        }
        animation: shake 2s ease-in-out;
    }
}

.peProgressIndicator {

    position: absolute;
    width: 1px;
    height: 1px;

    &.peSaving {
        &:after,
        &:before {
            position: absolute;
            right: -20px;
            top: 0;
            transition: all 1s;
            font-family: fontawesome;
        }

        &:after {
            animation: spin 2s infinite linear;
            font-size: @font-size-base + 10;
            content: @fa-var-spinner;
            color: @green;
        }

        &:before {
            padding: 8px 5px;
            font-size: @font-size-base - 2;
            content: @fa-var-check;
            color: grey;
        }
    }

    &.peSaved {
        &:before {
            color: @green;
        }
        &:after {
            opacity: 0;
        }
    }

    &.peFailed {
        &:after,
        &:before {
            color: red;
        }
        &:before {
            font-size: @font-size-base;
            padding: 8px 6px;
            content: @fa-var-exclamation-circle;
        }
        &:after {
            opacity: 0;
        }

        @keyframes shake {
            from, to {
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                transform: translate3d(10px, 0, 0);
            }
        }
        animation: shake 2s ease-in-out;
    }
}

.peLoadingContainer {
    padding: 20px;
    text-align: center;
    overflow: hidden;

    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;

    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;

    &:before {
        font-size: @font-size-base + 10;
        content: @fa-var-spinner;
        color: @green;
        font-family: fontawesome;
    }
}

.loadingContainerBackground {
    position: absolute;
    left: 50%;
    top: 25%;
    z-index: -1;
}

/* DIALOGS / MODALS / BACKDROPS */
.modal {
    text-align: left;

    iframe {
        border: none;
    }

    .modal-header {
        border: none;
        padding: 15px 15px 0 15px;
        h3 {
            margin: 0;
        }
    }

    .modal-footer {
        padding: 0 15px 15px 15px;
        border-top: none;
    }

    .modal-body {
        max-height: none;
    }

    .btn-primary {
        color: #fff;
    }
}

/* TOOLTIPS */
.qtip {
    border-radius: 0px !important;
    box-shadow: 0  2px 10px rgba(0,0,0,.2) !important;

    .qtip-content {
        font-family: @font-family-base !important;
        padding: 4px !important;
        line-height: 120%;
        color: #FFFFFF !important;
        font-size: @font-size-base - 3 !important;
    }
}

@fa-font-path:              "../fonts/fontawesome/font";
@peColorHover:              #9a9a9a;
@peColorHoverBackground:    rgba(154, 154, 154, 0.2);
@peColorBackgroundInactive: #ccc;
@wysiwygOutlineColor:       #afafaf;
@wysiwygOutlineColorHover:  #7b7b7b;
@green:                     #6CB121;
@btn-primary-bg:            @gray-darker;
@gray-darker:               #bfbfbf;

@peButtonToolbarBackground: #5E696D;
@peButtonToolbarBackgroundHover: @green; // #02BAF2;

@border-radius-base:        0px;
@border-radius-small:       0px;
@border-radius-large:       0px;

/* P O R T A L E D I T O R   T O O L B A R */
#peToolbar {

    background: url("../img/navbar-inner-background.png") no-repeat scroll 300px 0 #E5E5E5;
    height: 36px;
    border-bottom: 1px solid #CECECE;

    z-index: 1000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #575757;
    font-size: 10px;
    white-space: nowrap;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    display: block !important;
	line-height: 12px;

    .box-shadow(0 1px 4px rgba(0,0,0,.065));

    table {
        height: 36px;
		margin: 0;
		padding: 0;
        border: none;

        td {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: #575757;
            font-size: 10px;
            white-space: nowrap;
			padding: 0;
			background-color: transparent;
			border: none;

            a {
                color: #575757;
            }
        }
    }

    .info {
        height: 45px;
        margin-left: 200px;

        td.key {
            padding-right: 5px;
            text-align: right;
        }

        td.value {
            padding-right: 20px;
            text-align: left;
        }
    }

    img {
        border: none;
    }

    //Fontawesome configuration start
    .fa-stack {
        vertical-align: -20%;

        .fa-stack-1x {
            text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
        }

        .fa-stack-base-full {
        }
    }

    [class^='fa-']:before, [class*=' fa-']:before, [class^='fa-stack']:before, [class*=' fa-stack']:before  {
        font-size: @font-size-base+4;
    }

    [class*=' fa-stack-1x']:before {
        font-size: @font-size-base - 2;
    }
    //Fontawesome configuration end
}

//push the main content downwards
#peToolbarSpacer {
    clear: both;
    height: 36px;
}

/* P O R T A L E D I T O R   C O N T A I N E R */
.peAddButton, .peElementWrapper,
[data-systemid] {

    //todo: not an elegant solution at all
    padding-top: 5px;

    &:hover {

        display: block !important;
        //outline: 1px solid @peColorHover !important;
        background: @peColorHoverBackground !important;
        outline: 1px solid @peColorHoverBackground !important;

        *[data-kajona-editable] {
            outline: 1px dotted @wysiwygOutlineColor;
        }

        &[data-element='block'] {
            outline: 2px solid @wysiwygOutlineColor;
        }

    }

    &.peInactiveElement {
        background-color: @peColorBackgroundInactive;
        .opacity(0.5);
    }

    .peActionToolbar {
        position: absolute;
        display: none;
        z-index: 400;
        .opacity(1) !important;

        .peActionToolbarActionContainer {

            background-color: @peButtonToolbarBackground;
            a {
                color: #fff;
                display: inline-block;
                width: 20px;
                text-align: center;
                padding: 5px;
                font-size: 13px;
                font-weight:normal;

                i {
                    font-size: 16px;
                }

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

        .peActionToolbarCaretBottom {
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid @peButtonToolbarBackground;
        }

        .peActionToolbarCaretTop {
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid @peButtonToolbarBackground;
        }
    }

    &:hover {
         > .peActionToolbar {
            display: block;
        }
    }

}

.peAddButton {
    .peActionToolbar {
        .peActionToolbarActionContainer {
            a {
                width: auto;
                display: block;
                text-align: left;
                font-family: Arial, Verdana, Helvetica, sans-serif;
            }
        }
    }
}

/* MOVE / DRAG N DROP */

.peElementMovePlaceholder {
    border: 3px dotted @wysiwygOutlineColor;
    .box-sizing(border-box);
}

.pePlaceholderWrapperDropTarget {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,0,0,.05) 8px, rgba(0,0,0,.05) 16px);
    min-height: 20px;
}

.peNewButton {
    margin-bottom: 2px !important;
    display: block !important;
    border: none !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    cursor: pointer;
    color: @btn-primary-bg;
}

.peContextMenu {
    margin: 0px 10px 0;
    background-color: #fff !important;
    border-radius: 0px;
    ul {
        padding: 0;
        list-style: none;
        margin: 0;
        border: 1px solid black;
        background-color: #fff !important;
        a {
            display: block;
            color: #000;
            text-decoration: none;
            padding: 4px;

            &:hover {
                background-color: #cccccc !important;
            }
        }
    }
}

/* WYSIWYG Inline Editor */
body *[data-kajona-editable] {
    &:hover,
    &:focus {
        outline: 1px dotted @wysiwygOutlineColorHover;
    }

    &.peFailed {

        @keyframes shake {
            from, to {
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                transform: translate3d(10px, 0, 0);
            }
        }
        animation: shake 2s ease-in-out;
    }
}

.peProgressIndicator {

    position: absolute;
    width: 1px;
    height: 1px;

    &.peSaving {
        &:after,
        &:before {
            position: absolute;
            right: -20px;
            top: 0;
            transition: all 1s;
            font-family: fontawesome;
        }

        &:after {
            animation: spin 2s infinite linear;
            font-size: @font-size-base + 10;
            content: @fa-var-spinner;
            color: @green;
        }

        &:before {
            padding: 8px 5px;
            font-size: @font-size-base - 2;
            content: @fa-var-check;
            color: grey;
        }
    }

    &.peSaved {
        &:before {
            color: @green;
        }
        &:after {
            opacity: 0;
        }
    }

    &.peFailed {
        &:after,
        &:before {
            color: red;
        }
        &:before {
            font-size: @font-size-base;
            padding: 8px 6px;
            content: @fa-var-exclamation-circle;
        }
        &:after {
            opacity: 0;
        }

        @keyframes shake {
            from, to {
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                transform: translate3d(10px, 0, 0);
            }
        }
        animation: shake 2s ease-in-out;
    }
}

.peLoadingContainer {
    padding: 20px;
    text-align: center;
    overflow: hidden;

    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;

    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;

    &:before {
        font-size: @font-size-base + 10;
        content: @fa-var-spinner;
        color: @green;
        font-family: fontawesome;
    }
}

.loadingContainerBackground {
    position: absolute;
    left: 50%;
    top: 25%;
    z-index: -1;
}

/* DIALOGS / MODALS / BACKDROPS */
.modal {
    text-align: left;

    iframe {
        border: none;
    }

    .modal-header {
        border: none;
        padding: 15px 15px 0 15px;
        h3 {
            margin: 0;
        }
    }

    .modal-footer {
        padding: 0 15px 15px 15px;
        border-top: none;
    }

    .modal-body {
        max-height: none;
    }

    .btn-primary {
        color: #fff;
    }
}

/* TOOLTIPS */
.qtip {
    border-radius: 0px !important;
    box-shadow: 0  2px 10px rgba(0,0,0,.2) !important;

    .qtip-content {
        font-family: @font-family-base !important;
        padding: 4px !important;
        line-height: 120%;
        color: #FFFFFF !important;
        font-size: @font-size-base - 3 !important;
    }
}


Remove hevnly citizen styling, as we don't use it right now

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/hevnly/asset-bazaar.git/'


hiding breadcrumb overflow instead of wrapping to two lines

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/pradeepmurugesan/incubator-freemarker-docgen.git/'


margin-top on more button on sabnzbd module

@import "mixins.less";

#sabnzbd
{
  position: relative;

  > .inner {
    line-height: 1.3em;
    padding: 0 15px 15px;
  }

  .inner {
    #status {
      background: url(/static/images/alpha/fff_10.png);
      border: 1px solid #222;
      padding: 4px 8px 2px;
      font-size: 10px;
      left: 50%;
      margin-left: -58px;
      position: absolute;
      text-align: center;
      top: 14px;
      cursor: pointer;
      width: 100px;

      .border-radius(4px);

      &:hover {
        background: url(/static/images/alpha/fff_20.png);
      }
    }

    .speed {
      background: url(/static/images/alpha/fff_10.png);
      border: 1px solid #222;
      font-size: 10px;
      padding: 4px 8px 2px;
      position: absolute;
      right: 20px;
      top: 14px;

      .border-radius(4px);

      input {
        background-color:transparent;
        color:white;
        border:none;
        text-align:right;

        &:hover,
        &:focus {
          font-weight: bolder;
        }
      }
    }

    .queue-title {
      font-size: 10px;
      margin-top: 10px;
      width: 100%;

      span {
        background: url(/static/images/alpha/fff_10.png);
        cursor: pointer;
        display: block;
        margin: 0 auto;
        padding-right: 6px;
        padding-left: 18px;
        position: relative;
        text-align: center;
        width: 33px;
        .border-radius(4px);

        &:hover {
          background: url(/static/images/alpha/fff_20.png);
        }

        img {
          left: 5px;
          position: absolute;
          top: 3px;
        }
      }
    }

    .queue {
      max-height: 190px;
      margin-top: 20px;
      padding-right: 0.5%;
      overflow: auto;
      width: 99.5%%;
      display: block;

      &.hide{
        display: none;
      }

      table{
        white-space:nowrap;
        overflow: hidden;
        table-layout: fixed;
        width: 100%;

        tr {
          width: 100%;

          &:hover td {
            background: url(/static/images/alpha/fff_10.png);
          }

          td {
            padding: 4px 0;
          }

          .name {
            white-space: nowrap;
            overflow: hidden;
            padding-left: 5px;
          }

          .size {
            width: 15%;
          }

          .delete,
          .pause {
            width: 15px;
            cursor: pointer;
            background: url(/static/images/alpha/fff_20.png) !important;
            background-size: 13px 13px;
            .border-radius(2px);

            &:hover {
              background: url(/static/images/alpha/fff_40.png) !important;
            }

            img {
              height: 10px;
              width: 10px;
              margin: auto;
              display: block;
            }
          }
        }
      }
    }

    .bar {
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .remaining {
      float: left;
      font-size: 0.9em;
      font-size: smaller;
    }

    .percentage_complete {
      float: right;
      font-size: 0.9em;
      margin: 0;
      font-size: smaller;
    }
  }
}
.hide {
  display: none;
}
.f_settings_mode #sabnzbd .speed
{
  display: none;
}

@import "mixins.less";

#sabnzbd
{
  position: relative;

  > .inner {
    line-height: 1.3em;
    padding: 0 15px 15px;
  }

  .inner {
    #status {
      background: url(/static/images/alpha/fff_10.png);
      border: 1px solid #222;
      padding: 4px 8px 2px;
      font-size: 10px;
      left: 50%;
      margin-left: -58px;
      position: absolute;
      text-align: center;
      top: 14px;
      cursor: pointer;
      width: 100px;

      .border-radius(4px);

      &:hover {
        background: url(/static/images/alpha/fff_20.png);
      }
    }

    .speed {
      background: url(/static/images/alpha/fff_10.png);
      border: 1px solid #222;
      font-size: 10px;
      padding: 4px 8px 2px;
      position: absolute;
      right: 20px;
      top: 14px;

      .border-radius(4px);

      input {
        background-color:transparent;
        color:white;
        border:none;
        text-align:right;

        &:hover,
        &:focus {
          font-weight: bolder;
        }
      }
    }

    .queue-title {
      font-size: 10px;
      width: 100%;

      span {
        background: url(/static/images/alpha/fff_10.png);
        cursor: pointer;
        display: block;
        margin: 0 auto;
        padding-right: 6px;
        padding-left: 18px;
        position: relative;
        text-align: center;
        width: 33px;
        .border-radius(4px);

        &:hover {
          background: url(/static/images/alpha/fff_20.png);
        }

        img {
          left: 5px;
          position: absolute;
          top: 3px;
        }
      }
    }

    .queue {
      max-height: 190px;
      margin-top: 20px;
      padding-right: 0.5%;
      overflow: auto;
      width: 99.5%%;
      display: block;

      &.hide{
        display: none;
      }

      table{
        white-space:nowrap;
        overflow: hidden;
        table-layout: fixed;
        width: 100%;

        tr {
          width: 100%;

          &:hover td {
            background: url(/static/images/alpha/fff_10.png);
          }

          td {
            padding: 4px 0;
          }

          .name {
            white-space: nowrap;
            overflow: hidden;
            padding-left: 5px;
          }

          .size {
            width: 15%;
          }

          .delete,
          .pause {
            width: 15px;
            cursor: pointer;
            background: url(/static/images/alpha/fff_20.png) !important;
            background-size: 13px 13px;
            .border-radius(2px);

            &:hover {
              background: url(/static/images/alpha/fff_40.png) !important;
            }

            img {
              height: 10px;
              width: 10px;
              margin: auto;
              display: block;
            }
          }
        }
      }
    }

    .bar {
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .remaining {
      float: left;
      font-size: 0.9em;
      font-size: smaller;
    }

    .percentage_complete {
      float: right;
      font-size: 0.9em;
      margin: 0;
      font-size: smaller;
    }
  }
}
.hide {
  display: none;
}
.f_settings_mode #sabnzbd .speed
{
  display: none;
}


BAP-5448 action button margins are different

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


CRM-4486 Removed label .label-hint style


some styles added to left sidebar accordion menu

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/amazingBastard/sva-accreditation.git/'


Replaced site.css with site.less

Replaced site.css with site.less

Implemeneted navigation and content tree styling

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


Updated comment.

Updated comment.

/* Colors */
@body-text-color: #666;
@emphasized-text-color: #454545;
@heading-color: #454545;
@link-color: #0083e8;

/* Typography */
 @font-weight-semibold: 500;

/* Overall inline widget content container */
.css-prop-defn {
    margin-left: 20px;

    color: @body-text-color;

    /* Enable text selection */
    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;

    &:focus {
        outline: none;
    }

    font-family: SourceSansPro;
    font-size: 14px;

    h1 {
        color: @heading-color;
        font-size: 16px;
        font-weight: @font-weight-semibold;
        line-height: normal;
        margin: 15px 0 9px 0;
    }

    a {
        color: @link-color;
    }
    code {
        font-family: SourceCodePro;
        font-size: 12px;
        color: @emphasized-text-color;
        background: none;   // revert Bootstrap's styling
        padding: 0;
    }
    b {
        font-weight: @font-weight-semibold;
    }
}

/* Left-hand column */
.css-prop-summary {
    box-sizing: border-box;
    float: left;
    padding-left: 20px;
    width: 35%;

    p {
        line-height: 18px;
    }
}

// Used to avoid overlapping CM scrollbar - TODO (#3460): need a cleaner way to do this
@scrollbar-wid: 17px;

/* Right-hand column */
.css-prop-values {
    box-sizing: border-box; //for exact dimension
    float: right;
    width: 60%;

    .scroller {
        max-height: 300px;
        overflow-y: auto;

        margin: 20px (@scrollbar-wid + 4px) 0 0;

        &:focus {
            outline: none;
        }
    }

    dl {
        margin-top: 0px;

        dt {
            color: @emphasized-text-color;
            font-size: 13px;
            font-weight: @font-weight-semibold;
            margin-bottom: 3px;
        }

        dd {
            // some styles must specifically be on <p> to override Bootstrap
            p, li, b {
                font-size: 13px;
                font-style: normal;
                line-height: 18px;
                margin-bottom: 15px;
            }
            line-height: 18px;
            margin-left: 20px;
            margin-right: 0px;
            margin-bottom: -2px; // remove extra spacing between dt-dd pairs
            padding-bottom: 0px;
        }
    }
}

.divider-holder {
    // This nesting lets us effectively have 'left: (37% + 12px)'
    position: absolute;
    left: 37%;
    top: 0;
    height: 100%;
    .divider {
        margin-left: 12px;
        width: 0px;
        height: 100%;
        border-left: 1px solid #cccccc;
        border-right: 1px solid white;
    }
}

.content-bottom {
    // Used to pull bottom edge of .css-prop-defn down below its two floated children.
    // Also prevents .more-info (after us in DOM order) from overlapping the float: right content.
    clear: both;
}

/* Link to full docs, at bottom */
a.more-info {
    position: absolute;
    bottom: 0px;
    right: (33px + @scrollbar-wid);
    padding: 4px 10px 4px 28px;

    background: #e5e9e9 url("logo.svg");
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 8px 4px;

    border: 1px solid #9c9e9e;
    border-radius: 3px 3px 0 0;
    border-bottom: none;
    box-shadow: inset 0 1px 0 white;  // white chisel along top edge

    font-size: 12px;
    font-weight: @font-weight-semibold;
    color: @heading-color;
    text-shadow: 0 1px 0 white;
    &:hover {
        background-color: #edf1f1;
        text-decoration: none;
    }
}

/* Colors */
@body-text-color: #666;
@emphasized-text-color: #454545;
@heading-color: #454545;
@link-color: #0083e8;

/* Typography */
 @font-weight-semibold: 500;

/* Overall inline widget content container */
.css-prop-defn {
    margin-left: 20px;

    color: @body-text-color;

    /* Enable text selection */
    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;

    &:focus {
        outline: none;
    }

    font-family: SourceSansPro;
    font-size: 14px;

    h1 {
        color: @heading-color;
        font-size: 16px;
        font-weight: @font-weight-semibold;
        line-height: normal;
        margin: 15px 0 9px 0;
    }

    a {
        color: @link-color;
    }
    code {
        font-family: SourceCodePro;
        font-size: 12px;
        color: @emphasized-text-color;
        background: none;   // revert Bootstrap's styling
        padding: 0;
    }
    b {
        font-weight: @font-weight-semibold;
    }
}

/* Left-hand column */
.css-prop-summary {
    box-sizing: border-box;
    float: left;
    padding-left: 20px;
    width: 35%;

    p {
        line-height: 18px;
    }
}

// Used to avoid overlapping CM scrollbar - TODO (#3460): need a cleaner way to do this
@scrollbar-wid: 17px;

/* Right-hand column */
.css-prop-values {
    box-sizing: border-box; //for exact dimension
    float: right;
    width: 60%;

    .scroller {
        max-height: 300px;
        overflow-y: auto;

        margin: 20px (@scrollbar-wid + 4px) 0 0;

        &:focus {
            outline: none;
        }
    }

    dl {
        margin-top: 0px;

        dt {
            color: @emphasized-text-color;
            font-size: 13px;
            font-weight: @font-weight-semibold;
            margin-bottom: 3px;
        }

        dd {
            // some styles must specifically be on <p> to override Bootstrap
            p, li, b {
                font-size: 13px;
                font-style: normal;
                line-height: 18px;
                margin-bottom: 15px;
            }
            line-height: 18px;
            margin-left: 20px;
            margin-right: 0px;
            margin-bottom: -2px; // remove extra spacing between dt-dd pairs
            padding-bottom: 0px;
        }
    }
}

.divider-holder {
    // This nesting lets us effectively have 'left: (30% + 12px)'
    position: absolute;
    left: 37%;
    top: 0;
    height: 100%;
    .divider {
        margin-left: 12px;
        width: 0px;
        height: 100%;
        border-left: 1px solid #cccccc;
        border-right: 1px solid white;
    }
}

.content-bottom {
    // Used to pull bottom edge of .css-prop-defn down below its two floated children.
    // Also prevents .more-info (after us in DOM order) from overlapping the float: right content.
    clear: both;
}

/* Link to full docs, at bottom */
a.more-info {
    position: absolute;
    bottom: 0px;
    right: (33px + @scrollbar-wid);
    padding: 4px 10px 4px 28px;

    background: #e5e9e9 url("logo.svg");
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 8px 4px;

    border: 1px solid #9c9e9e;
    border-radius: 3px 3px 0 0;
    border-bottom: none;
    box-shadow: inset 0 1px 0 white;  // white chisel along top edge

    font-size: 12px;
    font-weight: @font-weight-semibold;
    color: @heading-color;
    text-shadow: 0 1px 0 white;
    &:hover {
        background-color: #edf1f1;
        text-decoration: none;
    }
}


Change profile header background color to gray

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

.profile-header {
  background-color: @grey-3;
  height: @profile-header-height;
  padding: 0px;

  &__cover {
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;

    transition: background-image 0.2s ease-in-out;

    @media @desktop {
      opacity: 1;
    }
  }

  &__avatar-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    padding-bottom: @profile-user-bar-height;

    @media @desktop {
      height: @profile-user-bar-height;
      padding-bottom: 0px;
      bottom: 0px;
      top: auto;

      width: @profile-avatar-size;
      margin-left: @grid-gutter-width * 3 / 4;
    }

    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__uploading-spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: @profile-user-bar-height;

    font-size: 80px;
    color: #fff;
    background: fade(#000, 70%);
    transition: opacity 120ms;

    opacity: 0;
    pointer-events: none;

    &[data-state="enabled"] {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &__userbar-container {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: fade(#fff, 80%);
    height: @profile-user-bar-height;
    display: flex;
    justify-content: space-between;
    padding: 0px;
  }

  &__change-cover-button {
    .default-border-radius();
    .default-text-shadow();

    position: absolute;
    bottom: @grid-gutter-width/4 + @profile-user-bar-height;
    right: @grid-gutter-width/4;
    padding: @grid-gutter-width/8 @grid-gutter-width/4;

    font-size: 12px;
    font-weight: bold;

    background-color: fade(#000, 50%);
    color: #fff;

    cursor: pointer;

    display: none;
    @media @desktop {
      display: block;
    }
  }
}

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

.profile-header {
  background-color: transparent;
  height: @profile-header-height;
  padding: 0px;

  &__cover {
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;

    transition: background-image 0.2s ease-in-out;

    @media @desktop {
      opacity: 1;
    }
  }

  &__avatar-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    padding-bottom: @profile-user-bar-height;

    @media @desktop {
      height: @profile-user-bar-height;
      padding-bottom: 0px;
      bottom: 0px;
      top: auto;

      width: @profile-avatar-size;
      margin-left: @grid-gutter-width * 3 / 4;
    }

    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__uploading-spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: @profile-user-bar-height;

    font-size: 80px;
    color: #fff;
    background: fade(#000, 70%);
    transition: opacity 120ms;

    opacity: 0;
    pointer-events: none;

    &[data-state="enabled"] {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &__userbar-container {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: fade(#fff, 80%);
    height: @profile-user-bar-height;
    display: flex;
    justify-content: space-between;
    padding: 0px;
  }

  &__change-cover-button {
    .default-border-radius();
    .default-text-shadow();

    position: absolute;
    bottom: @grid-gutter-width/4 + @profile-user-bar-height;
    right: @grid-gutter-width/4;
    padding: @grid-gutter-width/8 @grid-gutter-width/4;

    font-size: 12px;
    font-weight: bold;

    background-color: fade(#000, 50%);
    color: #fff;

    cursor: pointer;

    display: none;
    @media @desktop {
      display: block;
    }
  }
}


fixing firefox pre formatting

fixing firefox pre formatting


课程详情页

课程详情页

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