cartodb/app/assets/stylesheets/public/public_map_info.css.scss

/**
 *  Styles for info within public view (title, export options, user info ...)
 *
 */

@import "compass/css3/inline-block";
@import "compass/css3/border-radius";
@import "../old_common/vars";
@import "../old_common/mixins";

.cartodb-info {
  padding: 38px 0 36px;
  border-bottom: 1px solid #D1D1D1;
  background: #F6F6F6;
}

.user_details {
  @include clearfix();
}

// Table or vis details (title, description, ...)

.cartodb-info .inner .details h1 {
  margin: 0 0 5px;
  padding: 0;
  color: #444;
  font-family: 'ProximaNova-Semibold', $text-fonts2;
  font-size: 27px;
  font-weight: normal;
  line-height: 110%;
}

.cartodb-info .inner .details p {
  margin: 0;
  padding: 0;
  color: #868686;
  font-family: $text-fonts;
  font-size: 15px;
  line-height: normal;
}

.embed-left-col.details .content {
  min-height: 46px;
}

.embed-left-col.details .content p.description {
  margin: 0 0 12px;

  strong {
    font-weight: bold;
  }

  em {
    font-style: italic;
  }

  a {
    color: #397DB8;
    text-decoration: none;

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

.embed-left-col.details .content p.options a {
  color: #397DB8;
  font-family: $text-fonts;
  font-size: 15px;
  line-height: 120%;
  text-decoration: none;

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

// User info

.cartodb-info .inner .user {
  padding: 2px 0;
  text-align: right;
}

.cartodb-info .inner .user .avatar {
  display: inline-block;
  width: 46px;
  height: 46px;
  border-radius: 100px;
  background: #FFF;
  vertical-align: top;
}

.cartodb-info .inner .user .content {
  text-decoration: none;

  &:hover .user-info h5 {
    text-decoration: underline;
  }
}

.cartodb-info .inner .user .user-info {
  display: inline-block;
  margin: 5px 8px 0 0;
  text-align: right;
  vertical-align: top;
}

.cartodb-info .inner .user h4,
.cartodb-info .inner .user h5,
.cartodb-info .inner .user .count {
  margin: 0;
  padding: 0;
  font-family: 'ProximaNova-Semibold', $text-fonts2;
  font-weight: normal;
}

.cartodb-info .inner .user h4 {
  margin: 0 0 6px;
  color: #444;
  font-size: 17px;
}

.cartodb-info .inner .user h5 {
  color: #858585;
  font-size: 15px;
}

// Hello media queries

/* iPhone portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
  .cartodb-map-data .cartodb-info {
    padding: 20px 0;
  }

  .cartodb-map-data .cartodb-info .inner .details h1 {
    padding-right: 0;
    font-size: 20px;
  }
}

@media only screen and (max-width: 710px) {
  .cartodb-map-data .cartodb-info .inner .details h1 {
    padding-right: 20px;
  }

  .cartodb-info .inner .user.embed-right-col {
    float: right;
    text-align: left;
  }

  .cartodb-info .inner .user.embed-right-col .user-info {
    position: absolute;
    left: 75px;
    float: right;
    text-align: left;
  }

  .cartodb-info .inner .details {
    margin-bottom: 30px;
  }
}

/* iPhone landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
  .cartodb-map-data .cartodb-info .inner .details h1 {
    padding-right: 0;
    font-size: 20px;
  }
}

@media only screen and (min-width: 711px) and (max-width: 1035px) {
  .cartodb-map-data .cartodb-info .inner .details h1 {
    padding-right: 20px;
  }

  .inner .user.embed-right-col {
    width: 200px;
    float: right;
  }

  .inner .details.embed-left-col {
    max-width: 70%;
    float: left;
    border-right: 1px solid #D1D1D1;
  }

  .cartodb-info .inner .details.embed-left-col p {
    padding-right: 20px;
  }
}