coffeescript-widget/sass/style.scss

@import 'compass/css3';
@import 'compass/utilities';

$padding: 10px;

body {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0.85;

  #resize {
    position: absolute;
    bottom: $padding + 22px;
    right: 16px;

    -apple-dashboard-region: dashboard-region(control rectangle);
  }

  form {
    position: absolute;
    background: url('banding.png') repeat #181A3A;
    @include border-radius($padding);

    top: $padding;
    left: $padding;
    bottom: $padding;
    right: $padding;

    header {
      margin-bottom: $padding;
      position: absolute;
      top: $padding;
      left: $padding;
      right: $padding;

      @include background(
        linear-gradient(#eee, #f8f8f8)
      );
      @include border-radius($padding / 2);
      height: image_height('logo.png');
      overflow: hidden;

      a {
        background: url('logo.png') top left no-repeat;
        width: image_width('logo.png');
        height: image_height('logo.png');
        display: block;
        @include hide-text;
        position: absolute;

        cursor: pointer;
      }

      #error {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        left: image_width('logo.png') + $padding;

        @include border-right-radius($padding / 2);

        padding: $padding 0;

        @include background(
          linear-gradient(#ffedec, #ff9a95)
        );

        text-align: right;

        span {
          text: {
            transform: uppercase;
          }
          font: {
            family: "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
            size: 13px;
            weight: bold;
          }
          color: #D00;
          padding-right: $padding;
        }
      }
    }
  }

  div {
    position: absolute;
    bottom: $padding;
    right: $padding;
    left: $padding;
    top: ($padding * 2) + image_height('logo.png');

    textarea {
      position: absolute;

      border: none;
      background: transparent;
      font: {
        family: Monaco, Consolas, "Lucida Console", monospace;
        size: 10px;
      }
      color: #DEF;
      height: 100%;
      width: 49%;

      &#coffee-script {
        left: 0;
      }

      &#javascript {
        right: 0;
      }
    }
  }
}