diff --git a/src/emc-metalnx-shared/src/main/resources/static/css/global.css b/src/emc-metalnx-shared/src/main/resources/static/css/global.css new file mode 100644 index 000000000..d79560d55 --- /dev/null +++ b/src/emc-metalnx-shared/src/main/resources/static/css/global.css @@ -0,0 +1,26 @@ +#hdr-junctiontitle { + background:none; + bottom:9px; + font-family:"Open Sans", sans-serif; + font-size:35px; + font-weight:300; + left:14px; + margin:0; + padding:0; + position:absolute; + text-decoration:none; + width:100%; +} + +#hdr-junctiontitle a { + color:white; + display:block; + margin:0; + padding:0; + text-decoration:none; + width:350px; +} + +#page-wrapper { + font-size: 15px; +} diff --git a/src/emc-metalnx-shared/src/main/resources/static/css/styles-login.css b/src/emc-metalnx-shared/src/main/resources/static/css/styles-login.css index 41318e1b9..0773c1eda 100644 --- a/src/emc-metalnx-shared/src/main/resources/static/css/styles-login.css +++ b/src/emc-metalnx-shared/src/main/resources/static/css/styles-login.css @@ -2,21 +2,15 @@ body{ height: 100vh; margin:0; overflow: hidden; - background: #2c95dd ; /* Old browsers */ - background: -moz-linear-gradient(-45deg, #ffffff 0%, #2c95dd 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff ), color-stop(100%,#2c95dd)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(-45deg, #ffffff 0%,#2c95dd 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(-45deg, #ffffff 0%,#2c95dd 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(-45deg, #ffffff 0%,#2c95dd 100%); /* IE10+ */ - background: linear-gradient(135deg, #ffffff 0%,#2c95dd 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff ', endColorstr='#2c95dd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + background-color: #51514c; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff ', endColorstr='#7f7f7f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ ::-webkit-input-placeholder { color: #4E546D } } p{ - color: #5B5E6F; + color: #333333; font-size:10px; text-align:left; } @@ -32,7 +26,7 @@ p{ transform:rotateX(0deg); position:relative; width:360px; - border-top: 2px solid #2c95dd; + border-top: 2px solid #6c6c63; height:450px; position:absolute; left:0; @@ -41,18 +35,11 @@ p{ top:0; bottom:0; padding:100px 40px 40px 40px; - background: #35394a; /* Old browsers */ - background: -moz-linear-gradient(45deg, #35394a 0%, #1f222e 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#35394a), color-stop(100%,#1f222e)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* IE10+ */ - background: linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + background: #333333; /* Old browsers */ } .login_title { - color:rgb(175, 177, 190); + color:#0b3e73; text-align:left; font-size:20px; padding-bottom: 40px; @@ -66,16 +53,16 @@ p{ } input[type='password'] { - color:#2c95dd !important; } input[type="submit"] { border-radius:50px; + background: #0b3e73; } input[type="submit"]:hover { color:white; - background:#2c95dd ; + background:#0b3e73 ; cursor:pointer; transition-property:background,color; transition-duration:.2s; @@ -84,13 +71,13 @@ input[type="submit"]:hover { input[type="submit"]:focus{ box-shadow:none; outline:none; + background-color: #0b3e73; } input[type='text'],input[type='password']{ - color: #2c95dd; width: 100%; + color: #333333; margin-top:-2px; - background: rgb(50, 54, 74); left: 0; right: 0; padding: 10px 40px; @@ -127,15 +114,16 @@ input{ background:transparent; font-family: verdana, sans-serif; padding:10px 50px; - border:2px solid #2c95dd ; + border:2px solid #f7f5f7 ; color: #ffffff ; + background-color: f7f5f7; transition-property:background,color; transition-duration:.2s; } .login_msgs { bottom: 40px; - color: #c0605e; + color: #cde9ed; } .login_msgs, .login_copyright { @@ -151,7 +139,7 @@ input{ .login_copyright span { font-size: 10px; - color: #636b8b; + color: #6c6c63; } .icon{ @@ -160,7 +148,6 @@ input{ left: 36px; top: 15px; opacity:1; - color: #a4a6b5; font-size: 16px; } @@ -170,7 +157,7 @@ input{ right: 15px; top: 15px; opacity:1; - color: #2c95dd; + color: #6c6c63; font-size: 16px; } @@ -179,16 +166,16 @@ img { } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: #a4a6b5; + color: #6c6c63; } ::-moz-placeholder { /* Firefox 19+ */ - color: #a4a6b5; + color: #6c6c63; } :-ms-input-placeholder { /* IE 10+ */ - color: #a4a6b5; + color: #6c6c63; } :-moz-placeholder { /* Firefox 18- */ - color: #a4a6b5; + color: #6c6c63; } #haveTicketBtn, #login-link { @@ -202,4 +189,4 @@ img { #login-link { margin-left: 99px; -} \ No newline at end of file +} diff --git a/src/emc-metalnx-shared/src/main/resources/static/css/styles.css b/src/emc-metalnx-shared/src/main/resources/static/css/styles.css index bacaf027d..d00496937 100644 --- a/src/emc-metalnx-shared/src/main/resources/static/css/styles.css +++ b/src/emc-metalnx-shared/src/main/resources/static/css/styles.css @@ -39,13 +39,13 @@ body { } #uploadStatusIcon .fa.fa-tasks.white-icon{ - font-size:18px; + font-size:1.0em; } #uploadStatusIcon .badge{ left: -10px; top: -8px; - font-size: 10px; + font-size: 1.0em; padding: 3px 3px; position: relative; } @@ -91,12 +91,12 @@ body { } .panel-primary { - border-color: #2c95dd; + border-color: #046383; } .panel-primary .panel-heading { - border-color: #2c95dd; - background-color: #2c95dd; + border-color: #046383; + background-color: #046383; } .panel-success { @@ -170,6 +170,29 @@ table td{ opacity: 1; } +/********************** Junction Header bootstrap overrides ***************************************/ + +#searchform .btn { + padding: 0; + font-size:11px; + border-radius: 0; +} +#sitesearch { + font-size: 1.7em; + box-sizing: content-box; +} +#hdr-niehstitle{ box-sizing: content-box; } +.modal-content{ font-size: 1.5rem; } +.modal-content .modal-title {color: #fff;} +.pagination>.active>a { + background-color: #046383; + border-color: #046383; +} +.dashboard-page-title{ color: #046383; } +footer.row{ + background-color: #363633; + margin: 0; +} /**************************************** Tooltips ***********************************************/ .tooltip.in { opacity: 1; @@ -225,7 +248,7 @@ table td{ /**************************************** Dashboard ***********************************************/ .progress-bar-success { - background-color: #2c95dd; + background-color: #046383; border: 1px solid #eeeeee; border-radius: 4px; } @@ -243,7 +266,7 @@ table td{ } #storageChart .arc{ - fill: #3580BD; + fill: #046383; } #numberOfFilesDiv { @@ -296,7 +319,7 @@ h3.collection-details float: left; width: 58px; line-height: 26px; - font-size: 11px; + font-size: 1em; color: #ffffff; text-align: center; cursor: pointer; @@ -401,7 +424,7 @@ h3.collection-details } .bookmarksList i { - color: #428bca; + color: #046383; } /************************************* Resources By Server ****************************************/ @@ -447,7 +470,7 @@ h3.collection-details /********************************** User form - Permissions ***************************************/ .inheritance-checked { - color: #2c95dd; + color: #046383; } @@ -589,7 +612,7 @@ div.dataTables_wrapper .row .col-md-12:first-child > div.dataTables_processing.l } div.dataTables_wrapper .row .col-md-12:first-child > div{ - background-color: #5faee5; + background-color: #6c6c63; height: 50px; padding-top: 10px; color:white; @@ -605,8 +628,8 @@ div.dataTables_wrapper .row:first-child .col-md-12:first-child > div:last-child div.dataTables_wrapper div.col-md-12 > .dataTables_info { text-align: right; - font-size: 12px; - background-color: #5faee5; + font-size: 1em; + background-color: #333333; color: white; padding-right: 15px; padding-top: 0; @@ -617,7 +640,7 @@ div.dataTables_wrapper div.col-md-12 > .dataTables_info { margin-bottom: 0px !important; } table.dataTable { - border: 1px solid #c8dff7; + border: 1px solid #333333; } div.dataTables_wrapper .download_csv{ margin-bottom: 10px; @@ -641,7 +664,7 @@ div.dataTables_wrapper .toolbar .input-group{ } .table.dataTable thead tr > th { padding: 13px; - font-size: 15px; + font-size: 1em; } .table.dataTable thead tr > th.tableCheckBoxCol { @@ -698,12 +721,12 @@ div.dataTables_wrapper .toolbar .input-group{ #templateFieldsListTable_info { text-align: left; - font-size: 14px; + font-size: 1em; padding-top: 8px; } #templateFieldsList .requiredHeaderSpan{ - font-size:10px; + font-size:1em; font-weight: normal; margin-left: 5px; } @@ -800,12 +823,12 @@ th{ .errorMsg { color: #a94442; - font-size: 11px; + font-size: 1.1em; } .permission-enabled, .permission-icon:hover { - color: #2c95dd; + color: #046383; } .permission-disabled { @@ -815,7 +838,7 @@ th{ .permission-icon { padding-right: 4%; cursor: pointer; - font-size: 12pt; + font-size: 1.1em; } #collectionListAsync a{ @@ -826,7 +849,7 @@ th{ padding: 0; margin-right: 1%; cursor: default; - font-size: 8pt; + font-size: 1em; } #collectionListAsync .permission-icon:hover { @@ -835,11 +858,10 @@ th{ } #collectionListAsync .permission-enabled:hover { - color: #2c95dd; + color: #046383; } h1.page-header { - color: #428bca; border-bottom:none; padding-bottom: 0; margin:30px 0 30px 0; @@ -896,19 +918,19 @@ h1 + span.subtitle .tt-suggestion { padding: 3px 20px; - font-size: 12pt; + font-size: 1em; line-height: 24px; } .tt-suggestion:hover { cursor: pointer; color: #fff; - background-color: #2c95dd; + background-color: #046383; } .tt-suggestion.tt-cursor { color: #fff; - background-color: #2c95dd; + background-color: #046383; } .tt-suggestion p { @@ -999,7 +1021,7 @@ span .label { } .breadcrumb{ - font-size: 17px; + font-size: 1.1em; padding: 7px 15px 0 7px;; background-color: #fff; border-radius: 0; @@ -1050,7 +1072,7 @@ span .label { background-color: #f7fafe; border-radius: 0; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; - font-size: 15px; + font-size: 1em; width: 100%; height:38px; padding-left: 5px; @@ -1067,7 +1089,7 @@ span .label { } #breadcrumbStar i, #breadcrumbHome i{ - font-size: 20px; + font-size: 1.1em; padding-right: 5px; } @@ -1124,19 +1146,19 @@ ul{ .btn.btn-properties>i{ margin-top:5px; - font-size:15px; + font-size:1em; } .dropdown-menu>li>a { padding: 3px 10px; - font-size: 13px; + font-size: 1em; color: #337ab7; vertical-align: middle; } /* breadcrumb - search results */ .breadcrumb.mlx{ - font-size:13px; + font-size:1em; background-color:#f2f6f9; float:right; margin-bottom:0; @@ -1170,7 +1192,7 @@ a.page-hint { } .property-title { - color: #428bca; + color: #046383; float:left; margin-left: 20px; margin-right: 5px; @@ -1205,12 +1227,7 @@ a.page-hint { margin-top:5px; padding-top: 10px; } -#actionUpload > a{ - width:50px; - height:40px; - margin-top:5px; - display: flex; -} + #showCollectionFormBtn{ margin-left: 5px; @@ -1223,13 +1240,10 @@ a.page-hint { float:left; } #showCollectionFormBtn > span i.icon-inside { - color: #428bca; + color: #046383; margin-top: 2px; } -#showCollectionFormBtn span.fa-stack { - font-size: 21px; - margin-top:3px; -} + #uploadIcon div.btnLabel, #showCollectionFormBtn div.btnLabel { padding-top: 4px; @@ -1251,18 +1265,6 @@ a.page-hint { justify-content:center; } -#uploadIcon > i{ - font-size: 21px; - margin-right:3px; - margin-top:3px; -} - -#showCollectionFormBtn > i{ - font-size: 21px; - margin-right:3px; - margin-top:3px; -} - .panel-info{ padding: 15px; background-color: #f2f6f9; @@ -1274,7 +1276,7 @@ a.page-hint { } .panel-info > .name { - font-size: 15px; + font-size: 1em; margin-bottom: 10px; } @@ -1322,7 +1324,7 @@ div.dataTables_wrapper .dataTables_length{ } div.dataTables_wrapper .dataTables_length select{ width:65px !important; - font-size:12px; + font-size:1em; margin-right:10px; height:35px; } @@ -1379,7 +1381,7 @@ alert-dialog { overflow: auto; } .modal .modal-header{ - background-color: #428bca; + background-color: #046383; color: #fff; border-radius: 5px 5px 0 0; } @@ -1412,9 +1414,15 @@ alert-dialog { color: #777; } +.btn-link { color: #046383;} +.btn-link:hover, .btn-link:active, .btn-link:focus, .btn-link:visited { color: #0b3e73;} + .btn-primary, .panel-primary > .panel-heading { - background: #2c95dd; - border-color: #2c95dd; + background: #046383; + border-color: #0b3e73; +} +.btn-primary:visited, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { + color:#fff; } .btn-primary:hover { @@ -1422,11 +1430,11 @@ alert-dialog { } .navbar{ - background: #2c95dd; + background: #7f7f7f; } .navbar-toggle{ - background: #2c95dd; + background: #7f7f7f; border: 0; } @@ -1451,13 +1459,20 @@ alert-dialog { #page-wrapper:last-child, #page-wrapper-tickets:last-child{ margin-bottom: 10%; } +.nav .open>a.dropdown-toggle{ + background-color: #35394a; +} +.metalnx-topnav .dropdown-toggle{ + text-decoration: none; +} -.navbar-top-links-text { +.dropdown-toggle .navbar-top-links-text, .dropdown-toggle .fa-user { color: #fff; } .navbar-top-links li { display: inline-block; + } .navbar-top-links li:last-child { @@ -1476,18 +1491,12 @@ alert-dialog { } i.fa-square-o.menu-icon{ - font-size: 42px; + font-size: 3em; } i.fa-user.menu-icon{ - font-size: 25px; + font-size: 2em; } -#uploadStatusIcon{ - padding-right: 0; - position: absolute; - top: 0; - right: 100px; -} #uploadStatusIcon li a{ color: #656363; padding-right: 0; @@ -1497,7 +1506,7 @@ i.fa-user.menu-icon{ ul.navbar-top-links > li.dropdown > .dropdown-toggle:hover, ul.navbar-top-links > li.dropdown > .dropdown-toggle:focus, ul.navbar-top-links > li.open > a.dropdown-toggle{ - background-color: #2c95dd; + background-color: #046383; box-shadow: inset 0 3px 10px rgba(0,0,0,.125); border-top: none; border-bottom: none; @@ -1542,7 +1551,7 @@ ul.navbar-top-links > li.open > a.dropdown-toggle{ .navbar-top-links .dropdown-user { right: 0; left: auto; - background-color: #2c95dd; + background-color: #046383; margin-top: 0; } .navbar-top-links .dropdown-user > li > a{ @@ -1594,7 +1603,7 @@ ul.navbar-top-links > li.open > a.dropdown-toggle{ .sidebar ul li a:hover, .sidebar ul li a:focus, .sidebar ul li a.active{ background: #35394a; - border-right: 6px solid #2c95dd; + border-right: 6px solid #046383; } .sidebar .arrow { @@ -1626,6 +1635,7 @@ ul.navbar-top-links > li.open > a.dropdown-toggle{ text-align: right; width:100%; bottom: -6px; + font-size:1.5em; } .navbar-default .navbar-toggle:hover, @@ -1675,7 +1685,7 @@ a.btn-primary > i { } #uploadForm > .text-right{ - font-size:11px; + font-size:1em; margin-bottom:1px; } #uploadForm > .well{ @@ -1767,12 +1777,12 @@ a.btn-primary > i { } #ui-datepicker-div{ - font-size:14px; + font-size:1em; } footer { text-align: center; - font-size:12px; + font-size:1em; width: 100%; color: #777; margin-top: -20px; @@ -1797,7 +1807,7 @@ footer { margin-bottom: 0; } .grid-status-title.normal{ - color: #5CB85C; + color: #3b834f; } .grid-status-title.error{ color:#d9534f; @@ -1818,17 +1828,14 @@ footer { #totalStorageSum table > tbody > tr > td:nth-child(2) > span { margin-left: 3px; } -.resourceMapDashboardWrapper{ - height: 630px; -} +.resourceMapDashboardWrapper{} + .resourceMapDashboardWrapper .panel{ border-radius: 5px; margin-bottom: 10px; border: 1px solid #CBDFF7; } -.resourceMapDashboardWrapper .panel-body{ - height: 610px; -} +.resourceMapDashboardWrapper .panel-body{} .resourceMapDashboardWrapper #resourceInfo{ z-index:1; @@ -1862,29 +1869,33 @@ footer { border-top: 0px solid #DDD; border-bottom: 1px solid #DDD; } -#isilonServerListPanel, #isilonServerListPanel .panel, #nonResourceServerListPanel, #nonResourceServerListPanel .panel, #msiAPIVersionPanel .panel{ - height: 165px; +#isilonServerListPanel, #isilonServerListPanel .panel, #nonResourceServerListPanel, #nonResourceServerListPanel .panel{ + height: auto; } .dashboardCard { - color: #3580bd; + color: #046383; border-radius: 0px; } .dashboardCard .panel-body{ text-align:center; padding: 0px; } +.dashboardCard .panel-body div:nth-child(3){ + margin-top: 10px; + font-size: 1.2rem; +} .dashboardCard .panel-body .cardIconWrapper{ - background-color: #3580bd; + background-color: #046383; position: absolute; height: 65%; top: 0px; left: 16px; width: 23%; border-top-left-radius: 5px; - border-bottom-left-radius: 5px; + border-bottom-left-radius: 5px; } .dashboardCard .panel-body .cardIcon{ - font-size: 18pt; + font-size: 1em; padding-top: 9px; color: #fff; } @@ -1895,12 +1906,13 @@ footer { .dashboardCard .panel-body .fa-stack{ width: 25%; padding-top: 3px; - font-size: 13pt; + font-size: 1em; } .dashboardCard .btn-link{ margin-right: 14px; margin-top: 1px; - font-size: 13pt; + font-size: 1em; + color: #046383; } #serverListPanel .dashboardServersList{ width: 100%; @@ -2035,7 +2047,7 @@ form.registerForm .bootstrap-tagsinput { } .resulting-permission { - font-size: 12px; + font-size: 1em; color: gray; padding-left: 5px; } @@ -2085,12 +2097,12 @@ form.registerForm .bootstrap-tagsinput { } .sidebar ul li.menu-group-title{ padding: 1px 0; - background: #3580bd; - font-size: .7em; + background: #046383; + font-size: .9em; color: #f9f9f9; width: 100%; text-align: center; - border: 1px solid #3580bd; + border: 1px solid #046383; font-family: Verdana, Geneva, sans-serif; } .scrollable-table { @@ -2159,12 +2171,12 @@ form.registerForm .bootstrap-tagsinput { } #side-menu li a span.fa-stack.fa-lg { - font-size:20px; + font-size:1.1em; } #side-menu li a span.fa-stack.fa-lg > .fa-folder.fa-stack-2x { - font-size:40px; + font-size:3em; } .sidebar ul li a { @@ -2173,15 +2185,15 @@ form.registerForm .bootstrap-tagsinput { } .sidebar ul li a i{ display: block; - font-size: 30px; + font-size: 2em; } .sidebar ul li:last-child a { border-bottom-style: none; } .sidebar ul li.menu-group-title{ padding: 1px 0; - background: #3580bd; - font-size: .7em; + background: #046383; + font-size: .9em; color: #f9f9f9; width: 100%; text-align: center; @@ -2238,7 +2250,6 @@ form.registerForm .bootstrap-tagsinput { /* Button btn-default*/ .btn-default { - color: #2c95dd; background-color: #fff; border-color: #CBDFF7; } @@ -2249,7 +2260,7 @@ form.registerForm .bootstrap-tagsinput { .btn-default.active, .open>.dropdown-toggle.btn-default { - color: #2c95dd; + color: #046383; background-color: #ffffff; border-color: #CBDFF7; } @@ -2324,3 +2335,17 @@ form.registerForm .bootstrap-tagsinput { #existingIpIcon{ left: 360px; } + +#metalnx-topnav { + font-size: 15px; + background-color: #35394a; +} + +#metalnx-topnav>li>a:hover, #metalnx-topnav>li>a:focus { + background-color: #6c6c63; +} + +.content_menu{ + height:auto; + overflow:auto; + } diff --git a/src/emc-metalnx-ui-admin/src/main/resources/views/defaultTemplate.html b/src/emc-metalnx-ui-admin/src/main/resources/views/defaultTemplate.html index dd7c224be..0da7cfd8e 100644 --- a/src/emc-metalnx-ui-admin/src/main/resources/views/defaultTemplate.html +++ b/src/emc-metalnx-ui-admin/src/main/resources/views/defaultTemplate.html @@ -46,6 +46,9 @@ + +