meta/assets/css/theme.css

300 lines
4.9 KiB
CSS

/* ---------------- */
/* ! General Styles */
/* ---------------- */
* {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html, body {
font-weight:200;
color:#312;
}
body {
position:relative;
max-width:800px;
margin: 0 auto;
}
button {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#312;
padding:0.25em;
border:1px solid #888;
border-radius:5px;
box-shadow:1px 1px #aaa;
min-width:65px;
vertical-align:middle;
}
a, a:visited {
text-decoration:none;
color:#1147BB;
}
a:hover {
text-decoration:underline;
}
legend {
display:block;
}
legend:hover {
cursor:pointer;
}
h1,h2 {
display:inline-block;
margin-right:0.5em;
vertical-align:middle;
/*width:25%;*/
}
ul {
padding-left:2.5em;
margin:0;
}
ul > li {
padding:0.5em 0;
}
dt, dd {
padding:0.25em 0;
}
dd {
margin-left:0.5em;
}
/* Hide forms by default */
fieldset dl {
display:none;
}
#edit_form dl {
display:block;
}
/* form styles */
fieldset {
border-radius:5px;
}
form.add {
margin-bottom:0.75em;
}
form dt, form dd {
display:inline-block;
vertical-align:top;
padding:0.25em 0;
}
form dt {
width:40%;
text-align:right;
}
form dd {
width:58%;
text-align:left;
margin-left:0;
padding-left:.25em;
}
/* ! Edit buttons */
.modify {
position:absolute;
display:none;
margin-left:1em;
vertical-align:middle;
}
li li, li dt {
position:relative;
z-index:3;
}
li:hover > .modify, dt:hover > .modify, dd:hover > .modify {
display:inline-block;
vertical-align:top;
}
button.save {
background:#7c7;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#77cc77', EndColorStr='#559955')"; /* IE9 */
background:-o-linear-gradient(#7c7, #595);
background:-ms-linear-gradient(#7c7, #595);
background:-moz-linear-gradient(#7c7, #595);
background:-webkit-linear-gradient(#7c7, #595);
background:linear-gradient(#7c7, #595);
color:#fff;
}
button.save:hover {
background:#595;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#559955', EndColorStr='#77cc77')"; /* IE9 */
background:-o-linear-gradient(#595, #7c7);
background:-moz-linear-gradient(#595, #7c7);
background:-webkit-linear-gradient(#595, #7c7);
background:linear-gradient(#595, #7c7);
}
button.edit {
background:#fff;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dddddd')"; /* IE9 */
background:-o-linear-gradient(#fff, #ddd);
background:-ms-linear-gradient(#fff, #ddd);
background:-moz-linear-gradient(#fff, #ddd);
background:-webkit-linear-gradient(#fff, #ddd);
background:linear-gradient(#fff, #ddd);
}
button.edit:hover {
background:#ddd;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dddddd', EndColorStr='#ffffff')"; /* IE9 */
background:-o-linear-gradient(#ddd, #fff);
background:-ms-linear-gradient(#ddd, #fff);
background:-moz-linear-gradient(#ddd, #fff);
background:-webkit-linear-gradient(#ddd, #fff);
background:linear-gradient(#ddd, #fff);
}
button.delete {
background:#f55;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff5555', EndColorStr='#995555')"; /* IE9 */
background:-o-linear-gradient(#f55, #955);
background:-ms-linear-gradient(#f55, #955);
background:-moz-linear-gradient(#f55, #955);
background:-webkit-linear-gradient(#f55, #955);
background:linear-gradient(#f55, #955);
color:#fff;
}
button.delete:hover {
background:#955;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#995555', EndColorStr='#ff5555')"; /* IE9 */
background:-o-linear-gradient(#955, #f55);
background:-ms-linear-gradient(#955, #f55);
background:-moz-linear-gradient(#955, #f55);
background:-webkit-linear-gradient(#955, #f55);
background:linear-gradient(#955, #f55);
}
/* ! Outline styles */
.list {
padding:0;
margin:0;
}
.list dl {
margin-left:0.5em;
}
#outline {
position:absolute;
margin:21px 0;
right:0;
}
dl.outline dd {
border-bottom:1px dotted #555;
margin-bottom:0.5em;
}
dl.outline dd:last-child {
border:0;
}
dl.outline dt {
display:list-item;
list-style:square inside;
}
.list li {
list-style:none;
}
li h4 {
display:inline;
}
/* ! Data listing styles */
dl.multiline, dl.pair {
border-bottom:1px dotted #312;
}
dl.multiline dt {
font-weight:bold;
line-height:1.5;
font-size:1em;
margin:0;
}
dl.multiline dd {
margin:1em;
margin-right:0;
}
dl.pair dt, dl.pair dd {
display:inline-block;
vertical-align:middle;
padding:0.25em 0;
}
dl.pair dt {
width:35%;
}
dl.pair dd {
width:64%;
margin-left:0;
padding-left:0;
}
/* ! Form overlay styles */
#overlay_bg {
background:#777;
background:rgba(85,105,255,0.85);
position:fixed;
display:none;
width:900%;
height:900%;
z-index:5;
left:0;
top:0;
}
#overlay {
position:absolute;
background:#ddd;
width:650px;
padding:0.5em;
border-radius:5px;
display:none;
z-index:25;
}
#edit_form {
position:relative;
overflow:hidden;
}
#edit_form dt {
width:20%;
}
#edit_form dd {
width:78%;
}