Fix 1-button state logout position

Fix 1-button state logout position

//////////////////// MIXINS

// Minimal, well-documented, general-purpose CSS mixins.
// (Some are same as Bootstrap.)

////////// Box-Sizing: Border-Box

// Setting `box-sizing: border-box` on an element causes the CSS
// layout algorithm to interpret `width` and `height` declarations
// as referring to the size of the border box (outside the border),
// not the content box as usual (inside the padding).
//
// This is especially useful for stretching a form element to the
// width of its container even if the form element has arbitrary
// padding and borders, which can be done using `width: 100%`.
//
// Browser support is IE 8+ and all modern browsers, with the caveat
// that `-moz-box-sizing` in Firefox is considered to have some
// buggy or non-compliant behavior.  For example, min/max-width/height
// may not interact correctly.  Box-sizing is thus not a feature to
// base a major layout system around.
//
// See https://bugzilla.mozilla.org/show_bug.cgi?id=243412.
.box-sizing-by-border () {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

////////// Border-Radius

// These vendor prefixes should be sufficient.  For example, an Opera
// prefix is not necessary.

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.border-top-left-radius(@radius) {
  -webkit-border-top-left-radius: @radius;
  -moz-border-radius-topleft: @radius;
  border-top-left-radius: @radius;
}

.border-top-right-radius(@radius) {
  -webkit-border-top-right-radius: @radius;
  -moz-border-radius-topright: @radius;
  border-top-right-radius: @radius;
}

.border-bottom-right-radius(@radius) {
  -webkit-border-bottom-right-radius: @radius;
  -moz-border-radius-bottomright: @radius;
  border-bottom-right-radius: @radius;
}

.border-bottom-left-radius(@radius) {
  -webkit-border-bottom-left-radius: @radius;
  -moz-border-radius-bottomleft: @radius;
  border-bottom-left-radius: @radius;
}

////////// Box-Shadow

.box-shadow (...) {
    box-shadow: @arguments;
}

////////// Display: Inline-block

.display-inline-block () {
  display: inline-block;

  // IE 7 hacks:
  //*display: inline;
  //*zoom: 1;
}

////////// Gradients

.vertical-gradient (@topColor: #fff, @bottomColor: #000) {
    // Fallback in absence of gradients
    background-color: mix(@topColor, @bottomColor, 60%);
    // FF 3.6+
    background-image: -moz-linear-gradient(top, @topColor, @bottomColor);
    // Safari 4+, Chrome 2+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@topColor), to(@bottomColor));
    // Safari 5.1+, Chrome 10+
    background-image: -webkit-linear-gradient(top, @topColor, @bottomColor);
    // Opera 11.10
    background-image: -o-linear-gradient(top, @topColor, @bottomColor);
    // Standard, IE10
    background-image: linear-gradient(to bottom, @topColor, @bottomColor);
    background-repeat: repeat-x;
     // IE9 and down
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(topColorstr='%d', bottomColorstr='%d', GradientType=0)",argb(@topColor),argb(@bottomColor)));
}

.reset-ie-gradient () {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

////////// Unselectable

.unselectable () {
    -webkit-user-select: none; // Chrome/Safari
    -moz-user-select: none; // Firefox
    -ms-user-select: none; // IE10+

    // These delarations not implemented in browsers yet:
    -o-user-select: none;
    user-select: none;

    // In IE <= 9 and Opera, need unselectable="on" in the HTML.
}

//////////////////// LOGIN BUTTONS

@login-buttons-accounts-dialog-width: 178px;
#login-buttons {

  .display-inline-block();

  .login-header {
    display: inline-block;
    padding-right: 2px;
    line-height: 1.5;
    font-family: 'Helvetica Neue', Helvetica, Arial, default;
  }
  .loading {
    width: 24px;
    height: 24px;
    background-image: url(data:image/gif;base64,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);
  }
}

#login-buttons .login-button, .accounts-dialog .login-button {
    display: inline-block;
    cursor: pointer;
    .unselectable();
    padding: 2px 8px;
    height: 20px;

    font-size: 80%;
    font-family: 'Helvetica Neue', Helvetica, Arial, default;
    line-height: 1.5;

    text-align: center;

    .border-radius(4px);

    color: #ffffff;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);

    @topColor: #a5acc9;
    @bottomColor: #616884;
    .vertical-gradient(@topColor, @bottomColor);
    border: 1px solid mix(@bottomColor, #000, 60%);
    .box-shadow(0 1px 1px rgba(255, 255, 255, 0.5) inset);
    &:active {
      .box-shadow(none);
      .vertical-gradient(mix(@bottomColor, @topColor, 30%),
                         mix(@bottomColor, #000, 80%));
    }

    &.login-button-disabled, &.login-button-disabled:active {
        color: #ddd;
        .box-shadow(none);
        background: #999;
    }
}

// precendence of this selector is significant
.accounts-dialog * {
    // A base for our dialog CSS, to reset browser styles and protect against
    // the app's CSS.  Dialogs include the dropdown, config modals, and the
    // reset password modal.  We can't completely isolate the dialogs from
    // the app's CSS, and that isn't the goal because the app can style them.
    // This rule is a compromise that should take precedence over some very
    // broad rules but be overridden by more specific ones.

    // Add more declarations here if they help the dialogs look good
    // out-of-the-box in more apps.

  padding: 0;
  margin: 0;
  line-height: inherit;
  color: inherit;
  font: inherit;
}

.accounts-dialog .login-button {
    display: block;
    width: auto;
    margin-bottom: 4px;
}

#login-buttons {
  .login-header { margin-right: 4px; }
  .configure-button {
    font-size: 12px;
    line-height: 20px;
    margin-top: 6px;
    margin-bottom: 6px;

    .vertical-gradient(#f53, #f22);
    text-decoration: underline;
    text-shadow: none;
    border: none;
    .box-shadow(0 1px 3px rgba(0,0,0,0.5));

    &:active { background: #b10; .box-shadow(0 1px 3px rgba(0,0,0,0.5) inset); }
  }

  .login-link-text {
    margin-left: 5px; /* so that other elements aren't too close */
  }

  .login-image {
    float: left;
    margin: 2px 5px 2px 0px;
    width: 16px;
    height: 16px;
  }

  .no-services { color: red; }

  .login-link-and-dropdown-list {
    right: 5px;
    position: relative;
  }
  .login-close-text {
    float: left;
    position: relative;
    left: 1px; /* = #login-buttons.border-width */
    padding-bottom: 3px;
  }

  .login-close-text-clear { clear: both; }

  .or { text-align: center; }
  .hline { text-decoration: line-through; color: lightgrey; }
  .or-text { font-weight: bold; }

  #signup-link { float: right; }
  #forgot-password-link { float: left; }
  #back-to-login-link { float: right; }
}

#login-buttons a, .accounts-dialog a {
    cursor: pointer;
    text-decoration: underline;
}

.login-buttons-dropdown-hangs-left #login-buttons .login-close-text {
    float: right;
}

@meteor-accounts-base-padding: 8px;

.accounts-dialog {
  border: 1px solid #666;
  z-index: 1000;
  background: white;

  .box-shadow(0 3px 6px 1px rgba(0, 0, 0, 0.3));
  .border-radius(4px);

  padding: 8px 16px;
  margin: -10px 0 0 -16px;

  width: @login-buttons-accounts-dialog-width;

  // Labels and links inherit app's font with this line commented out:
  //font-family: 'Helvetica Neue', Helvetica, Arial, default;
  font-size: 16px;
  color: #333;
  line-height: 1.6;

  label, .title {
    font-weight: bold;
    font-size: 80%;
  }
  input {
    // Be compatible with Bootstrap and apps that customize padding
    // and border on inputs.  Be pixel-accurate in IE 8+.
    .box-sizing-by-border();
    width: 100%;
    // Given that any `height` declaration will describe the total
    // height including padding, prop the text field open a little
    // bit if there is a small specified height.
    // This plays nice with Bootstrap.
    min-height: 30px;
  }

  .login-button-form-submit { margin-top: 8px; }
  .message { font-size: 80%; margin-top: 2px; }
  .error-message { color: red; }
  .info-message { color: green; }
  .additional-link { font-size: 60%; }

  #login-buttons-cancel-reset-password { float: right; }
  #login-buttons-cancel-enroll-account { float: right; }
}

#login-dropdown-list {
    position: absolute;
    top: 0px;
}

.login-buttons-dropdown-hangs-left #login-dropdown-list {
    right: 0px;
}

#login-buttons-message-dialog .message {
    /* we intentionally want it bigger on this dialog since it's the only thing displayed */
    font-size: 100%;
}

.accounts-centered-dialog {
    font-family: 'Helvetica Neue', Helvetica, Arial, default;

    z-index: 1000;
    position: fixed;

    left: 50%;
    margin-left: -(@login-buttons-accounts-dialog-width
                 + @meteor-accounts-base-padding) / 2;

    top: 50%;
    margin-top: -40px; /* = approximately -height/2, though height can change */
}

@configure-login-service-dialog-width: 530px;

#configure-login-service-dialog {
  width: @configure-login-service-dialog-width;
  margin-left: -(@configure-login-service-dialog-width
               + @meteor-accounts-base-padding) / 2;
  margin-top: -180px; /* = approximately -height/2, though height can change */

  table { width: 100%; }
  input {
    width: 100%;
    font-family: "Courier New", Courier, monospace;
  }
  ol {
    margin-top: 10px;
    margin-bottom: 10px;

    li { margin-left: 30px; }
  }
  .configuration_labels { width: 30%; }
  .configuration_inputs { width: 70%; }
  .new-section { margin-top: 10px; }
  .url { font-family: "Courier New", Courier, monospace; }
}

#configure-login-service-dialog-save-configuration {
  float: right;
}

#configure-login-service-dismiss-button {
  float: left;
}

#just-verified-dismiss-button, #messages-dialog-dismiss-button {
    margin-top: 4px;
}

.hide-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;

    /* XXX consider replacing with DXImageTransform */
    background-color: rgb(0.2, 0.2, 0.2); /* fallback for IE7-8 */

    background-color: rgba(0, 0, 0, 0.7);
}

input[type=text], input[type=password] {
  padding: 4px;
  border: 1px solid #999;
  line-height: 1;
}

//////////////////// MIXINS

// Minimal, well-documented, general-purpose CSS mixins.
// (Some are same as Bootstrap.)

////////// Box-Sizing: Border-Box

// Setting `box-sizing: border-box` on an element causes the CSS
// layout algorithm to interpret `width` and `height` declarations
// as referring to the size of the border box (outside the border),
// not the content box as usual (inside the padding).
//
// This is especially useful for stretching a form element to the
// width of its container even if the form element has arbitrary
// padding and borders, which can be done using `width: 100%`.
//
// Browser support is IE 8+ and all modern browsers, with the caveat
// that `-moz-box-sizing` in Firefox is considered to have some
// buggy or non-compliant behavior.  For example, min/max-width/height
// may not interact correctly.  Box-sizing is thus not a feature to
// base a major layout system around.
//
// See https://bugzilla.mozilla.org/show_bug.cgi?id=243412.
.box-sizing-by-border () {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

////////// Border-Radius

// These vendor prefixes should be sufficient.  For example, an Opera
// prefix is not necessary.

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.border-top-left-radius(@radius) {
  -webkit-border-top-left-radius: @radius;
  -moz-border-radius-topleft: @radius;
  border-top-left-radius: @radius;
}

.border-top-right-radius(@radius) {
  -webkit-border-top-right-radius: @radius;
  -moz-border-radius-topright: @radius;
  border-top-right-radius: @radius;
}

.border-bottom-right-radius(@radius) {
  -webkit-border-bottom-right-radius: @radius;
  -moz-border-radius-bottomright: @radius;
  border-bottom-right-radius: @radius;
}

.border-bottom-left-radius(@radius) {
  -webkit-border-bottom-left-radius: @radius;
  -moz-border-radius-bottomleft: @radius;
  border-bottom-left-radius: @radius;
}

////////// Box-Shadow

.box-shadow (...) {
    box-shadow: @arguments;
}

////////// Display: Inline-block

.display-inline-block () {
  display: inline-block;

  // IE 7 hacks:
  //*display: inline;
  //*zoom: 1;
}

////////// Gradients

.vertical-gradient (@topColor: #fff, @bottomColor: #000) {
    // Fallback in absence of gradients
    background-color: mix(@topColor, @bottomColor, 60%);
    // FF 3.6+
    background-image: -moz-linear-gradient(top, @topColor, @bottomColor);
    // Safari 4+, Chrome 2+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@topColor), to(@bottomColor));
    // Safari 5.1+, Chrome 10+
    background-image: -webkit-linear-gradient(top, @topColor, @bottomColor);
    // Opera 11.10
    background-image: -o-linear-gradient(top, @topColor, @bottomColor);
    // Standard, IE10
    background-image: linear-gradient(to bottom, @topColor, @bottomColor);
    background-repeat: repeat-x;
     // IE9 and down
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(topColorstr='%d', bottomColorstr='%d', GradientType=0)",argb(@topColor),argb(@bottomColor)));
}

.reset-ie-gradient () {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

////////// Unselectable

.unselectable () {
    -webkit-user-select: none; // Chrome/Safari
    -moz-user-select: none; // Firefox
    -ms-user-select: none; // IE10+

    // These delarations not implemented in browsers yet:
    -o-user-select: none;
    user-select: none;

    // In IE <= 9 and Opera, need unselectable="on" in the HTML.
}

//////////////////// LOGIN BUTTONS

@login-buttons-accounts-dialog-width: 178px;
#login-buttons {

  .display-inline-block();

  .login-header {
    padding-right: 2px;
    line-height: 1.5;
    font-family: 'Helvetica Neue', Helvetica, Arial, default;
  }
  .loading {
    width: 24px;
    height: 24px;
    background-image: url(data:image/gif;base64,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);
  }
}

#login-buttons .login-button, .accounts-dialog .login-button {
    cursor: pointer;
    .unselectable();
    padding: 2px 8px;
    height: 20px;

    font-size: 80%;
    font-family: 'Helvetica Neue', Helvetica, Arial, default;
    line-height: 1.5;

    text-align: center;

    .border-radius(4px);

    color: #ffffff;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);

    @topColor: #a5acc9;
    @bottomColor: #616884;
    .vertical-gradient(@topColor, @bottomColor);
    border: 1px solid mix(@bottomColor, #000, 60%);
    .box-shadow(0 1px 1px rgba(255, 255, 255, 0.5) inset);
    &:active {
      .box-shadow(none);
      .vertical-gradient(mix(@bottomColor, @topColor, 30%),
                         mix(@bottomColor, #000, 80%));
    }

    &.login-button-disabled, &.login-button-disabled:active {
        color: #ddd;
        .box-shadow(none);
        background: #999;
    }
}

// precendence of this selector is significant
.accounts-dialog * {
    // A base for our dialog CSS, to reset browser styles and protect against
    // the app's CSS.  Dialogs include the dropdown, config modals, and the
    // reset password modal.  We can't completely isolate the dialogs from
    // the app's CSS, and that isn't the goal because the app can style them.
    // This rule is a compromise that should take precedence over some very
    // broad rules but be overridden by more specific ones.

    // Add more declarations here if they help the dialogs look good
    // out-of-the-box in more apps.

  padding: 0;
  margin: 0;
  line-height: inherit;
  color: inherit;
  font: inherit;
}

.accounts-dialog .login-button {
    display: block;
    width: auto;
    margin-bottom: 4px;
}

#login-buttons {
  .login-header { margin-right: 4px; }
  .configure-button {
    font-size: 12px;
    line-height: 20px;
    margin-top: 6px;
    margin-bottom: 6px;

    .vertical-gradient(#f53, #f22);
    text-decoration: underline;
    text-shadow: none;
    border: none;
    .box-shadow(0 1px 3px rgba(0,0,0,0.5));

    &:active { background: #b10; .box-shadow(0 1px 3px rgba(0,0,0,0.5) inset); }
  }

  .login-link-text {
    margin-left: 5px; /* so that other elements aren't too close */
  }

  .login-image {
    float: left;
    margin: 2px 5px 2px 0px;
    width: 16px;
    height: 16px;
  }

  .no-services { color: red; }

  .login-link-and-dropdown-list {
    right: 5px;
    position: relative;
  }
  .login-close-text {
    float: left;
    position: relative;
    left: 1px; /* = #login-buttons.border-width */
    padding-bottom: 3px;
  }

  .login-close-text-clear { clear: both; }

  .or { text-align: center; }
  .hline { text-decoration: line-through; color: lightgrey; }
  .or-text { font-weight: bold; }

  #signup-link { float: right; }
  #forgot-password-link { float: left; }
  #back-to-login-link { float: right; }
}

#login-buttons a, .accounts-dialog a {
    cursor: pointer;
    text-decoration: underline;
}

.login-buttons-dropdown-hangs-left #login-buttons .login-close-text {
    float: right;
}

@meteor-accounts-base-padding: 8px;

.accounts-dialog {
  border: 1px solid #666;
  z-index: 1000;
  background: white;

  .box-shadow(0 3px 6px 1px rgba(0, 0, 0, 0.3));
  .border-radius(4px);

  padding: 8px 16px;
  margin: -10px 0 0 -16px;

  width: @login-buttons-accounts-dialog-width;

  // Labels and links inherit app's font with this line commented out:
  //font-family: 'Helvetica Neue', Helvetica, Arial, default;
  font-size: 16px;
  color: #333;
  line-height: 1.6;

  label, .title {
    font-weight: bold;
    font-size: 80%;
  }
  input {
    // Be compatible with Bootstrap and apps that customize padding
    // and border on inputs.  Be pixel-accurate in IE 8+.
    .box-sizing-by-border();
    width: 100%;
    // Given that any `height` declaration will describe the total
    // height including padding, prop the text field open a little
    // bit if there is a small specified height.
    // This plays nice with Bootstrap.
    min-height: 30px;
  }

  .login-button-form-submit { margin-top: 8px; }
  .message { font-size: 80%; margin-top: 2px; }
  .error-message { color: red; }
  .info-message { color: green; }
  .additional-link { font-size: 60%; }

  #login-buttons-cancel-reset-password { float: right; }
  #login-buttons-cancel-enroll-account { float: right; }
}

#login-dropdown-list {
    position: absolute;
    top: 0px;
}

.login-buttons-dropdown-hangs-left #login-dropdown-list {
    right: 0px;
}

#login-buttons-message-dialog .message {
    /* we intentionally want it bigger on this dialog since it's the only thing displayed */
    font-size: 100%;
}

.accounts-centered-dialog {
    font-family: 'Helvetica Neue', Helvetica, Arial, default;

    z-index: 1000;
    position: fixed;

    left: 50%;
    margin-left: -(@login-buttons-accounts-dialog-width
                 + @meteor-accounts-base-padding) / 2;

    top: 50%;
    margin-top: -40px; /* = approximately -height/2, though height can change */
}

@configure-login-service-dialog-width: 530px;

#configure-login-service-dialog {
  width: @configure-login-service-dialog-width;
  margin-left: -(@configure-login-service-dialog-width
               + @meteor-accounts-base-padding) / 2;
  margin-top: -180px; /* = approximately -height/2, though height can change */

  table { width: 100%; }
  input {
    width: 100%;
    font-family: "Courier New", Courier, monospace;
  }
  ol {
    margin-top: 10px;
    margin-bottom: 10px;

    li { margin-left: 30px; }
  }
  .configuration_labels { width: 30%; }
  .configuration_inputs { width: 70%; }
  .new-section { margin-top: 10px; }
  .url { font-family: "Courier New", Courier, monospace; }
}

#configure-login-service-dialog-save-configuration {
  float: right;
}

#configure-login-service-dismiss-button {
  float: left;
}

#just-verified-dismiss-button, #messages-dialog-dismiss-button {
    margin-top: 4px;
}

.hide-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;

    /* XXX consider replacing with DXImageTransform */
    background-color: rgb(0.2, 0.2, 0.2); /* fallback for IE7-8 */

    background-color: rgba(0, 0, 0, 0.7);
}

input[type=text], input[type=password] {
  padding: 4px;
  border: 1px solid #999;
  line-height: 1;
}


Fixed cancel registration dialog (OTRS Sag-1029189).

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


added main less file

added main less file

// import core
@import "profiler-variables.less";

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


menu updates

menu updates

fatal: unable to access 'https://github.com/amazingBastard/sva-accreditation.git/': The requested URL returned error: 403


Bugfix: Cursor:pointer on myAccountNotes corrected.


Update index.less

Update index.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/NicolasAbarca/assignment.git/'


Fix indentation

Fix indentation

fatal: unable to access 'https://github.com/nanaya/osu-web.git/': The requested URL returned error: 403


commit

commit

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


v0.1.0-rc3

fatal: unable to access 'https://github.com/alv-ch/alv-ch-ng.git/': The requested URL returned error: 403


fix singular corner border-radius with two radius values

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


Show bookmarks instead of fold indicators unless hovering

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


Fix the overflow on the switch.

Fix the overflow on the switch.

It was looking pretty broken (at least in Firefox)

fatal: unable to access 'https://github.com/AkibaTech/boolean-field_type.git/': The requested URL returned error: 403


feat(style): update header appearance

feat(style): update header appearance

fatal: unable to access 'https://github.com/hjiang/1byte.io.git/': The requested URL returned error: 403


Fix overflow-x for code block.

Fix overflow-x for code block.

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/hjiang/1byte.io.git/'


Create test.less

Create test.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/SoumyaPM/DeliveryTracker.git/'


make ol colour consistent (bug 814946)

make ol colour consistent (bug 814946)

@import 'lib';

/************************************/
/*             TYPOGRAPHY           */
/************************************/

@font-face {
    font-family: 'MetaBlack';
    src: url(../../css/impala/fonts/MetaWebPro-Black.woff) format('woff');
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: @sans-stack;
    font-style: normal;
    font-size: 13px;
}

section + h1 {
    margin: 15px 0;
}

h1 {
    font: italic 24px @serif-stack;
    color: @red;
    margin-bottom: 16px;
}

h2 {
    font: italic 18px @serif-stack;
    color: @dark-gray;
}

hgroup {
    h2 {
        color: @medium-gray;
    }
    b {
        font-weight: bold;
    }
}

h4 {
    font-size: 14px;
}

blockquote {
    margin: 2em 1em;
    font-family: @sans-stack;
}

h5 {
    font-weight: bold;
    span {
        font-size: 0.857em;
        font-weight: normal;
        white-space: nowrap;
    }
}

pre, code, kbd, tt, samp, tt {
    font-family: @mono-stack;
}

pre {
    line-height: 1.4;
    white-space: pre-wrap;
}

.primary, .modal {
    p, ul, ol {
        color: @medium-gray;
        line-height: 1.3em;
    }
    p {
        margin-top: 1em;
    }
    > p:first-child {
        margin: 0;
    }
    ul {
        &.indent {
            list-style: disc inside;
            margin-left: 1em;
            margin-top: 1em;
        }
    }
    em {
        font-style: italic;
    }
}

.gutter {
    .secondary h3 {
        font-style: italic;
    }
}

.defaultlink {
    font: normal 12px @sans-stack;
    text-transform: none;
    margin-left: .5em;
}

.addon-details {
    .primary, .secondary {
        font-family: @serif-stack;
    }
}

.island, .modal, .popup {
    h2 {
        margin-bottom: .5em;
        .seeall {
            .defaultlink
        }
    }
    &.hero {
        h1 {
            margin-bottom: 5px;
        }
        hgroup {
            h3 {
                color: @medium-gray;
                font-size: 14px;
            }
            b {
                font-weight: bold;
            }
        }
        header + .item {
            border-top: 1px dotted @border-blue;
            margin-top: 1em;
        }
    }
}

.primary {
    > .seeall {
        text-align: center;
        clear: both;
        font-size: 14px;
        line-height: 22px;
    }
}

.secondary {
    h2 {
        font-family: @sans-stack;
        font-style: normal;
        font-weight: bold;
        text-transform: uppercase;
        color: @dark-gray;
        .seeall {
            .defaultlink
        }
    }
    h3 {
        font-family: @sans-stack;
        color: @dark-gray;
    }
}

.error {
    color: @red;
}

caption {
    display: none;
}

th {
    text-align: left;
}

.html-rtl th {
    text-align: right;
}

@import 'lib';

/************************************/
/*             TYPOGRAPHY           */
/************************************/

@font-face {
    font-family: 'MetaBlack';
    src: url(../../css/impala/fonts/MetaWebPro-Black.woff) format('woff');
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: @sans-stack;
    font-style: normal;
    font-size: 13px;
}

section + h1 {
    margin: 15px 0;
}

h1 {
    font: italic 24px @serif-stack;
    color: @red;
    margin-bottom: 16px;
}

h2 {
    font: italic 18px @serif-stack;
    color: @dark-gray;
}

hgroup {
    h2 {
        color: @medium-gray;
    }
    b {
        font-weight: bold;
    }
}

h4 {
    font-size: 14px;
}

blockquote {
    margin: 2em 1em;
    font-family: @sans-stack;
}

h5 {
    font-weight: bold;
    span {
        font-size: 0.857em;
        font-weight: normal;
        white-space: nowrap;
    }
}

pre, code, kbd, tt, samp, tt {
    font-family: @mono-stack;
}

pre {
    line-height: 1.4;
    white-space: pre-wrap;
}

.primary, .modal {
    p, ul {
        color: @medium-gray;
        line-height: 1.3em;
    }
    p {
        margin-top: 1em;
    }
    > p:first-child {
        margin: 0;
    }
    ul {
        &.indent {
            list-style: disc inside;
            margin-left: 1em;
            margin-top: 1em;
        }
    }
    em {
        font-style: italic;
    }
}

.gutter {
    .secondary h3 {
        font-style: italic;
    }
}

.defaultlink {
    font: normal 12px @sans-stack;
    text-transform: none;
    margin-left: .5em;
}

.addon-details {
    .primary, .secondary {
        font-family: @serif-stack;
    }
}

.island, .modal, .popup {
    h2 {
        margin-bottom: .5em;
        .seeall {
            .defaultlink
        }
    }
    &.hero {
        h1 {
            margin-bottom: 5px;
        }
        hgroup {
            h3 {
                color: @medium-gray;
                font-size: 14px;
            }
            b {
                font-weight: bold;
            }
        }
        header + .item {
            border-top: 1px dotted @border-blue;
            margin-top: 1em;
        }
    }
}

.primary {
    > .seeall {
        text-align: center;
        clear: both;
        font-size: 14px;
        line-height: 22px;
    }
}

.secondary {
    h2 {
        font-family: @sans-stack;
        font-style: normal;
        font-weight: bold;
        text-transform: uppercase;
        color: @dark-gray;
        .seeall {
            .defaultlink
        }
    }
    h3 {
        font-family: @sans-stack;
        color: @dark-gray;
    }
}

.error {
    color: @red;
}

caption {
    display: none;
}

th {
    text-align: left;
}

.html-rtl th {
    text-align: right;
}


configuration buttons mobile layout (#985)

Move text to the right of the buttons

(note that I have tested it in the browser but cannot test it with compiled CSS, so I might have a bug, but it's easy to test)

@import "variables.less";

@margin-desktop: 24%;
@margin-tablet: 13%;

.home-page {

  button {
    font-size: 1.3em;
    margin: 5px;
    @media @phone {
      width: 100%;
      font-size: 1em;
    }
    .small {
      text-transform: none;
    }
  }

  .site-intro {
    display: none;
    background-color: rgba(229, 229, 229, 0.3);
    @media @phone {
      height: auto;
      .route-activities {
        display: none;
      }
    }

    &.not-logged {
      background-image:url(../img/home/slide1.jpg);
      background-size: cover;
      background-position-y: 50%;
    }

    .welcome-title {
      margin-top: 50px;
      @media @phone {
        margin-top: 0;
        font-size: 2em;
      }
    }
    .welcome-title, p {
      padding: 10px;
      background-color: rgba(21, 50, 69, 0.3);
    }

    .intro-banner {
      padding: 20px;
      color: white;
      width: 63%;
      height: 100%;
      margin: auto;
      flex-flow: wrap row;
      align-items: center;
      .flex();
      @media @tablet {
        width: 80%;
      }
      @media @phone {
        width: 100%;
        p {
          font-size: 1em !important;
        }
      }
      >* {
        width: 100%;
      }
      p {
        font-size: 1.5em;
      }
    }

    .route-activities {
      font-size: 5em;
      width: 82%;
      margin: auto;
      @media @tablet {
        width: 100%;
      }
      a {
        color: @C2C-orange;
        &:hover, &:focus {
          text-decoration: none;
          outline: none;
        }
      }
      .activity {
        background-color: white;
        border-radius: 50%;
        border: 1px solid #eee;
        cursor: pointer;
      }
    }
    .intro-shortcuts {
      text-align: center;
      padding: 10px 20px 20px 10px;

      .glyphicon {
        color: white;
      }
    }
  }
  .personal-feed-on {
    background-color: @bright-green;
  }
  .button-preferences {
    background-color: @btn-primary-bg;
  }

  .float-buttons {
    right: -5px;
    width: 90px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fbfbfb;
    padding: 10px 7px 0 6px;
    .float-button {
      margin-bottom: 2px;
      margin-right: 15px;
    }
    .float-button-text {
      text-align: center;
      font-size: 12px;
      color: lightslategray;
      margin-bottom: 10px;
      clear: both;
    }
    @media @phone {
      width: 100%;
      .float-buttons, .float-button {
        margin-right: 5px;
      }
      .float-button-text {
        display: inline-block;
        width: 80px;
      }
    }
  }
  /*end home-page*/
}

@import "variables.less";

@margin-desktop: 24%;
@margin-tablet: 13%;

.home-page {

  button {
    font-size: 1.3em;
    margin: 5px;
    @media @phone {
      width: 100%;
      font-size: 1em;
    }
    .small {
      text-transform: none;
    }
  }

  .site-intro {
    display: none;
    background-color: rgba(229, 229, 229, 0.3);
    @media @phone {
      height: auto;
      .route-activities {
        display: none;
      }
    }

    &.not-logged {
      background-image:url(../img/home/slide1.jpg);
      background-size: cover;
      background-position-y: 50%;
    }

    .welcome-title {
      margin-top: 50px;
      @media @phone {
        margin-top: 0;
        font-size: 2em;
      }
    }
    .welcome-title, p {
      padding: 10px;
      background-color: rgba(21, 50, 69, 0.3);
    }

    .intro-banner {
      padding: 20px;
      color: white;
      width: 63%;
      height: 100%;
      margin: auto;
      flex-flow: wrap row;
      align-items: center;
      .flex();
      @media @tablet {
        width: 80%;
      }
      @media @phone {
        width: 100%;
        p {
          font-size: 1em !important;
        }
      }
      >* {
        width: 100%;
      }
      p {
        font-size: 1.5em;
      }
    }

    .route-activities {
      font-size: 5em;
      width: 82%;
      margin: auto;
      @media @tablet {
        width: 100%;
      }
      a {
        color: @C2C-orange;
        &:hover, &:focus {
          text-decoration: none;
          outline: none;
        }
      }
      .activity {
        background-color: white;
        border-radius: 50%;
        border: 1px solid #eee;
        cursor: pointer;
      }
    }
    .intro-shortcuts {
      text-align: center;
      padding: 10px 20px 20px 10px;

      .glyphicon {
        color: white;
      }
    }
  }
  .personal-feed-on {
    background-color: @bright-green;
  }
  .button-preferences {
    background-color: @btn-primary-bg;
  }

  .float-buttons {
    right: -5px;
    width: 90px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fbfbfb;
    padding: 10px 7px 0 6px;
    .float-button {
      margin-bottom: 2px;
      margin-right: 15px;
    }
    .float-button-text {
      text-align: center;
      font-size: 12px;
      color: lightslategray;
      margin-bottom: 10px;
      clear: both;
    }
    @media @phone {
      width: 100%;
      .float-button-container {
        width: 120px;
      }
      .float-buttons, .float-button {
        margin-right: 5px;
      }
      .float-button-text {
        width: 120px;
        margin-top: 5px;
      }
    }
  }
  /*end home-page*/
}


Set primary color

Set primary color

@import "~antd/dist/antd.less";

// Start with assigning color names to specific hex values.
@white:  #fff;
@white-darker: #f9f9f9;
@black:  #000;
@red:    #d9534f;
@orange: #F6A623;
@yellow: #ffd500;
@green:  #54d2a0;
@blue:   #0275d8;
@teal:   #5bc0de;
@pink:   #ff5b77;
@purple: #4757b2;

@primary-color: @purple;

@font-family-sans-serif: "Whitney", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@font-family-monospace:  "WhitneyBold", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@font-family-base:       @font-family-sans-serif;

@font-size-base: 14px;

// Buttons
@btn-height-base: 30px;
@btn-height-lg: 46px;
@btn-height-sm: 25px;

@btn-font-weight: 600;

@btn-primary-color: @white-darker;
@btn-primary-bg: @purple;

@btn-default-color: @white;
@btn-default-bg: #c2ccd3;
@btn-default-border: #99aab5;

@import "~antd/dist/antd.less";

// Start with assigning color names to specific hex values.
@white:  #fff;
@white-darker: #f9f9f9;
@black:  #000;
@red:    #d9534f;
@orange: #F6A623;
@yellow: #ffd500;
@green:  #54d2a0;
@blue:   #0275d8;
@teal:   #5bc0de;
@pink:   #ff5b77;
@purple: #4757b2;

@font-family-sans-serif: "Whitney", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@font-family-monospace:  "WhitneyBold", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@font-family-base:       @font-family-sans-serif;

@font-size-base: 14px;

// Buttons
@btn-height-base: 30px;
@btn-height-lg: 46px;
@btn-height-sm: 25px;

@btn-font-weight: 600;

@btn-primary-color: @white-darker;
@btn-primary-bg: @purple;

@btn-default-color: @white;
@btn-default-bg: #c2ccd3;
@btn-default-border: #99aab5;


Blank line added

Blank line added

fatal: unable to access 'https://github.com/xenohunter/xenohunter-homepage.git/': The requested URL returned error: 403


INBOX-423 Shrink composer heading in size when minimised

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


style: list-group

style: list-group

fatal: unable to access 'https://github.com/Uninspiriert/chairx-memberpage.git/': The requested URL returned error: 403


Add bootstrap.less

Add bootstrap.less

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


Fix responsive navbar scroll dropdown

Fix responsive navbar scroll dropdown

//
// Navbar scroll
// --------------------------------------------------

.navbar-scrollable {
    overflow: hidden;

    .navbar-nav {
        float: inherit;
        white-space: nowrap;
        display: inline-block;
        margin: 0;

        > li {
            float: inherit;
            display: inline-block;

            > a {
                padding-top: 16px;
                padding-bottom: 16px;
            }
        }
    }

    &.navbar-scrollable-has-previous {
        .box-shadow(~"inset @{navbar-scroll-inner-shadow-size} 0px @{navbar-scroll-inner-shadow-size} -@{navbar-scroll-inner-shadow-size} @{navbar-scroll-inner-shadow-color}");
    }

    &.navbar-scrollable-has-next {
        .box-shadow(~"inset -@{navbar-scroll-inner-shadow-size} 0px @{navbar-scroll-inner-shadow-size} -@{navbar-scroll-inner-shadow-size} @{navbar-scroll-inner-shadow-color}");
    }

    &.navbar-scrollable-has-previous.navbar-scrollable-has-next {
        .box-shadow(~"inset @{navbar-scroll-inner-shadow-size} 0px @{navbar-scroll-inner-shadow-size} -@{navbar-scroll-inner-shadow-size} @{navbar-scroll-inner-shadow-color}, inset -@{navbar-scroll-inner-shadow-size} 0px @{navbar-scroll-inner-shadow-size} -@{navbar-scroll-inner-shadow-size} @{navbar-scroll-inner-shadow-color}");
    }
}

.dropdown-menu {
    &.dropdown-navbar-scrollable {
        display: block;
        margin-top: -1px;
    }
}

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

@media (max-width: @screen-xs-max) {
    .navbar.has-navbar-scrollable {
        .navbar-header {
            float: left;
        }
    }

    .navbar-scrollable {
        .navbar-nav {
            > li {
                > a {
                    padding-left: 8px;
                    padding-right: 8px;
                }
            }
        }
    }

    .dropdown-menu {
        &.dropdown-navbar-scrollable {
            left: 0 !important;
            width: 100%;
            min-width: inherit;
            border-left: none;
            border-right: none;
            max-height: 250px;
            overflow-y: auto;

            .dropdown {
                > a:after {
                    .rotate(90deg);
                }

                > .dropdown-menu {
                    display: block;
                    position: relative;
                    width: 100%;
                    border-left: none;
                    border-right: none;
                    border-bottom: none;
                    .box-shadow(none);
                }

                &.open {
                    > a:after {
                        border-left-color: inherit;
                    }
                }
            }
        }
    }
}

//
// Navbar scroll
// --------------------------------------------------

.navbar-scrollable {
    overflow: hidden;

    .navbar-nav {
        float: inherit;
        white-space: nowrap;
        display: inline-block;
        margin: 0;

        > li {
            float: inherit;
            display: inline-block;

            > a {
                padding-top: 16px;
                padding-bottom: 16px;
            }
        }
    }

    &.navbar-scrollable-has-previous {
        .box-shadow(~"inset @{navbar-scroll-inner-shadow-size} 0px @{navbar-scroll-inner-shadow-size} -@{navbar-scroll-inner-shadow-size} @{navbar-scroll-inner-shadow-color}");
    }

    &.navbar-scrollable-has-next {
        .box-shadow(~"inset -@{navbar-scroll-inner-shadow-size} 0px @{navbar-scroll-inner-shadow-size} -@{navbar-scroll-inner-shadow-size} @{navbar-scroll-inner-shadow-color}");
    }

    &.navbar-scrollable-has-previous.navbar-scrollable-has-next {
        .box-shadow(~"inset @{navbar-scroll-inner-shadow-size} 0px @{navbar-scroll-inner-shadow-size} -@{navbar-scroll-inner-shadow-size} @{navbar-scroll-inner-shadow-color}, inset -@{navbar-scroll-inner-shadow-size} 0px @{navbar-scroll-inner-shadow-size} -@{navbar-scroll-inner-shadow-size} @{navbar-scroll-inner-shadow-color}");
    }
}

.dropdown-menu {
    &.dropdown-navbar-scrollable {
        display: block;
        margin-top: -1px;
    }
}

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

@media (max-width: @screen-xs-max) {
    .navbar.has-navbar-scrollable {
        .navbar-header {
            float: left;
        }
    }

    .navbar-scrollable {
        .navbar-nav {
            .open .dropdown-menu {
                position: absolute;
                float: left;
                width: auto;
                margin-top: 2px;
                background-color: @dropdown-bg;
                border: 1px solid @dropdown-fallback-border; // IE8 fallback
                border: 1px solid @dropdown-border;
                .box-shadow(1px 3px 4px rgba(0, 0, 0, 0.18));
            }

            > li {
                > a {
                    padding-left: 8px;
                    padding-right: 8px;
                }
            }
        }
    }

    .dropdown-menu {
        &.dropdown-navbar-scrollable {
            left: 0 !important;
            width: 100%;
            min-width: inherit;
        }
    }
}


reducing spacing between icon

reducing spacing between icon

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


Style sortable-placeholder box

Style sortable-placeholder box

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


Correcting a select timeline CSS error

Correcting a select timeline CSS error

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/gophronesis/penny-sae.git/'


Style the NotationShow page.

Style the NotationShow page.

fatal: unable to access 'https://github.com/jaredjj3/string-sync.git/': The requested URL returned error: 403


Third commit

Third commit

fatal: unable to access 'https://github.com/gbouteiller/Waa-LIB.git/': The requested URL returned error: 403


Delete main.less

Delete main.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/wwoof/webapp.git/'


added styling for icons panel

added styling for icons panel

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/puttarajubr/commcare-hq.git/'


Lowered canvas

Lowered canvas

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/potogan/smartotels-onepager.git/'


Added grid.less

Added grid.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/Ovenwand/example.com.git/'


add styles for RegionPicker

add styles for RegionPicker

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


removed fontawesome from splash.less

removed fontawesome from splash.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/USGS-CIDA/enddat_web.git/'


Create 16-state-rules.less

Create 16-state-rules.less

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


word-wrap mixin and tryin new approach to conditional mixins

.wrap(@wrap: break-word) {
  overflow-wrap: @wrap;
  word-wrap: @wrap;
  .process(@wrap) when (@wrap = break-word) {
    word-break: break-all;
  }
  .process(@wrap) when not (@wrap = break-word) {
    word-break: @wrap;
  }
  .process(@wrap);

}


style(segmented-control): 修改分段器的样式

style(segmented-control): 修改分段器的样式

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/77ircloud/yymobile2.git/'


just added a space before blink tag

just added a space before blink tag

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


[NEW] Forgot to commit this earlier, with the other TheNews theme files.

git-svn-id: a7fabbc6a7c54ea5c67cbd16bd322330fd10cc35@50835 b456876b-0849-0410-b77d-98878d47e9d5

/* $Id$ */
@import "../vendor/twitter/bootstrap/less/bootstrap.less";
@import "thenews/custom-variables.less";
@import "thenews/custom-other.less";
@import "../vendor/twitter/bootstrap/less/utilities.less";

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


Delete core.less

Delete core.less

fatal: unable to access 'https://github.com/holly-luo/holly-luo.github.io.git/': The requested URL returned error: 403


[FIX] web_kanban: kanban attachment image on firefox

Negative margin-top with float element is misinterpreted on firefox

@o-kanban-record-margin: 4px;
@o-kanban-group-padding: 4px;

@o-kanban-default-record-width: 300px;
@o-kanban-small-record-width: 240px;

@o-kanban-image-width: 64px;
@o-kanban-inside-gutter: 8px;

// mixins
.o-kanban-icon() {
    // Share the style of `.o_kanban_quick_add` and `o_kanban_config`.
    height: 50px;
    width: 50px;
    line-height: 1.8;
    text-align: center;
    color: white;
    padding: 8px;
    font-size: 22px;
    cursor: pointer;
}

// LAYOUT
.o_kanban_view {
    .o-flex-display();
    .o-align-content(stretch);

    overflow-x: visible;
    @media (max-width: @screen-xs-max) {
        overflow-x: auto;
        padding: 0px;
    }

    .o_kanban_record {
        .clearfix();
        &:after, &:before {
            width: 0;
            height: 0;
        }

        position: relative;
        min-width: 150px;
        margin: 4px;

        .o_kanban_image {
            float: left;
            width: @o-kanban-image-width;

            + div {
                padding-left: @o-kanban-image-width + @o-kanban-inside-gutter;
            }
        }

        .oe_kanban_details {
            width: 100%;
            > ul {
                margin-bottom: 0;
            }
        }

        .o_dropdown_kanban {
            float: right;
            @media (max-width: @screen-xs-max) {
                visibility: visible;
            }

            // Open the dropdown a the left side of the dropdown toggle
            > .dropdown-menu {
                left: auto;
                right: 0;
                padding: 3px;
            }
        }

        .o_kanban_footer {
            .o-flex-display();
            .o-justify-content(space-between);
            > * {
                .o-flex(0, 0, auto);
            }
        }

        .oe_kanban_footer_left {
            float: left;
        }

        .oe_kanban_bottom_right {
            float: right;
        }

        .oe_kanban_bottom_left {
            float: left;
        }

        .o_kanban_tags {
            margin: 0 0 8px -8px;
            height: 9px;
            .o_tag {
                width: 40px;
                height: 9px;
                display: inline-block;
                vertical-align: top;
                opacity: 0.7;

                &:hover {
                    opacity: 1;
                }
            }
        }
        .o_form_field_many2manytags {
            display: block;
        }
    }

    .o_kanban_quick_create {
        margin: 0 @o-kanban-record-margin @o-kanban-record-margin @o-kanban-record-margin;
        padding: 3px;
        input {
            width: 100%;
            margin: 4px 0;
        }
    }

    .o_kanban_group {
        .o-flex(0, 0, auto);
        padding: 0 @o-kanban-group-padding;
        &:not(.o_column_folded) {
            width: @o-kanban-default-record-width + 2*@o-kanban-group-padding + 2*@o-kanban-record-margin;
        }

        .o_kanban_header + .o_kanban_record {
            margin-top: 0;  // no margin top from the first card after kanban_header
        }
    }

    &.o_kanban_ungrouped {
        .o-flex-flow(row, wrap);
        .o-justify-content(flex-start);

        padding: @o-kanban-record-margin @odoo-horizontal-padding - @o-kanban-record-margin;
        @media (max-width: @screen-xs-max) {
            padding: 0;
        }

        .o_kanban_record {
            .o-flex(1, 1, @o-kanban-default-record-width);
            @media (max-width: @screen-xs-max) {
                margin: 0 0 1px 0;
                .o-flex(1, 0, 100%);
                box-shadow: none;
            }

            &.o_kanban_ghost {
                height: 0;
                min-height: 0!important; // to prevent view writers to override this height
                visibility: hidden;
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
            }
        }
    }

    &.o_kanban_grouped {
        min-height: 100%;
        padding: 0 @odoo-horizontal-padding - @o-kanban-group-padding - @o-kanban-record-margin;
        .o_kanban_record {
            width: @o-kanban-default-record-width;
        }
        &.o_kanban_small_column .o_kanban_group {
            &:not(.o_column_folded) {
                width: @o-kanban-small-record-width + 2*@o-kanban-group-padding + 2*@o-kanban-record-margin;
                .o_kanban_record {
                    width: @o-kanban-small-record-width;
                }
            }
        }
    }

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

    .o_column_quick_create {
        .o-flex(0, 0, auto);
        margin: 0;
        padding: 8px;
        position: relative;

        .o_kanban_quick_create {
            display: none;
            width: 180px;
        }
    }
}

// STYLE
.o_kanban_view {

    .o_kanban_record {
        background-color: white;
        box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        padding: @o-kanban-inside-gutter;

        &:hover .o_dropdown_kanban {
            visibility: visible;
        }

        &.oe_kanban_global_click, &.oe_kanban_global_click_edit {
            cursor: pointer;
        }

        &.ui-sortable-helper {
            transform: rotate(3deg);
            opacity: 0.9;
        }

        &.o_kanban_two_column_tags {
            .o_kanban_image > img {
                box-shadow: none;
            }
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        .o_kanban_title {
            font-weight: bold;
            margin-bottom: 3px;
        }

        .o_kanban_image {
            text-align: center;

            img {
                max-width: 100%;
                box-shadow: none;
            }
        }

        .o_kanban_button {
            margin-top: 15px;

            > button, > a {
                .o-position-absolute(@right: @o-kanban-inside-gutter, @bottom: @o-kanban-inside-gutter);
            }
        }

        .o_dropdown_kanban {
            > a {
                padding: 3px;
                color: @odoo-main-text-color;
            }
            &.open {
                visibility: visible;
            }
        }
        .oe_kanban_avatar {
            .img-rounded;
            margin-left: 2px;
        }

        .oe_kanban_avatar_smallbox {
            height: 40px;
            width: 40px;
            box-shadow: 0 1px 4px @gray-light;
        }

        .o_kanban_attachment_image {
            // The image should take the whole card
            margin: 0 -8px -8px;
            > img {
                width: 100%;
            }
        }
        .o_progressbar {
            .o-flex-display();
            height: 20px;

            .o_progressbar_title {
                .o-flex(0, 0, auto);
            }
            .o_progress {
                .o-flex(1, 1, auto);
                margin-top: 3px;
            }
            .o_progressbar_value {
                .o-flex(0, 0, auto);
                text-align: right;
                width: auto;
                height: 100%;
            }
            input.o_progressbar_value {
                width: 15%;
                margin-left: 8px;
            }
        }

        .oe_kanban_colorpicker {
            margin: 0;

            > li {
                display: inline-block;
                margin-right: 1px;

                > a {
                    width: 15px;
                    height: 15px;
                    display: block;
                }

                &:first-child > a {
                    border: 1px solid #ccc;
                }
            }
        }
        .o_dropdown_kanban {
            visibility: hidden;
        }
    }

    .o_kanban_group {
        background-color: @odoo-webclient-background-color;
        &:nth-child(odd) {
            background-color: darken(@odoo-webclient-background-color, 3%);
        }
        &.ui-sortable-helper ~ .o_kanban_group, // Invert odd/even rule for groups which follows the helper (fixed)
        &.ui-sortable-placeholder ~ .o_kanban_group.ui-sortable-helper { // Invert odd/even rule for the helper if the placeholder is before (so that it keep the same color)
            background-color: @odoo-webclient-background-color;
            &:nth-child(even) {
                background-color: darken(@odoo-webclient-background-color, 3%);
            }
        }

        &.o_kanban_dragged {
            background-color: @odoo-main-text-color;
            .o_kanban_record {
                visibility: hidden;
            }
        }

       .o_kanban_header {
            color: white;
            margin: 0 @o-kanban-record-margin;
            height: 50px;
            line-height: 2.2;
            cursor: move;
            .o-flex-display();
            .o_column_unfold {
                display: none;
            }
            .o_column_title {
                font-size: 18px;
                font-weight: 300;
                .o-flex(1, 1, auto);
                white-space: nowrap;
                padding-top: 5px;
            }
            .o_kanban_quick_add.oe_tip_show_element i {
                color: @odoo-brand-optional;
            }
            .o_kanban_quick_add i {
                .o-kanban-icon;
                &:hover {
                    background-color: @odoo-brand-optional;
                    color: white !important;
                }
            }
            &:hover .o_kanban_config i {
                visibility: visible;
            }
            .o_kanban_config i {
                .o-kanban-icon;
                visibility: hidden;
                color: #ccc;
                &:hover {
                    background-color: darken(@gray-light, 10%);
                }
            }

            .o_kanban_number {
                color: @odoo-main-text-color;
                text-align: center;
            }
        }

        &.o_column_folded {
            position: relative;
            border-right: 1px solid @odoo-main-text-color;
            margin: 0;

            .o_column_title {
                line-height: 1.3;
                text-transform: uppercase;
                transform-origin: left bottom;
                transform: rotate(90deg);
                top: 40px;
                left: 15px;
                position: absolute;
            }
            > .o_kanban_record, .o_kanban_quick_add, .o_kanban_config, .o_kanban_load_more {
                display: none;
            }
            &:hover {
                cursor: pointer;
                background-color:  darken(@gray-light, 10%);
            }
            &.o_kanban_hover {
                background-color: darken(@gray-light, 10%);
            }
            .o_column_unfold {
                display: block;
                padding: 0 10px;

                > i {
                    font-size: 22px;
                    padding-top: 15px;
                }

            }
            background-color: @gray-light;
        }

        .o_kanban_quick_create {
            background-color: white;
            box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        }

        .o_kanban_load_more {
            text-align: center;
            a {
                color: white;
                font-weight: 300;
            }
        }
    }

    .o_column_quick_create {
        background-color:  @odoo-main-text-color;
        cursor: pointer;

        &:hover {
            background-color:  darken(@gray-light, 10%);
        }
        .o_column_header {
            .o_kanban_add_column {
                padding: 0 10px;
                color: white;

                > i {
                    font-size: 22px;
                    padding-top: 7px;
                }
            }
            .o_kanban_title {
                font-size: 18px;
                font-weight: 300;
                white-space: nowrap;
                color: @gray-lighter;
                text-transform: uppercase;
                transform-origin: left bottom;
                transform: rotate(90deg);
                top: 40px;
                left: 15px;
                position: absolute;
            }
        }
        .o_kanban_quick_create {
            background-color: white;
            box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        }
    }

    .oe_kanban_color_0 {
        background-color: #FFFFFF;
        color: #5a5a5a;
    }
    .oe_kanban_color_1 {
        background-color: #d8d8d8;
        color: #5e5e5e;
    }
    .oe_kanban_color_2 {
        background-color: #e5d8e3;
        color: #7a3737;
    }
    .oe_kanban_color_3 {
        background-color: #ece9c2;
        color: #756832;
    }
    .oe_kanban_color_4 {
        background-color: #dee180;
        color: #5d6937;
    }
    .oe_kanban_color_5 {
        background-color: #abd4cc;
        color: #1a7759;
    }
    .oe_kanban_color_6 {
        background-color: #b8e3e8;
        color: #1a5d83;
    }
    .oe_kanban_color_7 {
        background-color: #f4ddab;
        color: #5e5e5e;
    }
    .oe_kanban_color_8 {
        background-color: #7f637d;
        color: #a5a5a5;
    }
    .oe_kanban_color_9 {
        background-color: #d8c5d5;
        color: #5e5e5e;
    }
    .oe_kanban_color_10 {
        background-color: #46C265;
        color: #639B89;
    }
}

// necessary outside kanban views (for example, edit column form in task kanban view)
// ideally, it should be made generic (.o_status, .o_status_green, ...)
.oe_kanban_status {
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 6px;

    background-color: @odoo-brand-secondary;

    &.oe_kanban_status_green {
        background-color: @brand-success;
    }
    &.oe_kanban_status_red {
        background-color: @brand-danger;
    }
}

@o-kanban-record-margin: 4px;
@o-kanban-group-padding: 4px;

@o-kanban-default-record-width: 300px;
@o-kanban-small-record-width: 240px;

@o-kanban-image-width: 64px;
@o-kanban-inside-gutter: 8px;

// mixins
.o-kanban-icon() {
    // Share the style of `.o_kanban_quick_add` and `o_kanban_config`.
    height: 50px;
    width: 50px;
    line-height: 1.8;
    text-align: center;
    color: white;
    padding: 8px;
    font-size: 22px;
    cursor: pointer;
}

// LAYOUT
.o_kanban_view {
    .o-flex-display();
    .o-align-content(stretch);

    overflow-x: visible;
    @media (max-width: @screen-xs-max) {
        overflow-x: auto;
        padding: 0px;
    }

    .o_kanban_record {
        .clearfix();
        &:after, &:before {
            width: 0;
            height: 0;
        }

        position: relative;
        min-width: 150px;
        margin: 4px;

        .o_kanban_image {
            float: left;
            width: @o-kanban-image-width;

            + div {
                padding-left: @o-kanban-image-width + @o-kanban-inside-gutter;
            }
        }

        .oe_kanban_details {
            width: 100%;
            > ul {
                margin-bottom: 0;
            }
        }

        .o_dropdown_kanban {
            float: right;
            @media (max-width: @screen-xs-max) {
                visibility: visible;
            }

            // Open the dropdown a the left side of the dropdown toggle
            > .dropdown-menu {
                left: auto;
                right: 0;
                padding: 3px;
            }
        }

        .o_kanban_footer {
            .o-flex-display();
            .o-justify-content(space-between);
            > * {
                .o-flex(0, 0, auto);
            }
        }

        .oe_kanban_footer_left {
            float: left;
        }

        .oe_kanban_bottom_right {
            float: right;
        }

        .oe_kanban_bottom_left {
            float: left;
        }

        .o_kanban_tags {
            margin: 0 0 8px -8px;
            height: 9px;
            .o_tag {
                width: 40px;
                height: 9px;
                display: inline-block;
                vertical-align: top;
                opacity: 0.7;

                &:hover {
                    opacity: 1;
                }
            }
        }
        .o_form_field_many2manytags {
            display: block;
        }
    }

    .o_kanban_quick_create {
        margin: 0 @o-kanban-record-margin @o-kanban-record-margin @o-kanban-record-margin;
        padding: 3px;
        input {
            width: 100%;
            margin: 4px 0;
        }
    }

    .o_kanban_group {
        .o-flex(0, 0, auto);
        padding: 0 @o-kanban-group-padding;
        &:not(.o_column_folded) {
            width: @o-kanban-default-record-width + 2*@o-kanban-group-padding + 2*@o-kanban-record-margin;
        }

        .o_kanban_header + .o_kanban_record {
            margin-top: 0;  // no margin top from the first card after kanban_header
        }
    }

    &.o_kanban_ungrouped {
        .o-flex-flow(row, wrap);
        .o-justify-content(flex-start);

        padding: @o-kanban-record-margin @odoo-horizontal-padding - @o-kanban-record-margin;
        @media (max-width: @screen-xs-max) {
            padding: 0;
        }

        .o_kanban_record {
            .o-flex(1, 1, @o-kanban-default-record-width);
            @media (max-width: @screen-xs-max) {
                margin: 0 0 1px 0;
                .o-flex(1, 0, 100%);
                box-shadow: none;
            }

            &.o_kanban_ghost {
                height: 0;
                min-height: 0!important; // to prevent view writers to override this height
                visibility: hidden;
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
            }
        }
    }

    &.o_kanban_grouped {
        min-height: 100%;
        padding: 0 @odoo-horizontal-padding - @o-kanban-group-padding - @o-kanban-record-margin;
        .o_kanban_record {
            width: @o-kanban-default-record-width;
        }
        &.o_kanban_small_column .o_kanban_group {
            &:not(.o_column_folded) {
                width: @o-kanban-small-record-width + 2*@o-kanban-group-padding + 2*@o-kanban-record-margin;
                .o_kanban_record {
                    width: @o-kanban-small-record-width;
                }
            }
        }
    }

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

    .o_column_quick_create {
        .o-flex(0, 0, auto);
        margin: 0;
        padding: 8px;
        position: relative;

        .o_kanban_quick_create {
            display: none;
            width: 180px;
        }
    }
}

// STYLE
.o_kanban_view {

    .o_kanban_record {
        background-color: white;
        box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        padding: @o-kanban-inside-gutter;

        &:hover .o_dropdown_kanban {
            visibility: visible;
        }

        &.oe_kanban_global_click, &.oe_kanban_global_click_edit {
            cursor: pointer;
        }

        &.ui-sortable-helper {
            transform: rotate(3deg);
            opacity: 0.9;
        }

        &.o_kanban_two_column_tags {
            .o_kanban_image > img {
                box-shadow: none;
            }
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        .o_kanban_title {
            font-weight: bold;
            margin-bottom: 3px;
        }

        .o_kanban_image {
            text-align: center;

            img {
                max-width: 100%;
                box-shadow: none;
            }
        }

        .o_kanban_button {
            margin-top: 15px;

            > button, > a {
                .o-position-absolute(@right: @o-kanban-inside-gutter, @bottom: @o-kanban-inside-gutter);
            }
        }

        .o_dropdown_kanban {
            > a {
                padding: 3px;
                color: @odoo-main-text-color;
            }
            &.open {
                visibility: visible;
            }
        }
        .oe_kanban_avatar {
            .img-rounded;
            margin-left: 2px;
        }

        .oe_kanban_avatar_smallbox {
            height: 40px;
            width: 40px;
            box-shadow: 0 1px 4px @gray-light;
        }

        .o_kanban_attachment_image {
            // The image should take the whole card
            margin: -8px;
            > img {
                width: 100%;
            }
        }
        .o_progressbar {
            .o-flex-display();
            height: 20px;

            .o_progressbar_title {
                .o-flex(0, 0, auto);
            }
            .o_progress {
                .o-flex(1, 1, auto);
                margin-top: 3px;
            }
            .o_progressbar_value {
                .o-flex(0, 0, auto);
                text-align: right;
                width: auto;
                height: 100%;
            }
            input.o_progressbar_value {
                width: 15%;
                margin-left: 8px;
            }
        }

        .oe_kanban_colorpicker {
            margin: 0;

            > li {
                display: inline-block;
                margin-right: 1px;

                > a {
                    width: 15px;
                    height: 15px;
                    display: block;
                }

                &:first-child > a {
                    border: 1px solid #ccc;
                }
            }
        }
        .o_dropdown_kanban {
            visibility: hidden;
        }
    }

    .o_kanban_group {
        background-color: @odoo-webclient-background-color;
        &:nth-child(odd) {
            background-color: darken(@odoo-webclient-background-color, 3%);
        }
        &.ui-sortable-helper ~ .o_kanban_group, // Invert odd/even rule for groups which follows the helper (fixed)
        &.ui-sortable-placeholder ~ .o_kanban_group.ui-sortable-helper { // Invert odd/even rule for the helper if the placeholder is before (so that it keep the same color)
            background-color: @odoo-webclient-background-color;
            &:nth-child(even) {
                background-color: darken(@odoo-webclient-background-color, 3%);
            }
        }

        &.o_kanban_dragged {
            background-color: @odoo-main-text-color;
            .o_kanban_record {
                visibility: hidden;
            }
        }

       .o_kanban_header {
            color: white;
            margin: 0 @o-kanban-record-margin;
            height: 50px;
            line-height: 2.2;
            cursor: move;
            .o-flex-display();
            .o_column_unfold {
                display: none;
            }
            .o_column_title {
                font-size: 18px;
                font-weight: 300;
                .o-flex(1, 1, auto);
                white-space: nowrap;
                padding-top: 5px;
            }
            .o_kanban_quick_add.oe_tip_show_element i {
                color: @odoo-brand-optional;
            }
            .o_kanban_quick_add i {
                .o-kanban-icon;
                &:hover {
                    background-color: @odoo-brand-optional;
                    color: white !important;
                }
            }
            &:hover .o_kanban_config i {
                visibility: visible;
            }
            .o_kanban_config i {
                .o-kanban-icon;
                visibility: hidden;
                color: #ccc;
                &:hover {
                    background-color: darken(@gray-light, 10%);
                }
            }

            .o_kanban_number {
                color: @odoo-main-text-color;
                text-align: center;
            }
        }

        &.o_column_folded {
            position: relative;
            border-right: 1px solid @odoo-main-text-color;
            margin: 0;

            .o_column_title {
                line-height: 1.3;
                text-transform: uppercase;
                transform-origin: left bottom;
                transform: rotate(90deg);
                top: 40px;
                left: 15px;
                position: absolute;
            }
            > .o_kanban_record, .o_kanban_quick_add, .o_kanban_config, .o_kanban_load_more {
                display: none;
            }
            &:hover {
                cursor: pointer;
                background-color:  darken(@gray-light, 10%);
            }
            &.o_kanban_hover {
                background-color: darken(@gray-light, 10%);
            }
            .o_column_unfold {
                display: block;
                padding: 0 10px;

                > i {
                    font-size: 22px;
                    padding-top: 15px;
                }

            }
            background-color: @gray-light;
        }

        .o_kanban_quick_create {
            background-color: white;
            box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        }

        .o_kanban_load_more {
            text-align: center;
            a {
                color: white;
                font-weight: 300;
            }
        }
    }

    .o_column_quick_create {
        background-color:  @odoo-main-text-color;
        cursor: pointer;

        &:hover {
            background-color:  darken(@gray-light, 10%);
        }
        .o_column_header {
            .o_kanban_add_column {
                padding: 0 10px;
                color: white;

                > i {
                    font-size: 22px;
                    padding-top: 7px;
                }
            }
            .o_kanban_title {
                font-size: 18px;
                font-weight: 300;
                white-space: nowrap;
                color: @gray-lighter;
                text-transform: uppercase;
                transform-origin: left bottom;
                transform: rotate(90deg);
                top: 40px;
                left: 15px;
                position: absolute;
            }
        }
        .o_kanban_quick_create {
            background-color: white;
            box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        }
    }

    .oe_kanban_color_0 {
        background-color: #FFFFFF;
        color: #5a5a5a;
    }
    .oe_kanban_color_1 {
        background-color: #d8d8d8;
        color: #5e5e5e;
    }
    .oe_kanban_color_2 {
        background-color: #e5d8e3;
        color: #7a3737;
    }
    .oe_kanban_color_3 {
        background-color: #ece9c2;
        color: #756832;
    }
    .oe_kanban_color_4 {
        background-color: #dee180;
        color: #5d6937;
    }
    .oe_kanban_color_5 {
        background-color: #abd4cc;
        color: #1a7759;
    }
    .oe_kanban_color_6 {
        background-color: #b8e3e8;
        color: #1a5d83;
    }
    .oe_kanban_color_7 {
        background-color: #f4ddab;
        color: #5e5e5e;
    }
    .oe_kanban_color_8 {
        background-color: #7f637d;
        color: #a5a5a5;
    }
    .oe_kanban_color_9 {
        background-color: #d8c5d5;
        color: #5e5e5e;
    }
    .oe_kanban_color_10 {
        background-color: #46C265;
        color: #639B89;
    }
}

// necessary outside kanban views (for example, edit column form in task kanban view)
// ideally, it should be made generic (.o_status, .o_status_green, ...)
.oe_kanban_status {
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 6px;

    background-color: @odoo-brand-secondary;

    &.oe_kanban_status_green {
        background-color: @brand-success;
    }
    &.oe_kanban_status_red {
        background-color: @brand-danger;
    }
}


Create loading.import.less

Create loading.import.less

.loading-app {
  .position(absolute, 50%, 50%, auto, auto, 50%);
  .transform(translate3d(50%, -50%, 0));
  min-width: 160px;
  max-width: 320px;
}

error: pathspec 'client/templates/loading.import.less' did not match any file(s) known to git


Create pager.less

Create pager.less

//
// Pager pagination
// --------------------------------------------------

.pager {
  padding-left: 0;
  margin: @line-height-computed 0;
  list-style: none;
  text-align: center;
  &:extend(.clearfix all);
  li {
    display: inline;
    > a,
    > span {
      display: inline-block;
      padding: 5px 14px;
      background-color: @pager-bg;
      border: 1px solid @pager-border;
      border-radius: @pager-border-radius;
    }

    > a:hover,
    > a:focus {
      text-decoration: none;
      background-color: @pager-hover-bg;
    }
  }

  .next {
    > a,
    > span {
      float: right;
    }
  }

  .previous {
    > a,
    > span {
      float: left;
    }
  }

  .disabled {
    > a,
    > a:hover,
    > a:focus,
    > span {
      color: @pager-disabled-color;
      background-color: @pager-bg;
      cursor: not-allowed;
    }
  }

}

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


border fix

border fix

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


Update LESS because Bootstrap Twitter is now v3.3.4

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/Nelrohd/bootstrap-dropdown-checkbox.git/'