Redesigned tables to use less CSS
Signed-off-by: Roman Schmerold (BNoiZe) <bnoize@froxlor.org>
This commit is contained in:
Roman Schmerold (BNoiZe)
34
templates/Sparkle/assets/css/dark.css
vendored
Normal file
34
templates/Sparkle/assets/css/dark.css
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
.content, nav {
|
||||
background-color: #11171c;
|
||||
}
|
||||
nav div:first-child {
|
||||
display:inherit;
|
||||
}
|
||||
nav a {
|
||||
color: #424a51;
|
||||
}
|
||||
nav a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
nav .active {
|
||||
color: #fff;
|
||||
}
|
||||
.menuelement {
|
||||
border: none;
|
||||
color: #424a51;
|
||||
margin: 15px 0px 25px 10px;
|
||||
padding: 0px;
|
||||
}
|
||||
.menuelement h4 {
|
||||
background: none;
|
||||
color: #088ecc;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.menuelement h4 a {
|
||||
color: #088ecc;
|
||||
}
|
||||
|
||||
.topheader {
|
||||
background:#f0f2f4;
|
||||
}
|
||||
121
templates/Sparkle/assets/css/froxlor.css
vendored
121
templates/Sparkle/assets/css/froxlor.css
vendored
@@ -42,27 +42,6 @@ h2 img {
|
||||
height:32px!important;
|
||||
}
|
||||
|
||||
table.bradius {
|
||||
/* width: 100%; */
|
||||
border-spacing: 0;
|
||||
background-color: #f8f8f8;
|
||||
border-top: 0;
|
||||
border-left: 1px solid #666;
|
||||
border-bottom: 1px solid #666;
|
||||
border-collapse: separate;
|
||||
-webkit-border-top-right-radius:20px;
|
||||
-webkit-border-bottom-left-radius:20px;
|
||||
-moz-border-radius-topright:20px;
|
||||
-moz-border-radius-bottomleft:20px;
|
||||
border-top-right-radius:20px;
|
||||
border-bottom-left-radius:20px;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
table.bradius tbody tr td {
|
||||
border-right: 1px solid #666;
|
||||
}
|
||||
|
||||
.topheader {
|
||||
background:#cccccc url('../img/header_g_froxlor.png') 0 bottom repeat-x;
|
||||
margin-bottom:12px;
|
||||
@@ -78,27 +57,6 @@ table.bradius tbody tr td {
|
||||
width:24px;
|
||||
}
|
||||
|
||||
.fullform,.midform,.tinyform {
|
||||
-webkit-border-top-right-radius:20px;
|
||||
-webkit-border-bottom-left-radius:20px;
|
||||
-moz-border-radius-topright:20px;
|
||||
-moz-border-radius-bottomleft:20px;
|
||||
border-top-right-radius:20px;
|
||||
border-bottom-left-radius:20px;
|
||||
border:1px solid #666;
|
||||
background-color:#f8f8f8;
|
||||
}
|
||||
|
||||
.tinyform tbody tr:first-child td:last-child {
|
||||
-webkit-border-top-right-radius:20px;
|
||||
-moz-border-radius-topright:20px;
|
||||
border-top-right-radius:20px;
|
||||
}
|
||||
|
||||
table.tinyform input {
|
||||
width:50%;
|
||||
}
|
||||
|
||||
/* navigation */
|
||||
nav {
|
||||
background-color:#eeeeee;
|
||||
@@ -147,10 +105,33 @@ nav div:last-child {
|
||||
color:#000;
|
||||
}
|
||||
|
||||
/* TABLES */
|
||||
table {
|
||||
border-radius: 0;
|
||||
border: 1px solid #666;
|
||||
-webkit-border-top-right-radius:20px;
|
||||
-webkit-border-bottom-left-radius:20px;
|
||||
-moz-border-radius-topright:20px;
|
||||
-moz-border-radius-bottomleft:20px;
|
||||
border-top-right-radius:20px;
|
||||
border-bottom-left-radius:20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
table thead th, table th {
|
||||
color: #fff;
|
||||
background-color: #176fa1 !important;
|
||||
background-color: #176fa1;
|
||||
border: 1px solid #176fa1;
|
||||
text-align: center;
|
||||
-webkit-border-top-right-radius:20px;
|
||||
-webkit-border-bottom-left-radius:20px;
|
||||
-moz-border-radius-topright:20px;
|
||||
-moz-border-radius-bottomleft:20px;
|
||||
border-top-right-radius:20px;
|
||||
border-bottom-left-radius:20px;
|
||||
}
|
||||
|
||||
table tfoot tr td {
|
||||
-webkit-border-top-right-radius: 20px;
|
||||
-webkit-border-bottom-left-radius: 20px;
|
||||
-moz-border-radius-topright: 20px;
|
||||
@@ -159,60 +140,6 @@ table thead th, table th {
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
|
||||
table th {
|
||||
font-weight:700;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
table tbody tr {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
table tbody tr:last-child td:first-child {
|
||||
border-bottom:0;
|
||||
}
|
||||
|
||||
table.bradius tfoot tr:last-child td:first-child, table.bradius tbody tr:last-child td:first-child {
|
||||
border-bottom:0;
|
||||
-webkit-border-bottom-left-radius: 20px;
|
||||
-moz-border-radius-bottomleft: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
|
||||
table.bradius tfoot tr:last-child td {
|
||||
border-right:1px solid #000;
|
||||
}
|
||||
|
||||
.formtable tbody td, .formtable td {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
.formtable tbody tr th {
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
|
||||
.formtable tbody tr:first-child th {
|
||||
-webkit-border-top-right-radius: 20px;
|
||||
-moz-border-radius-topright: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
|
||||
.formtable tfoot tr:last-child td:first-child {
|
||||
-webkit-border-bottom-left-radius: 20px;
|
||||
-moz-border-radius-bottomleft: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
|
||||
table tfoot td {
|
||||
height:25px;
|
||||
border-top:0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.formtable tfoot td {
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
input {
|
||||
color:#000;
|
||||
background-color:#dae7ee!important;
|
||||
|
||||
216
templates/Sparkle/assets/css/main.css
vendored
216
templates/Sparkle/assets/css/main.css
vendored
@@ -12,7 +12,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
|
||||
html,body {
|
||||
font:12px/18px 'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color:#333;
|
||||
color:#444;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
@@ -58,6 +58,7 @@ img.small {
|
||||
|
||||
h1 {
|
||||
display:none;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2,h3 {
|
||||
@@ -76,7 +77,7 @@ h3 {
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size:12px;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -214,26 +215,13 @@ footer img {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
.fullform,.midform,.tinyform {
|
||||
background-color:#fff;
|
||||
border:1px solid #d1d5d8;
|
||||
}
|
||||
|
||||
.fullform p {
|
||||
margin:10px!important;
|
||||
}
|
||||
|
||||
table.tinyform input {
|
||||
width:120px;
|
||||
}
|
||||
|
||||
.fullform,.midform,.installsec {
|
||||
.installsec {
|
||||
margin-top:10px;
|
||||
padding:0;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.tinyform, .loginsec, .errorsec {
|
||||
.loginsec, .errorsec {
|
||||
margin-top:10px;
|
||||
padding:10px 0;
|
||||
text-align:center;
|
||||
@@ -243,28 +231,7 @@ table.tinyform input {
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.tinyform {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.fullform {
|
||||
width:100%;
|
||||
margin:0 auto;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.midform {
|
||||
width:600px;
|
||||
margin:0 auto;
|
||||
padding:10px 0;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.midform {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.tinyform, .loginsec form {
|
||||
.loginsec form {
|
||||
width:400px;
|
||||
margin:0 auto;
|
||||
text-align:left;
|
||||
@@ -279,24 +246,11 @@ table.tinyform input {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.fullform fieldset,.midform fieldset,.tinyform fieldset {
|
||||
border:0;
|
||||
width:100%;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.fullform legend,.loginsec legend,.midform legend,.tinyform legend {
|
||||
.loginsec legend {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.fullform label {
|
||||
float:left;
|
||||
width:26em;
|
||||
margin-top:6px;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.midform label, .tinyform label, .loginsec label {
|
||||
.loginsec label {
|
||||
float:left;
|
||||
width:10em;
|
||||
margin-right:1em;
|
||||
@@ -304,15 +258,11 @@ table.tinyform input {
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.fullform textarea,.midform textarea {
|
||||
width:60%;
|
||||
}
|
||||
|
||||
.loginsec input[type="text"], .loginsec input[type="password"] {
|
||||
width:183px;
|
||||
}
|
||||
|
||||
.tinyform select, .loginsec select {
|
||||
.loginsec select {
|
||||
width:213px;
|
||||
}
|
||||
|
||||
@@ -529,103 +479,74 @@ nav div:last-child {
|
||||
border:0;
|
||||
}
|
||||
|
||||
.noborder td {
|
||||
border:0;
|
||||
}
|
||||
|
||||
/* TABLES */
|
||||
table {
|
||||
width:100%;
|
||||
border-spacing:0;
|
||||
border:1px solid #d1d5d8;
|
||||
border-bottom: 0px;
|
||||
border-collapse:separate;
|
||||
box-shadow:0 0 0 #000 !important;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d1d5d8;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
table.bradius tbody tr:hover {
|
||||
table thead th, table th {
|
||||
border-bottom: 1px solid #d1d5d8;
|
||||
height: 25px;
|
||||
padding: 5px 0 5px 8px;
|
||||
background-color: #e9edf0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
table tr.section:not(:first-child) th {
|
||||
border-top: 1px solid #d1d5d8;
|
||||
}
|
||||
|
||||
table tbody tr td {
|
||||
border-bottom:1px solid #f1f2f3;
|
||||
}
|
||||
table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
table.hl tbody tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
table tr.top td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table thead th,table th {
|
||||
table tfoot tr td {
|
||||
height:25px;
|
||||
border-top:1px solid #d1d5d8;
|
||||
border-bottom:1px solid #d1d5d8;
|
||||
height:25px!important;
|
||||
padding:5px 0 5px 8px;
|
||||
background-color:#e9edf0;
|
||||
font-weight:700;
|
||||
background-color:#f2f8fa;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
table thead:first-child th,table:first-child th {
|
||||
border-top:none!important;
|
||||
}
|
||||
|
||||
table th {
|
||||
border-top:0;
|
||||
table td {
|
||||
padding: 5px 10px;
|
||||
height: 25px;
|
||||
min-height: 25px;
|
||||
}
|
||||
|
||||
table th.right, table td.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
th a:hover {
|
||||
text-decoration:none;
|
||||
table.tiny {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
th a:nth-child(odd) img {
|
||||
position:relative;
|
||||
top:-5px;
|
||||
left:4px;
|
||||
table.middle {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
th a:nth-child(even) img {
|
||||
position:relative;
|
||||
top:3px;
|
||||
left:-7px;
|
||||
table.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table thead:first-child th {
|
||||
border-top:0;
|
||||
table.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.disabled td,.disabled td a {
|
||||
table tr.top {
|
||||
vertical-align: top;
|
||||
}
|
||||
tr.disabled td, tr.disabled td a {
|
||||
color:#cfcfcf;
|
||||
}
|
||||
|
||||
table tbody td {
|
||||
border-bottom:1px solid #f1f2f3;
|
||||
}
|
||||
|
||||
table tbody tr:last-child td {
|
||||
border-bottom: 1px solid #d1d5d8;
|
||||
}
|
||||
|
||||
.formtable {
|
||||
width:100%;
|
||||
border-spacing:0;
|
||||
border:0;
|
||||
border-collapse:separate;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.formtable tbody td, .formtable td {
|
||||
border:0;
|
||||
border-bottom:1px solid #f1f2f3;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.formtable label {
|
||||
float:none;
|
||||
display:block;
|
||||
padding:0;
|
||||
margin:0;
|
||||
width:100%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
/* ADMIN/CUSTOMER BARS */
|
||||
.overviewcustomerextras {
|
||||
line-height:15px;
|
||||
font-size:10px;
|
||||
@@ -639,32 +560,7 @@ table tbody tr:last-child td {
|
||||
float:left;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-top:5px;
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
padding-bottom:5px;
|
||||
}
|
||||
|
||||
table tfoot td {
|
||||
height:25px;
|
||||
border-top:1px solid #d1d5d8;
|
||||
background-color:#f2f8fa;
|
||||
}
|
||||
|
||||
.formtable tfoot td {
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
.tfootleft {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.maintitle {
|
||||
padding-top:20px;
|
||||
}
|
||||
|
||||
/* input elements */
|
||||
/* INPUT ELEMENTS */
|
||||
input {
|
||||
background:#fff url(../img/icons/text_align_left.png) no-repeat 5px 4px;
|
||||
color: #333;
|
||||
|
||||
4
templates/Sparkle/assets/css/main_ie.css
vendored
4
templates/Sparkle/assets/css/main_ie.css
vendored
@@ -9,10 +9,6 @@ input[type="submit"],input[class="nobutton"],input[type="reset"] {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.midform input[type="file"] {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
table thead th {
|
||||
border-right: 1px solid #333;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user