mubot-server/bitmark/public/css/style.css

A server for mubot

html { height: 90%; }
.full-pm-window {
    width: 300px;
    position: fixed;
    display: none;
    bottom: 0px;
    border: 1px solid rgb(176, 176, 176);
    background-color: rgb(255, 255, 255);
}
body {
    background-color: #b8babc;
    height:100%;
    font-size: 14px;
    line-height: 18px;
    padding-top:0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.private_messages { 
  background-color: #ffffff; border: 1px solid #b0b0b0; bottom: 0; display: none;
  height: 348px; position: fixed; width: 300px; font-family: 'Open Sans', sans-serif
}

.nav>li>a, .nav>li>button {
    line-height: 1;
    padding: 0 14px 0 4px;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus {
    color: #101010;
    background-color: #fffff100;
    border-radius: 50px;
    padding: 10px 10px 19px 10px;
    box-shadow: inset 8px -8px 20px 0px #1f0127;
}
.navbar-inverse .navbar-nav .menu-option>a:hover {
    color: #000;
    background-color: transparent;
    box-shadow: inset 8px -8px 20px 0px #a897ad;
    background-color: #fffff100;
    border-radius: 50px;
    padding: 10px 10px 19px 10px;
}
.navbar-inverse .navbar-nav .menu-option>a {
		color: #9d9d9d;
    background-color: transparent;
    /* box-shadow: inset 8px -8px 20px 0px #d1ccd4; */
    background-color: #fffff100;
    border-radius: 50px;
    padding: 0px 0px 19px 0px;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #461265;
    background-color: #fffff100;
}

.topbar { box-shadow: inset -3px -5px 20px 11px #d4d1d8; }
/*inset -3px -5px 20px 11px #c4cac4; }*/

.search-posts { /* background-color: #7f7f7f; */ border-radius: 25px; }

.profile-pic { display:block; max-width: 300px; max-height: 300px }

.btn { padding: 4px 7px 4px 7px; }

#column_container {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
    height: 100%;
}

#row_container {
    margin: 5px;
}

.x:hover{
    background:#BB3333;
    transform: rotate(90deg);
}

.x {
    box-sizing: content-box;
    position:relative;
    overflow:hidden;
    background:#CCC;
    border-radius:2px;
    border:solid 2px #FFF;
    transition: all .3s ease-out;
    cursor:pointer;
    height:20px;
    width: 20px;
}



.x b{
    position:absolute;
    border:solid 10px rgba(255,255,255,0);
}

.x b:nth-child(1){
    border-top-color:#FFF;
    top:-2px;
}

.x b:nth-child(2){
    border-left-color:#FFF;
    left:-2px;
}
.x b:nth-child(3){
    border-bottom-color:#FFF;
    bottom:-2px;
}
.x b:nth-child(4){
    border-right-color:#FFF;
    right:-2px;
}

.x-big b:nth-child(1){
     border-top-color:#b8babc;
     top:-4px;
 }

.x-big b:nth-child(2){
    border-left-color:#b8babc;
    left:-4px;
}
.x-big b:nth-child(3){
    border-bottom-color:#b8babc;
    bottom:-4px;
}
.x-big b:nth-child(4){
    border-right-color:#b8babc;
    right:-4px;
}

.x-big {
    height: 40px;
    width: 40px;
    border:solid 2px #b8babc;
    position:absolute; left:95px; top:0px
}
.x-big b{
    position:absolute;
    border:solid 20px rgba(255,255,255,0);
}

.btnMark:focus {
    outline: none;
}
.btnMark:focus:active {
    outline: none;
}

.btnMark {
    cursor: pointer;
    height: 25.3906px;
    background: rgba(79, 176, 252, 0.08) none repeat scroll 0% 0% / auto padding-box border-box;
    font: normal normal normal normal 15px / 23px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 2px 6px 2px 0px;
    padding: 1px 3px;
}

.iconMark {
    display: inline-block;
    height: 16px;
    width: 16px;
    background: rgba(0, 0, 0, 0) url("https://leathan.xyz/bitmark/mh.png") no-repeat scroll 50% 50% / contain padding-box border-box;
}


.markAmnt {
    color: rgb(255, 0, 255);
    position: relative;
    top: -4px;
    font: normal normal bold normal 11px / 23px helvetica, arial;
    padding: 0px 1px 0px 3px;

}

#cont:before {
    position: absolute;
    content: '';
    background-color:#800080;
    border-radius:50%;
    width: 15px;
    height: 15px;
    pointer-events: none;
}

.reputation {
    color:red;
    position:absolute;
    left:52px;
    top:8px;
}
.balance {
    color:deeppink;
    position:absolute;
    left:52px;
    top:28px;
}
.item {
    position:relative;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:36px;
    top:1px;
    background:purple;
    text-align: center;
    border-radius: 25px 25px 25px 25px;
    color:antiquewhite;
    padding:3.5px 3.5px;
    font-size:11px;
}
.notification{
    background:lightgrey;
    border-radius: 5px 5px 5px 5px;
    color: #000000;
    padding: 15px 15px 15px 15px;
    font-size:11px;
    max-width: 280px;
    min-width: 200px;
    word-wrap: break-word;
    overflow-y: scroll;
    overflow-x: scroll;
    white-space: pre-wrap;
}
.scrollable-menu {
    height: auto;
    max-height: 400px;
    overflow-x:scroll;
}

textarea {
    padding: 10px 20px 10px 30px
}
.pm_text {
    padding-left: 4px;
    padding-right: 4px;
    max-height: 125px;
    overflow: scroll;
}
.avatar {
    margin-bottom: 0px;
    height: 28px;
    width: 28px;
    margin-right: 5px;
    float: left;
    margin-top: 3px;
    border-radius: 5px;
    border: 0;
    vertical-align: middle;

}
.post-body {
    margin-bottom: 10px;
    position: relative;
}

.timestamp {
    font-size: 13px;
    color: #657786;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
}
.posting {
    background-color: #fff;
    border-radius: 25px;
    border: 1px solid #e6ecf0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 15px;
    padding: 15px;
    padding-bottom: 5px;
    padding-top: 0px;
    cursor: pointer;
    position: relative;
    min-height: 51px;
    width: 400px;
}
.spacer {
    display:block;
    height: 20px;
}
.spacer:before {
    content: "";
}
.post-paragraph {
    padding-top:10px;
    padding-bottom:10px;
    max-height: 180px;
    overflow: scroll;
    word-wrap: break-word;
}
.gridcell {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: top;
}
.selected-gridcell {
    margin: -20px auto 0 auto;
    text-align: center;
}
.post-textarea {
    height:50px; transition: height 1.5s; border: 1px solid #EEEEEE;
    box-shadow: 1px 1px 0 #DDDDDD;
    display: inline-block;
    margin-left: 15px;
    padding: 11px 20px 10px 3px;
    resize: none;
    border-radius: 10px;
    width: 500px;
}

.reason-textarea {
    padding: 5px;
    float: right; resize: none; border-radius: 10px; width:280px;
}
.avatar-navbar {
    height:48px; width:48px; border-radius: 15px; padding: 5px 5px 5px 5px;
}

.fixed-container {
    z-index: 900;
    position: fixed;
    width: 59vw;
    padding: 0px;
    background-color: #b8babc;
    /* box-shadow: 0 0 80px #2f2d2f; */
    left: 21vw;
    border-radius: 10px;
    margin-top: -20px
}
.fright {
    float: right;
}
.btn-cancel-marking {
    padding: 0;
    border: none;
    background: none;
    position: relative;
    top: 5vw;
    right: 15vw;
    margin-left: 2px;
}
.bcmcontainer {
    clear:both;
}
.comment-container {
    padding-top: 20px;
    display: flex;              /* establish flex container */
    flex-direction: row;        /* stack flex items vertically */
    justify-content: center;    /* center items vertically */
    align-items: center;        /* center items horizontally */
    height: 100%;
    margin:0 auto;margin-bottom:20px;
}
.comment-img {
    display: inline-block; border-radius: 50px; width:80px; height:80px
}
.inline { display: inline-block }


@media screen and (max-width: 850px) {
    #post .posting {
        margin-right: 35px;
    }
    #post {
        margin-right: 35px;
    }
}

@media screen and (max-width: 1150px) {
  .fixed-container {
    z-index: 900;
    position: fixed;
    width: 62vw;
    padding: 0px;
    background-color: #b8babc;
    /* box-shadow: 0 0 80px #2f2d2f; */
    left: 17vw;
    border-radius: 10px;
  }
}

.post-selected {
  width: 45vw;
}

@media screen and (max-width: 950px) {
  .post-selected {
    width: 65vw;
  }
  .fixed-container {
    z-index: 900;
    position: fixed;
    width: 86vw;
    padding: 0px;
    background-color: #b8babc;
    box-shadow: 0 0 80px #2f2d2f;
    left: 7vw;
    border-radius: 10px;
  }
}
@media screen and (max-width: 750px) {
  .post-selected {
    width: 90vw;
  }
  .fixed-container {
    z-index: 900;
    position: fixed;
    width: 100vw;
    padding: 0px;
    background-color: #b8babc;
    box-shadow: 0 0 80px #2f2d2f;
    left: 0vw;
    border-radius: 10px;
  }
}

@media screen and (max-width: 767px) {
  .btn-cancel-marking { left: 72vw }
}
.btn-cancel-marking-shifted {
  left: 72vw;
}

#post .posting {
  max-width: 85vw;
  margin-right: 80px;
  margin-left: 5px;
}
#post {
  max-width: 85vw;
  margin-right:80px;
  margin-left: 0px;
}
#reply {
  max-width: 80vw;
}
.comment-container {
  width: 80vw;
}
.comment-container textarea {
  width: 70vw
}
.x-big {
  left:90px;
}
@media screen 
 and (max-width: 500px) 
 and (min-width: 0px) 
{  
  .full-pm-window {
    margin-right: 30px;
  }
  .navbar-form { padding: 9px 0px 0px 0px; margin: 0px}
  .nav>li>a, .nav>li>button {
    line-height: 1;
    padding: 0 10px 0 4px; 
  }

.post-paragraph {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.post-body { margin-top: -10px }
.post-selected { margin:0; min-width: 100vw; }
#post .posting { margin-top: 60px }
.x-big { 
    left: 312px;
    right: 10px;
    top: 55px;
    bottom: 24px;
    position: fixed;
}
  .comment-container { width: 90vw }
  .comment-container { padding-top: 1px; padding-bottom: 1px}
  .form-control { padding-left: 5px; color:#040404; font-size:small }
  #sp { width: 97px }
  #btmid { display: none}
  .search-posts {
    width: 77px;
  }
  .popup-userlist {
    width: 90px;
  } 
  .gridcell {
    margin-top: 1px;
   }
  .reply { max-width: 100vw; }
  #reply {max-width: 98vw;}
  .posting {
    margin: 1px 1px 1px 1px;
    padding: 0px 13px 0px 13px;
    width: 100vw;
   }
  .popup-userlist-tab {
    width: 90px;
    right: 0px;
    margin-right: 0px;
  }
  .popup-userlist-tab a {
    margin-right: 7px;
  }
  .full-pm-window {
    max-height: 100vh;
    width: 275px;
  }
  .the-userlist-link {
    margin-right: -30px;
  }
}