152 lines
3.1 KiB
SCSS
152 lines
3.1 KiB
SCSS
// imports
|
|
@import "blueprint/colors";
|
|
@import "compass/reset";
|
|
@import "compass/css3";
|
|
@import "compass/utilities";
|
|
|
|
// variables
|
|
$font-color: hsl(0, 6%, 90%);
|
|
$link-color: $font-color;
|
|
$link-hover-color: hsl(32, 100%, 50%);
|
|
$border-color: black;
|
|
$background-normal: hsl(204, 25%, 35%);
|
|
$background-menu-normal: hsl(0, 0%, 20%);
|
|
$background-menu: color-stops(lighten($background-menu-normal, 15%),
|
|
$background-menu-normal 25%, darken($background-menu-normal, 15%));
|
|
$background-button: color-stops(lighten($background-normal, 15%),
|
|
$background-normal 75%, darken($background-normal, 5%));
|
|
$background-button-hover: color-stops(lighten($background-normal, 5%),
|
|
$background-normal 75%, darken($background-normal, 15%));
|
|
// some defaults for functions
|
|
$default-text-shadow-color: hsl(0, 10%, 50%);
|
|
$default-text-shadow-h-offset: 2px;
|
|
$default-text-shadow-v-offset: 2px;
|
|
$default-text-shadow-blur: 2px;
|
|
$default-border-radius: 2px;
|
|
|
|
body {background: $background-normal; color: $font-color;}
|
|
#menu, #messages, #content {
|
|
padding-left: 3em;
|
|
padding-right: 3em;
|
|
}
|
|
#messsages, #content {
|
|
padding-top: 1em;
|
|
}
|
|
#menu {
|
|
@include background-image(linear-gradient($background-menu));
|
|
li {
|
|
float: left;
|
|
display: inline-block;
|
|
}
|
|
:after {
|
|
content: '';
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
a {
|
|
color: $link-color;
|
|
padding: 1em;
|
|
display: block;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
@include single-text-shadow;
|
|
&:hover {
|
|
color: $link-hover-color;
|
|
};
|
|
}
|
|
}
|
|
#messages {
|
|
padding-top: 1em;
|
|
.message {
|
|
border: 1px solid black;
|
|
padding: 0.5em;
|
|
}
|
|
.error {
|
|
@extend .message;
|
|
background-color: $error-bg-color;
|
|
border-color: $error-border-color;
|
|
color: $error-color;
|
|
}
|
|
.warning {
|
|
@extend .message;
|
|
background-color: $notice-bg-color;
|
|
border-color: $notice-border-color;
|
|
color: $notice-color;
|
|
}
|
|
.notice {
|
|
@extend .message;
|
|
background-color: $success-bg-color;
|
|
border-color: $success-border-color;
|
|
color: $success-color;
|
|
}
|
|
}
|
|
#content {
|
|
.buttons {
|
|
clear: both;
|
|
}
|
|
.fields {
|
|
clear: both;
|
|
.main {
|
|
width: 74%;
|
|
float: left;
|
|
textarea {
|
|
width: 100%;
|
|
height: 25em;
|
|
@include box-sizing(border-box);
|
|
}
|
|
}
|
|
.further {
|
|
float: right;
|
|
width: 24%;
|
|
}
|
|
.further:after {
|
|
content: '';
|
|
clear: both;
|
|
}
|
|
label, input, select {
|
|
display: block;
|
|
}
|
|
label {
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
}
|
|
input, select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
button {
|
|
padding: 0.5em;
|
|
margin: 0.1em;
|
|
border: 1px solid $border-color;
|
|
color: $link-color;
|
|
font-weight: bold;
|
|
@include background-image(linear-gradient($background-button));
|
|
&:hover {
|
|
@include background-image(linear-gradient($background-button-hover));
|
|
}
|
|
&:active {
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
a {
|
|
color: $link-color;
|
|
font: {
|
|
weight: bold;
|
|
decoration: none;
|
|
}
|
|
}
|
|
}
|
|
#login {
|
|
text-align: center;
|
|
.login {
|
|
padding: 1em;
|
|
font-weight: bold;
|
|
font-family: Sans;
|
|
}
|
|
> div {
|
|
width: 18em;
|
|
margin: auto;
|
|
}
|
|
}
|