General CSS With Variables for Scratch Customization

gistfile1.txt

/* Import Fonts */
@import url("http://fonts.googleapis.com/css?family=Petit+Formal+Script");

/* Customization variables */

// general
// bg colors
@bg_color: #444;

// buttons
@button_bg: #26c135;
@button_hover_bg: darken( @button_bg, 5% );
@button_color: #fff;
@button_hover_color: @button_color;

// game name
@name_font: 'Petit Formal Script', cursive;
@name_color: #fff;
@name_size: 1.5em;

// modal headings
@heading_font: "Helvetica Neue", "Trebuchet MS", sans;

// general bubbles
@bubble_background: rgba(255,255,255,0.5);
@bubble_color: #000;

// prizes
@prize_name_color: #111;
@prize_name_size: 1.1em;
@prize_description_color: #333;
@prize_description_size: .9em;

// you win
@youwin_title_color: 'inherit';
@youwin_title_font_family: "inherit";
@youwin_title_font_size: "inherit";

@youwin_prize_name_color: "inherit";
@youwin_prize_name_font_family: 'inherit';
@youwin_prize_name_font_size: 'inherit';

@youwin_code_label_color: "inherit";
@youwin_code_label_font_family: 'inherit';
@youwin_code_label_size: 'inherit';

@youwin_code_color: "inherit";
@youwin_code_font_family: 'inherit';
@youwin_code_size: 'inherit';

@youwin_body_color: "inherit";
@youwin_body_font_family: 'inherit';
@youwin_body_size: 'inherit';

/* Mixins */
.grad (@bg, @start, @end) { 
    background-color: @bg; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top, @start, @end);
    background-image:    -moz-linear-gradient(top, @start, @end); /* For Fx 3.6 to Fx 15 */
    background-image:     -ms-linear-gradient(top, @start, @end); /* For IE 10 Platform Previews and Consumer Preview */
    background-image:      -o-linear-gradient(top, @start, @end); /* For Opera 11.1 to 12.0 */
    background-image:         linear-gradient(to bottom, @start, @end); /* Standard syntax; must be the last statement */
}

.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius:    @radius;
    border-radius:         @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}

.glass (@bg) {
    .grad(@bg, rgba(255,255,255,0.4), rgba(255,255,255,0) );
}

.smoke (@bg) {
    .grad(@bg, rgba(0,0,0,0.4), rgba(0,0,0,0) );
}

/* Customization Starts Here */
.game-description .hd .content .name {
    color: @name_color;
    font-family: @name_font;
    font-size: @name_size;
    line-height: 1.1em;
    text-shadow: 2px 2px 1px #000;
    
}

.page-window .hd, .game-description .actions, .you-win .ft {
    .glass( @bg_color );
}

.game-description .bd .section h4 {
    font-family: @heading_font;
}

.page-window .top-bar {
    display: none;
}

.game-description .actions .button, .you-win .ft .btn {
    .glass( @button_bg );
    color: @button_color;
    
    border-color: darken( @button_bg, 3% );
    
    
    &:hover {
        .glass( @button_hover_bg );
        border-color: darken( @button_hover_bg, 3% );
        color: @button_hover_color;
    }
}

.modal-window {
    .border-radius(0);
}

.game-description .bd .bubble {
    background: @bubble_background;
    color: @bubble_color;
}

.game-description .bd .section ul li {
    border-top-color: lighten( @bubble_background, 20% );
    border-bottom-color: darken( @bubble_background, 20% );
}

.game-description .bd .section ul li .name {
    color: @prize_name_color;
    font-size: @prize_name_size;
    line-height: 1.2em;
}

.game-description .bd .section ul .show-description .description {
    color: @prize_description_color;
    font-size: @prize_description_size;
    line-height: 1.2em;
}

.you-win .hd h2 {
    color: @youwin_title_color;
    font-family: @youwin_title_font_family;
    font-size: @youwin_title_font_size;
    line-height: 1.2em;
}

.you-win .bd h3 {
    color: @youwin_prize_name_color;
    font-family: @youwin_prize_name_font_family;
    font-size: @youwin_prize_name_font_size;
    line-height: 1.2em;
}

.you-win .bd .prize-code .code-label {
    color: @youwin_code_label_color;
    font-family: @youwin_code_label_font_family;
    font-size: @youwin_code_label_size;
    line-height: 1.2em;
}

.you-win .bd .prize-code {
    color: @youwin_code_color;
    font-family: @youwin_code_font_family;
    font-size: @youwin_code_size;
    line-height: 1.2em;
}

.you-win .bd .body {
    color: @youwin_body_color;
    font-family: @youwin_body_font_family;
    font-size: @youwin_body_size;
    line-height: 1.2em;
}