diff --git a/css/detailed.css b/css/detailed.css new file mode 100644 index 0000000..cc3f2b2 --- /dev/null +++ b/css/detailed.css @@ -0,0 +1,252 @@ +/************************************/ +/* CSS FOR THE HEADER SECTION */ +/************************************/ + + +#header, #footer { + color: #DDD; + padding-left: 20px; + background-color: #222222; + text-shadow: 1px 1px 1px rgba(0,0,0,0.004); + background: linear-gradient(to bottom, #444 0%,#222 100%); + line-height: 30px; +} +#header h1 { + display: inline; +} +nav ul li { + display: inline-block; + transition: color 0.25s; + margin-right: 30px; + text-transform: uppercase; + text-align: center; + color: #CCC; + cursor: hand; + cursor: pointer; +} +nav, nav ul { + display: inline-block; + margin-left: 20px; +} + + + +/************************************/ +/* GENERAL CSS RULES FOR ALL */ +/************************************/ +.active { + color: #5E99FF; +} +.lined { + border: 1px solid #AAA; + background-color: #E8E8E8; +} +.boxed { + box-sizing: border-box; +} +.centered { + text-align: center; +} +.even { + background-color: #E0E0E0; +} +.activeSelect { + background-color: #D3DFF5; + border: 1px solid #5E99FF; +} +.topspace { + margin-top: 20px; +} +.floatright { + float: right; +} + +.floatleft { + float: left; +} +/************************************/ +/* CSS FOR THE LEFT SECTION */ +/************************************/ + + +div[dropzone] { + height: 230px; + border: 4px dashed #bbb; + transition: border 0.25s; + border-radius: 5px; + margin-bottom: 20px; + padding: 15px; +} +div[dropzone].dropover { + color: #5E99FF; + border: 3px dashed #5E99FF; +} +div[dropzone] ul { + margin-top: 10px; +} +div[dropzone] ul li { + margin-top: 3px; +} +div[dropzone] ul li b { + width: 90px; + display: inline-block; +} + +.spectralList { + height: calc(100% - 250px); + width: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +.spectralList ul, .spectralList li, .spectralList p, .spectralList .info { + display: inline-block; +} +.spectralList li { + font-size: 14px; + padding: 10px; + height: 40px; + width: 100%; + line-height: 40px; +} +.spectralList .info { + padding-left: 10px; +} + +/************************************/ +/* CSS FOR THE CENTER SECTION */ +/************************************/ +.overviewItem { + width: 300px; + height: 150px; + margin-right: 10px; + margin-bottom: 10px; + float: left; + position: relative; +} + +.overviewItem.overviewLarge { + width: 500px; + height: 200px; +} +.overviewItem .topbar { + overflow: hidden; + height: 30px; + line-height: 30px; + width: 100%; + background-color: #CCC; + background: linear-gradient(to bottom, #DDD 0%,#CCC 100%); + display: block; +} +.overviewItem .topbar b { + margin-left: 10px; +} +.overviewItem .topbar p { + display: inline; + margin-left: 15px; +} +.overviewItem .graph { + display: block; + position: absolute; + top: 30px; + bottom: 0px; + left: 0px; + right: 0px; +} + +.usage h1 { + colour: #222; + line-height: 1.5em; +} + +.usage h2 { + color: #444; + font-size: 22px; + line-height: 1.5em; + margin-bottom: 10px; + margin-top: 20px; +} +.usage p { + color: #555; + line-height: 1.6em; + font-size: 1em; + +} +.usage .h1group { + margin-bottom: 20px; + padding: 30px; +} + +.usage hr { + border: 0; + margin-top: 0px; + height: 1px; + background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); + background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); + background-image: -ms-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); + background-image: -o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); +} + + +.usage ul { + padding: 10px 0 10px 0; + list-style-type: circle; +} +.usage li { + margin-left: 50px; +} + + + +#big { + width: 100%; + height: 500px; +} + + +/************************************/ +/* CSS FOR THE RIGHT SECTION */ +/************************************/ +#rightbar b { + display: block; + width: 100%; + margin-bottom: 10px; +} +#rightbar .button { + display: inline-block; + padding: 5px 10px 5px 10px; + border: 1px solid #444; + border-radius: 5px; + margin-right: 10px; +} + +#rightbar label, #rightbar select, #rightbar input { + display: inline-block; +} +#rightbar label { + width: 70px; + height: 20px; + margin-bottom: 10px; +} + + + +/************************************/ +/* CSS FOR THE FOOTER SECTION */ +/************************************/ + + +.footer p { + display: inline-block; +} + +.footer progress { + display: inline-block; +} +.fillrest { + padding-left: 20px; + padding-right: 20px; + position: relative; + display: block; + overflow:hidden; +} \ No newline at end of file diff --git a/css/fancy.css b/css/fancy.css new file mode 100644 index 0000000..bad6c34 --- /dev/null +++ b/css/fancy.css @@ -0,0 +1,189 @@ +/************************************/ +/* FANCY CSS STYLING FOR STUFF */ +/************************************/ + + +input[type='range'] { + -webkit-appearance: none; + border-radius: 5px; + /*box-shadow: inset 0 0 5px #333;*/ + background-color: rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.3);; + height: 5px; + vertical-align: middle; +} +input[type='range']::-moz-range-track { + -moz-appearance: none; + border-radius: 5px; + /*box-shadow: inset 0 0 5px #333;*/ + background-color: #999; + height: 10px; +} +input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none !important; + border-radius: 20px; + background-color: #FFF; + /*box-shadow:inset 0 0 10px rgba(000,000,000,0.5);*/ + border: 1px solid #333; + height: 20px; + width: 10px; +} +input[type='range']::-moz-range-thumb { + -moz-appearance: none; + border-radius: 10px; + background-color: #FFF; + /*box-shadow:inset 0 0 10px rgba(000,000,000,0.5);*/ + border: 1px solid #333; + height: 20px; + width: 10px; +} + +button { + -moz-box-shadow:inset 0px 1px 0px 0px #bee2f9; + -webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9; + box-shadow:inset 0px 1px 0px 0px #bee2f9; + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf)); + background:-moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%); + background:-webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%); + background:-o-linear-gradient(top, #63b8ee 5%, #468ccf 100%); + background:-ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%); + background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf',GradientType=0); + background-color:#63b8ee; + -moz-border-radius:6px; + -webkit-border-radius:6px; + border-radius:6px; + border:1px solid #3866a3; + display:inline-block; + cursor:pointer; + color:#14396a; + font-family:arial; + font-size:15px; + font-weight:bold; + padding:6px 24px; + text-decoration:none; + text-shadow:0px 1px 0px #7cacde; +} +button.small { + padding: 0px 10px; +} +button:hover { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee)); + background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%); + background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%); + background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%); + background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%); + background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee',GradientType=0); + background-color:#468ccf; +} + + +progress:not(value) { + /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */ +} +/* Styling the determinate progress element */ +progress[value] { + /* Get rid of the default appearance */ + appearance: none; + /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */ + border: none; + /* Add dimensions */ + width: 100%; height: 16px; + /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */ + background-color: whiteSmoke; + border-radius: 3px; + box-shadow: 0 2px 3px rgba(0,0,0,.5) inset; + /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */ + color: royalblue; + + position: relative; + margin-top: 2px; +} + +progress[value]::-webkit-progress-bar { + background-color: whiteSmoke; + border-radius: 3px; + box-shadow: 0 2px 3px rgba(0,0,0,.5) inset; +} +progress[value]::-webkit-progress-value { + position: relative; + + background-size: 35px 20px, 100% 100%, 100% 100%; + border-radius:3px; + + /* Let's animate this */ + animation: animate-stripes 100s linear infinite; + -webkit-animation: animate-stripes 100s linear infinite; +} + +@-webkit-keyframes animate-stripes { + 100% { background-position: -1000px 0px; } +} + +@keyframes animate-stripes { + 100% { background-position: -1000px 0px; } +} +/* Let's spice up things little bit by using pseudo elements. */ + +/*progress[value]::-webkit-progress-value:after { + *//* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! *//* + content: ''; + position: absolute; + + width:5px; height:5px; + top:7px; right:7px; + + background-color: white; + border-radius: 100%; +}*/ + +/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */ + +progress[value]::-moz-progress-bar { + /* Gradient background with Stripes */ + background-image: + -moz-linear-gradient( 135deg, + transparent, + transparent 33%, + rgba(0,0,0,.1) 33%, + rgba(0,0,0,.1) 66%, + transparent 66%), + -moz-linear-gradient( top, + rgba(255, 255, 255, .25), + rgba(0,0,0,.2)), + -moz-linear-gradient( left, #09c, #04c204); + + background-size: 35px 20px, 100% 100%, 100% 100%; + border-radius:3px; + + /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */ +} + +/* Fallback technique styles */ +.progress-bar { + background-color: whiteSmoke; + border-radius: 3px; + box-shadow: 0 2px 3px rgba(0,0,0,.5) inset; + + /* Dimensions should be similar to the parent progress element. */ + width: 100%; height:16px; +} + + +/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */ +.html5::-webkit-progress-value { + /* Gradient background with Stripes */ + background-image: + -webkit-linear-gradient( 135deg, + transparent, + transparent 33%, + rgba(0,0,0,.1) 33%, + rgba(0,0,0,.1) 66%, + transparent 66%), + -webkit-linear-gradient( top, + rgba(255, 255, 255, .25), + rgba(0,0,0,.2)), + -webkit-linear-gradient( left, #09c, #04c204); +} + diff --git a/css/structure.css b/css/structure.css new file mode 100644 index 0000000..d445889 --- /dev/null +++ b/css/structure.css @@ -0,0 +1,75 @@ +html, body { + height: 100%; + min-width: 800px; + padding: 0; + margin: 0; + background-color: #E5E5E5; + font-family: Helvetica,Arial,sans-serif; +} +#footer, .push { + height: 50px; /* '.push' must be the same height as 'footer' */ + z-index: 10; +} +#header { + height: 50px; +} +#container { + height: calc(100% - 50px); /* Footer subtract */ + position: relative; + +} +#content { + height: calc(100% - 50px); /* Header subtract */ + position: relative; + +} +#leftbar { + float: left; + position: relative; + width: 250px; + height: 100%; +} +#rightbar { + position: relative; + float: right; + width: 0px; + height: 100%; +} +#rightbar.nonzero{ + width: 350px; +} +#central { + position: relative; + height: 100%; + overflow: auto; +} + +.spacing { + position: relative; + padding: 10px; + height: calc(100% - 20px); + width: calc(100% - 20px); +} + +/****************************************************/ + + +/*#header { + background-color: green; +} +#container { + background-color: dodgerblue; +}*/ +/*#content { + background-color: #5E99FF; +}*/ +#leftbar { + background-color: #E0E0E0; +} +#rightbar { + background-color: #E0E0E0; +} + +#central { + background-color: #F0F0F0; +} diff --git a/css/style.css b/css/style_old.css similarity index 100% rename from css/style.css rename to css/style_old.css diff --git a/index.html b/index.html index 47abe2c..e854960 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,9 @@ InterfaceZ: Return of the Z-iffying - + + + @@ -20,12 +22,11 @@ - -
-
-
+
+