added prefixed text-size-adjust cancelling

@import '../../../../../node_modules/bootstrap/less/variables.less';
@import '../../../../../node_modules/bootstrap/less/mixins.less';
@import '../../../../../node_modules/bootstrap/less/alerts.less';

/** Reset **/

*, :before, :after {
    .appearance(none);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    font-size: 62.5%;
}

html, body { width: 100%; }

body {
    .font-size(@font-size);
    .text-size-adjust(100%);
    min-width: 320px;
    min-height: 100%;
    background: @background none;
    font-family: @font-family;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    color: @font-color;
}

a { text-decoration: none; }
a, button { cursor: pointer; }

input, button, select, textarea {
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

input[type=checkbox] { vertical-align: -2px; }
input[type=radio] { vertical-align: -3px; }
input, textarea { .placeholder(); }
textarea { .resizable(none); }
textarea, sup, sub { vertical-align: baseline; }
sup { bottom: 1ex; }
sub { top: .5ex; }

sup, sub {
    position: relative;
    height: 0;
    line-height: 1;
}

img { border: none; }
img, video { max-width: 100%; }
video { height: auto; }
video, table { width: 100%; }
table { border-collapse: collapse; }
ul { list-style-type: none; }
ul, ol { list-style-position: inside; }
canvas { -ms-touch-action: double-tap-zoom; }
:-moz-ui-invalid { .box-shadow(none); }
::-moz-focus-inner { border: none; }
@-ms-viewport { width: device-width; }
[class^=alert-] { .alert(); }

/** Mixins **/

.font-face(@name, @file, @path: '../font/') {
    font-family: @name;
    src: url('@{path}@{file}.eot?') format('embedded-opentype'),
         url('@{path}@{file}.woff') format('woff'),
         url('@{path}@{file}.ttf') format('truetype');
}

.appearance(@value) {
    -webkit-appearance: @value;
    -moz-appearance: @value;
    appearance: @value;
}

.hide-responsive(@query) {
    @media screen and @query {
        display: none;
    }
}

.mono-height(@height) {
    height: @height;
    line-height: @height;
}

.sprite(@xpos: 0) {
    background-position: -@xpos top;
    &:hover { background-position: -@xpos bottom; }
}

.font-size(@size) {
    font-size: @size * 1px;
    font-size: @size / 10rem;
}

.font-reset(@font-family: inherit) {
    font-family: @font-family;
    font-weight: normal !important;
    font-style: normal !important;
}

.text-size-adjust(@value) {
    -webkit-text-size-adjust: @value;
    -moz-text-size-adjust: @value;
    -ms-text-size-adjust: @value;
    text-size-adjust: @value;
}

@import '../../../../../node_modules/bootstrap/less/variables.less';
@import '../../../../../node_modules/bootstrap/less/mixins.less';
@import '../../../../../node_modules/bootstrap/less/alerts.less';

/** Reset **/

*, :before, :after {
    .appearance(none);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    font-size: 62.5%;
}

html, body { width: 100%; }

body {
    .font-size(@font-size);
    min-width: 320px;
    min-height: 100%;
    background: @background none;
    font-family: @font-family;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    color: @font-color;
}

a { text-decoration: none; }
a, button { cursor: pointer; }

input, button, select, textarea {
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

input[type=checkbox] { vertical-align: -2px; }
input[type=radio] { vertical-align: -3px; }
input, textarea { .placeholder(); }
textarea { .resizable(none); }
textarea, sup, sub { vertical-align: baseline; }
sup { bottom: 1ex; }
sub { top: .5ex; }

sup, sub {
    position: relative;
    height: 0;
    line-height: 1;
}

img { border: none; }
img, video { max-width: 100%; }
video { height: auto; }
video, table { width: 100%; }
table { border-collapse: collapse; }
ul { list-style-type: none; }
ul, ol { list-style-position: inside; }
canvas { -ms-touch-action: double-tap-zoom; }
:-moz-ui-invalid { .box-shadow(none); }
::-moz-focus-inner { border: none; }
@-ms-viewport { width: device-width; }
[class^=alert-] { .alert(); }

/** Mixins **/

.font-face(@name, @file, @path: '../font/') {
    font-family: @name;
    src: url('@{path}@{file}.eot?') format('embedded-opentype'),
         url('@{path}@{file}.woff') format('woff'),
         url('@{path}@{file}.ttf') format('truetype');
}

.appearance(@value) {
    -webkit-appearance: @value;
    -moz-appearance: @value;
    appearance: @value;
}

.hide-responsive(@query) {
    @media screen and @query {
        display: none;
    }
}

.mono-height(@height) {
    height: @height;
    line-height: @height;
}

.sprite(@xpos: 0) {
    background-position: -@xpos top;
    &:hover { background-position: -@xpos bottom; }
}

.font-size(@size) {
    font-size: @size * 1px;
    font-size: @size / 10rem;
}

.font-reset(@font-family: inherit) {
    font-family: @font-family;
    font-weight: normal !important;
    font-style: normal !important;
}


Fix cursor disappearing while editing timestamps

/**
 *    Copyright (c) ppy Pty Ltd <contact@ppy.sh>.
 *
 *    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/>.
 */

.beatmapset-discussion-message {
  @_top: beatmapset-discussion-message;
  display: inline;
  color: white;

  // TODO: remove once default link style becomes... default
  a {
    .link-default();
  }

  // extra specificity here to override the above rule
  & > &__timestamp {
    .link-plain();

    border-radius: @border-radius-large;
    padding: 1px 5px;
    background-color: @osu-colour-b6;
    font-weight: 600;
    font-size: 85%;
    color: @osu-colour-f1;

    // required for the cursor to be visible when contentEditable is used (for the beatmap review editor)
    display: inline-block;

    .link-hover({
      background-color: @osu-colour-b5;
      color: @osu-colour-l1;
    });
  }
}

/**
 *    Copyright (c) ppy Pty Ltd <contact@ppy.sh>.
 *
 *    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/>.
 */

.beatmapset-discussion-message {
  @_top: beatmapset-discussion-message;
  display: inline;
  color: white;

  // TODO: remove once default link style becomes... default
  a {
    .link-default();
  }

  // extra specificity here to override the above rule
  & > &__timestamp {
    .link-plain();

    border-radius: @border-radius-large;
    padding: 1px 5px;
    background-color: @osu-colour-b6;
    font-weight: 600;
    font-size: 85%;
    color: @osu-colour-f1;

    .link-hover({
      background-color: @osu-colour-b5;
      color: @osu-colour-l1;
    });
  }
}


feat: Added a first-time-point with no arrow

@import "../../variables.less";

@{prefix}pointer-wrap {
  position: relative;

  @{prefix}arrow {
    left: -45px;
    position: relative;
  }

  @{prefix}arrow-pointer {
    width: 100px;
    height: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 25px 0 -22px @focus-glow, 0px 25px 6px -19px @focus-glow;

    &:after {
      content: "";
      position: absolute;
      border-radius: 3px;
      width: 40px;
      height: 40px;
      background: @tile-bg;
      transform: rotate(45deg);
      top: 45px;
      left: 31px;
      box-shadow: 0px 0px 0 3px @focus-glow, 0px 0px 6px 5px @focus-glow;
    }
  }

  @{prefix}arrow-neck {
    background: @tile-bg;
    width: 12px;
    height: 27px;
    margin-left: 45px;
    position: relative;
    z-index: 1;
    margin-top: -1px;
    margin-bottom: -1px;
    box-shadow: 6px 0px 0 -3px @focus-glow, -6px 0px 0 -3px @focus-glow, 10px 0 10px -4px @focus-glow, -10px 0 10px -4px @focus-glow;
  }

  @{prefix}box {
    background: @tile-bg;
    padding: 12px;
    max-width: 300px;
    border-radius: 3px;
    border-top-left-radius: 0;
    box-shadow: 0px 0px 0px 3px @focus-glow, 0px 0px 12px 4px @focus-glow;
    z-index: 9;

    @{prefix}ftp-dismiss {
      position: absolute;
      right: 15px;
      z-index: 1;
      background: @tile-bg;

      &:hover {
        cursor: pointer;
      }
    }

    @{prefix}content {
      position: relative;

      h4 {
        margin: 0 0 5px 0;
        padding: 0;
      }

      p {
        margin: 0;
      }

      &:focus {
        outline: none;

        &:before {
          background: @top-bar-bg;
        }
      }

      &:before {
        content: '';
        height: 100%;
        width: 3px;
        position: absolute;
        left: -8px;
      }
    }
  }

  &@{prefix}no-arrow {

    @{prefix}arrow {
      display: none;
    }

    @{prefix}box {
      border-top-left-radius: 3px;
    }
  }
}

@import "../../variables.less";

@{prefix}pointer-wrap {
  position: relative;

  @{prefix}arrow {
    left: -45px;
    position: relative;
  }

  @{prefix}arrow-pointer {
    width: 100px;
    height: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 25px 0 -22px @focus-glow, 0px 25px 6px -19px @focus-glow;

    &:after {
      content: "";
      position: absolute;
      border-radius: 3px;
      width: 40px;
      height: 40px;
      background: @tile-bg;
      transform: rotate(45deg);
      top: 45px;
      left: 31px;
      box-shadow: 0px 0px 0 3px @focus-glow, 0px 0px 6px 5px @focus-glow;
    }
  }

  @{prefix}arrow-neck {
    background: @tile-bg;
    width: 12px;
    height: 27px;
    margin-left: 45px;
    position: relative;
    z-index: 1;
    margin-top: -1px;
    margin-bottom: -1px;
    box-shadow: 6px 0px 0 -3px @focus-glow, -6px 0px 0 -3px @focus-glow, 10px 0 10px -4px @focus-glow, -10px 0 10px -4px @focus-glow;
  }

  @{prefix}box {
    background: @tile-bg;
    padding: 12px;
    max-width: 300px;
    border-radius: 3px;
    border-top-left-radius: 0;
    box-shadow: 0px 0px 0px 3px @focus-glow, 0px 0px 12px 4px @focus-glow;
    z-index: 9;

    @{prefix}ftp-dismiss {
      position: absolute;
      right: 15px;
      z-index: 1;
      background: @tile-bg;

      &:hover {
        cursor: pointer;
      }
    }

    @{prefix}content {
      position: relative;

      h4 {
        margin: 0 0 5px 0;
        padding: 0;
      }

      p {
        margin: 0;
      }

      &:focus {
        outline: none;

        &:before {
          background: @top-bar-bg;
        }
      }

      &:before {
        content: '';
        height: 100%;
        width: 3px;
        position: absolute;
        left: -8px;
      }
    }
  }
}


Fix JSTree styles

Fix JSTree styles

@import "lib/main";

.fd-tree {
  .fd-scrollable {
    overflow-x: auto;
  }
}

.fd-question-tree.jstree {
  background: @white;
}

.fd-tree-valid-alert-icon {
  // todo, investigate usage
  display:inline;
  position:absolute;
}

.fd-lang-display-selector {
  padding: @gridGutterWidth/2;
  background-color: @navbarBackground;
  text-align: center;
}

.fd-question-tree-actions {
  text-align: center;
  > div { padding-top: @gridGutterWidth/2; }
}

.fd-messages {
  position: fixed;
  bottom: 40px;
  left: 0;
  width: 100%;
}

.jstree-default .jstree-anchor {
  color: darken(@blueDark, 10);
  &.jstree-hovered,
  &.jstree-clicked {
    border: none;
    background: desaturate(lighten(@blue, 58), 40);
  }
  &.jstree-clicked {
    .box-shadow(0px 0px 4px fade(@blue, 60%));
  }
  > .jstree-icon {
    background: none;
    font-size: .85em;
    color: @blueLight;
  }
}

@import "lib/main";

.fd-tree {
  .fd-scrollable {
    overflow-x: auto;
  }
}

.fd-question-tree.jstree {
  background: @white;
}

.fd-tree-valid-alert-icon {
  // todo, investigate usage
  display:inline;
  position:absolute;
}

.fd-lang-display-selector {
  padding: @gridGutterWidth/2;
  background-color: @navbarBackground;
  text-align: center;
}

.fd-question-tree-actions {
  text-align: center;
  > div { padding-top: @gridGutterWidth/2; }
}

.fd-messages {
  position: fixed;
  bottom: 40px;
  left: 0;
  width: 100%;
}

.jstree a {
  color: darken(@blueDark, 10);
  line-height: 18px;
  padding: 1px 6px 3px !important;
  .border-radius(5px);
  &.jstree-hovered,
  &.jstree-clicked {
    border: none;
    background: desaturate(lighten(@blue, 58), 40);
  }
  &.jstree-clicked {
    .box-shadow(0px 0px 4px fade(@blue, 60%));
  }
}

.jstree a > ins.jstree-icon {
  background: none;
  font-size: .85em;
}

.jstree a > ins {
  color: @blueLight;
}


* add .flex-inline and add '!important' suffix.

// Flex container

.flex           {display: flex!important;}
.flex-inline    {display: inline-flex!important}

.flex-wrap      {flex-wrap: wrap}
.flex-unwrap    {flex-wrap: none}

.space-between  {justify-content: space-between;}
.justify-start  {justify-content: flex-start;}
.justify-end    {justify-content: flex-end;}
.justify-center {justify-content: center;}

.stretch        {align-items: stretch}
.align-start    {align-items: flex-start;}
.align-end      {align-items: flex-end;}
.align-middle   {align-items: center;}

// Flex item

.flex-first    {order: -1;}
.flex-last     {order: 1;}

.flex-auto     {flex: auto}
.flex-none     {flex: none}

.selft-stretch       {align-self: stretch}
.align-self-start    {align-self: flex-start;}
.align-self-end      {align-self: flex-end;}
.align-self-middle   {align-self: center;}

// Misc

.justified {
  display: flex;
  flex-wrap: wrap;
  > * {flex: auto !important;}
}

// Flex container

.flex           {display: flex;}

.flex-wrap      {flex-wrap: wrap}
.flex-unwrap    {flex-wrap: none}

.space-between  {justify-content: space-between;}
.justify-start  {justify-content: flex-start;}
.justify-end    {justify-content: flex-end;}
.justify-center {justify-content: center;}

.stretch        {align-items: stretch}
.align-start    {align-items: flex-start;}
.align-end      {align-items: flex-end;}
.align-middle   {align-items: center;}

// Flex item

.flex-first    {order: -1;}
.flex-last     {order: 1;}

.flex-auto     {flex: auto}
.flex-none     {flex: none}

.selft-stretch       {align-self: stretch}
.align-self-start    {align-self: flex-start;}
.align-self-end      {align-self: flex-end;}
.align-self-middle   {align-self: center;}

// Misc

.justified {
  display: flex;
  flex-wrap: wrap;
  > * {flex: auto !important;}
}


* remove transition style from kindeditor.

/// ========================================================================
/// Kindeditor: kindeditor.less
/// https://github.com/kindsoft/kindeditor/blob/master/themes/default/default.css
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Kindeditor version in the future.
/// http://zui.sexy
/// ========================================================================
/// GNU LESSER GENERAL PUBLIC LICENSE
/// https://github.com/kindsoft/kindeditor/blob/master/license.txt
/// ========================================================================

// Kindeditor theme in ZUI style

/*! KindEditor Copyright (C) kindsoft.net, Licence: http://kindeditor.net/license.php */

/* common */
.ke-inline-block {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-clearfix {
  zoom: 1;
}
.ke-clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.ke-shadow {
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* icons */
[class^="ke-icon-"],
[class*=" ke-icon-"] {
  width: 16px;
  height: 16px;
}
.ke-icon-source { background-position: 0 0; }
.ke-icon-preview { background-position: 0 -16px; }
.ke-icon-print { background-position: 0 -32px; }
.ke-icon-undo { background-position: 0 -48px; }
.ke-icon-redo { background-position: 0 -64px; }
.ke-icon-cut { background-position: 0 -80px; }
.ke-icon-copy { background-position: 0 -96px; }
.ke-icon-paste { background-position: 0 -112px; }
.ke-icon-selectall { background-position: 0 -128px; }
.ke-icon-justifyleft { background-position: 0 -144px; }
.ke-icon-justifycenter { background-position: 0 -160px; }
.ke-icon-justifyright { background-position: 0 -176px; }
.ke-icon-justifyfull { background-position: 0 -192px; }
.ke-icon-insertorderedlist { background-position: 0 -208px; }
.ke-icon-insertunorderedlist { background-position: 0 -224px; }
.ke-icon-indent { background-position: 0 -240px; }
.ke-icon-outdent { background-position: 0 -256px; }
.ke-icon-subscript { background-position: 0 -272px; }
.ke-icon-superscript { background-position: 0 -288px; }
.ke-icon-date { background-position: 0 -304px; width: 25px; }
.ke-icon-time { background-position: 0 -320px; width: 25px; }
.ke-icon-formatblock { background-position: 0 -336px; width: 25px; }
.ke-icon-fontname { background-position: 0 -352px; width: 21px; }
.ke-icon-fontsize { background-position: 0 -368px; width: 23px; }
.ke-icon-forecolor { background-position: 0 -384px; width: 20px; }
.ke-icon-hilitecolor { background-position: 0 -400px; width: 23px; }
.ke-icon-bold { background-position: 0 -416px; }
.ke-icon-italic { background-position: 0 -432px; }
.ke-icon-underline { background-position: 0 -448px; }
.ke-icon-strikethrough { background-position: 0 -464px; }
.ke-icon-removeformat { background-position: 0 -480px; }
.ke-icon-image { background-position: 0 -496px; }
.ke-icon-flash { background-position: 0 -512px; }
.ke-icon-media { background-position: 0 -528px; }
.ke-icon-div { background-position: 0 -544px; }
.ke-icon-formula { background-position: 0 -576px; }
.ke-icon-hr { background-position: 0 -592px; }
.ke-icon-emoticons { background-position: 0 -608px; }
.ke-icon-link { background-position: 0 -624px; }
.ke-icon-unlink { background-position: 0 -640px; }
.ke-icon-fullscreen { background-position: 0 -656px; }
.ke-icon-about { background-position: 0 -672px; }
.ke-icon-plainpaste { background-position: 0 -704px; }
.ke-icon-wordpaste { background-position: 0 -720px; }
.ke-icon-table { background-position: 0 -784px; }
.ke-icon-tablemenu { background-position: 0 -768px; }
.ke-icon-tableinsert { background-position: 0 -784px; }
.ke-icon-tabledelete { background-position: 0 -800px; }
.ke-icon-tablecolinsertleft { background-position: 0 -816px; }
.ke-icon-tablecolinsertright { background-position: 0 -832px; }
.ke-icon-tablerowinsertabove { background-position: 0 -848px; }
.ke-icon-tablerowinsertbelow { background-position: 0 -864px; }
.ke-icon-tablecoldelete { background-position: 0 -880px; }
.ke-icon-tablerowdelete { background-position: 0 -896px; }
.ke-icon-tablecellprop { background-position: 0 -912px; }
.ke-icon-tableprop { background-position: 0 -928px; }
.ke-icon-checked { background-position: 0 -944px; }
.ke-icon-code { background-position: 0 -960px; }
.ke-icon-map { background-position: 0 -976px; }
.ke-icon-baidumap { background-position: 0 -976px; }
.ke-icon-lineheight { background-position: 0 -992px; }
.ke-icon-clearhtml { background-position: 0 -1008px; }
.ke-icon-pagebreak { background-position: 0 -1024px; }
.ke-icon-insertfile { background-position: 0 -1040px; }
.ke-icon-quickformat { background-position: 0 -1056px; }
.ke-icon-template { background-position: 0 -1072px; }
.ke-icon-tablecellsplit { background-position: 0 -1088px; }
.ke-icon-tablerowmerge { background-position: 0 -1104px; }
.ke-icon-tablerowsplit { background-position: 0 -1120px; }
.ke-icon-tablecolmerge { background-position: 0 -1136px; }
.ke-icon-tablecolsplit { background-position: 0 -1152px; }
.ke-icon-anchor { background-position: 0 -1168px; }
.ke-icon-search { background-position: 0 -1184px; }
.ke-icon-new { background-position: 0 -1200px; }
.ke-icon-specialchar { background-position: 0 -1216px; }
.ke-icon-multiimage { background-position: 0 -1232px; }

/* container */
.ke-container {
  position: relative;
  display: block;
  border: 1px solid @input-border;
  background-color: @input-bg;
  border-radius: @input-border-radius;
  overflow: hidden;
  margin: 0;
  padding: 0;
  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  &.focus
  {
    @color:       @input-border-focus;
    @color-rgba:  rgba(red(@color), green(@color), blue(@color), .6);
    border-color: @color;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
  }
}
/* toolbar */
.ke-toolbar {
  border-bottom: 1px solid @input-border;
  background-color: @input-bg;
  padding: 2px 5px;
  text-align: left;
  overflow: hidden;
  zoom: 1;
}
.ke-toolbar-icon {
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  display: block;
}
.ke-toolbar-icon-url {
  background-image: url(themes/default/default.png);
}

.ke-toolbar {
  .ke-outline {
    border: 1px solid @input-bg;
    margin: 1px;
    padding: 1px 2px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    display: block;
    float: left;
    border-radius: @input-border-radius;
    .opacity(0.8);
  }
  .ke-on,
  .ke-selected {
    .opacity(1);
    border-color: @color-gray-light;
  }
  .ke-selected {
    background-color: @color-gray-pale;
  }
  .ke-disabled {
    cursor: default;
  }
  .ke-separator {
    height: 16px;
    margin: 2px 3px;
    border-left: 1px dotted @color-gray-light;
    border-top: 0;
    border-bottom: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    display: block;
    float: left;
  }
}

.ke-toolbar .ke-hr {
  overflow: hidden;
  height: 1px;
  clear: both;
}
/* edit */
.ke-edit {
  padding: 0;
}
.ke-edit-iframe,
.ke-edit-textarea {
  border: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.ke-edit-textarea {
  font-size: @font-size-small;
  font-family: @font-family-monospace;
  background-color: @color-back;
  color: @color-fore;
  overflow: auto;
  resize: none;
}
.ke-edit-textarea:focus {
  outline: none;
}
/* statusbar */
.ke-statusbar {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: @input-bg;
  border-top: 1px solid @input-border;
  font-size: 0;
  line-height: 0;
  *height: 12px;
  overflow: hidden;
  text-align: center;
  cursor: s-resize;
  .opacity(0);

  .ke-statusbar-center-icon,
  .ke-statusbar-right-icon {
    height: 11px;
    background-image: url(themes/default/default.png);
  }
  .ke-statusbar-center-icon {
    background-position: -0px -754px;
    width: 15px;
  }

  .ke-statusbar-right-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
    background-position: -5px -741px;
    width: 11px;
  }

  &:hover {
    .opacity(1);
  }
}

/* menu */
.ke-menu {
  padding: 5px 0;
  font-family: @font-family-base;
  font-size: 12px;
  text-align: left;
  overflow: hidden;
  background-color: @dropdown-bg;
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
}
.ke-menu-item {
  height: 24px;
  overflow: hidden;
  cursor: pointer;
}
.ke-menu-item-on {
  color: @dropdown-link-active-color;
  text-decoration: none;
  outline: 0;
  background-color: @dropdown-link-active-bg;
}
.ke-menu-item-left {
  width: 27px;
  text-align: center;
  overflow: hidden;
}
.ke-menu-item-center {
  width: 0;
  height: 24px;
  border-left: 1px solid #E3E3E3;
  border-right: 1px solid #FFFFFF;
  border-top: 0;
  border-bottom: 0;
}
.ke-menu-item-center-on {
  border-left: 1px solid #E9EFF6;
  border-right: 1px solid #E9EFF6;
}
.ke-menu-item-right {
  border: 0;
  padding: 0 0 0 5px;
  line-height: 24px;
  text-align: left;
  overflow: hidden;
}
.ke-menu-separator {
  margin: 2px 0;
  height: 0;
  overflow: hidden;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #FFFFFF;
  border-left: 0;
  border-right: 0;
}
/* colorpicker */
.ke-colorpicker {
  background-color: @dropdown-bg;
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
}
.ke-colorpicker-table {
  border:0;
  margin:0;
  padding:0;
  border-collapse: separate;
}
.ke-colorpicker-cell {
  font-size: 0;
  line-height: 0;
  border: none;
  cursor: pointer;
  padding:0;
}
.ke-colorpicker-cell-color {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
}
.ke-colorpicker-cell-top {
  font-family: @font-family-base;
  font-size: 12px;
  line-height: 25px;
  cursor: pointer;
  margin:0;
  padding:0;
  text-align: center;
}
.ke-colorpicker-cell-on
{
  color: @dropdown-link-active-color;
  background-color: @dropdown-link-active-bg;
  .ke-colorpicker-cell-color
  {
    border: 2px solid @color-fore;
  }
}
.ke-colorpicker-cell-selected
{
  .ke-colorpicker-cell-color
  {
    border: 2px solid @color-fore;
  }
}

/* dialog */
.ke-dialog {
  position: absolute;
  margin: 0;
  padding: 0;
}
.ke-dialog .ke-header {
  width: 100%;
  margin-bottom: 10px;
}
.ke-dialog .ke-header .ke-left {
  float: left;
}
.ke-dialog .ke-header .ke-right {
  float: right;
}
.ke-dialog .ke-header label {
  margin-right: 0;
  cursor: pointer;
  font-weight: normal;
  display: inline;
  vertical-align: top;
}
.ke-dialog-content {
  width: 100%;
  height: 100%;
  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-base;
  overflow: hidden;
}
.ke-dialog-shadow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 9px rgba(0,0,0,.5);

  background-color: #F0F0EE;
}
.ke-dialog-header {
  border:0;
  margin:0;
  background: @color-gray-pale;
  font-weight: bold;
  font-family: @headings-font-family;
  font-size: @font-size-base;
  text-align: left;
  cursor: move;
  padding: @modal-title-padding /2 @modal-title-padding;
  border-bottom: 1px solid @modal-header-border-color;
  min-height: (@modal-title-padding + @modal-title-line-height);
}
.ke-dialog-icon-close {
  display: block;
  background: url(default.png) no-repeat scroll 0 -688px;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 8px;
  top: 10px;
  cursor: pointer;
  .opacity(0.6);

  &:hover {
    .opacity(1);
  }
}
.ke-dialog-body {
  font-family: @font-family-base;
  font-size: @font-size-small;
  text-align: left;
  overflow: hidden;
  width: 100%;
}
.ke-dialog-body textarea {
  display: block;
  overflow: auto;
  padding: 0;
  resize: none;
}
.ke-dialog-body textarea:focus,
.ke-dialog-body input:focus,
.ke-dialog-body select:focus {
  outline: none;
}
.ke-dialog-body label {
  margin-right: 10px;
  cursor: pointer;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-dialog-body img {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-dialog-body select {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  width: auto;
}
.ke-dialog-body .ke-textarea {
  display: block;
  width: 408px;
  height: 260px;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
}
.ke-dialog-body .ke-form {
  margin: 0;
  padding: 0;
}
.ke-dialog-loading {
  position: absolute;
  top: 0;
  left: 1px;
  z-index: 1;
  text-align: center;
}
.ke-dialog-loading-content {
  background: url("../common/loading.gif") no-repeat;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    height: 31px;
    line-height: 31px;
    padding-left: 36px;
}
.ke-dialog-row {
  margin-bottom: 10px;
}
.ke-dialog-footer {
  text-align: right;
  padding: 5px;
  width: 100%;
  border-top: 1px solid @modal-footer-border-color;
}
.ke-dialog-preview,
.ke-dialog-yes {
  margin: 5px;
}
.ke-dialog-no {
  margin: 5px 10px 5px 5px;
}
.ke-dialog-mask {
  background-color: @modal-backdrop-bg;
  .opacity(.5);
}
.ke-button-common {
  cursor: pointer;
  height: 23px;
  line-height: 21px;
  overflow: visible;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.ke-button-outer {
  padding: 0;
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-button {
  padding: 0 12px;
  margin: 0;
  border-radius: @border-radius-base;
  border: 1px solid @btn-default-border;
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
  font-size: 12px;
  left: 2px;
  text-decoration: none;
}
/* inputbox */
.ke-input-text {
  font-family: "sans serif",tahoma,verdana,helvetica;
  font-size: 12px;
  line-height: 20px;
  height: 20px;
  padding: 0 4px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  .form-control-focus();
}
.ke-input-number {
  width: 50px;
}
.ke-input-color, ke-dialog-content select {
  border: 1px solid @input-border;
  background-color: @color-back;
  font-size: 12px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
  overflow: hidden;
  cursor: pointer;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-upload-button {
  position: relative;
}
.ke-upload-area {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.ke-upload-area .ke-upload-file {
  position: absolute;
  font-size: 60px;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 811212;
  border: 0 none;
  opacity: 0;
  filter: alpha(opacity=0);
}
/* tabs */
.ke-tabs {
  font: 12px/1 "sans serif",tahoma,verdana,helvetica;
  border-bottom:1px solid #A0A0A0;
  padding-left:5px;
  margin-bottom:20px;
}
.ke-tabs-ul  {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
}
.ke-tabs-li {
  position: relative;
  border: 1px solid #A0A0A0;
  background-color: #F0F0EE;
  margin: 0 2px -1px 0;
  padding: 0 20px;
  float: left;
  line-height: 25px;
  text-align: center;
  color: #555555;
  cursor: pointer;
}
.ke-tabs-li-selected {
  background-color: #FFF;
  border-bottom: 1px solid #FFF;
  color: #000;
  cursor: default;
}
.ke-tabs-li-on {
  background-color: #FFF;
  color: #000;
}
/* progressbar */
.ke-progressbar {
  position: relative;
  margin: 0;
  padding: 0;
}
.ke-progressbar-bar {
  border: 1px solid #6FA5DB;
  width: 80px;
  height: 5px;
  margin: 10px 10px 0 10px;
  padding: 0;
}
.ke-progressbar-bar-inner {
  width: 0;
  height: 5px;
  background-color: #6FA5DB;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.ke-progressbar-percent {
  position: absolute;
  top: 0;
  left: 40%;
  display: none;
}
/* swfupload */
.ke-swfupload-top {
  position: relative;
  margin-bottom: 10px;
  _width: 608px;
}
.ke-swfupload-button {
  height: 23px;
  line-height: 23px;
}
.ke-swfupload-desc {
  padding: 0 10px;
  height: 23px;
  line-height: 23px;
}
.ke-swfupload-startupload {
  position: absolute;
  top: 0;
  right: 0;
}
.ke-swfupload-body {
  overflow: scroll;
  background-color:#FFFFFF;
  border: 1px solid @input-border;
  width: auto;
  height: 370px;
  padding: 5px;
}
.ke-swfupload-body .ke-item {
  width: 100px;
  margin: 5px;
}
.ke-swfupload-body .ke-photo {
  position: relative;
  border: 1px solid #DDDDDD;
  background-color:#FFFFFF;
  padding: 10px;
}
.ke-swfupload-body .ke-delete {
  display: block;
  background: url(default.png) no-repeat scroll 0 -688px;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
.ke-swfupload-body .ke-status  {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100px;
  height: 17px;
}
.ke-swfupload-body .ke-message  {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:17px;
}
.ke-swfupload-body .ke-error  {
  color: red;
}
.ke-swfupload-body .ke-name {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:16px;
}
.ke-swfupload-body .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}

/* emoticons */
.ke-plugin-emoticons {
  position: relative;
}
.ke-plugin-emoticons .ke-preview {
  position: absolute;
  text-align: center;
  margin: 2px;
  padding: 10px;
  top: 0;
  border: 1px solid #A0A0A0;
  background-color: #FFFFFF;
  display: none;
}
.ke-plugin-emoticons .ke-preview-img {
  border:0;
  margin:0;
  padding:0;
}
.ke-plugin-emoticons .ke-table {
  border:0;
  margin:0;
  padding:0;
  border-collapse:separate;
}
.ke-plugin-emoticons .ke-cell {
  margin:0;
  padding:1px;
  border:1px solid #F0F0EE;
  cursor:pointer;
}
.ke-plugin-emoticons .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}
.ke-plugin-emoticons .ke-img {
  display:block;
  background-repeat:no-repeat;
  overflow:hidden;
  margin:2px;
  width:24px;
  height:24px;
  margin: 0;
  padding: 0;
  border: 0;
}
.ke-plugin-emoticons .ke-page {
  text-align: right;
  margin: 5px;
  padding: 0;
  border: 0;
  font: 12px/1 "sans serif",tahoma,verdana,helvetica;
  color: #333;
  text-decoration: none;
}
.ke-plugin-plainpaste-textarea,
.ke-plugin-wordpaste-iframe {
  display: block;
  width: 408px;
  height: 260px;
  font-family: "sans serif",tahoma,verdana,helvetica;
  font-size: 12px;
  border: 1px solid @input-border;
}
/* filemanager */
.ke-plugin-filemanager-header {
  width: 100%;
  margin-bottom: 10px;
}
.ke-plugin-filemanager-header .ke-left {
  float: left;
}
.ke-plugin-filemanager-header .ke-right {
  float: right;
}
.ke-plugin-filemanager-body {
  overflow: scroll;
  background-color:#FFFFFF;
  border: 1px solid @input-border;
  width: auto;
  height: 370px;
  padding: 5px;
}
.ke-plugin-filemanager-body .ke-item {
  width: 100px;
  margin: 5px;
}
.ke-plugin-filemanager-body .ke-photo {
  border: 1px solid #DDDDDD;
  background-color:#FFFFFF;
  padding: 10px;
}
.ke-plugin-filemanager-body .ke-name {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:16px;
}
.ke-plugin-filemanager-body .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}
.ke-plugin-filemanager-body .ke-table {
  width: 95%;
  border: 0;
  margin: 0;
  padding: 0;
  border-collapse: separate;
}
.ke-plugin-filemanager-body .ke-table .ke-cell {
  margin: 0;
  padding: 0;
  border: 0;
}
.ke-plugin-filemanager-body .ke-table .ke-name {
  width: 55%;
  text-align: left;
}
.ke-plugin-filemanager-body .ke-table .ke-size {
  width: 15%;
  text-align: left;
}
.ke-plugin-filemanager-body .ke-table .ke-datetime {
  width: 30%;
  text-align: center;
}

/// ========================================================================
/// Kindeditor: kindeditor.less
/// https://github.com/kindsoft/kindeditor/blob/master/themes/default/default.css
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Kindeditor version in the future.
/// http://zui.sexy
/// ========================================================================
/// GNU LESSER GENERAL PUBLIC LICENSE
/// https://github.com/kindsoft/kindeditor/blob/master/license.txt
/// ========================================================================

// Kindeditor theme in ZUI style

/*! KindEditor Copyright (C) kindsoft.net, Licence: http://kindeditor.net/license.php */

/* common */
.ke-inline-block {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-clearfix {
  zoom: 1;
}
.ke-clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.ke-shadow {
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* icons */
[class^="ke-icon-"],
[class*=" ke-icon-"] {
  width: 16px;
  height: 16px;
}
.ke-icon-source { background-position: 0 0; }
.ke-icon-preview { background-position: 0 -16px; }
.ke-icon-print { background-position: 0 -32px; }
.ke-icon-undo { background-position: 0 -48px; }
.ke-icon-redo { background-position: 0 -64px; }
.ke-icon-cut { background-position: 0 -80px; }
.ke-icon-copy { background-position: 0 -96px; }
.ke-icon-paste { background-position: 0 -112px; }
.ke-icon-selectall { background-position: 0 -128px; }
.ke-icon-justifyleft { background-position: 0 -144px; }
.ke-icon-justifycenter { background-position: 0 -160px; }
.ke-icon-justifyright { background-position: 0 -176px; }
.ke-icon-justifyfull { background-position: 0 -192px; }
.ke-icon-insertorderedlist { background-position: 0 -208px; }
.ke-icon-insertunorderedlist { background-position: 0 -224px; }
.ke-icon-indent { background-position: 0 -240px; }
.ke-icon-outdent { background-position: 0 -256px; }
.ke-icon-subscript { background-position: 0 -272px; }
.ke-icon-superscript { background-position: 0 -288px; }
.ke-icon-date { background-position: 0 -304px; width: 25px; }
.ke-icon-time { background-position: 0 -320px; width: 25px; }
.ke-icon-formatblock { background-position: 0 -336px; width: 25px; }
.ke-icon-fontname { background-position: 0 -352px; width: 21px; }
.ke-icon-fontsize { background-position: 0 -368px; width: 23px; }
.ke-icon-forecolor { background-position: 0 -384px; width: 20px; }
.ke-icon-hilitecolor { background-position: 0 -400px; width: 23px; }
.ke-icon-bold { background-position: 0 -416px; }
.ke-icon-italic { background-position: 0 -432px; }
.ke-icon-underline { background-position: 0 -448px; }
.ke-icon-strikethrough { background-position: 0 -464px; }
.ke-icon-removeformat { background-position: 0 -480px; }
.ke-icon-image { background-position: 0 -496px; }
.ke-icon-flash { background-position: 0 -512px; }
.ke-icon-media { background-position: 0 -528px; }
.ke-icon-div { background-position: 0 -544px; }
.ke-icon-formula { background-position: 0 -576px; }
.ke-icon-hr { background-position: 0 -592px; }
.ke-icon-emoticons { background-position: 0 -608px; }
.ke-icon-link { background-position: 0 -624px; }
.ke-icon-unlink { background-position: 0 -640px; }
.ke-icon-fullscreen { background-position: 0 -656px; }
.ke-icon-about { background-position: 0 -672px; }
.ke-icon-plainpaste { background-position: 0 -704px; }
.ke-icon-wordpaste { background-position: 0 -720px; }
.ke-icon-table { background-position: 0 -784px; }
.ke-icon-tablemenu { background-position: 0 -768px; }
.ke-icon-tableinsert { background-position: 0 -784px; }
.ke-icon-tabledelete { background-position: 0 -800px; }
.ke-icon-tablecolinsertleft { background-position: 0 -816px; }
.ke-icon-tablecolinsertright { background-position: 0 -832px; }
.ke-icon-tablerowinsertabove { background-position: 0 -848px; }
.ke-icon-tablerowinsertbelow { background-position: 0 -864px; }
.ke-icon-tablecoldelete { background-position: 0 -880px; }
.ke-icon-tablerowdelete { background-position: 0 -896px; }
.ke-icon-tablecellprop { background-position: 0 -912px; }
.ke-icon-tableprop { background-position: 0 -928px; }
.ke-icon-checked { background-position: 0 -944px; }
.ke-icon-code { background-position: 0 -960px; }
.ke-icon-map { background-position: 0 -976px; }
.ke-icon-baidumap { background-position: 0 -976px; }
.ke-icon-lineheight { background-position: 0 -992px; }
.ke-icon-clearhtml { background-position: 0 -1008px; }
.ke-icon-pagebreak { background-position: 0 -1024px; }
.ke-icon-insertfile { background-position: 0 -1040px; }
.ke-icon-quickformat { background-position: 0 -1056px; }
.ke-icon-template { background-position: 0 -1072px; }
.ke-icon-tablecellsplit { background-position: 0 -1088px; }
.ke-icon-tablerowmerge { background-position: 0 -1104px; }
.ke-icon-tablerowsplit { background-position: 0 -1120px; }
.ke-icon-tablecolmerge { background-position: 0 -1136px; }
.ke-icon-tablecolsplit { background-position: 0 -1152px; }
.ke-icon-anchor { background-position: 0 -1168px; }
.ke-icon-search { background-position: 0 -1184px; }
.ke-icon-new { background-position: 0 -1200px; }
.ke-icon-specialchar { background-position: 0 -1216px; }
.ke-icon-multiimage { background-position: 0 -1232px; }

/* container */
.ke-container {
  position: relative;
  display: block;
  border: 1px solid @input-border;
  background-color: @input-bg;
  border-radius: @input-border-radius;
  overflow: hidden;
  margin: 0;
  padding: 0;
  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  &.focus
  {
    @color:       @input-border-focus;
    @color-rgba:  rgba(red(@color), green(@color), blue(@color), .6);
    border-color: @color;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
  }
}
/* toolbar */
.ke-toolbar {
  border-bottom: 1px solid @input-border;
  background-color: @input-bg;
  padding: 2px 5px;
  text-align: left;
  overflow: hidden;
  zoom: 1;
}
.ke-toolbar-icon {
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  display: block;
}
.ke-toolbar-icon-url {
  background-image: url(themes/default/default.png);
}

.ke-toolbar {
  .ke-outline {
    border: 1px solid @input-bg;
    margin: 1px;
    padding: 1px 2px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    display: block;
    float: left;
    border-radius: @input-border-radius;
    .opacity(0.8);
    .transition(all, @animation-speed-normal, @animation-type);
  }
  .ke-on,
  .ke-selected {
    .opacity(1);
    border-color: @color-gray-light;
  }
  .ke-selected {
    background-color: @color-gray-pale;
  }
  .ke-disabled {
    cursor: default;
  }
  .ke-separator {
    height: 16px;
    margin: 2px 3px;
    border-left: 1px dotted @color-gray-light;
    border-top: 0;
    border-bottom: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    display: block;
    float: left;
  }
}

.ke-toolbar .ke-hr {
  overflow: hidden;
  height: 1px;
  clear: both;
}
/* edit */
.ke-edit {
  padding: 0;
}
.ke-edit-iframe,
.ke-edit-textarea {
  border: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.ke-edit-textarea {
  font-size: @font-size-small;
  font-family: @font-family-monospace;
  background-color: @color-back;
  color: @color-fore;
  overflow: auto;
  resize: none;
}
.ke-edit-textarea:focus {
  outline: none;
}
/* statusbar */
.ke-statusbar {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: @input-bg;
  border-top: 1px solid @input-border;
  font-size: 0;
  line-height: 0;
  *height: 12px;
  overflow: hidden;
  text-align: center;
  cursor: s-resize;
  .transition(all, @animation-speed-normal, @animation-type);
  .opacity(0);

  .ke-statusbar-center-icon,
  .ke-statusbar-right-icon {
    height: 11px;
    background-image: url(themes/default/default.png);
  }
  .ke-statusbar-center-icon {
    background-position: -0px -754px;
    width: 15px;
  }

  .ke-statusbar-right-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
    background-position: -5px -741px;
    width: 11px;
  }

  &:hover {
    .opacity(1);
  }
}

/* menu */
.ke-menu {
  padding: 5px 0;
  font-family: @font-family-base;
  font-size: 12px;
  text-align: left;
  overflow: hidden;
  background-color: @dropdown-bg;
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
}
.ke-menu-item {
  height: 24px;
  overflow: hidden;
  cursor: pointer;
}
.ke-menu-item-on {
  color: @dropdown-link-active-color;
  text-decoration: none;
  outline: 0;
  background-color: @dropdown-link-active-bg;
}
.ke-menu-item-left {
  width: 27px;
  text-align: center;
  overflow: hidden;
}
.ke-menu-item-center {
  width: 0;
  height: 24px;
  border-left: 1px solid #E3E3E3;
  border-right: 1px solid #FFFFFF;
  border-top: 0;
  border-bottom: 0;
}
.ke-menu-item-center-on {
  border-left: 1px solid #E9EFF6;
  border-right: 1px solid #E9EFF6;
}
.ke-menu-item-right {
  border: 0;
  padding: 0 0 0 5px;
  line-height: 24px;
  text-align: left;
  overflow: hidden;
}
.ke-menu-separator {
  margin: 2px 0;
  height: 0;
  overflow: hidden;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #FFFFFF;
  border-left: 0;
  border-right: 0;
}
/* colorpicker */
.ke-colorpicker {
  background-color: @dropdown-bg;
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
}
.ke-colorpicker-table {
  border:0;
  margin:0;
  padding:0;
  border-collapse: separate;
}
.ke-colorpicker-cell {
  font-size: 0;
  line-height: 0;
  border: none;
  cursor: pointer;
  padding:0;
}
.ke-colorpicker-cell-color {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  .transition(all, @animation-speed-normal, @animation-type);
}
.ke-colorpicker-cell-top {
  font-family: @font-family-base;
  font-size: 12px;
  line-height: 25px;
  cursor: pointer;
  margin:0;
  padding:0;
  text-align: center;
}
.ke-colorpicker-cell-on
{
  color: @dropdown-link-active-color;
  background-color: @dropdown-link-active-bg;
  .ke-colorpicker-cell-color
  {
    border: 2px solid @color-fore;
  }
}
.ke-colorpicker-cell-selected
{
  .ke-colorpicker-cell-color
  {
    border: 2px solid @color-fore;
  }
}

/* dialog */
.ke-dialog {
  position: absolute;
  margin: 0;
  padding: 0;
}
.ke-dialog .ke-header {
  width: 100%;
  margin-bottom: 10px;
}
.ke-dialog .ke-header .ke-left {
  float: left;
}
.ke-dialog .ke-header .ke-right {
  float: right;
}
.ke-dialog .ke-header label {
  margin-right: 0;
  cursor: pointer;
  font-weight: normal;
  display: inline;
  vertical-align: top;
}
.ke-dialog-content {
  width: 100%;
  height: 100%;
  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-base;
  overflow: hidden;
}
.ke-dialog-shadow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 9px rgba(0,0,0,.5);

  background-color: #F0F0EE;
}
.ke-dialog-header {
  border:0;
  margin:0;
  background: @color-gray-pale;
  font-weight: bold;
  font-family: @headings-font-family;
  font-size: @font-size-base;
  text-align: left;
  cursor: move;
  padding: @modal-title-padding /2 @modal-title-padding;
  border-bottom: 1px solid @modal-header-border-color;
  min-height: (@modal-title-padding + @modal-title-line-height);
}
.ke-dialog-icon-close {
  display: block;
  background: url(default.png) no-repeat scroll 0 -688px;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 8px;
  top: 10px;
  cursor: pointer;
  .opacity(0.6);

  &:hover {
    .opacity(1);
  }
}
.ke-dialog-body {
  font-family: @font-family-base;
  font-size: @font-size-small;
  text-align: left;
  overflow: hidden;
  width: 100%;
}
.ke-dialog-body textarea {
  display: block;
  overflow: auto;
  padding: 0;
  resize: none;
}
.ke-dialog-body textarea:focus,
.ke-dialog-body input:focus,
.ke-dialog-body select:focus {
  outline: none;
}
.ke-dialog-body label {
  margin-right: 10px;
  cursor: pointer;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-dialog-body img {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-dialog-body select {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  width: auto;
}
.ke-dialog-body .ke-textarea {
  display: block;
  width: 408px;
  height: 260px;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
}
.ke-dialog-body .ke-form {
  margin: 0;
  padding: 0;
}
.ke-dialog-loading {
  position: absolute;
  top: 0;
  left: 1px;
  z-index: 1;
  text-align: center;
}
.ke-dialog-loading-content {
  background: url("../common/loading.gif") no-repeat;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    height: 31px;
    line-height: 31px;
    padding-left: 36px;
}
.ke-dialog-row {
  margin-bottom: 10px;
}
.ke-dialog-footer {
  text-align: right;
  padding: 5px;
  width: 100%;
  border-top: 1px solid @modal-footer-border-color;
}
.ke-dialog-preview,
.ke-dialog-yes {
  margin: 5px;
}
.ke-dialog-no {
  margin: 5px 10px 5px 5px;
}
.ke-dialog-mask {
  background-color: @modal-backdrop-bg;
  .opacity(.5);
}
.ke-button-common {
  cursor: pointer;
  height: 23px;
  line-height: 21px;
  overflow: visible;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.ke-button-outer {
  padding: 0;
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-button {
  padding: 0 12px;
  margin: 0;
  border-radius: @border-radius-base;
  border: 1px solid @btn-default-border;
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
  font-size: 12px;
  left: 2px;
  text-decoration: none;
}
/* inputbox */
.ke-input-text {
  font-family: "sans serif",tahoma,verdana,helvetica;
  font-size: 12px;
  line-height: 20px;
  height: 20px;
  padding: 0 4px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  .form-control-focus();
}
.ke-input-number {
  width: 50px;
}
.ke-input-color, ke-dialog-content select {
  border: 1px solid @input-border;
  background-color: @color-back;
  font-size: 12px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
  overflow: hidden;
  cursor: pointer;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}
.ke-upload-button {
  position: relative;
}
.ke-upload-area {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.ke-upload-area .ke-upload-file {
  position: absolute;
  font-size: 60px;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 811212;
  border: 0 none;
  opacity: 0;
  filter: alpha(opacity=0);
}
/* tabs */
.ke-tabs {
  font: 12px/1 "sans serif",tahoma,verdana,helvetica;
  border-bottom:1px solid #A0A0A0;
  padding-left:5px;
  margin-bottom:20px;
}
.ke-tabs-ul  {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
}
.ke-tabs-li {
  position: relative;
  border: 1px solid #A0A0A0;
  background-color: #F0F0EE;
  margin: 0 2px -1px 0;
  padding: 0 20px;
  float: left;
  line-height: 25px;
  text-align: center;
  color: #555555;
  cursor: pointer;
}
.ke-tabs-li-selected {
  background-color: #FFF;
  border-bottom: 1px solid #FFF;
  color: #000;
  cursor: default;
}
.ke-tabs-li-on {
  background-color: #FFF;
  color: #000;
}
/* progressbar */
.ke-progressbar {
  position: relative;
  margin: 0;
  padding: 0;
}
.ke-progressbar-bar {
  border: 1px solid #6FA5DB;
  width: 80px;
  height: 5px;
  margin: 10px 10px 0 10px;
  padding: 0;
}
.ke-progressbar-bar-inner {
  width: 0;
  height: 5px;
  background-color: #6FA5DB;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.ke-progressbar-percent {
  position: absolute;
  top: 0;
  left: 40%;
  display: none;
}
/* swfupload */
.ke-swfupload-top {
  position: relative;
  margin-bottom: 10px;
  _width: 608px;
}
.ke-swfupload-button {
  height: 23px;
  line-height: 23px;
}
.ke-swfupload-desc {
  padding: 0 10px;
  height: 23px;
  line-height: 23px;
}
.ke-swfupload-startupload {
  position: absolute;
  top: 0;
  right: 0;
}
.ke-swfupload-body {
  overflow: scroll;
  background-color:#FFFFFF;
  border: 1px solid @input-border;
  width: auto;
  height: 370px;
  padding: 5px;
}
.ke-swfupload-body .ke-item {
  width: 100px;
  margin: 5px;
}
.ke-swfupload-body .ke-photo {
  position: relative;
  border: 1px solid #DDDDDD;
  background-color:#FFFFFF;
  padding: 10px;
}
.ke-swfupload-body .ke-delete {
  display: block;
  background: url(default.png) no-repeat scroll 0 -688px;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
.ke-swfupload-body .ke-status  {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100px;
  height: 17px;
}
.ke-swfupload-body .ke-message  {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:17px;
}
.ke-swfupload-body .ke-error  {
  color: red;
}
.ke-swfupload-body .ke-name {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:16px;
}
.ke-swfupload-body .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}

/* emoticons */
.ke-plugin-emoticons {
  position: relative;
}
.ke-plugin-emoticons .ke-preview {
  position: absolute;
  text-align: center;
  margin: 2px;
  padding: 10px;
  top: 0;
  border: 1px solid #A0A0A0;
  background-color: #FFFFFF;
  display: none;
}
.ke-plugin-emoticons .ke-preview-img {
  border:0;
  margin:0;
  padding:0;
}
.ke-plugin-emoticons .ke-table {
  border:0;
  margin:0;
  padding:0;
  border-collapse:separate;
}
.ke-plugin-emoticons .ke-cell {
  margin:0;
  padding:1px;
  border:1px solid #F0F0EE;
  cursor:pointer;
}
.ke-plugin-emoticons .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}
.ke-plugin-emoticons .ke-img {
  display:block;
  background-repeat:no-repeat;
  overflow:hidden;
  margin:2px;
  width:24px;
  height:24px;
  margin: 0;
  padding: 0;
  border: 0;
}
.ke-plugin-emoticons .ke-page {
  text-align: right;
  margin: 5px;
  padding: 0;
  border: 0;
  font: 12px/1 "sans serif",tahoma,verdana,helvetica;
  color: #333;
  text-decoration: none;
}
.ke-plugin-plainpaste-textarea,
.ke-plugin-wordpaste-iframe {
  display: block;
  width: 408px;
  height: 260px;
  font-family: "sans serif",tahoma,verdana,helvetica;
  font-size: 12px;
  border: 1px solid @input-border;
}
/* filemanager */
.ke-plugin-filemanager-header {
  width: 100%;
  margin-bottom: 10px;
}
.ke-plugin-filemanager-header .ke-left {
  float: left;
}
.ke-plugin-filemanager-header .ke-right {
  float: right;
}
.ke-plugin-filemanager-body {
  overflow: scroll;
  background-color:#FFFFFF;
  border: 1px solid @input-border;
  width: auto;
  height: 370px;
  padding: 5px;
}
.ke-plugin-filemanager-body .ke-item {
  width: 100px;
  margin: 5px;
}
.ke-plugin-filemanager-body .ke-photo {
  border: 1px solid #DDDDDD;
  background-color:#FFFFFF;
  padding: 10px;
}
.ke-plugin-filemanager-body .ke-name {
  width: 100px;
  text-align: center;
  overflow: hidden;
  height:16px;
}
.ke-plugin-filemanager-body .ke-on {
  border: 1px solid #5690D2;
  background-color: #E9EFF6;
}
.ke-plugin-filemanager-body .ke-table {
  width: 95%;
  border: 0;
  margin: 0;
  padding: 0;
  border-collapse: separate;
}
.ke-plugin-filemanager-body .ke-table .ke-cell {
  margin: 0;
  padding: 0;
  border: 0;
}
.ke-plugin-filemanager-body .ke-table .ke-name {
  width: 55%;
  text-align: left;
}
.ke-plugin-filemanager-body .ke-table .ke-size {
  width: 15%;
  text-align: left;
}
.ke-plugin-filemanager-body .ke-table .ke-datetime {
  width: 30%;
  text-align: center;
}


Remove useless import comment

Remove useless import comment

// @import "../../styles/typography.less";
@import "../../styles/colors.less";

// GridCard
.grid-card {
  margin: 0 8px 16px;
  background-color: @card-color;
}


remove now unused css

remove now unused css

//
// List Filters
// ==============================

// Helpers
// ------------------------------

.ListHeader__separator () {
	border-left: 1px solid rgba(0,0,0,0.1);
	margin-left: @input-padding-horizontal;
	paddingleft: @input-padding-horizontal;
}

// Base
// ------------------------------

.ListHeader {
	padding-top: 2em;
}

// Sort By
// ------------------------------

.ListHeader__sortedby {
	color: @gray-light;
}

// Search Form
// ------------------------------

.ListHeader__search {
	position: relative;
}
/*button*/.ListHeader__search__icon {
	background: none;
	border: none;
	color: @gray-light;
	font-weight: bold;
	height: 100%;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 2.2em;
	z-index: 2; // above the form field on focus

	// styles when search icon
	&.is-search {
		pointer-events: none;
	}

	// styles when clear icon
	&.is-clear {
		&:hover,
		&:focus {
			color: @app-danger;
			outline: 0 none;
			text-decoration: none;
		}
		&:active {
			color: darken(@app-danger, 10%);
		}
	}
}

// Expand
// ------------------------------

.ListHeader__expand {
	.ListHeader__separator();
	display: none;
}

// Create
// ------------------------------

.ListHeader__create {
	.ListHeader__separator();
}
.ListHeader__create__label--lg { display: none; }

// Responsive
// ------------------------------

@media (min-width: @screen-lg) {
	.ListHeader__expand {
		display: block;
	}
	.ListHeader__create__label { display: none; }
	.ListHeader__create__label--lg { display: inline; }
}

@media (max-width: @screen-xs-max) {
	.ListHeader__bar {
		.flex-wrap(wrap);
	}
	.ListHeader__search {
		margin-bottom: @input-padding-horizontal;
		min-width: 100%;
	}
	.ListHeader__filter.ListHeader__filter {
		padding-left: 1px;
	}

	// make buttons fill width
	.ListHeader__filter,
	.ListHeader__columns,
	.ListHeader__download,
	.ListHeader__create {
		.flex(1,1,0);

		> .Button {
			display: block;
			padding-left: 0;
			padding-right: 0;
			width: 100%;
		}
	}
}
@media (max-width: 500px) {
	.ListHeader__create {
		border: none;
		margin: 0;
		padding: 0;
	}
	.ListHeader__create__icon {
		margin-right: 0 !important;
	}

	// small title
	.ListHeader__title {
		font-size: 1.25em;
		font-weight: 500;
	}

	// remove margin from disclosure arrows
	.ListHeader__bar .disclosure-arrow {
		margin-left: 0;
	}
}

//
// List Filters
// ==============================

// Helpers
// ------------------------------

.ListHeader__separator () {
	border-left: 1px solid rgba(0,0,0,0.1);
	margin-left: @input-padding-horizontal;
	paddingleft: @input-padding-horizontal;
}

// Base
// ------------------------------

.ListHeader {
	padding-top: 2em;
}

// Sort By
// ------------------------------

.ListHeader__sortedby {
	color: @gray-light;
}

// Search Form
// ------------------------------

.ListHeader__search {
	position: relative;
}
/*button*/.ListHeader__search__icon {
	background: none;
	border: none;
	color: @gray-light;
	font-weight: bold;
	height: 100%;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 2.2em;
	z-index: 2; // above the form field on focus

	// styles when search icon
	&.is-search {
		pointer-events: none;
	}

	// styles when clear icon
	&.is-clear {
		&:hover,
		&:focus {
			color: @app-danger;
			outline: 0 none;
			text-decoration: none;
		}
		&:active {
			color: darken(@app-danger, 10%);
		}
	}
}

// Filter
// ------------------------------

.ListHeader__filter__icon {
	display: none;
}

// Columns
// ------------------------------

.ListHeader__columns__icon {
	display: none;
}

// Download
// ------------------------------

.ListHeader__download__icon {
	display: none;
}

// Expand
// ------------------------------

.ListHeader__expand {
	.ListHeader__separator();
	display: none;
}

// Create
// ------------------------------

.ListHeader__create {
	.ListHeader__separator();
}
.ListHeader__create__label--lg { display: none; }

// Responsive
// ------------------------------

@media (min-width: @screen-lg) {
	.ListHeader__expand {
		display: block;
	}
	.ListHeader__create__label { display: none; }
	.ListHeader__create__label--lg { display: inline; }
}

@media (max-width: @screen-xs-max) {
	.ListHeader__bar {
		.flex-wrap(wrap);
	}
	.ListHeader__search {
		margin-bottom: @input-padding-horizontal;
		min-width: 100%;
	}
	.ListHeader__filter.ListHeader__filter {
		padding-left: 1px;
	}

	// make buttons fill width
	.ListHeader__filter,
	.ListHeader__columns,
	.ListHeader__download,
	.ListHeader__create {
		.flex(1,1,0);

		> .Button {
			display: block;
			padding-left: 0;
			padding-right: 0;
			width: 100%;
		}
	}
}
@media (max-width: 500px) {
	.ListHeader__create {
		border: none;
		margin: 0;
		padding: 0;
	}
	.ListHeader__create__icon {
		margin-right: 0 !important;
	}

	// small title
	.ListHeader__title {
		font-size: 1.25em;
		font-weight: 500;
	}

	// remove margin from disclosure arrows
	.ListHeader__bar .disclosure-arrow {
		margin-left: 0;
	}

	// replace button labels with icons
	.ListHeader__columns__icon,
	.ListHeader__download__icon,
	.ListHeader__filter__icon { display: inline-block; }
	.ListHeader__columns__label,
	.ListHeader__create__label,
	.ListHeader__download__label,
	.ListHeader__filter__label { display: none; }
}


Remove time reference

Remove time reference

Doesn't matter that much and was already outdated.

@import "ui-variables";
@import "octicon-mixins";

@icon-size: 30px;
@width: 260px;
@width-detail: 400px;
@max-height: 200px;
@notification-gap: 2px;
@font-family-monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace;

atom-notifications {
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: @component-padding;
  font-size: 1.2em;
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }

  // -webkit-user-modify: read-write; // editable text during dev
}

atom-notification {
  float: right;
  clear: right;
  position: relative;
  width: @width;
  padding-left: @icon-size;
  max-height: @max-height;
  margin-bottom: @notification-gap;
  border-radius: @component-border-radius;
  word-wrap: break-word;

  &.icon:before {
    position: absolute;
    top: 0;
    left: 0;
    width: @icon-size;
    height: 100%;
    padding-top: @component-padding;
    text-align: center;
    border-radius: @component-border-radius 0 0 @component-border-radius;
  }

  .content {
    max-height: inherit;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  // .item's are used as general containers
  .item {
    padding: @component-padding;
    border-top: 1px solid hsla(0,0%,0%,.1);
    &.message {
      border-top: none;
    }
  }

  &.has-close .message {
    padding-right: @component-padding + 24px; // space for icon
  }

  .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    font-size: 16px;
    text-shadow: none;
    color: inherit;
    opacity: .3;
    &:hover, &:focus {
      opacity: 1;
      color: inherit;
    }
    &:active {
      opacity: .2;
    }
    &:before {
      margin: 0;
      color: inherit;
    }
  }

  &.has-detail {
    width: @width-detail;
  }

  .detail {
    font-size: .8em;
    background-color: hsla(0,0%,100%,.3);
    background-clip: padding-box;
    white-space: pre;
    font-family: @font-family-monospace;
  }

  .fatal-notification {
    font-size: .8em;
  }

  .btn-toolbar {
    margin-top:  @component-padding;
  }
}

// Types -------------------------------

atom-notification.fatal {
  .notification(@text-color-error; @background-color-error);
}

atom-notification.error {
  .notification(@text-color-error; @background-color-error);
}

atom-notification.warning {
  .notification(@text-color-warning; @background-color-warning);
}

atom-notification.info {
  .notification(@text-color-info; @background-color-info);
}

atom-notification.success {
  .notification(@text-color-success; @background-color-success);
}

// Mixins -------------------------------

.notification(@txt; @bg) {
  color: darken(@txt, 40%);
  background-color: lighten(@bg, 25%);

  a {
    color: darken(@txt, 20%);
  }

  &.icon:before {
    color: lighten(@bg, 36%);
    background-color: @bg;
  }
}

// Animations -------------------------------

atom-notification {
  -webkit-animation: notification-show .16s cubic-bezier(0.175, 0.885, 0.32, 1.27499);

  &[type="fatal"] {
    -webkit-animation: notification-show .16s cubic-bezier(0.175, 0.885, 0.32, 1.27499),
                       notification-shake 4s 2s;
    -webkit-animation-iteration-count: 1, 3; // shake 3 times after showing
    &:hover {
      -webkit-animation-play-state: paused; // stop shaking when hovering
    }
  }

  &.remove,
  &.remove:hover {
    -webkit-animation: notification-hide   .24s      cubic-bezier(0.33859, -0.42, 1, -0.22),
                       notification-shrink .24s .24s cubic-bezier(0.5, 0, 0, 1);
    -webkit-animation-fill-mode: forwards;
  }
}

@-webkit-keyframes notification-show {
    0% { opacity: 0; transform: perspective(@width) translate(0, -@icon-size) rotateX(90deg); }
  100% { opacity: 1; transform: perspective(@width) translate(0,           0) rotateX( 0deg); }
}

@-webkit-keyframes notification-hide {
    0% { opacity: 1; transform: scale( 1); }
  100% { opacity: 0; transform: scale(.8); }
}

@-webkit-keyframes notification-shrink {
    0% {  opacity: 0; max-height: @max-height; margin-bottom: @notification-gap; transform: scale(.8); }
  100% {  opacity: 0; max-height: 0;           margin-bottom: 0;            transform: scale(.8); }
}

@-webkit-keyframes notification-shake {
    0% { transform: translateX(   0); }
    2% { transform: translateX(-4px); }
    4% { transform: translateX( 8px); }
    6% { transform: translateX(-4px); }
    8% { transform: translateX(   0); }
  100% { transform: translateX(   0); }
}

@import "ui-variables";
@import "octicon-mixins";

@icon-size: 30px;
@width: 260px;
@width-detail: 400px;
@max-height: 200px;
@notification-gap: 2px;
@font-family-monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace;

atom-notifications {
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: @component-padding;
  font-size: 1.2em;
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }

  // -webkit-user-modify: read-write; // editable text during dev
}

atom-notification {
  float: right;
  clear: right;
  position: relative;
  width: @width;
  padding-left: @icon-size;
  max-height: @max-height;
  margin-bottom: @notification-gap;
  border-radius: @component-border-radius;
  word-wrap: break-word;

  &.icon:before {
    position: absolute;
    top: 0;
    left: 0;
    width: @icon-size;
    height: 100%;
    padding-top: @component-padding;
    text-align: center;
    border-radius: @component-border-radius 0 0 @component-border-radius;
  }

  .content {
    max-height: inherit;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  // .item's are used as general containers
  .item {
    padding: @component-padding;
    border-top: 1px solid hsla(0,0%,0%,.1);
    &.message {
      border-top: none;
    }
  }

  &.has-close .message {
    padding-right: @component-padding + 24px; // space for icon
  }

  .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    font-size: 16px;
    text-shadow: none;
    color: inherit;
    opacity: .3;
    &:hover, &:focus {
      opacity: 1;
      color: inherit;
    }
    &:active {
      opacity: .2;
    }
    &:before {
      margin: 0;
      color: inherit;
    }
  }

  &.has-detail {
    width: @width-detail;
  }

  .detail {
    font-size: .8em;
    background-color: hsla(0,0%,100%,.3);
    background-clip: padding-box;
    white-space: pre;
    font-family: @font-family-monospace;
  }

  .fatal-notification {
    font-size: .8em;
  }

  .btn-toolbar {
    margin-top:  @component-padding;
  }
}

// Types -------------------------------

atom-notification.fatal {
  .notification(@text-color-error; @background-color-error);
}

atom-notification.error {
  .notification(@text-color-error; @background-color-error);
}

atom-notification.warning {
  .notification(@text-color-warning; @background-color-warning);
}

atom-notification.info {
  .notification(@text-color-info; @background-color-info);
}

atom-notification.success {
  .notification(@text-color-success; @background-color-success);
}

// Mixins -------------------------------

.notification(@txt; @bg) {
  color: darken(@txt, 40%);
  background-color: lighten(@bg, 25%);

  a {
    color: darken(@txt, 20%);
  }

  &.icon:before {
    color: lighten(@bg, 36%);
    background-color: @bg;
  }
}

// Animations -------------------------------

atom-notification {
  -webkit-animation: notification-show .16s cubic-bezier(0.175, 0.885, 0.32, 1.27499);

  &[type="fatal"] {
    -webkit-animation: notification-show .16s cubic-bezier(0.175, 0.885, 0.32, 1.27499),
                       notification-shake 4s 2s;
    -webkit-animation-iteration-count: 1, 3; // shake 3 times after showing
    &:hover {
      -webkit-animation-play-state: paused; // stop shaking when hovering
    }
  }

  &.remove,
  &.remove:hover {
    // Total time: 700ms
    -webkit-animation: notification-hide   .24s      cubic-bezier(0.33859, -0.42, 1, -0.22),
                       notification-shrink .24s .24s cubic-bezier(0.5, 0, 0, 1);
    -webkit-animation-fill-mode: forwards;
  }
}

@-webkit-keyframes notification-show {
    0% { opacity: 0; transform: perspective(@width) translate(0, -@icon-size) rotateX(90deg); }
  100% { opacity: 1; transform: perspective(@width) translate(0,           0) rotateX( 0deg); }
}

@-webkit-keyframes notification-hide {
    0% { opacity: 1; transform: scale( 1); }
  100% { opacity: 0; transform: scale(.8); }
}

@-webkit-keyframes notification-shrink {
    0% {  opacity: 0; max-height: @max-height; margin-bottom: @notification-gap; transform: scale(.8); }
  100% {  opacity: 0; max-height: 0;           margin-bottom: 0;            transform: scale(.8); }
}

@-webkit-keyframes notification-shake {
    0% { transform: translateX(   0); }
    2% { transform: translateX(-4px); }
    4% { transform: translateX( 8px); }
    6% { transform: translateX(-4px); }
    8% { transform: translateX(   0); }
  100% { transform: translateX(   0); }
}


Correct width for the tab-control

Correct width for the tab-control

Signed-off-by: tomdev <96835dd8bfa718bd6447ccc87af89ae1675daeca@codigy.nl>

@import "bootstrap/mixins";
@import "bootstrap/variables";

// These variables are defined in parent filed as well. Should be removed from here
@transition: opacity 0.2s ease;
@max-z-index : 2147483647;

@controlsHeight: 23px;
@rightIndent: 10px;

// Hi nasty override - fix this width please
#extended_factlink {
  .tab-control {
    margin-left: 70px;
    width: 550px;
  }
}
// Hi nasty override - fix this width please
.modal {
  .tab-control {
    width: 495px;
  }
}
// Hi nasty override - fix this width please
.tab-control {
  margin-left: 70px;
  margin-top: 14px;
  margin-bottom: 8px;
  list-style: none;

  width: 600px;

  li {
    float: left;
    padding-bottom: 5px;
    opacity: 0;

    &.alwaysshow, &.tabOpened {
      opacity: 1;
    }

    a {
      padding-top: 6px;
      padding-bottom: 6px;
      line-height: 18px;
      border: 1px solid transparent;

      // to add: border-radius shizzle
      padding-right: 12px;
      padding-left: 12px;
      margin-right: 2px;

      &:hover {
        text-decoration: none;
      }
    }

    &.active {
      a {
        background: #f4f4f4;
        border: 1px solid #e2e2e2;
        border-bottom: 1px solid #f4f4f4;

        color: #333;
        .custom-radius(5px, 0, 0, 5px);
      }
    }

    &.destroy {
      a {
        #font > .iconic();
        &:before {
          content: "t";
        }
      }
    }

    &.permalink {
      background: image-url("icon-permalink.png") no-repeat center 6px;
    }

    &.add-to-channel {
      float: right;
      padding-right: 12px;
      &.active {

        a {
          background: #f3f6fa;
          border: 1px solid #dee5ef;
          border-bottom: 1px solid #f3f6fa;
        }
      }
    }

    &.interacting-users {
      float: right;

      padding: 0 0 0 8px;
      width: 72px;
      ul {
        padding: 0px;
        margin: 0px;
        li {
          float:right;
          padding: 0px;
          margin: 0px;
          a {
            padding: 0px;
            margin: 0px;
          }
        }
      }
    }
  }
}

.tab-content {
  margin-top: 36px;

  .arrowDown(@width: 10px, @color: @whiteDarker) {
    position: absolute;
    margin-top: -1px;
    .arrow-down, .arrow-down-border {
      position: relative;
      width: 0;
      height: 0;
      left: 10px;
    }
    .arrow-down {
      border-left: @width solid transparent;
      border-right: @width solid transparent;
      border-top: @width solid @color;
      position: relative;
      top: -21px;
    }
    .arrow-down-border {
      border-color: @grayLighter transparent transparent transparent;
      border-style: solid;
      border-width: @width;
      top: 1px;
    }
  }

  .dropdown-container {
    border-top: 1px solid #e2e2e2;
    margin-top: 30px;
    background: @whiteDarker;
    padding: 9px 0 10px 0;
    ul.search-results {
      max-height: 300px;
      overflow-y: scroll;

      position: absolute;
      z-index: 200;
      background: @white;
      width: 90%;
      .box-shadow(0px 0px 6px rgba(0, 0, 0, 0.20));
      li {
        cursor: pointer;
        padding: 8px 12px;
        border: 1px solid @grayLighter;
        border-top: none;
        &:hover, &:focus {
          background-color: @lightYellow;
        }
        &.loading, &.add {
          display: none;
        }
        &.add {
          background-color: whiteSmoke;
          font-weight: bolder;
          &:hover {
            background: darken(#f5f5f5, 2);
          }
          img { display: none; }
        }
        .word {
          font-weight: normal;
          font-style: italic;
        }
      }
    }
    .add-evidence-container {
      padding: 0 0 9px 10px;
      background-color: @whiteDarker;

      .add-evidence {
        display: none;
      }
      input[type="text"] {
        @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.1);
        .box-shadow(@shadow);
        width: 90%;
        border: 1px solid #ccc;
        font-size: 12px;
        padding: 8px 9px;
        .border-radius(4px);
        #font > .sans-serif(13px, normal, 1.1);
        height: 14px;
        margin: 0;

        &:focus {
          outline: 0;
          border: 1px solid @linkColor;
        }
      }
      .cancel {
        margin-left: 18px;
      }
    }
    .no-evidence-message {
      display: none;
      text-align: center;
      padding: 20px 5px 5px 5px;
      height: 55px;
    }
    .loading-evidence {
      display: block;
      height: 55px;
      padding-top: 20px;
      text-align: center;
    }
    .arrow {
      .arrowDown();
    }
  }

  .add-to-channel {
    .dropdown-container {
      padding: 12px 0;
      background: #f3f6fa;

      h4 {
        padding: 0 0 10px 16px;
        font-weight: 300;
      }

      .wrapper {
        padding: 12px;
        background: #fff;
        border-top: 1px solid #e8edf3;
        border-bottom: 1px solid #e8edf3;
      }
    }
  }
}

@import "bootstrap/mixins";
@import "bootstrap/variables";

// These variables are defined in parent filed as well. Should be removed from here
@transition: opacity 0.2s ease;
@max-z-index : 2147483647;

@controlsHeight: 23px;
@rightIndent: 10px;

#extended_factlink {
  .tab-control {
    margin-left: 70px;
    width: 90%;
  }
}

.tab-control {
  margin-left: 70px;
  margin-top: 14px;
  margin-bottom: 8px;
  list-style: none;

  width: 590px;

  li {
    float: left;
    padding-bottom: 5px;
    opacity: 0;

    &.alwaysshow, &.tabOpened {
      opacity: 1;
    }

    a {
      padding-top: 6px;
      padding-bottom: 6px;
      line-height: 18px;
      border: 1px solid transparent;

      // to add: border-radius shizzle
      padding-right: 12px;
      padding-left: 12px;
      margin-right: 2px;

      &:hover {
        text-decoration: none;
      }
    }

    &.active {
      a {
        background: #f4f4f4;
        border: 1px solid #e2e2e2;
        border-bottom: 1px solid #f4f4f4;

        color: #333;
        .custom-radius(5px, 0, 0, 5px);
      }
    }

    &.destroy {
      a {
        #font > .iconic();
        &:before {
          content: "t";
        }
      }
    }

    &.permalink {
      background: image-url("icon-permalink.png") no-repeat center 6px;
    }

    &.add-to-channel {
      float: right;
      padding-right: 12px;
      &.active {

        a {
          background: #f3f6fa;
          border: 1px solid #dee5ef;
          border-bottom: 1px solid #f3f6fa;
        }
      }
    }

    &.interacting-users {
      float: right;

      padding: 0 0 0 8px;
      width: 72px;
      ul {
        padding: 0px;
        margin: 0px;
        li {
          float:right;
          padding: 0px;
          margin: 0px;
          a {
            padding: 0px;
            margin: 0px;
          }
        }
      }
    }
  }
}

.tab-content {
  margin-top: 36px;

  .arrowDown(@width: 10px, @color: @whiteDarker) {
    position: absolute;
    margin-top: -1px;
    .arrow-down, .arrow-down-border {
      position: relative;
      width: 0;
      height: 0;
      left: 10px;
    }
    .arrow-down {
      border-left: @width solid transparent;
      border-right: @width solid transparent;
      border-top: @width solid @color;
      position: relative;
      top: -21px;
    }
    .arrow-down-border {
      border-color: @grayLighter transparent transparent transparent;
      border-style: solid;
      border-width: @width;
      top: 1px;
    }
  }

  .dropdown-container {
    border-top: 1px solid #e2e2e2;
    margin-top: 30px;
    background: @whiteDarker;
    padding: 9px 0 10px 0;
    ul.search-results {
      max-height: 300px;
      overflow-y: scroll;

      position: absolute;
      z-index: 200;
      background: @white;
      width: 90%;
      .box-shadow(0px 0px 6px rgba(0, 0, 0, 0.20));
      li {
        cursor: pointer;
        padding: 8px 12px;
        border: 1px solid @grayLighter;
        border-top: none;
        &:hover, &:focus {
          background-color: @lightYellow;
        }
        &.loading, &.add {
          display: none;
        }
        &.add {
          background-color: whiteSmoke;
          font-weight: bolder;
          &:hover {
            background: darken(#f5f5f5, 2);
          }
          img { display: none; }
        }
        .word {
          font-weight: normal;
          font-style: italic;
        }
      }
    }
    .add-evidence-container {
      padding: 0 0 9px 10px;
      background-color: @whiteDarker;

      .add-evidence {
        display: none;
      }
      input[type="text"] {
        @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.1);
        .box-shadow(@shadow);
        width: 90%;
        border: 1px solid #ccc;
        font-size: 12px;
        padding: 8px 9px;
        .border-radius(4px);
        #font > .sans-serif(13px, normal, 1.1);
        height: 14px;
        margin: 0;

        &:focus {
          outline: 0;
          border: 1px solid @linkColor;
        }
      }
      .cancel {
        margin-left: 18px;
      }
    }
    .no-evidence-message {
      display: none;
      text-align: center;
      padding: 20px 5px 5px 5px;
      height: 55px;
    }
    .loading-evidence {
      display: block;
      height: 55px;
      padding-top: 20px;
      text-align: center;
    }
    .arrow {
      .arrowDown();
    }
  }

  .add-to-channel {
    .dropdown-container {
      padding: 12px 0;
      background: #f3f6fa;

      h4 {
        padding: 0 0 10px 16px;
        font-weight: 300;
      }

      .wrapper {
        padding: 12px;
        background: #fff;
        border-top: 1px solid #e8edf3;
        border-bottom: 1px solid #e8edf3;
      }
    }
  }
}


Styling showcase correctly

Styling showcase correctly

// Override d3fc-showcase colours
@primary-dark-blue: @dark-background;
@secondary-orange: @chart-teal;
@secondary-grey: @chart-teal;
@primary-blue: @chart-teal;

.y-axis .closeLine.tick > path {
  stroke: @chart-teal !important;
  fill: @chart-teal !important;
}

.secondary-container .bar {
  stroke: @chart-fade !important;
  fill: @chart-fade !important;
}

#navbar-row #navbar-container .plot-area .multi .area {
  fill: @chart-fade !important;
}
#navbar-row #navbar-container .plot-area .multi path {
  stroke: @chart-fade !important;
  stroke-width: @chart-fade !important;
}

.secondary-container .macd-divergence .bar {
  stroke: @chart-fade !important;
  fill: @chart-fade !important;
}

#navbar-row #navbar-reset {
  stroke: none !important;
  fill: @chart-fade !important;
}

.y-axis .closeLine.tick > text {
  fill: black !important;
}

.dropdown-menu{
  background-color: @middle-background !important;
}

.head-row {
  display: none;
}

.primary-row {
  margin-top: 54px !important;
}

#charts {
  padding-right: 0px !important;
}

#charts-container{
  padding-bottom: 3px;
}

#selectors {
  top: -60px;
  left: 0px;
}

#app-container {
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  width: 100%;
}

// Override d3fc-showcase colours
@primary-dark-blue: @dark-background;
@secondary-orange: @chart-teal;

.head-row {
  display: none;
}

.primary-row {
  margin-top: 54px !important;
}

#charts {
  padding-right: 0px !important;
}

#charts-container{
  padding-bottom: 3px;
}

#selectors {
  top: -60px;
  left: 0px;
}

#app-container {
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  width: 100%;
}