Last active
December 17, 2015 22:49
-
-
Save melissacabral/5685101 to your computer and use it in GitHub Desktop.
Admin Panel starter for wp310 blog demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "utf-8"; | |
@import url(http://fonts.googleapis.com/css?family=Coustard|Droid+Sans:400,700); | |
/* =RESET */ | |
body,html { | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
font-size: 100%; | |
font-family: 'Droid Sans', Arial, Helvetica, sans-serif; | |
} | |
h1,h2,h3,h4,h5,h6,p,ul,ol,li,form { | |
margin: 0; | |
padding: 0; | |
} | |
input { | |
vertical-align: bottom; | |
} | |
*, *:before, *:after { | |
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; | |
} | |
.cf:before, | |
.cf:after { | |
content: " "; /* 1 */ | |
display: table; /* 2 */ | |
} | |
.cf:after { | |
clear: both; | |
} | |
.cf { | |
*zoom: 1; | |
} | |
/* ======================================== basic layout */ | |
header { | |
height: 121px; | |
background-color: #EEE; | |
background: #333333; | |
background: -moz-linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(18%, #333333), color-stop(21%, #303030), color-stop(23%, #272727), color-stop(24%, #656565), color-stop(25%, #4c4c4c), color-stop(60%, #4c4c4c), color-stop(63%, #484848), color-stop(65%, #3d3d3d), color-stop(66%, #ebebeb), color-stop(68%, #efefef), color-stop(72%, #eeeeee), color-stop(90%, #e0e0e0), color-stop(94%, #dfdfdf), color-stop(95%, #dcdcdc), color-stop(97%, #e6e6e6), color-stop(98%, #c1c1c1), color-stop(98%, #cccccc), color-stop(99%, #e5e5e5), color-stop(100%, #f7f7f7)); | |
background: -webkit-linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%); | |
background: -o-linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%); | |
background: -ms-linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#f7f7f7', GradientType=0 ); | |
background: linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%); | |
} | |
header h1, | |
main, | |
footer { | |
padding: 10px; | |
} | |
footer { | |
background-color: #EEE; | |
padding: 10px; | |
clear: both; | |
} | |
header h1 { | |
position: absolute; | |
top: 24px; | |
left: 10px; | |
color: white; | |
font-family: "Coustard", "Arial Black", Gadget, sans-serif; | |
font-size: 26px; | |
font-weight: normal; | |
} | |
nav ul { | |
padding-top: 80px; | |
} | |
nav ul a { | |
display: block; | |
padding: 10px; | |
text-decoration: none; | |
border-left: 1px solid #F7F7F7; | |
border-right: 1px solid #D0D0D0; | |
color: #454545; | |
font-weight: bold; | |
} | |
nav ul a:hover, | |
nav ul a:focus { | |
background-color: #FFF; | |
} | |
/* | |
== "active" states | |
*/ | |
.dashboard .dashboard a, | |
.write .write a, | |
.manage .manage a, | |
.comments .comments a, | |
.profile .profile a{ | |
background-color:white; | |
height:41px; | |
} | |
nav ul li, | |
.utilities li { | |
display: inline-block; | |
float: left; | |
margin: 0; | |
padding: 0; | |
} | |
.utilities li { | |
margin: 0 5px 0 0; | |
color:white; | |
} | |
ul.utilities { | |
position: absolute; | |
top: 0px; | |
right: 5px; | |
} | |
.utilities a { | |
display: block; | |
padding: 7px; | |
-moz-border-radius-topleft: 0px; | |
-moz-border-radius-topright: 0px; | |
-moz-border-radius-bottomright: 5px; | |
-moz-border-radius-bottomleft: 5px; | |
-webkit-border-radius: 0px 0px 5px 5px; | |
border-radius: 0px 0px 5px 5px; | |
border: solid 1px rgba(256,256,256,.2); | |
border-top-color: rgba(0,0,0,.4); | |
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,.3); | |
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,.3); | |
box-shadow: 0px 2px 2px 0px rgba(0,0,0,.3); | |
background-color: #399; | |
} | |
.utilities a:hover, | |
.utilities a:focus { | |
padding: 10px 7px; | |
} | |
.logout a { | |
background-color: #C66; | |
} | |
.utilities a { | |
text-decoration: none; | |
color: white; | |
} | |
main h2, | |
main h4 { | |
margin: 16px 0 8px 6px; | |
color: #333; | |
} | |
main h3 { | |
background: #e7e7e7; | |
background: -moz-linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e7e7e7), color-stop(35%, #e7e7e7), color-stop(57%, #dddddd), color-stop(100%, #dddddd)); | |
background: -webkit-linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%); | |
background: -o-linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%); | |
background: -ms-linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#dddddd', GradientType=0 ); | |
background: linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%); | |
padding: 5px 10px; | |
color: #333; | |
text-shadow: 0px 1px 0px #fff; | |
filter: dropshadow(color=#ffffff, offx=0, offy=1); | |
font-size: 17px; | |
margin-bottom: 10px; | |
} | |
/* | |
== Grid Panels | |
*/ | |
.panel { | |
border: 1px solid #DDDDDD; | |
margin-bottom: 10px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
padding: 6px; | |
min-width: 200px; | |
} | |
.noborder { | |
border: none; | |
padding: 0; | |
} | |
.onequarter { | |
width: 24%; | |
float: left; | |
margin-right: 1%; | |
} | |
.onehalf { | |
width: 49%; | |
float: left; | |
margin-right: 1%; | |
} | |
.threequarters { | |
width: 74%; | |
float: left; | |
margin-right: 1%; | |
} | |
.onethird { | |
width: 32%; | |
float: left; | |
margin-right: 1%; | |
} | |
.twothirds { | |
width: 65%; | |
float: left; | |
margin-right: 1%; | |
} | |
/* | |
== general typography | |
*/ | |
main ul li { | |
list-style-type: none; | |
margin-bottom: 10px; | |
} | |
main a { | |
background-color: #EEE; | |
padding: 3px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
border: solid 1px #DDD; | |
display: inline-block; | |
text-decoration: none; | |
color: #036; | |
} | |
main a:hover, | |
main a:focus { | |
background-color: #CCC; | |
border-color: #BBB; | |
color: white; | |
} | |
main ul { | |
list-style: none; | |
padding-left: 1em; | |
} | |
main li:before { | |
content: "\00BB \0020"; | |
} | |
h4 em { | |
font-weight: normal !important; | |
font-style: normal; | |
color: #696; | |
} | |
.postmetadata { | |
color: #999; | |
margin-bottom: 15px !important; | |
display: block; | |
} | |
.draft { | |
color: #C66; | |
background-color: #FFC; | |
padding: 2px; | |
display: inline-block; | |
} | |
.published { | |
color: #366; | |
background-color: #CFF; | |
} | |
a.edit { | |
background-image: url(images/edit.png); | |
background-repeat: no-repeat; | |
padding-left: 20px !important; | |
background-position: 3px 5px; | |
} | |
label { | |
display: block; | |
} | |
.userpic { | |
padding: 6px; | |
border: solid 1px #CCC; | |
background-color: #EEE; | |
-webkit-border-radius: 8px; | |
-moz-border-radius: 8px; | |
border-radius: 8px; | |
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .3); | |
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .3); | |
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .3); | |
} | |
.panel p{ | |
margin:.6em 0; | |
} | |
.body{ | |
color:#666; | |
} | |
/* | |
== Tables | |
*/ | |
table { | |
width: 100%; | |
border-collapse: collapse; | |
} | |
table td { | |
border-bottom: solid 1px #EEE; | |
padding: .5em; | |
} | |
table th { | |
background-color: #EEE; | |
text-align: left; | |
padding: .5em; | |
} | |
table tr:hover { | |
background-color: #EEE; | |
} | |
main table a { | |
background: transparent; | |
border: none; | |
display: block; | |
} | |
/* =================================== FORMS */ | |
fieldset { | |
border: none; | |
margin: 10px 0; | |
padding: 0; | |
display: block; | |
} | |
textarea { | |
min-height: 20em; | |
resize: none; | |
} | |
input[type=text], | |
input[type=password], | |
input[type=submit], | |
select, | |
textarea { | |
display: block; | |
margin-bottom: 10px; | |
} | |
input[type=text], | |
textarea, | |
input[type=password] { | |
width: 95%; | |
padding: 5px; | |
font-size: 1.1em; | |
} | |
input[type=checkbox] + label { | |
display: inline; | |
} | |
.button, | |
input[type=submit] { | |
background-color: #66CCCC; | |
border: medium none; | |
border-radius: 10px 10px 10px 10px; | |
color: #FFFFFF !important; | |
cursor: pointer; | |
font-size: 120%; | |
margin-top: 20px !important; | |
padding: 5px; | |
} | |
.warn{ | |
background-color:#C66 !important; | |
} | |
.warn:hover{ | |
background-color:#C03 !important; | |
} | |
.message { | |
background-color: #FFC; | |
border: solid 1px #FFCC66; | |
padding: .5em; | |
-webkit-border-radius: 1em; | |
border-radius: 1em; | |
color: #930; | |
} | |
.success { | |
background-color: #D5FED3; | |
color: #060; | |
border: solid 1px #99CC66; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Admin Panel</title> | |
<link rel="stylesheet" type="text/css" href="../css/admin-style.css"> | |
</head> | |
<body> | |
<header> | |
<h1>Blog Admin Panel</h1> | |
<nav> | |
<ul> | |
<li><a href="#">Dashboard</a></li> | |
<li><a href="#">Write Post</a></li> | |
<li><a href="#">Manage Posts</a></li> | |
<li><a href="#">Manage Comments</a></li> | |
<li><a href="#">Edit Profile</a></li> | |
</ul> | |
</nav> | |
<ul class="utilities"> | |
<li><a href="#" class="warn">Log Out!</a></li> | |
</ul> | |
</header> | |
<main> | |
put content here! | |
</main> | |
<footer> | |
© 2014 Your Name Here! | |
</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment