Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
552 lines (478 sloc) 11.2 KB
//
// style.scss
// chess
//
// Created by Mads Hartmann Jensen on 2011-08-07.
// Copyright 2011 Sideways Coding. All rights reserved.
//
@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/typography/lists/horizontal-list";
@import "compass/css3/box-shadow";
@import "compass/css3/text-shadow";
$red: #B30A0A;
$brick_dimensions: 75px;
@mixin boxy() {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
color: #999;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
@include box-shadow(rgba(0, 0, 0, 0.1),0px, 0px, 8px);
}
/*
Form element styling
*/
input, textarea {
@include boxy();
width: 200px;
&:hover, &:focus {
border-color: #617798;
@include box-shadow(rgba(0, 0, 0, 0.15),0px, 0px, 8px);
};
&:focus {
color: #617798;
}
}
textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
/*
General Structure of things.
*/
body {
margin: 0px;
background : url("/resources/bg.jpg") repeat scroll 0% 0%;
font-family: Helvetica;
}
.text {
$color : #8e6c40;
$padding : 6px;
$height : 50px;
background : url('/resources/input_field_left.png') top left no-repeat;
padding-left: $padding;
display : block;
height : $height;
input {
background : url('/resources/input_field_right.png') top right no-repeat;
padding : 0px $padding 0px 0px;
height : $height;
outline : none;
border : 0px;
color : $color;
font-size: 13px;
line-height: 13px;
font-weight: bold;
}
input::-webkit-input-placeholder {
color: $color;
}
input:-moz-placeholder {
color: $color;
}
}
.button {
$height : 50px;
$padding : 6px;
background : url('/resources/button_sprite_left.png') top left no-repeat;
height : $height;
padding : 0px 0px 0px $padding;
display : block;
text-decoration: none;
text-align : center;
.inner {
background: url('/resources/button_sprite_right.png') top right no-repeat;
height: $height;
padding: 0px $padding 0px 0px;
margin: 0px 0px 0px 0px;
border: none;
float: none;
color: #940000;
font-weight: bold;
font-size: 14px;
@include text-shadow(#fff, 1px, 1px, 1px);
}
a {
display: block;
width: 48px;
line-height: 47px;
float: left;
text-decoration: none;
}
&:hover {
background-position: 0px (-$height);
.inner {
background-position: 100% (-$height);
}
}
&:active {
background-position: 0px (-$height*2);
.inner {
background-position: 100% (-$height*2);
}
}
}
.container {
margin : 0px auto;
width : 755px;
left : 50%;
margin-left: -377px;
position :absolute;
top: 100px;
&#login {
width : 325px;
left : 50%;
margin-left: -162px;
}
&#user {
width: 475px;
margin-left: -238px;
#profile_page {
padding: 20px;
width: 475px - 40px;
height: 290px - 40px;
background: url('/resources/profile_page_bg.png');
}
.rank_image {
float: left;
padding-right: 20px;
}
ul {
clear: both;
@include horizontal-list;
padding: 55px 0px 0px 30px;
text-align: center;
li {
width: 110px;
text-align: center;
}
h3 {
color: #fff3e4;
font-weight: bold;
font-size: 40px;
}
span {
color: #fff799;
font-size: 19px;
font-weight: bold;
}
}
h1 {
color: #fff3e4;
font-size: 30px;
font-weight: bold;
text-transform: capitalize;
}
h2 {
color: #fff799;
font-size: 16px;
padding-top:5px;
}
}
#login_box {
$padding : 46px;
$padding-top : 90px;
background : url('/resources/login_box_bg.png');
width : 325px - (2*$padding);
height : 290px - $padding-top;
padding-top : $padding-top;
padding : $padding-top $padding 0px $padding;
.text input {
width: 221px;
}
.button {
float: right;
margin-left: 5px;
.inner {
width: 80px;
}
}
ul {
margin-top: 20px;
li {
margin-bottom: 5px;
}
}
}
ul {
text-align: left;
}
&#create {
label {
width : 100px;
display: inline-block;
}
input {
width: 300px;
}
}
&#lobby {
#main, #create {
$padding-top: 140px;
$padding : 40px;
background : url('/resources/menu_box_background.png');
padding : $padding-top $padding $padding $padding;
height : 560px - $padding-top - $padding;
width : 755px - (2*$padding);
ul.menu {
@include horizontal-list();
margin-left: 100px;
margin-top: 20px;
li {
margin : 10px 0px;
text-align: center;
}
}
}
#create {
background-image: url('/resources/menu_create_background.png');
padding-top: 140px - 72px;
padding-bottom: 72px + 40px;
.text {
float: left;
margin-left: 110px;
input {
width: 294px;
}
}
.button {
float: left;
}
.back {
margin-bottom: 190px;
}
}
#join {
$padding: 20px;
background: url('/resources/games_background.png') top left no-repeat;
width: 475px - ($padding*2);
height: 740px;
padding: 0px $padding;
margin-left: 140px;
margin-bottom: 30px;
.back {
margin-top: 40px;
margin-bottom: 25px;
color: #FFEBC7;
}
#gamesList {
margin : 20px;
height : 614px;
overflow-y: auto;
li {
color : #fff3e4;
background : url('/resources/pawn_games_list.png') center left no-repeat;
padding-left: 25px;
line-height : 28px;
height : 28px;
font-size : 18px;
&:hover {
cursor: pointer;
color: #000;
}
}
}
}
.back {
display : inline-block;
margin : 0px 0px 10px 0px;
color : #fff6e4;
text-decoration: none;
}
.button span {
display: block;
width: 140px;
line-height: 50px;
}
.chat {
.input {
margin-left: 200px;
width: 300px;
.text {
float: left;
width: 205px;
margin-right: 5px;
}
.button {
float: left;
.inner {
width: 70px;
}
}
}
}
}
#chat_messages {
clear : both;
border : 0px;
background: transparent;
height : 200px;
margin : 20px 10px 10px 10px;
color : #ffebc7;
overflow : hidden;
@include text-shadow(#000, 1px, 1px, 1px);
li {
margin: 3px 0px;
font-size: 13px;
}
}
}
#status {
height: $brick_dimensions - 30px;
padding-bottom: 30px;
text-align: center;
color: #fff;
ul {
@include horizontal-list();
margin-right: 45px;
color : #8D8D8D;
font-size : 14px;
font-family : Helvetica;
font-weight : bold;
line-height: $brick_dimensions - 30px;
li {
margin-left: 50px;
float: right;
}
span {
color:#fff;
}
}
}
/*
The game view
*/
.game {
$sidebar-width: 300px;
.chat {
position : absolute;
left : 0px;
top : 0px;
background: url('/resources/chat_sidebar_bg.png') top left repeat-y;
bottom : 0px;
width : $sidebar-width;
height : 100%;
color: #ffebc7;
@include text-shadow(#000, 1px, 1px, 1px);
#chat_messages {
margin: 10px;
position: absolute;
left: 0px;
bottom: 70px;
top: 0px;
width: 280px;
overflow: hidden;
}
li {
margin: 3px 0px;
font-size: 13px;
}
.input {
position: absolute;
bottom: 10px;
}
.text {
margin-left: 5px;
margin-right: 5px;
float: left;
}
.button {
float: left;
.inner {
display: block;
width: 48px;
line-height: 47px;
float: left;
}
}
}
#board {
position : absolute;
left : $sidebar-width;
height : 100%;
top : 0%;
right: 0%;
.wood {
position : relative;
left : 50%;
width : 600px;
height : 600px;
margin-left: -330px;
padding : 31px 30px 30px 31px;
background : url("/resources/board-bg.png") 0px 0px no-repeat;
}
}
#waiting {
z-index :1;
position : absolute;
width : 100%;
height : 100%;
top : 0px;
background: rgba(0, 0, 0, 0.5);
h1 {
text-align : center;
color : #fff;
font-size : 42px;
height : 200px;
width : 400px;
top : 50%;
left : 50%;
position : absolute;
margin-top : -100px;
margin-left: -200px;
a {
color: white;
font-weight: bold;
}
}
}
}
/*
End of game view
*/
td, th {
text-align: center;
width: 75px !important;
height: 75px !important;
overflow: hidden;
display: inline-block;
}
tr {
height: 75px !important;
}
.selected {
background: url('/resources/selected_brick.png') top left no-repeat;
}
.movable {
background: url('/resources/movable_brick.png') top left no-repeat;
}
.hidden {
display: none;
}
/*
forms
*/
.error_container {
background: $red;
margin: 20px 0px;
padding: 10px;
border: 2px solid black;
color: white;
ul {
text-align: left;
padding-left: 20px;
list-style: disc;
}
}
.no_errors {
display: none;
}
.has_errors {
display: block;
}
Something went wrong with that request. Please try again.