summaryrefslogtreecommitdiffstats
path: root/tools/infra-dashboard/css/template.css
diff options
context:
space:
mode:
authorjose.lausuch <jose.lausuch@ericsson.com>2016-06-01 23:00:08 +0200
committerjose.lausuch <jose.lausuch@ericsson.com>2016-06-02 20:12:49 +0200
commitaf427a992a96519c00ac9f98db8745f9fc1198fb (patch)
tree36f69164b289ce2405419f3946b7af0ba8f8b08e /tools/infra-dashboard/css/template.css
parent43b44d05ed662d7e9e4f0a66b5f1744685d7b5cc (diff)
OPNFV Infra Dashboard
JIRA: RELENG-12 Change-Id: I7451a3d234e4e5d946cdb905d5720be6159b6544 Signed-off-by: jose.lausuch <jose.lausuch@ericsson.com>
Diffstat (limited to 'tools/infra-dashboard/css/template.css')
-rw-r--r--tools/infra-dashboard/css/template.css802
1 files changed, 802 insertions, 0 deletions
diff --git a/tools/infra-dashboard/css/template.css b/tools/infra-dashboard/css/template.css
new file mode 100644
index 00000000..688ac04d
--- /dev/null
+++ b/tools/infra-dashboard/css/template.css
@@ -0,0 +1,802 @@
+/*
+*/
+body {
+ background-color: #15151d;
+ color: #313131;
+ font-family: 'Source Sans Pro', sans-serif;
+ font-size: 16px;
+ min-width: 300px;
+}
+h1,
+.h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+ font-weight: bolder;
+ text-transform: uppercase;
+}
+h2,
+.h2 {
+ font-size: 1.5em;
+ margin: 0.83em 0;
+ font-weight: bolder;
+ text-transform: uppercase;
+}
+h3 {
+ font-size: 1.17em;
+ margin: 1em 0;
+ font-weight: bolder;
+ text-transform: uppercase;
+}
+h4 {
+ font-weight: bolder;
+ text-transform: uppercase;
+}
+h5 {
+
+ font-weight: bolder;
+ text-transform: uppercase;
+}
+p {
+ font-size: 16px;
+}
+a {
+ color: #68CDA0;
+ outline: none;
+ text-decoration: none;
+}
+ul,
+ol {
+ padding: 0;
+ margin: 0 0 10px 25px;
+}
+.table-responsive {
+ overflow-x: auto;
+}
+img {
+ max-width: 100%;
+}
+a:focus,
+a:hover {
+ color: #90ef7f;
+ text-decoration: none;
+}
+.btn {
+ text-transform: uppercase;
+ font-weight: bolder;
+}
+.btn-default {
+ background-color: #90ef7f;
+ color: #313131;
+ border: 0;
+ border-radius: 2px;
+}
+.btn-default:hover {
+ background-color: #90ef7f;
+ color: #000000;
+}
+.btn-sm {
+ padding: 13px 18px;
+}
+button,
+.button {
+ font-size: 12px;
+ line-height: 1;
+ display: inline-block;
+ text-transform: uppercase;
+ font-weight: bolder;
+ padding: 16px 18px;
+ background-color: #90ef7f;
+ color: #313131;
+ border: 0;
+ border-radius: 2px;
+ margin: 1px;
+ text-align: center;
+}
+button:hover,
+.button:hover {
+ background-color: #90ef7f;
+ color: #000000;
+}
+.pagination>li>a, .pagination>li>span {
+ color: #FFFFFF;
+ background-color: #0095A2;
+ border: 1px solid silver;
+}
+.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
+ color: white;
+ background-color: #68CDA0;
+}
+.pagination>li>span:hover, .pagination>li>span:focus {
+ background-color: #0095A2;
+}
+/*
+* Menu
+*/
+#menu {
+ background-color: #007E88;
+ color: #ffffff;
+}
+#menu #menu-second a {
+ font-size: 12px;
+}
+#menu-second .navbar-nav>li>a {
+ padding-bottom: 5px;
+}
+#menu-second .navbar-nav>li>a {
+ padding-top: 10px;
+}
+#menu .navbar-default {
+ background-color: #FFFFFF;
+ color: inherit;
+ border-radius: 0;
+ border: 0;
+ margin-bottom: 0;
+}
+#menu .navbar-brand {
+ height: auto;
+ max-width: 360px;
+ margin: -0 0;
+ padding: 0;
+}
+#menu .navbar-brand img {
+ max-width: 100%;
+ width: 100%;
+ height: auto;
+}
+#menu a {
+ font-size: 20px;
+ font-weight: normal;
+ color: #000000;
+ text-transform: uppercase;
+}
+#menu a:hover {
+ color: #90ef7f;
+}
+#menu .navbar-default .navbar-nav>.active>a,
+#menu .navbar-default .navbar-nav>.active>a:hover,
+#menu .navbar-default .navbar-nav>.active>a:focus {
+ background-color: inherit;
+ color: #68CDA0;
+ font-weight: bolder;
+}
+#menu .navbar-default .navbar-nav>.open>a,
+#menu .navbar-default .navbar-nav>.open>a:hover,
+#menu .navbar-default .navbar-nav>.open>a:focus {
+ background-color: #ECEDEE;
+ color: #000000;
+}
+#menu .dropdown-menu {
+ background-color: #ECEDEE;
+ margin-top: -1px;
+ margin-left: -1px;
+ border-radius: 0;
+}
+#menu .dropdown-menu>li>a:hover,
+#menu .dropdown-menu>li>a:focus {
+ background-color: inherit;
+}
+#menu .dropdown-menu>.active>a,
+#menu .dropdown-menu>.active>a:hover,
+#menu .dropdown-menu>.active>a:focus {
+ background-color: inherit;
+ font-weight: bold;
+}
+#menu .dropdown-menu>li>a {
+ font-size: 16px;
+ text-transform: none;
+}
+
+.highcharts-iframe {
+ border: none;
+}
+
+/*
+*Embedded youtube
+*/
+.video-slot {
+ padding: 2em;
+}
+.video-container-outer {
+ max-width: 800px;
+ margin: 0 auto;
+}
+.video-container {
+ position:relative;
+ padding-bottom:56.25%;
+ height:0;
+ overflow:hidden;
+}
+.video-container iframe {
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+}
+/*
+* End: Menu
+*/
+.item-page {
+ max-width: 760px;
+ margin: auto;
+}
+.item-page img {
+ margin-bottom: 30px;
+}
+
+.image-wrapper {
+ background-color: #f9f9f9;
+ padding: 30px;
+ margin-bottom: 30px;
+ text-align: center;
+}
+.image-wrapper img {
+ margin: 0;
+}
+
+.blog img {
+ margin-bottom: 30px;
+}
+
+.article-info {
+ font-size: 14px;
+ color: silver;
+ margin-bottom: 20px;
+}
+
+dl.article-info dt {
+ display: none;
+}
+
+dl.article-info dd {
+ font-size: 14px;
+ display: inline;
+ color: silver;
+ margin-bottom: 20px;
+}
+
+dl.article-info dd:after {
+ content: " \25CF ";
+}
+
+dl.article-info dd:last-child:after {
+ content: none;
+}
+
+hr {
+ width: 100%;
+ border-top: 1px solid silver;
+ display: inline-block;
+}
+
+
+
+/*
+* Component
+#000000
+*/
+#hs-component {
+ background-color: #000000;
+ padding: 30px 0;
+}
+#hs-component .container {
+ background-color: white;
+ padding: 30px;
+}
+/*
+* End: Component
+*/
+/*
+* Footer
+*/
+footer {
+ background-color: #15151d;
+ color: #000000;
+}
+#footer .container {
+ padding: 30px 0;
+}
+#footer a {
+ color: inherit;
+}
+#footer a:hover {
+ color: #90ef7f;
+}
+#footer .socials a {
+ margin-left: 10px;
+}
+/*
+* End: Footer
+*/
+
+/*
+======
+=== Responsive CSS
+======
+*/
+@media screen and (min-width: 768px) {
+ #footer .socials {
+ text-align: right;
+ }
+ #menu .container {
+ padding: 0;
+ }
+ #menu span.toggle-arrow {
+ display: none;
+ }
+ #menu-container {
+ width: 600px;
+ float: right;
+ }
+ #menu .dropdown.active:hover>a,
+ #menu .dropdown.active:hover>a:hover,
+ #menu .dropdown:hover>a {
+ background-color: #ECEDEE;
+ color: #000000;
+ }
+ #menu .dropdown:hover>.dropdown-menu {
+ display: block;
+ }
+ #menu .dropdown-menu {
+ padding: 5px 20px;
+ }
+ #menu .dropdown-menu a {
+ border-bottom: 2px solid #007E88;
+ text-align: right;
+ padding: 10px 0;
+ }
+ #menu .dropdown-menu li:last-child a {
+ border-bottom: 0;
+ }
+ #menu .collapse.navbar-collapse {
+ padding: 0;
+ }
+}
+@media screen and (max-width: 767px) {
+ #menu .container {
+ padding-bottom: 30px;
+ padding-top: 30px;
+ }
+ #menu .navbar-header {
+ position: relative;
+ margin: 0;
+ }
+ #menu .navbar-header .navbar-toggle {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ margin: 0;
+ height: 40px;
+ width: 40px;
+ font-size: 30px;
+ text-align: center;
+ padding: 0;
+ color: #000000;
+ border: 0;
+ border-radius: 0;
+ cursor: pointer;
+ -moz-transform: rotate(-180deg);
+ -moz-transform: rotate(-180deg);
+ -moz-transition: -moz-transform 250ms ease-out 0s;
+ -ms-transform: rotate(-180deg);
+ -o-transform: rotate(-180deg);
+ -o-transition: -o-transform 250ms ease-out 0s;
+ -webkit-transform: rotate(-180deg);
+ -webkit-transition: -webkit-transform 250ms ease-out 0s;
+ transform: rotate(-180deg);
+ transition: transform 250ms ease-out 0s;
+ background-color: #ECEDEE;
+ }
+ #menu .navbar-header .navbar-toggle:hover {
+ color: #90ef7f;
+ }
+ #menu .navbar-header .navbar-toggle.collapsed {
+ -moz-transform: rotate(0deg);
+ -moz-transition: -moz-transform 250ms ease-out 0s;
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ -o-transition: -o-transform 250ms ease-out 0s;
+ -webkit-transform: rotate(0deg);
+ -webkit-transition: -webkit-transform 250ms ease-out 0s;
+ transform: rotate(0deg);
+ transition: transform 250ms ease-out 0s;
+ background-color: inherit;
+ }
+ #menu .navbar-header .navbar-toggle.collapsed:after {
+ font-family: "FontAwesome";
+ content: '\f0c9';
+ }
+ #menu .navbar-header .navbar-toggle:after {
+ font-family: "FontAwesome";
+ content: '\f00d';
+ }
+ #menu .navbar-brand {
+ width: 75%;
+ }
+ #menu .dropdown span.toggle-arrow:after {
+ font-family: "FontAwesome";
+ content: '\f105';
+ }
+ #menu .dropdown.open span.toggle-arrow:after {
+ font-family: "FontAwesome";
+ content: '\f107';
+ }
+ #menu .navbar-collapse {
+ border: 0;
+ background-color: #ECEDEE;
+ text-align: right;
+ margin: 0;
+ }
+ #menu ul.navbar-nav {
+ float: none !important;
+ }
+ #menu .dropdown-menu {
+ text-align: right;
+ }
+ #menu .navbar-nav {
+ margin: 0 -15px;
+ }
+ #menu .nav>li {
+ border-bottom: 2px solid #007E88;
+ }
+ #hs-component {
+ padding: 0;
+ }
+ #footer {
+ text-align: center;
+ }
+}
+
+/*
+==================
+=== About Us page
+==================
+* TODO: find better logic for this
+*/
+#about-us h1,
+#about-us h2 {
+ text-align: center;
+}
+#about-us h2 {
+ margin-top: 2em;
+}
+#about-us #company-container img {
+ width: 100%;
+}
+#about-us .image-container {
+ text-align: center;
+}
+/* Company section */
+
+/* Products section */
+#about-us #products-container div > div {
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+
+/* Numbers section */
+#about-us #numbers-container {
+ text-align: center;
+}
+#about-us #numbers-container p {
+ padding: 15px;
+ background-color: #ddd;
+ width: 220px;
+ min-height: 130px;
+ margin: 15px;
+ display: inline-block;
+ vertical-align: top;
+ text-align: left;
+ box-sizing: content-box;
+}
+
+/* Employee section */
+#about-us #employees-container {
+ text-align: center;
+}
+#about-us .employee {
+ display: inline-block;
+ width: 210px;
+ margin: 15px;
+ vertical-align: top;
+}
+#about-us .employee .image-container {
+ padding: 5px;
+}
+#about-us .employee .image-container.no-image {
+ height: 210px;
+}
+#about-us .employee .image-container img {
+ max-height: 200px;
+ max-width: 200px;
+ background-color: #000000;
+ margin-bottom: 0;
+}
+#about-us .employee .description p {
+ text-align: left;
+}
+#about-us .employee p.name {
+ font-weight: bold;
+ font-size: 18px;
+ text-align: center;
+}
+
+/* Facts section */
+#about-us #facts-container {
+ word-break: break-word;
+ /*text-align: center;*/
+ width: 50%;
+ float: left;
+}
+
+/* Press section */
+#about-us #press-container {
+ width: 50%;
+ float: left;
+}
+@media screen and (max-width: 767px) {
+ #about-us .employee .image-container.no-image {
+ height: auto;
+ }
+ #about-us #facts-container,
+ #about-us #press-container {
+ width: 100%;
+ float: none;
+ }
+ #about-us #numbers-container p {
+ width: auto;
+ min-height: 0px !important;
+ }
+}
+/*
+=======================
+=== END About Us page
+=======================
+*/
+/*
+=======================
+=== Product Pages
+=======================
+*/
+.text-center {
+ text-align: center;
+}
+.product-buttons .button {
+ max-width: 200px;
+ width: 100%;
+}
+/*
+=======================
+=== END Product Pages
+=======================
+*/
+.datatable th, .datatable td {
+ border: 1px solid silver;
+ padding: 2px 5px;
+}
+.datatable th {
+ text-align: left;
+}
+.intro h4 {
+ clear: both;
+ padding-top: 1em;
+}
+.intro img {
+ margin-bottom: 1em;
+ border: 1px solid silver;
+ max-width: 164px;
+}
+.intro img.float-left {
+ margin-right: 2em;
+}
+.intro img.float-right {
+ margin-left: 2em;
+}
+.float-right {
+ float: right;
+}
+.float-left {
+ float: left;
+}
+table.category {
+ width: 100%;
+}
+table.category .cat-list-row1 {
+ background-color: #000000;
+}
+
+/*
+====
+===
+====
+*/
+
+/* Sidebar */
+#hs-component > div.sidebar-container {
+ padding: 0;
+}
+.nav-sidebar {
+ margin: 0 -15px;
+}
+.nav-sidebar > li {
+ display: block;
+ background-color: #007E88;
+ border-top: 1px solid #0095A2;
+ color: white;
+ font-size: 20px;
+ font-weight: 200;
+ text-transform: uppercase;
+}
+.nav-sidebar > li:last-child {
+ border-bottom: 1px solid #0095A2;
+}
+.nav-sidebar > li.active {
+ background-color: #0095A2;
+ font-weight: bold;
+}
+.nav-sidebar > li > div {
+ position: relative;
+ padding: 10px;
+ padding-right: 40px;
+ cursor: pointer;
+}
+/* Toggle */
+.toggle {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+}
+.active > .toggle::after {
+ font-family: "FontAwesome";
+ content: '\f107';
+}
+.toggle::after {
+ font-family: "FontAwesome";
+ content: '\f105';
+}
+.nav-sidebar > li > ul {
+ /*display: none;*/
+}
+.nav-sidebar > li > ul {
+ /*display: block;*/
+ list-style: none;
+ margin: 0;
+}
+.nav-sidebar > li > ul > li {
+ border-top: 1px solid #007E88;
+ text-transform: none;
+ padding: 10px;
+ line-height: 1;
+}
+.nav-sidebar > li.active > ul > li.active::after {
+ content: '';
+ width: 0;
+ height: 0;
+ position: absolute;
+ right: -10px;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid #0095A2;
+ z-index: 1;
+}
+.nav-sidebar > li > ul > li > a {
+ color: white;
+ font-size: 16px;
+ font-weight: 100;
+}
+.nav-sidebar > li.active > ul > li.active > a {
+ color: #68CDA0;
+ font-weight: bold;
+}
+.nav-sidebar > li.active > ul > li > a:focus,
+.nav-sidebar > li.active > ul > li > a:hover {
+ color: #90ef7f;
+}
+.sidebar-wrapper {
+ position: relative;
+}
+.sidebar {
+ z-index: 2;
+ background-color: #007E88;
+}
+.sidebar-eq {
+ z-index: 1;
+ background-color: white;
+}
+.sidebar-fill {
+ position: absolute;
+ height: 100%;
+ background-color: #007E88;
+ left: 0;
+ top: 0;
+ z-index: 0;
+}
+.sidebar-eq-fill {
+ position: absolute;
+ height: 100%;
+ background-color: white;
+ right: 0;
+ top: 0;
+ z-index: 0;
+}
+@media screen and (max-width: 500px) {
+ .intro img {
+ display: none;
+ }
+}
+@media screen and (max-width: 768px) {
+ .sidebar-wrapper {
+ position: relative;
+ overflow: hidden;
+ }
+ .sidebar-wrapper .sidebar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 9;
+ visibility: hidden;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-transition: all 0.5s;
+ transition: all 0.5s;
+ }
+ .sidebar-wrapper.toggled .sidebar {
+ visibility: visible;
+ -webkit-transition: -webkit-transform 0.5s;
+ transition: transform 0.5s;
+ }
+ .toggled .nav-sidebar > li.active > ul > li.active::after {
+ display: none;
+ }
+ .sidebar-wrapper .sidebar-eq {
+ position: relative;
+ left: 0;
+ z-index: 10;
+ padding-top: 42px;
+ /*height: 100%;*/
+ -webkit-transition: -webkit-transform 0.5s;
+ transition: transform 0.5s;
+ }
+ .sidebar-wrapper.toggled .sidebar-eq {
+ -webkit-transform: translate3d(75%, 0, 0);
+ transform: translate3d(75%, 0, 0);
+ }
+ .sidebar-wrapper.toggled .sidebar-eq:after {
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ -webkit-transition: opacity 0.5s;
+ transition: opacity 0.5s;
+ }
+ .sidebar-wrapper .sidebar-eq:after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 0;
+ height: 0;
+ background: rgba(0,0,0,0.2);
+ content: '';
+ opacity: 0;
+ -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+ transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+ }
+ #sidebar-toggle {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: #007E88;
+ color: white;
+ border-radius: 0;
+ z-index: 100;
+ cursor: pointer;
+ padding: 10px;
+ visibility: visible;
+ }
+ #sidebar-toggle:after {
+ content: "Show Sidebar";
+ }
+ .toggled #sidebar-toggle:after {
+ content: "Hide Sidebar";
+ }
+}