423 lines
6.1 KiB
CSS
423 lines
6.1 KiB
CSS
/*
|
|
TABLE OF CONTENTS ^TOC
|
|
- - - - - - - - - - - - - -
|
|
|
|
Vanilla's HTML is a mess to me--doing my best to work
|
|
round it >:(
|
|
|
|
TAGS
|
|
(so you can jump to sections :)
|
|
|
|
^TOC . . . Table of Contents / top
|
|
^GENERAL . . General rules
|
|
^HACKX . . Horrible hacks
|
|
^LAYOUT . . .
|
|
^HEADER . . Header
|
|
^MAIN . . Main content area
|
|
^PANEL . . Side panel
|
|
^FOOTER . . Page footer
|
|
^PAGES . . .
|
|
^CATS . . Main / front page
|
|
^POSTS . . Discussion threads
|
|
^SEARCH . . Search results page
|
|
^PROFILE . User profile page
|
|
^LOGIN . . Log-in pop-up
|
|
|
|
- - - - - - - - - - - - - -
|
|
|
|
STYLE NOTES
|
|
|
|
Colours:
|
|
red #ed1c24
|
|
pink #ffaec9
|
|
yellow #fff200
|
|
grey #f0f0f0
|
|
|
|
Sizes:
|
|
regular 1em
|
|
small 0.7em
|
|
|
|
|
|
General - - - - - - - - - - - - ^GENERAL
|
|
*/
|
|
|
|
a:link {
|
|
color:blue;
|
|
text-decoration:underline;
|
|
}
|
|
a:visited {
|
|
color:purple;
|
|
text-decoration:underline dashed;
|
|
}
|
|
a:hover {
|
|
color:#ed1c24;
|
|
text-decoration:none;
|
|
}
|
|
|
|
body {
|
|
background-color:white;
|
|
display:grid;
|
|
font-size:1em;
|
|
font-family:sans-serif;
|
|
grid-template-columns:repeat(4, 1fr);
|
|
grid-gap:1em;
|
|
grid-template-areas:
|
|
"main main main panel"
|
|
"footer footer footer footer";
|
|
}
|
|
|
|
h1 {
|
|
background-color:#ffaec9;
|
|
border:1px solid #ffaec9;
|
|
font-size:1em;
|
|
line-height:1;
|
|
padding:0.5em 1em 0.2em;
|
|
}
|
|
|
|
hr {
|
|
border:none;
|
|
border-top:1px solid #ffaec9;
|
|
margin:1.5em 0;
|
|
}
|
|
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="text"],
|
|
select,
|
|
textarea {
|
|
background-color:#f0f0f0;
|
|
border:1px solid #ffaec9;
|
|
font-size:1em;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
mark { background-color:#fff200; }
|
|
|
|
pre,code { tab-size:4; }
|
|
|
|
.Button {
|
|
background-color:#ffaec9;
|
|
border:1px solid #fff200;
|
|
font-size:1em;
|
|
padding:0.8em 1em;
|
|
}
|
|
|
|
.Button:hover,
|
|
.BigButton:hover {
|
|
border-color:#fff200;
|
|
border-radius:0;
|
|
color:#ed1c24;
|
|
}
|
|
|
|
.BigButton {
|
|
border-left:none;
|
|
border-right:none;
|
|
}
|
|
|
|
a.NewDiscussion::before {
|
|
content:"☞ ";
|
|
}
|
|
|
|
a.NewDiscussion::after {
|
|
content:" ☜";
|
|
}
|
|
|
|
/*
|
|
Hackx - - - - - - - - - - - - ^HACKX
|
|
*/
|
|
|
|
/* Hides that pointless gender enquiry and display */
|
|
li.Gender { display:none !important; }
|
|
|
|
/* Hides forum title in categories list, because I have it
|
|
in the header*/
|
|
main > h1.H.HomepageTitle { display:none; }
|
|
|
|
/* Hides extraneous date on categories page */
|
|
span.MItem.LastCommentDate { display:none; }
|
|
|
|
/* All pages - - - - - - - - - - - ^LAYOUT
|
|
|
|
Header - - - - - - - - - - - - ^HEADER
|
|
*/
|
|
|
|
header {
|
|
background-color:#ffaec9;
|
|
border-bottom:1px solid #fff200;
|
|
box-shadow:0 1px 4px rgba(0,0,0,0.3);
|
|
padding:0 1em;
|
|
position:fixed;
|
|
top:0;
|
|
width:100%;
|
|
z-index:11;
|
|
}
|
|
|
|
header a:visited {
|
|
color:blue;
|
|
text-decoration:underline dashed;
|
|
}
|
|
|
|
header > h1 {
|
|
border:none;
|
|
font-size:1em;
|
|
margin-top:0.4em;
|
|
padding:0;
|
|
}
|
|
|
|
header > img {
|
|
float:left;
|
|
height:3em;
|
|
margin-left:-0.3em;
|
|
margin-right:0.5em;
|
|
margin-top:0.1em;
|
|
}
|
|
|
|
header > nav {
|
|
font-size:0.7em;
|
|
}
|
|
|
|
header > nav > ul li {
|
|
display:inline;
|
|
}
|
|
|
|
/*
|
|
Main content area - - - - - - - - - ^MAIN
|
|
*/
|
|
|
|
main {
|
|
grid-area:main;
|
|
margin-top:4em;
|
|
padding:0 1em;
|
|
}
|
|
|
|
main > nav > p {
|
|
font-size:0.7em;
|
|
margin:0;
|
|
}
|
|
|
|
/*
|
|
Panel on the right - - - - - - - - - ^PANEL
|
|
*/
|
|
|
|
aside {
|
|
border:1px solid #ffaec9;
|
|
grid-area:panel;
|
|
margin-right:1em;
|
|
margin-top:8em;
|
|
}
|
|
|
|
/* Little numbers */
|
|
aside .Aside {
|
|
float:right;
|
|
}
|
|
|
|
aside .Count {
|
|
background-color:#ffaec9;
|
|
border-radius:0;
|
|
text-decoration:none;
|
|
font-size:0.7em;
|
|
margin-left:0.5em;
|
|
padding:0.2em 0.5em;
|
|
}
|
|
|
|
aside #Panel .FilterMenu li,
|
|
aside .PanelInfo li,
|
|
aside #Panel .FilterMenu li:first-child,
|
|
aside .PanelInfo li:first-child {
|
|
border:none;
|
|
}
|
|
|
|
aside .TagCloud li {
|
|
border:none;
|
|
}
|
|
|
|
/* Search area */
|
|
aside form > div {
|
|
background-color:#ffaec9;
|
|
}
|
|
|
|
aside input#Form_Search,
|
|
aside input#Form_Go {
|
|
padding:0.8em 1em;
|
|
}
|
|
aside input#Form_Search {
|
|
border:0;
|
|
box-shadow:inset 0 1px 4px rgba(0,0,0,0.3);
|
|
width:100%;
|
|
}
|
|
aside input#Form_Go {
|
|
display:none;
|
|
/*border-color:#ffaec9;
|
|
font-size:HACK;*/
|
|
}
|
|
|
|
aside .BoxFilter.BoxDiscussionFilter,
|
|
aside .Box.BoxCategories,
|
|
aside .Box {
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
/*
|
|
Footer - - - - - - - - - - - - ^FOOT
|
|
*/
|
|
|
|
footer {
|
|
border-top:1px solid #ffaec9;
|
|
font-size:0.7em;
|
|
grid-area:footer;
|
|
text-align:center;
|
|
}
|
|
footer > ul li {
|
|
display:inline;
|
|
}
|
|
footer > ul li::before {
|
|
content:"| ";
|
|
}
|
|
footer > ul li:first-child::before {
|
|
content:"";
|
|
}
|
|
|
|
/* Pages - - - - - - - - - - - - ^PAGES
|
|
|
|
Categories / landing page - - - - - - - ^CATS
|
|
*/
|
|
|
|
main ul.CategoryList a.Title {
|
|
font-size:1em;
|
|
}
|
|
|
|
/* Overwrite red categories having grey bg */
|
|
main ul.CategoryList .Item.Read {
|
|
background:none;
|
|
}
|
|
|
|
main ul.CategoryList .Item.Unread .Title::after{
|
|
content:url("new.gif");
|
|
padding-left:0.5em;
|
|
}
|
|
|
|
main ul.CategoryList li.Item {
|
|
padding:1em;
|
|
}
|
|
|
|
main ul.CategoryList li.Depth2 {
|
|
border-left-style:dashed;
|
|
margin-left:+1em;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
Post threads- - - - - - - - - - - ^POSTS
|
|
*/
|
|
|
|
/* Thread title */
|
|
div.Discussion .PageTitle h1 {
|
|
background-color:#fff200;
|
|
font-size:1em;
|
|
margin-bottom:-1px;
|
|
margin-top:0.5em;
|
|
}
|
|
|
|
/* Posts */
|
|
main .Item,
|
|
main .DataList .Item/*, .NarrowList .Item*/ {
|
|
border:1px solid #ffaec9;
|
|
font-size:1em;
|
|
padding:0;
|
|
margin-top:-1px;
|
|
}
|
|
|
|
/* Author info. */
|
|
div.Item-Header.DiscussionHeader,
|
|
div.Item-Header.CommentHeader {
|
|
background-color:#ffaec9;
|
|
height:3em;
|
|
margin:0;
|
|
}
|
|
.Item .Author a {
|
|
font-size:1em;
|
|
}
|
|
|
|
/* Author avatar */
|
|
.Author .PhotoWrap {
|
|
margin:0;
|
|
margin-right:1em;
|
|
}
|
|
.ProfilePhoto,
|
|
.ProfilePhotoMedium {
|
|
height:3em;
|
|
width:3em;
|
|
}
|
|
|
|
/* Post date, etc. line */
|
|
.Meta.DiscussionMeta {
|
|
margin-top:-0.5em;
|
|
}
|
|
|
|
h2.CommentHeading,
|
|
span.Back {
|
|
display:none;
|
|
}
|
|
|
|
/* Post content */
|
|
main div.Item-Body {
|
|
padding:1em;
|
|
}
|
|
|
|
blockquote.Quote,
|
|
blockquote.UserQuote {
|
|
padding:1em;
|
|
border: 1px solid #ffaec9;
|
|
border-left: 3px double #ffaec9;
|
|
}
|
|
|
|
/* Post entry field */
|
|
textarea.TextBox {
|
|
min-height:10em !important;
|
|
padding:1em;
|
|
}
|
|
.textarea-autosize {
|
|
resize:vertical !important;
|
|
}
|
|
|
|
/*
|
|
Search results page - - - - - - - - - ^SEARCH
|
|
*/
|
|
|
|
|
|
|
|
/*
|
|
Profile - - - - - - - - - - - - ^PROFILE
|
|
*/
|
|
|
|
.ProfilePhotoLarge {
|
|
width:100%;
|
|
}
|
|
|
|
/*
|
|
Login pop-up - - - - - - - - - - ^LOGIN
|
|
*/
|
|
|
|
.MultipleEntryMethods .Methods {
|
|
padding:1em;
|
|
}
|
|
|
|
|
|
a.Close {
|
|
margin:0.5em;
|
|
}
|
|
|
|
.Border {
|
|
background:rgba(82, 82, 82, 0.7);
|
|
padding:0;
|
|
}
|
|
|
|
/*input#Form_SignIn {
|
|
background-color:;
|
|
border:;
|
|
color:;
|
|
font-size:;
|
|
}*/
|