closeheat-editor/browser/css/app.css

Edit deployed websites.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
html {
  height: 100%;
  font-family: 'Open Sans', sans-serif; }

body {
  height: 100%; }

.editor-wrapper .label-with-icon i {
  display: inline-block;
  font-size: 20px;
  padding-right: 10px; }

.editor-wrapper .label-with-icon span {
  vertical-align: super; }

.editor-wrapper .header-row {
  background-color: #1A1E2D;
  margin-bottom: 0;
  height: 54px; }

.editor-wrapper .header-website-url a {
  color: rgba(230, 230, 230, 0.3); }

.editor-wrapper .header-support a {
  color: rgba(230, 230, 230, 0.3);
  text-transform: uppercase; }
  .editor-wrapper .header-support a:hover {
    color: #e6e6e6; }

.editor-wrapper .header-item, .editor-wrapper .header-website-url a, .editor-wrapper .header-support a, .editor-wrapper .header-mode {
  height: 54px;
  line-height: 50px;
  font-size: 11px; }

.editor-wrapper .header-mode {
  cursor: pointer;
  text-transform: uppercase;
  color: #fdfdfd; }
  .editor-wrapper .header-mode:hover {
    background-color: rgba(238, 66, 63, 0.1);
    color: #e6e6e6; }

.editor-wrapper .header-in-progress {
  color: #b3b3b3; }

.editor-wrapper .header-mode-active {
  color: #EE4340;
  border-bottom: 2px solid #EE4340;
  box-sizing: border-box; }
  .editor-wrapper .header-mode-active:hover {
    color: #e61714; }

.editor-wrapper .header-avatar img {
  margin-top: 10px;
  width: 30px;
  border-radius: 9999px;
  cursor: pointer; }

.editor-wrapper .code-mode-cols {
  padding: 0; }

.editor-wrapper .tabs-row {
  background-color: #F6F6F6;
  border-bottom: 1px solid rgba(158, 158, 158, 0.2);
  margin: 0; }
  .editor-wrapper .tabs-row .tab {
    background-color: #EBEAEB;
    height: 35px;
    line-height: 35px;
    border-right: 1px solid rgba(158, 158, 158, 0.2);
    font-size: 12px; }
    .editor-wrapper .tabs-row .tab:hover {
      background-color: #F0EFEF; }
  .editor-wrapper .tabs-row a.tab-name {
    display: inline-block;
    color: #9D9D9D;
    width: 90%; }
  .editor-wrapper .tabs-row a.tab-close i {
    font-size: 12px;
    color: #9D9D9D;
    width: 10%;
    display: inline-block; }
    .editor-wrapper .tabs-row a.tab-close i:hover {
      color: #EE4340; }
  .editor-wrapper .tabs-row .tab-new a {
    color: #9D9D9D;
    display: inline-block;
    width: 100%; }

@keyframes tab-activation {
  0% {
    background-color: rgba(238, 66, 63, 0.5); }
  100% {
    background-color: #F3F4F4; } }
  .editor-wrapper .tabs-row .tab-flash {
    animation-name: tab-activation;
    animation-duration: 0.5s; }
  .editor-wrapper .tabs-row .tab-active {
    background-color: #F3F4F4;
    color: #5B5B5B; }
    .editor-wrapper .tabs-row .tab-active:hover {
      background-color: #F3F4F4; }

.editor-wrapper .file-list-path {
  font-size: 12px; }
  .editor-wrapper .file-list-path li {
    display: inline-block; }
  .editor-wrapper .file-list-path .file-list-start {
    color: #EE4340; }
  .editor-wrapper .file-list-path .file-list-sep {
    color: #C1C6D1;
    padding: 0 10px; }

.editor-wrapper .file-list {
  font-size: 14px; }
  .editor-wrapper .file-list tr:hover:not(:first-child) {
    background-color: rgba(193, 199, 209, 0.1); }
  .editor-wrapper .file-list th {
    font-size: 12px;
    text-transform: uppercase;
    color: #C1C6D1;
    font-weight: normal;
    padding-left: 0; }
  .editor-wrapper .file-list td {
    border-top: 1px solid rgba(193, 199, 209, 0.2);
    padding: 25px 0; }
    .editor-wrapper .file-list td:first-child {
      text-align: center;
      width: 10%; }
    .editor-wrapper .file-list td:nth-child(2) {
      width: 300px; }
  .editor-wrapper .file-list .file-list-icon i {
    color: #EE4340;
    font-size: 40px; }
  .editor-wrapper .file-list .file-list-uneditable .file-list-name,
  .editor-wrapper .file-list .file-list-uneditable .file-list-icon i {
    color: #C1C6D1; }
  .editor-wrapper .file-list .file-list-kind {
    color: #C1C6D1;
    text-transform: uppercase;
    font-size: 11px; }

.editor-wrapper .action-title, .editor-wrapper .published .published-title, .editor-wrapper .error .error-title {
  font-size: 12px;
  color: #9D9D9D;
  text-align: center;
  text-transform: uppercase; }

.editor-wrapper .loader {
  height: calc(100vh - 54px);
  background-color: #FDFDFD; }
  .editor-wrapper .loader .loader-spinner {
    height: 250px;
    width: 250px; }
  .editor-wrapper .loader .loader-container {
    margin: 0 auto; }

.editor-wrapper .published {
  height: calc(100vh - 54px);
  background-color: #FDFDFD; }
  .editor-wrapper .published .published-icon i {
    font-size: 150px;
    color: #EE4340; }
  .editor-wrapper .published .published-container {
    margin: 0 auto; }
  .editor-wrapper .published .published-title {
    font-size: 12px; }

.editor-wrapper .published-button, .editor-wrapper .free-hosting .free-hosting-button {
  margin-top: 30px;
  box-shadow: none;
  line-height: 20px;
  padding-top: 7px; }
  .editor-wrapper .published-button .published-button-icon i, .editor-wrapper .free-hosting .free-hosting-button .published-button-icon i {
    font-size: 12px;
    padding-left: 10px; }
  .editor-wrapper .published-button .published-button-subtitle, .editor-wrapper .free-hosting .free-hosting-button .published-button-subtitle {
    font-size: 12px;
    text-transform: none;
    color: rgba(255, 255, 255, 0.7); }

@keyframes appear-later {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.editor-wrapper .free-hosting-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(26, 30, 45, 0.7);
  animation-name: appear-later;
  animation-duration: 1s;
  z-index: 999; }

.editor-wrapper .free-hosting {
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  width: 500px;
  margin: 100px auto;
  padding: 40px 40px 0;
  font-size: 12px;
  border-radius: 2px;
  border: 2px solid rgba(193, 199, 209, 0.2);
  background-color: #FDFDFD; }
  .editor-wrapper .free-hosting .free-hosting-title {
    font-size: 20px;
    font-weight: 600;
    color: #1A1E2D;
    margin-bottom: 10px; }
  .editor-wrapper .free-hosting .free-hosting-type {
    cursor: pointer;
    text-transform: uppercase;
    font-size: 11px; }
  .editor-wrapper .free-hosting .free-hosting-type-selected {
    color: #4e9fd4; }
    .editor-wrapper .free-hosting .free-hosting-type-selected .free-hosting-type-icon {
      border-color: #4e9fd4; }
    .editor-wrapper .free-hosting .free-hosting-type-selected .free-hosting-type-title {
      color: #fdfdfd;
      background-color: #4e9fd4;
      border-radius: 10px; }
  .editor-wrapper .free-hosting .free-hosting-type-icon {
    padding: 20px;
    border-radius: 5px;
    margin: 20px 40px 15px;
    border: 3px solid #C1C6D1; }
  .editor-wrapper .free-hosting .free-hosting-type:not(.free-hosting-type-selected) {
    color: #C1C6D1; }
    .editor-wrapper .free-hosting .free-hosting-type:not(.free-hosting-type-selected) .free-hosting-type-icon:hover {
      border-color: rgba(26, 30, 45, 0.4); }
    .editor-wrapper .free-hosting .free-hosting-type:not(.free-hosting-type-selected):hover {
      color: rgba(26, 30, 45, 0.4); }
  .editor-wrapper .free-hosting .free-hosting-free {
    color: #4EB876;
    font-weight: 600;
    padding-left: 3px; }
  .editor-wrapper .free-hosting .free-hosting-button {
    background-color: #4EB876;
    margin-top: 40px;
    line-height: 20px;
    padding-top: 17px;
    width: 200px; }
  .editor-wrapper .free-hosting .free-button-icon i {
    font-size: 12px;
    padding-left: 10px; }
  .editor-wrapper .free-hosting .free-button-hide {
    margin-top: 10px;
    color: #C1C6D1;
    cursor: pointer;
    text-transform: uppercase; }

.editor-wrapper .error {
  height: calc(100vh - 54px);
  background-color: #FDFDFD;
  padding-top: 30px; }
  .editor-wrapper .error .error-container {
    border: 1px solid rgba(193, 199, 209, 0.1);
    background-color: #fff;
    border-radius: 5px;
    padding: 20px 30px 60px;
    word-break: break-all; }
  .editor-wrapper .error .error-title {
    text-align: left;
    font-size: 12px;
    background-color: #EE4340;
    color: #fafafa;
    padding: 10px 20px; }
  .editor-wrapper .error .error-content {
    padding: 30px 0;
    font-size: 12px;
    color: #9D9D9D;
    font-family: 'Source Code Pro', 'Open Sans', sans-serif; }

.editor-wrapper .settings {
  background-color: #F9F9FB;
  padding: 50px 0; }
  .editor-wrapper .settings .settings-container {
    background-color: #fff;
    padding: 50px; }
  .editor-wrapper .settings .settings-title {
    text-align: left;
    font-size: 32px;
    font-weight: 300; }
  .editor-wrapper .settings .input-field {
    margin: 45px 0; }
  .editor-wrapper .settings .settings-save-changes-button {
    box-shadow: none;
    width: 100%; }
  .editor-wrapper .settings .settings-slug {
    display: inline-block;
    width: 50%; }

.editor-wrapper .custom-toast {
  position: fixed;
  bottom: 15px;
  left: 15px;
  top: inherit;
  font-size: 14px;
  z-index: 999; }
  .editor-wrapper .custom-toast .custom-toast-buttons {
    padding-left: 30px; }
    .editor-wrapper .custom-toast .custom-toast-buttons .btn-flat {
      padding-left: 10px;
      padding-right: 0;
      margin: 0; }

.input-field label {
  left: 0; }

.browser {
  height: calc(100vh - 54px); }
  .browser iframe {
    height: calc(100vh - 54px);
    width: 100%;
    border: none; }

.row.full {
  padding: 0;
  margin: 0; }

.row .col.full {
  padding: 0; }

.prompt {
  font-family: 'Source Sans Pro', sans-serif;
  min-width: 300px;
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: #F2F2F2;
  color: #1A1E2D;
  font-size: 14px;
  box-shadow: 3px 3px 30px 0px HSLA(227, 27%, 14%, 0.2);
  border-radius: 3px;
  border: 1px solid HSLA(227, 27%, 14%, 0.1); }
  .prompt .prompt-header {
    height: 50px;
    padding: 15px 30px 0;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid HSLA(227, 27%, 14%, 0.1);
    cursor: move;
    margin-bottom: 0; }
    .prompt .prompt-header .prompt-header-actions {
      text-align: right; }
    .prompt .prompt-header .prompt-header-action {
      font-size: 10px;
      text-align: center;
      font-weight: 400;
      font-family: 'Open Sans', sans-serif;
      background-color: HSLA(226, 7%, 37%, 1);
      border-radius: 2px;
      height: 20px;
      color: white;
      line-height: 20px;
      padding: 0;
      margin: 0;
      cursor: pointer;
      width: 65px; }
      .prompt .prompt-header .prompt-header-action:hover {
        background-color: HSLA(226, 7%, 30%, 1); }
  .prompt .prompt-extra {
    padding-top: 30px;
    text-align: center; }
    .prompt .prompt-extra .prompt-extra-action {
      font-size: 10px;
      text-align: center;
      font-weight: 400;
      font-family: 'Open Sans', sans-serif;
      border-radius: 2px;
      height: 20px;
      color: HSLA(226, 7%, 37%, 1);
      border: 1px solid HSLA(226, 7%, 37%, 1);
      line-height: 18px;
      padding: 0;
      margin: 0 auto;
      cursor: pointer;
      width: 65px;
      text-transform: uppercase; }
      .prompt .prompt-extra .prompt-extra-action:hover {
        color: HSLA(226, 7%, 30%, 1);
        border: 1px solid HSLA(226, 7%, 30%, 1);
        background-color: HSLA(226, 7%, 30%, 0.08); }
  .prompt .prompt-content {
    padding: 40px 30px 30px;
    max-height: 350px;
    overflow: scroll; }
  .prompt .prompt-input {
    border: 0;
    width: 100%;
    outline: 0;
    padding: 10px;
    background-color: #fff; }
  .prompt .prompt-attribute-label {
    text-transform: uppercase;
    padding-top: 15px;
    padding-bottom: 5px;
    display: block; }
  .prompt .prompt-actions {
    border-top: 1px solid HSLA(227, 27%, 14%, 0.1);
    margin-bottom: 0; }
    .prompt .prompt-actions .prompt-action {
      cursor: pointer;
      text-align: center;
      height: 50px;
      text-transform: uppercase;
      line-height: 50px;
      font-weight: 600;
      font-size: 13px; }
      .prompt .prompt-actions .prompt-action:first-child {
        border-right: 1px solid HSLA(227, 27%, 14%, 0.1); }
      .prompt .prompt-actions .prompt-action:hover {
        background-color: HSLA(227, 27%, 14%, 0.05); }

.guide-button {
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Source Code Pro', 'Open Sans', sans-serif;
  padding: 0 5px; }

.review-modal {
  min-width: 90vw;
  min-height: 85vh; }
  .review-modal .review-modal-code {
    font-size: 13px;
    font-family: 'Source Code Pro', sans-serif; }
    .review-modal .review-modal-code .review-diff-line-added {
      background-color: rgba(76, 184, 118, 0.3); }
    .review-modal .review-modal-code .review-diff-line-removed {
      background-color: rgba(238, 66, 63, 0.3); }
  .review-modal .review-modal-file-path {
    line-height: 50px;
    padding-left: 20px;
    font-size: 13px;
    font-family: 'Source Sans Pro'; }

.col-no-padding {
  padding: 0; }