Tweak.

Tweak.

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

/*
 * Brackets Colors
 *
 * These are general purpose colors that can be used in defining
 * themes or UI elements.

 * IMPORTANT: IF we want a UI element to be themeable, these variable names or
 * color literals (#aaa) should not be used in its definition.
 *
 * Instead, a new semantically-meaningful variables/mixins should be added
 * to the "brackets_theme_default.less" file, and then these variables/mixins
 * should be used in the definition of the UI element
 *
 * For UI elements we do NOT want to theme, we should use these color names
 *
 * All brackets color variable names (that refer to an actual color)
 * are prefixed with "bc-" for "brackets". This is to avoid confusion
 * with system and css color names. (We define our own colors because system
 * colors are ugly.)
 */

// General
@bc-bg-highlight:               #e0f0fa;
@bc-bg-inline-widget:           #e6e9e9;
@bc-bg-tool-bar:                #5D5F60;
@bc-bg-status-bar:              #fff;
@bc-disabled-opacity:           0.3;
@bc-error:                      #f74687;
@bc-modal-backdrop-opacity:     0.4;
@bc-spinner:                    #78b2f2;

// Highlights and Shadows
@bc-highlight:                  rgba(255, 255, 255, 0.12);
@bc-highlight-hard:             rgba(255, 255, 255, 0.5);
@bc-shadow:                     rgba(0, 0, 0, 0.24);
@bc-shadow-large:               rgba(0, 0, 0, 0.5);
@bc-shadow-small:               rgba(0, 0, 0, 0.06);

// Border Radius
@bc-border-radius:              3px;
@bc-border-radius-large:        5px;
@bc-border-radius-small:        2px;

// Menu
@bc-menu-bg:                    #fff;
@bc-menu-text:                  #000;
@bc-menu-separator:             #eaeaea;

// Warning
@bc-warning-bg:                 #fdf5cc;
@bc-warning-text:               #635301;

// Text
@bc-text:                       #333;
@bc-text-alt:                   #fff;
@bc-text-emphasized:            #111;
@bc-text-link:                  #0083e8;
@bc-text-medium:                #606060;
@bc-text-quiet:                 #aaa;
@bc-text-thin:                  #000;
@bc-text-thin-quiet:            #777;

// Panel
@bc-panel-bg:                   #dfe2e2;
@bc-panel-bg-alt:               #e6e9e9;
@bc-panel-bg-promoted:          #d4d7d7;
@bc-panel-bg-hover:             rgba(255, 255, 255, 0.6);
@bc-panel-bg-hover-alt:         rgba(0, 0, 0, 0.04);
@bc-panel-bg-selected:          #d0d5d5;
@bc-panel-bg-text-highlight:    #fff;
@bc-panel-border:               rgba(0, 0, 0, 0.09);
@bc-panel-separator:            #c3c6c5;

// Default Button
@bc-btn-bg:                     #e5e9e9;
@bc-btn-bg-down:                #d3d7d7;
@bc-btn-bg-down-alt:            #404141;
@bc-btn-border:                 #b2b5b5;
@bc-btn-border-error:           #fa689d;
@bc-btn-border-error-glow:      #ffb0cd;
@bc-btn-border-focused:         #2893ef;
@bc-btn-border-focused-glow:    #94ceff;
@bc-btn-triangle:               #9b9b9b;
@bc-input-bg:                   #fff;

// Primary Button
@bc-primary-btn-bg:             #288edf;
@bc-primary-btn-bg-down:        #0380e8;
@bc-primary-btn-border:         #1474bf;

// Secondary Button
@bc-secondary-btn-bg:           #91cc41;
@bc-secondary-btn-bg-down:      #82b839;
@bc-secondary-btn-border:       #74B120;

// Sidebar
@bc-sidebar-bg:                 #3C3F41;
@bc-sidebar-selection:          #2D2E30;

// images
@button-icon:                   "images/find-replace-sprites.svg";
@jstree-sprite:                 url("images/jsTreeSprites.svg") !important;

/* Dark Core UI variables -----------------------------------------------------------------------------*/

// General
@dark-bc-bg-highlight:               #284160;
@dark-bc-bg-inline-widget:           #1b1b1b;
@dark-bc-bg-tool-bar:                #5D5F60;
@dark-bc-bg-status-bar:              #1c1c1e;
@dark-bc-disabled-opacity:           0.3;
@dark-bc-error:                      #f74687;
@dark-bc-modal-backdrop-opacity:     0.7;
@dark-bc-spinner:                    #2b85ea;

// Highlights and Shadows
@dark-bc-highlight:                  rgba(255, 255, 255, 0.06);
@dark-bc-highlight-hard:             rgba(255, 255, 255, 0.2);
@dark-bc-shadow:                     rgba(0, 0, 0, 0.24);
@dark-bc-shadow-medium:              rgba(0, 0, 0, 0.12);
@dark-bc-shadow-large:               rgba(0, 0, 0, 0.5);
@dark-bc-shadow-small:               rgba(0, 0, 0, 0.06);

// Border Radius
@dark-bc-border-radius:              3px;
@dark-bc-border-radius-large:        5px;
@dark-bc-border-radius-small:        2px;

// Menu
@dark-bc-menu-bg:                    #000;
@dark-bc-menu-text:                  #fff;
@dark-bc-menu-separator:             #343434;

// Warning
@dark-bc-warning-bg:                 #c95800;
@dark-bc-warning-text:               #fff;

// Text
@dark-bc-text:                       #ccc;
@dark-bc-text-alt:                   #fff;
@dark-bc-text-emphasized:            #fff;
@dark-bc-text-link:                  #6bbeff;
@dark-bc-text-medium:                #ccc;
@dark-bc-text-quiet:                 #9a9a9a;
@dark-bc-text-thin:                  #fff;
@dark-bc-text-thin-quiet:            #bbb;

// Panel
@dark-bc-panel-bg:                   #2c2c2c;
@dark-bc-panel-bg-alt:               #313131;
@dark-bc-panel-bg-promoted:          #222;
@dark-bc-panel-bg-hover:             rgba(255, 255, 255, 0.12);
@dark-bc-panel-bg-hover-alt:         rgba(0, 0, 0, 0.1);
@dark-bc-panel-bg-selected:          #3d3e40;
@dark-bc-panel-bg-text-highlight:    #000;
@dark-bc-panel-border:               #000;
@dark-bc-panel-separator:            #343434;

// Default Button
@dark-bc-btn-bg:                     #3f3f3f;
@dark-bc-btn-bg-down:                #383838;
@dark-bc-btn-bg-down-alt:            #404141;
@dark-bc-btn-border:                 #202020;
@dark-bc-btn-border-error:           #fa689d;
@dark-bc-btn-border-error-glow:      transparent;
@dark-bc-btn-border-focused:         #2893ef;
@dark-bc-btn-border-focused-glow:    transparent;
@dark-bc-btn-triangle:               #767676;
@dark-bc-input-bg:                   #555;

// Primary Button
@dark-bc-primary-btn-bg:             #016dc4;
@dark-bc-primary-btn-bg-down:        #00569b;
@dark-bc-primary-btn-border:         #202020;

// Secondary Button
@dark-bc-secondary-btn-bg:           #5b9e00;
@dark-bc-secondary-btn-bg-down:      #437900;
@dark-bc-secondary-btn-border:       #202020;

// Sidebar
@dark-bc-sidebar-bg:                 #3C3F41;
@dark-bc-sidebar-selection:          #2D2E30;

// images
@dark-button-icon:                   "images/find-replace-sprites-dark.svg";
@dark-jstree-sprite:                 url("images/jsTreeSprites-dark.svg") !important;

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

/*
 * Brackets Colors
 *
 * These are general purpose colors that can be used in defining
 * themes or UI elements.

 * IMPORTANT: IF we want a UI element to be themeable, these variable names or
 * color literals (#aaa) should not be used in its definition.
 *
 * Instead, a new semantically-meaningful variables/mixins should be added
 * to the "brackets_theme_default.less" file, and then these variables/mixins
 * should be used in the definition of the UI element
 *
 * For UI elements we do NOT want to theme, we should use these color names
 *
 * All brackets color variable names (that refer to an actual color)
 * are prefixed with "bc-" for "brackets". This is to avoid confusion
 * with system and css color names. (We define our own colors because system
 * colors are ugly.)
 */

// General
@bc-bg-highlight:               #e0f0fa;
@bc-bg-inline-widget:           #e6e9e9;
@bc-bg-tool-bar:                #5D5F60;
@bc-bg-status-bar:              #fff;
@bc-disabled-opacity:           0.3;
@bc-error:                      #f74687;
@bc-modal-backdrop-opacity:     0.4;
@bc-spinner:                    #78b2f2;

// Highlights and Shadows
@bc-highlight:                  rgba(255, 255, 255, 0.12);
@bc-highlight-hard:             rgba(255, 255, 255, 0.5);
@bc-shadow:                     rgba(0, 0, 0, 0.24);
@bc-shadow-large:               rgba(0, 0, 0, 0.5);
@bc-shadow-small:               rgba(0, 0, 0, 0.06);

// Border Radius
@bc-border-radius:              3px;
@bc-border-radius-large:        5px;
@bc-border-radius-small:        2px;

// Menu
@bc-menu-bg:                    #fff;
@bc-menu-text:                  #000;
@bc-menu-separator:             #eaeaea;

// Warning
@bc-warning-bg:                 #fdf5cc;
@bc-warning-text:               #635301;

// Text
@bc-text:                       #333;
@bc-text-alt:                   #fff;
@bc-text-emphasized:            #111;
@bc-text-link:                  #0083e8;
@bc-text-medium:                #606060;
@bc-text-quiet:                 #aaa;
@bc-text-thin:                  #000;
@bc-text-thin-quiet:            #777;

// Panel
@bc-panel-bg:                   #dfe2e2;
@bc-panel-bg-alt:               #e6e9e9;
@bc-panel-bg-promoted:          #d4d7d7;
@bc-panel-bg-hover:             rgba(255, 255, 255, 0.6);
@bc-panel-bg-hover-alt:         rgba(0, 0, 0, 0.04);
@bc-panel-bg-selected:          #d0d5d5;
@bc-panel-bg-text-highlight:    #fff;
@bc-panel-border:               rgba(0, 0, 0, 0.09);
@bc-panel-separator:            #c3c6c5;

// Default Button
@bc-btn-bg:                     #e5e9e9;
@bc-btn-bg-down:                #d3d7d7;
@bc-btn-bg-down-alt:            #404141;
@bc-btn-border:                 #b2b5b5;
@bc-btn-border-error:           #fa689d;
@bc-btn-border-error-glow:      #ffb0cd;
@bc-btn-border-focused:         #2893ef;
@bc-btn-border-focused-glow:    #94ceff;
@bc-btn-triangle:               #9b9b9b;
@bc-input-bg:                   #fff;

// Primary Button
@bc-primary-btn-bg:             #288edf;
@bc-primary-btn-bg-down:        #0380e8;
@bc-primary-btn-border:         #1474bf;

// Secondary Button
@bc-secondary-btn-bg:           #91cc41;
@bc-secondary-btn-bg-down:      #82b839;
@bc-secondary-btn-border:       #74B120;

// Sidebar
@bc-sidebar-bg:                 #3C3F41;
@bc-sidebar-selection:          #2D2E30;

// images
@button-icon:                   "images/find-replace-sprites.svg";
@jstree-sprite:                 url("images/jsTreeSprites.svg") !important;

/* Dark Core UI variables -----------------------------------------------------------------------------*/

// General
@dark-bc-bg-highlight:               #2a3b50;
@dark-bc-bg-inline-widget:           #1b1b1b;
@dark-bc-bg-tool-bar:                #5D5F60;
@dark-bc-bg-status-bar:              #1c1c1e;
@dark-bc-disabled-opacity:           0.3;
@dark-bc-error:                      #f74687;
@dark-bc-modal-backdrop-opacity:     0.7;
@dark-bc-spinner:                    #2b85ea;

// Highlights and Shadows
@dark-bc-highlight:                  rgba(255, 255, 255, 0.06);
@dark-bc-highlight-hard:             rgba(255, 255, 255, 0.2);
@dark-bc-shadow:                     rgba(0, 0, 0, 0.24);
@dark-bc-shadow-medium:              rgba(0, 0, 0, 0.12);
@dark-bc-shadow-large:               rgba(0, 0, 0, 0.5);
@dark-bc-shadow-small:               rgba(0, 0, 0, 0.06);

// Border Radius
@dark-bc-border-radius:              3px;
@dark-bc-border-radius-large:        5px;
@dark-bc-border-radius-small:        2px;

// Menu
@dark-bc-menu-bg:                    #000;
@dark-bc-menu-text:                  #fff;
@dark-bc-menu-separator:             #343434;

// Warning
@dark-bc-warning-bg:                 #c95800;
@dark-bc-warning-text:               #fff;

// Text
@dark-bc-text:                       #ccc;
@dark-bc-text-alt:                   #fff;
@dark-bc-text-emphasized:            #fff;
@dark-bc-text-link:                  #6bbeff;
@dark-bc-text-medium:                #ccc;
@dark-bc-text-quiet:                 #9a9a9a;
@dark-bc-text-thin:                  #fff;
@dark-bc-text-thin-quiet:            #bbb;

// Panel
@dark-bc-panel-bg:                   #2c2c2c;
@dark-bc-panel-bg-alt:               #313131;
@dark-bc-panel-bg-promoted:          #222;
@dark-bc-panel-bg-hover:             rgba(255, 255, 255, 0.12);
@dark-bc-panel-bg-hover-alt:         rgba(0, 0, 0, 0.1);
@dark-bc-panel-bg-selected:          #3d3e40;
@dark-bc-panel-bg-text-highlight:    #000;
@dark-bc-panel-border:               #000;
@dark-bc-panel-separator:            #343434;

// Default Button
@dark-bc-btn-bg:                     #3f3f3f;
@dark-bc-btn-bg-down:                #383838;
@dark-bc-btn-bg-down-alt:            #404141;
@dark-bc-btn-border:                 #202020;
@dark-bc-btn-border-error:           #fa689d;
@dark-bc-btn-border-error-glow:      transparent;
@dark-bc-btn-border-focused:         #2893ef;
@dark-bc-btn-border-focused-glow:    transparent;
@dark-bc-btn-triangle:               #767676;
@dark-bc-input-bg:                   #555;

// Primary Button
@dark-bc-primary-btn-bg:             #016dc4;
@dark-bc-primary-btn-bg-down:        #00569b;
@dark-bc-primary-btn-border:         #202020;

// Secondary Button
@dark-bc-secondary-btn-bg:           #5b9e00;
@dark-bc-secondary-btn-bg-down:      #437900;
@dark-bc-secondary-btn-border:       #202020;

// Sidebar
@dark-bc-sidebar-bg:                 #3C3F41;
@dark-bc-sidebar-selection:          #2D2E30;

// images
@dark-button-icon:                   "images/find-replace-sprites-dark.svg";
@dark-jstree-sprite:                 url("images/jsTreeSprites-dark.svg") !important;


Add new style.less file

Add new style.less file

fatal: unable to access 'https://github.com/bioinformatics73/Bluemix-IoT-Visualizations.git/': The requested URL returned error: 403


Fixes flex property

Fixes flex property

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


Added style.less

Added style.less

/* Version One. http://miolabs.me */
/* Protected by Creative Commons ShareAlike License Version 1.0: http://creativecommons.org/licenses/sa/1.0 */
/* All associated designs (c) Lisa Mio, miolabs.me */

/* Global */

@font: 'Roboto', sans-serif;
@red: #c8616d;
@green: #429e94;

* {
  margin: 0;
  padding: 0;
}

body {
  background: @green;
  color: #fff;
  font-size: 16px; /* Base text size */
}

/* Desktop */

@media only screen and (min-width: 1024px) {
  /* No mobile */
  #mobile {
    display: none;
  }

  /* Pages */
  .keyable {
    width: 100%;
    background: #eaeaea;
    z-index: 1;
    p {
      color: #666;
      font: 400 1em/200% @font;
      padding: 0 0 .5em 0;
    }
    .center {
      text-align: center;
      padding-top: 1.5em;
      img {
        width: 48.5%;
        height: 48.5%;
        padding: .5em .35em 0 .35em;
      }
    }
    .last {
      text-align: center;
      padding: 1.5em 5em 2.5em 5em;
    }
  }

  h1 {
    width: 30%;
    position: relative;
    top: 50px;
    color: #666;
    font: 900 3em/100% @font;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 1px solid #bbb;
    margin: 1em auto;
    padding: 0 2em .5em 2em;
  }

  h2 {
    color: #666;
    font: 700 1.5em/150% @font;
    span {
      float: left;
      background: #bc4350;
      color: #fff;
      margin: .3em .5em 0 0;
      padding: .2em .5em;
    }
  }

  h3 {
    color: #bbb;
    font: 400 1.15em/100% @font;
    padding: 0 0 0 2.4em;
  }

  /* Buttons */
  a.button {
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    opacity: .6;
    margin: 0 .5em;
    padding: .5em 2em;
  }

  a.button:hover {
    opacity: 1;
    transition-duration: .5s;
  }

  a.clear {
    background: transparent;
    color: #999;
    border: 2px solid #999;
    opacity: 1;
  }
  a.clear:hover {
    color: @red;
    border-color: @red;
  }
  a.gray {
    cursor: help;
    background: #999;
  }
  a.gray:hover {
    opacity: .6;
  }
  a.green {
    background: @green;
  }
  a.red {
    background: @red;
  }

  /* Sections */
  #works {
    .project {
      position: relative;
      border-bottom: 1px solid #ccc;
      padding: 3em 5em;
      .function {
        width: 35em;
        position: absolute;
        top: 3.6em;
        right: 5em;
        text-align: right;
        list-style: none;
        li {
          display: inline-block;
          background: rgba(66, 169, 158, .4);
          font: 400 .7em/150% @font;
          border: 1px solid #fff;
          border-radius: 8px;
          margin-bottom: .2em;
          padding: .1em .5em;
        }
      }
      .detail {
        width: 95%;
        text-indent: 2em;
        margin: 1.5em auto 0 auto;
      }
    }
  }

  #profile {
    .center {
      padding: 1.5em 5em 0 5em;
      img {
        padding: 0;
      }
    }
  }

  #contact p {
    a {
      color: @red;
      font-weight: 700;
      text-decoration: none;
      opacity: .6;
    }
    a:hover {
      opacity: 1;
    }
    a.button, a.button:hover {
     color: #fff;
    }
  }

  /* Navigation */
  .main {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    background: #fff url('img/logo.png') no-repeat 5em .5em;
    background-size: 293.33px 30px;
    font: 700 1em/100% @font;
    z-index: 99;
    ul {
      list-style: none;
      float: right;
      margin-right: 1.5em;
    }
    li {
      display: inline-block;
      font-size: 0.85em;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 1.25em 1em 0 0;
      a {
        color: #222;
        text-decoration: none;
        padding: 1.15em 2.5em;
      }
      a:hover {
        color: @red;
        transition-duration: .5s;
      }
      a.on {
        background: #eaeaea;
        color: #666;
      }
    }
    span {
      background-color: #fff;
      color: #aaa;
      font-size: .85em;
      border: 1px solid #aaa;
      border-radius: 4px;
      padding: 0 1.5px 0 3px;
    }
  }

  .main.shadow {
    box-shadow: 0 0 .5em rgba(0, 0, 0, 0.25);
  }

  /* Tooltip */
  aside {
    width: 4em;
    position: fixed;
    top: 6em;
    right: 0;
    background: rgba(255, 255, 255, .2);
    font: 400 .8em/150% @font;
    border: 1px solid #fff;
    border-right: 0;
    border-radius: 3em 0 0 3em;
    padding: 1em 1em 1em 1.5em;
    z-index: 99;
    a.tooltip {
      color: #666;
      text-decoration: none;
      opacity: .4;
      span {
        display: none;
        width: 8em;
        margin: -4em 0 0 -13em;
        padding: 1em 1.25em;
        z-index: 99;
      }
    }
    a.tooltip:hover {
      cursor: help;
      text-decoration: none;
      opacity: .6;
      span {
        display: inline;
        position: absolute;
        background: rgba(255, 255, 255, .6);
        color: #666;
        border-radius: 1em;
      }
    }
    .box {
      display: inline;
      width: 1em;
      background: #fff;
      border: 1px solid #bbb;
      border-radius: 4px;
      padding: 0 .5em .1em .5em;
    }
    .none {
      margin: 0 .25em;
      padding: 0 .25em;
    }
  }

  /* Footer */
  #totop {
    position: fixed;
    bottom: .85em;
    right: .5em;
    font: 900 3em/100% @font;
    a {
      background: #ccc;
      color: #999;
      border: 1px solid #fff;
      border-radius: 1em;
      padding: 0 .5em .25em .5em;
      opacity: .3;
    }
    a:hover {
      color: #fff;
      opacity: .6;
    }
  }

  footer {
    color: #eaeaea;
    font: 400 .7em/100% @font;
    text-align: center;
    padding: 2em 0;
    z-index: 9;
    img {
      width: 30px;
      height: 30px;
      margin-bottom: 1em;
      padding: 0 .5em;
      opacity: .3;
    }
    img:hover {
      opacity: .6;
      transition-duration: .75s;
    }
    span {
      display: block;
      color: rgba(255, 255, 255, .5);
    }
  }
}

/* For Mobile */

@media only screen and (max-width: 1023px) {
  #mobile {
    color: rgba(255,255,255,.8);
    h4 {
      width: 100%;
      color: rgba(255,255,255,.5);
      font: 700 1.75em/150% @font;
      text-align: center;
      margin-top: 12%;
      padding: .5em 0;
    }
    p {
      width: 75%;
      font: 400 1em/200% @font;
      margin: 1em auto;
    }
  }
  section, nav, h1, p.center, aside, footer {
    display: none;
  }
}

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


Give fold markers a pointer on hover

Give fold markers a pointer on hover

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

.editor.react {
  .underlayer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
  }

  .lines {
    min-width: 100%;
  }

  .cursor {
    z-index: 4;
    pointer-events: none;
  }

  .editor-contents.is-focused .cursor {
    visibility: visible;
  }

  .cursors.blink-off .cursor {
    visibility: hidden;
  }

  .horizontal-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 3;

    .scrollbar-content {
      height: 15px;
    }
  }

  .vertical-scrollbar {
    overflow-x: hidden;
  }

  .scrollbar-corner {
    position: absolute;
    overflow: auto;
    bottom: 0;
    right: 0;
  }

  .scroll-view {
    overflow: hidden;
    z-index: 0;
  }

  .scroll-view-content {
    position: relative;
    width: 100%;
  }

  .gutter {
    .line-number {
      white-space: nowrap;
      padding-left: .5em;

      .icon-right {
        padding: 0 .4em;
        &:before {
          text-align: center;
        }
      }
    }
  }
}

.editor, .editor-contents {
  overflow: hidden;
  cursor: text;
  display: -webkit-flex;
  -webkit-user-select: none;
  position: relative;
  z-index: 0;
  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier;
  line-height: 1.3;
}

.editor .gutter .line-number.cursor-line {
  opacity: 1;
}

.editor .gutter {
  overflow: hidden;
  text-align: right;
  cursor: default;
  min-width: 1em;
  box-sizing: border-box;
}

.editor .gutter .line-number {
  padding-left: .5em;
  opacity: 0.6;
}

.editor .gutter .line-numbers {
  position: relative;
}

.editor .gutter .line-number.folded.cursor-line {
  opacity: 1;
}

.editor .gutter .line-number .icon-right {
  .octicon(chevron-down, 0.8em);
  display: inline-block;
  visibility: hidden;
  padding-left: .1em;
  padding-right: .5em;
  opacity: .6;
}

.editor .gutter:hover .line-number.foldable .icon-right {
  visibility: visible;

  &:before {
    content: @chevron-down;
  }

  &:hover {
    opacity: 1;
  }
}

.editor .gutter, .editor .gutter:hover {
  .line-number.folded .icon-right {
    .octicon(chevron-right, 0.8em);
    visibility: visible;

    &:before { // chevron-right renders too far right compared to chevron-down
      position: relative;
      left: -.1em;
      content: @chevron-right;
    }
  }
}

.editor .fold-marker {
  cursor: default;
}

.editor .fold-marker:after {
  .icon(0.8em, inline);
  content: @ellipsis;
  padding-left: 0.2em;
}

.editor .line.cursor-line .fold-marker:after {
  opacity: 1;
}

.editor.is-blurred .line.cursor-line {
  background: rgba(0, 0, 0, 0);
}

.editor .invisible-character {
  font-weight: normal !important;
  font-style: normal !important;
}

.editor .indent-guide {
  display: inline-block;
  box-shadow: inset 1px 0;
}

.editor .vertical-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 15px;
  overflow-y: auto;
  z-index: 3;
}

.editor .scroll-view {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-flex: 1;
  min-width: 0;
  position: relative;
}

.editor.soft-wrap .scroll-view {
  overflow-x: hidden;
}

.editor .underlayer {
  z-index: 0;
  position: absolute;
  min-height: 100%;
}

.editor .lines {
  position: relative;
  z-index: 1;
}

.editor .overlayer {
  z-index: 2;
  position: absolute;
}

.editor .line {
  white-space: pre;
}

.editor .line span {
  vertical-align: top;
}

.editor .cursor {
  position: absolute;
  border-left: 1px solid;
}

.editor .cursor,
.editor.is-focused .cursor.blink-off {
  visibility: hidden;
}

.editor.is-focused .cursor {
  visibility: visible;
}

.cursor.hidden-cursor {
  display: none;
}

.editor .hidden-input {
  padding: 0;
  border: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
}

.editor .highlight {
  background: none;
  padding: 0;
}

.editor .highlight .region,
.editor .selection .region {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.editor.mini {
  height: auto;
  line-height: 25px;

  .cursor {
    width: 2px;
    line-height: 20px;
    margin-top: 2px;
  }

  .gutter {
    display: none;
  }

  .scroll-view {
    overflow: hidden;
  }

  .placeholder-text {
    color: @text-color-subtle;
  }
}

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

.editor.react {
  .underlayer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
  }

  .lines {
    min-width: 100%;
  }

  .cursor {
    z-index: 4;
    pointer-events: none;
  }

  .editor-contents.is-focused .cursor {
    visibility: visible;
  }

  .cursors.blink-off .cursor {
    visibility: hidden;
  }

  .horizontal-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 3;

    .scrollbar-content {
      height: 15px;
    }
  }

  .vertical-scrollbar {
    overflow-x: hidden;
  }

  .scrollbar-corner {
    position: absolute;
    overflow: auto;
    bottom: 0;
    right: 0;
  }

  .scroll-view {
    overflow: hidden;
    z-index: 0;
  }

  .scroll-view-content {
    position: relative;
    width: 100%;
  }

  .gutter {
    .line-number {
      white-space: nowrap;
      padding-left: .5em;

      .icon-right {
        padding: 0 .4em;
        &:before {
          text-align: center;
        }
      }
    }
  }
}

.editor, .editor-contents {
  overflow: hidden;
  cursor: text;
  display: -webkit-flex;
  -webkit-user-select: none;
  position: relative;
  z-index: 0;
  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier;
  line-height: 1.3;
}

.editor .gutter .line-number.cursor-line {
  opacity: 1;
}

.editor .gutter {
  overflow: hidden;
  text-align: right;
  cursor: default;
  min-width: 1em;
  box-sizing: border-box;
}

.editor .gutter .line-number {
  padding-left: .5em;
  opacity: 0.6;
}

.editor .gutter .line-numbers {
  position: relative;
}

.editor .gutter .line-number.folded.cursor-line {
  opacity: 1;
}

.editor .gutter .line-number .icon-right {
  .octicon(chevron-down, 0.8em);
  display: inline-block;
  visibility: hidden;
  padding-left: .1em;
  padding-right: .5em;
  opacity: .6;
}

.editor .gutter:hover .line-number.foldable .icon-right {
  visibility: visible;

  &:before {
    content: @chevron-down;
  }

  &:hover {
    opacity: 1;
  }
}

.editor .gutter, .editor .gutter:hover {
  .line-number.folded .icon-right {
    .octicon(chevron-right, 0.8em);
    visibility: visible;

    &:before { // chevron-right renders too far right compared to chevron-down
      position: relative;
      left: -.1em;
      content: @chevron-right;
    }
  }
}

.editor .fold-marker:after {
  .icon(0.8em, inline);
  content: @ellipsis;
  padding-left: 0.2em;
}

.editor .line.cursor-line .fold-marker:after {
  opacity: 1;
}

.editor.is-blurred .line.cursor-line {
  background: rgba(0, 0, 0, 0);
}

.editor .invisible-character {
  font-weight: normal !important;
  font-style: normal !important;
}

.editor .indent-guide {
  display: inline-block;
  box-shadow: inset 1px 0;
}

.editor .vertical-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 15px;
  overflow-y: auto;
  z-index: 3;
}

.editor .scroll-view {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-flex: 1;
  min-width: 0;
  position: relative;
}

.editor.soft-wrap .scroll-view {
  overflow-x: hidden;
}

.editor .underlayer {
  z-index: 0;
  position: absolute;
  min-height: 100%;
}

.editor .lines {
  position: relative;
  z-index: 1;
}

.editor .overlayer {
  z-index: 2;
  position: absolute;
}

.editor .line {
  white-space: pre;
}

.editor .line span {
  vertical-align: top;
}

.editor .cursor {
  position: absolute;
  border-left: 1px solid;
}

.editor .cursor,
.editor.is-focused .cursor.blink-off {
  visibility: hidden;
}

.editor.is-focused .cursor {
  visibility: visible;
}

.cursor.hidden-cursor {
  display: none;
}

.editor .hidden-input {
  padding: 0;
  border: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
}

.editor .highlight {
  background: none;
  padding: 0;
}

.editor .highlight .region,
.editor .selection .region {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.editor.mini {
  height: auto;
  line-height: 25px;

  .cursor {
    width: 2px;
    line-height: 20px;
    margin-top: 2px;
  }

  .gutter {
    display: none;
  }

  .scroll-view {
    overflow: hidden;
  }

  .placeholder-text {
    color: @text-color-subtle;
  }
}


Add .focusable-panel class

Add .focusable-panel class

@import "ui-variables";

// Override bootstrap styles here.
.panel {
  border-radius: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;

  &.bordered {
    .panel-heading {
      border-radius: @component-border-radius @component-border-radius 0 0;
    }
  }
}

.inset-panel {
  .panel-heading {
    border-radius: @component-border-radius @component-border-radius 0 0;
  }
}

.focusable-panel {
  opacity: 0.8;
  &:focus {
    opacity: 1;
  }
}

.panel-heading {
  margin: 0;

  border-radius: 0;

  font-size: @font-size;
  line-height: 1;

  .btn {
    @btn-height: @component-line-height - 5px;
    height: @btn-height;
    line-height: @btn-height;
    font-size: @font-size - 2px;
    position: relative;
    top: -5px;
  }
}

@import "ui-variables";

// Override bootstrap styles here.
.panel {
  border-radius: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;

  &.bordered {
    .panel-heading {
      border-radius: @component-border-radius @component-border-radius 0 0;
    }
  }
}

.inset-panel {
  .panel-heading {
    border-radius: @component-border-radius @component-border-radius 0 0;
  }
}

.panel-heading {
  margin: 0;

  border-radius: 0;

  font-size: @font-size;
  line-height: 1;

  .btn {
    @btn-height: @component-line-height - 5px;
    height: @btn-height;
    line-height: @btn-height;
    font-size: @font-size - 2px;
    position: relative;
    top: -5px;
  }
}


Better menu transition effect

Better menu transition effect

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// global variables
@space: 70px;
@txt-width: 750px;
@link: #e34; // #2ed for invert color
@bg: #fff;
@txt: #000;

// invert color switcher for images and videos
// :root { -webkit-filter: invert(100%); }

@font-face {
  font-family: PFDTCP-M; // PFDinTextCompPro-Medium.ttf
  src: url('font.woff') format('woff');
}

.font-face {
  font-family: 'PFDTCP-M', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: 56px;
}

.helvetica {
  color: fade(@txt, 40%);
  font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', sans-serif;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .25em;
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

// basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: @txt;
  background: @bg;
  font-size: 28px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  max-width: 1080px;
  margin: 0 auto;
  padding: @space * 1.5 @space;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: @txt;
  .transition(~"color .5s ease, background .5s ease, opacity 1.5s ease");
}
  a:hover {
    color: @link;
    .transition(~"color .1s ease, background .1s ease, opacity .1s ease");
  }

ins {
  color: fade(@txt, 40%);
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@txt, 5%);
}

// core styles begin
body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: fade(@txt, 5%);
  border-bottom: 1px solid fade(@txt, 2%);
}

a[role=logo] {
  float: left;
  display: block;
  width: 33px;
  height: 38px;
  background: url(logo.svg) no-repeat 0 0;
  background-size: auto 38px; // 31px 36px
  text-indent: -9999em;
}

nav {
  .helvetica;
}

nav[role=navigation] {
  float: left;
  margin-left: 10px;
  ul {
    position: relative;
    li {
      position: absolute;
      list-style: none;
      &[role=current] {
        z-index: 9999;
      }
      &:not([role=current]) {
        opacity: 0;
        pointer-events: none;
      }
      a {
        padding: 3px .8em;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
      }
    }
    @base: 12px;
    @rate: 20px;
    &.offset-home {
      top: @base;
      li { top: 0px; }
    }
    &.offset-work {
      top: @base - @rate * 1;
      li { top: @rate * 1; }
    }
    &.offset-store {
      top: @base - @rate * 2;
      li { top: @rate * 2; }
    }
    &.offset-note {
      top: @base - @rate * 3;
      li { top: @rate * 3; }
    }
    &.offset-about {
      top: @base - @rate * 4;
      li { top: @rate * 4; }
    }
    &:hover {
      li {
        .transition(~"top .25s ease-out, opacity .3s ease-out .15s");
        opacity: 1;
        pointer-events: auto;
        &:nth-of-type(1) { top: 0; }
        &:nth-of-type(2) { top: 20px; }
        &:nth-of-type(3) { top: 40px; }
        &:nth-of-type(4) { top: 60px; }
        &:nth-of-type(5) { top: 80px; }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 245px;
    display: block;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: .2em;
    background: fade(@txt, 5%);
    z-index: 9999;
    -webkit-transition: padding .1s ease;
       -moz-transition: padding .1s ease;
    [role=tooltip] {
      position: absolute;
      top: 23px;
      white-space: nowrap;
      opacity: 0;
      padding: 7px 10px;
      color: #fff;
      background: fade(@link, 95%);
      pointer-events: none;
      -webkit-transition: opacity .1s ease, padding .1s ease;
         -moz-transition: opacity .1s ease, padding .1s ease;
    }
    &:hover {
      [role=tooltip] {
        opacity: 1;
      }
    }
    &[role=next] {
      left: 0;
      [role=tooltip] {
        left: 0;
      }
      &:hover {
        padding-left: 15px;
        [role=tooltip] {
          padding-left: 15px;
        }
      }
    }
    &[role=prev] {
      right: 0;
      [role=tooltip] {
        right: 0;
      }
      &:hover {
        padding-right: 15px;
        [role=tooltip] {
          padding-right: 15px;
        }
      }
    }
  }
}

hgroup {
  .font-face;
  padding-bottom: @space * 1.5 * 2/3;
  max-width: @txt-width;
  > * {
    font-weight: normal;
  }
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: @space * 1.5;
  img, video {
    display: block;
    margin: 20px 0;
    max-width: 100%;
  }
  p {
  }
  .txt {
    max-width: @txt-width;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@txt, 30%); // set larger value for invert color
    }
    p {
      margin: 1em 0;
      line-height: 1.6;
    }
    h3 {
      .helvetica;
      padding: @space * 1.5 0 0;
      &:first-child {
        margin-top: -@space;
      }
    }
    ul, ol {
      margin: 1em 0 1em 20px;
      list-style: square;
      li {
        line-height: 1.8;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: '\201c';
        font-size: 120px;
        line-height: 1;
        color: fade(@txt, 70%);
        font-family: 'Helvetica Neue', sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
    }
    sup {
      line-height: 1;
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
  }
  .note, .download {
    background-size: 40px 40px;
    padding-left: 50px;
  }
  .download {
    background: url(download.svg) no-repeat 0 0;
  }
  .note {
    background: url(note.svg) no-repeat 0 0;

  }
}

// workaround solution for post with chinese
[lang=zh] .txt {
  p, li {
    text-align: justify;
  }
}

// image list in "work"
@thumb-size: 96px;
@thumb-padding: 4px;

ul[role^=work-list] {
  padding-top: 12px;
  clear: both;
  margin-left: -@thumb-padding;
  margin-right: @thumb-padding;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: @thumb-padding;
    img {
      width: @thumb-size;
      height: @thumb-size;
      // override: article img
      margin: 0;
      background: @link;
    }
    a {
      position: absolute;
      top: -@thumb-padding;
      left: -@thumb-padding;
      padding: @thumb-padding;
      width: @thumb-size;
      height: @thumb-size;
      .font-face;
      -webkit-font-smoothing: antialiased;
      color: #fff;
      font-size: 18px;
      line-height: 1.2;
      opacity: 0;
      background: fade(@link, 90%);
    }
    &:hover a {
      opacity: 1;
    }
  }
}

// image navigation in post page
h3[role=work-list-title] {
  .helvetica;
  padding: @space * 1.5 0 20px;
  float: left;
}

// post list in "note"
div[role^=note-list] {
  // make sure the last post next to footer has the correct margin value.
  margin-top: -@space;
  section {
    h2 {
      .font-face;
      margin: -3px 0 -12px;
      max-width: @txt-width;
      font-weight: normal;
      time {
        color: fade(@txt, 30%);
      }
      // an infinite symbol next to the post date
      time + a {
        // need line-height: 0 to make vertical-align work
        line-height: 0;
        vertical-align: 3px;
      }
    }
    padding-top: @space * 1.5;
  }
}

aside {
  padding: @space 0 0;
  width: 200px;
  clear: both;
  // BuySellAds block
  .bsap {
    padding: 10px 0 @space;
    .bsa_it_i {
      display: block;
    }
    .bsa_it_t {
      display: block;
      margin: 1em 0;
    }
    .bsa_it_d {
      display: block;
      margin: 1em 0;
      line-height: 1.7;
    }
    .bsa_it_p {
      display: block;
      font-size: 12px;
      a {
        color: fade(@txt, 40%);
        &:hover {
          color: #000;
        }
      }
    }
  }
}

footer {
  padding: 15px 0;
  .helvetica;
  font-size: 11px;
}

@media (max-width: 640px) {
  article .txt {
    font-size: 80%;
  }
}

@media (max-device-width: 480px) {
  :root {
    -webkit-text-size-adjust: none;
  }
}

@media (max-device-width: 480px) and (orientation: portrait) {
  :root {
    padding: @space * 1.5 20px;
  }
  ul[role^=work-list] {
    li {
      float: none;
      margin-bottom: @thumb-padding * 2;
      img {
        width: 100%;
        // should be 100%, but Safari for iOS has stupid bug for it.
        height: auto;
      }
      a {
        width: 100%;
        height: 100%;
        font-size: 24px;
      }
    }
  }
}

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// global variables
@space: 70px;
@txt-width: 750px;
@link: #e34; // #2ed for invert color
@bg: #fff;
@txt: #000;

// invert color switcher for images and videos
// :root { -webkit-filter: invert(100%); }

@font-face {
  font-family: PFDTCP-M; // PFDinTextCompPro-Medium.ttf
  src: url('font.woff') format('woff');
}

.font-face {
  font-family: 'PFDTCP-M', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: 56px;
}

.helvetica {
  color: fade(@txt, 40%);
  font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', sans-serif;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .25em;
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

// basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: @txt;
  background: @bg;
  font-size: 28px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  max-width: 1080px;
  margin: 0 auto;
  padding: @space * 1.5 @space;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: @txt;
  .transition(~"color .5s ease, background .5s ease, opacity 1.5s ease");
}
  a:hover {
    color: @link;
    .transition(~"color .1s ease, background .1s ease, opacity .1s ease");
  }

ins {
  color: fade(@txt, 40%);
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@txt, 5%);
}

// core styles begin
body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: fade(@txt, 5%);
  border-bottom: 1px solid fade(@txt, 2%);
}

a[role=logo] {
  float: left;
  display: block;
  width: 33px;
  height: 38px;
  background: url(logo.svg) no-repeat 0 0;
  background-size: auto 38px; // 31px 36px
  text-indent: -9999em;
}

nav {
  .helvetica;
}

nav[role=navigation] {
  float: left;
  margin-left: 10px;
  ul {
    position: relative;
    li {
      position: absolute;
      list-style: none;
      &[role=current] {
        z-index: 9999;
      }
      &:not([role=current]) {
        opacity: 0;
      }
      a {
        padding: 3px .8em;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
      }
    }
    &:hover {
      li {
        .transition(~"top .15s ease-out, opacity .6s ease-out");
        opacity: 1;
        &:nth-of-type(1) { top: 0; }
        &:nth-of-type(2) { top: 20px; }
        &:nth-of-type(3) { top: 40px; }
        &:nth-of-type(4) { top: 60px; }
        &:nth-of-type(5) { top: 80px; }
      }
    }
    @base: 12px;
    @rate: 20px;
    &.offset-home {
      top: @base;
      li { top: 0px; }
    }
    &.offset-work {
      top: @base - @rate * 1;
      li { top: @rate * 1; }
    }
    &.offset-store {
      top: @base - @rate * 2;
      li { top: @rate * 2; }
    }
    &.offset-note {
      top: @base - @rate * 3;
      li { top: @rate * 3; }
    }
    &.offset-about {
      top: @base - @rate * 4;
      li { top: @rate * 4; }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 245px;
    display: block;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: .2em;
    background: fade(@txt, 5%);
    z-index: 9999;
    -webkit-transition: padding .1s ease;
       -moz-transition: padding .1s ease;
    [role=tooltip] {
      position: absolute;
      top: 23px;
      white-space: nowrap;
      opacity: 0;
      padding: 7px 10px;
      color: #fff;
      background: fade(@link, 95%);
      pointer-events: none;
      -webkit-transition: opacity .1s ease, padding .1s ease;
         -moz-transition: opacity .1s ease, padding .1s ease;
    }
    &:hover {
      [role=tooltip] {
        opacity: 1;
      }
    }
    &[role=next] {
      left: 0;
      [role=tooltip] {
        left: 0;
      }
      &:hover {
        padding-left: 15px;
        [role=tooltip] {
          padding-left: 15px;
        }
      }
    }
    &[role=prev] {
      right: 0;
      [role=tooltip] {
        right: 0;
      }
      &:hover {
        padding-right: 15px;
        [role=tooltip] {
          padding-right: 15px;
        }
      }
    }
  }
}

hgroup {
  .font-face;
  padding-bottom: @space * 1.5 * 2/3;
  max-width: @txt-width;
  > * {
    font-weight: normal;
  }
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: @space * 1.5;
  img, video {
    display: block;
    margin: 20px 0;
    max-width: 100%;
  }
  p {
  }
  .txt {
    max-width: @txt-width;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@txt, 30%); // set larger value for invert color
    }
    p {
      margin: 1em 0;
      line-height: 1.6;
    }
    h3 {
      .helvetica;
      padding: @space * 1.5 0 0;
      &:first-child {
        margin-top: -@space;
      }
    }
    ul, ol {
      margin: 1em 0 1em 20px;
      list-style: square;
      li {
        line-height: 1.8;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: '\201c';
        font-size: 120px;
        line-height: 1;
        color: fade(@txt, 70%);
        font-family: 'Helvetica Neue', sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
    }
    sup {
      line-height: 1;
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
  }
  .note, .download {
    background-size: 40px 40px;
    padding-left: 50px;
  }
  .download {
    background: url(download.svg) no-repeat 0 0;
  }
  .note {
    background: url(note.svg) no-repeat 0 0;

  }
}

// workaround solution for post with chinese
[lang=zh] .txt {
  p, li {
    text-align: justify;
  }
}

// image list in "work"
@thumb-size: 96px;
@thumb-padding: 4px;

ul[role^=work-list] {
  padding-top: 12px;
  clear: both;
  margin-left: -@thumb-padding;
  margin-right: @thumb-padding;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: @thumb-padding;
    img {
      width: @thumb-size;
      height: @thumb-size;
      // override: article img
      margin: 0;
      background: @link;
    }
    a {
      position: absolute;
      top: -@thumb-padding;
      left: -@thumb-padding;
      padding: @thumb-padding;
      width: @thumb-size;
      height: @thumb-size;
      .font-face;
      -webkit-font-smoothing: antialiased;
      color: #fff;
      font-size: 18px;
      line-height: 1.2;
      opacity: 0;
      background: fade(@link, 90%);
    }
    &:hover a {
      opacity: 1;
    }
  }
}

// image navigation in post page
h3[role=work-list-title] {
  .helvetica;
  padding: @space * 1.5 0 20px;
  float: left;
}

// post list in "note"
div[role^=note-list] {
  // make sure the last post next to footer has the correct margin value.
  margin-top: -@space;
  section {
    h2 {
      .font-face;
      margin: -3px 0 -12px;
      max-width: @txt-width;
      font-weight: normal;
      time {
        color: fade(@txt, 30%);
      }
      // an infinite symbol next to the post date
      time + a {
        // need line-height: 0 to make vertical-align work
        line-height: 0;
        vertical-align: 3px;
      }
    }
    padding-top: @space * 1.5;
  }
}

aside {
  padding: @space 0 0;
  width: 200px;
  clear: both;
  // BuySellAds block
  .bsap {
    padding: 10px 0 @space;
    .bsa_it_i {
      display: block;
    }
    .bsa_it_t {
      display: block;
      margin: 1em 0;
    }
    .bsa_it_d {
      display: block;
      margin: 1em 0;
      line-height: 1.7;
    }
    .bsa_it_p {
      display: block;
      font-size: 12px;
      a {
        color: fade(@txt, 40%);
        &:hover {
          color: #000;
        }
      }
    }
  }
}

footer {
  padding: 15px 0;
  .helvetica;
  font-size: 11px;
}

@media (max-width: 640px) {
  article .txt {
    font-size: 80%;
  }
}

@media (max-device-width: 480px) {
  :root {
    -webkit-text-size-adjust: none;
  }
}

@media (max-device-width: 480px) and (orientation: portrait) {
  :root {
    padding: @space * 1.5 20px;
  }
  ul[role^=work-list] {
    li {
      float: none;
      margin-bottom: @thumb-padding * 2;
      img {
        width: 100%;
        // should be 100%, but Safari for iOS has stupid bug for it.
        height: auto;
      }
      a {
        width: 100%;
        height: 100%;
        font-size: 24px;
      }
    }
  }
}


Better styles order

Better styles order

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// variables
@font-face {
  font-family: 'sparanoid.com';
  src: url('font.woff') format('woff'),
       url('font.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.font-face {
  font-family: 'sparanoid.com', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  text-transform: uppercase;
}

.helvetica {
  .gray;
  font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  font-size: 12px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: .25em;
}

.gray { color: rgba(0, 0, 0, .4); }

// basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: #000;
  background: #fff;
  font-size: 14px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  font-weight: 100;
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 40px;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: #000;
  -webkit-transition: color .5s ease, background .5s ease, opacity 1.5s ease;
     -moz-transition: color .5s ease, background .5s ease, opacity 1.5s ease;
}
  .a a, a:hover {
    color: #e34;
    -webkit-transition: color .1s ease, background .1s ease, opacity .1s ease;
       -moz-transition: color .1s ease, background .1s ease, opacity .1s ease;
  }

ins {
  .gray;
}

del {
  text-decoration: line-through;
}

::selection {
  background: rgba(0, 0, 0, .05);
}

// core styles begin
body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: rgba(0, 0, 0, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .02);
}
body:after {
  bottom: 0;
  height: 70px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

header {
  a {
    display: block;
    height: 38px;
    width: 38px;
    margin: 0 auto;
    background: url(logo.svg) no-repeat 0 0;
    background-size: 38px 38px;
    text-indent: -9999em;
  }
}

nav {
  .helvetica;
  font-size: 11px;
  &[role=navigation] {
    padding: 10px 0 15px;
    ul {
      text-align: center;
      li {
        display: inline;
        margin: 0 .8em;
      }
    }
  }
  &[role=pagination] {
    a {
      position: absolute;
      top: 170px;
      display: block;
      padding: 10px;
      font-size: 9px;
      letter-spacing: .2em;
      background: rgba(0, 0, 0, .05);
      z-index: 9999;
      &[role=next] {
        left: 0;
      }
      &[role=previous] {
        right: 0;
      }
    }
  }
}

hgroup {
  .font-face;
  font-size: 24px;
  text-align: center;
  padding-top: 40px;
  max-width: 620px;
  margin: auto;
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: 40px;
  a {
    border-bottom: 1px dotted rgba(0, 0, 0, .2);
  }
  img, video {
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
  p {
  }
  .txt {
    max-width: 620px;
    font-size: 18px;
    margin: 0 auto;
    text-align: justify;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    p {
      margin: 1em 0;
      line-height: 2;
    }
    h3 {
      .helvetica;
      padding: 60px 0 0;
      text-align: center;
      &:first-child {
        margin-top: -40px;
      }
    }
    ul, ol {
      margin: 1em 0 1em 20px;
      list-style: square;
      li {
        line-height: 1.8;
      }
    }
    sup {
      line-height: 1;
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, Consolas, monospace;
      color: #68a;
    }
  }
  div[role*=announcement] {
    text-align: center;
  }
  .note, .download {
    .helvetica;
    color: #000;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
    padding: 20px;
    border-left: 3px solid rgba(238, 51, 68, .2);
    background: rgba(238, 51, 68, .1);
  }
}

// image list in "work"
@thumb-size: 64px;
@thumb-padding: 8px;

ul[role*=list] {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
  padding-top: 12px;
  clear: both;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: 8px;
    img {
      width: @thumb-size;
      height: @thumb-size;
      max-width: @thumb-size;
      margin: 0;
    }
    a {
      position: absolute;
      top: -@thumb-padding;
      left: -@thumb-padding;
      padding: @thumb-padding;
      width: @thumb-size;
      height: @thumb-size;
      .font-face;
      color: #fff;
      font-size: 10px;
      line-height: 1.2;
      opacity: 0;
      border-bottom: none;
      background: rgba(0, 0, 0, .8);
    }
    &:hover a {
      opacity: 1;
    }
  }
}

// image navigation in post page
ul[role$=small] {
  max-width: 640px;
  margin: 100px auto;
  padding: 60px 0 20px;
  li {
    img {
    }
    a {
      &:hover {
      }
    }
    &:hover a {
    }
  }
}

// post list in "note"
dl {
  text-align: center;
  margin-top: -40px;
  dt {
    line-height: 1;
    padding: 60px 0 0;
    .helvetica;
    a {
      border-bottom: none;
    }
  }
  dd {
    margin-bottom: 40px;
  }
}

aside {
  padding: 40px 0 0;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  clear: both;
  .bsap {
    padding: 10px 0 40px;
    .bsa_it_i {
      display: block;
    }
    .bsa_it_t {
      display: block;
      margin: 1em 0;
    }
    .bsa_it_d {
      display: block;
      margin: 1em 0;
      line-height: 1.7;
    }
    .bsa_it_p {
      display: block;
      font-size: 12px;
      a {
        .gray;
        &:hover {
          color: #000;
        }
      }
    }
  }
}

footer {
  padding: 15px 0;
  .helvetica;
  font-size: 11px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  article .txt {
    font-size: 16px;
  }
}

@media screen and (max-device-width: 480px) {
  :root {
    padding: 60px 20px;
    -webkit-text-size-adjust: none;
  }
  article .txt {
    font-size: 14px;
  }
}

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: #000;
  background: #fff;
  font-size: 14px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  font-weight: 100;
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 40px;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

::selection {
  background: rgba(0, 0, 0, .05);
}

@font-face {
  font-family: 'sparanoid.com';
  src: url('font.woff') format('woff'),
       url('font.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

a {
  color: #000;
  -webkit-transition: color .5s ease, background .5s ease, opacity 1.5s ease;
     -moz-transition: color .5s ease, background .5s ease, opacity 1.5s ease;
}
  .a a, a:hover {
    color: #e34;
    -webkit-transition: color .1s ease, background .1s ease, opacity .1s ease;
       -moz-transition: color .1s ease, background .1s ease, opacity .1s ease;
  }

ins {
  .gray;
}

del {
  text-decoration: line-through;
}

.gray { color: rgba(0, 0, 0, .4); }

.font-face {
  font-family: 'sparanoid.com', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  text-transform: uppercase;
}

.helvetica {
  .gray;
  font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  font-size: 12px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: .25em;
}

body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: rgba(0, 0, 0, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .02);
}
body:after {
  bottom: 0;
  height: 70px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

header {
  a {
    display: block;
    height: 38px;
    width: 38px;
    margin: 0 auto;
    background: url(logo.svg) no-repeat 0 0;
    background-size: 38px 38px;
    text-indent: -9999em;
  }
}

nav {
  .helvetica;
  font-size: 11px;
  &[role=navigation] {
    padding: 10px 0 15px;
    ul {
      text-align: center;
      li {
        display: inline;
        margin: 0 .8em;
      }
    }
  }
  &[role=pagination] {
    a {
      position: absolute;
      top: 170px;
      display: block;
      padding: 10px;
      font-size: 9px;
      letter-spacing: .2em;
      background: rgba(0, 0, 0, .05);
      z-index: 9999;
      &[role=next] {
        left: 0;
      }
      &[role=previous] {
        right: 0;
      }
    }
  }
}

hgroup {
  .font-face;
  font-size: 24px;
  text-align: center;
  padding-top: 40px;
  max-width: 620px;
  margin: auto;
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: 40px;
  a {
    border-bottom: 1px dotted rgba(0, 0, 0, .2);
  }
  img, video {
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
  p {
  }
  .txt {
    max-width: 620px;
    font-size: 18px;
    margin: 0 auto;
    text-align: justify;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    p {
      margin: 1em 0;
      line-height: 2;
    }
    h3 {
      .helvetica;
      padding: 60px 0 0;
      text-align: center;
      &:first-child {
        margin-top: -40px;
      }
    }
    ul, ol {
      margin: 1em 0 1em 20px;
      list-style: square;
      li {
        line-height: 1.8;
      }
    }
    sup {
      line-height: 1;
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, Consolas, monospace;
      color: #68a;
    }
  }
  div[role*=announcement] {
    text-align: center;
  }
  .note, .download {
    .helvetica;
    color: #000;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
    padding: 20px;
    border-left: 3px solid rgba(238, 51, 68, .2);
    background: rgba(238, 51, 68, .1);
  }
}

// image list in "work"
@thumb-size: 64px;
@thumb-padding: 8px;

ul[role*=list] {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
  padding-top: 12px;
  clear: both;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: 8px;
    img {
      width: @thumb-size;
      height: @thumb-size;
      max-width: @thumb-size;
      margin: 0;
    }
    a {
      position: absolute;
      top: -@thumb-padding;
      left: -@thumb-padding;
      padding: @thumb-padding;
      width: @thumb-size;
      height: @thumb-size;
      .font-face;
      color: #fff;
      font-size: 10px;
      line-height: 1.2;
      opacity: 0;
      border-bottom: none;
      background: rgba(0, 0, 0, .8);
    }
    &:hover a {
      opacity: 1;
    }
  }
}

// image navigation in post page
ul[role$=small] {
  max-width: 640px;
  margin: 100px auto;
  padding: 60px 0 20px;
  li {
    img {
    }
    a {
      &:hover {
      }
    }
    &:hover a {
    }
  }
}

// post list in "note"
dl {
  text-align: center;
  margin-top: -40px;
  dt {
    line-height: 1;
    padding: 60px 0 0;
    .helvetica;
    a {
      border-bottom: none;
    }
  }
  dd {
    margin-bottom: 40px;
  }
}

aside {
  padding: 40px 0 0;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  clear: both;
  .bsap {
    padding: 10px 0 40px;
    .bsa_it_i {
      display: block;
    }
    .bsa_it_t {
      display: block;
      margin: 1em 0;
    }
    .bsa_it_d {
      display: block;
      margin: 1em 0;
      line-height: 1.7;
    }
    .bsa_it_p {
      display: block;
      font-size: 12px;
      a {
        .gray;
        &:hover {
          color: #000;
        }
      }
    }
  }
}

footer {
  padding: 15px 0;
  .helvetica;
  font-size: 11px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  article .txt {
    font-size: 16px;
  }
}

@media screen and (max-device-width: 480px) {
  :root {
    padding: 60px 20px;
    -webkit-text-size-adjust: none;
  }
  article .txt {
    font-size: 14px;
  }
}


Remove unneeded units

Remove unneeded units

@import "ui-variables";

section {
  position: relative;
  margin-top: 0;
  &:last-child { margin-bottom: 0; }

  &.bordered {
    margin: 0;
    padding: @component-padding 0;
    border-top: 1px solid @background-color-highlight;
    border-bottom: 1px solid @tool-panel-border-color;

    &:first-child {
      border-top: none;
      padding-top: 0;
    }
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .section-heading:first-child {
    margin-top: 0;
  }
}

@import "ui-variables";

section {
  position: relative;
  margin-top: 0;
  &:last-child { margin-bottom: 0; }

  &.bordered {
    margin: 0;
    padding: @component-padding 0;
    border-top: 1px solid @background-color-highlight;
    border-bottom: 1px solid @tool-panel-border-color;

    &:first-child {
      border-top: none;
      padding-top: 0;
    }
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .section-heading:first-child {
    margin-top: 0px;
  }
}


Missing line break

Missing line break


Added scroll bar to dropdown

Added scroll bar to dropdown

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


add a placeholder responsive-navbar.less

error: pathspec 'less/responsive-navbar.less' did not match any file(s) known to git


remove block of css no longer needed

remove block of css no longer needed

#subapp-browser {
  color: @bws-text;
  font-size: 9pt;

  a {
    color: @charm-panel-orange;
  }
  a:hover {
    text-decoration: none;
  }
  dt {
    color: @bws-heading;
    font-family: @font-family-medium;
    font-weight: normal;
  }
  strong {
    font-family: @font-family-medium;
    font-weight: normal;
  }
  pre {
    font-family: @font-family-mono;
    font-size: 10pt;
  }
  .badge-approved {
    display: block;
    position: absolute;
    background-position: left top;
    bacground-repeat: no-repeat;
  }
  .reset {
    margin: auto;
    text-align: left;
    width: 90%;
  }
  .section-title a {
    color: @bws-heading;
  }
  .charm-token {
    color: @bws-text;
  }
  .bws-header {
      padding: 20px;
      border-bottom: 1px solid @bws-border;
  }
  #bws-search {
    .search-title {
      padding: 16px 20px;
      background-color: transparent;
      border-bottom: 1px solid #ccc;
      font-size: 20pt;
      font-weight: normal;
    }
    .filters {
      .border-box;
      padding: 0 20px;
      background-color: #ddd;

      .filterControl {
        display: block;
        padding: 5px 0;
        color: @bws-heading;
        font-size: 14pt;
      }
      .search-filters {
        padding: 20px 0;
        border-top: 1px dotted #bbb;

        h4 {
          font-size: 10.5pt;
        }
        li {
          margin-bottom: 4px;
        }
        input {
          margin-right: 10px;
        }
      }
    }
    .search-results {
      .border-box;
      padding: 10px 20px;
    }
  }
  #bws-search,
  #bws-editorial {
    .yui3-charmtoken {
      width: 33.33333%;
      min-width: 320px;
    }
  }
  #bws-sidebar .bws-content,
  .bws-view-data,
  #bws-sidebar,
  #bws-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .bws-view-data,
  #bws-sidebar,
  #bws-fullscreen {
    background-color: @bws-background;
    z-index: 1;
  }
  .bws-view-data,
  #bws-sidebar {
    bottom: @canvas-footer-nav-height;
  }
  .bws-view-data,
  #bws-sidebar .bws-content {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #bws-fullscreen {
    .bws-view-data {
      top: @bws-header-height;
      bottom: 0;
      left: 0;
      right: 0;
      box-shadow: none;
    }
    .toggle-fullscreen {
      background-position: 0 -180px;

        &:hover {
          background-position: 0 -240px;
        }
        &:active {
          background-position: 0 -300px;
        }
    }
    #bws-search {
      .filters,
      .search-filters {
        border: none;
      }
    }
  }
  #bws-sidebar {
    z-index: 2;
    right: auto;
    width: @bws-sidebar-width;
    min-width: @bws-sidebar-min-width;
    border-right: 1px solid #a6a6a6;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);

    .bws-searchbox {
        width: 100%;
    }
    .bws-content {
      top: @bws-sidebar-header-height;
      border-top: 8px solid #d8d7d3;

      .section-title {
        padding-left: 20px;
        padding-right: 20px;
      }
      .yui3-charmtoken {
        width: 100%;
        border-top: 1px solid @bws-groove-light;
        border-bottom: 1px solid @bws-groove-dark;

        .description {
            display: none;
        }
      }
    }
  }
  .bws-view-data {
    left: @bws-sidebar-width;
    right: 25%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }
}
@media screen and (max-width: 1400px) {
  #subapp-browser .bws-view-data {
    left: @bws-sidebar-min-width;
    min-width: 700px;
  }
}

#subapp-browser {
  color: @bws-text;
  font-size: 9pt;

  a {
    color: @charm-panel-orange;
  }
  a:hover {
    text-decoration: none;
  }
  dt {
    color: @bws-heading;
    font-family: @font-family-medium;
    font-weight: normal;
  }
  strong {
    font-family: @font-family-medium;
    font-weight: normal;
  }
  pre {
    font-family: @font-family-mono;
    font-size: 10pt;
  }
  .badge-approved {
    display: block;
    position: absolute;
    background-position: left top;
    bacground-repeat: no-repeat;
  }
  .reset {
    margin: auto;
    text-align: left;
    width: 90%;
  }
  .section-title a {
    color: @bws-heading;
  }
  .charm-token {
    color: @bws-text;
  }
  .bws-header {
      padding: 20px;
      border-bottom: 1px solid @bws-border;

    //XXX: this can be removed once the control has been moved to the header.
    .toggle-fullscreen {
        position: absolute;
        display: block;
        right: -40px;
        top: 20px;
        width: 40px;
        height: 40px;
        background: @bws-dark url(/juju-ui/assets/images/browser_min_max.png)
        no-repeat 0 0;
        box-shadow: 3px 0 2px rgba(0, 0, 0, 0.1);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
  }
  #bws-search {
    .search-title {
      padding: 16px 20px;
      background-color: transparent;
      border-bottom: 1px solid #ccc;
      font-size: 20pt;
      font-weight: normal;
    }
    .filters {
      .border-box;
      padding: 0 20px;
      background-color: #ddd;

      .filterControl {
        display: block;
        padding: 5px 0;
        color: @bws-heading;
        font-size: 14pt;
      }
      .search-filters {
        padding: 20px 0;
        border-top: 1px dotted #bbb;

        h4 {
          font-size: 10.5pt;
        }
        li {
          margin-bottom: 4px;
        }
        input {
          margin-right: 10px;
        }
      }
    }
    .search-results {
      .border-box;
      padding: 10px 20px;
    }
  }
  #bws-search,
  #bws-editorial {
    .yui3-charmtoken {
      width: 33.33333%;
      min-width: 320px;
    }
  }
  #bws-sidebar .bws-content,
  .bws-view-data,
  #bws-sidebar,
  #bws-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .bws-view-data,
  #bws-sidebar,
  #bws-fullscreen {
    background-color: @bws-background;
    z-index: 1;
  }
  .bws-view-data,
  #bws-sidebar {
    bottom: @canvas-footer-nav-height;
  }
  .bws-view-data,
  #bws-sidebar .bws-content {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #bws-fullscreen {
    .bws-view-data {
      top: @bws-header-height;
      bottom: 0;
      left: 0;
      right: 0;
      box-shadow: none;
    }
    .toggle-fullscreen {
      background-position: 0 -180px;

        &:hover {
          background-position: 0 -240px;
        }
        &:active {
          background-position: 0 -300px;
        }
    }
    #bws-search {
      .filters,
      .search-filters {
        border: none;
      }
    }
  }
  #bws-sidebar {
    z-index: 2;
    right: auto;
    width: @bws-sidebar-width;
    min-width: @bws-sidebar-min-width;
    border-right: 1px solid #a6a6a6;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);

    .bws-searchbox {
        width: 100%;
    }
    .bws-content {
      top: @bws-sidebar-header-height;
      border-top: 8px solid #d8d7d3;

      .section-title {
        padding-left: 20px;
        padding-right: 20px;
      }
      .yui3-charmtoken {
        width: 100%;
        border-top: 1px solid @bws-groove-light;
        border-bottom: 1px solid @bws-groove-dark;

        .description {
            display: none;
        }
      }
    }
  }
  .bws-view-data {
    left: @bws-sidebar-width;
    right: 25%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }
}
@media screen and (max-width: 1400px) {
  #subapp-browser .bws-view-data {
    left: @bws-sidebar-min-width;
    min-width: 700px;
  }
}


[FEATURE] sap.m.Carousel: CSS styles for HCB added

Change-Id: Icd7c00ced4bdd20e9ae4116107477992bceb3db3
Signed-off-by: Evgeni Katsarski <7bdaeff4874e740c901b72d042a9e6f228c70fc1@sap.com>

/* ============================================= */
/* CSS for control sap.m/Carousel.control        */
/* HCB theme                             */
/* ============================================= */

/*
  Carousel control base styling
*/
.sapMCrslControls {
	padding-top: 0.625rem;
	text-align: center;
}

.sapMCrslControls a {
	padding: 0.3125rem;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: -moz-none;
	user-drag: none;
}

.sapMCrslBulleted.sapMCrslBottomOffset {
	position: absolute;
	padding-top: 0;
	bottom: 0.3125rem;
	width: 100%;
	z-index: 10;
}

.sapMCrslBulleted:not(.sapMCrslBottomOffset){
	padding-bottom: 0.1875rem;
	padding-top: 0.125rem;
}

/* Carousel controls: Bulleted */
.sapMCrslBulleted > span {
	line-height: 0;
	text-decoration: none;
	overflow: hidden;
	display: inline-block;
	padding: 0.25rem;
	width: 0;
	height: 0;
	margin: 0 0.25rem;
	color: @sapHCStandardBG;
	background-color: @sapHCStandardBG;
	-webkit-transition: background-color 0.1s ease-in;
	-moz-transition: background-color 0.1s ease-in;
	transition: background-color 0.1s ease-in;
	-webkit-box-shadow: 0 0 0 0.0625rem @sapHCStandardFG;
	-moz-box-shadow: 0 0 0 0.0625rem @sapHCStandardFG;
	box-shadow: 0 0 0 0.0625rem @sapHCStandardFG;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.sapMCrslBulleted > span:hover,.sapMCrslBulleted > span:focus {
	cursor: default;
	outline: none;
}

.sapMCrslBulleted > span.sapMCrslActive {
	color: @sapHCHighlightAltBG;
	background-color: @sapHCHighlightAltBG;
}

/* Carousel controls: HUD */
.sapMCrslHud {
	padding-top: 0;
}

.sapMCrslHud a {
	z-index: 2;
	opacity: 1;
	position: absolute;
	top: calc(50% - 3.875rem);
	width: 3rem;
	height: 3rem;
	margin: -1.5625px 0 0 0;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
	background-color: @sapHCStandardFG;
	/*-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;*/
	color: @sapHCStandardBG;
	-webkit-transition: opacity 0.1s ease-in;
	-moz-transition: opacity 0.1s ease-in;
	transition: opacity 0.1s ease-in;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	box-shadow: none;
}

.sap-desktop {
	.sapMCrsl{
		box-sizing: border-box;
		border: 0.125rem solid transparent;
	}
	.sapMCrsl:focus {
		outline: none;
		border: 0.125rem dotted @sapHCStandardFG;
	}
}

.sapMCrsl:hover .sapMCrslHud a {
	opacity: 1;
}

.sapMCrsl .sapMCrslHud a:hover,
.sapMCrsl .sapMCrslHud a:focus {
	opacity: 1;
}

.sapMCrsl .sapMCrslHud.sapMCrslLeftmost a.sapMCrslPrev,
.sapMCrsl .sapMCrslHud.sapMCrslRightmost a.sapMCrslNext {
	opacity: 0;
}

.sapMCrslHud .sapMCrslHudInner {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin:0.25rem;
	background-color: @sapHCStandardBG;
	color: @sapHCStandardFG;
	font-family: "SAP-icons";
	font-size: 1.375rem;
	font-weight: bold;
	text-indent: 0;
	text-align: center;
	display: table;
	z-index: 9;
	width: 2.5rem;
	height: 2.5rem;
}

.sapMCrslHud .sapMCrslPrev {
	left: 0.625rem;
}

.sapMCrslHud .sapMCrslNext {
	right: 0.625rem;
}

html[dir='rtl'] .sapMCrslPrev > .sapMCrslHudInner > .sapUiIcon,
.sapMCrslNext > .sapMCrslHudInner > .sapUiIcon {
	display: table-cell;
	vertical-align: middle;
	left: auto;
	right: 0;
	text-indent: 0.0625rem;
}

html[dir='rtl'] .sapMCrslNext > .sapMCrslHudInner > .sapUiIcon,
.sapMCrslPrev > .sapMCrslHudInner > .sapUiIcon {
	display: table-cell;
	vertical-align: middle;
	right: auto;
	left: 0;
	text-indent: -0.0625rem;
}

/* extra bits */

/* captions */
.sapMCrslCaption {
	margin: 0;
	padding: 0.625rem;
	height: auto;
	text-align: center;
}

/* Default Themes/Sytles for Slider */
.sapMCrslFluid .sapMCrslItem {
	margin-right: 1.25rem;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sapMCrslItem.sapMCrslBottomOffset {
	padding-bottom: 1.6875rem;
}

/* HCB Custom Styles */

.sapMCrslHud .sapMCrslHudInner:hover {
	background: @sapHCHighlightBG;
}

.sapMCrslHud a:focus {
	outline: 0.125rem dotted @sapHCStandardFG;
}

html[data-sap-ui-browser^=ie] .sapMCrslBulleted > span {
	box-shadow: 0 0 0 0.0625rem @sapHCStandardFG, 0 0.07rem 0 @sapHCStandardFG;
}

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


oh no missing file

oh no missing file

#activity-info {
    .simple-log {
        list-style-type: none;
        padding: 15px 0 0 0;
        margin: 0;
        border-top: 1px solid @gray;
        li {
            clear: both;
            border-radius: 5px;
            line-height: 25px;
            min-height: 25px;
            padding: 5px 8px;
            &:nth-child(2n) {
                background-color: @faint-gray;
            }
            p {
                margin: 0;
            }
            .action {
                float: left;
            }
            .timestamp {
                float: right;
            }
        }
    }
}

error: pathspec 'media/css/mkt/activity.less' did not match any file(s) known to git


updated panel teaser selector

updated panel teaser selector

// Name:            Panel
// Description:     Defines styles for reusable content areas
//
// Component:       `uk-panel`
//
// Sub-objects:     `uk-panel-title`
//                  `uk-panel-badge`
//                  `uk-panel-teaser`
//
// Modifiers:       `uk-panel-box`
//                  `uk-panel-box-hover`
//                  `uk-panel-box-primary`
//                  `uk-panel-box-primary-hover`
//                  `uk-panel-box-secondary`
//                  `uk-panel-box-secondary-hover`
//                  `uk-panel-hover`
//                  `uk-panel-header`
//                  `uk-panel-space`
//                  `uk-panel-divider`
//
// Uses:            Nav: `uk-nav-side`
//
// Used by:         Dropdown
//                  Off-canvas
//                  Grid
//
// Markup:
//
//
//

//

//

//

//

//
// ========================================================================

// Variables
// ========================================================================

@panel-title-margin-bottom:                     15px;
@panel-title-font-size:                         18px;
@panel-title-line-height:                       24px;
@panel-title-font-weight:                       normal;
@panel-title-color:                             #444;
@panel-title-text-transform:                    none;

@panel-teaser-margin-bottom:                    @panel-title-margin-bottom;

@panel-box-padding:                             15px;
@panel-box-background:                          #f5f5f5;
@panel-box-color:                               #444;
@panel-box-hover-color:                         @panel-box-color;
@panel-box-title-color:                         #444;
@panel-box-badge-top:                           10px;
@panel-box-badge-right:                         @panel-box-badge-top;
@panel-box-teaser-margin:                       -@panel-box-padding;

@panel-box-primary-background:                  #ebf7fd;
@panel-box-primary-color:                       #2d7091;
@panel-box-primary-hover-color:                 @panel-box-primary-color;
@panel-box-primary-title-color:                 #2d7091;

@panel-box-secondary-background:                #eee;
@panel-box-secondary-color:                     #444;
@panel-box-secondary-hover-color:               @panel-box-secondary-color;
@panel-box-secondary-title-color:               #444;

@panel-hover-padding:                           15px;
@panel-hover-color:                             #444;
@panel-hover-hover-background:                  #f5f5f5;
@panel-hover-hover-color:                       #444;
@panel-hover-badge-top:                         10px;
@panel-hover-badge-right:                       @panel-hover-badge-top;
@panel-hover-teaser-margin:                     -@panel-hover-padding;

@panel-header-title-padding:                    10px;
@panel-header-title-border:                     #ddd;
@panel-header-title-border-width:               1px;
@panel-header-title-color:                      #444;

@panel-space-padding:                           30px;

@panel-divider-gutter:                          25px;
@panel-divider-gutter-large:                    35px;
@panel-divider-border:                          #ddd;
@panel-divider-border-width:                    1px;

/* ========================================================================
   Component: Panel
 ========================================================================== */

/*
 * 1. Needed for `a` elements
 * 2. Create position context for badges
 */

.uk-panel {
    /* 1 */
    display: block;
    /* 2 */
    position: relative;
}

/*
 * Allow panels to be anchors
 */

.uk-panel,
.uk-panel:hover { text-decoration: none; }

/*
 * Micro clearfix to make panels more robust
 */

.uk-panel:before,
.uk-panel:after {
    content: "";
    display: table;
}

.uk-panel:after { clear: both; }

/*
 * Remove margin from the last-child if not `uk-widget-title`
 */

.uk-panel > :not(.uk-panel-title):last-child { margin-bottom: 0; }

/* Sub-object: `uk-panel-title`
 ========================================================================== */

.uk-panel-title {
    margin-top: 0;
    margin-bottom: @panel-title-margin-bottom;
    font-size: @panel-title-font-size;
    line-height: @panel-title-line-height;
    font-weight: @panel-title-font-weight;
    text-transform: @panel-title-text-transform;
    color: @panel-title-color;
    .hook-panel-title;
}

/* Sub-object: `uk-panel-badge`
 ========================================================================== */

.uk-panel-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    .hook-panel-badge;
}

/* Sub-object: `uk-panel-teaser`
 ========================================================================== */

.uk-panel-teaser { margin-bottom: @panel-teaser-margin-bottom; }

/* Modifier: `uk-panel-box`
 ========================================================================== */

.uk-panel-box {
    padding: @panel-box-padding;
    background: @panel-box-background;
    color: @panel-box-color;
    .hook-panel-box;
}

.uk-panel-box-hover:hover {
    color: @panel-box-hover-color;
    .hook-panel-box-hover;
}

.uk-panel-box .uk-panel-title { color: @panel-box-title-color; }

.uk-panel-box .uk-panel-badge {
    top: @panel-box-badge-top;
    right: @panel-box-badge-right;
}

.uk-panel-box > .uk-panel-teaser {
    margin-top: @panel-box-teaser-margin;
    margin-left: @panel-box-teaser-margin;
    margin-right: @panel-box-teaser-margin;
}

/*
 * Nav in panel
 */

.uk-panel-box > .uk-nav-side { margin: 0 (-@panel-box-padding); }

/*
 * Sub-modifier: `uk-panel-box-primary`
 */

.uk-panel-box-primary {
    background-color: @panel-box-primary-background;
    color: @panel-box-primary-color;
    .hook-panel-box-primary;
}

.uk-panel-box-primary-hover:hover {
    color: @panel-box-primary-hover-color;
    .hook-panel-box-primary-hover;
}

.uk-panel-box-primary .uk-panel-title { color: @panel-box-primary-title-color; }

/*
 * Sub-modifier: `uk-panel-box-secondary`
 */

.uk-panel-box-secondary {
    background-color: @panel-box-secondary-background;
    color: @panel-box-secondary-color;
    .hook-panel-box-secondary;
}

.uk-panel-box-secondary-hover:hover {
    color: @panel-box-secondary-hover-color;
    .hook-panel-box-secondary-hover;
}

.uk-panel-box-secondary .uk-panel-title { color: @panel-box-secondary-title-color; }

/* Modifier: `uk-panel-hover`
 ========================================================================== */

.uk-panel-hover {
    padding: @panel-hover-padding;
    color: @panel-hover-color;
    .hook-panel-hover;
}

.uk-panel-hover:hover {
    background: @panel-hover-hover-background;
    color: @panel-hover-hover-color;
    .hook-panel-hover-hover;
}

.uk-panel-hover .uk-panel-badge {
    top: @panel-hover-badge-top;
    right: @panel-hover-badge-right;
}

.uk-panel-hover > .uk-panel-teaser {
    margin-top: @panel-hover-teaser-margin;
    margin-left: @panel-hover-teaser-margin;
    margin-right: @panel-hover-teaser-margin;
}

/* Modifier: `uk-panel-header`
 ========================================================================== */

.uk-panel-header .uk-panel-title {
    padding-bottom: @panel-header-title-padding;
    border-bottom: @panel-header-title-border-width solid @panel-header-title-border;
    color: @panel-header-title-color;
    .hook-panel-header;
}

/* Modifier: `uk-panel-space`
 ========================================================================== */

.uk-panel-space { padding: @panel-space-padding; }

.uk-panel-space .uk-panel-badge {
    top: @panel-space-padding;
    right: @panel-space-padding;
}

/* Modifier: `uk-panel-divider`
 ========================================================================== */

.uk-panel + .uk-panel-divider { margin-top: (@panel-divider-gutter * 2) !important; }

.uk-panel + .uk-panel-divider:before {
    content: "";
    display: block;
    position: absolute;
    top: -(@panel-divider-gutter);
    left: 0;
    right: 0;
    border-top: @panel-divider-border-width solid @panel-divider-border;
}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    .uk-panel + .uk-panel-divider { margin-top: (@panel-divider-gutter-large * 2) !important; }
    .uk-panel + .uk-panel-divider:before { top: -(@panel-divider-gutter-large); }

}

// Hooks
// ========================================================================

.hook-panel-misc;

.hook-panel-title() {}
.hook-panel-badge() {}
.hook-panel-box() {}
.hook-panel-box-hover() {}
.hook-panel-box-primary() {}
.hook-panel-box-primary-hover() {}
.hook-panel-box-secondary() {}
.hook-panel-box-secondary-hover() {}
.hook-panel-hover() {}
.hook-panel-hover-hover() {}
.hook-panel-header() {}
.hook-panel-misc() {}

// Name:            Panel
// Description:     Defines styles for reusable content areas
//
// Component:       `uk-panel`
//
// Sub-objects:     `uk-panel-title`
//                  `uk-panel-badge`
//                  `uk-panel-teaser`
//
// Modifiers:       `uk-panel-box`
//                  `uk-panel-box-hover`
//                  `uk-panel-box-primary`
//                  `uk-panel-box-primary-hover`
//                  `uk-panel-box-secondary`
//                  `uk-panel-box-secondary-hover`
//                  `uk-panel-hover`
//                  `uk-panel-header`
//                  `uk-panel-space`
//                  `uk-panel-divider`
//
// Uses:            Nav: `uk-nav-side`
//
// Used by:         Dropdown
//                  Off-canvas
//                  Grid
//
// Markup:
//
//
//

//

//

//

//

//
// ========================================================================

// Variables
// ========================================================================

@panel-title-margin-bottom:                     15px;
@panel-title-font-size:                         18px;
@panel-title-line-height:                       24px;
@panel-title-font-weight:                       normal;
@panel-title-color:                             #444;
@panel-title-text-transform:                    none;

@panel-teaser-margin-bottom:                    @panel-title-margin-bottom;

@panel-box-padding:                             15px;
@panel-box-background:                          #f5f5f5;
@panel-box-color:                               #444;
@panel-box-hover-color:                         @panel-box-color;
@panel-box-title-color:                         #444;
@panel-box-badge-top:                           10px;
@panel-box-badge-right:                         @panel-box-badge-top;
@panel-box-teaser-margin:                       -@panel-box-padding;

@panel-box-primary-background:                  #ebf7fd;
@panel-box-primary-color:                       #2d7091;
@panel-box-primary-hover-color:                 @panel-box-primary-color;
@panel-box-primary-title-color:                 #2d7091;

@panel-box-secondary-background:                #eee;
@panel-box-secondary-color:                     #444;
@panel-box-secondary-hover-color:               @panel-box-secondary-color;
@panel-box-secondary-title-color:               #444;

@panel-hover-padding:                           15px;
@panel-hover-color:                             #444;
@panel-hover-hover-background:                  #f5f5f5;
@panel-hover-hover-color:                       #444;
@panel-hover-badge-top:                         10px;
@panel-hover-badge-right:                       @panel-hover-badge-top;
@panel-hover-teaser-margin:                     -@panel-hover-padding;

@panel-header-title-padding:                    10px;
@panel-header-title-border:                     #ddd;
@panel-header-title-border-width:               1px;
@panel-header-title-color:                      #444;

@panel-space-padding:                           30px;

@panel-divider-gutter:                          25px;
@panel-divider-gutter-large:                    35px;
@panel-divider-border:                          #ddd;
@panel-divider-border-width:                    1px;

/* ========================================================================
   Component: Panel
 ========================================================================== */

/*
 * 1. Needed for `a` elements
 * 2. Create position context for badges
 */

.uk-panel {
    /* 1 */
    display: block;
    /* 2 */
    position: relative;
}

/*
 * Allow panels to be anchors
 */

.uk-panel,
.uk-panel:hover { text-decoration: none; }

/*
 * Micro clearfix to make panels more robust
 */

.uk-panel:before,
.uk-panel:after {
    content: "";
    display: table;
}

.uk-panel:after { clear: both; }

/*
 * Remove margin from the last-child if not `uk-widget-title`
 */

.uk-panel > :not(.uk-panel-title):last-child { margin-bottom: 0; }

/* Sub-object: `uk-panel-title`
 ========================================================================== */

.uk-panel-title {
    margin-top: 0;
    margin-bottom: @panel-title-margin-bottom;
    font-size: @panel-title-font-size;
    line-height: @panel-title-line-height;
    font-weight: @panel-title-font-weight;
    text-transform: @panel-title-text-transform;
    color: @panel-title-color;
    .hook-panel-title;
}

/* Sub-object: `uk-panel-badge`
 ========================================================================== */

.uk-panel-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    .hook-panel-badge;
}

/* Sub-object: `uk-panel-teaser`
 ========================================================================== */

.uk-panel-teaser { margin-bottom: @panel-teaser-margin-bottom; }

/* Modifier: `uk-panel-box`
 ========================================================================== */

.uk-panel-box {
    padding: @panel-box-padding;
    background: @panel-box-background;
    color: @panel-box-color;
    .hook-panel-box;
}

.uk-panel-box-hover:hover {
    color: @panel-box-hover-color;
    .hook-panel-box-hover;
}

.uk-panel-box .uk-panel-title { color: @panel-box-title-color; }

.uk-panel-box .uk-panel-badge {
    top: @panel-box-badge-top;
    right: @panel-box-badge-right;
}

.uk-panel-box > .uk-panel-teaser {
    margin-top: @panel-box-teaser-margin;
    margin-left: @panel-box-teaser-margin;
    margin-right: @panel-box-teaser-margin;
}

/*
 * Nav in panel
 */

.uk-panel-box > .uk-nav-side { margin: 0 (-@panel-box-padding); }

/*
 * Sub-modifier: `uk-panel-box-primary`
 */

.uk-panel-box-primary {
    background-color: @panel-box-primary-background;
    color: @panel-box-primary-color;
    .hook-panel-box-primary;
}

.uk-panel-box-primary-hover:hover {
    color: @panel-box-primary-hover-color;
    .hook-panel-box-primary-hover;
}

.uk-panel-box-primary .uk-panel-title { color: @panel-box-primary-title-color; }

/*
 * Sub-modifier: `uk-panel-box-secondary`
 */

.uk-panel-box-secondary {
    background-color: @panel-box-secondary-background;
    color: @panel-box-secondary-color;
    .hook-panel-box-secondary;
}

.uk-panel-box-secondary-hover:hover {
    color: @panel-box-secondary-hover-color;
    .hook-panel-box-secondary-hover;
}

.uk-panel-box-secondary .uk-panel-title { color: @panel-box-secondary-title-color; }

/* Modifier: `uk-panel-hover`
 ========================================================================== */

.uk-panel-hover {
    padding: @panel-hover-padding;
    color: @panel-hover-color;
    .hook-panel-hover;
}

.uk-panel-hover:hover {
    background: @panel-hover-hover-background;
    color: @panel-hover-hover-color;
    .hook-panel-hover-hover;
}

.uk-panel-hover .uk-panel-badge {
    top: @panel-hover-badge-top;
    right: @panel-hover-badge-right;
}

.uk-panel-hover .uk-panel-teaser {
    margin-top: @panel-hover-teaser-margin;
    margin-left: @panel-hover-teaser-margin;
    margin-right: @panel-hover-teaser-margin;
}

/* Modifier: `uk-panel-header`
 ========================================================================== */

.uk-panel-header .uk-panel-title {
    padding-bottom: @panel-header-title-padding;
    border-bottom: @panel-header-title-border-width solid @panel-header-title-border;
    color: @panel-header-title-color;
    .hook-panel-header;
}

/* Modifier: `uk-panel-space`
 ========================================================================== */

.uk-panel-space { padding: @panel-space-padding; }

.uk-panel-space .uk-panel-badge {
    top: @panel-space-padding;
    right: @panel-space-padding;
}

/* Modifier: `uk-panel-divider`
 ========================================================================== */

.uk-panel + .uk-panel-divider { margin-top: (@panel-divider-gutter * 2) !important; }

.uk-panel + .uk-panel-divider:before {
    content: "";
    display: block;
    position: absolute;
    top: -(@panel-divider-gutter);
    left: 0;
    right: 0;
    border-top: @panel-divider-border-width solid @panel-divider-border;
}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    .uk-panel + .uk-panel-divider { margin-top: (@panel-divider-gutter-large * 2) !important; }
    .uk-panel + .uk-panel-divider:before { top: -(@panel-divider-gutter-large); }

}

// Hooks
// ========================================================================

.hook-panel-misc;

.hook-panel-title() {}
.hook-panel-badge() {}
.hook-panel-box() {}
.hook-panel-box-hover() {}
.hook-panel-box-primary() {}
.hook-panel-box-primary-hover() {}
.hook-panel-box-secondary() {}
.hook-panel-box-secondary-hover() {}
.hook-panel-hover() {}
.hook-panel-hover-hover() {}
.hook-panel-header() {}
.hook-panel-misc() {}