Responsive design;
New menus (members); Improved interface for parent editing;
This commit is contained in:
Ricsi
137
_css/addbutton.css
Normal file
137
_css/addbutton.css
Normal file
@@ -0,0 +1,137 @@
|
||||
.buttons {
|
||||
float: left;
|
||||
padding-bottom: 20px;
|
||||
clear: both;
|
||||
}
|
||||
a.addbutton {
|
||||
color: #6e6e6e;
|
||||
font: bold 12px Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
padding: 7px 12px;
|
||||
display: inline-block;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
-webkit-transition: border-color .218s;
|
||||
-moz-transition: border .218s;
|
||||
-o-transition: border-color .218s;
|
||||
transition: border-color .218s;
|
||||
background: #f3f3f3;
|
||||
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
|
||||
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
|
||||
border: solid 1px #dcdcdc;
|
||||
border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
margin: 10px 10px 10px 0px;
|
||||
}
|
||||
a.addbutton:hover {
|
||||
color: #333;
|
||||
border-color: #999;
|
||||
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
a.addbutton:active {
|
||||
color: #000;
|
||||
border-color: #444;
|
||||
}
|
||||
a.left {
|
||||
-webkit-border-top-right-radius: 0;
|
||||
-moz-border-radius-topright: 0;
|
||||
border-top-right-radius: 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a.middle {
|
||||
border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-left: solid 1px #f3f3f3;
|
||||
margin: 0;
|
||||
border-left: solid 1px rgba(255, 255, 255, 0);
|
||||
}
|
||||
a.middle:hover,
|
||||
a.right:hover { border-left: solid 1px #999 }
|
||||
a.right {
|
||||
-webkit-border-top-left-radius: 0;
|
||||
-moz-border-radius-topleft: 0;
|
||||
border-top-left-radius: 0;
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: solid 1px #f3f3f3;
|
||||
border-left: solid 1px rgba(255, 255, 255, 0);
|
||||
}
|
||||
a.big {
|
||||
font-size: 16px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
a.supersize {
|
||||
font-size: 20px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
a.save {
|
||||
background: url(/_image/addbutton.png) 10px 7px no-repeat #f3f3f3;
|
||||
padding-left: 30px;
|
||||
}
|
||||
a.add {
|
||||
background: url(/_image/addbutton.png) 10px -27px no-repeat #f3f3f3;
|
||||
padding-left: 30px;
|
||||
}
|
||||
a.delete {
|
||||
background: url(/_image/addbutton.png) 10px -61px no-repeat #f3f3f3;
|
||||
padding-left: 30px;
|
||||
}
|
||||
a.flag {
|
||||
background: url(/_image/addbutton.png) 10px -96px no-repeat #f3f3f3;
|
||||
padding-left: 30px;
|
||||
}
|
||||
a.up {
|
||||
background: url(/_image/addbutton.png) 13px -133px no-repeat #f3f3f3;
|
||||
width: 18px;
|
||||
}
|
||||
a.down {
|
||||
background: url(/_image/addbutton.png) 13px -168px no-repeat #f3f3f3;
|
||||
width: 18px;
|
||||
}
|
||||
a.save-big {
|
||||
background: url(/_image/addbutton.png) 15px 11px no-repeat #f3f3f3;
|
||||
font-size: 16px;
|
||||
padding: 10px 15px 10px 35px;
|
||||
}
|
||||
a.add-big {
|
||||
background: url(/_image/addbutton.png) 15px -23px no-repeat #f3f3f3;
|
||||
font-size: 16px;
|
||||
padding: 10px 15px 10px 35px;
|
||||
}
|
||||
a.delete-big {
|
||||
background: url(/_image/addbutton.png) 15px -57px no-repeat #f3f3f3;
|
||||
font-size: 16px;
|
||||
padding: 10px 15px 10px 35px;
|
||||
}
|
||||
a.flag-big {
|
||||
background: url(/_image/addbutton.png) 15px -92px no-repeat #f3f3f3;
|
||||
font-size: 16px;
|
||||
padding: 10px 15px 10px 35px;
|
||||
}
|
||||
a.up-big {
|
||||
background: url(/_image/addbutton.png) 15px -128px no-repeat #f3f3f3;
|
||||
width: 18px;
|
||||
font-size: 16px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
a.down-big {
|
||||
background: url(/_image/addbutton.png) 15px -163px no-repeat #f3f3f3;
|
||||
width: 18px;
|
||||
font-size: 16px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
59
_css/button.css
Normal file
59
_css/button.css
Normal file
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* Chunky 3D Web Buttons
|
||||
*
|
||||
* Inspiration was taken from:
|
||||
* - http://www.premiumpixels.com/freebies/chunky-3d-webbuttons-psd/
|
||||
*/
|
||||
|
||||
/**
|
||||
* Shadow
|
||||
*/
|
||||
.button::before {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-box-shadow: #959595 0 2px 5px;
|
||||
-moz-box-shadow: #959595 0 2px 5px;
|
||||
border-radius: 3px;
|
||||
box-shadow: #959595 0 2px 5px;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
padding: 2px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%; }
|
||||
|
||||
.button:active::before { padding: 1px 0 0; }
|
||||
|
||||
/**
|
||||
* Black
|
||||
*/
|
||||
.button.black {
|
||||
background: #656565;
|
||||
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#656565), to(#444));
|
||||
background: -moz-linear-gradient(#656565, #444);
|
||||
background: linear-gradient(#656565, #444);
|
||||
border: solid 1px #535353;
|
||||
border-bottom: solid 3px #414141;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #2f2f2f;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.button.black:hover {
|
||||
background: #4c4c4c;
|
||||
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4c4c4c), to(#565656));
|
||||
background: -moz-linear-gradient(#4c4c4c, #565656);
|
||||
background: linear-gradient(#4c4c4c, #565656);
|
||||
border: solid 1px #464646;
|
||||
border-bottom: solid 3px #414141;
|
||||
}
|
||||
|
||||
.button.black:active {
|
||||
background: #474747;
|
||||
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#474747), to(#444));
|
||||
background: -moz-linear-gradient(#474747, #444);
|
||||
background: linear-gradient(#474747, #444);
|
||||
border: solid 1px #2f2f2f;
|
||||
box-shadow: inset 0 10px 15px 0 #3e3e3e; }
|
||||
157
_css/default.css
Normal file
157
_css/default.css
Normal file
@@ -0,0 +1,157 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
min-height: 100%;
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
|
||||
#pageContainer {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
background-color: #aaaaaa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main #main_content {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
padding: 30px 10px 10px 10px;
|
||||
|
||||
webkit-box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
|
||||
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
td.create {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
td.create a {
|
||||
line-height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.list .name_tag {
|
||||
|
||||
text-align: left;
|
||||
padding: 10px 0px 10px 10px;
|
||||
margin: 5px;
|
||||
background-color: #e2edff;
|
||||
cursor: pointer;
|
||||
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
font-family: Arial;
|
||||
border-left: 2px solid #000;
|
||||
|
||||
|
||||
}
|
||||
.name_tag_checked {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 10px 0px 10px 10px;
|
||||
margin: 5px;
|
||||
background-color: #1eea0b;
|
||||
cursor: pointer;
|
||||
border-left: 2px solid #000;
|
||||
|
||||
}
|
||||
|
||||
.list {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.list .list_item {
|
||||
margin: 4px 0px;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
background-color: #e6e6e6;
|
||||
font-size: 18px;
|
||||
font-family: Arial;
|
||||
border-left: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.list .list_item:hover {
|
||||
background-color: #B7B7B7;
|
||||
border-left: 2px solid #000;
|
||||
}
|
||||
|
||||
.list .list_item img, .list .name_tag img, .list .name_tag_checked img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.list a {
|
||||
color: #473C3C;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.list a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.list .date_separator {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
background-color: #333;
|
||||
color: #f2f2f2;
|
||||
padding: 3px 0px 2px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.list_item label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 680px) {
|
||||
|
||||
main #main_content {
|
||||
width: 80%;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.list .list_item, .list .name_tag, .list .name_tag_checked {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.list_item label {
|
||||
float: left;
|
||||
padding-right: 5px;
|
||||
|
||||
}
|
||||
|
||||
.list .date_separator {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.form_wrapper {
|
||||
width: 50%;
|
||||
|
||||
}
|
||||
|
||||
form > div {
|
||||
@@ -13,13 +13,13 @@ form > div > fieldset > div > div {
|
||||
}
|
||||
form > div > label,
|
||||
legend {
|
||||
width: 25%;
|
||||
width: 30%;
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
form > div > div,
|
||||
form > div > fieldset > div {
|
||||
width: 75%;
|
||||
width: 70%;
|
||||
float: right;
|
||||
}
|
||||
form > div > fieldset label {
|
||||
@@ -44,8 +44,14 @@ textarea {
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=url],
|
||||
input[type=password] {
|
||||
width: 50%;
|
||||
input[type=password],
|
||||
select {
|
||||
width: 75%;
|
||||
border: 1px solid #121212;
|
||||
height: 30px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
input[type=text]:focus,
|
||||
input[type=email]:focus,
|
||||
@@ -73,7 +79,6 @@ input[type=email]:hover {
|
||||
legend {
|
||||
width: 100%;
|
||||
float: none;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
form > div > div,
|
||||
form > div > fieldset > div {
|
||||
@@ -93,5 +98,10 @@ input[type=email]:hover {
|
||||
form > div > label,
|
||||
legend {
|
||||
text-align: right;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.form_wrapper {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
34
_css/nav.css
34
_css/nav.css
@@ -1,3 +1,14 @@
|
||||
nav {
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin: 0px auto;
|
||||
height: 50px;
|
||||
webkit-box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.topnav {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
@@ -31,14 +42,17 @@ ul.topnav li.icon {display: none;}
|
||||
}
|
||||
|
||||
@media screen and (max-width:680px) {
|
||||
ul.topnav.responsive {position: relative;}
|
||||
|
||||
ul.topnav.responsive li {
|
||||
float: none;
|
||||
display: inline;
|
||||
}
|
||||
ul.topnav.responsive li a {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
nav {
|
||||
width: 100%;
|
||||
}
|
||||
ul.topnav.responsive {position: relative;}
|
||||
|
||||
ul.topnav.responsive li {
|
||||
float: none;
|
||||
display: inline;
|
||||
}
|
||||
ul.topnav.responsive li a {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user