310 lines
8.5 KiB
SCSS
310 lines
8.5 KiB
SCSS
/** Celerity CSS
|
|
*
|
|
* Authors:
|
|
* Emily Ravenwood <ravenwood@alltrees.org>
|
|
*
|
|
* Copyright (c) 2009-2013 by Dreamwidth Studios, LLC.
|
|
*
|
|
* This program is free software; you may redistribute it and/or modify it under
|
|
* the same terms as Perl itself. For a copy of the license, please reference
|
|
* 'perldoc perlartistic' or 'perldoc perlgpl'.
|
|
*/
|
|
|
|
// color names. Only use these variables in the color assignment section
|
|
$_dark-olive-green: #706dc0;
|
|
$_very-dark-olive: darken($_dark-olive-green, 10%); // try to match visual impact of the top bar
|
|
// which is $_dark-olive-green, but heavier to the eye
|
|
$_bright-olive-green: #9895e9; // a little brighter than the dark olive green, to attract the eye
|
|
$_light-olive-green: #aaafdd;
|
|
$_lightest-olive-green: #ceccee;
|
|
|
|
$_white: #fff;
|
|
$_light-gray: #f7f7f7;
|
|
$_mid-gray: #e9e9e9;
|
|
$_dark-gray: #636363;
|
|
$_low-contrast-gray: #ddd;
|
|
$_off-black: #222211;
|
|
|
|
$_support-bg-blue: #c5dff9;
|
|
$_support-fg-blue: darken( $_support-bg-blue, 15% );
|
|
$_support-bg-green: #d0fbca;
|
|
$_support-fg-green: darken( $_support-bg-green, 15% );
|
|
|
|
// color assignment
|
|
$background-color: $_white;
|
|
$text-color: $_off-black;
|
|
$link-color: $_bright-olive-green;
|
|
|
|
$inactive-color: $_dark-gray;
|
|
|
|
$primary-color: $_very-dark-olive;
|
|
$primary-text-color: $_white;
|
|
$secondary-color: $_mid-gray;
|
|
$strong-accent-color:$_very-dark-olive;
|
|
$soft-accent-color: $_light-olive-green;
|
|
$border-color: darken($_low-contrast-gray, 10%);
|
|
$highlight-color: $_lightest-olive-green;
|
|
$highlight-border: $_dark-olive-green;
|
|
$highlight-text-color:$_off-black;
|
|
|
|
$header-image-color: $_dark-olive-green; // meant to match the images in the nav
|
|
|
|
$form-font-color: $_off-black;
|
|
$form-bg-color: $_white;
|
|
$form-border-color: $_low-contrast-gray;
|
|
|
|
@import "skins/alert-colors";
|
|
|
|
|
|
// foundation global variables
|
|
$body-bg: $background-color;
|
|
$body-font-color: $text-color;
|
|
$body-font-family: Arial, Verdana, sans-serif;
|
|
$base-line-height: 1.4;
|
|
|
|
|
|
// foundation type variables
|
|
// We use these to control header font styles
|
|
$header-font-family: "Century Gothic", Verdana, sans-serif;
|
|
$page-title-color: $primary-color;
|
|
$header-font-color: lighten( $body-font-color, 5% );
|
|
$list-side-margin: 1em;
|
|
|
|
// we want to base these on $body-font-color rather than the random variables they're based on
|
|
$blockquote-font-color: mix( #ffffff, $body-font-color, 20% );
|
|
$small-font-color: $body-font-color;
|
|
|
|
// We use these to style anchors
|
|
$anchor-text-decoration: underline;
|
|
$anchor-font-color: $link-color;
|
|
$anchor-font-color-visited: mix( #000000, $anchor-font-color, 30% );
|
|
$anchor-font-color-hover: lighten( $anchor-font-color, 30% );
|
|
|
|
// forms
|
|
$form-label-font-color: $form-font-color;
|
|
$input-font-color: $form-font-color;
|
|
$input-bg-color: $form-bg-color;
|
|
$input-focus-bg-color: darken($input-bg-color, 2%);
|
|
$input-border-color: darken($input-bg-color, 20%);
|
|
$input-focus-border-color: darken($input-bg-color, 40%);
|
|
$input-disabled-bg: $form-border-color;
|
|
$fieldset-border-color: $form-border-color;
|
|
$legend-bg: transparent;
|
|
$input-prefix-bg: darken($input-bg-color, 5%);
|
|
$input-prefix-border-color: $input-border-color;
|
|
|
|
// panel
|
|
$panel-bg: darken( $body-bg, 5% );
|
|
|
|
// reveal modal
|
|
$reveal-modal-bg: $panel-bg;
|
|
$reveal-border-color: $form-border-color;
|
|
|
|
// sub-nav
|
|
$sub-nav-font-color: $inactive-color;
|
|
|
|
// pagination
|
|
$pagination-link-font-color: $link-color;
|
|
$pagination-link-unavailable-font-color: $inactive-color;
|
|
$pagination-link-current-font-color: $highlight-color;
|
|
|
|
// tables
|
|
$table-bg: $background-color;
|
|
$table-even-row-bg: $panel-bg;
|
|
$table-border-color: $border-color;
|
|
$table-head-bg: $primary-color;
|
|
$table-head-font-color: $primary-text-color;
|
|
$table-row-font-color: $text-color;
|
|
|
|
// $table-row-font-color: #222;
|
|
|
|
// navigation
|
|
$topbar-bg: $soft-accent-color;
|
|
$topbar-link-weight: normal;
|
|
$topbar-link-color: #222200;
|
|
$topbar-link-color-hover: $primary-text-color;
|
|
$topbar-link-bg-hover: $primary-color;
|
|
|
|
$topbar-dropdown-bg: $topbar-bg;
|
|
$topbar-dropdown-link-color: $topbar-link-color;
|
|
$topbar-dropdown-link-bg: $topbar-bg;
|
|
|
|
$topbar-menu-link-color: $topbar-link-color;
|
|
$topbar-menu-icon-color: $topbar-link-color;
|
|
|
|
// celerity-specific measurements
|
|
$sidebar-width: 9em;
|
|
$masthead-height: 6.875em;
|
|
$header-offset-height: 2em;
|
|
|
|
@import "skins/global-styles", "skins/nav", "skins/skiplink";
|
|
|
|
a:hover,
|
|
a:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul { list-style: square;}
|
|
|
|
/**
|
|
* Header
|
|
*/
|
|
|
|
@include main-nav( vertical, left, $masthead-height, 0, 2em, 1em, 9em );
|
|
|
|
#masthead {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 25px;
|
|
|
|
#sitename {
|
|
font-family: "Century Gothic", Verdana, sans-serif;
|
|
font-weight: normal;
|
|
font-size: 175%;
|
|
|
|
a {
|
|
color: $strong-accent-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*Scheme specific divs to contain header stripes*/
|
|
#header-divider {
|
|
position: absolute;
|
|
top: $nav-small-screen-header-height;
|
|
left: 0;
|
|
background-color: $header-image-color;
|
|
background-image: url("/img/celerity/dk-stripe.jpg");
|
|
background-position: right;
|
|
background-repeat: repeat-y;
|
|
width: 100%;
|
|
|
|
#header-divider-insert {
|
|
margin-left: 1em;
|
|
height: 20px;
|
|
width: 9em;
|
|
background: url("/img/celerity/stripes.jpg");
|
|
background-position: center;
|
|
}
|
|
}
|
|
|
|
@media #{$medium-up} {
|
|
#header-divider {
|
|
top: $masthead-height;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Footer
|
|
*/
|
|
footer { border-top: 4px double $header-image-color;
|
|
border-bottom: 4px double $header-image-color;
|
|
margin: 1em;
|
|
text-align: center;
|
|
|
|
ul { list-style: none;
|
|
margin: .25em 0;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
li { display: inline; }
|
|
p { margin: .25em 0;
|
|
padding: 0;
|
|
font-size: small;
|
|
color: lighten( $body-font-color, 15% );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* #content
|
|
*/
|
|
|
|
#content {
|
|
@include grid-row( nest-collapse );
|
|
}
|
|
|
|
@import "skins/page-layout-hacks";
|
|
|
|
@media #{$topbar-media-query} {
|
|
#page {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
/*Scheme specific div to contain sidebar stripes*/
|
|
#page-decoration {
|
|
background-image: url("/img/celerity/lt-stripe.jpg");
|
|
background-repeat: repeat-x;
|
|
background-position: top;
|
|
width: $sidebar-width;
|
|
height: 50px;
|
|
margin-left: 1em;
|
|
margin-top: -30px;
|
|
float: left;
|
|
display: inline; /* to defeat the IE double-margin bug */
|
|
}
|
|
|
|
/**
|
|
* Sidebar and Menu
|
|
*/
|
|
|
|
.main-nav {
|
|
top: 0;
|
|
left: 1em;
|
|
|
|
ul {
|
|
margin-left: 5px;
|
|
margin-right: 3px;
|
|
margin-top: 40px;
|
|
padding-left: 0;
|
|
font-size: small;
|
|
list-style: none;
|
|
}
|
|
|
|
ul ul {
|
|
margin-left: 1em;
|
|
margin-right: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
li {
|
|
padding: .15em 0;
|
|
}
|
|
}
|
|
|
|
#account-links {
|
|
padding-left: $sidebar-width + 1em;
|
|
}
|
|
|
|
#header-userpic { text-align: center;
|
|
height: 100px;
|
|
background-image: url("/img/celerity/square.jpg");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
#header-userpic img { margin-top: 10px;
|
|
border: none;
|
|
background-color: $topbar-bg; /*so the square doesn't show behind transparent icons */
|
|
}
|
|
|
|
/**
|
|
* #content
|
|
*/
|
|
#content {
|
|
margin-left: 1em;
|
|
padding: 1px 1em 1em 1.5em;
|
|
max-width: $row-width + $sidebar-width + 2.5em; // desired content width + border width + padding
|
|
}
|
|
}
|
|
|
|
.action-box ul.pagination li:hover a, .action-box ul.pagination li a:focus {
|
|
background-color: $input-border-color;
|
|
|
|
}
|
|
|
|
.action-box ul.pagination li.current:hover a, .action-box ul.pagination li.current a:focus,
|
|
.action-box ul.pagination li.current a:visited {
|
|
background-color: $primary-color;
|
|
color: $pagination-link-current-font-color;
|
|
|
|
}
|