741 lines
16 KiB
CSS
741 lines
16 KiB
CSS
/** Celerity CSS
|
|
*
|
|
* Authors:
|
|
* Emily Ravenwood <ravenwood@alltrees.org>
|
|
*
|
|
* Copyright (c) 2009 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'.
|
|
*/
|
|
|
|
/* Colors:
|
|
dkgrn=#999966
|
|
text dkgrn=#777711
|
|
ltgrn=#DDDDAA
|
|
vryltgrn=#EEEECC
|
|
grygrn=#EEEEDD
|
|
dkgrygrn=#DDDDCC
|
|
link ltgrn=#888833
|
|
link dkgrn=#666611
|
|
* Colors for template:
|
|
oddcomment=#EEEECC
|
|
evencomment=#DDDDBB
|
|
*/
|
|
|
|
/**
|
|
* Global
|
|
*/
|
|
|
|
body {
|
|
font-family: Arial, Verdana, sans-serif;
|
|
line-height: 1.25em;
|
|
background-color: #ffffff;
|
|
color: #222211;
|
|
}
|
|
|
|
H1, H2, #content H2, H3, H4, table caption { font-family: "Century Gothic", Verdana, sans-serif;
|
|
font-weight: normal;
|
|
padding: .5em 0;
|
|
line-height: 1.5;
|
|
}
|
|
H1 { font-size: 175%; }
|
|
H2 { font-size: 150%; }
|
|
#content H2, table caption { font-size: 125%; }
|
|
H3 { font-size: 125%; }
|
|
H4 { font-size: 100%; }
|
|
|
|
ul { list-style: square;}
|
|
|
|
a:link,
|
|
.link {
|
|
color: #888833;
|
|
}
|
|
a:visited {
|
|
color: #666611;
|
|
}
|
|
a:hover,
|
|
a:active,
|
|
.link:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#canvas {
|
|
padding-top: 1px; /*to ensure margin*/
|
|
}
|
|
#page {
|
|
margin-bottom: 2em;
|
|
padding-top: 1px; /*to ensure margin*/
|
|
}
|
|
/*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: 9em;
|
|
height: 50px;
|
|
margin-left: 1em;
|
|
margin-top: -50px;
|
|
float: left;
|
|
display: inline; /* to defeat the IE double-margin bug */ }
|
|
|
|
/**
|
|
* Header
|
|
*/
|
|
#masthead { position: absolute;
|
|
top: 50px;
|
|
right: 25px;
|
|
}
|
|
#sitename { font-family: "Century Gothic", Verdana, sans-serif;
|
|
font-weight: normal;
|
|
font-size: 175%;
|
|
}
|
|
#sitename a { color: #009e64; }
|
|
|
|
#account-links {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 13em;
|
|
text-align: left;
|
|
font-size: small;
|
|
}
|
|
#account-links ul { list-style: none;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
margin-top: 5px;
|
|
white-space: nowrap; /* to make sure the links don't wrap under short usernames */
|
|
}
|
|
#account-links li { display: inline; margin-right: 0.5em;}
|
|
|
|
#account-links li:after {
|
|
content: "•";
|
|
margin-left: 0.5em;
|
|
}
|
|
#account-links li:last-child:after {
|
|
content:"";
|
|
margin-left: 0;
|
|
}
|
|
|
|
#account-links #login-table td {
|
|
padding: 3px;
|
|
text-align: left;
|
|
}
|
|
#account-links #login-table td.input-cell,
|
|
#account-links #login-table td.remember-me-cell {
|
|
text-align: left;
|
|
}
|
|
|
|
/*Scheme specific divs to contain header stripes*/
|
|
#header-divider { position: absolute;
|
|
top: 110px;
|
|
left: 0;
|
|
background-color: #ff6397;
|
|
/*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;
|
|
}
|
|
|
|
#header-search { position: absolute;
|
|
top: 140px;
|
|
right: 22px;
|
|
text-align: right;
|
|
}
|
|
|
|
/**
|
|
* Sidebar and Menu
|
|
*/
|
|
nav { position: absolute;
|
|
top: 0;
|
|
left: 1em;
|
|
width: 9em;
|
|
background-color: #7dffcf;
|
|
}
|
|
nav ul { margin-left: 5px;
|
|
margin-right: 3px;
|
|
margin-top: 40px;
|
|
padding-left: 0;
|
|
font-size: small;
|
|
list-style: none;
|
|
}
|
|
nav ul ul { margin-left: 1em;
|
|
margin-right: 0;
|
|
margin-top: 0;
|
|
}
|
|
nav li { padding: .15em 0; }
|
|
nav .subnav a,
|
|
nav .topnav a {color: #222200; }
|
|
|
|
#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: #DDDDAA; /*so the square doesn't show behind transparent icons */
|
|
}
|
|
|
|
/**
|
|
* Footer
|
|
*/
|
|
footer { border-top: 4px double #999966;
|
|
border-bottom: 4px double #999966;
|
|
margin: 1em;
|
|
text-align: center;
|
|
}
|
|
footer ul { list-style: none;
|
|
margin: .25em 0;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
footer li { display: inline; }
|
|
footer p { margin: .25em 0;
|
|
padding: 0;
|
|
font-size: small;
|
|
color: #666666;
|
|
}
|
|
|
|
/**
|
|
* #content
|
|
*/
|
|
#content {
|
|
margin-left: 1em;
|
|
border-left: 9em solid #DDDDAA;
|
|
margin-top: 170px;
|
|
padding: 1px 1em 1em 1.5em;
|
|
min-height: 73rem;
|
|
}
|
|
|
|
#content p {
|
|
margin-bottom: 1em;
|
|
}
|
|
#content p.note {
|
|
font-style: italic;
|
|
font-size: 0.8em;
|
|
}
|
|
#content ul.bullet-list {
|
|
list-style: square outside;
|
|
margin-left: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/**
|
|
* Content Layouts
|
|
*
|
|
* Content layouts are determined based on the class assigned to #content. Potential layouts include:
|
|
* -- wide sidebars
|
|
* -- thin sidebars
|
|
* -- equal width/height columns
|
|
* -- full page (default)
|
|
*
|
|
* Columns/rows inside of #content are named primary, secondary, tertiary, etc and
|
|
* content is placed inside based on order of importance.
|
|
*/
|
|
|
|
/* Mostly re-measuring width */
|
|
/* full page (default) */
|
|
#primary,
|
|
#secondary {
|
|
margin-bottom: 2em;
|
|
}
|
|
/* 2 column wide right sidebar */
|
|
.layout-wide-right-sidebar #primary {
|
|
width: 65%;
|
|
margin-right: 1.25em;
|
|
float: left;
|
|
padding: 0;
|
|
}
|
|
.layout-wide-right-sidebar #secondary {
|
|
float: right;
|
|
width: 30%;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-top: 0.5em;
|
|
}
|
|
/**
|
|
* Panels are generic boxes for divs inside of #content
|
|
*/
|
|
#content #primary .panel,
|
|
#content #secondary .panel {
|
|
width: 100%;
|
|
border-width: 1px 0 1px 0;
|
|
border-color: #ccc;
|
|
border-style: solid;
|
|
margin: 0 0 0.166667em 0;
|
|
overflow: hidden;
|
|
}
|
|
#content .panel .sidebar,
|
|
#content .panel .contents,
|
|
#content .panel .item,
|
|
#content .panel .actions {
|
|
border-color: #ccc;
|
|
}
|
|
#content #primary .panel h2 {
|
|
line-height: 2em;
|
|
border-style: none;
|
|
}
|
|
#content #primary .panel p {
|
|
clear: both;
|
|
}
|
|
#content #secondary .panel h2 {
|
|
line-height: 30px;
|
|
border-style: none;
|
|
}
|
|
#content .panel .sidebar ul {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
}
|
|
#content .panel ul {
|
|
list-style: square;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
/**
|
|
* Panels have different styles for different content layouts
|
|
*/
|
|
.layout-wide-right-sidebar #primary .panel .sidebar {
|
|
float: left;
|
|
width: 22%;
|
|
}
|
|
.layout-wide-right-sidebar #primary .panel .contents {
|
|
float: left;
|
|
padding-top: 6px;
|
|
padding-left: 14px;
|
|
border-left: 1px solid #ccc;
|
|
width: 75%;
|
|
line-height: 1.8;
|
|
}
|
|
.layout-wide-right-sidebar #secondary .panel .contents {
|
|
margin: 0.5em 0;
|
|
line-height: 1.8;
|
|
}
|
|
/* panel-first class is added through js */
|
|
#content .panel-first {
|
|
border-top: 0 !important;
|
|
}
|
|
|
|
/* generic classes */
|
|
.disabled {
|
|
color: #999 !important;
|
|
background-color: #ddd !important;
|
|
border-color: #ccc !important;
|
|
}
|
|
.read, .inactive {
|
|
color: #888;
|
|
}
|
|
.read:hover {
|
|
color: #000;
|
|
}
|
|
.read a , .inactive a {
|
|
color: #999 !important;
|
|
}
|
|
.read:hover a {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.detail {
|
|
color: #555;
|
|
}
|
|
.status-hint {
|
|
color: #ddd;
|
|
}
|
|
|
|
.tablist .tab a {
|
|
background: #DDDDAA;
|
|
color: #000;
|
|
border-color: #999966;
|
|
}
|
|
.tablist .tab a:hover, .tablist .tab a.active {
|
|
background: #EEEECC;
|
|
}
|
|
.tab-header {
|
|
background: #EEEECC;
|
|
border-top-color: #EEEECC;
|
|
border-left: 1px solid #999966;
|
|
border-right: 1px solid #999966;
|
|
}
|
|
.tab-container {
|
|
background-color:#f7f7f7;
|
|
border: 1px solid #999966;
|
|
border-top: none;
|
|
}
|
|
|
|
.action-bar {
|
|
text-align: center;
|
|
background-color: #EEEECC;
|
|
}
|
|
.action-box .inner, .comment-page-list {
|
|
color: #000;
|
|
border: 1px solid #555555;
|
|
background-color: #DDDDAA;
|
|
}
|
|
|
|
.select-list input {
|
|
color: #222;
|
|
background-color: #DDDDAA;
|
|
border: 2px solid #999966;
|
|
}
|
|
.select-list input:active {
|
|
color: #555;
|
|
background-color: #EEEEBB;
|
|
border: 2px solid #BBBB88;
|
|
}
|
|
|
|
.message-box .title {
|
|
font-weight: bold;
|
|
}
|
|
.message-box h1.title {
|
|
text-align: center;
|
|
}
|
|
.highlight-box {
|
|
border: 1px solid;
|
|
}
|
|
.highlight, .highlight-box, .pagination .current {
|
|
border-color: #999966;
|
|
background: #EEEECC;
|
|
color: #000;
|
|
}
|
|
.searchhighlight {
|
|
background: #eeeecc;
|
|
color: #000;
|
|
padding: 0.2em;
|
|
font-weight: bold;
|
|
}
|
|
.inset-box {
|
|
border-right: 1px solid #DDDDAA;
|
|
border-bottom: 1px solid #DDDDAA;
|
|
background: #fff;
|
|
padding: 3px 5px;
|
|
}
|
|
.highlight-box, .message-box, .error-box, .alert-box {
|
|
margin: 1em auto;
|
|
padding: 0.5em;
|
|
}
|
|
.warning-box {
|
|
border: 1px solid #999966;
|
|
background-color: #DDDDAA;
|
|
color: #000;
|
|
}
|
|
.error-box, .alert-box {
|
|
color: #000;
|
|
background-color: #fcf6db;
|
|
border: 1px solid #ffdfc0;
|
|
}
|
|
|
|
.odd, tr.odd th, tr.odd td {
|
|
background-color: #fff;
|
|
}
|
|
.even, tr.even th, tr.even td {
|
|
background-color: #eee;
|
|
}
|
|
thead th, tfoot td {
|
|
background-color: #ffd;
|
|
}
|
|
.column-table tbody th {
|
|
background-color: #fbfbfb;
|
|
border-right: 1px solid #cdcdcd;
|
|
}
|
|
|
|
table.grid {
|
|
border-collapse: collapse;
|
|
}
|
|
table.grid, table.grid td {
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
.select-list li, .NotificationTable td {
|
|
border-color: #ccc;
|
|
}
|
|
.select-list li img {
|
|
border-color: #EEEECC;
|
|
}
|
|
.selected, .select-list li.selected, tr.selected td {
|
|
background-color: #EEEECC;
|
|
border-color: #999966;
|
|
}
|
|
|
|
form, fieldset, legend, legend span {
|
|
border-color: #999966;
|
|
}
|
|
.hint-input {
|
|
color: #777;
|
|
border: 1px solid #CCC;
|
|
}
|
|
.hint-input:focus
|
|
{
|
|
color: #000;
|
|
border: 1px solid #999;
|
|
}
|
|
.multiple-select {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.table-form table {
|
|
background-color:#fff;
|
|
}
|
|
|
|
.simple-form .error input, form .error input {
|
|
border: 3px solid #ff0000;
|
|
}
|
|
.simple-form .error .error-msg, form .error .error-msg {
|
|
color: #ff0000;
|
|
display: block;
|
|
}
|
|
|
|
.section-nav {
|
|
background-color: #EEEECC;
|
|
}
|
|
.section-nav li a, .section-nav ul, .section-nav li, .section-nav-separator {
|
|
border-color: #999966;
|
|
color: #777711;
|
|
}
|
|
.section-nav li a:visited {
|
|
color: #999966;
|
|
}
|
|
.section-nav li.on {
|
|
background-color: #fff;
|
|
}
|
|
.section-nav-content {
|
|
border-color: #999966;
|
|
}
|
|
.section-nav-inner-wrapper {
|
|
background: url("/img/celerity/celgrn-borderpixel.gif") repeat-y scroll 134px 50%;;
|
|
}
|
|
|
|
.collapsible .collapse-button {
|
|
width: 20px;
|
|
}
|
|
.collapsible.collapsed .collapse-button {
|
|
background-image: url("/img/celerity/celgrn-arrow-right.gif");
|
|
}
|
|
.collapsible.expanded .collapse-button {
|
|
background-image: url("/img/celerity/celgrn-arrow-down.gif");
|
|
}
|
|
|
|
.header {
|
|
background-color: #EEEEDD;
|
|
border-bottom: 1px solid #999966;
|
|
}
|
|
.subheader {
|
|
background-color: #EEEECC;
|
|
border-bottom: 1px solid #999966;
|
|
margin: 1em 0 0;
|
|
padding: 0.2em;
|
|
font-size: 110%;
|
|
}
|
|
|
|
.preview-image {
|
|
border: 1px solid #fff;
|
|
}
|
|
|
|
.token:hover, .token.hover, .token:focus, .token.focus {
|
|
color: #999966;
|
|
border-color:#666611;
|
|
}
|
|
|
|
.token .token_remove:hover, .token .token_remove:focus {
|
|
color: #999966;
|
|
background-color: #EEEECC;
|
|
}
|
|
|
|
#iconselector_icons_list li:hover, .kwmenu .selected, #iconselector_icons_list .iconselector_selected {
|
|
border-color: #999966;
|
|
}
|
|
|
|
.slidecontrols a:hover {
|
|
color: #999966;
|
|
}
|
|
|
|
/* contextualhover.css */
|
|
div.ContextualPopup div.Inner {
|
|
background-color: #fff !important;
|
|
color: #000 !important;
|
|
border: 1px solid #999966;
|
|
}
|
|
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
|
|
color: #999966 !important;
|
|
}
|
|
|
|
.ippu {
|
|
color: #000000
|
|
}
|
|
.ippu .track_title {
|
|
color: #DDDDAA;
|
|
}
|
|
|
|
/**
|
|
* Temporary page-specific styling
|
|
* /
|
|
/* talkpage */
|
|
|
|
.talkform .disabled {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/*S2 talkpage*/
|
|
.entry .link, .comment .link {color: #222211; } /*overrides having link color applied to :before and :after elements*/
|
|
|
|
.comment .header { border-bottom: none; border-right: none; }
|
|
.comment-depth-odd > .dwexpcomment .header { background-color: #EEEECC; }
|
|
.comment-depth-even > .dwexpcomment .header { background-color: #DDDBBB; }
|
|
.screened .header{ background-color: #EEEEEE; }
|
|
|
|
/* bml talkpage*/
|
|
.cmtbar { border-bottom: none; border-right: none; }
|
|
td.odd { background-color: #EEEECC; }
|
|
td.even { background-color: #DDDBBB; }
|
|
td.screened { background-color: #EEEEEE; }
|
|
|
|
/* profile.css */
|
|
.section, .username, .actions li {
|
|
background-color: #EEEECC;
|
|
border-bottom: 1px solid #999966;
|
|
color: #777711;
|
|
}
|
|
.section span.section_link {
|
|
color: #000;
|
|
}
|
|
|
|
/* lj_settings.css */
|
|
.section_head {
|
|
background-color: #DDDDAA;
|
|
border: none;
|
|
}
|
|
.field_name {
|
|
background-color: #EEEECC;
|
|
}
|
|
|
|
/* esn.css */
|
|
.CategoryRow td {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
/* community/settings */
|
|
.community-settings legend {
|
|
color: #888833;
|
|
}
|
|
|
|
/* shop pages */
|
|
.shop-item-highlight {
|
|
border: 1px solid #999966;
|
|
}
|
|
|
|
/* inbox */
|
|
.folders a {
|
|
color: #000;
|
|
border: 1px solid #fff;
|
|
}
|
|
.folders a.selected {
|
|
background: #EEEECC;
|
|
border-color: #999966;
|
|
}
|
|
.folders a:hover {
|
|
border-color: #DDDDCC;
|
|
background: #EEEEDD;
|
|
}
|
|
|
|
/* entry.css */
|
|
a#lj_userpicselect {color:#999966;}
|
|
#lj_userpicselect_img {border:1px solid #fff;}
|
|
#lj_userpicselect_img:hover {border:1px solid #999966;}
|
|
#lj_userpicselect_img_txt {color:#999966 !important;}
|
|
#userpic_preview_image.userpic_loggedout {border:1px solid #999966;}
|
|
.userpic_preview_border {border:1px solid #ccc;}
|
|
#infobox {border-left:1px solid #000;}
|
|
#compose-entry {border-bottom:1px solid #bbb;}
|
|
#compose-entry ul li a {background-color:#fff;border:1px solid #bbb;border-bottom:none;}
|
|
#compose-entry ul li.on a {border-bottom:1px solid #fff;}
|
|
#draft-container {border:1px solid #bbb;border-top:none;}
|
|
#draftstatus {background-color:#fff;}
|
|
#spellcheck-results {border:1px solid #DDDDAA;background-color: #fff;}
|
|
#htmltools {border-right:1px solid #bbb;border-left:1px solid #bbb;background:#fff;}
|
|
#htmltools ul {border-bottom:1px solid #8D8D8D;}
|
|
#options, #public, #submitbar {border:1px solid #DDDDCC;background-color:#EEEEDD;}
|
|
|
|
/* create flow */
|
|
.appwidget-createaccount .create-button, .appwidget-createaccountprogressmeter .step-block-inactive { color: #222; background-color: #DDDDAA; }
|
|
.appwidget-createaccountprogressmeter .step-block-active { color: #fff; background-color: #777711; }
|
|
.appwidget-createaccountprogressmeter .step-selected, .appwidget-createaccountprofile .header { color: #777711; }
|
|
.appwidget-createaccountprogressmeter .step-previous { color: #DDDDAA; }
|
|
.appwidget-createaccountprogressmeter .step-next { color: #222; }
|
|
.appwidget-createaccountprofile .field-name { background-color: #e0e0e0; }
|
|
|
|
/* lj_base-app.css */
|
|
hr.hr {
|
|
color: #999966;
|
|
background-color: #999966;
|
|
}
|
|
|
|
.appwidget .more-link {
|
|
color: #999966 !important;
|
|
background: url('/img/arrow-double-black.gif') no-repeat 0 60%;
|
|
}
|
|
|
|
.message {
|
|
border: 5px solid #eee;
|
|
}
|
|
.message blockquote {
|
|
border: 1px solid #aaa;
|
|
}
|
|
|
|
/* MonthPage */
|
|
|
|
#archive-month .navigation li, #archive-month .navigation a { display: inline; }
|
|
|
|
#archive-month .navigation a {
|
|
font-weight: bold;
|
|
background-color: transparent;
|
|
color: #888833;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#archive-month .navigation a:visited {
|
|
color: #666611;
|
|
}
|
|
#archive-month .navigation a:hover,
|
|
#archive-month .navigation a:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#archive-month .highlight-box {margin: auto; text-align: center;display: inline-block;}
|
|
#archive-month {text-align: center;}
|
|
#archive-month .month {text-align: left;}
|
|
#archive-month h3.entry-title {display: inline; font-size:1em;font-weight: normal;}
|
|
|
|
#archive-month .entry-title, #archive-month .access-filter, #archive-month .poster {margin-left:1em;}
|
|
#archive-month .empty {margin: 0;}
|
|
#archive-month .datetime {font-style: italic;}
|
|
#archive-month .tag li {display: inline; list-style:none;}
|
|
|
|
|
|
.session-msg-box.info {
|
|
background-color:#e9e9e9;
|
|
border-color:#c8c8c8;
|
|
color:#4f4f4f
|
|
}
|
|
|
|
.session-msg-box.warning {
|
|
background-color:#fbf9dd;
|
|
border-color:#f4efa2;
|
|
color:#4f4f4f
|
|
}
|
|
|
|
.session-msg-box.error {
|
|
background-color:#fff0e4;
|
|
border-color:#ffcaa0;
|
|
color:#4f4f4f
|
|
}
|
|
|
|
.session-msg-box.success {
|
|
background-color:#e1eed7;
|
|
border-color:#c0dbaa;
|
|
color:#4f4f4f
|
|
}
|