1001 lines
21 KiB
CSS
1001 lines
21 KiB
CSS
|
/** Gradation Vertical 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:
|
||
|
|
vrylt=#888888 (borders)
|
||
|
|
dk=#333333 (hover ul)
|
||
|
|
vrydk=#222222 (hover a)
|
||
|
|
med=#444444 (inactive tabs, evencomment)
|
||
|
|
lt=#666666 (active tabs)
|
||
|
|
altlt=#555555 (oddcomment, footer border)
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Global
|
||
|
|
*/
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: Arial, Verdana, sans-serif;
|
||
|
|
line-height: 1.25em;
|
||
|
|
background-image: url('/img/gradation/blackfade.png');
|
||
|
|
background-position: top;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
background-color: #111111;
|
||
|
|
color: #e9e9e0;
|
||
|
|
}
|
||
|
|
|
||
|
|
H1, H2, H3, H4, table.caption {
|
||
|
|
padding: 1em 0;
|
||
|
|
line-height: 1em;
|
||
|
|
}
|
||
|
|
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: circle; }
|
||
|
|
|
||
|
|
a:link,
|
||
|
|
.link {
|
||
|
|
color: #CCCC99;
|
||
|
|
}
|
||
|
|
a:visited {
|
||
|
|
color: #999966;
|
||
|
|
}
|
||
|
|
a:hover,
|
||
|
|
a:active,
|
||
|
|
.link:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#canvas {
|
||
|
|
padding-top: 1px; /*to ensue margin*/
|
||
|
|
margin-top: 120px;
|
||
|
|
}
|
||
|
|
#page {
|
||
|
|
padding-top: 1px; /*to ensue margin*/
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Header
|
||
|
|
*/
|
||
|
|
#masthead {
|
||
|
|
position: absolute;
|
||
|
|
top: 30px;
|
||
|
|
right: 1em;
|
||
|
|
}
|
||
|
|
#sitename {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 175%;
|
||
|
|
}
|
||
|
|
#sitename a { color: #ffffff; }
|
||
|
|
|
||
|
|
#account-links {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 100px;
|
||
|
|
padding-top: .5em;
|
||
|
|
text-align: left;
|
||
|
|
font-size: small;
|
||
|
|
color: #ffffff;
|
||
|
|
z-index: 200; /*keep log-in on top of search bar*/
|
||
|
|
}
|
||
|
|
#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 a {color: #ffffff; }
|
||
|
|
|
||
|
|
#account-links-text { margin-left: 100px; }
|
||
|
|
|
||
|
|
#account-links #login-table { margin-left: 5px; }
|
||
|
|
#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;
|
||
|
|
}
|
||
|
|
#account-links #login_user,
|
||
|
|
#account-links #login_password { }
|
||
|
|
#account-links-userpic { text-align: center;
|
||
|
|
height: 100px;
|
||
|
|
width: 100px;
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
#account-links-userpic img {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#header-search { position: absolute;
|
||
|
|
top: 120px;
|
||
|
|
right: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 2.5em;
|
||
|
|
text-align: right;
|
||
|
|
background-color: #444444;
|
||
|
|
border-top: 1px solid #000000;
|
||
|
|
border-bottom: 1px solid #000000;
|
||
|
|
}
|
||
|
|
#header-search .appwidget-search {
|
||
|
|
margin-right: .5em;
|
||
|
|
margin-top: .25em;
|
||
|
|
}
|
||
|
|
#header-search #search { }
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Menu
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Vertical */
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #222222;
|
||
|
|
}
|
||
|
|
|
||
|
|
#canvas.vertical-nav {
|
||
|
|
margin-left: 8.25em;
|
||
|
|
min-height: 60em;
|
||
|
|
background-color: #111111;
|
||
|
|
padding-bottom: 1px; /* to ensure margin*/
|
||
|
|
}
|
||
|
|
|
||
|
|
#canvas.vertical-nav #header-search { z-index: 100; }
|
||
|
|
|
||
|
|
#canvas.vertical-nav nav { position: absolute;
|
||
|
|
top: 120px;
|
||
|
|
left: 0;
|
||
|
|
width: 8.25em;
|
||
|
|
background-color: #222222;
|
||
|
|
}
|
||
|
|
#canvas.vertical-nav nav ul { margin-top: 3.5em; /*to clear search bar */
|
||
|
|
padding-left: 0;
|
||
|
|
margin-left: 0;
|
||
|
|
font-size: small;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
#canvas.vertical-nav nav ul ul {
|
||
|
|
margin-top: 0; /* undo the above*/
|
||
|
|
}
|
||
|
|
#canvas.vertical-nav nav a {color: #ffffff;
|
||
|
|
display: block;
|
||
|
|
text-decoration: none; }
|
||
|
|
nav a:hover { background-color: #444444; }
|
||
|
|
nav .topnav a {font-weight: bold;
|
||
|
|
padding: .20em 5px;}
|
||
|
|
nav .subnav a {font-weight: normal;
|
||
|
|
padding: .20em 5px .20em 1em; }
|
||
|
|
|
||
|
|
/* Horizontal */
|
||
|
|
|
||
|
|
#canvas.horizontal-nav { background-color: #111111; }
|
||
|
|
|
||
|
|
#canvas.horizontal-nav nav {
|
||
|
|
position: absolute;
|
||
|
|
top: 120px;
|
||
|
|
left: 0;
|
||
|
|
background-color: #444;
|
||
|
|
height: 2.5em;
|
||
|
|
width: auto;
|
||
|
|
line-height: 2.5em;
|
||
|
|
clear: both;
|
||
|
|
padding-left: .5em;
|
||
|
|
z-index: 100;
|
||
|
|
border-top: 1px solid #000;
|
||
|
|
border-bottom: 1px solid #000;
|
||
|
|
}
|
||
|
|
#canvas.horizontal-nav nav ul { margin-left: 0;
|
||
|
|
padding-left: 0;
|
||
|
|
list-style: none; }
|
||
|
|
#canvas.horizontal-nav nav ul li {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
height: 100%;
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
#canvas.horizontal-nav nav ul > li {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
#canvas.horizontal-nav nav ul li a {
|
||
|
|
display: block;
|
||
|
|
color: #fff;
|
||
|
|
text-decoration: none;
|
||
|
|
text-indent: 1.5em;
|
||
|
|
padding-right: 0.75em;
|
||
|
|
}
|
||
|
|
/* .hover is a class added by js for the currently hovered/focused menu */
|
||
|
|
#canvas.horizontal-nav nav ul li.hover a {
|
||
|
|
height: 100%;
|
||
|
|
background-color: #333;
|
||
|
|
color: #fff;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
#canvas.horizontal-nav nav ul li.hover a:hover {
|
||
|
|
background-color: #222;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
#canvas.horizontal-nav nav ul li ul {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#canvas.horizontal-nav nav ul li.hover ul {
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 2.5em;
|
||
|
|
left: 0;
|
||
|
|
width: inherit;
|
||
|
|
white-space: nowrap;
|
||
|
|
background-color: #333;
|
||
|
|
}
|
||
|
|
#canvas.horizontal-nav nav ul li ul li {
|
||
|
|
float: none;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
#canvas.horizontal-nav nav ul li ul li a {
|
||
|
|
text-align: left;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* This is to make the update page look decent in horizontal */
|
||
|
|
|
||
|
|
#canvas.horizontal-nav #updateForm { margin: 0 auto; }
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Footer
|
||
|
|
*/
|
||
|
|
footer {
|
||
|
|
margin: 1em;
|
||
|
|
text-align: center;
|
||
|
|
border-top: 1px solid #555555;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
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: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* #content
|
||
|
|
*/
|
||
|
|
#content { margin: 0;
|
||
|
|
padding: 1px 1em 1em 1.5em;
|
||
|
|
margin-top: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#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.155567em 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: circle;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea, input {
|
||
|
|
background-color: #222;
|
||
|
|
color: #fff;
|
||
|
|
border: 1px solid #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.recaptchatable input {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* generic classes */
|
||
|
|
.disabled {
|
||
|
|
color: #999 !important;
|
||
|
|
background-color: #333 !important;
|
||
|
|
border-color: #ccc !important;
|
||
|
|
}
|
||
|
|
.read, .inactive {
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
.read:hover {
|
||
|
|
color: #eee;
|
||
|
|
}
|
||
|
|
.read a, .inactive a {
|
||
|
|
color: #999 !important;
|
||
|
|
}
|
||
|
|
.read:hover a {
|
||
|
|
color: inherit !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
.status-hint {
|
||
|
|
color: #ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tablist .tab a {
|
||
|
|
background: #444444;
|
||
|
|
border-color: #888888;
|
||
|
|
color: #eeeeee;
|
||
|
|
}
|
||
|
|
.tablist .tab a:hover, .tablist .tab a.active {
|
||
|
|
background: #666666;
|
||
|
|
}
|
||
|
|
.tab-header {
|
||
|
|
background: #666666;
|
||
|
|
border-top-color: #666666;
|
||
|
|
border-left: 1px solid #888888;
|
||
|
|
border-right: 1px solid #888888;
|
||
|
|
}
|
||
|
|
.tab-container {
|
||
|
|
background-color:#222;
|
||
|
|
border: 1px solid #888;
|
||
|
|
border-top: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-bar {
|
||
|
|
text-align: center;
|
||
|
|
background-color: #666666;
|
||
|
|
}
|
||
|
|
.action-box .inner, .comment-page-list {
|
||
|
|
color: #eee;
|
||
|
|
border: 1px solid #555555;
|
||
|
|
background-color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-list input {
|
||
|
|
background: #444444;
|
||
|
|
color: #fff;
|
||
|
|
border: 2px solid #444;
|
||
|
|
border-top: 2px solid #888;
|
||
|
|
border-left: 2px solid #888;
|
||
|
|
}
|
||
|
|
.select-list input:active {
|
||
|
|
background: #666666;
|
||
|
|
color: #eee;
|
||
|
|
border: 2px solid #888;
|
||
|
|
border-top: 2px solid #444;
|
||
|
|
border-left: 2px solid #444;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: #888888;
|
||
|
|
background: #333333;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.searchhighlight {
|
||
|
|
background: #333;
|
||
|
|
color: #fff;
|
||
|
|
padding: 0.2em;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.inset-box {
|
||
|
|
background: #111;
|
||
|
|
border: 1px solid #888;
|
||
|
|
padding: 3px 5px;
|
||
|
|
}
|
||
|
|
.highlight-box, .message-box, .error-box, .alert-box {
|
||
|
|
margin: 1em auto;
|
||
|
|
padding: 0.5em;
|
||
|
|
}
|
||
|
|
.warning-box {
|
||
|
|
border: 1px solid #fff;
|
||
|
|
background-color: #333;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.error-box, .alert-box {
|
||
|
|
color: #fff;
|
||
|
|
background-color: #916E10;
|
||
|
|
border: 1px solid #ffdfc0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.odd, tr.odd th, tr.odd td {
|
||
|
|
background-color: #111;
|
||
|
|
}
|
||
|
|
.even, tr.even th, tr.even td,
|
||
|
|
thead th, tfoot td {
|
||
|
|
background-color: #1a1a1a;
|
||
|
|
}
|
||
|
|
.column-table tbody th {
|
||
|
|
background-color: #333;
|
||
|
|
border-right: 1px solid #888888;
|
||
|
|
}
|
||
|
|
|
||
|
|
table.grid {
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
table.grid, table.grid td {
|
||
|
|
border: 1px solid #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-list li, .NotificationTable td {
|
||
|
|
border-color: #888;
|
||
|
|
}
|
||
|
|
.select-list li img {
|
||
|
|
border-color: #666666;
|
||
|
|
}
|
||
|
|
.selected, .select-list li.selected, tr.selected td {
|
||
|
|
background-color: #666666;
|
||
|
|
border-color: #888888;
|
||
|
|
}
|
||
|
|
|
||
|
|
form, fieldset, legend, legend span {
|
||
|
|
border-color: #888888;
|
||
|
|
}
|
||
|
|
.hint-input {
|
||
|
|
color: #999;
|
||
|
|
border: 1px solid #888888;
|
||
|
|
}
|
||
|
|
.hint-input:focus {
|
||
|
|
color: #fff;
|
||
|
|
border: 1px solid #888888;
|
||
|
|
}
|
||
|
|
.multiple-select {
|
||
|
|
background-color: #444444;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-form table {
|
||
|
|
background-color:#111;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: #444444;
|
||
|
|
}
|
||
|
|
.section-nav li a, .section-nav ul, .section-nav li, .section-nav-separator {
|
||
|
|
border-color: #888888;
|
||
|
|
}
|
||
|
|
.section-nav-content {
|
||
|
|
border-color: #888888;
|
||
|
|
}
|
||
|
|
.section-nav li.on {
|
||
|
|
background-color: #111;
|
||
|
|
}
|
||
|
|
.section-nav li a:visited {
|
||
|
|
color: #888888;
|
||
|
|
}
|
||
|
|
.section-nav-inner-wrapper {
|
||
|
|
background: url("/img/gradation/gradgray-borderpixel.gif") repeat-y scroll 134px 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.collapsible .collapse-button {
|
||
|
|
width: 20px;
|
||
|
|
}
|
||
|
|
.collapsible.collapsed .collapse-button {
|
||
|
|
background-image: url("/img/gradation/gradgray-arrow-right.gif");
|
||
|
|
}
|
||
|
|
.collapsible.expanded .collapse-button {
|
||
|
|
background-image: url("/img/gradation/gradgray-arrow-down.gif");
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
background: #666666;
|
||
|
|
}
|
||
|
|
.subheader {
|
||
|
|
background-color: #666666;
|
||
|
|
border-bottom: 1px solid #888888;
|
||
|
|
margin: 1em 0 0;
|
||
|
|
padding: 0.2em;
|
||
|
|
font-size: 110%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-image {
|
||
|
|
border: 1px solid #111111;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* posts page */
|
||
|
|
.slidepanel {
|
||
|
|
margin-top: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* contextualhover.css */
|
||
|
|
div.ContextualPopup div.Inner {
|
||
|
|
background-color: #444444 !important;
|
||
|
|
color: #fff !important;
|
||
|
|
border: 1px solid #888888;
|
||
|
|
}
|
||
|
|
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
|
||
|
|
color: #ccc !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ippu {
|
||
|
|
color: #eee
|
||
|
|
}
|
||
|
|
.ippu .track_title {
|
||
|
|
color: #444444;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Temporary page-specific styling
|
||
|
|
* /
|
||
|
|
/* talkpage */
|
||
|
|
|
||
|
|
.talkform .disabled {
|
||
|
|
background: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* S2 TalkPage*/
|
||
|
|
.comment .link, .entry .link {color: #e9e9e0;} /*overrides having link color applied to :before and :after elements*/
|
||
|
|
|
||
|
|
.screened .header {
|
||
|
|
border-bottom: none;
|
||
|
|
border-right: none;
|
||
|
|
background-image: url("/img/gradation/blackfade_screened.png") !important;
|
||
|
|
background-position: top;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
background-color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment .header {
|
||
|
|
border-bottom: none;
|
||
|
|
border-right: none;
|
||
|
|
background-image: url("/img/gradation/blackfade.png");
|
||
|
|
background-position: top;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
}
|
||
|
|
.comment-depth-odd > .dwexpcomment .header { background-color: #444444; }
|
||
|
|
.comment-depth-even > .dwexpcomment .header { background-color: #555555; }
|
||
|
|
|
||
|
|
|
||
|
|
/*bml talkpage*/
|
||
|
|
.cmtbar {
|
||
|
|
border-bottom: none;
|
||
|
|
border-right: none;
|
||
|
|
background-image: url("/img/gradation/blackfade.png");
|
||
|
|
background-position: top;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
}
|
||
|
|
|
||
|
|
td.odd { background-color: #444444; }
|
||
|
|
td.even { background-color: #555555; }
|
||
|
|
td.screened {
|
||
|
|
border-bottom: none;
|
||
|
|
border-right: none;
|
||
|
|
background-image: url("/img/gradation/blackfade_screened.png") !important;
|
||
|
|
background-position: top;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
background-color: #333333;}
|
||
|
|
|
||
|
|
/* lj_settings.css */
|
||
|
|
.section_head, div.username {
|
||
|
|
background-color: #666666;
|
||
|
|
color: #CCC;
|
||
|
|
}
|
||
|
|
.field_block .field_name { background: #333333; }
|
||
|
|
|
||
|
|
/* esn.css */
|
||
|
|
.CategoryRow td {
|
||
|
|
border-bottom: 1px solid #444444;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* For the community/settings page */
|
||
|
|
.community-settings legend {
|
||
|
|
color: #CCCC99;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* shop pages */
|
||
|
|
.shop-item-highlight {
|
||
|
|
border: 1px solid #888888;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* inbox */
|
||
|
|
.folders a {
|
||
|
|
color: #fff;
|
||
|
|
border: 1px solid #111;
|
||
|
|
}
|
||
|
|
.folders a.selected {
|
||
|
|
background: #333;
|
||
|
|
border-color: #999;
|
||
|
|
}
|
||
|
|
.folders a:hover {
|
||
|
|
border-color: #666;
|
||
|
|
background: #666;
|
||
|
|
}
|
||
|
|
/* entry.css */
|
||
|
|
a#lj_userpicselect {color: #888888;}
|
||
|
|
#lj_userpicselect_img {border: 1px solid #111111;}
|
||
|
|
#lj_userpicselect_img:hover {border: 1px solid #888888;}
|
||
|
|
#lj_userpicselect_img_txt {color: #888888 !important;}
|
||
|
|
#userpic_preview_image.userpic_loggedout {border: 1px solid #888888;}
|
||
|
|
.userpic_preview_border {border: 1px solid #ccc;}
|
||
|
|
#infobox {border-left: 1px solid #eee;}
|
||
|
|
#entry {border-bottom: 1px solid #bbb;}
|
||
|
|
#entry ul li a {background-color: #222;border: 1px solid #bbb;border-bottom: none;}
|
||
|
|
#entry ul li.on a {background-color: #222;border-bottom: 1px solid #222;}
|
||
|
|
#draft-container {border: 1px solid #bbb;border-top: none;}
|
||
|
|
#draftstatus {background-color: #222;}
|
||
|
|
#spellcheck-results {border: 1px solid #444444;background-color: #222;}
|
||
|
|
#htmltools {border-right: 1px solid #bbb;border-left: 1px solid #bbb;background: #222;}
|
||
|
|
#htmltools ul {border-bottom: 1px solid #8D8D8D;}
|
||
|
|
#options, #public, #submitbar {border: 1px solid #888888;background-color: #444444;}
|
||
|
|
#compose-entry ul li.on a {background-color: #222;} /* # Makes sure the tab doesn't end up white */
|
||
|
|
|
||
|
|
/* create flow */
|
||
|
|
.appwidget-createaccount .create-button { color: #eee; background-color: #444444; }
|
||
|
|
.appwidget-createaccountprogressmeter .step-block-active { color: #111111; background-color: #888888; }
|
||
|
|
.appwidget-createaccountprogressmeter .step-block-inactive { color: #111111; background-color: #444444; }
|
||
|
|
.appwidget-createaccountprogressmeter .step-selected, .appwidget-createaccountprofile .header { color: #888888; }
|
||
|
|
.appwidget-createaccountprogressmeter .step-previous { color: #444444; }
|
||
|
|
.appwidget-createaccountprogressmeter .step-next { color: #666666; }
|
||
|
|
.appwidget-createaccountprofile .field-name { background-color: #e0e0e0; }
|
||
|
|
|
||
|
|
/* lj_base-app.css */
|
||
|
|
hr.hr {
|
||
|
|
color: #888888;
|
||
|
|
background-color: #888888;
|
||
|
|
}
|
||
|
|
|
||
|
|
input.text,
|
||
|
|
textarea.text,
|
||
|
|
select,
|
||
|
|
.autocomplete_container {
|
||
|
|
/*background: #fff url("/img/input-bg.gif") repeat-x 0 -1px;*/
|
||
|
|
background-color: #222;
|
||
|
|
border: 1px solid #666666;
|
||
|
|
border-top: 1px solid #888888;
|
||
|
|
border-left: 1px solid #888888;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
.appwidget .more-link {
|
||
|
|
color: #888888 !important;
|
||
|
|
background: url('/img/arrow-double-black.gif') no-repeat 0 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow-link,
|
||
|
|
.more-link {
|
||
|
|
background: url('/img/arrow-double-black.gif') no-repeat 0 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.message {
|
||
|
|
border: 5px solid #eee;
|
||
|
|
}
|
||
|
|
.message blockquote {
|
||
|
|
border: 1px solid #aaa;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* profile.css */
|
||
|
|
.section, .username, .actions li {
|
||
|
|
background-color: #444444 !important;
|
||
|
|
border: none;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.actions li { border-top: 1px solid #888888; }
|
||
|
|
.section span.section_link {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* tags.css */
|
||
|
|
.taginfo {
|
||
|
|
background-image: none;
|
||
|
|
background-color: #222;
|
||
|
|
border-color: #888;
|
||
|
|
color: #CCC;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* manage/settings */
|
||
|
|
|
||
|
|
.display_label {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display_option, .mobile_option, .privacy_option, .othersites_option {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Support */
|
||
|
|
|
||
|
|
div.box {
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* This makes the FAQ header not overlap with itself */
|
||
|
|
.box h1 {
|
||
|
|
line-height: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.blue {
|
||
|
|
background-color: #3D606B !important;
|
||
|
|
border:1px solid #6DB5C2 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.green {
|
||
|
|
background-color: #2B5229 !important;
|
||
|
|
border:1px solid #53914D !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.green, .green td {
|
||
|
|
background-color: #2B5229 !important;
|
||
|
|
}
|
||
|
|
.yellow, .yellow td {
|
||
|
|
background-color: #815E00 !important;
|
||
|
|
}
|
||
|
|
.red, .red td {
|
||
|
|
background-color: #831815 !important;
|
||
|
|
}
|
||
|
|
.clicked, .clicked td {
|
||
|
|
background-color: #3D606B !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* For the manage/circle page */
|
||
|
|
/* These are in the page CSS, so must be important. */
|
||
|
|
|
||
|
|
.editfriends td, .editfriends td, .editfriends th, #addfriends td, #addfriends th {
|
||
|
|
border-color: #888 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.editfriends tr:hover {
|
||
|
|
background-color: #333 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* /manage/circle/filters */
|
||
|
|
|
||
|
|
.editfilters select {
|
||
|
|
background-color: #222;
|
||
|
|
color: #CCC;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Import */
|
||
|
|
|
||
|
|
h1.gradient, h2.gradient, h3.gradient, h4.gradient, h5.gradient {
|
||
|
|
background-image: none;
|
||
|
|
background-color: #222;
|
||
|
|
border-color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.importer .importoption {
|
||
|
|
background-color: #222;
|
||
|
|
border-color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.importer .importoption p {
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.importer-status .table-header {
|
||
|
|
background-color: #222;
|
||
|
|
}
|
||
|
|
|
||
|
|
.importer-status td {
|
||
|
|
border-color: #444;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* manage/subscriptions/filters */
|
||
|
|
|
||
|
|
#cf-select, #cf-edit, #cf-filtopts, #cf-intro {
|
||
|
|
background-color: #222;
|
||
|
|
border-color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#cf-edit select {
|
||
|
|
background-color: #111;
|
||
|
|
border-color: #888;
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.proptbl .h {
|
||
|
|
background-image: none;
|
||
|
|
background-color: #222;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* MonthPage */
|
||
|
|
|
||
|
|
#archive-month .navigation li, #archive-month .navigation a {display: inline; }
|
||
|
|
|
||
|
|
#archive-month .navigation a, #archive-month .navigation {
|
||
|
|
font-weight: bold;
|
||
|
|
background-color: transparent;
|
||
|
|
color: #CCCC99;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
#archive-month .navigation a:visited {
|
||
|
|
color: #999966;
|
||
|
|
}
|
||
|
|
#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;}
|
||
|
|
|
||
|
|
#canvas .row {
|
||
|
|
margin-top: 2em;
|
||
|
|
padding: 1.5em 1.5em 0em;
|
||
|
|
margin-bottom: -2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#canvas .appwidget-currenttheme .row {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Dark theme for color picker **/
|
||
|
|
|
||
|
|
#clr-picker {
|
||
|
|
background-color: #444;
|
||
|
|
}
|
||
|
|
|
||
|
|
#clr-picker .clr-segmented {
|
||
|
|
border-color: #777;
|
||
|
|
}
|
||
|
|
|
||
|
|
#clr-picker .clr-swatches button:after {
|
||
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
#clr-picker input.clr-color {
|
||
|
|
color: #fff;
|
||
|
|
border-color: #777;
|
||
|
|
background-color: #555;
|
||
|
|
}
|
||
|
|
|
||
|
|
#clr-picker input.clr-color:focus {
|
||
|
|
border-color: #1e90ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
#clr-picker .clr-preview:after {
|
||
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
#clr-picker .clr-alpha,
|
||
|
|
#clr-picker .clr-alpha div,
|
||
|
|
#clr-picker .clr-swatches button,
|
||
|
|
#clr-picker .clr-preview:before {
|
||
|
|
background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
|
||
|
|
}
|