diaspora/app/assets/stylesheets/mobile/mobile.scss

@import "bootstrap-complete";
@import "colors";
@import "_mixins";
@import "vendor/autoSuggest";
@import "_flash_messages";
@import 'entypo';
@import 'icons';

@import "mobile/header";
@import "mobile/tags";
@import "mobile/conversations";
@import "mobile/settings";
@import "mobile/stream_element";

a {
  color: #2489ce;
  text-decoration: none;
}

code {
    white-space: normal;
    word-wrap: break-word;
  }

body {
  background: {
    image: image-url("mobile/hatched-light.jpg");
    /* scale background image down for iOS retina display */
    size: 200px;
  }
  padding: 0;
}

h3 {  margin-top: 0; }
.clear { clear: both; }
#main { padding: 55px 10px 0 10px; }

.message {
  padding-left: 2px;
}

.stream_element,
.comments {
  overflow: auto;
  position: relative;
  text-align: left;
  min-height: 34px;
  padding: 10px 0 0 0;
  list-style: none;

  * { max-width: 100%; }

  .avatar {
    border-radius: 4px;
    float: left;
    margin-top: 0;
    max-width: 35px;
  }

  .from {
    a {
      color: #444;
      font-weight: bold;
    }
    margin-bottom: 2px;
    word-wrap: break-word;
    overflow: hidden;
    .time_notif {
      font-weight: normal;
      float: right;
      padding-right: 5px;
    }
  }

  > .content, .reshare > .content { padding: 6px; }
  .info{ margin-top: 0; }
  .photo_attachments{ margin-top: 6px; }
  .timeago{ font-weight: normal; }
}

.shield{
  padding: 10px;
  font-size: larger;
}

.nsfw-shield{
    height: 100%;
    width: 100%;
    background-color: LightGrey;
    border-radius: 0;
    z-index: 2;
}

.stream_element:not(.shield-active) .shield{
  display: none;
}

.stream_element.shield-active .nsfw-hidden{
  display: none;
}

.new_comment {
  padding: 10px;
}

.stream_element .comments {
  width: 100%;
  margin: 0;
  top: 3px;
  .content {
    padding: 0;
  }

  .comment {
    padding: {
      top: 10px;
      bottom: 5px;
    }
  }
}

.comment {
  border: {
    top: 1px solid #ccc; };
}

.login_error,
.login_alert {
  color: #DF0101;
  text-shadow: 1px 1px 5px #666;
}

.login_notice {
  color: rgb(10, 150, 10);
  text-shadow: 1px 1px 20px rgb(126, 240, 77); }

#login_form {
  padding: 0;

  /* ensure url bar is banished from view on iOS */
  margin-bottom: 40px !important;

  .login-container {
    padding: 10px;
    label, legend { text-transform: uppercase; }
  }
}

.settings_container,
.stream_element,
#login_form {
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

  background-color: #fff;
  margin-bottom: 10px;

  border: 1px solid #bbb;
  border-bottom-color: #aaa;
}

.stream_element {
  padding: 0px;

  div.img img.avatar {
    margin: 10px;
  }

  .bd {
    padding-top: 10px;
  }

  .media {
    padding: 0;
  }

  .photo_attachments {
    border-radius: 3px 3px 0 0;

    border: {
      bottom: 1px solid #ccc;
    }

    img.big-stream-photo {
      border-radius: 3px 3px 0 0;
      width: 100%;
    }
    a {
      padding: 0; }
    margin-top: 0;
  }
}

.photo_attachments {
  position: relative;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  img {
    border-radius: 3px;
    margin: 0;
    padding: 0; } }


#main_stream {
  .from {
    white-space: nowrap;
    overflow: hidden;
  }
}

.more-link, .no-more-posts {
  display: block;
  text-align: center;
  padding: 0;
  margin: 20px 0;
  border-radius: 5px;
  border: 1px solid $text-grey;

  background: { color: rgba(220,220,220,0.8); }

  h1, h2 {
    color: $text-grey;
    padding: 20px;
    text-shadow: 0 2px 0 #fff;
    margin: 0;
  }

  &:hover, &:active{
    text-decoration: none;
    border: 1px solid $text-dark-grey;
  }
}
.no-more-posts {
  box-shadow: inset 0 1px 5px #777, 0 1px 1px rgba(0,0,0,0.4);
}

.info {
  color: #ccc;
  font: {
    size: smaller;
  };
}

.via {
  font: {
    weight: bold;
  }
}

.via {
  a {
    color: #ccc; } }

.comment {
  .timeago {
    color: $text-dark-grey; } }

.info {
  margin: {
    top: -2px; }; }

.photo_mobile {
  border-radius: 0px 0px 5px 5px !important;
  font-size: 14px;
}

#show_content {
  padding-bottom: 24px;
  border-bottom: 1px solid #bbb;
  font-size: larger;
  text-align: center;

  img {
    max-width: 100%;
  }

  .photo {
    text-align: center;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-color: #DDDDDD #BBBBBB #AAAAAA;
    border-bottom-width: 0px;
    margin-top: 12px;
    min-height: 100px;
    line-height: 5;
  }

  .controls {
    font: {
      size: smaller; };
  }

  &.photos {
    border-bottom: 0 !important;
  }
}

#photo_controls {
  .arrow {
    font-size: 10em;
    text-decoration: none;
    text-shadow: 0 0 3px $white;
    position: fixed;
    bottom: -0.2em;
    z-index: 1;
    &.left {
      left: -0.2em;
    }
    &.right {
      right: -0.2em;
      text-align: right;
    }
    .entypo-chevron-left, .entypo-chevron-right { margin-right: 0; }
  }
}

.header-full-width {
  margin: -10px -10px 0;
  padding-top: 5px;
  background-color: #fff;
  border-bottom: 1px solid #aaa;
}

#author_info {
  word-wrap: break-word;

  img {
    border-radius: 4px;

    height: 70px;
    width: 70px;
    margin: 10px;
    float: left;
  }

  .content {
    padding-left: 90px;

    h2 {
      font-size: 20px;
      line-height: 20px;
      margin-bottom: 0px;
    }

    .description {
      font: {
        weight: normal;
        size: small;
      };
      color: $text-grey;
    }
  }

  .bottom_bar {
    position: static;
  }
}

.profile_stream {
  clear: both;
  padding-top: 12px;
}

.right {
  float: right;
}

.bottom_bar {
  border-radius: 0 0 5px 5px;
  z-index: 3;
  display: block;
  position: relative;
  padding: 10px;
  padding-top: 8px;
  background: $background-grey;

  margin: {
    top: 10px; };

  border: {
    top: 1px solid $border-grey;
  };

  min-height: 22px;

  > a,
  .show_comments {
    @include transition(color);
    color: $text-grey;
    font-weight: bold;
  }

  .show_comments {
    position: relative;
    top: 3px;
    color: #ccc;
  }

  a.show_comments {
    color: $text-grey;

    &.active:not(.bottom_collapse) {
      color: #444;
      padding: {
        right: 14px;
      }
      background: {
        image: image-url("mobile/arrow_down_small.png");
        position: center right;
        repeat: no-repeat;
      }
    }
  }

  #bottom_bar_tabs {
    display: table;
    width: 100%;
    text: {
      align: center;
    }
    border: {
      bottom: 1px solid #ccc;
    }
    font: {
      size: 28px;
    }
    color: #ccc;

    .tab {
      display: table-cell;
      position:relative;
      top: -5px;

      border: {
        right: 1px solid #ccc;
      }

      &:last-child {
        border: none;
      }
    }
  }
}

.floater {
  float: right;
}

.photo_area {
  border-radius: 3px;
  text-align: center; }

.image_link {
  display: inline-block;
  background: {
    size: 20px;
    repeat: no-repeat;
    position: center;
  };

  height: 20px;
  width: 20px;
  padding: 0;
  margin-left: 15px;

  &:last-child{
    margin-right: 5px;
  }

  &.loading {
    background-image: image-url("mobile-spinner.gif");
  }
}

.reshare_action {
  background-image: image-url("mobile/reshare_mobile.png");
  &.active {
    background-image: image-url("mobile/reshare_mobile_active.png");
  }
}

.like_action {
  background-image: image-url("mobile/heart_mobile_grey.png");
  &.active {
    background-image: image-url("mobile/heart_mobile_red.png");
  }
}

.comment_action.image_link {
  background-image: image-url("mobile/pencil_mobile_grey_active.png");
  &.inactive {
    background-image: image-url("mobile/pencil_mobile_grey.png");
  }
}

#new_status_message {
  margin: 0;

  fieldset {
    padding: 10px;

    .service_icon {
      cursor: pointer;

      &.dim {
        opacity: 0.6;
      }
    }
  }

  .counter {
    font-size: 14px;
  }

  textarea {
    min-width: 100%;
    max-width: 100%;
  }
}

select {
  font-size: larger;
    padding: 7px;
}

.new_comment {
  padding: 10px 0;
  padding-top: 20px;
}

.comment.add_comment_bottom_link_container {
  position: relative;
  text-align: center;
  padding: 25px !important;
}

.post_stats {
  position: absolute;
  right: 8px;
  top: 31px;
  z-index: 2;

  span {
    color: $text-dark-grey;
    font-weight: bold;
    padding: 2px 7px;
    margin: 5px 6px;
    background: {
      color: $background-grey;
    }
  }
}

.additional_photo_count {
  opacity: 0.5;

  position: absolute;
  padding: 3px 8px;
  font-weight: bold;
  background: #fff;
  border: 1px solid #222;
  border-bottom: 2px solid #111;
  bottom: 10px;
  right: 10px;
  line-height: 16px;
}

.reshare {
  border-bottom: 1px solid #ccc;
  padding: {
    bottom: 10px;
  }
  position: relative;

  .reshare_via {
    width: 100%;
    position: absolute;
    bottom: -10px;
    text-align: center;
    span {
      padding: 0 10px;
      font-weight: bold;
      color: $text-grey;
      background: {
        color: #fff;
      }
    }
  }
}

.navbar-inner .right {
  position: absolute;
  right: 12px;
  top: 0px;
}

.navbar-fixed-top {
  position: fixed !important;
  max-height: 45px !important;
  min-height: 45px !important;
  height: 45px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  overflow: hidden;
}


.notifications {
  list-style: none;
  margin: 0;
  clear: right;

  &, & ul { padding: 0; }
}

.notifications_for_day {
  margin-left: 12px;
}

.notification_day_header {
  margin-bottom: 5px;
}

.message_count {
  border-radius: 2px 2px 2px 2px;
  float: right;
  margin: 10px 10px 1px 5px;
  padding: 0 2px 1px;
  position: relative;
  background-color: #999;
  color: #eee;
  font-size: 10px;
  line-height: 12px;

}

.unread_message_count {
  border-radius: 2px 2px 2px 2px;
  float: right;
  margin: 10px 2px 1px 5px;
  padding: 0 2px 1px;
  position: relative;
  background-color: #B11;
  color: #EEE;
  font-size: 10px;
  line-height: 12px;
}

.last_author {
  position: relative;
  margin: 10px 10px 2px;
  float: right;
  font-size: 12px;
  color: #444;
}

.timestamp {
  position: relative;
  float: right;
  margin-left: 5px;
  font-weight: normal;
  color: #3F8FBA;
}

h3.ltr {
  font-size: 18px;
  line-height: 27px;
  font-weight: bold;
}

.ltr  {
  border: 0 none;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 15px 15px;
  vertical-align: baseline;
  word-wrap: break-word;
}

form#new_conversation.new_conversation {
  background-color: #FFFFFF;
  border-bottom: 1px solid $border-dark-grey;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 5px 10px;
  h4 {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
  }
}

textarea#conversation_text {
  font-size: larger;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.registrations_error,
.registrations_notice {
  color: #DF0101;
  text-shadow: 1px 1px 5px #666;
}

form#new_user.new_user input.btn {
  white-space: normal;
}

.unread {
  background-color: LightGrey;
  .ltr {
    font-weight: bold;
  }
}

.read.stream_element {
  color: dimGray;
  .from {
    a {
      color: dimGray;
      font-weight: bold;
    }
  }
}

.media { padding: 12px 0 }

.conversation_error {
  color: #DF0101;
  text-shadow: 1px 1px 5px #666;
}

.conversation_notice {
  color: rgb(10, 150, 10);
  text-shadow: 1px 1px 20px rgb(126, 240, 77);
}

#conversation_inbox {
  div.pagination {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

    ul > li > a {
      padding: 4px 8px;
    }

    .disabled a{
      background: $background-grey;
    }
  }
}

input#user_password, #user_username, #user_password_confirmation, #user_email {
  height: 30px;
}

#flash_notice,
#flash_alert,
#flash_error {
  .message {
    min-width: 200px;
    max-width: 400px;
  }
}

#session.message {
  padding: 10px 12px 8px;
}

#registration.message {
  padding: 1px
}

.session_mobile {
  margin-top: -55px;
}

h1.session {
  font-size: 40px;
  font-weight: 200;
}

.landing  {
  padding: 20px;
  margin: -10px -20px 10px -20px;
  background-color:#4b4b4b;
  z-index: 10;
  position: relative;
  text-align: center;
}

form p.checkbox_select {
  position: relative;
  label {
    left: 25px;
    top: 4px;
    position: absolute;
    font-size: 1em;
  }
  img {
    position: relative;
    top: 6px;
  }
}

#profile_photo_upload {
  margin-top: 5px;
  min-height: 100px;
  position: relative;
  margin-bottom: 15px;
  text-align: center;
  padding: 0;

  img {
    border-radius: 5px;
    box-shadow: 0 1px 2px #666;

    &.avatar {
      @include transition(opacity, 0.5s);
      &.loading {
        opacity: 0.3;
      }
    }
  }
}

#birth-date {
  text-align: center;
  select{
    width: 32%;
    display: inline;
    &:first-of-type{ float: left; }
    &:last-of-type{ float: right; }
  }
}

#file-upload.button {
  @include button-gradient($light-grey);
  border-radius: 3px;
  box-shadow: 0 1px 1px #cfcfcf;
  @include transition(border);

  display: inline-block;

  font {
    style: normal;
    size: 12px;
  }
  color: #505050;

  padding: 4px 9px;

  min-height: 10px;

  border: 1px solid;

  cursor: pointer;
  white-space: normal;

  &:hover {
    @include button-gradient-hover-no-saturation($light-grey);
    color: #505050;
    text-decoration: none;
    border: 1px solid;
  }
}

form#update_profile_form {
  select {
    padding: 3px;
  }

  .submit_block { margin-bottom: 20px; }
}

select#user_language, select#user_color_theme, #user_auto_follow_back_aspect_id, #aspect_ids_ {
  padding: 3px;
}

.hero-unit-mobile {
  padding: 10px;
  font-size: 14px;
  line-height: 18px;
  color: inherit;
  background-color: $background-grey;
  border-radius: 10px;
}

.search-mobile {
  text-align: center;
  padding-top: 30px;
}

input#q.search {
  margin-bottom: 20px;
}

select#aspect_ids_ {
  width: auto !important;
  float: right;
  margin: 0px;
}

#file-upload-spinner {
  top: 0px;
}

#publisher_mobile {
  float: right;
}

#file-upload-publisher {
  float: left;
  padding: 3px 12px;
  cursor: pointer;
  .entypo-camera { margin-right: 0; }
}

#publisher_textarea_wrapper {
  border-radius: 2px;
  margin: 12px 0px;
  background: #fff;
  position: relative;
  padding-right: 10px;

  #hide_publisher  {
    opacity: 0.3;
    z-index: 5;
    padding: 3px;
    position: absolute;
    right: 6px;
    top: 0;

    &:hover {
      opacity: 1;
    }
  }

  &.active {
    border: 1px solid $border-dark-grey;
  }

  textarea {
    z-index: 2;
    border: none;

    &:focus {
      outline: 0;
      background: transparent;
    }
  }

  &.with_attachments {
    padding-bottom: 55px;
    border: 1px solid #CCCCCC;
  }

  #photodropzone {
    z-index: 3;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0 !important;

    li {
      display: table-cell;
      padding-right: 4px;

      img {
        max-height: 55px;
      }

      .circle {
        border-radius: 20px;
        z-index: 1;
        position: absolute;
        right: -7px;
        top: -5px;
        background-color: #333;
        width: 20px;
        max-width: 20px;
        height: 20px;
        max-height: 20px;
        border: 1px solid #fff;
      }

      .x  {
        z-index: 2;
        position: absolute;
        top: -4px;
        right: -1px;
        font-size: small;
        font-weight: bold;
        color: #FFFFFF;
        cursor: pointer;
      }
    }
  }
}

#fileInfo-publisher {
  font-size: small;
  margin: 5px 2px;
  text-align: right;
}

.my_activity {
  height: 16px;
  width: 16px;
}

#big-number {
  font-size: 120px !important;
}

#content {
  font-size: 13px !important;
}

.opengraph {
  width: 100%;
  display: block;
  text-decoration: none;
  margin: 5px 0px 5px 0px;
  border-top: solid 1px $border-grey;
  border-bottom: solid 1px $border-grey;
  padding: 5px 0px 2px 0px;
  overflow: hidden;
  a {
    color: #000;
  }
  img {
    margin: 3px 3px 3px 0px;
    float: left;
    max-width: 80px;
    padding-right: 5px;
  }
  .og-title {
    margin-bottom: 3px;
    font-weight: bold;
  }
}

.remove_post { opacity: 0.5;  }
.remove_comment { opacity: 0.5; }

.center {
  text-align: center;
}

/* --- Getting started page --- */
#hello-there {
  h1, h2, h3 { line-height: normal; }
  h1 { font-size: 25px; }
  h2 { font-size: 20px; }
  h3 { font-size: 15px; }

  h2, #awesome_button {
    margin-top: 30px;
  }
}

// Styles for mobile profile of other users
.user_aspects {
  width: auto !important;
  float: right;
  margin: 0 10px 0 0;
  padding: 3px;

  &, &:focus, &:active{
    box-shadow: none;
    border-color: #CCCCCC;
  }

  &.has_connection {
    background-color: $light-green;
  }
}

/* --- Tag page --- */
#app #main h1 {
  word-wrap: break-word;
}

#email_prefs {
  .checkbox{
    margin: 15px 0;
  }
}
.small-horizontal-spacer { margin: 15px 0; }

.form-control, .form-control:active, .form-control:focus { box-shadow: none; }
.form-control:active, .form-control:focus { border-color: #999999; }

.tag_following_action { margin: 5px 0 10px 0; }