site.scss

/*
 * Copyright (c) 2014 Jesse van den Kieboom. All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *    * Redistributions of source code must retain the above copyright
 *      notice, this list of conditions and the following disclaimer.
 *    * Redistributions in binary form must reproduce the above
 *      copyright notice, this list of conditions and the following disclaimer
 *      in the documentation and/or other materials provided with the
 *      distribution.
 *    * Neither the name of Google Inc. nor the names of its
 *      contributors may be used to endorse or promote products derived from
 *      this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

@import 'solarized';
@import 'ui/ui';
@import 'editor';
@import 'gallery';

$header_height: 30px;

html, body, #main {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body, input {
  font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
  font-size: 12px;
}

#main {
  background-color: lighten($bg_color, 20%);
  color: $fg_color;
  opacity: 0;
  transition: opacity ease 1s;

  &.loaded {
    opacity: 1;
  }
}

#header {
  height: $header_height;
  background-color: $bg_color;
  border-bottom: 1px solid lighten($borders_color, 10%);
  line-height: $header_height;
  color: lighten($fg_color, 20%);

  #document-title, #gallery-title {
    font-size: 0.6 * $header_height;
    text-align: center;
    text-shadow: 1px 1px white;
    cursor: default;
    font-weight: bold;
  }

  #buttons-local, #buttons-remote {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      padding: 0px 10px 0px 10px;
      border: 0;
      border-radius: 0;
    }
  }

  #buttons-local {
    position: absolute;
    right: 0;

    li {
      float: right;
    }
  }

  #buttons-remote {
    position: absolute;
    left: 0;
    display: none;

    li {
      float: left;
    }
  }
}

#view-container, #view {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

#view {
  background-color: $bg_color;
  border: 0;
  padding: 0;
  outline: none;
  cursor: default;
}

#view-container {
  font-size: 1.1em;

  > .ui-widget {
    position: absolute;
  }

  &.fullscreen {
    z-index: 400;
  }

  &.hide-ui > .ui-widget {
    display: none;
  }
}

#content {
  position: absolute;
  top: $header_height + 1px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  opacity: 0;
  transition: opacity ease 1s;

  &.loaded {
    opacity: 1;
  }

  &.loading {
    transition: opacity ease 200ms;
    opacity: 0;
  }
}

#panel-programs {
  > div:first-child {
    flex-basis: 200px;
  }

  transition: opacity ease 1s;
}

input[type="text"] {
  border: 1px solid $borders_color;
  background-color: white;
  outline: none;
}

.ui-popup .documents, .ui-popup .models {
  max-height: 350px;
  overflow-y: auto;
}

.ui-popup .documents, .ui-popup .models, .ui-popup .about {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: white;
  border: 1px solid lighten($borders_color, 10%);

  li {
    padding: 6px;
    cursor: default;
    padding-right: 46px;
    position: relative;

    &:nth-child(even) {
      background-color: darken(white, 5%);
    }

    .title, .filename {
      display: inline-block;
      font-weight: bold;
      margin-left: 6px;
      white-space: nowrap;

      &.active {
        color: $blue;
      }
    }

    .modification-time {
      font-size: 0.9em;
      color: lighten($fg_color, 20%);
      margin-top: 3px;
    }

    &:hover {
      background-color: $base3;
    }

    &:active {
      background-color: lighten($base3, 5%);
    }

    .screenshot-container {
      vertical-align: middle;
      width: 80px;
      height: 45px;
      display: inline-block;
      text-align: center;
    }

    .screenshot {
      vertical-align: middle;
    }

    .delete {
      position: absolute;
      right: 12px;
      top: 12px;

      width: 16px;
      height: 16px;
      box-sizing: border-box;

      border-radius: 8px;
      background-color: rgba(black, 0.2);
      color: white;
      font-size: 12px;

      text-align: center;

      &:hover {
        background-color: lighten($red, 10%);
      }

      &:active {
        background-color: lighten($red, 20%);
      }

      &.spinning, &.spinning:hover, &.spinning:active {
        background-color: transparent;
        pointer-events: none;
      }
    }

    &.import {
      padding: 12px;
      border-bottom: 1px solid lighten($borders_color, 10%);
      font-weight: bold;
      text-align: center;

      &:last-child {
        border-bottom: 0;
      }
    }
  }
}

.ui-popup .about {
  a {
    color: $fg_color;
    text-decoration: none;
    cursor: default;
  }
}

.ui-popup .models li:not(:first-child) {
  &:hover {
    background-color: inherit;
  }

  &:active {
    background-color: inherit;
  }

  &:nth-child(even):hover, &:nth-child(even):active {
    background-color: darken(white, 5%);
  }
}

$description_height: 400px;

.ui-popup .info-popup {
  width: 600px;
  position: relative;

  .title {
    font-weight: bold;
    font-size: 1.4em;
    background: transparent;
    border: 0;
    outline: none;
    margin-bottom: 6px;
    width: 100%;
  }

  .properties {
    border-spacing: 12px 6px;
    margin-bottom: 6px;

    td:first-child {
      font-style: italic;
      vertical-align: baseline;
    }
  }

  .description, textarea {
    background-color: white;
    border: 1px solid $borders_color;
    padding: 6px;
    height: $description_height;
    box-sizing: border-box;
  }

  .description {
    overflow: auto;

    &.empty {
      color: lighten($fg_color, 25%);
      font-style: italic;
    }

    p:first-child {
      margin-top: 0;
    }
  }

  textarea {
    display: none;
    width: 100%;
    outline: none;
  }

  div.ui-button.close {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    opacity: 0;
    transition: opacity ease 500ms;
  }

  &.editing {
    .description {
      display: none;
    }

    textarea {
      display: block;
    }

    div.ui-button.close {
      display: block;
    }

    div.ui-button.close.animate {
        opacity: 1;
    }
  }
}

.message {
  padding: 12px;
  background-color: white;
  border: 1px solid $borders_color;
  position: absolute;
  z-index: 600;
  border-radius: 6px;
  box-shadow: 0px 0px 5px $borders_color;
  font-size: 1.1em;

  &.error {
    background-color: $red;
    color: white;
    border: 1px solid darken($red, 20%);
    box-shadow: 0px 0px 5px darken($red, 20%);
  }

  .title {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 1.2em;
  }

  table.contents {
    border-spacing: 12px 6px;

    & > tr > td {
      vertical-align: baseline;

      &:first-child {
        font-style: italic;
      }

      &:last-child {
        font-style: normal;
      }
    }

    & > tr.description td {
      padding-bottom: 6px;
    }

    & > tr.actions td {
      text-align: right;
      padding-top: 6px;
    }
  }

  .share, .publish {
    input.author {
      width: 100%;
    }

    .status {
      float: left;
      font-style: italic;
      color: $green;

      &.error {
        color: $red;
      }
    }
  }

  .publish {
    max-width: 800px;

    .screenshot {
      float: left;
    }

    div.contents {
      min-height: 200px;
    }

    div.description {
      margin-bottom: 12px;

      &.empty {
        color: $red;
      }
    }

    td.description div {
      height: 100px;
      width: 300px;
      overflow: auto;

      & > * {
        display: none;
      }

      & > *:first-child {
        margin-top: 0;
        margin-bottom: 0;
        display: block;
      }
    }

    input.token {
      font-family: menlo, monaco, monospace;
      width: 100%;

      &.empty {
        color: lighten($fg_color, 20%);
        font-style: italic;
      }
    }

    .actions {
      margin-top: 12px;
      text-align: right;

      & > * {
        margin-left: 6px;
      }
    }
  }

  .intro {
    & > *:first-child {
      margin-top: 0;
    }

    & > *:last-child {
      margin-bottom: 0;
    }

    width: 600px;
    height: 400px;
    overflow-y: scroll;
  }

  .files {
    .actions {
      text-align: right;
      margin-top: 12px;
    }
  }

  li {
    margin-bottom: 6px;
  }

  li:last-child {
    margin-bottom: 0px;
  }
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0;
  z-index: 500;

  transition: opacity ease 200ms;
}

.overlay.animate {
  opacity: 0.2;
}

.ui-popup .opengl {
  border-spacing: 6px;

  td {
    vertical-align: top;
  }

  td:first-child {
    font-weight: bold;
  }

  div.extensions {
    max-height: 10em;
    overflow-y: scroll;
    padding: 3px;
    border: 1px solid $borders_color;
    background-color: white;
  }
}

.compatibility {
  max-width: 500px;

  table {
    border-spacing: 12px 6px;

    td {
      vertical-align: baseline;
    }

    td:first-child {
      font-style: italic;
    }
  }
}

a {
  color: $blue;
  text-decoration: none;
}

a:hover, a:visited:hover {
  color: lighten($blue, 10%);
}

a:visited {
  color: darken($blue, 10%);
}

/* vi:ts=2:et */