aiden
/
tomato-design
mirror of https://github.com/mReXiTuS/tomato-design
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
master
Dominik Slavkovsky 9 years ago
commit be52888e9d
3 changed files with 645 additions and 0 deletions
Show Stats Download Patch File Download Diff File

613
custom.scss
Unescape Escape View File

@ -0,0 +1,613 @@
html, body {
background-color: #f1f4f5;
}
@font-face {
font-family: 'FontAwesome';
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
// green theme
$primary-color: #27ae60;
$primary-color-hover: lighten( $primary-color, 10% );
// blue theme
// $primary-color: #3498db;
// $primary-color-hover: lighten( $primary-color, 10% );
// tomato red theme
// $primary-color: #ea3200;
// $primary-color-hover: lighten( $primary-color, 10% );
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
br {
height: 0;
padding: 0;
margin: 0;
display: none;
}
table#container {
width: 100% !important;
margin: 0 0 0 0;
}
td#content a {
color: #536270;
}
td#content a:hover {
background: none;
color: $primary-color;
}
small a {
color: white !important;
}
small a:hover {
color: white !important;
background-color: #76838f !important;
}
/*CUSTOM ICONS*/
td#navi a.indent1:before {
width: 20px;
}
td#navi a.active.indent1:before {
width: 20px;
color: $primary-color;
}
td#navi a.indent2:before {
width: 15px;
content: "\f105";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 13px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*home*/
td#navi a:first-of-type:before {
content: "\f015";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*bandwidth*/
td#navi a.indent1[href*="bwm"]:before {
content: "\f1fe";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*tools*/
td#navi a.indent1[href*="tools"]:before {
content: "\f0ad";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*basic*/
td#navi a.indent1[href*="basic"]:before {
content: "\f01c";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*advanced*/
td#navi a.indent1[href*="advanced"]:before {
content: "\f132";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*port forward*/
td#navi a.indent1[href*="forward"]:before {
content: "\f064";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*quality of service*/
td#navi a.indent1[href*="qos"]:before {
content: "\f200";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*access restriction*/
td#navi a.indent1[href*="restrict"]:before {
content: "\f023";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*administration*/
td#navi a.indent1[href*="admin"]:before {
content: "\f085";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
/*about*/
td#navi a.indent1[href*="about"] {
color: #2b323a;
position: absolute;
display: inline-block;
top: 12px;
right: 400px;
text-shadow: none;
font-size: 13px;
}
td#navi a.indent1[href*="about"]:before {
content: "\f05a";
width: 11px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
td#navi a.indent1[href*="about"]:hover {
color: $primary-color;
}
td#navi a.active[href*="about"] {
color: $primary-color !important;
}
/*reboot*/
td#navi a.indent1[href*="javascript:reboot()"] {
color: #2b323a;
position: absolute;
display: inline-block;
top: 12px;
right: 280px;
text-shadow: none;
font-size: 13px;
}
td#navi a.indent1[href*="javascript:reboot()"]:before {
content: "\f021";
width: 11px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
td#navi a.indent1[href*="javascript:reboot()"]:hover {
color: $primary-color;
}
/*shutdown*/
td#navi a.indent1[href*="javascript:shutdown()"] {
color: #2b323a;
position: absolute;
display: inline-block;
top: 12px;
right: 150px;
text-shadow: none;
font-size: 13px;
}
td#navi a.indent1[href*="javascript:shutdown()"]:before {
content: "\f011";
width: 11px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
td#navi a.indent1[href*="javascript:shutdown()"]:hover {
color: $primary-color;
}
/*logout*/
td#navi a.indent1[href*="javascript:logout()"] {
color: #2b323a;
position: absolute;
display: inline-block;
top: 12px;
right: 50px;
text-shadow: none;
font-size: 13px;
}
td#navi a.indent1[href*="javascript:logout()"]:before {
content: "\f08b";
width: 11px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 10px;
}
td#navi a.indent1[href*="javascript:logout()"]:hover {
color: $primary-color;
}
/* HEADER */
table#container td#header {
background-color: white;
border-bottom: none;
padding: 0 0 0 0;
position: relative;
height: 60px;
box-shadow: rgba(0,0,0,0.2) 0px 0px 8px;
}
table#container td#header div.title {
font-size: 16px;
background-color: $primary-color;
height: 60px;
display: block;
width: 240px;
position: absolute;
top: 0px;
line-height: 60px;
text-align: center;
background: no-repeat $primary-color url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMxODRFQUVDRDNBMTFFNjk3NDFDRkE2N0RCRjNCMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMxODRFQUZDRDNBMTFFNjk3NDFDRkE2N0RCRjNCMDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzE4NEVBQ0NEM0ExMUU2OTc0MUNGQTY3REJGM0IwOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzE4NEVBRENEM0ExMUU2OTc0MUNGQTY3REJGM0IwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnoUfOQAAAImSURBVHjatNZPSFRBHMDxUQtJcgVTSykCCRSKFTpoEkaldhEqyFvkwfCiEIQYQiCeAy+RiNghECIiigI9CCmRJP07eFMkNHWJUqOsXWsNXt8f/jamx74YzfeDD/uYnZnfzLz3Zp7xPM9sQR6eoMKlfqYJjgMoD/hvAMuYNA6RIZkCIgfPsYYYJtCL03iEIv0vGwmrTcI1SRRxHMJd5Gv5YxRIOy1vRS4+I4mWtLPzrV8VhpDEa+zHbjTiPuLeRqR+JVbwER3Yhds4b/drJ7iEhPd3SOXDmMRPJXXeaaJ1PMUR5GPCatuLTDvJCfyyKkintTiIRau8Dwt4jzZrRnM4iQbc0cFI3Egl2YlXVkfXkIXj2pnEGnqwD1+17BSOYkQHKMmjKMIPrSPlUUlS51siabRX70WF3qdinXE2YlqvTZcjF4XYgwge+Pq7Ke/JWd+zUI83aNcnJ6ll9/RxHdZ633EMb9GFbrzABV9/lUZH7hqXdbQvUYNzDm1mJcn0JpLErKUT/Q5tlnYwnTzjHiUYQ6e+rBcd2njyxn/iotCEF/Ny41dMuLEsSaZDTjIrSUZDTvJM7kkxF1OIhJBAtv1ymckH3AppFoNYSD3vEd1ZtzO+6FHx5/hdRRO+beMsrmAx3aFVpyP437gadGilVOt5spWQU7LZ32fQZ4xs89f1jHCJuB67pen6+9fXitGPBjkKzqBMtx/Z7td1p5jDOB5iJqiT3wIMAOGsd+Td/AWpAAAAAElFTkSuQmCC');
background-position: 66px 16px;
padding-left: 10px;
}
table#container td#header div.title small {
display: none;
}
table#container td#header div.version {
background-color: white;
height: 60px;
position: absolute;
top: 0px;
left: 240px;
line-height: 60px;
padding-left: 20px;
color: #536270;
font-weight: normal;
font-size: 13px;
}
/* NAVI */
td#navi {
width: 240px !important;
max-width: 240px;
background-color: #2b323a;
padding: 10px 0 0 0;
}
td#navi a {
color: #959ba0;
padding: 0 0 0 0;
display: block;
text-shadow: #24272b 1px 1px 3px;
}
td#navi a:hover {
background-color: transparent !important;
color: white;
}
td#navi a.indent1 {
margin-left: 0px;
padding: 0 0 0 25px;
height: 35px;
line-height: 35px;
font-weight: normal;
font-size: 14px;
}
td#navi a.indent1.active {
color: white;
background-color: none;
}
td#navi a.indent2 {
margin-left: 0px;
padding: 0 0 0 55px;
height: 25px;
line-height: 25px;
}
td#navi a.indent2.active {
background-color: #252b31;
color: white;
}
/* CONTENT */
td#content {
width: auto;
background-color: #f1f4f5;
}
div#ident {
display: none;
}
div.section-title {
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
background-color: #ffffff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding-top: 18px;
padding-left: 20px;
border-bottom: none;
color: #536270;
font-weight: bold;
font-size: 14px;
box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
}
div.section {
margin-top: 0px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 20px;
background-color: #ffffff;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
}
/* TABLES */
table.tomato-grid {
margin: 0 0 0 0;
border-spacing: 0px;
border: none;
}
table.tomato-grid tr.odd {
cursor: default;
}
table.tomato-grid tr.even {
cursor: default;
}
table.tomato-grid tr.header td {
background-color: white !important;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 5px;
font-size: 13px;
color: #536270;
border-bottom: 1px solid #e4eaec;
}
table.tomato-grid tr.odd {
background-color: transparent !important;
}
table.tomato-grid tr td {
background-color: transparent !important;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 5px;
font-size: 12px;
color: #76838f;
border-bottom: 1px solid #e4eaec;
}
table.tomato-grid tr td small {
display: block;
}
table.tomato-grid tr td small a {
color: red;
display: inline-block;
padding: 4px 7px;
background-color: #536270;
color: white;
font-size: 11px;
border-radius: 3px;
}
table.tomato-grid tr td small a:hover {
background-color: #76838f;
}
table.tomato-grid tr.even:hover {
background-color: white !important;
}
table.tomato-grid .controls {
background-color: white !important;
}
table.tomato-grid .editor {
background-color: white !important;
}
table.tomato-grid .editor td {
border-bottom: none;
}
input[type=button] {
background-color: $primary-color;
border: none;
padding: 10px 18px;
color: white;
border-radius: 3px;
font-size: 13px;
width: auto;
}
input[type=button]:hover {
background-color: $primary-color-hover;
cursor: pointer;
width: auto;
}
div.section div {
background-color: transparent;
float: none !important;
color: #76838f;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e4eaec;
}
/* FOOTER */
td#footer {
border: none;
padding: 0 0 0 0;
background-color: #f1f4f5;
text-align: left;
}
td#footer:before {
display: block;
background-color: #2b323a;
width: 240px;
min-height: 500px;
content: "";
float: left;
}
td#footer div {
text-align: left !important;
margin-bottom: 10px;
margin-left: 290px;
}
span#footer-msg {
display: block;
float: left;
width: 15px;
}
/*STATS*/
div#rstats {
background-color: white;
border-radius: 4px;
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
}
span#dtime {
display: none;
}
div#tab-area {
margin-bottom: 17px;
}
div#tabs-bottom {
border: none;
}
ul#tabs li a {
padding: 8px 8px;
border-radius: 3px;
}
ul#tabs li a.active {
background-color: $primary-color;
color: white !important;
}
ul#tabs li a:hover {
background-color: silver;
}

1
dist/custom.css vendored
View File

File diff suppressed because one or more lines are too long

31
gulpfile.js
Unescape Escape View File

@ -0,0 +1,31 @@
var gulp = require('gulp');
var clean = require('gulp-clean');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');
var copy = require('gulp-copy');
//style paths
var sassFiles = 'custom.scss',
cssDest = 'dist/';
//app dest path
var dist = 'dist/';
gulp.task('styles', ['clean'], function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss())
.pipe(rename({
basename: 'custom',
extname: '.css'
}))
.pipe(gulp.dest(cssDest));
});
gulp.task('clean', function () {
return gulp.src(dist, {read: false})
.pipe(clean());
});
gulp.task('default', ['clean', 'styles']);
Write Preview
Loading…
Cancel
Save