mconf/mconf-web

View on GitHub
app/assets/stylesheets/app/application/base.scss

Summary

Maintainability
Test Coverage
@import "compass/css3";
@import "compass/utilities/general";
@import "compass/typography/links";
@import "definitions";

//
// General tags
//

body {
  background-color: $m-site-bg-color;
}

p {
  margin-bottom: 0.4em;
}

ul {
  list-style: none;
}

form {
  margin: 0;
}

//
// Components used site-wide, in any layout
//

.webconf-join-group {
  // adjust make the 'fast start' icon
  .btn i.icon {
    float: none;
    margin: 0;
    padding: 0;
    @include font-size($m-font-small);
    color: white;
    &:hover { color: white; }
  }
  .btn-small i.icon {
    @include font-size($m-font-small);
  }
}

// user logos in a thread with several snippets
// e.g. list of posts, list of recent users, etc.
.logo-in-thread {
  @include logo-in-thread; // in _mixins
}

.clearfix {
  @include mconf-clearfix; // in _mixins
}

.danger-text, a.danger-text {
  @include danger-text;
}

#notification-flashs {
  top: $m-notifications-top;
}

.with-tooltip {
  margin: 0;
  display: inline-block;
}

// Unified style for threads: posts, attachments
.thread {
  clear: both;
  padding: 10px 4px 8px 4px;
  margin: 1px 0;
  @include mconf-clearfix;
  //border-bottom: 1px solid #eee;

  // so .thread-action-links is correctly positioned
  position: relative;

      &.thread-no-logo {
      .thread-content {
        margin-left: 0;
      }
    }

  .thread-content {
    margin-top: 3px;
    margin-left: 65px;

    &.thread-content-full {
      margin-left: 0;
    }

    .thread-title {
      font-size: $m-font-medium; //font-weight: bold;
      margin-bottom: 3px;
      overflow: hidden;

      // usually seen inside .resource-visibility
      .small > .icon {
        margin-right: 1px;
      }

      h2 {
        margin-bottom: 0;

        .icon {
          margin: 7px 6px 0 0;
        }
      }
    }

    .thread-description {
      margin-bottom: 3px;
    }

    .show-join-request{
      float: right;
    }

    .thread-subtitle {
      margin: 2px 0;
      //line-height: $m-font-normal + 6px; // less that in .thread-title

      i {
        margin: 0px 3px 0px 0px;
        float: none;
      }

      &.thread-subtitle-nested {
        margin-left: 6px;
      }
    }

    .thread-updated-at {
      @include small-date;
    }
  }

  .thread-action-links {
    margin: 5px 0 5px 0;
    padding: 3px 0 3px 10px;
    @include mconf-clearfix;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

    li {
      margin: 0;
      padding: 0;
      float: left;
      display: inline-block;
      margin-right: 15px;
    }
  }

  .thread-observation {
    color: #666;
    font-style: italic;
    float: right;
  }

  // playback links for recordings inside threads
  .thread-recording-playback {
    list-style-type: none;
    margin: 0 0 0 13px;
    padding: 0;

    .thread-playback-link {
      white-space: nowrap;
    }

    .thread-playback-unavailable {
      color: mix($m-link-color, #888, 70%); // a grayer link
    }

    .thread-playback-processing {
      color: darken($m-yellow, 10);
    }
  }

}

// Blocks that can be automatically expanded/collapsed
.block-expanded { display: none; }
.block-collapsed { }

// Blocks that will only be visible on hover
.visible-on-hover { display: none; }

// Wrapper around information about a user
// See users/_simple_user and users/_detailed_user
.user-information {
  clear: both;
  @include mconf-clearfix;

  &.user-simple {
    margin: 5px 0;
    .user-text { margin-left: 45px; }
    .user-name {
      display: inline-block;
      /* @include text-truncate; */
    }
    .user-organization {
      display: block;
      /* @include text-truncate; */
    }
  }

  &.user-detailed {
    @include make-row;
    padding: 10px 0;

    .user-information-logo {
      @include make-xs-column(2);
      padding: 0;
      text-align: center;
      max-width: 64px;
    }
    .user-information-data {
      padding: 0;
      @include make-xs-column(9);
    }

    img.logo-user {
      width: 100%;
      height: 100%;
      max-width: 64px;
      max-height: 64px;
    }
    .user-name {
      display: inline;
      @include text-truncate;
    }
    .user-mail {
      display: inline;
      @include text-truncate;
    }
    .user-organization {
      display: block;
      @include text-truncate;
    }
    .user-location {
      display: block;
      @include text-truncate;
    }
  }
}

//
// Page containers, redefined in the layouts
// Here we define the basic styles used in all layouts
//

#sidenav {
  background: $m-sidenav-bg-color;
  border-right: 1px solid $m-sidenav-border;
  padding: $m-sidenav-padding;
  box-shadow: $m-sidenav-box-shadow;

  width: $m-sidenav-width-md;
  position: fixed;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  z-index: $m-z-index-sidenav;

  > .logo {
    margin: 0 auto;
    display: block;
    background: image-url('logos/mconf-color-transp.png') no-repeat left top;
    background-size: 87px 45px;
    width: 87px;
    height: 45px;

    // - logo height - sidenav top padding
    margin-top: ($m-navbar-height - 45px)/2 - 20px;
    margin-bottom: ($m-navbar-height - 45px)/2;
    @include mconf-clearfix;
  }

  .search {
    padding-top: 20px;
    padding-bottom: 20px;

    input {
      width: 100%;
      text-align: center;

      // TODO: move to common input definitions
      border-radius: 4px;
      border: none;
      background-color: #f4f0f3; //#c9b8c3;
      font-family: Roboto;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.15;
      //color: desaturate($m-color-primary, 10%); //#784d68;
    }
  }

  .subtitle {
    font-size: $m-font-small; //13px; //$m-font-normal;
    line-height: 1;
    padding: 8px 0 16px 0;
    color: #784d68;
    opacity: 0.7;
    font-weight: 500;
    text-transform: uppercase;
  }

  .space-item {
    @include mconf-clearfix;
    margin: 16px 0;
    @include text-truncate;
    white-space: nowrap;

    > .logo {
      @include logo-container(53px);
      display: inline-block;
      margin-right: 10px;
    }

    > .name {
      display: inline-block;
      color: #2c0b23;
      font-size: $m-font-medium;
      opacity: 0.4;
      margin: 8px 0;

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

#site.with-sidenav, #footer.with-sidenav {
  padding-left: $m-sidenav-width-md;
}

#site {
  @include container-fixed; // without params this is actually a .container-fluid
  padding: 0;
}

#navbar {
  margin: 0;
  background: $m-navbar-bg-color-dark;
  @include background(linear-gradient(to top, $m-navbar-bg-color-light, $m-navbar-bg-color-dark));
  border-bottom: $m-navbar-border-width solid $m-navbar-border-color;
  font-family: $m-navbar-font-family;
  position: relative;
  height: $m-navbar-height;
  color: $m-navbar-font-color;
  font-size: $m-navbar-font;
  text-align: center;
  @include mconf-clearfix;
  padding: 0 $m-site-horizontal-padding;
  box-shadow: $m-navbar-box-shadow;

  a:hover, a:focus { text-decoration: none; }

  .navbar-conf-panel {
    background: $m-navbar-conf-panel-bg;
    padding: ($m-navbar-height - $m-navbar-btn-size)/2 18px;
    margin: 0 28px;
  }

  .btn-navbar {
    $imgsize: $m-navbar-btn-size * 0.65;

    height: $m-navbar-btn-size;
    width: $m-navbar-btn-size;
    display: inline-block;
    @include border-radius($m-navbar-btn-size / 2);
    background: $m-navbar-btn-bg;
    padding: (($m-navbar-btn-size - $imgsize) / 2);
    float: left;
    transition: all .3s ease-in-out;
    color: $m-navbar-btn-color;

    .icon {
      color: #fff;
      font-size: $imgsize;
      line-height: 1;
      margin: 0;
      width: 100%;
      text-align: center;

      &:hover { color: #fff; }

      &.icon-options {
        $imgsize: $imgsize - 4;
        font-size: $imgsize;
        /* padding: (($m-navbar-btn-size - $imgsize) / 2) - 2; */
        padding: 1px 0;
      }
      &.icon-conference-invite {
        $imgsize: $imgsize - 10;
        font-size: $imgsize;
        /* padding: (($m-navbar-btn-size - $imgsize) / 2) - 2; */
        padding: 6px 0;
      }
    }

    &:hover {
      background: $m-navbar-btn-bg-hover;
      transform: scale(1.05);
    }
  }

  .navbar-user-chip {
    margin: ($m-navbar-height - $m-navbar-btn-size)/2 0;

    .navbar-user-toggle {
      /* font-size: $m-font-medium; */
      @include logo-container;

      &:hover, &[aria-expanded=true] {
        background: $m-navbar-font-highlight;
      }

      img, .logo-user {
        height: $m-navbar-btn-size;
        width: $m-navbar-btn-size;
        float: none;
        margin: 0 16px 0 0;
        display: inline-block;
        border: 1px solid $m-logo-border;
        font-size: $m-font-big;

        &.logo-initials {
          padding: ($m-navbar-btn-size - $m-font-big)/2 0;
        }
      }

      .username {
        display: inline-block;
        font-size: $m-font-big;
        vertical-align: middle;
      }
    }

    .navbar-user-menu {
      margin: 10px 0 0 0;
      @include border-radius(0);
      @include box-shadow(none);

      .observation {
        padding: 3px 14px;
        font-size: $m-font-small;
        color: $m-font-color-gray;
      }
    }
  }

}

#navbar-menu {
  @include navbar-lists;
  float: right;
}

#navbar-right {
  @include navbar-lists;
  float: right;
}

#navbar-left {
  @include navbar-lists;
  float: right;
}

#navbar-logo {
  white-space: nowrap;
  margin: ($m-navbar-height - 60px)/2 0;
  @include mconf-clearfix;
  display: inline-block;
  background: image-url('logos/mconf-color-transp.png') no-repeat left top;
  background-size: 116px 60px;
  width: 116px;
  height: 60px;
  float: left;
}

#content-notification {
  margin: 0;
  background: $m-alert-warn-bg;

  color: $m-alert-warn-font;
  @include font-size($m-font-medium);
  text-align: center;
  @include mconf-clearfix;
  padding: 15px;

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

#footer, #footer-mconf {
  /* TODO TEMPORARY */
  display:none;

  @include mconf-clearfix;
  @include make-row;
  margin: 0 auto;
  padding: 10px 0 0 0;
  /* padding-left: $m-sidenav-width-md; */

  clear: both;
  color: $m-footer-font-color;
  //margin-top: 30px;
  background: $m-footer-bg-color;
  border-top: 1px solid $m-footer-border-color;

  a {
    @include link-colors($m-footer-link-color, $m-footer-link-color-hover, $m-footer-link-color-active);
  }

  #footer-left {
    padding: 0 16px;
    text-align: left;
    @include make-xs-column(7);
  }

  #footer-right {
    text-align: right;
    @include make-xs-column(5);
    padding: 0 16px;

    ul { float: right; }
  }

  #footer-links {
    list-style-type: none;
    @include mconf-clearfix;
    float: right;
    padding: 2px 8px;

    li {
      float: left;
      margin: 5px 10px;
    }
  }

  #footer-languages {
    float: right;
    font-size: $m-font-small;
  }

  #footer-copyright {
  }

  #footer-powered {
    clear: both;
    margin-top: 8px;
    text-align: left;
    @include font-size($m-font-small);
  }

}

#footer-logo {
  float: left;
  color: #888;
  float: left;
  margin-right: 35px;

  a { @include link-colors(#bbb, $m-link-color-hover, $m-link-color-active); }

  span { display: block; }
}

#content {
  @include make-row;
  width: 100%;
  margin: 0 auto;

  // best way found to use mconf-clearfix and still get the element
  // centralized and with the correct margins/paddings
  @include mconf-clearfix;
  overflow: visible;
}

#sidebar, .sidebar {
  background: $m-sidebar-bg-color;
  border-right: 1px solid $m-sidebar-border;
  padding: $m-sidebar-padding;

  margin: $m-content-vertical-padding 0 0 $m-content-vertical-padding;
  border-radius: 4px;
  border: 0;

  .sidebar-title {
    font-size: $m-font-double;
    line-height: 1.1;
    margin-bottom: 15px;
    padding: 0 10px;
    text-align: center;
  }

  .sidebar-subtitle {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 15px;
    padding: 0 10px;
    color: $m-font-color-gray;
  }

  .sidebar-actions {
    margin: 20px 0;
    padding: 0 10px;
    text-align: center;
  }

  /* .content-block-container { */
  /*   margin-bottom: 10px; */
  /*   clear: both; */
  /* } */

  /* .content-block { */
  /*   clear: both; */
  /*   padding: 10px; */
  /* } */

  /* .content-block-middle { */
  /*   clear: both; */
  /* } */

  /* .content-block-footer { */
  /*   text-align: right; */
  /*   margin-top: 10px; */
  /*   padding-top: 2px; */
  /*   padding-right: 5px; */
  /*   clear: both; */
  /* } */

  /* .content-block-header { */
  /*   @include mconf-clearfix; */
  /*   h3, h4 { */
  /*     float: left; */
  /*     margin-top: 0; */
  /*     img { margin-bottom: -3px; } */
  /*   } */
  /* } */

  .sidebar-top-action-button {
    @include mconf-clearfix;
    text-align: center;
    margin: 0 10px 20px 10px;

    /* reduce the buttons a bit */
    .btn-large {
      padding-top: 7px;
      padding-bottom: 7px;
    }

    .btn {
      margin-bottom: 5px;
    }

    .pending-join-request {
      border: 1px solid $m-border-color-normal;
      border-radius: $m-border-radius-base;
      padding: 10px;
      background: $m-site-bg-color;

      span {
        display: block;
        margin-bottom: 10px;
      }

      .btn, .comment {
        display: inline-block;
        margin: 0 5px;
      }
    }
  }

  .toolbar {
    margin-bottom: 10px;
    padding: 5px 10px;
    background: $m-light-gray;
    @include border-radius($m-border-radius-base);
    clear: both;
    text-align: center;
  }

  /* To make buttons that ocuppy all width in the sidebar, usualy at the top,
     look a bit better */
  .btn-block-wrapper {
    padding: 0 5px;
    margin-bottom: 10px;
    @include mconf-clearfix;

    .btn-block {
      float: left;
    }
  }
}

#sidebar-menu {
  font-size: $m-font-medium;
  @include mconf-clearfix;
  text-align: right;

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    margin: 20px 0;
    display: block;

    a {
      @include link-colors($m-font-color, $m-link-color-hover, $m-link-color-hover, $m-font-color);
      white-space: nowrap;
      display: block;
      border-right: $m-active-item-border-off;
      padding: 5px 15px;
      position: relative;
      padding-right: 30px;

      &::after {
        content: '';
        border-bottom: 4px solid transparent;
        border-top: 4px solid transparent;
        border-left: 4px solid $m-border-color-normal;
        display: inline-block;
        height: 0;
        /* opacity: 0.3; */
        vertical-align: top;
        width: 0;
        top: 12px;
        right: 5px;
        position: absolute;
      }

      &:hover, &:focus, &.active {
        text-decoration: none;
        color: $m-active-item-border-color;
        &::after {
          border-left-color: $m-active-item-border-color;
        }
      }

      &.active {
        font-weight: $m-font-weight-bold;
        /* &:hover { */
        /*   color: $m-active-item-border-color; */
        /* } */
      }
    }
  }
}

#content-middle {
  background-color: $m-site-bg-color;
  @include mconf-clearfix;
  overflow: visible;
  padding: $m-content-vertical-padding $m-site-horizontal-padding;

  h1 {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
  }

  h3 {
    margin-bottom: 8px;

    // horitontal line in the title
    &.horizontal-line {
      height: 13px;
      border-bottom: 3px solid #eee;
      margin-bottom: 15px;
      span {
        background: white;
        padding-right: 15px;
      }
    }
  }

  @mixin content-block-pagination {
    // adapt bootstrap's .pagination
    @include mconf-clearfix;
    .pagination {
      height: auto;
      margin: 2px 0;
      float: right;
      ul {
        margin: 0;
        background-color: white;
      }
      a {
        padding: 0 12px;
        line-height: 30px;
      }
      span {
        padding: 0;
        border: 0;
        line-height: 30px;
      }
    }
  }

  /* .content-block-container { */
  /*   @include block-wrapper-active; */
  /* } */

  /* .content-block { */
  /*   clear: both; */
  /*   margin: 10px 0 30px 0; */
  /* } */

  /* .content-block-footer { */
  /*   text-align: center; */
  /*   clear: both; */
  /*   margin: 5px 0; */
  /*   color: $m-color-primary; */
  /*   font-weight: bold; */
  /*   font-size: $m-font-small; */
  /*   @include content-block-pagination; */
  /* } */

  /* .content-block-middle { */
  /*   padding: 5px 0; */
  /*   clear: both; */
  /* } */

  /* .content-block-header { */
  /*   @include mconf-clearfix; */
  /*   margin: 5px 0; */

  /*   img { float: left; } */
  /*   h3, h4 { */
  /*     float: left; */
  /*     margin: 0; */
  /*   } */

  /*   .toolbar { */
  /*     float: right; */

  /*     a { margin-right: 10px; } */
  /*   } */

  /*   @include content-block-pagination; */
  /* } */
}

#page-menu {
  background: $m-page-menu-bg-color;
  padding: 10px;
  margin-bottom: 20px;
  @include border-radius($m-border-radius-base);

  ul {
    margin: 0;
    padding: 0;

    li {
      @include mconf-clearfix;
      display: inline-block;
      @include font-size($m-font-medium);

      a {
        padding: 5px 15px;
        display: block;
        transition: all .3s ease;
        text-decoration: none;
        @include border-radius($m-border-radius-base);
        @include link-colors($m-page-menu-font-color, $m-page-menu-font-color-hover, $m-page-menu-font-color-hover, $m-page-menu-font-color);
        border: 1px solid $m-page-menu-bg-color;

        &:hover {
          background: $m-page-menu-active-bg;
        }
      }

      &.active {
        a {
          background: $m-site-bg-color;
          border: 1px solid $m-page-menu-active-border;
          color: $m-page-menu-active-color;

          &:hover {
            color: $m-page-menu-active-color;
          }
        }
      }
    }
  }
}

#page-actions {
  margin-bottom: 20px;
  @include mconf-clearfix;

  .dropdown {
    float: right;
  }
}

// the upcoming events are shown in spaces/show and my/home
#sidebar-upcoming-events {
  .event-timezone {
    color: #777;
    @include font-size($m-font-small);
  }

  .event-wrapper {
    clear: both;
    margin: 5px 0 10px 0;

    .event-title {
      display: block;
    }

    .event-date {
      display: block;
      @include font-size($m-font-small);
      color: #777;
    }
  }

  .event-category {
    clear: both;
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
  }
}

// To emphasize events that are hapenning now. Used in the pages that show events
// and in spaces.
.events-hapenning-now {
  .thread {
    background: $m-light-gray;
    border-left: 5px solid $m-bright-blue;
  }
}

// for elements highlighted using rails' highlight() view helper.
strong.highlight {
  background: $m-highlight-bg;
}

// for elements that might contain long words that can break the layout
.break-word {
  word-break: break-all;
}

// visibility of a resource: private space, public space, private event, etc.
.resource-visibility {
  display: block;
  font-weight: normal;

  .icon {
    float: none;
  }

  &.small {
    @include font-size($m-font-small);

    .icon {
      @include font-size($m-font-small);
      width: $m-font-small;
      height: $m-font-small;
      line-height: $m-font-small;
      margin: 0;
    }
  }
}

// for small date/time texts
.small-date {
  @include small-date;
}

// resources waiting moderation
.user-waiting-moderation, .space-waiting-moderation {
  color: $m-font-color-gray;
}

// The fake input we use to disable autocomplete in other inputs
.input-disable-autocomplete {
  display: none;
}

// Recent activities
.removed-object-text {
  text-decoration: line-through;
  color: lighten($m-font-color, 30);
}

// tablets/mobiles
@media (max-width: 767px) {
  body.responsive {
    padding-left: 0;
    padding-right: 0;

    #content-container {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

// We override this because the lib bootstrap-modal also does it and it doesn't really
// work well with boostrap 3's new markup, that includes .modal-dialog and .modal-content
.modal {
  background: inherit;
  border: 0;
  box-shadow: none;
}

#confirmation-dialog {
  .modal-body {
    text-align: center;
  }

  .modal-body {
    @include font-size($m-font-medium);
    padding: 30px;
  }

  .modal-footer {
    // wider space between footer buttons and links
    .btn, a {
      margin: 0 3px;
    }
  }
}

// Chips are small containers with a name and an image, usually used for
// user identification
.chip {
  display: inline-block;
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  line-height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid #e4e4e4;

  .logo-user, img {
    height: 32px;
    width: 32px;
    float: right;
    margin: 0 -12px 0 8px;
    border-radius: 50%;
  }
}

/* Labels for authentication methods */
.label-auth-local {
  background: $m-green;
}
.label-auth-ldap {
  background: lighten($m-green, 15);
}
.label-auth-shibboleth {
  background: darken($m-green, 15);
}

/* Labels for recording status */
.label-recording-published {
  background: $m-green;
}
.label-recording-unpublished {
  background: $m-yellow;
}
.label-recording-available {
  background: $m-green;
}
.label-recording-unavailable {
  background: $m-yellow;
}
.label-recording-size {
  background: $m-light-gray;
  color: $m-font-light;
  border: 1px solid $m-border-color-normal;
}


// date of comments, posts, etc.
.updated-at {
  font-size: $m-font-normal;
  font-style: italic;
  font-weight: normal;
  margin-left: 8px;
  color: #777;
}


.file-uploader {
  margin: 0 auto;
  width: auto;
  white-space: nowrap;
  border-radius: $m-border-radius-base;
  @include transition(all 0.2s ease-in);
  @include mconf-clearfix;

  .qq-uploader {
    @include mconf-clearfix;
    padding: 24px;
    text-align: center;
  }

  i {
    color: #fff;
    margin-right: 8px;
  }

  .drag-files {
    display: block;
    background: $m-light-gray;
    padding: 16px;
    border: 1px dashed $m-border-color-medium;
    margin-top: 8px;
  }

  .qq-upload-drop-area {
    background: none;
    border: 3px dashed $m-bright-blue;
    min-height: auto;
  }

  &.file-uploader-logo {
    position: absolute;
    top: 25%;
    transform: translate(-50%, 0%);
    left: calc(50%);

    .qq-uploader {
      padding: 0;
    }

    .upload-button {
      background: darken($m-dark-gray, 5); //$m-color-secondary;
      color: #fff;
      //font-size: $m-font-medium;
      padding: 4px 8px;
      border-radius: $m-border-radius-base;
      opacity: 0.9;
      float: left;
      width: 100%;

      &:hover {
        opacity: 1;
        background: darken($m-dark-gray, 10);
      }
    }

    .qq-upload-list {
      clear: both;
      opacity: 0.85;
    }
  }

}

#sidebar-leave-space {
  text-align: center;
  margin-top: 24px;

  .btn:hover {
    background-color: #ff1103;
    border-color: #b60a00;
    color: #fff;

    i {
      color: #fff;
    }
  }
}

#sidebar-menu .requests-notification-label,
.requests-notification-label {
  display: inline-block;
  margin: 19px 24px 0 0;
  float: right;

  i.icon {
    color: #fff;
    &:active, &:hover { color: #fff; }
  }
}
#page-menu .requests-notification-label {
  margin: 0px 0px 0 8px;
}

#user-spaces .requests-notification-label {
  margin: 0px 0px 0px 8px;
  float: left;
  padding: 5px 7px;
}


#login-extra-links {
  margin: 32px auto 0 auto;
  padding: 0;
  text-align: center;

  li {
    border-top: 1px solid $m-navbar-internal-border-color;
    font-size: $m-font-medium;

    a {
      display: block;
      padding: 16px;
      @include link-colors($m-navbar-font-color, $m-link-color-hover, $m-link-color-active);
    }

    &:last-child {
      border-bottom: 1px solid $m-navbar-internal-border-color;
    }
  }
}

#social-login-section {
  text-align: center;
  margin: 30px 0px;

  #google-login {
    width: 48%;
    display: inline-block;
    background: #DD4B39;
    .icon-mconf-google {
      font-size: 22px;
    }
    .icon {
      border-right: 1px solid #FFF;
      width: 45px;
      float: left;
      padding: 10px 5px 10px 0px;
    }
    .info {
      border-left: 1px solid #FFF;
      width: calc(100% - 45px);
      float: left;
      padding: 10px 0px;
      margin-left: -1px;
    }
  }
  #facebook-login {
    width: 48%;
    display: inline-block;
    background: #3b5998;
    .icon-mconf-facebook {
      font-size: 22px;
    }
    .icon {
      border-right: 1px solid #FFF;
      width: 45px;
      float: left;
      padding: 10px 5px;
    }
    .info {
      border-left: 1px solid #FFF;
      width: calc(100% - 45px);
      float: left;
      padding: 10px 0px;
      margin-left: -1px;
    }
  }
  .login-text {
    color: #FFFFFF;
    font-weight: bold;
    display: inline-block;
  }
}

.table-observation-row {
  color: $m-font-light;
  text-align: center;
  font-size: $m-font-small;
  background: $m-very-light-gray;
}

/* Single-line text truncated with ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Card" with a log and some information, mostly for users */
.resource-card {
  @include broken-img-parent;
  margin: 0 auto 20px 0;
  text-align: center;

  .resource-logo {
    position: relative;

    img {
      width: 100%;
      height: auto;
      border: 1px solid $m-border-color-normal;
      padding: 3px;
      background: $m-site-bg-color;

      &.editing {
        opacity: 0.5;
        border-color: $m-dark-gray;
      }
    }
  }

  .data {
    @include mconf-clearfix;
    text-align: center;
    margin-top: 10px;

    a, span {
      display: block;
      margin-bottom: 3px;
    }

    .data-main {
      @include font-size($m-font-big);
      font-weight: bold;
    }

    .data-other {
      min-height: calculate-px($m-font-big) + 2px;
    }
  }

  &.resource-user {
    img {
      border-radius: 50%;
      max-width: 220px;
    }

    .label-superuser, .label-gravatar {
      position: absolute;
      bottom: 5px;
      padding: .3em .7em .4em;
      white-space: nowrap;
      font-weight: normal;
      background: $m-red;
      color: #fff;

      /* center */
      left: calc(50%);
      transform: translate(-50%, -50%);
    }

    .label-gravatar {
      bottom: 30px;
      background: $m-blue;
    }
  }

  &.resource-space {
    img {
      max-width: 300px;
    }
  }
}

.card-container {
  @include make-row;

  .card-item {
    float: left;
    @include size(30%, 300px);
    margin: 1.6666%;
    background: $m-site-content-bg-color;
    padding: 20px;
    @include border-radius($m-border-radius-large);
    text-align: center;

    > .logo {
      @include logo-container(84px);
      @include mconf-clearfix;
      margin: 10px auto;
    }

    .card-item-title {
      font-size: $m-font-medium;
      color: $m-color-primary;
      margin: 8px 0;
    }

    .card-tags {
      margin: 10px 0;
    }
  }
}