Remove empty space

Remove empty space

@charset "utf-8";
* {
  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;
}

@font-face {
    font-family: 'f';
    src: url('f.eot');
    src: url('f.eot?#iefix') format('embedded-opentype'),
         url('f.woff') format('woff'),
         url('f.ttf') format('truetype'),
         url('f.svg#AllerRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

.aller {
  font-family: f, 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: .3em;
}

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

ins {
  .gray;
}

del {
  text-decoration: line-through;
}

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

header {
  position: relative;
  .aller;
  font-size: 30px;
  padding: 5px 0 0 50px;
  height: 38px;
  width: 160px;
  margin: 0 auto;
  a:hover {
    color: inherit;
  }
}

header:before {
  position: absolute;
  top: 0;
  left: 0;
  height: 38px;
  width: 38px;
  content: '';
  background: url(l.svg) no-repeat 0 0;
  background-size: 38px 38px;
  -webkit-animation: r 10s infinite linear;
     -moz-animation: r 10s infinite linear;
}

@-webkit-keyframes r {
  0%   { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes r {
  0%   { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(360deg); }
}

nav {
  .helvetica;
  font-size: 11px;
}

nav[role=navigation] {
  padding: 15px 0;
  ul {
    text-align: center;
    li {
      display: inline;
      margin: 0 .8em;
    }
  }
}

nav[role=pagination] {
  a {
    position: fixed;
    top: 177px;
    display: block;
    padding: 10px 15px;
    background: rgba(0, 0, 0, .05);
    z-index: 9999;
  }
  a[role=next] {
    left: 0;
  }
  a[role=previous] {
    right: 0;
  }
}

hgroup {
  .aller;
  font-size: 18px;
  text-align: center;
  padding-top: 40px;
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: 40px;
  a {
    border-bottom: 1px dotted rgba(0, 0, 0, .2);
    &:hover {
      /*border-bottom-color: #000;*/
    }
  }
  img, video {
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
  p {
  }
  .txt {
    max-width: 640px;
    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: #b74;
    }
  }
  .note, .download {
    .helvetica;
    color: #000;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
    padding: 20px;
    border-left: 3px solid rgba(255, 64, 0, .15);
    background: rgba(255, 64, 0, .1);
  }
}

// image list in "work"
// a padding-top unification workaround
.al {
  max-width: 675px;
  padding-top: 20px;
  text-align: center;
  margin: 0 auto;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    img {
      width: 135px;
      height: 101.25px;
      margin: 0;
    }
    a {
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px;
      width: 115px;
      height: 81.25px;
      .aller;
      color: #fff;
      font-size: 14px;
      line-height: 1.45;
      opacity: 0;
      &:hover {
        background: rgba(0, 0, 0, .9);
      }
    }
    &:hover a {
      opacity: 1;
    }
  }
}

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

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

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

.top {
}

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

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


overhauled addPlan UI added addPlan.less

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


Basic styles added to custom.less

Basic styles added to custom.less

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


Add tables.less

Add tables.less

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


less function fix

less function fix

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/Eomerx/blank-less.git/'


Remove redundant styling for legacy mroe features styling

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


hide download button on homepage for iOS users

iOS specific firefox-promo banner styling

tidy up

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

@import "sandstone/lib.less";

/* {{{ Meta Web Pro Black Italic font for Firefox OS MWCpromo */

@font-face {
	font-family: MetaWebPro-BlackIta;
    src: url('/media/fonts/MetaWebPro-BlackIta.eotlite');
    src: url('/media/fonts/MetaWebPro-BlackIta.eotlite?#iefix') format('embedded-opentype'),
         url('/media/fonts/MetaWebPro-BlackIta.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* }}} */
/* {{{ Vollkorn font for Firefox Flicks promo */

@font-face {
    font-family: 'VollkornRegular';
    src: url('/media/fonts/Vollkorn-Regular-webfont.eot');
    src: url('/media/fonts/Vollkorn-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/fonts/Vollkorn-Regular-webfont.woff') format('woff'),
         url('/media/fonts/Vollkorn-Regular-webfont.ttf') format('truetype'),
         url('/media/fonts/Vollkorn-Regular-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VollkornBold';
    src: url('/media/fonts/Vollkorn-Bold-webfont.eot');
    src: url('/media/fonts/Vollkorn-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/fonts/Vollkorn-Bold-webfont.woff') format('woff'),
         url('/media/fonts/Vollkorn-Bold-webfont.ttf') format('truetype'),
         url('/media/fonts/Vollkorn-Bold-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* }}} */
/* {{{ Main Feature */

#main-feature {
    text-align: center;
    h1 {
        img {
            vertical-align: baseline;
            position: relative;
            top: 5px;
        }
    }
    h2 {
    }
}

/* }}} */
/* {{{ Firefox Promo bar */

#firefox-promo {
    padding-top: @baseLine;
    padding-bottom: 0;
    h3 {
        .span(3);
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0.2em;
        letter-spacing: -1px;
        white-space: nowrap;
    }
    #firefox-promo-link {
        position: absolute;
        top: -10px;
        left: 280px;
    }
    ul.features {
        .span(4);
        width: 260px;
        margin: 0 0 0 160px;
        li {
            float: left;
            list-style-type: none;
            margin: 0;
            width: 86px;
            padding: 0;
            text-align: center;
            small {
                display: block;
                padding: 0 6px;
                border-left: 1px dotted @borderColor;
            }
            &:first-child small {
                border: 0;
            }
        }
    }
    .download-button {
        .span(4);
        width: auto;
        float: right;
        margin-top: -6px;
        margin-left: (@gridGutterWidth / 2);
        padding-bottom: 6px;
    }
}

/* iOS temporary styles until we have new unsupported text */
.ios {
    #firefox-promo {
        min-height: 62px;
        h3 {
            margin: 0 0 0 170px;
        }
        #firefox-promo-link {
            left: 445px;
        }
    }
    .download-button .unsupported-download {
        display: none;
    }
}

/* }}} */
/* {{{ Main Content Columns */

#main-content {
    li {
        margin: @baseLine 0 0 0;
        list-style-type: none;
        border-bottom: 1px dotted @borderColor;
        padding: 0 0 (@baseLine / 2) 0;
        p {
            margin: 0;
        }
        h4 {
            margin: 0 0 (@baseLine / 4) 0;
        }
        h4 a:after,
        a h4:after {
            content: " »";
            .open-sans-light;
            font-weight: 300;
        }
    }
}

#home-news {
    .span(4);
    margin-bottom: @baseLine;
    #all-news {
        .open-sans;
    }
}

#home-promo {
    margin: 0 auto;
}

#home-promos {
    .span(4);
    margin-bottom: @baseLine;
}

#home-about {
    .span(4);
    margin-bottom: @baseLine;
    ul {
        margin-top: @baseLine;
    }
    li {
        border: 0;
        margin-top: @baseLine / 2;
        padding-bottom: 0;
    }
    a {
        display: block;
        padding-left: 80px;
        padding-bottom: @baseLine / 2;
        background: url(/media/img/home/about-icons.png) 0 0 no-repeat;
        h4 {
            color: @linkBlue;
        }
        p {
            color: @textColorSecondary;
            font-size: @smallFontSize;
            line-height: 18px;
        }
        &:hover {
            text-decoration: none;
            h4 {
                text-decoration: underline;
            }
        }
    }
}

#about-volunteer {
    a { background-position: 0 0; }
    a:hover,
    a:focus {
        background-position: -800px 0;
        h4 { color: #linkRed; }
    }
}

#about-work {
    a { background-position: 0 -150px; }
    a:hover,
    a:focus {
        background-position: -800px -150px;
        h4 { color: #f79100; }
    }
}

#about-find {
    a { background-position: 0 -300px; }
    a:hover,
    a:focus {
        background-position: -800px -300px;
        h4 { color: #1b66af; }
    }
}

#about-join {
    a { background-position: 0 -450px; }
    a:hover,
    a:focus {
        background-position: -800px -450px;
        h4 { color: #d65106; }
    }
}

#about-learn {
    a { background-position: 0 -600px; }
    a:hover,
    a:focus {
        background-position: -800px -600px;
        h4 { color: #669d28; }
    }
}

/* }}} */
/* {{{ Main Promos */

.no-js .pager-page {
    margin-bottom: 24px;
}
.pager-page {
    background-position: 0 0;
    background-repeat: no-repeat;
    display: none;
    a.container {
        display: block;
        height: 265px;
        padding: 0;
        position: relative;
        width: 100%;
        border-bottom: 1px solid #ddd;
        &:hover,
        &:active {
            text-decoration: none;
        }
    }
    .content {
        .span(4);
        margin-left: 0;
        padding: 0 0 @baseLine 48px;
        position: relative;
    }
    h3 {
        padding-top: @baseLine * 2;
        margin-bottom: @baseLine;
        font-size: 36px;
        letter-spacing: -1px;
        color: #fff;
        text-shadow: none;
    }
    h4 {
        color: #fff;
        text-shadow: none;
    }
    p {
        color: #fff;
        text-shadow: none;
        margin: 0;
    }
    .go:after {
        content: "\00A0\00BB"; /* nbsp raquo */
    }
    img {
        display: block;
        background: @textColorPrimary;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.default-page {
    display: block;
}
.no-js .pager-tabs {
    display: none;
}
.pager-tabs {
    text-align: center;
    clear: both;
    padding-top: 6px;
    li {
        display: inline;
        list-style-type: none;
        margin: 0;
        a {
            color: rgba(0,0,0,0.2);
            span {
                .inline-block();
                text-indent: 100%;
                white-space: nowrap;
                overflow: hidden;
                background: rgb(100,100,100);
                background: rgba(0,0,0,0.2);
                height: 10px;
                width: 10px;
                margin: 6px;
                border-radius: 10px;
            }
            &.selected span {
                background: rgb(20,20,20);
                background: rgba(0,0,0,0.5);
            }
            &:hover,
            &:active {
                text-decoration: none;
                span {
                    background: rgb(20,20,20);
                    background: rgba(0,0,0,0.5);
                }
            }
        }
    }
}

#home-promo {

    .pager-page {
        h3  {
            font-size: 64px;
            margin-bottom: @baseLine / 2;
        }
        h4 {
            text-decoration: none;
            text-shadow: none;
            font-size: 28px;
            float: none;
            width: 50%;
            margin-bottom: @baseLine;
        }
        .content {
            width: 60%;
            padding-left: 30px;
        }
    }

    #promo-mwc-announce,
    #page-promo-mwc-announce {
        .content {
            width: 80%;
        }
        h3 {
            font-family: MetaWebPro-BlackIta;
            text-transform: uppercase;
        }
        h4 {
            width: 90%;
            font-size: 20px;
            line-height: 1.3;
        }
    }

    #promo-mozilla15,
    #page-promo-mozilla15 {
        .content {
            width: 50%;
        }
        h3 {
            color: #333;
        }
        h4 {
            color: #333;
            width: auto;
        }
        .go {
            color: #282828;
            font-size: 16px;
            &:hover {
                color: #00539F;
            }
        }
    }

    #promo-flicksvideo,
    #page-promo-flicksvideo {
        position: relative;
        .content {
            width: 50%;
            padding-left: 60px;
            padding-top: 20px;
            h3 {
                font-size: 46px;
                font-family: VollkornBold;
                line-height: 1;
            }
            h4 {
                font-size: 20px;
                letter-spacing: normal;
                line-height: 1.2;
                font-family: VollkornRegular;
                margin-bottom: 10px;
            }
        }
        .container {
            background: #212a2f url(/media/img/home/promo-flicks-mobile.jpg) 0 0 repeat-x;
            position: relative;
            border-bottom: 1px solid #ddd;
            width: 100%;
            padding: 0;
            a.go {
                display: inline;
                border: none;
                width: auto;
                height: auto;
                position: absolute;
                bottom: 20px;
                left: 20px;
                color: #fff;
            }
        }
        .video-container {
            position: absolute;
            z-index: 99;
        }
        .video-close {
            display: block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 24px;
            color: rgb(200,200,200);
            color: rgba(200,200,200,0.5);
            text-align: center;
            font-weight: bold;
            position: absolute;
            z-index: 99;
            right: 10px;
            top: 20px;
            cursor: pointer;
            border: 0;
            background: none;
            padding: 0; // Override default button padding
            font-family: inherit; // Override browser button font family
            &:hover,
            &:active,
            &:focus {
                color: rgb(250,250,250);
                color: rgba(200,200,200,0.8);
            }
        }
        img {
            .span(5);
            margin: 0;
            position: absolute;
            top: 25px;
            right: 30px;
            left: auto;
            height: auto;
            z-index: 99;
            cursor: pointer;
            &:focus {
                outline: 1px dotted #fff;
            }
        }
        h3 {
            font-size: 46px
        }
        h4 {
            width: 70%;
        }
    }

    #promo-flicks-overlay {
        display: none;
        z-index: 100;
        background: #000;
        background: rgba(0,0,0,0.75);
        color: #fff;
        position: absolute;
        text-align: center;

        .video-visit {
            .inline-block;
            margin-top: 40px;
            margin-bottom: 40px;
            font-size: 32px;
            .open-sans-light;
        }

        .share-links {
            li {
                .inline-block;
                a {
                    .inline-block;
                    padding: 5px 10px 5px 36px;
                    background: url(/media/img/home/video-overlay-icons.png) 0 center no-repeat;
                    &.share-twitter {
                        background-position: -400px center;
                    }
                }
            }
        }

        .video-replay,
        .video-continue {
            opacity: 0.8;
            cursor: pointer;
            margin-top: 40px;
            .inline-block;
            padding: 40px 10px 10px 10px;
            min-width: 120px;
            position: relative;
            color: #ccc;
            &:after {
                content: " ";
                display: block;
                position: absolute;
                top: 0;
                left: 46px;
                margin: 0 auto;
                background: url(/media/img/home/video-overlay-icons.png) -800px center no-repeat;
                height: 34px;
                width: 38px;
            }
            &:hover {
                opacity: 1;
            }
        }
    }

}

/* }}} */
/* {{{ Tablet  Layout: 768px */
@media only screen and (min-width: @widthTablet) and (max-width: @widthDesktop) {

    #firefox-promo {
        padding-bottom: 12px;
        h3 {
            .span_narrow(7);
            white-space: normal;
        }
        ul.features {
            .span_narrow(7);
            margin-bottom: 10px;
            li {
                float: none;
                width: auto;
                margin: auto auto auto @baseLine;
                list-style-type: disc;
                small {
                    text-align: left;
                    border: 0;
                    padding: 0;
                    br { display: none; }
                }
            }
        }
        .download-button {
            position: absolute;
            top:   @gridGutterWidth / 2;
            right: @gridGutterWidth / 2;
            margin-top: @gridGutterWidth / 2;
        }
    }

    /* iOS temporary styles until we have new unsupported text */
    .ios #firefox-promo {
        h3 {
            margin: 0 0 0 30px;
        }
        #firefox-promo-link {
            left: 305px;
        }
        ul.features {
            .span(4);
            margin: 0;
            width: auto;
            li {
                float: left;
                list-style-type: none;
                margin: 0;
                width: 86px;
                padding: 0;
                text-align: center;
                small {
                    display: block;
                    padding: 0 6px;
                    border-left: 1px dotted @borderColor;
                }
                &:first-child small {
                    border: 0;
                }
            }
        }
    }

    #home-promo {
        .pager-page {
            a.container {
                height: 198px;
            }
            .content {
                width: 60%;
            }
            h3 {
                font-size: 38px;
                letter-spacing: -1px;
                padding-top: @baseLine;
                width: auto;
            }
            h4 {
                font-size: 20px;
            }
        }

        #promo-mwc-announce,
        #page-promo-mwc-announce {
            h3 {
                font-size: 50px;
            }
            h4 {
                font-size: 16px;
            }
        }

        #promo-flicksvideo,
        #page-promo-flicksvideo {
            .container {
                background-position: -20px -20px;
            }
            img {
                .span_narrow(5);
                margin: 0;
                top: 20px;
                right: 20px;
            }
            .content {
                .span_narrow(7);
                padding-left: 30px;
                width: 50%;
                h3 {
                    font-size: 32px;
                    margin-bottom: 8px;
                }
                h4 {
                    font-size: 16px;
                    width: 100%;
                    margin-bottom: 8px;
                }
            }
        }
    }

    #home-news,
    #home-promos,
    #home-about {
        .span_narrow(4);
    }

}

/* }}} */
/* {{{ Wide Mobile Layout: 480px */
@media only screen and (max-width: @widthTablet) {

    #main-feature h1 {
        text-align: left;
        width: 174px;
        margin-left: auto;
        margin-right: auto;
        img {
            height: auto;
            width: 100%;
            top: -7px;
            display: block;
        }
    }

    .huge h1 {
        font-size: 32px;
    }

    .huge h2 {
        font-size: 22px;
        letter-spacing: normal;
        width: 190px;
        margin-left: auto;
        margin-right: auto;
    }

    #firefox-promo {
        h3 {
            float: none;
            width: auto;
            font-size: 28px;
            margin: 0 auto auto 100px;
            min-height: 60px;
            white-space: normal;
        }
        .download-button {
            width: auto;
            float: none;
            display: block;
            margin-top: 10px;
            .download-link {
                width: 100%;
            }
        }
        #firefox-promo-link {
            left: @gridGutterWidth;
            top: @gridGutterWidth / 2;
            width: 80px;
            height: auto;
        }
        ul.features {
            display: none;
        }
    }

    /* iOS temporary styles until we have new 'unsupported' text */
    .ios #firefox-promo {
        min-height: 90px;
        padding-top: 20px;
        h3 {
            margin: 0 auto auto 100px;
        }
        #firefox-promo-link {
            left: @gridGutterWidth;
        }
    }

    #home-promo {
        .pager-page {
            a {
                width: auto;
                height: auto;
                img {
                    position: static;
                }
            }
            h3 {
                font-size: 32px;
                letter-spacing: -0.5px;
                padding-top: @baseLine;
            }
            h4 {
                font-size: 20px;
                width: auto;
                margin-bottom: @baseLine / 2;
            }
            .content {
                padding-left: @gridGutterWidth;
                padding-right: @gridGutterWidth;
                margin: 0;
                background: #fff;
                width: auto;
                float: none;
            }
            h4,
            h3 {
                margin-bottom: @baseLine / 3;
                color: @textColorPrimary;
            }
            p {
                color: @textColorPrimary;
            }
        }

        .pager-tabs li a {
            padding: 12px;
            span {
                height: 20px;
                width: 20px;
                border-radius: 20px;
            }
        }

        #promo-mwc-announce,
        #page-promo-mwc-announce {
            .content {
                width: auto;
            }
        }

        #promo-mozilla15,
        #page-promo-mozilla15 {
            .content {
                width: auto;
            }
        }

        #promo-flicksvideo,
        #page-promo-flicksvideo {
            img {
                top: 0;
                left: 0;
                width: auto;
                float: none;
            }
            .container {
                position: static;
                padding-top: 247px;
            }
            .content {
                float: none;
                margin: 0;
                width: auto;
                position: static;
                padding-left: 20px;
                padding-top: 0;
                h3 {
                    font-size: 24px;
                    .open-sans-light;
                    width: auto;
                    float: none;
                }
                h4 {
                    font-size: 18px;
                    .open-sans-light;
                    width: auto;
                    float: none;
                }
            }
        }
        #promo-flicks-overlay {
            .video-visit {
                margin-top: 10px;
                margin-bottom: 10px;
                font-size: 18px;
                .open-sans-light;
            }

            .share-links {
                margin-bottom: 5px;
            }

            .video-replay,
            .video-continue {
                margin-top: 10px;
            }
        }
    }

    #home-news,
    #home-promos,
    #home-about {
        width: @widthMobile - (@gridGutterWidth * 2);
    }

}

/* Wide Mobile Layout: 480px */
@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {

    #firefox-promo {
        padding-top: 10px;
        h3 {
            margin-top: 25px;
            min-height: 55px;
        }
    }

    #home-promo {
        .pager-page {
            a.container {
                width: auto;
                height: auto;
                img {
                    position: static;
                }
            }
            h3 {
                font-size: 36px;
                letter-spacing: -0.5px;
                padding-top: @baseLine;
            }
            h4 {
                font-size: 20px;
                width: auto;
                margin-bottom: @baseLine / 2;
            }
            .content {
                padding-left: @gridGutterWidth;
                padding-right: @gridGutterWidth;
                margin: 0;
                background: #fff;
                width: auto;
                float: none;
            }
            h4,
            h3 {
                margin-bottom: @baseLine / 3;
                color: @textColorPrimary;
            }
            p {
                color: @textColorPrimary;
            }
        }

        .pager-tabs li a {
            padding: 12px;
            font-size: 28px;
        }

        #promo-mwc-announce,
        #page-promo-mwc-announce {
            .content {
                width: auto;
                h4 {
                    font-size: @baseFontSize;
                    line-height: 1.3;
                }
            }
        }
    }

    #home-news,
    #home-promos,
    #home-about {
        width: @widthMobileLandscape - (@gridGutterWidth * 2);
    }

}

/* Mobile layout: 320px */
@media only screen and (max-width: @breakMobileLandscape) {

    #home-promo {
        #promo-flicksvideo,
        #page-promo-flicksvideo {
            .container {
                padding-top: 179px;
            }
        }
        #promo-mwc-announce,
        #page-promo-mwc-announce {
            .content {
                width: auto;
                h3 {
                    font-size: 24px;
                }
                h4 {
                    font-size: @baseFontSize;
                    line-height: 1.3;
                }
            }
        }
    }
}

/* }}} */

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

@import "sandstone/lib.less";

/* {{{ Meta Web Pro Black Italic font for Firefox OS MWCpromo */

@font-face {
	font-family: MetaWebPro-BlackIta;
    src: url('/media/fonts/MetaWebPro-BlackIta.eotlite');
    src: url('/media/fonts/MetaWebPro-BlackIta.eotlite?#iefix') format('embedded-opentype'),
         url('/media/fonts/MetaWebPro-BlackIta.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* }}} */
/* {{{ Vollkorn font for Firefox Flicks promo */

@font-face {
    font-family: 'VollkornRegular';
    src: url('/media/fonts/Vollkorn-Regular-webfont.eot');
    src: url('/media/fonts/Vollkorn-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/fonts/Vollkorn-Regular-webfont.woff') format('woff'),
         url('/media/fonts/Vollkorn-Regular-webfont.ttf') format('truetype'),
         url('/media/fonts/Vollkorn-Regular-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VollkornBold';
    src: url('/media/fonts/Vollkorn-Bold-webfont.eot');
    src: url('/media/fonts/Vollkorn-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/fonts/Vollkorn-Bold-webfont.woff') format('woff'),
         url('/media/fonts/Vollkorn-Bold-webfont.ttf') format('truetype'),
         url('/media/fonts/Vollkorn-Bold-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* }}} */
/* {{{ Main Feature */

#main-feature {
    text-align: center;
    h1 {
        img {
            vertical-align: baseline;
            position: relative;
            top: 5px;
        }
    }
    h2 {
    }
}

/* }}} */
/* {{{ Firefox Promo bar */

#firefox-promo {
    padding-top: @baseLine;
    padding-bottom: 0;
    h3 {
        .span(3);
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0.2em;
        letter-spacing: -1px;
        white-space: nowrap;
    }
    #firefox-promo-link {
        position: absolute;
        top: -10px;
        left: 280px;
    }
    ul.features {
        .span(4);
        width: 260px;
        margin: 0 0 0 160px;
        li {
            float: left;
            list-style-type: none;
            margin: 0;
            width: 86px;
            padding: 0;
            text-align: center;
            small {
                display: block;
                padding: 0 6px;
                border-left: 1px dotted @borderColor;
            }
            &:first-child small {
                border: 0;
            }
        }
    }
    .download-button {
        .span(4);
        width: auto;
        float: right;
        margin-top: -6px;
        margin-left: (@gridGutterWidth / 2);
        padding-bottom: 6px;
    }
}

/* }}} */
/* {{{ Main Content Columns */

#main-content {
    li {
        margin: @baseLine 0 0 0;
        list-style-type: none;
        border-bottom: 1px dotted @borderColor;
        padding: 0 0 (@baseLine / 2) 0;
        p {
            margin: 0;
        }
        h4 {
            margin: 0 0 (@baseLine / 4) 0;
        }
        h4 a:after,
        a h4:after {
            content: " »";
            .open-sans-light;
            font-weight: 300;
        }
    }
}

#home-news {
    .span(4);
    margin-bottom: @baseLine;
    #all-news {
        .open-sans;
    }
}

#home-promo {
    margin: 0 auto;
}

#home-promos {
    .span(4);
    margin-bottom: @baseLine;
}

#home-about {
    .span(4);
    margin-bottom: @baseLine;
    ul {
        margin-top: @baseLine;
    }
    li {
        border: 0;
        margin-top: @baseLine / 2;
        padding-bottom: 0;
    }
    a {
        display: block;
        padding-left: 80px;
        padding-bottom: @baseLine / 2;
        background: url(/media/img/home/about-icons.png) 0 0 no-repeat;
        h4 {
            color: @linkBlue;
        }
        p {
            color: @textColorSecondary;
            font-size: @smallFontSize;
            line-height: 18px;
        }
        &:hover {
            text-decoration: none;
            h4 {
                text-decoration: underline;
            }
        }
    }
}

#about-volunteer {
    a { background-position: 0 0; }
    a:hover,
    a:focus {
        background-position: -800px 0;
        h4 { color: #linkRed; }
    }
}

#about-work {
    a { background-position: 0 -150px; }
    a:hover,
    a:focus {
        background-position: -800px -150px;
        h4 { color: #f79100; }
    }
}

#about-find {
    a { background-position: 0 -300px; }
    a:hover,
    a:focus {
        background-position: -800px -300px;
        h4 { color: #1b66af; }
    }
}

#about-join {
    a { background-position: 0 -450px; }
    a:hover,
    a:focus {
        background-position: -800px -450px;
        h4 { color: #d65106; }
    }
}

#about-learn {
    a { background-position: 0 -600px; }
    a:hover,
    a:focus {
        background-position: -800px -600px;
        h4 { color: #669d28; }
    }
}

/* }}} */
/* {{{ Main Promos */

.no-js .pager-page {
    margin-bottom: 24px;
}
.pager-page {
    background-position: 0 0;
    background-repeat: no-repeat;
    display: none;
    a.container {
        display: block;
        height: 265px;
        padding: 0;
        position: relative;
        width: 100%;
        border-bottom: 1px solid #ddd;
        &:hover,
        &:active {
            text-decoration: none;
        }
    }
    .content {
        .span(4);
        margin-left: 0;
        padding: 0 0 @baseLine 48px;
        position: relative;
    }
    h3 {
        padding-top: @baseLine * 2;
        margin-bottom: @baseLine;
        font-size: 36px;
        letter-spacing: -1px;
        color: #fff;
        text-shadow: none;
    }
    h4 {
        color: #fff;
        text-shadow: none;
    }
    p {
        color: #fff;
        text-shadow: none;
        margin: 0;
    }
    .go:after {
        content: "\00A0\00BB"; /* nbsp raquo */
    }
    img {
        display: block;
        background: @textColorPrimary;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.default-page {
    display: block;
}
.no-js .pager-tabs {
    display: none;
}
.pager-tabs {
    text-align: center;
    clear: both;
    padding-top: 6px;
    li {
        display: inline;
        list-style-type: none;
        margin: 0;
        a {
            color: rgba(0,0,0,0.2);
            span {
                .inline-block();
                text-indent: 100%;
                white-space: nowrap;
                overflow: hidden;
                background: rgb(100,100,100);
                background: rgba(0,0,0,0.2);
                height: 10px;
                width: 10px;
                margin: 6px;
                border-radius: 10px;
            }
            &.selected span {
                background: rgb(20,20,20);
                background: rgba(0,0,0,0.5);
            }
            &:hover,
            &:active {
                text-decoration: none;
                span {
                    background: rgb(20,20,20);
                    background: rgba(0,0,0,0.5);
                }
            }
        }
    }
}

#home-promo {

    .pager-page {
        h3  {
            font-size: 64px;
            margin-bottom: @baseLine / 2;
        }
        h4 {
            text-decoration: none;
            text-shadow: none;
            font-size: 28px;
            float: none;
            width: 50%;
            margin-bottom: @baseLine;
        }
        .content {
            width: 60%;
            padding-left: 30px;
        }
    }

    #promo-mwc-announce,
    #page-promo-mwc-announce {
        .content {
            width: 80%;
        }
        h3 {
            font-family: MetaWebPro-BlackIta;
            text-transform: uppercase;
        }
        h4 {
            width: 90%;
            font-size: 20px;
            line-height: 1.3;
        }
    }

    #promo-mozilla15,
    #page-promo-mozilla15 {
        .content {
            width: 50%;
        }
        h3 {
            color: #333;
        }
        h4 {
            color: #333;
            width: auto;
        }
        .go {
            color: #282828;
            font-size: 16px;
            &:hover {
                color: #00539F;
            }
        }
    }

    #promo-flicksvideo,
    #page-promo-flicksvideo {
        position: relative;
        .content {
            width: 50%;
            padding-left: 60px;
            padding-top: 20px;
            h3 {
                font-size: 46px;
                font-family: VollkornBold;
                line-height: 1;
            }
            h4 {
                font-size: 20px;
                letter-spacing: normal;
                line-height: 1.2;
                font-family: VollkornRegular;
                margin-bottom: 10px;
            }
        }
        .container {
            background: #212a2f url(/media/img/home/promo-flicks-mobile.jpg) 0 0 repeat-x;
            position: relative;
            border-bottom: 1px solid #ddd;
            width: 100%;
            padding: 0;
            a.go {
                display: inline;
                border: none;
                width: auto;
                height: auto;
                position: absolute;
                bottom: 20px;
                left: 20px;
                color: #fff;
            }
        }
        .video-container {
            position: absolute;
            z-index: 99;
        }
        .video-close {
            display: block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 24px;
            color: rgb(200,200,200);
            color: rgba(200,200,200,0.5);
            text-align: center;
            font-weight: bold;
            position: absolute;
            z-index: 99;
            right: 10px;
            top: 20px;
            cursor: pointer;
            border: 0;
            background: none;
            padding: 0; // Override default button padding
            font-family: inherit; // Override browser button font family
            &:hover,
            &:active,
            &:focus {
                color: rgb(250,250,250);
                color: rgba(200,200,200,0.8);
            }
        }
        img {
            .span(5);
            margin: 0;
            position: absolute;
            top: 25px;
            right: 30px;
            left: auto;
            height: auto;
            z-index: 99;
            cursor: pointer;
            &:focus {
                outline: 1px dotted #fff;
            }
        }
        h3 {
            font-size: 46px
        }
        h4 {
            width: 70%;
        }
    }

    #promo-flicks-overlay {
        display: none;
        z-index: 100;
        background: #000;
        background: rgba(0,0,0,0.75);
        color: #fff;
        position: absolute;
        text-align: center;

        .video-visit {
            .inline-block;
            margin-top: 40px;
            margin-bottom: 40px;
            font-size: 32px;
            .open-sans-light;
        }

        .share-links {
            li {
                .inline-block;
                a {
                    .inline-block;
                    padding: 5px 10px 5px 36px;
                    background: url(/media/img/home/video-overlay-icons.png) 0 center no-repeat;
                    &.share-twitter {
                        background-position: -400px center;
                    }
                }
            }
        }

        .video-replay,
        .video-continue {
            opacity: 0.8;
            cursor: pointer;
            margin-top: 40px;
            .inline-block;
            padding: 40px 10px 10px 10px;
            min-width: 120px;
            position: relative;
            color: #ccc;
            &:after {
                content: " ";
                display: block;
                position: absolute;
                top: 0;
                left: 46px;
                margin: 0 auto;
                background: url(/media/img/home/video-overlay-icons.png) -800px center no-repeat;
                height: 34px;
                width: 38px;
            }
            &:hover {
                opacity: 1;
            }
        }
    }

}

/* }}} */
/* {{{ Tablet  Layout: 768px */
@media only screen and (min-width: @widthTablet) and (max-width: @widthDesktop) {

    #firefox-promo {
        padding-bottom: 12px;
        h3 {
            .span_narrow(7);
            white-space: normal;
        }
        ul.features {
            .span_narrow(7);
            margin-bottom: 10px;
            li {
                float: none;
                width: auto;
                margin: auto auto auto @baseLine;
                list-style-type: disc;
                small {
                    text-align: left;
                    border: 0;
                    padding: 0;
                    br { display: none; }
                }
            }
        }
        .download-button {
            position: absolute;
            top:   @gridGutterWidth / 2;
            right: @gridGutterWidth / 2;
            margin-top: @gridGutterWidth / 2;
        }
    }

    #home-promo {
        .pager-page {
            a.container {
                height: 198px;
            }
            .content {
                width: 60%;
            }
            h3 {
                font-size: 38px;
                letter-spacing: -1px;
                padding-top: @baseLine;
                width: auto;
            }
            h4 {
                font-size: 20px;
            }
        }

        #promo-mwc-announce,
        #page-promo-mwc-announce {
            h3 {
                font-size: 50px;
            }
            h4 {
                font-size: 16px;
            }
        }

        #promo-flicksvideo,
        #page-promo-flicksvideo {
            .container {
                background-position: -20px -20px;
            }
            img {
                .span_narrow(5);
                margin: 0;
                top: 20px;
                right: 20px;
            }
            .content {
                .span_narrow(7);
                padding-left: 30px;
                width: 50%;
                h3 {
                    font-size: 32px;
                    margin-bottom: 8px;
                }
                h4 {
                    font-size: 16px;
                    width: 100%;
                    margin-bottom: 8px;
                }
            }
        }
    }

    #home-news,
    #home-promos,
    #home-about {
        .span_narrow(4);
    }

}

/* }}} */
/* {{{ Wide Mobile Layout: 480px */
@media only screen and (max-width: @widthTablet) {

    #main-feature h1 {
        text-align: left;
        width: 174px;
        margin-left: auto;
        margin-right: auto;
        img {
            height: auto;
            width: 100%;
            top: -7px;
            display: block;
        }
    }

    .huge h1 {
        font-size: 32px;
    }

    .huge h2 {
        font-size: 22px;
        letter-spacing: normal;
        width: 190px;
        margin-left: auto;
        margin-right: auto;
    }

    #firefox-promo {
        h3 {
            float: none;
            width: auto;
            font-size: 28px;
            margin: 0 auto auto 100px;
            min-height: 60px;
            white-space: normal;
        }
        .download-button {
            width: auto;
            float: none;
            display: block;
            margin-top: 10px;
            .download-link {
                width: 100%;
            }
        }
        #firefox-promo-link {
            left: @gridGutterWidth;
            top: @gridGutterWidth / 2;
            width: 80px;
            height: auto;
        }
        ul.features {
            display: none;
        }
    }

    #home-promo {
        .pager-page {
            a {
                width: auto;
                height: auto;
                img {
                    position: static;
                }
            }
            h3 {
                font-size: 32px;
                letter-spacing: -0.5px;
                padding-top: @baseLine;
            }
            h4 {
                font-size: 20px;
                width: auto;
                margin-bottom: @baseLine / 2;
            }
            .content {
                padding-left: @gridGutterWidth;
                padding-right: @gridGutterWidth;
                margin: 0;
                background: #fff;
                width: auto;
                float: none;
            }
            h4,
            h3 {
                margin-bottom: @baseLine / 3;
                color: @textColorPrimary;
            }
            p {
                color: @textColorPrimary;
            }
        }

        .pager-tabs li a {
            padding: 12px;
            span {
                height: 20px;
                width: 20px;
                border-radius: 20px;
            }
        }

        #promo-mwc-announce,
        #page-promo-mwc-announce {
            .content {
                width: auto;
            }
        }

        #promo-mozilla15,
        #page-promo-mozilla15 {
            .content {
                width: auto;
            }
        }

        #promo-flicksvideo,
        #page-promo-flicksvideo {
            img {
                top: 0;
                left: 0;
                width: auto;
                float: none;
            }
            .container {
                position: static;
                padding-top: 247px;
            }
            .content {
                float: none;
                margin: 0;
                width: auto;
                position: static;
                padding-left: 20px;
                padding-top: 0;
                h3 {
                    font-size: 24px;
                    .open-sans-light;
                    width: auto;
                    float: none;
                }
                h4 {
                    font-size: 18px;
                    .open-sans-light;
                    width: auto;
                    float: none;
                }
            }
        }
        #promo-flicks-overlay {
            .video-visit {
                margin-top: 10px;
                margin-bottom: 10px;
                font-size: 18px;
                .open-sans-light;
            }

            .share-links {
                margin-bottom: 5px;
            }

            .video-replay,
            .video-continue {
                margin-top: 10px;
            }
        }
    }

    #home-news,
    #home-promos,
    #home-about {
        width: @widthMobile - (@gridGutterWidth * 2);
    }

}

/* Wide Mobile Layout: 480px */
@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {

    #firefox-promo {
        padding-top: 10px;
        h3 {
            margin-top: 25px;
            min-height: 55px;
        }
    }

    #home-promo {
        .pager-page {
            a.container {
                width: auto;
                height: auto;
                img {
                    position: static;
                }
            }
            h3 {
                font-size: 36px;
                letter-spacing: -0.5px;
                padding-top: @baseLine;
            }
            h4 {
                font-size: 20px;
                width: auto;
                margin-bottom: @baseLine / 2;
            }
            .content {
                padding-left: @gridGutterWidth;
                padding-right: @gridGutterWidth;
                margin: 0;
                background: #fff;
                width: auto;
                float: none;
            }
            h4,
            h3 {
                margin-bottom: @baseLine / 3;
                color: @textColorPrimary;
            }
            p {
                color: @textColorPrimary;
            }
        }

        .pager-tabs li a {
            padding: 12px;
            font-size: 28px;
        }

        #promo-mwc-announce,
        #page-promo-mwc-announce {
            .content {
                width: auto;
                h4 {
                    font-size: @baseFontSize;
                    line-height: 1.3;
                }
            }
        }
    }

    #home-news,
    #home-promos,
    #home-about {
        width: @widthMobileLandscape - (@gridGutterWidth * 2);
    }

}

/* Mobile layout: 320px */
@media only screen and (max-width: @breakMobileLandscape) {

    #home-promo {
        #promo-flicksvideo,
        #page-promo-flicksvideo {
            .container {
                padding-top: 179px;
            }
        }
        #promo-mwc-announce,
        #page-promo-mwc-announce {
            .content {
                width: auto;
                h3 {
                    font-size: 24px;
                }
                h4 {
                    font-size: @baseFontSize;
                    line-height: 1.3;
                }
            }
        }
    }
}

/* }}} */


Hide navbar brand icon and start icon of title on mobile

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/sonatra/sonatra-theme-gluon.git/'


Weird one pixel spacing on certain window size ?_?

/**
 *    Copyright 2015 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
.osu-nav {
  margin: auto;
  width: 100%;
  max-width: @container-sm;
  display: flex;
  padding: (@spacing * 2) (@spacing * 2) 0;

  @media @desktop {
    width: calc(100% ~'-' (@spacing * 8));
  }

  &__avatar {
    .default-border-radius();
    .default-box-shadow();

    margin-left: @spacing;
    margin-bottom: (-@spacing);
    overflow: hidden;

    width: @nav-avatar-size;
    height: @nav-avatar-size;

    .js-nav-switch--active & {
      background-color: @yellow;
      box-shadow: 0 0 0 @bar-size @yellow;
    }
  }

  &__col {
    flex: none;
    display: flex;
    align-items: flex-end;

    color: @grey-f;
    font-size: @font-size--large;
    font-weight: 300;

    &:focus,
    &:hover {
      color: @grey-f;
      text-decoration: none;
    }

    &--logo {
      height: 0;
      align-self: flex-start;
      margin-top: (-@spacing / 2);
      align-items: flex-start;
    }

    &--title {
      padding: 0 @spacing;
      flex: 1 0 auto;
    }
  }

  &__highlight-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: 0;

    .js-nav-switch--active & {
      opacity: 1;
    }
  }

  &__title {
    padding-bottom: (@spacing / 2);
    display: flex;
    align-items: flex-end;
  }

  &__title-separator {
    display: inline-block;
    margin: 0 @spacing;
    opacity: 0.5;
  }
}

/**
 *    Copyright 2015 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
.osu-nav {
  margin: auto;
  width: 100%;
  max-width: @container-sm;
  display: flex;
  padding: (@spacing * 2) (@spacing * 2) 0;

  @media @desktop {
    width: calc(100% ~'-' (@spacing * 8));
  }

  &__avatar {
    .default-border-radius();
    .default-box-shadow();

    margin-left: @spacing;
    margin-bottom: (-@spacing);
    overflow: hidden;

    width: @nav-avatar-size;
    height: @nav-avatar-size;

    .js-nav-switch--active & {
      box-shadow: 0 0 0 @bar-size @yellow;
    }
  }

  &__col {
    flex: none;
    display: flex;
    align-items: flex-end;

    color: @grey-f;
    font-size: @font-size--large;
    font-weight: 300;

    &:focus,
    &:hover {
      color: @grey-f;
      text-decoration: none;
    }

    &--logo {
      height: 0;
      align-self: flex-start;
      margin-top: (-@spacing / 2);
      align-items: flex-start;
    }

    &--title {
      padding: 0 @spacing;
      flex: 1 0 auto;
    }
  }

  &__highlight-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: 0;

    .js-nav-switch--active & {
      opacity: 1;
    }
  }

  &__title {
    padding-bottom: (@spacing / 2);
    display: flex;
    align-items: flex-end;
  }

  &__title-separator {
    display: inline-block;
    margin: 0 @spacing;
    opacity: 0.5;
  }
}


Additional css changes

Additional css changes

// GENERAL
.game-board {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 55px;
  display: flex;
  justify-content: space-between;
}

.main-window {
  display: flex;
  flex-direction: row;
}

.card-pile {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.player-home-row .card-pile.horizontal {
    margin-bottom: auto;
    margin-top: auto;
}

.popup {
  z-index: @layer-card-menu;

  .inner {
    display: flex;
    flex-wrap: wrap;
  }

  a {
    display: inline-block;
    margin: 0 10px 8px 4px;
    text-decoration: none;

    &:hover {
      color: @brand-info;
      cursor: pointer;
    }
  }
}

.select-cursor {
  cursor: url(/img/crosshairs.cur), default;
}

// LEFT SIDE
.left-side {
  width: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.player-stats {
  width: 144px;
}

.player-stats b {
  max-width: calc(~"100% - 40px");
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.state {
  height: 27px;

  span {
    padding-right: 5px;
  }
}

.btn-stat {
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  height: 22px;
  width: 22px;
  background-color: transparent;
  //border-color: black;
  color: white;
}

.btn-stat:hover {
  background-color: rgba(0,128,0,0.35);
  border-color: @brand-primary;
  color: white;
}

.btn-stat:focus {
  outline: 0px;
  color: white;
}

.deck-info {
  display: flex;
  flex-direction: column;
}

.player-info.our-side .deck-info {
  justify-content: flex-end;
}

.deck-type {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.first-player-indicator {
  margin: 5px 7px;
  padding: 5px;
  text-align: center;
  background: rgba(183, 183, 183, 0.12);
  border-radius: 0.25rem;
  border: 1px solid rgba(128, 128, 128, 0.53);
}

.middle {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.plots-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.plot-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }
}

.plot {
  margin: 5px;

  .popup.panel {
    position: absolute;
    width: 200px;
    min-height: 92px;
    left: 75px;
    top: 0;
    transform: translateY(-50%);
    background-color: black;
    &.hidden {
      display: none;
    }
  }

  // &:hover > .popup.panel.hidden, .popup.panel.hidden:hover {
  //   display: block !important;
  // }
}

.arrow-indicator {
  position: absolute;
  left: -10px;
  top: calc(~"50% + 10px");
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: black;
  transform: rotate(45deg);
  border: 1px solid rgba(71, 58, 56, 0.95);
  border-top: none;
  border-right: none;
}

.middle-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inset-pane {
  display: flex;
  flex-direction: column;
  width: 210px;
  justify-content: space-between;
}

.inset-pane > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.menu-pane-source {
  background: rgba(160, 160, 160, 0.25);
  font-size: 14px;
  font-weight: normal;
  margin: 0 5px;
  padding: 4px;
  text-align: center;
}

.menu-pane {
  text-align: center;
  z-index: @layer-prompt;
}

.menu-pane .panel {
  margin-top: 0;
  padding-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.menu-pane button {
  width: 100%;
  margin-bottom: 5px;
  white-space: normal;
}

.phase-indicator {
  margin: 5px;
  margin-bottom: 0;
  padding: 1px;
  border: 1px solid @header-border;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  background: @header-background;
  text-align: center;
  text-transform: uppercase;
  width: 200px !important;
  position: relative;
}

span.up-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

span.down-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

.schemes-pane {
  display: flex;
  flex-direction: row;
  margin: 5px;
  margin-top: 0;
}

// CENTER
.center {
  flex-direction: column;
  display: flex;
}

.play-area, .player-board {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.player-board {
  margin: 10px;
}

.player-board.our-side > div:first-child {
  margin-top: auto;
}

.player-home-row {
  display: flex;
  height: 100px;
}

.deck-cards {
  display: flex;
  height: 100px;
}

.hand {
  height: @card-height;
  width: 480px;
  padding: 0px;
}

.hand.squish .card-wrapper {
  position: absolute;
}

.discard .popup {
  position: absolute;
  left: -100px;
  top: 85px;
  bottom: initial;
  width: 500px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 110px;
  }

  &.our-side {
    top: initial;
    bottom: 85px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.player-home-row .additional-cards .popup {
  position: absolute;
  left: -380px;
  top: 65px;
  bottom: initial;
  width: 465px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 400px;
  }

  &.our-side {
    top: initial;
    bottom: 70px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.dead .popup {
  position: absolute;
  left: -90px;
  top: 65px;
  bottom: initial;
  width: 465px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 100px;
  }

  &.our-side {
    top: initial;
    bottom: 70px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.draw {
  .popup {
    left: -271px;
    position: absolute;
    bottom: 85px;
    width: 590px;
    min-height: 92px;

    .card {
      margin: 2px;
    }
  }

  .inner {
    height: 450px;
    overflow-y: scroll;
  }
}

.card-row, .hand {
  display: flex;
  justify-content: flex-start;
}

.card-row .card.horizontal {
  margin-bottom: @card-height - @card-width;
}

.player-board .card-wrapper {
  margin-right: 10px;
  margin-bottom: 5px;
}

//RIGHT SIDE
.right-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 312px;
}

.chat {
  width: 100%;
}

.honor-fan {
  position: relative;
  margin: 5px;
  padding: 5px 10px;
}

img.honor-fan-value {
  background-image: url(/img/honorfan.png);
}

.ring-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-panel {
  width: 150px;
  height: 300px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ring {
  flex: 1;
}

.ring-info {
  flex: 1;
}

img.ring {
  padding: 5px;
}

div.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
}

div.placeholder .panel-header {
  background: #efeade;
  padding: 0px;
}

.province-deck {
  margin: 5px;
  //display: flex;
  //flex: 1;
  //flex-direction: column;
  //justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }

  .popup.panel {
    position: absolute;
    width: 230px;
    min-height: 92px;
    left: 75px;
    top: 0;
    transform: translateY(-50%);
    &.hidden {
      display: none;
    }
  }
}

.province {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

// GENERAL
.game-board {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 55px;
  display: flex;
  justify-content: space-between;
}

.main-window {
  display: flex;
  flex-direction: row;
}

.card-pile {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.player-home-row .card-pile.horizontal {
    margin-bottom: auto;
    margin-top: auto;
}

.popup {
  z-index: @layer-card-menu;

  .inner {
    display: flex;
    flex-wrap: wrap;
  }

  a {
    display: inline-block;
    margin: 0 10px 8px 4px;
    text-decoration: none;

    &:hover {
      color: @brand-info;
      cursor: pointer;
    }
  }
}

.select-cursor {
  cursor: url(/img/crosshairs.cur), default;
}

// LEFT SIDE
.left-side {
  width: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.player-stats {
  width: 144px;
}

.player-stats b {
  max-width: calc(~"100% - 40px");
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.state {
  height: 27px;

  span {
    padding-right: 5px;
  }
}

.btn-stat {
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  height: 22px;
  width: 22px;
  background-color: transparent;
  //border-color: black;
  color: white;
}

.btn-stat:hover {
  background-color: rgba(0,128,0,0.35);
  border-color: @brand-primary;
  color: white;
}

.btn-stat:focus {
  outline: 0px;
  color: white;
}

.deck-info {
  display: flex;
  flex-direction: column;
}

.player-info.our-side .deck-info {
  justify-content: flex-end;
}

.deck-type {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.first-player-indicator {
  margin: 5px 7px;
  padding: 5px;
  text-align: center;
  background: rgba(183, 183, 183, 0.12);
  border-radius: 0.25rem;
  border: 1px solid rgba(128, 128, 128, 0.53);
}

.middle {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.plots-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.plot-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }
}

.plot {
  margin: 5px;

  .popup.panel {
    position: absolute;
    width: 200px;
    min-height: 92px;
    left: 75px;
    top: 0;
    transform: translateY(-50%);
    background-color: black;
    &.hidden {
      display: none;
    }
  }

  // &:hover > .popup.panel.hidden, .popup.panel.hidden:hover {
  //   display: block !important;
  // }
}

.arrow-indicator {
  position: absolute;
  left: -10px;
  top: calc(~"50% + 10px");
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: black;
  transform: rotate(45deg);
  border: 1px solid rgba(71, 58, 56, 0.95);
  border-top: none;
  border-right: none;
}

.middle-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inset-pane {
  display: flex;
  flex-direction: column;
  width: 210px;
  justify-content: space-between;
}

.inset-pane > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.menu-pane-source {
  background: rgba(160, 160, 160, 0.25);
  font-size: 14px;
  font-weight: normal;
  margin: 0 5px;
  padding: 4px;
  text-align: center;
}

.menu-pane {
  text-align: center;
  z-index: @layer-prompt;
}

.menu-pane .panel {
  margin-top: 0;
  padding-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.menu-pane button {
  width: 100%;
  margin-bottom: 5px;
  white-space: normal;
}

.phase-indicator {
  margin: 5px;
  margin-bottom: 0;
  padding: 1px;
  border: 1px solid @header-border;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  background: @header-background;
  text-align: center;
  text-transform: uppercase;
  width: 200px !important;
  position: relative;
}

span.up-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

span.down-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

.schemes-pane {
  display: flex;
  flex-direction: row;
  margin: 5px;
  margin-top: 0;
}

// CENTER
.center {
  flex-direction: column;
  display: flex;
}

.play-area, .player-board {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.player-board {
  margin: 10px;
}

.player-board.our-side > div:first-child {
  margin-top: auto;
}

.player-home-row {
  display: flex;
  height: 100px;
}

.deck-cards {
  display: flex;
  height: 100px;
}

.hand {
  height: @card-height;
  width: 480px;
  padding: 0px;
}

.hand.squish .card-wrapper {
  position: absolute;
}

.discard .popup {
  position: absolute;
  left: -100px;
  top: 85px;
  bottom: initial;
  width: 500px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 110px;
  }

  &.our-side {
    top: initial;
    bottom: 85px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.player-home-row .additional-cards .popup {
  position: absolute;
  left: -380px;
  top: 65px;
  bottom: initial;
  width: 465px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 400px;
  }

  &.our-side {
    top: initial;
    bottom: 70px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.dead .popup {
  position: absolute;
  left: -90px;
  top: 65px;
  bottom: initial;
  width: 465px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 100px;
  }

  &.our-side {
    top: initial;
    bottom: 70px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.draw {
  .popup {
    left: -271px;
    position: absolute;
    bottom: 85px;
    width: 590px;
    min-height: 92px;

    .card {
      margin: 2px;
    }
  }

  .inner {
    height: 450px;
    overflow-y: scroll;
  }
}

.card-row, .hand {
  display: flex;
  justify-content: flex-start;
}

.card-row .card.horizontal {
  margin-bottom: @card-height - @card-width;
}

.player-board .card-wrapper {
  margin-right: 10px;
  margin-bottom: 5px;
}

//RIGHT SIDE
.right-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 312px;
}

.chat {
  width: 100%;
}

.honor-fan {
  position: relative;
  margin: 5px;
  padding: 5px 10px;
}

img.honor-fan-value {
  background-image: url(/img/honorfan.png);
}

.ring-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-panel {
  width: 150px;
  height: 300px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ring {
  flex: 1;
}

.ring-info {
  flex: 1;
}

img.ring {
  padding: 5px;
}

div.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
}

div.placeholder .panel-header {
  background: #efeade;
  padding: 0px;
}

.province-deck {
  margin: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }

  .popup.panel {
    position: absolute;
    width: 230px;
    min-height: 92px;
    left: 75px;
    top: 0;
    transform: translateY(-50%);
    background-color: black;
    &.hidden {
      display: none;
    }
  }
}

.province {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}


increased default font size

increased default font size

/* Content.less */

@font-family: Verdana, Arial, Helvetica, sans-serif;
@font-size: 14px;

body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: @font-family;
	font-size: @font-size;
	scrollbar-3dlight-color: #F0F0EE;
	scrollbar-arrow-color: #676662;
	scrollbar-base-color: #F0F0EE;
	scrollbar-darkshadow-color: #DDDDDD;
	scrollbar-face-color: #E0E0DD;
	scrollbar-highlight-color: #F0F0EE;
	scrollbar-shadow-color: #F0F0EE;
	scrollbar-track-color: #F5F5F5;
}

td, th {
	font-family: @font-family;
	font-size: @font-size;
}

@import "Mixins.less";
@import "Content.Objects.less";

/* Content.less */

@font-family: Verdana, Arial, Helvetica, sans-serif;
@font-size: 11px;

body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: @font-family;
	font-size: @font-size;
	scrollbar-3dlight-color: #F0F0EE;
	scrollbar-arrow-color: #676662;
	scrollbar-base-color: #F0F0EE;
	scrollbar-darkshadow-color: #DDDDDD;
	scrollbar-face-color: #E0E0DD;
	scrollbar-highlight-color: #F0F0EE;
	scrollbar-shadow-color: #F0F0EE;
	scrollbar-track-color: #F5F5F5;
}

td, th {
	font-family: @font-family;
	font-size: @font-size;
}

@import "Mixins.less";
@import "Content.Objects.less";


Add variables.less

Add variables.less

@import "ui-variables";
@import "syntax-variables";

@separator-border-color: contrast(@pane-item-background-color, fade(@pane-item-border-color, 20%), @pane-item-border-color);

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


Banner Styling

Banner Styling

- Modified banner styles to cover the full width with the background
image

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


uncommented @import alert

uncommented @import alert

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


added font.less

added font.less


mobile nav styles fixed

mobile nav styles fixed

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/Stejnar/compressor-angular2.git/'


adds corrections

adds corrections


do not apply notification color when there are no notifications

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/cudim/pages-plugin.git/'


Add a class which overrides the text transform rule, to set text to initial


move layout styles to separate file,

move layout styles to separate file,

.container {
    position: relative;
    padding: 0 @page-padding-horizontal;
    margin: 0 auto;
    box-sizing: border-box;
}

.container-boxed {
    position: relative;
    max-width: 960px !important;
    padding: 0;
    box-sizing: border-box;
}

@media screen and (max-width: @screen-lg-max) {
    .container-boxed {
        padding: 0 @page-padding-horizontal;
    }
}

// --------------------------

/*  GRID ROW  */
.row {
	clear: both;
	padding: 0px;
    margin: 0px;

    /*  GROUPING  */
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

/*  COLUMNS  */
.col {
	display: block;
	float: left;
    margin: 1% 0 1% 4%; // 1.6%;

    &:first-child {
        margin-left: 0;
    }
}

/*  GRID OF THREE  */
.span-3 {
	width: 100%;
}
.span-2 {
	width: 64%; // 66.1%;
}
.span-1 {
	width: 31.5%; // 32.2%;
}
.span-half {
	width: 47.5%;
}

@media only screen and (max-width: @screen-sm-max) {
	.col { margin: 1% 0 1% 0%;}
	.span-3, .span-2, .span-1, .span-half { width: 100%; }
}

error: pathspec 'templates/zebra/src/less/layout.less' did not match any file(s) known to git


Keep embed preview ratio

Keep embed preview ratio

@import (reference) "../../styles/custom.less";

.PostFeedEmbed {
  position: relative;
  margin: 4px 0;
  cursor: pointer;
  background-color: #000000;

  &__playButton {
    margin: 0 !important;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    background: fade(@primary-color, 60%);

    & .iconfont {
      margin: auto;
      font-size: 6em;
      color: @white;
    }
  }

  &__preview {
    display: block;
    max-width: 100%;
    max-height: 400px;
    margin: 0 auto;
  }
}

@import (reference) "../../styles/custom.less";

.PostFeedEmbed {
  position: relative;
  margin: 4px 0;
  cursor: pointer;
  background-color: #000000;

  &__playButton {
    margin: 0 !important;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    background: fade(@primary-color, 60%);

    & .iconfont {
      margin: auto;
      font-size: 6em;
      color: @white;
    }
  }

  &__preview {
    width: 100% !important;
    max-height: 400px;
  }
}


quick css fix for multiselect overflow

quick css fix for multiselect overflow

.md-select-value *:first-child {
  white-space: normal;
  flex: 1 0;
  line-height: 24px;
}

error: pathspec 'src/daily-report/directives/select-goals/style.less' did not match any file(s) known to git


Remove inline-block span from pre (#12461)

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


Fix video not scrubbable without selecting something first

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


Delete account.less

Delete account.less

error: pathspec '[["static"]]/src/less/account.less' did not match any file(s) known to git


Remove unneeded styles

Remove unneeded styles

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


Applying medium styles to mobile screens

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


Keyframes for motion opacity

Keyframes for motion opacity


Checklist pattern heading consistency

Checklist pattern heading consistency

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


Don't forget styles

Don't forget styles

.map-add-lot-parent {
    background-color: white;
    display: none;
    position: absolute;
    z-index: 5000;

    &.on {
        display: block;
    }
}

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


Added center-block, clearfix, text-truncate

// Utilities

// Table of contents:
// - Center Block
// - Clearfix
// - Text Truncate

// Center Block
.center-block {
    display: block;

     margin-left: auto;
    margin-right: auto;
}

// Clearfix
// This is not a mixin but a class because in this way it's easier to use directly in HTML
//
// // Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
.clearfix {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

// Text Truncate
// Requires inline-block or block for proper styling
.text-truncate(@truncate-model: ellipsis) {
    overflow: hidden;
    text-overflow: @truncate-model;
    white-space: nowrap;
}

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


Removed placeholder code

Removed placeholder code

@import '../abstracts/font.less';
@import '../abstracts/colors.less';

body,
p {
  font-family: @font-family-sans;
  font-size: @font-size-sm;
  line-height: @line-height-base;
  color: @text-color;
}

table,
td,
th,
form,
input,
textarea,
select {
  font-size: @font-size-sm;
}

// Reset monospaced font-size, because browsers reduce it by default to ~81%
pre,
code,
kbd,
samp,
tt {
  font-size: @font-size-monospace;
}

/*
 * Headings
 */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  line-height: @line-height-heading;
  font-weight: bold;
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

h1,
.h1 {
  font-size: 2rem;
}

h2,
.h2 {
  font-size: 1.75rem;
}

h3,
.h3 {
  font-size: 1.5rem;
}

h4,
.h4 {
  font-size: 1.25rem;
}

h5,
.h5 {
  font-size: 1rem;
}

h6,
.h6 {
  font-size: 0.875;
}

@import '../abstracts/font.less';
@import '../abstracts/colors.less';

body,
p {
  font-family: @font-family-sans;
  font-size: @font-size-sm;
  line-height: @line-height-base;
  color: @text-color;
}

@media screen and (min-width: 1600px) {
}

@media screen and (min-width: 1600px) {
}

table,
td,
th,
form,
input,
textarea,
select {
  font-size: @font-size-sm;
}

// Reset monospaced font-size, because browsers reduce it by default to ~81%
pre,
code,
kbd,
samp,
tt {
  font-size: @font-size-monospace;
}

/*
 * Headings
 */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  line-height: @line-height-heading;
  font-weight: bold;
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

h1,
.h1 {
  font-size: 2rem;
}

h2,
.h2 {
  font-size: 1.75rem;
}

h3,
.h3 {
  font-size: 1.5rem;
}

h4,
.h4 {
  font-size: 1.25rem;
}

h5,
.h5 {
  font-size: 1rem;
}

h6,
.h6 {
  font-size: 0.875;
}


Add missing file

Add missing file

.menu {
    text-align: center;
    background-color: @clouds;

    .btn-group {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

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


RESPONSIVE VIDEOS FIX #73

RESPONSIVE VIDEOS FIX #73

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/real-pants/Real-Pants.git/'


Disable color of floating bar with readonly field

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/sonatra/sonatra-theme-gluon.git/'


changed the top padding to 4px (it was 5px)


collapse img på listen i small view

collapse img på listen i small view

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/Det-Kongelige-Bibliotek/rex.git/'


add common.less

add common.less

@handler-label-size: 3rem;

@link-color: #fff;
@button-size: 3rem;

html, body, .component.navigation {
    height: 100%;
}

body {
    &, & > .content-container {
        display: flex;
    }

    margin: 0;
    padding: 0;

    font-family: monospace;

    background: linear-gradient(to bottom, rgb(32, 23, 99) 0%, rgb(31, 19, 95) 40%, #a94442 100%) center center / cover fixed;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

a {
    text-decoration: none;

    &:active, &:link, &:visited, &:hover {
        color: @link-color;
    }
}

@media all and (min-width: 1440px) {
    html {
        font-size: 24px;
    }
}

@media all and (min-width: 1100px) and (min-width: 1339px) {
    html {
        font-size: 18px;
    }
}

@media all and (max-width: 1099px) and (min-width: 960px) {
    html {
        font-size: 14px;
    }
}

@media all and (max-width: 959px) and (min-width: 600px) {
    html {
        font-size: 12px;
    }
}

@media all and (max-width: 599px) and (min-width: 320px) {
    html {
        font-size: 10px;
    }
}

@media all and (max-width: 319px) {
    html {
        font-size: 8px;
    }
}

.btn, .wrapper.navigation {
    width: @button-size;
}

.btn {
    display: inline-block;
    color: @link-color;
    height: @button-size;
    width: @button-size;
    line-height: @button-size;
    font-size: @button-size;
    text-align: center;

    cursor: pointer;
}

.handler {
    height: 100vh;
    width: 100vw;
    position: relative;

    &.content {
        width: 100%;
    }

    &.label {
        font-size: @handler-label-size / 2;
        line-height: @handler-label-size;
        height: @handler-label-size;

        color: white;
        text-transform: lowercase;
        border: none;
        border-bottom: 1px solid white;
        margin: 0 0 2rem 0;
        position: relative;

        sub {
            font-size: @handler-label-size / 4;
        }
    }
}

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


OR-312 Add padding to media-object

OR-312 Add padding to media-object

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/heroandtn3/openpaas-esn.git/'


CAL-37 add min-width to autocompleted images (attendees) for Firefox


Create msie.less

Create msie.less

.msie(@versions; @rules) {
  .each(@versions, {

    & when(@item < 11) {
      .msie@{item} & {
        @rules();
      }
    }

    & when(@item = 11) {
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        ::-ms-backdrop, & {
          @rules();
        }
      }
    }
  });
}

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


fix border

fix border

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