mirror of
https://github.com/CHOMPStation2/CHOMPStation2.git
synced 2025-12-12 03:02:54 +00:00
While I consider Polaris' character setup screen to be mechanically better than most others, it wasn't prettier. Well. It was a bit. But now it's more pretty-er. Used the fake NanoUI 'browser' datum to render the pages for the New Player panel and the Character Setup screen.
314 lines
3.4 KiB
CSS
314 lines
3.4 KiB
CSS
body
|
|
{
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #272727;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
line-height: 170%;
|
|
}
|
|
|
|
hr
|
|
{
|
|
background-color: #40628a;
|
|
height: 1px;
|
|
}
|
|
|
|
a, a:link, a:visited, a:active, .linkOn, .linkOff
|
|
{
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
background: #40628a;
|
|
border: 1px solid #161616;
|
|
padding: 1px 4px 1px 4px;
|
|
margin: 0 2px 0 0;
|
|
cursor:default;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
a:hover
|
|
{
|
|
color: #40628a;
|
|
background: #ffffff;
|
|
}
|
|
|
|
a.white, a.white:link, a.white:visited, a.white:active
|
|
{
|
|
color: #40628a;
|
|
text-decoration: none;
|
|
background: #ffffff;
|
|
border: 1px solid #161616;
|
|
padding: 1px 4px 1px 4px;
|
|
margin: 0 2px 0 0;
|
|
cursor:default;
|
|
}
|
|
|
|
a.white:hover
|
|
{
|
|
color: #ffffff;
|
|
background: #40628a;
|
|
}
|
|
|
|
.linkOn, a.linkOn:link, a.linkOn:visited, a.linkOn:active, a.linkOn:hover
|
|
{
|
|
color: #ffffff;
|
|
background: #2f943c;
|
|
border-color: #24722e;
|
|
}
|
|
|
|
.linkOff, a.linkOff:link, a.linkOff:visited, a.linkOff:active, a.linkOff:hover
|
|
{
|
|
color: #ffffff;
|
|
background: #999999;
|
|
border-color: #666666;
|
|
}
|
|
|
|
a.icon, .linkOn.icon, .linkOff.icon
|
|
{
|
|
position: relative;
|
|
padding: 1px 4px 2px 20px;
|
|
}
|
|
|
|
a.icon img, .linkOn.icon img
|
|
{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
ul
|
|
{
|
|
padding: 4px 0 0 10px;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
li
|
|
{
|
|
padding: 0 0 2px 0;
|
|
}
|
|
|
|
img, a img
|
|
{
|
|
border-style:none;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6
|
|
{
|
|
margin: 0;
|
|
padding: 16px 0 8px 0;
|
|
color: #517087;
|
|
}
|
|
|
|
h1
|
|
{
|
|
font-size: 15px;
|
|
}
|
|
|
|
h2
|
|
{
|
|
font-size: 14px;
|
|
}
|
|
|
|
h3
|
|
{
|
|
font-size: 13px;
|
|
}
|
|
|
|
h4
|
|
{
|
|
font-size: 12px;
|
|
}
|
|
|
|
.uiWrapper
|
|
{
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top:32px;
|
|
}
|
|
|
|
.uiTitle
|
|
{
|
|
clear: both;
|
|
padding: 6px 8px 6px 8px;
|
|
border-bottom: 2px solid #161616;
|
|
background: #383838;
|
|
color: #98B0C3;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.uiTitleWrapper
|
|
{
|
|
position:fixed;
|
|
top:0px;
|
|
left:0px;
|
|
right:0px;
|
|
z-index: 10
|
|
}
|
|
|
|
.uiTitleButtons
|
|
{
|
|
position:fixed;
|
|
top:0px;
|
|
right:0px;
|
|
height:32px;
|
|
z-index:11;
|
|
}
|
|
|
|
|
|
.uiTitle.icon
|
|
{
|
|
padding: 6px 8px 6px 42px;
|
|
background-position: 2px 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.uiContent
|
|
{
|
|
clear: both;
|
|
padding: 8px;
|
|
font-family: Verdana, Geneva, sans-serif;
|
|
}
|
|
|
|
.good
|
|
{
|
|
color: #00ff00;
|
|
}
|
|
|
|
.average
|
|
{
|
|
color: #d09000;
|
|
}
|
|
|
|
.bad
|
|
{
|
|
color: #ff0000;
|
|
}
|
|
|
|
.highlight
|
|
{
|
|
color: #8BA5C4;
|
|
}
|
|
|
|
.dark
|
|
{
|
|
color: #272727;
|
|
}
|
|
|
|
.notice
|
|
{
|
|
position: relative;
|
|
background: #E9C183;
|
|
color: #15345A;
|
|
font-size: 10px;
|
|
font-style: italic;
|
|
padding: 2px 4px 0 4px;
|
|
margin: 4px;
|
|
}
|
|
|
|
.notice.icon
|
|
{
|
|
padding: 2px 4px 0 20px;
|
|
}
|
|
|
|
.notice img
|
|
{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
div.notice
|
|
{
|
|
clear: both;
|
|
}
|
|
|
|
.statusDisplay
|
|
{
|
|
background: #000000;
|
|
color: #ffffff;
|
|
border: 1px solid #40628a;
|
|
padding: 4px;
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.block
|
|
{
|
|
padding: 8px;
|
|
margin: 10px 4px 4px 4px;
|
|
border: 1px solid #40628a;
|
|
background-color: #202020;
|
|
}
|
|
|
|
.block h3
|
|
{
|
|
padding: 0;
|
|
}
|
|
|
|
.progressBar
|
|
{
|
|
width: 240px;
|
|
height: 14px;
|
|
border: 1px solid #666666;
|
|
float: left;
|
|
margin: 0 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progressFill
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #40628a;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progressFill.good
|
|
{
|
|
color: #ffffff;
|
|
background: #00ff00;
|
|
}
|
|
|
|
.progressFill.average
|
|
{
|
|
color: #ffffff;
|
|
background: #d09000;
|
|
}
|
|
|
|
.progressFill.bad
|
|
{
|
|
color: #ffffff;
|
|
background: #ff0000;
|
|
}
|
|
|
|
.progressFill.highlight
|
|
{
|
|
color: #ffffff;
|
|
background: #8BA5C4;
|
|
}
|
|
|
|
.clearBoth
|
|
{
|
|
clear: both;
|
|
}
|
|
|
|
.clearLeft
|
|
{
|
|
clear: left;
|
|
}
|
|
|
|
.clearRight
|
|
{
|
|
clear: right;
|
|
}
|
|
|
|
.line
|
|
{
|
|
width: 100%;
|
|
clear: both;
|
|
} |