118 lines
2.2 KiB
SCSS
118 lines
2.2 KiB
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;
|
|
}
|
|
}
|
|
}
|
|
}
|