threefunkymonkeys/chist

View on GitHub
public/css/chist.css

Summary

Maintainability
Test Coverage
/* New chist design */

/* New chist design */
.private_chist span {
  font-weight: normal;
  color: #adb5bc;
  font-size: 13px;
  cursor: pointer;
  padding: 7px 0px 0px 43px;
  height: 35px;
  display: inline-block;
}

.private_chist span.private {
  background: url('../img/new-private.svg') 0% 100% no-repeat;
}

.private_chist span.public {
  background: url('../img/new-public.svg') 0% 100% no-repeat;
}

.bottom-bar {
    padding: 0;
    background-color: #2c3e50;
    height: 38px;
}

span.lines {
  display: inline-block;
  padding-left: 14px;
  font-family: GothamMedium;
  color: #fff;
  font-size: 14px;
  margin-top: 9px;
}

.bottom-bar .actions {
  float: right;
  background-color: #fff;
  padding-left: 7px;
}

.btn-cancel {
    background: url('../img/new-cancel.svg') 0% 100% no-repeat;
    cursor:pointer;
    border:none;
    width:80px;
    height:38px;
}

.btn-confirm {
    background: url('../img/new-confirm.svg') 0% 100% no-repeat;
    cursor:pointer;
    border:none;
    width:80px;
    height:38px;
    margin-left: 3px;
}

#latest-chists {
    margin-top: 35px;
    padding: 0;
}

#latest-chists a {
    font-family: GothamMedium;
    color: #2c3e50;
}

#latest-chists a:hover {
    text-decoration: none;
}

#latest-chists li{
    display: inline-block;
    width: 200px;
    margin-bottom: 15px;
}

#latest-chists .chist-data.public{
    background: url('../img/new-public.svg') 0% 100% no-repeat;
    padding-left: 43px;
}

#latest-chists .chist-data.private{
    background: url('../img/new-private.svg') 0% 100% no-repeat;
    padding-left: 43px;
}

h3.panel-title {
  height: 14px;
}

.row.your-chists{
  padding-left: 15px;
  padding-right: 15px;
}

.chist-panel{
  margin-bottom: 38px;
}

.chist-panel .action-fav{
  float: right;
  margin-top: -5px;
  margin-right: -10px;
}

.chist-panel .action-del{
  float: left;
  margin-left: -25px;
  margin-top: -20px;
}

.chist-panel input, .chist-panel button{
  outline: none !important;
}

.delete-button, .delete-button:active{
  background: url('../img/your-delete.svg') 0% 100% no-repeat;
  width: 22px;
  height: 22px;
}

.fav-button{
  background: transparent;
  width: 25px;
  height: 25px;
}

.fav-button.favorited{
  background: url('../img/your-favorite.png') 47% 59% no-repeat;
}

.fav-button.no-favorited{
  background: url('../img/your-favorite.svg') 47% 59% no-repeat;
}

.chist-panel .panel-body.public{
  border-bottom: 4px solid #18D99C;
}

.chist-panel .panel-body.private{
  border-bottom: 4px solid #E33e45;
}

.chist-show .chist-panel {
  margin-bottom: 0;
}

.chist-show .panel-title a{
  padding: 0;
}

.chist-show .bottom-bar {
  background-color: #808B96;
}

/* Themes */

.chist-chat {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  background-color: inherit;
  color: inherit;
  border: none;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-wrap: normal;
  font-family: "Oxygen Mono";
  padding: 0.5em;
}

.chist-chat table tr td {
  padding: 3px 0px;
  height: 1em;
  line-height: 1em;
}

.chist-chat table td.number {
  text-align: right;
}

.chist-chat table td.number a {
  text-decoration: none;
  font-size: 0.9em;
  color: #95A5A6;
  margin: 0 0.5em 0 0.5em;
}

.chist-preview {
  max-height: 270px;
}

.chist-preview .chist-chat {
  max-height: 230px;
}

.chist-chat .line {
  overflow-wrap: normal;
}

.chist-show .bottom-bar .actions {
  float: right;
  background-color: transparent;
  padding-left: 7px;
}

.chist-show .btn-share {
  background: url('../img/chist-share.svg') 0% 100% no-repeat;
  height: 38px;
  width: 40px;
  padding: 0;
  border: 0;
  float: left;
}

.chist-show .btn-download {
  background: url('../img/chist-download.svg') 0% 100% no-repeat;
  height: 38px;
  width: 40px;
  padding: 0;
}

.chist-show .row.your-chists {
  padding-right: 47px;
}

button, button:target {
  outline: none;
}

.actions input{
  outline: none;
}

.chist-show-actions {
  width: 32px;
  height: auto;
  float: right;
  margin-top: 35px;
}

.chist-show-actions .btn-edit{
  background: url('../img/chist-edit-edit.svg') 0% 100% no-repeat;
  height: 32px;
  width: 32px;
  padding: 0;
  display: block;
  float: left;
}

.chist-show-actions .btn-fav{
  background: url('../img/chist-edit-favorite.svg') 0% 100% no-repeat;
  height: 32px;
  width: 32px;
  padding: 0;
  display: block;
  border: 0;
  float: left;
  margin-top: 2px;
}

.chist-show-actions .btn-delete{
  background: url('../img/chist-edit-delete.svg') 0% 100% no-repeat;
  height: 32px;
  width: 32px;
  padding: 0;
  display: block;
  border: 0;
  float: left;
  margin-top: 2px;
}

.chist-format-skype .chist-theme-default { }
  .chist-format-skype.chist-theme-default .line .time {
    color: #003300;
  }

  .chist-format-skype.chist-theme-default .line .username_0   { color: #f6917f; }
  .chist-format-skype.chist-theme-default .line .username_1   { color: #3f7b48; }
  .chist-format-skype.chist-theme-default .line .username_2   { color: #669988; }
  .chist-format-skype.chist-theme-default .line .username_3   { color: #cc7ef6; }
  .chist-format-skype.chist-theme-default .line .username_4   { color: #2255aa; }
  .chist-format-skype.chist-theme-default .line .username_5   { color: #cc32b2; }
  .chist-format-skype.chist-theme-default .line .username_6   { color: #907ef6; }
  .chist-format-skype.chist-theme-default .line .username_7   { color: #cc6666; }
  .chist-format-skype.chist-theme-default .line .username_8   { color: #7b3f55; }
  .chist-format-skype.chist-theme-default .line .username_9   { color: #3f7b65; }
  .chist-format-skype.chist-theme-default .line .username_10  { color: #9c6e7f; }

.chist-format-irc .chist-theme-default { }
  .chist-theme-default .line .open-close {
    color: #cc9900;
  }
  .chist-theme-default .line .channel-info {
    color: #553355;
  }

  .chist-theme-default .line .username_0   { color: #f6917f; }
  .chist-theme-default .line .username_1   { color: #3f7b48; }
  .chist-theme-default .line .username_2   { color: #669988; }
  .chist-theme-default .line .username_3   { color: #cc7ef6; }
  .chist-theme-default .line .username_4   { color: #2255aa; }
  .chist-theme-default .line .username_5   { color: #cc32b2; }
  .chist-theme-default .line .username_6   { color: #907ef6; }
  .chist-theme-default .line .username_7   { color: #cc6666; }
  .chist-theme-default .line .username_8   { color: #7b3f55; }
  .chist-theme-default .line .username_9   { color: #3f7b65; }
  .chist-theme-default .line .username_10  { color: #9c6e7f; }

  .chist-theme-default .system-message { color: #7B878C; font-style: italic; }

.new-chist-atributes select{
  height: 40px;
  padding: 10px;
}

.new-chist-atributes {
  margin-top: 19px; }

.user {
  overflow: hidden;
  margin: 0 0 24px 0;
}

.btn-edit {
  background: url('../img/profile-edit.svg') 0% 100% no-repeat;
  width: 38px;
  height: 38px;
  border: 0;
  margin-right: 7px;
  float: right;
}

.user-label {
  width: 300px;
  float: left;
  font-family: GothamBook;
  font-size: 13px;
  font-weight: normal;
  color: #2C3E50;
  margin: 0;
  padding: 3px 0 0 18px;
}

.user-field {
  width: 200px;
  float: left;
  border: 0;
  border-bottom: 1px solid #ADB5BC;
  padding: 0 0 3px 0;
  height: 21px;
}

.user-field-api{
  width: 274px;
  float: left;
  border: 0;
  border-bottom: 1px solid #ADB5BC;
  padding: 0 0 3px 0;
  height: 21px;
  margin: 0 0 0 18px;
}

.user .form-group {
  margin: 14px 0 0 0;
  overflow: hidden;
}

.user .btn-conection-enable, .user .btn-conection-disable {
  padding: 2px 0 0 0;
  font-family: GothamBook;
  font-size: 14px;
  float: left;
}

.user .btn-conection-enable {
  color: #18D99C;
}

.user .btn-conection-disable {
  color: #E33E45;
  border: 0;
  background-color: transparent;
}

.btn-delete-api-key {
  background: url('../img/profile-edit-api-delete.svg') 50% 50% no-repeat;
  height: 16px;
  width: 16px;
  border: 0;
  float: right;
  margin-right: 80px;
}

.btn-add-api-key {
  background: url('../img/profile-edit-api-add.svg') 50% 50% no-repeat;
  height: 16px;
  width: 16px;
  border: 0;
  margin-left: 10px;
}

.keys {
    padding: 0;
}

@media (min-width: 768px) {
  .new-chist-atributes {
  margin-top: 0px; }
}

@media (max-width: 767px) {
  .user-label{
    width: 240px;
  }

  .btn-delete-api-key {
    margin-right: 15px;
  }

  .keys {
    padding: 0 0 0 20px;
  }
}