From d5f3352411906e5b2b7b744d7869001791432223 Mon Sep 17 00:00:00 2001 From: scottashton Date: Wed, 19 Mar 2014 13:39:22 +0100 Subject: [PATCH] css refactoring --- .../aardvark/frontend/css/headerBar.css | 45 --- .../aardvark/frontend/scss/_headerBar.scss | 37 +++ .../aardvark/frontend/scss/_shared.scss | 3 + .../system/aardvark/frontend/scss/cluster.css | 263 +++++++++++++++--- .../aardvark/frontend/scss/generated.css | 49 +++- js/apps/system/aardvark/manifest.json | 1 - 6 files changed, 306 insertions(+), 92 deletions(-) delete mode 100644 js/apps/system/aardvark/frontend/css/headerBar.css diff --git a/js/apps/system/aardvark/frontend/css/headerBar.css b/js/apps/system/aardvark/frontend/css/headerBar.css deleted file mode 100644 index a0abe46422..0000000000 --- a/js/apps/system/aardvark/frontend/css/headerBar.css +++ /dev/null @@ -1,45 +0,0 @@ -/* The bar on top of each page */ -div.headerBar { - position: relative; - margin-bottom: 5px; - background-color: #686766; - color: #FFFFFF; - height: 36px; - font-size: 16px; - padding-left: 5px; - padding-right: 5px; -} - -/* The title of the page */ - -div.headerBar a.arangoHeader, -.modal-header .arangoHeader { - color: white; - position: relative; - top: 7px; - left: 5px; - font-size: 16px; -} - -/* The buttons on the right side */ - -div.headerBar > div.headerButtonBar { - margin: 4px 0px; - margin-bottom: 0 !important; -} - -/* Breadcrumbs on the left side */ - -div.headerBar > div.breadcrumb { - padding-left: 5px !important; -} - -/* Disabled breadcrumb */ -div.breadcrumb a.disabledBread { - color:#fff; -} - -/* arangoHeader */ -.arangoHeader { - font-weight: 400; -} diff --git a/js/apps/system/aardvark/frontend/scss/_headerBar.scss b/js/apps/system/aardvark/frontend/scss/_headerBar.scss index 714c5eede7..e92a9eb666 100644 --- a/js/apps/system/aardvark/frontend/scss/_headerBar.scss +++ b/js/apps/system/aardvark/frontend/scss/_headerBar.scss @@ -38,8 +38,42 @@ div.headerBar { padding-left: 5px; padding-right: 5px; position: relative; + input[type=checkbox].css-checkbox { + display:none; + & + label.css-label { + padding-left:20px; + margin-top: 0px; + height:15px; + display:inline-block; + background-repeat:no-repeat; + background-position: 0 0; + font-size:15px; + vertical-align:middle; + cursor:pointer; + } + } + input[type=checkbox].css-checkbox:checked + label.css-label { + background-position: 0 -15px; + } + input[type="radio"] { + display:none; + & + label span { + display:inline-block; + width:19px; + height:19px; + margin:-1px 4px 0 0; + vertical-align:middle; + background:url(../img/check_radio_sheet.png) -38px top no-repeat; + cursor:pointer; + } + } + input[type="radio"]:checked + label span { + background:url(../img/check_radio_sheet.png) -57px top no-repeat; + } } + + // The title of the page div.headerBar a.arangoHeader, @@ -76,3 +110,6 @@ div.breadcrumb a.disabledBread { font-weight: 400; } +#transparentHeader input[type=checkbox].css-checkbox { + display:none; +} diff --git a/js/apps/system/aardvark/frontend/scss/_shared.scss b/js/apps/system/aardvark/frontend/scss/_shared.scss index 0c8179d996..7d6a9d5ec1 100644 --- a/js/apps/system/aardvark/frontend/scss/_shared.scss +++ b/js/apps/system/aardvark/frontend/scss/_shared.scss @@ -20,3 +20,6 @@ @import 'dropdowns'; // Header Bar @import 'headerBar'; +// Checkbox +@import 'checkbox'; + diff --git a/js/apps/system/aardvark/frontend/scss/cluster.css b/js/apps/system/aardvark/frontend/scss/cluster.css index 74d915e313..6a02b1d95a 100644 --- a/js/apps/system/aardvark/frontend/scss/cluster.css +++ b/js/apps/system/aardvark/frontend/scss/cluster.css @@ -6,13 +6,49 @@ textarea, font-family: 'Open Sans', sans-serif !important; font-weight: 400; } -ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, a.headerButton, a.button-gui, li.tile, li.bigtile, li.tile a span.add-Icon, li.bigtile a span.add-Icon, div.centralContent, .contentDiv li, .machineClass, .scenarioMachine { +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + src: local("Open Sans Light"), local("OpenSans-Light"), url("../fonts/opensans/OpenSansLight.woff") format("woff"); } + +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url("../fonts/opensans/OpenSans.woff") format("woff"); } + +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../fonts/opensans/OpenSansBold.woff") format("woff"); } + +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 300; + src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), url("../fonts/opensans/OpenSansLightItalic.woff") format("woff"); } + +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../fonts/opensans/OpenSansItalic.woff") format("woff"); } + +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 700; + src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../fonts/opensans/OpenSansBoldItalic.woff") format("woff"); } + +ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div.tile, div.bigtile, div.tile a span.add-Icon, div.bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .machineClass, .scenarioMachine { float: left; } -div.navmenu, div.footer-right, li.tile div.iconSet span, li.bigtile div.iconSet span { +div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div.tile div.iconSet span, div.bigtile div.iconSet span, div.headerBar > div.headerButtonBar { float: right; } -ul.tileList:after, div.resizecontainer:after, .machineClass:after, .scenarioSingleMachine:after { +div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonBar:after, .machineClass:after, .scenarioSingleMachine:after { clear: both; content: '.'; display: block; @@ -20,7 +56,7 @@ ul.tileList:after, div.resizecontainer:after, .machineClass:after, .scenarioSing height: 0; visibility: hidden; } -.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox > div.gv_action_button, .clusterDownBtn button, li.tile a span.icon, li.bigtile a span.icon, li.tile a svg, li.bigtile a svg, li.tile div.iconSet span, li.bigtile div.iconSet span, li.bigtile, .contentDiv .icon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .scenarioImage { +.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox > div.gv_action_button, .clusterDownBtn button, div.tile a span.icon, div.bigtile a span.icon, div.tile a svg, div.bigtile a svg, div.tile div.iconSet span, div.bigtile div.iconSet span, div.bigtile, .contentDiv .icon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .scenarioImage { cursor: pointer; } nav.navbar, footer.footer { @@ -260,6 +296,16 @@ ul.gv-dropdown-menu { vertical-align: top; width: 0; } +.footer { + background-color: #333232; + bottom: 0; + font-size: 14px; + left: 0; + position: fixed; + right: 0; + text-align: center; + z-index: 1000; } + footer.footer { bottom: 0; height: 40px; } @@ -268,6 +314,18 @@ footer.footer { padding-bottom: 10px; padding-top: 10px; } +div.footer-left { + background: none repeat scroll 0 0 #333232; + color: white; + width: 45%; } + +div.footer-right { + background: none repeat scroll 0 0 #333232; + color: #333232; + width: 45%; } + div.footer-right p { + color: white; } + .button-neutral, .button-primary, .button-notification, .button-success, .button-danger, .button-warning, .button-inactive, .button-close, .button-header { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -287,9 +345,6 @@ footer.footer { .button-header { margin-top: 5px; } -.button-notification { - margin-right: 5px; } - .addButton { font-size: 22px; margin-right: 7px; @@ -302,14 +357,19 @@ footer.footer { position: relative; top: 3px; } +button.large-distance { + margin-left: 12px; } + +button.short-distance { + margin-left: 6px; } + ul.headerButtonList { display: inline-block; margin-bottom: 0; margin-left: 0; padding-left: 0 !important; } ul.headerButtonList li { - display: inline; - margin-right: 2px; } + display: inline; } button.shutdown { margin-top: 6px; @@ -323,7 +383,7 @@ a.headerButton, a.button-gui { -moz-box-shadow: none; box-shadow: none; margin-left: 5px; - margin-right: 3px; + margin-right: 5px; padding-left: 9px; padding-right: 9px; } @@ -551,46 +611,49 @@ a.button-gui { .clusterDownBtn button.green:hover { background-color: #8ba142; } -ul.tileList { +div.tileList { margin-left: -6px; margin-right: -6px; } -li.tile, li.bigtile { +div.tile, div.bigtile { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: rgba(0, 0, 0, 0.05); + font-size: 14px; list-style: none; margin-bottom: 13px; margin-left: 6px; margin-right: 6px; position: relative; text-align: center; } - li.tile img.icon, li.bigtile img.icon { + div.tile img.icon, div.bigtile img.icon { height: 50px; width: 50px; } - li.tile a span.add-Icon, li.bigtile a span.add-Icon { + div.tile a span.add-Icon, div.bigtile a span.add-Icon { font-size: 22px; margin-left: 22px; margin-right: 10px; margin-top: -5px; - position: relative; } - li.tile a span.icon, li.bigtile a span.icon { + position: relative; + right: 4px; + top: 2px; } + div.tile a span.icon, div.bigtile a span.icon { font-size: 50px; } - li.tile a svg.icon, li.bigtile a svg.icon { + div.tile a svg.icon, div.bigtile a svg.icon { height: 50px; width: 50px; } - li.tile svg.tile-icon-svg, li.bigtile svg.tile-icon-svg { + div.tile svg.tile-icon-svg, div.bigtile svg.tile-icon-svg { fill: #686766; height: 50px; margin-left: 90px; margin-top: 10px; width: 50px; } - li.tile span.tile-icon, li.bigtile span.tile-icon { + div.tile span.tile-icon, div.bigtile span.tile-icon { color: #686766; font-size: 50px; line-height: 1.2; } - li.tile h5, li.bigtile h5 { + div.tile h5, div.bigtile h5 { background: #686766; color: white; font-size: 12px; @@ -599,58 +662,58 @@ li.tile, li.bigtile { padding: 4px 8px; text-overflow: ellipsis !important; white-space: nowrap !important; } - li.tile div.iconSet, li.bigtile div.iconSet { + div.tile div.iconSet, div.bigtile div.iconSet { position: absolute; right: 5px; top: 5px; } - li.tile div.iconSet span, li.bigtile div.iconSet span { + div.tile div.iconSet span, div.bigtile div.iconSet span { font-size: 18px; opacity: .5; padding-left: 7px; } - li.tile div.iconSet span:hover, li.bigtile div.iconSet span:hover { + div.tile div.iconSet span:hover, div.bigtile div.iconSet span:hover { opacity: 1.0; } - li.tile div.iconSet span.disabled, li.bigtile div.iconSet span.disabled { + div.tile div.iconSet span.disabled, div.bigtile div.iconSet span.disabled { cursor: default; opacity: .2; } - li.tile .badge-success, li.bigtile .badge-success { + div.tile .badge-success, div.bigtile .badge-success { font-weight: 300; } - li.tile .unloaded div, li.bigtile .unloaded div { + div.tile .unloaded div, div.bigtile .unloaded div { border-bottom: 16px solid #ff8f35; } - li.tile .deleted div, li.bigtile .deleted div { + div.tile .deleted div, div.bigtile .deleted div { border-bottom: 16px solid #770000; } - li.tile div.tileBadge, li.bigtile div.tileBadge { + div.tile div.tileBadge, div.bigtile div.tileBadge { bottom: 29px; font-size: 11px; font-weight: 300; position: absolute; right: 0; } - li.tile div.tileBadge button, li.bigtile div.tileBadge button { + div.tile div.tileBadge button, div.bigtile div.tileBadge button { margin-left: 0; margin-right: 5px; } - li.tile div.tileBadge span, li.bigtile div.tileBadge span { + div.tile div.tileBadge span, div.bigtile div.tileBadge span { display: inline-block; line-height: 13px; } - li.tile div.tileBadge span div.corneredBadge, li.bigtile div.tileBadge span div.corneredBadge { + div.tile div.tileBadge span div.corneredBadge, div.bigtile div.tileBadge span div.corneredBadge { border-left: 17px solid transparent; border-bottom-style: solid; border-bottom-width: 17px; height: 0; padding-left: 4px; padding-right: 9px; } - li.tile div.tileBadge span div.corneredBadge.loaded, li.bigtile div.tileBadge span div.corneredBadge.loaded { + div.tile div.tileBadge span div.corneredBadge.loaded, div.bigtile div.tileBadge span div.corneredBadge.loaded { border-bottom-color: #8aa051; } - li.tile div.tileBadge span div.corneredBadge.unloaded, li.bigtile div.tileBadge span div.corneredBadge.unloaded { + div.tile div.tileBadge span div.corneredBadge.unloaded, div.bigtile div.tileBadge span div.corneredBadge.unloaded { border-bottom-color: #ff8f35; } -li.tile { +div.tile { height: 100px; width: 230px; } -li.bigtile { +div.bigtile { height: 309px; width: 460px; } - li.bigtile div.shardContainer { + div.bigtile div.shardContainer { font-size: 30px; } - li.bigtile div.shardContainer span { + div.bigtile div.shardContainer span { padding: 2px; } .collectionName { @@ -829,13 +892,6 @@ div.headerDropdown { padding: 10px; position: relative; width: auto; } - div.headerDropdown > div.dropdownInner { - -webkit-box-shadow: 0; - -moz-box-shadow: 0; - box-shadow: 0; - min-height: 125px; - position: relative; - width: auto; } div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox { display: none; } div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label { @@ -850,6 +906,32 @@ div.headerDropdown { div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; } +div.dropdownInner { + -webkit-box-shadow: 0; + -moz-box-shadow: 0; + box-shadow: 0; + min-height: 125px; + position: relative; + width: auto; } + div.dropdownInner > .nav-header { + color: black; + font-size: 13px; + font-weight: 400; } + div.dropdownInner > label { + color: black; + font-weight: 300; } + div.dropdownInner ul { + border-left: 1px solid black; + display: inline; + margin-top: 10px; + min-height: 105px; + width: 238px; } + div.dropdownInner ul:first-of-type { + border: 0; } + div.dropdownInner ul label { + color: black; + padding-left: 35px; } + div.queryline { color: black; height: 35px; } @@ -901,6 +983,99 @@ select.filterSelect { margin-left: 10px !important; margin-top: 1px; } +input.search-input { + border: 0; + height: 18px; + line-height: 18px; + margin-top: 5px; + width: 214px; } + input.search-input:focus { + -webkit-box-shadow: 0 0 10px #8aa051; + -moz-box-shadow: 0 0 10px #8aa051; + box-shadow: 0 0 10px #8aa051; + border-color: #8aa051; + outline: none; } + +.search-submit-icon { + height: 14px; + margin-left: -18px; + margin-top: 11px; + opacity: .2; + position: absolute; + width: 14px; } + .search-submit-icon:hover { + opacity: .8; } + +div.headerBar { + background-color: #686766; + color: white; + font-size: 16px; + height: 36px; + margin-bottom: 5px; + padding-left: 5px; + padding-right: 5px; + position: relative; } + div.headerBar input[type=checkbox].css-checkbox { + display: none; } + div.headerBar input[type=checkbox].css-checkbox + label.css-label { + padding-left: 20px; + margin-top: 0px; + height: 15px; + display: inline-block; + background-repeat: no-repeat; + background-position: 0 0; + font-size: 15px; + vertical-align: middle; + cursor: pointer; } + div.headerBar input[type=checkbox].css-checkbox:checked + label.css-label { + background-position: 0 -15px; } + div.headerBar input[type="radio"] { + display: none; } + div.headerBar input[type="radio"] + label span { + display: inline-block; + width: 19px; + height: 19px; + margin: -1px 4px 0 0; + vertical-align: middle; + background: url(../img/check_radio_sheet.png) -38px top no-repeat; + cursor: pointer; } + div.headerBar input[type="radio"]:checked + label span { + background: url(../img/check_radio_sheet.png) -57px top no-repeat; } + +div.headerBar a.arangoHeader, +.modal-header .arangoHeader { + color: white; + font-size: 16px; + left: 5px; + position: relative; + top: 7px; } + +div.headerBar > div.headerButtonBar { + margin: 4px 0; + margin-bottom: 0 !important; } + +div.headerBar > div.breadcrumb { + padding-left: 5px !important; } + +div.breadcrumb a.disabledBread { + color: white; } + +.arangoHeader { + font-weight: 400; } + +#transparentHeader input[type=checkbox].css-checkbox { + display: none; } + +.checkboxLabel { + margin-top: 4px; + padding-left: 0; } + +.css-label { + background-image: url(../img/dark-check-green.png); } + +.css-label-round { + background-image: url(../img/dark-check-green-round.png); } + .scenarioImage { height: 70%; width: auto; } diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css index ebec7a0a08..2d5d6f38e4 100644 --- a/js/apps/system/aardvark/frontend/scss/generated.css +++ b/js/apps/system/aardvark/frontend/scss/generated.css @@ -11,31 +11,37 @@ textarea, font-style: normal; font-weight: 300; src: local("Open Sans Light"), local("OpenSans-Light"), url("../fonts/opensans/OpenSansLight.woff") format("woff"); } + @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local("Open Sans"), local("OpenSans"), url("../fonts/opensans/OpenSans.woff") format("woff"); } + @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../fonts/opensans/OpenSansBold.woff") format("woff"); } + @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), url("../fonts/opensans/OpenSansLightItalic.woff") format("woff"); } + @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../fonts/opensans/OpenSansItalic.woff") format("woff"); } + @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../fonts/opensans/OpenSansBoldItalic.woff") format("woff"); } + ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div.tile, div.bigtile, div.tile a span.add-Icon, div.bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboardModal { float: left; } @@ -111,7 +117,7 @@ nav.navbar, footer.footer { background-color: #f87c0f; } .button-inactive { - background-color: lightgray; } + background-color: lightgrey; } .button-inactive:hover { background-color: gray; } @@ -979,6 +985,32 @@ div.headerBar { padding-left: 5px; padding-right: 5px; position: relative; } + div.headerBar input[type=checkbox].css-checkbox { + display: none; } + div.headerBar input[type=checkbox].css-checkbox + label.css-label { + padding-left: 20px; + margin-top: 0px; + height: 15px; + display: inline-block; + background-repeat: no-repeat; + background-position: 0 0; + font-size: 15px; + vertical-align: middle; + cursor: pointer; } + div.headerBar input[type=checkbox].css-checkbox:checked + label.css-label { + background-position: 0 -15px; } + div.headerBar input[type="radio"] { + display: none; } + div.headerBar input[type="radio"] + label span { + display: inline-block; + width: 19px; + height: 19px; + margin: -1px 4px 0 0; + vertical-align: middle; + background: url(../img/check_radio_sheet.png) -38px top no-repeat; + cursor: pointer; } + div.headerBar input[type="radio"]:checked + label span { + background: url(../img/check_radio_sheet.png) -57px top no-repeat; } div.headerBar a.arangoHeader, .modal-header .arangoHeader { @@ -1001,6 +1033,19 @@ div.breadcrumb a.disabledBread { .arangoHeader { font-weight: 400; } +#transparentHeader input[type=checkbox].css-checkbox { + display: none; } + +.checkboxLabel { + margin-top: 4px; + padding-left: 0; } + +.css-label { + background-image: url(../img/dark-check-green.png); } + +.css-label-round { + background-image: url(../img/dark-check-green-round.png); } + .navlogo .stat_cpu { height: 26px; margin-top: 1px; @@ -1135,7 +1180,7 @@ div.breadcrumb a.disabledBread { width: 100%; } .user-menu-img { - background-color: lightgray; + background-color: lightgrey; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json index 7172e3d74c..4b592c6bf3 100644 --- a/js/apps/system/aardvark/manifest.json +++ b/js/apps/system/aardvark/manifest.json @@ -143,7 +143,6 @@ "frontend/css/graphlayout.css", "frontend/css/datatables.css", "frontend/css/api.css", - "frontend/css/headerBar.css", "frontend/css/screenSizes.css", "frontend/css/jsoneditor.css", "frontend/ttf/arangofont/style.css"