diff options
Diffstat (limited to 'openo-portal/portal-common/src/main/webapp/common/css')
37 files changed, 22712 insertions, 0 deletions
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/animate.css b/openo-portal/portal-common/src/main/webapp/common/css/animate.css new file mode 100644 index 00000000..a413752c --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/animate.css @@ -0,0 +1,3278 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@charset "UTF-8"; +/* +Animate.css - http://daneden.me/animate +Licensed under the MIT license + +Copyright (c) 2013 Daniel Eden + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +*/ +body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ + -webkit-backface-visibility: hidden; +} +.animated { + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.hinge { + -webkit-animation-duration: 2s; + -moz-animation-duration: 2s; + -o-animation-duration: 2s; + animation-duration: 2s; +} + +@-webkit-keyframes flash { + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} +} + +@-moz-keyframes flash { + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} +} + +@-o-keyframes flash { + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} +} + +@keyframes flash { + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} +} + +.flash { + -webkit-animation-name: flash; + -moz-animation-name: flash; + -o-animation-name: flash; + animation-name: flash; +} +@-webkit-keyframes shake { + 0%, 100% {-webkit-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} +} + +@-moz-keyframes shake { + 0%, 100% {-moz-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} +} + +@-o-keyframes shake { + 0%, 100% {-o-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} +} + +@keyframes shake { + 0%, 100% {transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} + 20%, 40%, 60%, 80% {transform: translateX(10px);} +} + +.shake { + -webkit-animation-name: shake; + -moz-animation-name: shake; + -o-animation-name: shake; + animation-name: shake; +} +@-webkit-keyframes bounce { + 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} + 40% {-webkit-transform: translateY(-30px);} + 60% {-webkit-transform: translateY(-15px);} +} + +@-moz-keyframes bounce { + 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} + 40% {-moz-transform: translateY(-30px);} + 60% {-moz-transform: translateY(-15px);} +} + +@-o-keyframes bounce { + 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} + 40% {-o-transform: translateY(-30px);} + 60% {-o-transform: translateY(-15px);} +} +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} + 40% {transform: translateY(-30px);} + 60% {transform: translateY(-15px);} +} + +.bounce { + -webkit-animation-name: bounce; + -moz-animation-name: bounce; + -o-animation-name: bounce; + animation-name: bounce; +} +@-webkit-keyframes tada { + 0% {-webkit-transform: scale(1);} + 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} + 100% {-webkit-transform: scale(1) rotate(0);} +} + +@-moz-keyframes tada { + 0% {-moz-transform: scale(1);} + 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} + 100% {-moz-transform: scale(1) rotate(0);} +} + +@-o-keyframes tada { + 0% {-o-transform: scale(1);} + 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} + 100% {-o-transform: scale(1) rotate(0);} +} + +@keyframes tada { + 0% {transform: scale(1);} + 10%, 20% {transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} + 100% {transform: scale(1) rotate(0);} +} + +.tada { + -webkit-animation-name: tada; + -moz-animation-name: tada; + -o-animation-name: tada; + animation-name: tada; +} +@-webkit-keyframes swing { + 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } + 20% { -webkit-transform: rotate(15deg); } + 40% { -webkit-transform: rotate(-10deg); } + 60% { -webkit-transform: rotate(5deg); } + 80% { -webkit-transform: rotate(-5deg); } + 100% { -webkit-transform: rotate(0deg); } +} + +@-moz-keyframes swing { + 20% { -moz-transform: rotate(15deg); } + 40% { -moz-transform: rotate(-10deg); } + 60% { -moz-transform: rotate(5deg); } + 80% { -moz-transform: rotate(-5deg); } + 100% { -moz-transform: rotate(0deg); } +} + +@-o-keyframes swing { + 20% { -o-transform: rotate(15deg); } + 40% { -o-transform: rotate(-10deg); } + 60% { -o-transform: rotate(5deg); } + 80% { -o-transform: rotate(-5deg); } + 100% { -o-transform: rotate(0deg); } +} + +@keyframes swing { + 20% { transform: rotate(15deg); } + 40% { transform: rotate(-10deg); } + 60% { transform: rotate(5deg); } + 80% { transform: rotate(-5deg); } + 100% { transform: rotate(0deg); } +} + +.swing { + -webkit-transform-origin: top center; + -moz-transform-origin: top center; + -o-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + -moz-animation-name: swing; + -o-animation-name: swing; + animation-name: swing; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes wobble { + 0% { -webkit-transform: translateX(0%); } + 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } + 30% { -webkit-transform: translateX(20%) rotate(3deg); } + 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } + 60% { -webkit-transform: translateX(10%) rotate(2deg); } + 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } + 100% { -webkit-transform: translateX(0%); } +} + +@-moz-keyframes wobble { + 0% { -moz-transform: translateX(0%); } + 15% { -moz-transform: translateX(-25%) rotate(-5deg); } + 30% { -moz-transform: translateX(20%) rotate(3deg); } + 45% { -moz-transform: translateX(-15%) rotate(-3deg); } + 60% { -moz-transform: translateX(10%) rotate(2deg); } + 75% { -moz-transform: translateX(-5%) rotate(-1deg); } + 100% { -moz-transform: translateX(0%); } +} + +@-o-keyframes wobble { + 0% { -o-transform: translateX(0%); } + 15% { -o-transform: translateX(-25%) rotate(-5deg); } + 30% { -o-transform: translateX(20%) rotate(3deg); } + 45% { -o-transform: translateX(-15%) rotate(-3deg); } + 60% { -o-transform: translateX(10%) rotate(2deg); } + 75% { -o-transform: translateX(-5%) rotate(-1deg); } + 100% { -o-transform: translateX(0%); } +} + +@keyframes wobble { + 0% { transform: translateX(0%); } + 15% { transform: translateX(-25%) rotate(-5deg); } + 30% { transform: translateX(20%) rotate(3deg); } + 45% { transform: translateX(-15%) rotate(-3deg); } + 60% { transform: translateX(10%) rotate(2deg); } + 75% { transform: translateX(-5%) rotate(-1deg); } + 100% { transform: translateX(0%); } +} + +.wobble { + -webkit-animation-name: wobble; + -moz-animation-name: wobble; + -o-animation-name: wobble; + animation-name: wobble; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes pulse { + 0% { -webkit-transform: scale(1); } + 50% { -webkit-transform: scale(1.1); } + 100% { -webkit-transform: scale(1); } +} +@-moz-keyframes pulse { + 0% { -moz-transform: scale(1); } + 50% { -moz-transform: scale(1.1); } + 100% { -moz-transform: scale(1); } +} +@-o-keyframes pulse { + 0% { -o-transform: scale(1); } + 50% { -o-transform: scale(1.1); } + 100% { -o-transform: scale(1); } +} +@keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +.pulse { + -webkit-animation-name: pulse; + -moz-animation-name: pulse; + -o-animation-name: pulse; + animation-name: pulse; +} +@-webkit-keyframes flip { + 0% { + -webkit-transform: perspective(400px) rotateY(0); + -webkit-animation-timing-function: ease-out; + } + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); + -webkit-animation-timing-function: ease-out; + } + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -webkit-animation-timing-function: ease-in; + } + 80% { + -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); + -webkit-animation-timing-function: ease-in; + } + 100% { + -webkit-transform: perspective(400px) scale(1); + -webkit-animation-timing-function: ease-in; + } +} +@-moz-keyframes flip { + 0% { + -moz-transform: perspective(400px) rotateY(0); + -moz-animation-timing-function: ease-out; + } + 40% { + -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); + -moz-animation-timing-function: ease-out; + } + 50% { + -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -moz-animation-timing-function: ease-in; + } + 80% { + -moz-transform: perspective(400px) rotateY(360deg) scale(.95); + -moz-animation-timing-function: ease-in; + } + 100% { + -moz-transform: perspective(400px) scale(1); + -moz-animation-timing-function: ease-in; + } +} +@-o-keyframes flip { + 0% { + -o-transform: perspective(400px) rotateY(0); + -o-animation-timing-function: ease-out; + } + 40% { + -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); + -o-animation-timing-function: ease-out; + } + 50% { + -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -o-animation-timing-function: ease-in; + } + 80% { + -o-transform: perspective(400px) rotateY(360deg) scale(.95); + -o-animation-timing-function: ease-in; + } + 100% { + -o-transform: perspective(400px) scale(1); + -o-animation-timing-function: ease-in; + } +} +@keyframes flip { + 0% { + transform: perspective(400px) rotateY(0); + animation-timing-function: ease-out; + } + 40% { + transform: perspective(400px) translateZ(150px) rotateY(170deg); + animation-timing-function: ease-out; + } + 50% { + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + animation-timing-function: ease-in; + } + 80% { + transform: perspective(400px) rotateY(360deg) scale(.95); + animation-timing-function: ease-in; + } + 100% { + transform: perspective(400px) scale(1); + animation-timing-function: ease-in; + } +} + +.flip { + -webkit-backface-visibility: visible !important; + -webkit-animation-name: flip; + -moz-backface-visibility: visible !important; + -moz-animation-name: flip; + -o-backface-visibility: visible !important; + -o-animation-name: flip; + backface-visibility: visible !important; + animation-name: flip; +} +@-webkit-keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateX(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} +@-moz-keyframes flipInX { + 0% { + -moz-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -moz-transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -moz-transform: perspective(400px) rotateX(10deg); + } + + 100% { + -moz-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} +@-o-keyframes flipInX { + 0% { + -o-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -o-transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -o-transform: perspective(400px) rotateX(10deg); + } + + 100% { + -o-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} +@keyframes flipInX { + 0% { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + transform: perspective(400px) rotateX(-10deg); + } + + 70% { + transform: perspective(400px) rotateX(10deg); + } + + 100% { + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + -webkit-animation-name: flipInX; + -moz-backface-visibility: visible !important; + -moz-animation-name: flipInX; + -o-backface-visibility: visible !important; + -o-animation-name: flipInX; + backface-visibility: visible !important; + animation-name: flipInX; +} +@-webkit-keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +@-moz-keyframes flipOutX { + 0% { + -moz-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + -moz-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +@-o-keyframes flipOutX { + 0% { + -o-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + -o-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +@keyframes flipOutX { + 0% { + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +.flipOutX { + -webkit-animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + -moz-animation-name: flipOutX; + -moz-backface-visibility: visible !important; + -o-animation-name: flipOutX; + -o-backface-visibility: visible !important; + animation-name: flipOutX; + backface-visibility: visible !important; +} +@-webkit-keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateY(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} +@-moz-keyframes flipInY { + 0% { + -moz-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -moz-transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -moz-transform: perspective(400px) rotateY(10deg); + } + + 100% { + -moz-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} +@-o-keyframes flipInY { + 0% { + -o-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -o-transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -o-transform: perspective(400px) rotateY(10deg); + } + + 100% { + -o-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} +@keyframes flipInY { + 0% { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + transform: perspective(400px) rotateY(-10deg); + } + + 70% { + transform: perspective(400px) rotateY(10deg); + } + + 100% { + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + -webkit-animation-name: flipInY; + -moz-backface-visibility: visible !important; + -moz-animation-name: flipInY; + -o-backface-visibility: visible !important; + -o-animation-name: flipInY; + backface-visibility: visible !important; + animation-name: flipInY; +} +@-webkit-keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +@-moz-keyframes flipOutY { + 0% { + -moz-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + -moz-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +@-o-keyframes flipOutY { + 0% { + -o-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + -o-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +@keyframes flipOutY { + 0% { + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} + +.flipOutY { + -webkit-backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + -moz-backface-visibility: visible !important; + -moz-animation-name: flipOutY; + -o-backface-visibility: visible !important; + -o-animation-name: flipOutY; + backface-visibility: visible !important; + animation-name: flipOutY; +} +@-webkit-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +@-moz-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +@-o-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +@keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +.fadeIn { + -webkit-animation-name: fadeIn; + -moz-animation-name: fadeIn; + -o-animation-name: fadeIn; + animation-name: fadeIn; +} +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInUp { + 0% { + opacity: 0; + -moz-transform: translateY(20px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInUp { + 0% { + opacity: 0; + -o-transform: translateY(20px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInUp { + -webkit-animation-name: fadeInUp; + -moz-animation-name: fadeInUp; + -o-animation-name: fadeInUp; + animation-name: fadeInUp; +} +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInDown { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + -moz-animation-name: fadeInDown; + -o-animation-name: fadeInDown; + animation-name: fadeInDown; +} +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes fadeInLeft { + 0% { + opacity: 0; + -moz-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-o-keyframes fadeInLeft { + 0% { + opacity: 0; + -o-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + transform: translateX(-20px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + -moz-animation-name: fadeInLeft; + -o-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes fadeInRight { + 0% { + opacity: 0; + -moz-transform: translateX(20px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-o-keyframes fadeInRight { + 0% { + opacity: 0; + -o-transform: translateX(20px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} + +@keyframes fadeInRight { + 0% { + opacity: 0; + transform: translateX(20px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInRight { + -webkit-animation-name: fadeInRight; + -moz-animation-name: fadeInRight; + -o-animation-name: fadeInRight; + animation-name: fadeInRight; +} +@-webkit-keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInUpBig { + 0% { + opacity: 0; + -moz-transform: translateY(2000px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInUpBig { + 0% { + opacity: 0; + -o-transform: translateY(2000px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInUpBig { + 0% { + opacity: 0; + transform: translateY(2000px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + -moz-animation-name: fadeInUpBig; + -o-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; +} +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInDownBig { + 0% { + opacity: 0; + -moz-transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInDownBig { + 0% { + opacity: 0; + -o-transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInDownBig { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + -moz-animation-name: fadeInDownBig; + -o-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} +@-webkit-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} +@-moz-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -moz-transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} +@-o-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -o-transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + transform: translateX(-2000px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + -moz-animation-name: fadeInLeftBig; + -o-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; +} +@-webkit-keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes fadeInRightBig { + 0% { + opacity: 0; + -moz-transform: translateX(2000px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-o-keyframes fadeInRightBig { + 0% { + opacity: 0; + -o-transform: translateX(2000px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} + +@keyframes fadeInRightBig { + 0% { + opacity: 0; + transform: translateX(2000px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + -moz-animation-name: fadeInRightBig; + -o-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} +@-webkit-keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +@-moz-keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +@-o-keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +@keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +.fadeOut { + -webkit-animation-name: fadeOut; + -moz-animation-name: fadeOut; + -o-animation-name: fadeOut; + animation-name: fadeOut; +} +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + } +} +@-moz-keyframes fadeOutUp { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(-20px); + } +} +@-o-keyframes fadeOutUp { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(-20px); + } +} +@keyframes fadeOutUp { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-20px); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + -moz-animation-name: fadeOutUp; + -o-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + } +} + +@-moz-keyframes fadeOutDown { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(20px); + } +} + +@-o-keyframes fadeOutDown { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(20px); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(20px); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + -moz-animation-name: fadeOutDown; + -o-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + } +} + +@-moz-keyframes fadeOutLeft { + 0% { + opacity: 1; + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(-20px); + } +} + +@-o-keyframes fadeOutLeft { + 0% { + opacity: 1; + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(-20px); + } +} + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(-20px); + } +} + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + -moz-animation-name: fadeOutLeft; + -o-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + } +} + +@-moz-keyframes fadeOutRight { + 0% { + opacity: 1; + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(20px); + } +} + +@-o-keyframes fadeOutRight { + 0% { + opacity: 1; + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(20px); + } +} + +@keyframes fadeOutRight { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(20px); + } +} + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + -moz-animation-name: fadeOutRight; + -o-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} +@-webkit-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } +} + +@-moz-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(-2000px); + } +} + +@-o-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(-2000px); + } +} + +@keyframes fadeOutUpBig { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-2000px); + } +} + +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + -moz-animation-name: fadeOutUpBig; + -o-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} +@-webkit-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + } +} + +@-moz-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(2000px); + } +} + +@-o-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(2000px); + } +} + +@keyframes fadeOutDownBig { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(2000px); + } +} + +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + -moz-animation-name: fadeOutDownBig; + -o-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} +@-webkit-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } +} + +@-moz-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(-2000px); + } +} + +@-o-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(-2000px); + } +} + +@keyframes fadeOutLeftBig { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(-2000px); + } +} + +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + -moz-animation-name: fadeOutLeftBig; + -o-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} +@-webkit-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + } +} +@-moz-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(2000px); + } +} +@-o-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(2000px); + } +} +@keyframes fadeOutRightBig { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(2000px); + } +} + +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + -moz-animation-name: fadeOutRightBig; + -o-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} +@-webkit-keyframes bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.3); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + } + + 70% { + -webkit-transform: scale(.9); + } + + 100% { + -webkit-transform: scale(1); + } +} + +@-moz-keyframes bounceIn { + 0% { + opacity: 0; + -moz-transform: scale(.3); + } + + 50% { + opacity: 1; + -moz-transform: scale(1.05); + } + + 70% { + -moz-transform: scale(.9); + } + + 100% { + -moz-transform: scale(1); + } +} + +@-o-keyframes bounceIn { + 0% { + opacity: 0; + -o-transform: scale(.3); + } + + 50% { + opacity: 1; + -o-transform: scale(1.05); + } + + 70% { + -o-transform: scale(.9); + } + + 100% { + -o-transform: scale(1); + } +} + +@keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(.3); + } + + 50% { + opacity: 1; + transform: scale(1.05); + } + + 70% { + transform: scale(.9); + } + + 100% { + transform: scale(1); + } +} + +.bounceIn { + -webkit-animation-name: bounceIn; + -moz-animation-name: bounceIn; + -o-animation-name: bounceIn; + animation-name: bounceIn; +} +@-webkit-keyframes bounceInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(-30px); + } + + 80% { + -webkit-transform: translateY(10px); + } + + 100% { + -webkit-transform: translateY(0); + } +} +@-moz-keyframes bounceInUp { + 0% { + opacity: 0; + -moz-transform: translateY(2000px); + } + + 60% { + opacity: 1; + -moz-transform: translateY(-30px); + } + + 80% { + -moz-transform: translateY(10px); + } + + 100% { + -moz-transform: translateY(0); + } +} + +@-o-keyframes bounceInUp { + 0% { + opacity: 0; + -o-transform: translateY(2000px); + } + + 60% { + opacity: 1; + -o-transform: translateY(-30px); + } + + 80% { + -o-transform: translateY(10px); + } + + 100% { + -o-transform: translateY(0); + } +} + +@keyframes bounceInUp { + 0% { + opacity: 0; + transform: translateY(2000px); + } + + 60% { + opacity: 1; + transform: translateY(-30px); + } + + 80% { + transform: translateY(10px); + } + + 100% { + transform: translateY(0); + } +} + +.bounceInUp { + -webkit-animation-name: bounceInUp; + -moz-animation-name: bounceInUp; + -o-animation-name: bounceInUp; + animation-name: bounceInUp; +} +@-webkit-keyframes bounceInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + } + + 80% { + -webkit-transform: translateY(-10px); + } + + 100% { + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes bounceInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-2000px); + } + + 60% { + opacity: 1; + -moz-transform: translateY(30px); + } + + 80% { + -moz-transform: translateY(-10px); + } + + 100% { + -moz-transform: translateY(0); + } +} + +@-o-keyframes bounceInDown { + 0% { + opacity: 0; + -o-transform: translateY(-2000px); + } + + 60% { + opacity: 1; + -o-transform: translateY(30px); + } + + 80% { + -o-transform: translateY(-10px); + } + + 100% { + -o-transform: translateY(0); + } +} + +@keyframes bounceInDown { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + + 60% { + opacity: 1; + transform: translateY(30px); + } + + 80% { + transform: translateY(-10px); + } + + 100% { + transform: translateY(0); + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + -moz-animation-name: bounceInDown; + -o-animation-name: bounceInDown; + animation-name: bounceInDown; +} +@-webkit-keyframes bounceInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateX(30px); + } + + 80% { + -webkit-transform: translateX(-10px); + } + + 100% { + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes bounceInLeft { + 0% { + opacity: 0; + -moz-transform: translateX(-2000px); + } + + 60% { + opacity: 1; + -moz-transform: translateX(30px); + } + + 80% { + -moz-transform: translateX(-10px); + } + + 100% { + -moz-transform: translateX(0); + } +} + +@-o-keyframes bounceInLeft { + 0% { + opacity: 0; + -o-transform: translateX(-2000px); + } + + 60% { + opacity: 1; + -o-transform: translateX(30px); + } + + 80% { + -o-transform: translateX(-10px); + } + + 100% { + -o-transform: translateX(0); + } +} + +@keyframes bounceInLeft { + 0% { + opacity: 0; + transform: translateX(-2000px); + } + + 60% { + opacity: 1; + transform: translateX(30px); + } + + 80% { + transform: translateX(-10px); + } + + 100% { + transform: translateX(0); + } +} + +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + -moz-animation-name: bounceInLeft; + -o-animation-name: bounceInLeft; + animation-name: bounceInLeft; +} +@-webkit-keyframes bounceInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateX(-30px); + } + + 80% { + -webkit-transform: translateX(10px); + } + + 100% { + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes bounceInRight { + 0% { + opacity: 0; + -moz-transform: translateX(2000px); + } + + 60% { + opacity: 1; + -moz-transform: translateX(-30px); + } + + 80% { + -moz-transform: translateX(10px); + } + + 100% { + -moz-transform: translateX(0); + } +} + +@-o-keyframes bounceInRight { + 0% { + opacity: 0; + -o-transform: translateX(2000px); + } + + 60% { + opacity: 1; + -o-transform: translateX(-30px); + } + + 80% { + -o-transform: translateX(10px); + } + + 100% { + -o-transform: translateX(0); + } +} + +@keyframes bounceInRight { + 0% { + opacity: 0; + transform: translateX(2000px); + } + + 60% { + opacity: 1; + transform: translateX(-30px); + } + + 80% { + transform: translateX(10px); + } + + 100% { + transform: translateX(0); + } +} + +.bounceInRight { + -webkit-animation-name: bounceInRight; + -moz-animation-name: bounceInRight; + -o-animation-name: bounceInRight; + animation-name: bounceInRight; +} +@-webkit-keyframes bounceOut { + 0% { + -webkit-transform: scale(1); + } + + 25% { + -webkit-transform: scale(.95); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.3); + } +} + +@-moz-keyframes bounceOut { + 0% { + -moz-transform: scale(1); + } + + 25% { + -moz-transform: scale(.95); + } + + 50% { + opacity: 1; + -moz-transform: scale(1.1); + } + + 100% { + opacity: 0; + -moz-transform: scale(.3); + } +} + +@-o-keyframes bounceOut { + 0% { + -o-transform: scale(1); + } + + 25% { + -o-transform: scale(.95); + } + + 50% { + opacity: 1; + -o-transform: scale(1.1); + } + + 100% { + opacity: 0; + -o-transform: scale(.3); + } +} + +@keyframes bounceOut { + 0% { + transform: scale(1); + } + + 25% { + transform: scale(.95); + } + + 50% { + opacity: 1; + transform: scale(1.1); + } + + 100% { + opacity: 0; + transform: scale(.3); + } +} + +.bounceOut { + -webkit-animation-name: bounceOut; + -moz-animation-name: bounceOut; + -o-animation-name: bounceOut; + animation-name: bounceOut; +} +@-webkit-keyframes bounceOutUp { + 0% { + -webkit-transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } +} + +@-moz-keyframes bounceOutUp { + 0% { + -moz-transform: translateY(0); + } + + 20% { + opacity: 1; + -moz-transform: translateY(20px); + } + + 100% { + opacity: 0; + -moz-transform: translateY(-2000px); + } +} + +@-o-keyframes bounceOutUp { + 0% { + -o-transform: translateY(0); + } + + 20% { + opacity: 1; + -o-transform: translateY(20px); + } + + 100% { + opacity: 0; + -o-transform: translateY(-2000px); + } +} + +@keyframes bounceOutUp { + 0% { + transform: translateY(0); + } + + 20% { + opacity: 1; + transform: translateY(20px); + } + + 100% { + opacity: 0; + transform: translateY(-2000px); + } +} + +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + -moz-animation-name: bounceOutUp; + -o-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} +@-webkit-keyframes bounceOutDown { + 0% { + -webkit-transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + } +} + +@-moz-keyframes bounceOutDown { + 0% { + -moz-transform: translateY(0); + } + + 20% { + opacity: 1; + -moz-transform: translateY(-20px); + } + + 100% { + opacity: 0; + -moz-transform: translateY(2000px); + } +} + +@-o-keyframes bounceOutDown { + 0% { + -o-transform: translateY(0); + } + + 20% { + opacity: 1; + -o-transform: translateY(-20px); + } + + 100% { + opacity: 0; + -o-transform: translateY(2000px); + } +} + +@keyframes bounceOutDown { + 0% { + transform: translateY(0); + } + + 20% { + opacity: 1; + transform: translateY(-20px); + } + + 100% { + opacity: 0; + transform: translateY(2000px); + } +} + +.bounceOutDown { + -webkit-animation-name: bounceOutDown; + -moz-animation-name: bounceOutDown; + -o-animation-name: bounceOutDown; + animation-name: bounceOutDown; +} +@-webkit-keyframes bounceOutLeft { + 0% { + -webkit-transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } +} + +@-moz-keyframes bounceOutLeft { + 0% { + -moz-transform: translateX(0); + } + + 20% { + opacity: 1; + -moz-transform: translateX(20px); + } + + 100% { + opacity: 0; + -moz-transform: translateX(-2000px); + } +} + +@-o-keyframes bounceOutLeft { + 0% { + -o-transform: translateX(0); + } + + 20% { + opacity: 1; + -o-transform: translateX(20px); + } + + 100% { + opacity: 0; + -o-transform: translateX(-2000px); + } +} + +@keyframes bounceOutLeft { + 0% { + transform: translateX(0); + } + + 20% { + opacity: 1; + transform: translateX(20px); + } + + 100% { + opacity: 0; + transform: translateX(-2000px); + } +} + +.bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + -moz-animation-name: bounceOutLeft; + -o-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; +} +@-webkit-keyframes bounceOutRight { + 0% { + -webkit-transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + } +} + +@-moz-keyframes bounceOutRight { + 0% { + -moz-transform: translateX(0); + } + + 20% { + opacity: 1; + -moz-transform: translateX(-20px); + } + + 100% { + opacity: 0; + -moz-transform: translateX(2000px); + } +} + +@-o-keyframes bounceOutRight { + 0% { + -o-transform: translateX(0); + } + + 20% { + opacity: 1; + -o-transform: translateX(-20px); + } + + 100% { + opacity: 0; + -o-transform: translateX(2000px); + } +} + +@keyframes bounceOutRight { + 0% { + transform: translateX(0); + } + + 20% { + opacity: 1; + transform: translateX(-20px); + } + + 100% { + opacity: 0; + transform: translateX(2000px); + } +} + +.bounceOutRight { + -webkit-animation-name: bounceOutRight; + -moz-animation-name: bounceOutRight; + -o-animation-name: bounceOutRight; + animation-name: bounceOutRight; +} +@-webkit-keyframes rotateIn { + 0% { + -webkit-transform-origin: center center; + -webkit-transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: center center; + -webkit-transform: rotate(0); + opacity: 1; + } +} +@-moz-keyframes rotateIn { + 0% { + -moz-transform-origin: center center; + -moz-transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: center center; + -moz-transform: rotate(0); + opacity: 1; + } +} +@-o-keyframes rotateIn { + 0% { + -o-transform-origin: center center; + -o-transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -o-transform-origin: center center; + -o-transform: rotate(0); + opacity: 1; + } +} +@keyframes rotateIn { + 0% { + transform-origin: center center; + transform: rotate(-200deg); + opacity: 0; + } + + 100% { + transform-origin: center center; + transform: rotate(0); + opacity: 1; + } +} + +.rotateIn { + -webkit-animation-name: rotateIn; + -moz-animation-name: rotateIn; + -o-animation-name: rotateIn; + animation-name: rotateIn; +} +@-webkit-keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(0); + opacity: 1; + } +} + +@-moz-keyframes rotateInUpLeft { + 0% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(0); + opacity: 1; + } +} + +@-o-keyframes rotateInUpLeft { + 0% { + -o-transform-origin: left bottom; + -o-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -o-transform-origin: left bottom; + -o-transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInUpLeft { + 0% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } + + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + -moz-animation-name: rotateInUpLeft; + -o-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; +} +@-webkit-keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(0); + opacity: 1; + } +} + +@-moz-keyframes rotateInDownLeft { + 0% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(0); + opacity: 1; + } +} + +@-o-keyframes rotateInDownLeft { + 0% { + -o-transform-origin: left bottom; + -o-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -o-transform-origin: left bottom; + -o-transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInDownLeft { + 0% { + transform-origin: left bottom; + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + -moz-animation-name: rotateInDownLeft; + -o-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; +} +@-webkit-keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(0); + opacity: 1; + } +} + +@-moz-keyframes rotateInUpRight { + 0% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(0); + opacity: 1; + } +} + +@-o-keyframes rotateInUpRight { + 0% { + -o-transform-origin: right bottom; + -o-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -o-transform-origin: right bottom; + -o-transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInUpRight { + 0% { + transform-origin: right bottom; + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + -moz-animation-name: rotateInUpRight; + -o-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; +} +@-webkit-keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(0); + opacity: 1; + } +} + +@-moz-keyframes rotateInDownRight { + 0% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(0); + opacity: 1; + } +} + +@-o-keyframes rotateInDownRight { + 0% { + -o-transform-origin: right bottom; + -o-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -o-transform-origin: right bottom; + -o-transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInDownRight { + 0% { + transform-origin: right bottom; + transform: rotate(90deg); + opacity: 0; + } + + 100% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + -moz-animation-name: rotateInDownRight; + -o-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; +} +@-webkit-keyframes rotateOut { + 0% { + -webkit-transform-origin: center center; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: center center; + -webkit-transform: rotate(200deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOut { + 0% { + -moz-transform-origin: center center; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: center center; + -moz-transform: rotate(200deg); + opacity: 0; + } +} + +@-o-keyframes rotateOut { + 0% { + -o-transform-origin: center center; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: center center; + -o-transform: rotate(200deg); + opacity: 0; + } +} + +@keyframes rotateOut { + 0% { + transform-origin: center center; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: center center; + transform: rotate(200deg); + opacity: 0; + } +} + +.rotateOut { + -webkit-animation-name: rotateOut; + -moz-animation-name: rotateOut; + -o-animation-name: rotateOut; + animation-name: rotateOut; +} +@-webkit-keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOutUpLeft { + 0% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(-90deg); + opacity: 0; + } +} + +@-o-keyframes rotateOutUpLeft { + 0% { + -o-transform-origin: left bottom; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: left bottom; + -o-transform: rotate(-90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpLeft { + 0% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: left bottom; + transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + -moz-animation-name: rotateOutUpLeft; + -o-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; +} +@-webkit-keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(90deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOutDownLeft { + 0% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(90deg); + opacity: 0; + } +} + +@-o-keyframes rotateOutDownLeft { + 0% { + -o-transform-origin: left bottom; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: left bottom; + -o-transform: rotate(90deg); + opacity: 0; + } +} + +@keyframes rotateOutDownLeft { + 0% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + -moz-animation-name: rotateOutDownLeft; + -o-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; +} +@-webkit-keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(90deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOutUpRight { + 0% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(90deg); + opacity: 0; + } +} + +@-o-keyframes rotateOutUpRight { + 0% { + -o-transform-origin: right bottom; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: right bottom; + -o-transform: rotate(90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpRight { + 0% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: right bottom; + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + -moz-animation-name: rotateOutUpRight; + -o-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; +} +@-webkit-keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOutDownRight { + 0% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(-90deg); + opacity: 0; + } +} + +@-o-keyframes rotateOutDownRight { + 0% { + -o-transform-origin: right bottom; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: right bottom; + -o-transform: rotate(-90deg); + opacity: 0; + } +} + +@keyframes rotateOutDownRight { + 0% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: right bottom; + transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + -moz-animation-name: rotateOutDownRight; + -o-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; +} +@-webkit-keyframes hinge { + 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 100% { -webkit-transform: translateY(700px); opacity: 0; } +} + +@-moz-keyframes hinge { + 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 100% { -moz-transform: translateY(700px); opacity: 0; } +} + +@-o-keyframes hinge { + 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 100% { -o-transform: translateY(700px); opacity: 0; } +} + +@keyframes hinge { + 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } + 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } + 100% { transform: translateY(700px); opacity: 0; } +} + +.hinge { + -webkit-animation-name: hinge; + -moz-animation-name: hinge; + -o-animation-name: hinge; + animation-name: hinge; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollIn { + 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } + 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } +} + +@-moz-keyframes rollIn { + 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } + 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } +} + +@-o-keyframes rollIn { + 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } + 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } +} + +@keyframes rollIn { + 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } + 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } +} + +.rollIn { + -webkit-animation-name: rollIn; + -moz-animation-name: rollIn; + -o-animation-name: rollIn; + animation-name: rollIn; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollOut { + 0% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(100%) rotate(120deg); + } +} + +@-moz-keyframes rollOut { + 0% { + opacity: 1; + -moz-transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -moz-transform: translateX(100%) rotate(120deg); + } +} + +@-o-keyframes rollOut { + 0% { + opacity: 1; + -o-transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -o-transform: translateX(100%) rotate(120deg); + } +} + +@keyframes rollOut { + 0% { + opacity: 1; + transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + transform: translateX(100%) rotate(120deg); + } +} + +.rollOut { + -webkit-animation-name: rollOut; + -moz-animation-name: rollOut; + -o-animation-name: rollOut; + animation-name: rollOut; +} + +/* originally authored by Angelo Rohit - https://github.com/angelorohit */ + +@-webkit-keyframes lightSpeedIn { + 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +@-moz-keyframes lightSpeedIn { + 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +@-o-keyframes lightSpeedIn { + 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +@keyframes lightSpeedIn { + 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +.lightSpeedIn { + -webkit-animation-name: lightSpeedIn; + -moz-animation-name: lightSpeedIn; + -o-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + + -webkit-animation-timing-function: ease-out; + -moz-animation-timing-function: ease-out; + -o-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +.animated.lightSpeedIn { + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; +} + +/* originally authored by Angelo Rohit - https://github.com/angelorohit */ + +@-webkit-keyframes lightSpeedOut { + 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +@-moz-keyframes lightSpeedOut { + 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +@-o-keyframes lightSpeedOut { + 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +@keyframes lightSpeedOut { + 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +.lightSpeedOut { + -webkit-animation-name: lightSpeedOut; + -moz-animation-name: lightSpeedOut; + -o-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; + -o-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +.animated.lightSpeedOut { + -webkit-animation-duration: 0.25s; + -moz-animation-duration: 0.25s; + -o-animation-duration: 0.25s; + animation-duration: 0.25s; +} + +/* originally authored by Angelo Rohit - https://github.com/angelorohit */ + +@-webkit-keyframes wiggle { + 0% { -webkit-transform: skewX(9deg); } + 10% { -webkit-transform: skewX(-8deg); } + 20% { -webkit-transform: skewX(7deg); } + 30% { -webkit-transform: skewX(-6deg); } + 40% { -webkit-transform: skewX(5deg); } + 50% { -webkit-transform: skewX(-4deg); } + 60% { -webkit-transform: skewX(3deg); } + 70% { -webkit-transform: skewX(-2deg); } + 80% { -webkit-transform: skewX(1deg); } + 90% { -webkit-transform: skewX(0deg); } + 100% { -webkit-transform: skewX(0deg); } +} + +@-moz-keyframes wiggle { + 0% { -moz-transform: skewX(9deg); } + 10% { -moz-transform: skewX(-8deg); } + 20% { -moz-transform: skewX(7deg); } + 30% { -moz-transform: skewX(-6deg); } + 40% { -moz-transform: skewX(5deg); } + 50% { -moz-transform: skewX(-4deg); } + 60% { -moz-transform: skewX(3deg); } + 70% { -moz-transform: skewX(-2deg); } + 80% { -moz-transform: skewX(1deg); } + 90% { -moz-transform: skewX(0deg); } + 100% { -moz-transform: skewX(0deg); } +} + +@-o-keyframes wiggle { + 0% { -o-transform: skewX(9deg); } + 10% { -o-transform: skewX(-8deg); } + 20% { -o-transform: skewX(7deg); } + 30% { -o-transform: skewX(-6deg); } + 40% { -o-transform: skewX(5deg); } + 50% { -o-transform: skewX(-4deg); } + 60% { -o-transform: skewX(3deg); } + 70% { -o-transform: skewX(-2deg); } + 80% { -o-transform: skewX(1deg); } + 90% { -o-transform: skewX(0deg); } + 100% { -o-transform: skewX(0deg); } +} + +@keyframes wiggle { + 0% { transform: skewX(9deg); } + 10% { transform: skewX(-8deg); } + 20% { transform: skewX(7deg); } + 30% { transform: skewX(-6deg); } + 40% { transform: skewX(5deg); } + 50% { transform: skewX(-4deg); } + 60% { transform: skewX(3deg); } + 70% { transform: skewX(-2deg); } + 80% { transform: skewX(1deg); } + 90% { transform: skewX(0deg); } + 100% { transform: skewX(0deg); } +} + +.wiggle { + -webkit-animation-name: wiggle; + -moz-animation-name: wiggle; + -o-animation-name: wiggle; + animation-name: wiggle; + + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; + -o-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +.animated.wiggle { + -webkit-animation-duration: 0.75s; + -moz-animation-duration: 0.75s; + -o-animation-duration: 0.75s; + animation-duration: 0.75s; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/changepwd-apk.css b/openo-portal/portal-common/src/main/webapp/common/css/changepwd-apk.css new file mode 100644 index 00000000..57a9b26b --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/changepwd-apk.css @@ -0,0 +1,84 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Changepasswd page +***/ + +/* logo page */ +/* +.Changepasswd { + background-color: #666 !important; +} + +.Changepasswd .logo { + margin: 0 auto; + margin-top:60px; + padding: 15px; + text-align: center; +} +*/ +.Changepasswd .content .login-form, +.Changepasswd .content .forget-form { + padding: 0px; + margin: 0px; +} +.Changepasswd .content { + margin: 0 auto; + margin-bottom: 0px; + padding: 20px; + padding-top: 20px; + padding-bottom: 15px; +} +/* +.Changepasswd .content h3 { + // color: #eee; +} +.Changepasswd .content h4 { + // color: #eee; +} +*/ +.Changepasswd .content p, +.Changepasswd .content label { + color: #fff; +} + +.Changepasswd .content .form-control { + background-color: #fff; +} + +.Changepasswd .content .form-title { + font-weight: 300; + margin-bottom: 25px; +} + +.Changepasswd .content .form-actions { + background-color: transparent; + clear: both; + border: 0px; + padding: 0px 30px 0px 30px; + margin-left: -30px; + margin-right: -30px; +} + + +.Changepasswd .content .form-actions .checkbox { + margin-top: 8px; + display: inline-block; +} + +.Changepasswd .content .form-actions .btn { + margin-top: 1px; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/changepwd.css b/openo-portal/portal-common/src/main/webapp/common/css/changepwd.css new file mode 100644 index 00000000..57a9b26b --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/changepwd.css @@ -0,0 +1,84 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Changepasswd page +***/ + +/* logo page */ +/* +.Changepasswd { + background-color: #666 !important; +} + +.Changepasswd .logo { + margin: 0 auto; + margin-top:60px; + padding: 15px; + text-align: center; +} +*/ +.Changepasswd .content .login-form, +.Changepasswd .content .forget-form { + padding: 0px; + margin: 0px; +} +.Changepasswd .content { + margin: 0 auto; + margin-bottom: 0px; + padding: 20px; + padding-top: 20px; + padding-bottom: 15px; +} +/* +.Changepasswd .content h3 { + // color: #eee; +} +.Changepasswd .content h4 { + // color: #eee; +} +*/ +.Changepasswd .content p, +.Changepasswd .content label { + color: #fff; +} + +.Changepasswd .content .form-control { + background-color: #fff; +} + +.Changepasswd .content .form-title { + font-weight: 300; + margin-bottom: 25px; +} + +.Changepasswd .content .form-actions { + background-color: transparent; + clear: both; + border: 0px; + padding: 0px 30px 0px 30px; + margin-left: -30px; + margin-right: -30px; +} + + +.Changepasswd .content .form-actions .checkbox { + margin-top: 8px; + display: inline-block; +} + +.Changepasswd .content .form-actions .btn { + margin-top: 1px; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/frame-style.css b/openo-portal/portal-common/src/main/webapp/common/css/frame-style.css new file mode 100644 index 00000000..d0a95ca2 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/frame-style.css @@ -0,0 +1,255 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +#recommend_notice{ + height:30px; + width:100%; + left:0px; + right:0px; + line-height:30px; + text-align:center; + position:absolute; + float:bottom; + bottom:35px; + z-index:2; + cursor:default; +} + +#recommend_notice:hover { + color: #F75000; +} +.menuDivider{ + height:1px; + margin:9px 0; + text-align: center; + overflow:hidden; + background-color:#a6a6a6 !important; +} + +.page-content .page-breadcrumb.breadcrumb { + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + box-shadow: none; + padding-right: 30px; + padding-left: 8px; + margin-top: 0px !important; + margin-bottom: 10px !important; + border:0px !important; + background-color: #fff; +} +.page-mainIframe{ +border: 0px; +margin: 0px; +padding: 0px; +} + +.zte-navbar-brand { + /*display: inline-block;*/ + padding:0px; + margin-top: -1px; + margin-right: 0px; + width: 225px; + height: 42px; +} + +.zte-navbar-brand img { + margin-left: 10px; + margin-top: 4px; +} + +.zte-navbar-brand.text-logo { + padding-left: 20px; + padding-top: 12px; +} +.zte-brand-text{ + font-size:14px; + font-family:Arial; + color:#ffffff !important; + font-family:"microsoft yahei"; +} +.zte-theme-panel { + width: 45px; + margin-top: -2px; + margin-right: -5px; + z-index: 999; + float: right; + position:relative; +} + +.zte-theme-panel > .toggler { + top:12px; + right:14px; + padding:11px; + cursor:pointer; + position:absolute; + display: block; + background:url(../img/icon-color.png) center no-repeat; +} + +.zte-theme-panel > .toggler:hover { + background-color: #3d3d3d; +} + +.zte-theme-panel > .toggler-close { + display: none; + top:4px; + right:0; + padding:20px; + cursor:pointer; + position:absolute; + background: #3d3d3d url(../img/icon-color-close.png) center no-repeat !important; +} + +.zte-theme-panel > .toggler-close:hover { + background-color:#222 !important; +} + +.zte-theme-panel > .theme-options { + min-width:228px; + top: 44px; + right: 0px; + display:none; + position:absolute; + background:#3d3d3d; +} + +.zte-theme-panel > .theme-options > .theme-option { + color:#cfcfcf; + padding: 15px; + border-top:1px solid #585858; + margin-top: 0px; + margin-bottom: 0px; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors { + border-top: 0; +} + +.zte-theme-panel > .theme-options > .theme-option > span { + display: inline-block; + width: 80px; + font-size: 14px; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > span { + display: block; + width: auto; +} + +.zte-theme-panel > .theme-options > .theme-option > select.form-control { + display: inline; + width: 110px !important; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul { + list-style:none; + padding: 0; + display: block; + margin-bottom: 1px !important; + margin-top: 10px; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li { + width:24px; + height:24px; + margin:4 4px; + cursor:pointer; + list-style:none; + float: left; + border:solid 1px #707070; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li:first-child { + margin-left: 4; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li:hover, +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.current { + border:solid 2px #ebebeb; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-black { + background:#333438; +} +.zte-theme-panel> .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight { + background:#3366cc; +} +.zte-theme-panel> .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight2 { + background:#1178ee; +} +.zte-theme-panel> .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight3 { + background:#067ead; +} +.zte-theme-panel> .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight4 { + background:#333333; +} +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-zteblue { + background:#1b8fd3; +} +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-grey { + background:#6d6d6d; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-blue { + background:#124f94; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-brown { + background:#623f18; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-purple { + background:#701584; +} + +.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-white { + background:#fff; +} +.header.navbar .navbar-nav { + min-width: 210px; +} +.header.navbar .navbar-toggle { + margin: 8px 0px 4px 6px; + padding: 5px 0px 6px 6px; +} + +.nav-tabs li a span.remove{ + color: #f00; + margin-left: 10px; + cursor:hand; +} +.nav-tabs li a span.tabdropremove{ + color: #f00; + margin-right: 10px; + float:right; + cursor:hand; +} +@media (min-width: 768px){ + .navbar-collapse.collapse.hideSideMenuForMainPage { + display: none !important; + } +} +#f_hormenu li.mega-menu-dropdown{ + margin-left:30px; +} +.page-sidebar .sidebar-toggler{ +margin-left:190px; +margin-bottom:5px; +} +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected{ +margin-bottom:-5px; +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/login-apk.css b/openo-portal/portal-common/src/main/webapp/common/css/login-apk.css new file mode 100644 index 00000000..78e67838 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/login-apk.css @@ -0,0 +1,183 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Login page +***/ + +/* logo page */ +.login { + background-color: #666 !important; +} + +.login .logo { + margin: 0 auto; + margin-top:60px; + padding: 15px; + text-align: center; +} + + +.login .content { + background: url(../../../framework/img/bg-white-lock.png) repeat; + width: 360px; + margin: 0 auto; + margin-bottom: 0px; + padding: 30px; + padding-top: 20px; + padding-bottom: 15px; +} + +.login .content h3 { + color: #eee; +} +.login .content h4 { + color: #eee; +} + +.login .content p, +.login .content label { + color: #fff; +} + +.login .content .login-form, +.login .content .forget-form { + padding: 0px; + margin: 0px; +} + +.login .content .form-control { + background-color: #fff; +} + +.login .content .forget-form { + display: none; +} + +.login .content .register-form { + display: none; +} + +.login .content .form-title { + font-weight: 300; + margin-bottom: 25px; +} + +.login .content .form-actions { + background-color: transparent; + clear: both; + border: 0px; + padding: 0px 30px 25px 30px; + margin-left: -30px; + margin-right: -30px; +} + +.login .content .form-actions .checkbox { + margin-left: 20px; + padding-left: 0; +} + +.login .content .forget-form .form-actions { + border: 0; + margin-bottom: 0; + padding-bottom: 20px; +} + +.login .content .register-form .form-actions { + border: 0; + margin-bottom: 0; + padding-bottom: 0px; +} + +.login .content .form-actions .checkbox { + margin-top: 8px; + display: inline-block; +} + +.login .content .form-actions .btn { + margin-top: 1px; +} + +.login .content .forget-password { + margin-top: 25px; +} + +.login .content .create-account { + border-top: 1px dotted #eee; + padding-top: 10px; + margin-top: 15px; +} + +.login .content .create-account a { + display: inline-block; + margin-top: 5px; +} + +/* select2 dropdowns */ +.login .content .select2-container i { + display: inline-block; + position: relative; + color: #ccc; + z-index: 1; + top:1px; + margin: 4px 4px 0px 3px; + width: 16px; + height: 16px; + font-size: 16px; + text-align: center; +} + +.login .content .has-error .select2-container i { + color: #b94a48; +} + +.login .content .select2-container a span { + font-size: 13px; +} + +.login .content .select2-container a span img { + margin-left: 4px; +} + +/* footer copyright */ +.login .copyright { + text-align: center; + margin: 0 auto; + padding: 10px; + color: #eee; + font-size: 13px; +} + +@media (max-width: 480px) { + /*** + Login page + ***/ + .login .logo { + margin-top:10px; + } + + .login .content { + padding: 30px; + width: 222px; + } + + .login .content h3 { + font-size: 22px; + } + + .login .checkbox { + font-size: 13px; + } +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/login.css b/openo-portal/portal-common/src/main/webapp/common/css/login.css new file mode 100644 index 00000000..1ec3e348 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/login.css @@ -0,0 +1,201 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Login page +***/ + +/* logo page */ +.login { + background-color: #666 !important; +} + +.login .logo { + margin: 0 auto; + margin-top:60px; + padding: 15px; + text-align: center; +} + + +.login .content { + background: url(../img/bg-white-lock.png) repeat; + width: 360px; + margin: 0 auto; + margin-bottom: 0px; + padding: 30px; + padding-top: 20px; + padding-bottom: 15px; + border-radius:5px; + -webkit-box-shadow: 2px 3px 3px #717171; + -moz-box-shadow: 2px 3px 3px #717171; + box-shadow: -1px 1px 1px rgba(255,255,255,0.6) inset,-3px 3px 5px rgba(0,0,0,0.2); +} + +.login .content h3 { + color: #474747; + letter-spacing:5px; + font-size:20px ; + font-family: 'Microsoft Yahei', sans-serif; + text-shadow:-1px 1px rgba(221, 221, 221, 1); +} +.login .content h4 { + color: #eee; +} + +.login .content p, +.login .content label { + color: #4b4b4b; +} + +.login .content .login-form, +.login .content .forget-form { + padding: 0px; + margin: 0px; +} + +.login .content .form-control { + background-color: #fff; + border-radius:15px; +} + +.login .content .forget-form { + display: none; +} + +.login .content .register-form { + display: none; +} + +.login .content .form-title { + font-weight: 300; + margin-bottom: 25px; + text-align: center; +} + +.login .content .form-actions { + background-color: transparent; + clear: both; + border: 0px; + padding: 0px 30px 25px 30px; + margin-left: -30px; + margin-right: -30px; +} + +.login .content .form-actions .checkbox { + margin-left: 20px; + padding-left: 0; +} + +.login .content .forget-form .form-actions { + border: 0; + margin-bottom: 0; + padding-bottom: 20px; +} + +.login .content .register-form .form-actions { + border: 0; + margin-bottom: 0; + padding-bottom: 0px; +} + +.login .content .form-actions .checkbox { + margin-top: 8px; + display: inline-block; +} + +.login .content .form-actions .btn { + margin-top: 1px; + border-radius:20px; +} + +.login .content .forget-password { + margin-top: 25px; +} + +.login .content .create-account { + border-top: 1px dotted #eee; + padding-top: 10px; + margin-top: 15px; +} + +.login .content .create-account a { + display: inline-block; + margin-top: 5px; +} + +/* select2 dropdowns */ +.login .content .select2-container i { + display: inline-block; + position: relative; + color: #ccc; + z-index: 1; + top:1px; + margin: 4px 4px 0px 3px; + width: 16px; + height: 16px; + font-size: 16px; + text-align: center; +} + +.login .content .has-error .select2-container i { + color: #b94a48; +} + +.login .content .select2-container a span { + font-size: 13px; +} + +.login .content .select2-container a span img { + margin-left: 4px; +} +.form-control:focus{ + border:1px solid #5ca3b7 !important; + box-shadow:0px 0px 2px #2aabec !important; +} +/* footer copyright */ +.login .copyright { + text-align: center; + margin: 0 auto; + padding: 10px; + color: #eee; + font-size: 13px; +} + +@media (max-width: 480px) { + /*** + Login page + ***/ + .login .logo { + margin-top:10px; + } + + .login .content { + padding: 30px; + width: 222px; + } + + .login .content h3 { + font-size: 22px; + } + + .login .checkbox { + font-size: 13px; + } +} + +.descLabel{ + width:320px; +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/more-operation.css b/openo-portal/portal-common/src/main/webapp/common/css/more-operation.css new file mode 100644 index 00000000..d072f498 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/more-operation.css @@ -0,0 +1,167 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +a { + text-decoration: none !important; +} + +.box{ +height:95px ; +color:#333; +text-align:right; +padding-bottom:20px; +font-size:14px; +text-align:center; +} + +.row a{ +font-weight:normal; +font-size:14px; + +} + +.alarmTitle{ +padding-left:20px; +margin-top: 10px; +} +@media (min-width: 758px) and (max-width: 997px){ + .alarmTitle{ + display:none; + } + .alarmTypePadding{ + padding-left: 25%; + } +} +@media (max-width: 757px){ + .alarmTitle{ + display:none; + } + .alarmTypePadding{ + padding-left: 20%; + } +} + +.titlefont{ + font-size:16px; +} +.label{ + font-weight: 400; +} + +.row1{ + margin-right: 0px !important; +} + +.queryLink{ + font-size: 14px; + margin-top: 10px; + color:#5b9bd1; +} +.carousel-control { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 3% !important; + opacity: .5; + filter: alpha(opacity=50); + font-size: 20px; + color: #C7C7C7; + text-align: center; + text-shadow: 0 1px 2px rgba(0,0,0,.6); +} +.carousel-control:hover{ + color: #969494; +} +.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { + margin-left:0; + font-size:25px; + margin-top:-12px; +} +.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right{ + right:35px; +} + +.carousel-inner{ + overflow: visible; +} + +.item { + overflow: visible !important; + display: block!important; + margin-bottom: 0px !important; +} + +.carousel-control.left,.carousel-control.right{ + background-image:none; +} +.upArrowArea{ + background:#fff; + margin-top:-18px; + margin-bottom: 15px; +} +.boxOperation { + color:#1178ee; + background-repeat: no-repeat; + background-position-y: 100%; + height:30px; + line-height:30px; + font-size: 14px; + font-weight:bold; + margin-top:5px; + height:35px; + padding-left:15px; + padding-right:15px; +} +.moreButton:first-child .boxOperation { + margin-left: 45px; +} +.moreButton:last-child .boxOperation { + margin-right: 45px; +} +.moreButton:first-child .boxOperationOnePage{ + margin-left: 0px !important; +} + +.moreOpen { + height: 40px; +} +.moreClose { + height: 0px; + display:none !important; +} +.moreButton{ + float: left; + position: relative; + min-height: 1px; + } +.boxOperation:hover{ + color:#1069d0; +} +.moreButtonSelected{ + background-color: #fff !important; + color:#333; + border-top:3px #f3565d solid; +} +ul{ + list-style-type:none; +} +li{ + list-style-type:none; +} +.dropdown-menu { + z-index: 9991 !important;; +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/ngict-component.css b/openo-portal/portal-common/src/main/webapp/common/css/ngict-component.css new file mode 100644 index 00000000..3950a836 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/ngict-component.css @@ -0,0 +1,789 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +body { + color: #333; + font-size: 14px; + font-family: "Microsoft yahei", Arial !important; + background-color: transparent; +} + +/*fontIcon*/ + +[class^="ict-"], +[class*=" ict-"] { + padding-right: 3px; +} + +/*common color*/ + +.blue1 { + background-color: #5b9bd1; + color: #fff; +} + +.blue1:hover { + background-color: #487ca9; + color: #fff; +} + +.blue2 { + background-color: #57b5e3; + color: #fff; +} + +.blue2:hover { + background-color: #43a1cf; + color: #fff; +} + +.red { + background-color: #e35b5a; + color: #fff; +} + +.red:hover { + background-color: #d45150; + color: #fff; +} + +.green { + background-color: #44b6ae; + color: #fff; +} + +.green:hover { + background-color: #329d96; + color: #fff; +} + +.gold { + background-color: #c0af69; + color: #fff; +} + +.gold:hover { + background-color: #ad9a4d; + color: #fff; +} + +.grey { + background-color: #e5e5e5; + color: #333; +} + +.grey:hover { + background-color: #d8d8d8; + color: #333; +} + +.dark_grey { + background-color: #333; + color: #fff; +} + +.dark_grey:hover { + background-color: #101010; + color: #fff; +} + +.white { + background-color: #fff; + border: 1px solid #ddd; + color: #333; +} + +.white:hover { + background-color: #e5e5e5; + color: #333; +} + +/*** +Responsive & Scrollable Tables +***/ + +.table-scrollable { + width: 100%; + overflow-x: auto; + overflow-y: hidden; + border: 1px solid #dddddd; +} + +.table-scrollable > .table { + width: 100% !important; + margin: 0 !important; + margin-bottom: 0; + background-color: #fff; +} + +.table-scrollable > .table > thead > tr > th, +.table-scrollable > .table > tbody > tr > th, +.table-scrollable > .table > tfoot > tr > th, +.table-scrollable > .table > thead > tr > td, +.table-scrollable > .table > tbody > tr > td, +.table-scrollable > .table > tfoot > tr > td { + white-space: nowrap; +} + +.table-scrollable > .table-bordered { + border: 0; +} + +.table-scrollable > .table-bordered > thead > tr > th:first-child, +.table-scrollable > .table-bordered > tbody > tr > th:first-child, +.table-scrollable > .table-bordered > tfoot > tr > th:first-child, +.table-scrollable > .table-bordered > thead > tr > td:first-child, +.table-scrollable > .table-bordered > tbody > tr > td:first-child, +.table-scrollable > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; +} + +.table-scrollable > .table-bordered > thead > tr > th:last-child, +.table-scrollable > .table-bordered > tbody > tr > th:last-child, +.table-scrollable > .table-bordered > tfoot > tr > th:last-child, +.table-scrollable > .table-bordered > thead > tr > td:last-child, +.table-scrollable > .table-bordered > tbody > tr > td:last-child, +.table-scrollable > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; +} + +.table-scrollable > .table-bordered > thead > tr:last-child > th, +.table-scrollable > .table-bordered > tbody > tr:last-child > th, +.table-scrollable > .table-bordered > tfoot > tr:last-child > th, +.table-scrollable > .table-bordered > thead > tr:last-child > td, +.table-scrollable > .table-bordered > tbody > tr:last-child > td, +.table-scrollable > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; +} + +/*form*/ + +.form { + padding: 0 !important; +} + +.form-group .multiRow { + margin-bottom: 15px; +} + +.form-group, +.form-group .btn { + font-size: 12px; +} + +.form-body { + padding: 10px; +} + +.form-actions { + padding-top: 20px +} + +.form-actions.nobg { + background-color: transparent; +} + +.form-actions.top { + margin-top: 0; + margin-bottom: 20px; + border-top: 0; + border-bottom: 1px solid #e5e5e5; +} + +/*.form-actions.fluid { + padding: 20px 0; +}*/ + +.form-actions .btnGroup { + padding-left: 0; +} + +.form-actions.fluid > [class^="col-"] { + padding-left: 13px; +} + +.form-actions:before, +.form-actions:after { + display: table; + line-height: 0; + content: ""; +} + +.form-actions:after { + clear: both; +} + +.form-section { + margin: 30px 0px 25px 0px; + padding-bottom: 5px; + border-bottom: 1px solid #eee; +} + +.form .form-section:first-child { + margin-top: 5px; +} + +.help-inline { + font-size: 13px; + color: #737373; + display: inline-block; + padding: 5px; +} + +.submBtn { + text-align: center; +} +.subm-iconMargin { +margin-left:-40px; +} +.subm-margin { +margin-left:-40px; +} + +/* left, right aligned form actions */ + +.form-actions.right { + padding-left: 0; + padding-right: 10px; + text-align: right; +} + +.form-actions.left { + padding-left: 10px; + padding-right: 0; + text-align: left; +} + +/* Checkbox */ + +.form-group .checkbox { + padding-left: 0; +} + +.form-title { + padding: 8px; + margin-bottom: 25px; + border-left: 2px solid #5b9bd1; + color: #1A78CA; + font-size: 16px; +} + +.checkbox-list > label { + display: block; +} + +.checkbox-list > label.checkbox-inline { + display: inline-block; +} + +.checkbox-list > label.checkbox-inline:first-child { + padding-left: 0; +} + +/* Radios */ +input[type="radio"]{ + cursor:pointer +} +.radio-list > label { + display: block; +} + +.radio-list > label.radio-inline { + display: inline-block; +} + +.radio-list > label.radio-inline:first-child { + padding-left: 0; +} + +.form-horizontal .radio-list .radio { + padding-top: 1px; +} + +.form-horizontal .radio-list > label { + margin-bottom: 0; +} + +.form-horizontal .radio > span { + margin-top: 2px; +} + +.help-block { + margin-top: 5px; + margin-bottom: 5px; + color: #a94442 !important; +} + +.form-inline input { + margin-bottom: 0px !important; +} +.form-horizontal .control-label{ + padding-top:4px; + text-align:right; +} + +.form-control-static { + font-size: 14px; + padding-top: 7px; +} + +.control-label .required { + color: #e02222; + font-size: 12px; + padding-left: 2px; +} + +/*TAB*/ + +.nav-tabs { + border: 0; + font-weight: bold; +} + +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + border: 0; + border-top: 3px solid #F3565D; +} + +.nav-tabs > li > a { + border-radius: 0; + font-weight: bold; +} + +.nav-tabs > li > a:hover { + background-color: #f1f3fa; + border: 1Px solid #f1f3fa; +} + +/*button*/ + +.btn { + min-width: 80px; + letter-spacing: 1px; +} + +.btnGroup .btn { + margin-right: 15px; +} + +.pagination-panel .btn { + min-width: 4px; +} + +.btn.dropdown-toggle, +.btn-group .btn.dropdown-toggle, +.btn:hover, +.btn:disabled, +.btn[disabled], +.btn:focus, +.btn:active, +.btn.active { + outline: none !important; + background-image: none !important; + filter: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + text-shadow: none; +} +.btn-xs:hover{ +text-decoration:none ; +} +/*radius*/ + +.radius_l { + border-radius: 20px; +} + +.radius_m { + border-radius: 8px; +} + +.radius_s { + border-radius: 3px; +} + +/*Progress Bars*/ + +.progress { + border: 0; + background-image: none !important; + filter: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.form-wizard .steps > li.active > a.step .number { + background-color: #45B6AF +} + +.progress > .progress-bar-success { + background-color: #45B6AF +} + +/*label*/ + +.label, +label { + font-weight: 400; + /*margin-bottom:15px;*/ +} + +/*表单中的组合*/ + +.input-group-btn-vertical.fa { + font-size: 12px; +} + +.spinner { + width: 60px; + margin-left: 10px; + margin-right: 30px; +} + +.spinner input { + text-align: right; +} + +.input-group-btn-vertical { + position: relative; + white-space: nowrap; + width: 1%; + vertical-align: middle; + display: table-cell; +} + +.input-group-btn-vertical > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + padding: 6px; + margin-left: -1px; + position: relative; + border-radius: 0; +} + +.input-group-btn-vertical > .btn { + min-width: 20px; +} + +.input-group-btn-vertical > .btn:first-child { + border-top-right-radius: 4px; +} + +.input-group-btn-vertical > .btn:last-child { + margin-top: -2px; + border-bottom-right-radius: 4px; +} + +.input-group-btn-vertical i { + position: absolute; + top: -2px; + left: 5px; +} + +.input-group .form-control { + height: 26px !important; +} + +/*separator & title*/ + +.separator-line { + height: 1px; + width: 100%; + background: #ddd; + overflow: hidden; + margin-bottom: 15px; + margin-top: 6px; + opacity: 0.6; +} + +.separator { + opacity: 0.7; +} + +.separator:hover { + opacity: 1; +} + +.titlefont { + font-size: 16px; + margin-top:15px; +} + +/*link*/ + +a { + color: #428bca; + text-decoration: none ; + cursor:pointer; +} +a:hover{ + text-decoration: underline; +} +/*html滑块组件*/ + +input[type="range"] { + margin-top: 2px; + background-color: #f0f3f9; + border: 1px solid #ccd6e8; + border-radius: 15px; + width: 400px; + -webkit-appearance: none; + height: 15px; +} + +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + cursor: pointer; + top: -5px; + height: 28px; + width: 15px; + transform: translateY(-4px); + background: none repeat scroll 0 0 #f0f3f9; + background-color: #9cc2cb; + border-radius: 20px; +} + +input[type="range"]:focus { + outline: none; +} + +/*ztree*/ + +.ztree * { + font-family: "microsoft yahei"; + font-size: 12px; +} + +.ztree { + padding: 15px 30px 0 5px; +} + +.ztree li a.curSelectedNode { + height: 28px; +} + +.ztree li span { + line-height: 16px; + margin-right: 2px; + margin-left: 6px +} + +.ztree li span.button.chk { + width: 13px; + height: 13px; + margin-left: 10px; + cursor: auto +} + +.ztree li span.button.add { + margin-left: 2px; + /* margin-right: -1px; */ + + margin-right: 4px; + background-position: -144px 0; + vertical-align: top; + *vertical-align: middle; + float: right; +} + +.ztree li span.button.edit { + margin-right: 4px; + background-position: -110px -48px; + vertical-align: top; + *vertical-align: middle; + float: right; +} + +.ztree li span.button.remove { + margin-right: 4px; + background-position: -110px -64px; + vertical-align: top; + *vertical-align: middle; + float: right; +} + +.ztree-select .ztree li a { + border: 1px solid #fff !important; +} + +/*table*/ + +table, +.dataTables_length, +.dataTables_info, +.dataTables_paginate { + font-size: 12px; +} + +table .heading { + font-size: 14px; + background: #fff !important; +} + +table.dataTable tbody th, +table.dataTable tbody td { + padding: 8px 10px 4px 10px !important; +} + +table tr:nth-of-type(odd) { + background: #f9f9f9; +} + +table tr:nth-of-type(even) { + background: #fff; +} + +table td:hover { + background-color: #f5f5f5; + border-bottom: 1px solid #d0d0d0; + border-top: 1px solid #d0d0d0; +} + +table tr td label { + cursor: pointer; +} + +.table-btn span { + padding-left: 5px; + padding-right: 5px; +} +.table-bordered>thead>tr>th, .table-bordered>thead>tr>td{ +border-bottom-width:1px; +} +/*select-box with icon*/ + +.iconselect-box .col-xs-1 { + width: 15px; + padding: 110px 0 0 0; +} + +.iconPosition > div { + margin: 20px 0px 0px 0px; +} + +/*-------------C3.css-------------*/ +.c3 path, .c3 line { + stroke: #008acd; +} + +.c3-line { + stroke-width: 3px; +} + +.c3-tooltip { + width: auto; +} + +.c3-tooltip td { + color: #000; +} + +.c3-axis.c3-axis-y { + stroke-width: 1px; +} + +.c3-axis.c3-axis-x { + stroke-width: 1px; +} + +/*checkbox & radio*/ +input[type="checkbox"] { + -webkit-appearance: none; + background: #fff url(../img/checkbox-radio/checkbox-init.png); + height: 18px; + vertical-align: middle; + width: 18px; + margin-bottom:5px; + margin-right:5px; +} + +input[type="checkbox"]:checked { + -webkit-appearance: none; + background: #fff url(../img/checkbox-radio/checkbox-checked.png); + height: 18px; + vertical-align: middle; + width: 18px; +} + +input[type="checkbox"]:focus, +input[type="checkbox"]:hover { + outline: none; +} + +input[type="checkbox"][disabled] { + -webkit-appearance: none; + background: #fff url(../img/checkbox-radio/checkbox-disabled.png); + height: 18px; + vertical-align: middle; + width: 18px; + margin-bottom:5px; + margin-right:5px; +} + +input[type="checkbox"][disabled]:checked { + -webkit-appearance: none; + background: #fff url(../img/checkbox-radio/checkbox-checked-disabled.png); + height: 18px; + vertical-align: middle; + width: 18px; +} + +input[type="radio"] { + -webkit-appearance: none; + background: #fff url(../img/checkbox-radio/radio-init.png); + height: 18px; + vertical-align: middle; + width: 18px; + margin-bottom:5px; + margin-right:5px; +} + +input[type="radio"]:checked { + -webkit-appearance: none; + background: #fff url(../img/checkbox-radio/radio-checked.png); + height: 18px; + vertical-align: middle; + width: 18px; +} + +input[type="radio"]:focus, +input[type="radio"]:hover { + outline: none; +} + +input[type="radio"][disabled] { + -webkit-appearance: none; + background: #fff url(../img/checkbox-radio/radio-disabled.png); + height: 18px; + vertical-align: middle; + width: 18px; + margin-bottom:5px; + margin-right:5px; +} + +input[type="radio"][disabled]:checked { + -webkit-appearance: none; + background: #fff url(../img/checkbox-radio/radio-checked-disabled.png); + height: 18px; + vertical-align: middle; + width: 18px; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/plugins.css b/openo-portal/portal-common/src/main/webapp/common/css/plugins.css new file mode 100644 index 00000000..6fd6fb4f --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/plugins.css @@ -0,0 +1,1561 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/************************** + PLUGIN CSS CUSTOMIZATIONS +**************************/ + +/*** +Calendar with full calendar +***/ +.external-event { + display: inline-block ; + cursor:move; + margin-bottom: 5px ; + margin-left: 5px ; +} + +.portlet .event-form-title { + font-size: 14px; + margin-top: 4px; + font-weight: 400; + margin-bottom: 10px; +} + +.portlet.calendar .fc-button { + -webkit-box-shadow: none ; + -moz-box-shadow: none ; + box-shadow: none ; + text-shadow: none; + border: 0 ; + padding: 6px 8px 30px 8px ; + margin-left:2px; + border-top-style: none; + border-bottom-style: none; + border-right-style: solid; + border-left-style: solid; + border-color: #ddd; + background: transparent; + color: #fff; + top: -46px; +} + +.portlet.calendar .fc-header { + margin-bottom:-21px; +} + +.portlet.calendar .fc-button-prev { + padding-right: 10px; + padding-left: 8px; +} + +.portlet.calendar .fc-button-next { + padding-right: 8px; + padding-left: 10px; +} + +.portlet.calendar .fc-button.fc-state-active, +.portlet.calendar .fc-button.fc-state-hover { + color: #666 ; + background-color: #F9F9F9 ; +} + +.portlet.calendar .fc-button.fc-state-disabled { + color: #ddd ; +} + +.portlet.calendar .fc-text-arrow { + font-size: 22px; + font-family: "Courier New", Courier, monospace; + vertical-align: baseline; +} + +/* begin: event element */ +.portlet.calendar .fc-event { + border: 0px; + background-color: #69a4e0; + color: #fff; +} + +.portlet.calendar .fc-event-inner { + border: 0px; +} + +.portlet.calendar .fc-event-time { + float: left; + text-align: left; + color: #fff; + font-size: 13px; + font-weight: 300; +} + +.portlet.calendar .fc-event-title { + text-align: left; + float: left; + color: #fff; + font-size: 13px; + font-weight: 300; +} +/* end: event element */ + +.portlet.calendar .fc-header-title h2 { + font-size: 14px ; + line-height: 20px; + font-weight: 400; + color: #111; +} + +.portlet.calendar .fc-widget-header { + background-image: none ; + filter:none; + background-color: #eee ; + text-transform: uppercase; + font-weight: 300; +} + +.portlet.calendar .mobile .fc-button { + margin-left: 2px ; +} + +.portlet.calendar .mobile .fc-button { + padding: 0px 6px 20px 6px ; + margin-left:2px ; + border: 0; + background-color: #ddd ; + background-image: none; + -webkit-box-shadow: none ; + -moz-box-shadow: none ; + box-shadow: none ; + -webkit-border-radius: 0 ; + -moz-border-radius: 0 ; + border-radius: 0 ; + color: #000; + text-shadow: none ; + text-align: center; +} + +.portlet.calendar .mobile .fc-state-hover, +.portlet.calendar .mobile .fc-state-active { + background-color: #eee ; +} + +.portlet.calendar .mobile .fc-button-prev { + margin-right: 5px; + margin-top: -2px; +} + +.portlet.calendar .mobile .fc-button-next { + margin-right: -0px; + margin-top: -2px; +} + +.portlet.calendar .mobile .fc-header-space { + margin: 0px ; + padding: 0px ; + width: 0px ; +} + + .portlet.calendar .mobile .fc-state-disabled { + color: #bbb ; + } + + .portlet.calendar .mobile .fc-header-left { + position: absolute; + z-index: 10; + } + + .portlet.calendar .mobile .fc-header-right { + position: absolute; + z-index: 9; + } + + .portlet.calendar .mobile .fc-header-left .fc-button { + top: -2px ; + } + + .portlet.calendar .mobile .fc-header-right { + position: relative; + right:0; + } + + .portlet.calendar .mobile .fc-header-right .fc-button { + top: 35px ; + } + + .portlet.calendar .mobile .fc-content { + margin-top: 53px; + } + + +/*** +Form wizard +***/ + +.form-wizard .progress { + margin-bottom: 30px; +} + +.form-wizard .steps { + //padding: 10px 0; + //margin-bottom: 15px; +} + +.form-wizard .steps { + background-color: #fff ; + background-image: none ; + filter:none ; + border: 0px; + box-shadow: none ; +} + +.form-wizard .steps li a { + background-color: #fff ; + background-image: none ; + filter:none; + border: 0px; + box-shadow: none ; +} + +.form-wizard .steps li a:hover { + background: none; +} + +.form-wizard .step:hover { + text-decoration: none; +} + +.form-wizard .step .number { + background-color: #eee; + display: inline-block; + text-align: center !important; + font-size: 16px; + font-weight: 300; + padding: 11px 15px 13px 15px; + margin-right: 10px; + height: 45px; + width: 45px; + -webkit-border-radius: 50% !important; + -moz-border-radius: 50% !important; + border-radius: 50% !important; +} + +.form-wizard .step .desc { + display: inline-block; + font-size: 16px; + font-weight: 300; +} + +.form-wizard .active .step .number { + background-color: #35aa47; + color: #fff; +} + +.form-wizard .active .step .desc { + color: #333; + font-weight: 400; +} + +.form-wizard .step i { + display: none; +} + +.form-wizard .done .step .number { + background-color: #f2ae43; + color: #fff; +} + +.form-wizard .done .step .desc { + font-weight: 400; +} + +.form-wizard .done .step i { + font-size: 12px; + font-weight: normal; + color: #999; + display: inline-block; +} + + +@media (min-width: 600px) and (max-width: 1280px) { + .form-wizard .step .desc { + margin-top: 10px; + display: block; + } +} + +@media (max-width: 600px) { + .form-wizard .steps > li > a { + text-align: left; + } +} + +@media (min-width: 600px){ + .nav-justified>li{ + display:table-cell; + width:1%; + } +} + +/*** +Google Maps +***/ +.gmaps { + height: 300px; + width: 100%; +} + +/* important! bootstrap sets max-width on img to 100% which conflicts with google map canvas*/ +.gmaps img { + max-width: none; +} + +#gmap_static div{ + background-repeat: no-repeat ; + background-position: 50% 50% ; + height:100%; + display:block; + height: 300px; +} + +#gmap_routes_instructions { + margin-top: 10px; + margin-bottom: 0px; +} + +/*** +SlimScrollBar plugins css changes +***/ +.scroller { + padding: 0px ; + margin: 0px ; + padding-right: 12px ; + overflow: hidden; +} + +.scroller-footer { + margin-top: 10px; +} + +.scroller-footer:after, +.scroller-footer:before { + content: ""; + display: table; + line-height: 0; +} + +.scroller-footer:after { + clear: both; +} + +.portlet-body .slimScrollBar { + margin-right: 0px ; +} + +/*** +jqvmap changes +***/ +.jqvmap-zoomin { + height: 16px; + width: 16px; + background-color: #666 ; +} + +.jqvmap-zoomout { + height: 16px; + width: 16px; + background-color: #666 ; +} + +.vmaps { + position: relative; + overflow: hidden; + height: 300px; +} + + +/*** +Error state for WYSIWYG Editors +***/ +.has-error .md-editor, +.has-error .wysihtml5-sandbox, +.has-error .cke { + border: 1px solid #B94A48 !important; +} + +.has-success .md-editor, +.has-success .wysihtml5-sandbox, +.has-success .cke { + border: 1px solid #468847 !important; +} + +/*** +Select2 plugin css changes +***/ + +/* enable form validation classes for select2 dropdowns */ +.has-error .select2-container .select2-choice { + border-color: #B94A48; +} + +.has-error .select2-container.select2-dropdown-open .select2-choice { + border-color: #e5e5e5; +} + +.has-error .select2-container.select2-dropdown-open .select2-choice > span { + color: #999999; +} + +.has-success .select2-container .select2-choice { + border-color: #468847; +} + +.has-success .select2-container.select2-dropdown-open .select2-choice { + border-color: #e5e5e5; +} + +.has-success .select2-container.select2-dropdown-open .select2-choice > span { + color: #999999; +} + + +/*** +Jansy File Input plugin css changes +***/ +.fileinput { + margin-bottom: 0; +} + + +/*** +WYSIWYG +***/ +.wysihtml5-toolbar li { + margin: 0px; + height: 29px; +} + +.wysihtml5-toolbar li .dropdown-menu { + margin-top: 5px; +} + +/*** +CKEditor css changes +***/ +.cke_bottom, +.cke_inner, +.cke_top, +.cke_reset, +.cke_dialog_title, +.cke_dialog_footer, +.cke_dialog { + background-image: none !important; + filter:none ; + border-top: 0 ; + border-bottom: 0 ; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + text-shadow:none ; +} + +.cke_dialog_ui_button, +.cke_dialog_tab { + background-image: none !important; + filter:none ; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + text-shadow:none !important; +} + +.cke_dialog_ui_button:hover, +.cke_dialog_tab:hover { + text-decoration: none; + text-shadow:none ; +} + +.cke_dialog_ui_input_text { + background-image: none !important; + filter:none ; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.cke_combo_button, +.cke_button, +.cke_toolbar, +.cke_toolgroup { + background-image: none !important; + filter:none !important; + border: 0 ; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.cke_button, +.cke_combo_button, +.cke_panel_grouptitle, +.cke_hc.cke_panel_listItem a { + background-image: none !important; + filter:none ; + text-shadow:none ; + -webkit-border-radius: 0px !important; + -moz-border-radius: 0px !important; + -ms-border-radius: 0px !important; + -o-border-radius: 0px !important; +} + +.cke_button:hover, +.cke_combo_button:hover { + background-color: #ddd; +} + +.cke_toolbar_break { + background-image: none !important; + filter:none !important; + border: 0 ; + box-shadow: none !important; + -webkit-box-shadow : none !important; + -moz-box-shadow: none !important; + -ms-box-shadow: none !important; + -o-box-shadow: none !important; +} + +/*** +Modify tags input plugin css +***/ +div.tagsinput { + min-height: 35px; + height: auto !important; + margin: 0; + padding: 5px 5px 0px 5px; + overflow: auto; +} + +div.tagsinput span.tag { + background: #aaa ; + color: #fff ; + border: 0 ; + padding: 3px 6px; + margin-top: 0; + margin-bottom: 5px; +} + +div.tagsinput input { + padding: 3px 6px ; + width: 75px !important; +} + +div.tagsinput span.tag a { + color: #fff ; +} + +div.tagsinput .not_valid { + color: #fff ; + padding: 3px 6px ; + background-color: #e02222 ; +} + +/*** +Gritter notification modify +***/ + +#gritter-notice-wrapper { + right:1px !important; +} + +.gritter-close { + left:auto !important; + right: 3px !important; +} + +.gritter-title { + font-family: 'Open Sans' ; + font-size: 18px ; + font-weight: 300 ; +} + +/*** +jQuery UI Sliders(new in v1.1.1) +***/ +.slider { + border: 0; + padding: 0; + display: block; + margin: 12px 5px; + min-height: 11px; +} + +.ui-slider-vertical { + width: 11px; +} + +.ui-slider-horizontal .ui-slider-handle { + top: -3px; +} + +.ui-slider-vertical .ui-slider-handle { + left: -3px; +} + +.ui-slider-vertical, +.ui-slider-handle { + filter: none !important; + background-image: none !important; +} + +/*** +Dropzone css changes(new in v1.1.1) +***/ +.dropzone { + -webkit-border-radius: 0px ; + -moz-border-radius: 0px ; + border-radius: 0px ; +} + + +/*** +Dashboard Charts(new in v1.2.1) +***/ +.easy-pie-chart, +.sparkline-chart { + text-align: center; +} + +.sparkline-chart { + margin-top: 15px; + position:relative ; +} + +.easy-pie-chart .number { + font-size: 16px; + font-weight: 300; + width: 85px; + margin: 0 auto; +} + +.sparkline-chart .number { + width: 100px; + margin: 0 auto; + margin-bottom: 10px; +} + +.sparkline-chart .title, +.easy-pie-chart .title { + display: block; + text-align: center; + color: #333; + font-weight: 300; + font-size: 16px; + margin-top: 5px; + margin-bottom: 10px; +} + +.sparkline-chart .title:hover, +.easy-pie-chart .title:hover { + color: #666; + text-decoration: none; +} + +.sparkline-chart .title > i, +.easy-pie-chart .title > i { + margin-top: 5px; +} + +/*** +Fancy box fix overlay fix(in v1.2.4) +***/ +.fancybox-overlay { + z-index: 10000 ; +} + +/*** +Datatables Plugin(in v1.3) +***/ +.dataTable { + width: 100% !important; + clear: both; + /*margin-top: 5px;*/ +} + +.dataTables_filter label { + line-height: 32px ; +} + +.dataTable .row-details { + margin-top: 3px; + display: inline-block; + cursor: pointer; + width: 14px; + height: 14px; +} + +.dataTable .row-details.row-details-close { + background: url("../img/datatable-row-openclose.png") no-repeat 0 0; +} + +.dataTable .row-details.row-details-open { + background: url("../img/datatable-row-openclose.png") no-repeat 0 -23px ; +} + +.dataTable .details { + background-color: #eee ; +} + +.dataTable .details td, +.dataTable .details th { + padding: 4px; + background: none ; + border: 0; +} + +.dataTable .details tr:hover td, +.dataTable .details tr:hover th { + background: none ; +} + +.dataTable .details tr:nth-child(odd) td, +.dataTable .details tr:nth-child(odd) th { + background-color: #fff ; +} + +.dataTable .details tr:nth-child(even) td, +.dataTable .details tr:nth-child(even) th { + background-color: #eee ; +} + +.dataTable > thead > tr > th.sorting, +.dataTable > thead > tr > th.sorting_asc, +.dataTable > thead > tr > th.sorting_desc { + padding-right: 18px; +} + +.dataTable .table-checkbox { + width: 8px !important; +} + +@media (max-width: 768px) { + .dataTables_wrapper .dataTables_length .form-control, + .dataTables_wrapper .dataTables_filter .form-control { + display: inline-block; + } + + /* .dataTables_wrapper .dataTables_info { + top: 17px; + }*/ + +/* .dataTables_wrapper .dataTables_paginate { + margin-top: -15px; + }*/ +} + +@media (max-width: 480px) { + .dataTables_wrapper .dataTables_filter .form-control { + width: 175px !important; + } + + .dataTables_wrapper .dataTables_paginate { + float: left; + margin-top: 20px; + } +} + +.dataTables_processing { + position: fixed; + top: 50%; + left: 50%; + min-width: 125px; + margin-left: 0; + padding: 7px; + text-align: center; + color: #333; + font-size: 13px; + border: 1px solid #ddd; + background-color: #eee; + vertical-align: middle; + -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); +} + +.dataTables_processing span { + line-height:15px; + vertical-align: middle; +} + +.dataTables_empty { + text-align: center; +} + +/*** +Extended Datatable +***/ +.dataTables_extended_wrapper { + position: relative !important; + clear: both !important; +} +.dataTables_extended_wrapper .seperator { + padding: 0 2px; +} + +.dataTables_extended_wrapper .dataTables_paginate, +.dataTables_extended_wrapper .dataTables_length, +.dataTables_extended_wrapper .dataTables_info { + display: inline-block; + float: none !important; + padding: 0 !important; + margin: 0 !important; + position: static !important; + font-size: 13px; +} + +@media (max-width: 480px) { + + .dataTables_extended_wrapper .dataTables_paginate, + .dataTables_extended_wrapper .dataTables_length, + .dataTables_extended_wrapper .dataTables_info { + display: block; + margin-bottom: 10px !important; + } + + .dataTables_extended_wrapper .seperator { + display: none; + } +} + +.dataTables_extended_wrapper .dataTables_length label { + margin: 0 !important; + padding: 0 !important; + font-size: 13px; + float: none !important; + display: inline-block !important; +} + +.table-container .table-actions-wrapper { + display: none; +} + +/*** +Password Strength(in v1.4) +***/ +.password-strength .password-verdict { + display: inline-block; + margin-top: 6px; + margin-left: 5px; +} + +.password-strength .progress { + margin-top: 5px; + margin-bottom: 0; +} + +.password-strength .progress-bar { + padding: 2px; +} + +/*** +Uniform disabled checkbox, radio button fix(in v1.4) +***/ + +.table .uniform-inline { + padding: 0; + margin: 0; +} + +.checker { + margin-top: -2px !important; + margin-right: 2px !important; + display:inline; +} + +.checker input, +.radio input { + outline: none !important; +} + +div.checker.disabled span, +div.checker.disabled.active span{ + background-position: -152px -260px; +} + +div.checker.disabled:hover, +div.radio.disabled:hover { + cursor: not-allowed; +} + +div.radio, +div.checker { + margin-right: 0; + margin-left: 3px; +} + +/*** +jQuery Sparkline +***/ +.jqstooltip { + width: auto !important; + height: auto !important; +} + + +/*** +jQuery Multi Select +***/ + +.ms-container .ms-list { + border: 1px solid #e5e5e5; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + +} + +.ms-container .ms-optgroup-label{ + font-size: 14px; +} + +.ms-container .ms-selectable li.ms-elem-selectable, +.ms-container .ms-selection li.ms-elem-selection{ + font-size: 13px; +} + +.ms-container .ms-list.ms-focus { + border-color: #999999; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.ms-container .ms-selectable li.ms-hover, +.ms-container .ms-selection li.ms-hover{ + color: #333; + background-color: #eee; +} + +.ms-container .form-control { + margin-bottom: 5px; +} + +/*** +Bootstrap Colorpicker +***/ +.input-group.color .input-group-btn i { + position: absolute; + display: block; + cursor: pointer; + width: 20px; + height: 20px; + right: 6px; +} + +.colorpicker.dropdown-menu { + padding: 5px; +} + +/* change z-index when opened in modal */ +.modal-open .colorpicker { + z-index: 10055 !important; +} + +/*** +Bootstrap Datetimepicker +***/ + +.datetimepicker table td { + font-weight: 300 !important; + font-family: 'Open Sans' !important; +} + +.datetimepicker table th { + font-family: 'Open Sans' !important; + font-weight: 400 !important; +} + +.datetimepicker.dropdown-menu { + padding: 5px; +} + +.datetimepicker .active { + background-color:#4b8df8 !important; + background-image: none !important; + filter: none !important; +} + +.datetimepicker .active:hover { + background-color: #2678FC !important; + background-image: none !important; + filter: none !important; + +} + +/* change z-index when opened in modal */ +.modal-open .datetimepicker { + z-index: 10055 !important; +} + +/*** +Bootstrap Time Picker +***/ +.bootstrap-timepicker-widget table td a { + padding: 4px 0; +} + +.bootstrap-timepicker-widget input, +.bootstrap-timepicker-widget input:focus { + outline: none !important; + border: 0; +} + +.modal-open .bootstrap-timepicker-widget { + z-index: 10055 !important; +} + +.bootstrap-timepicker-widget.timepicker-orient-bottom:before, +.bootstrap-timepicker-widget.timepicker-orient-bottom:after { + top: auto; +} + +/*** +Bootstrap Datepicker +***/ + +.datepicker.dropdown-menu { + padding: 5px; +} + +.datepicker .selected { + background-color:#909090 !important; + background-image: none !important; + filter: none !important; +} + +.datepicker .active { + background-color:#4b8df8 !important; + background-image: none !important; + filter: none !important; +} + +.datepicker .active:hover { + background-color: #2678FC !important; + background-image: none !important; + filter: none !important; +} + +.datepicker .input-daterange input { + text-align: left; +} + +/* change z-index when opened in modal */ +.modal-open .datepicker { + z-index: 10055 !important; +} + +.datepicker table td { + font-weight: 300 !important; + font-family: 'Open Sans' !important; +} + +.datepicker table th { + font-family: 'Open Sans' !important; + font-weight: 400 !important; +} + + +/*** +Clockface +***/ + +.modal-open .clockface { + z-index: 10055 !important; +} + +.clockface .cell .inner.active, +.clockface .cell .outer.active { + background-color:#4b8df8 !important; + background-image: none ; + filter:none ; +} + + +/*** +Bootstrap Daterangepicker +***/ + +.modal-open .daterangepicker { + z-index: 10055 !important; +} + +.daterangepicker td { + text-shadow: none ; +} + +.daterangepicker td.active { + background-color: #4b8df8 ; + background-image: none ; + filter:none ; +} + +.daterangepicker th { + font-weight: 400; + font-size: 14px; +} + +.daterangepicker .ranges input[type="text"] { + width: 70px !important; + font-size: 11px; + vertical-align: middle; +} + +.daterangepicker .ranges label { + font-weight: 300; + display: block; +} + +.daterangepicker .ranges .btn { + margin-top: 10px; +} + +.daterangepicker.dropdown-menu { + padding: 5px; +} + +.daterangepicker .ranges li { + color: #333; +} + +.daterangepicker .ranges li.active, +.daterangepicker .ranges li:hover { + background: #4b8df8 !important; + border: 1px solid #4b8df8 !important; + color: #fff; +} + +.daterangepicker .range_inputs input { + margin-bottom: 0 !important; +} + +/*** +Bootstrap Editable +***/ + +.editable-input table, +.editable-input table th, +.editable-input table td, +.editable-input table tr { + border: 0 !important; +} + +.editable-input .combodate select { + margin-bottom: 5px; +} + +/*** +FuelUX Spinners +***/ + +.spinner-buttons.btn-group-vertical .btn { + text-align: center; + margin: 0; + height: 17px; + width: 22px; + padding-left: 6px; + padding-right: 6px; + padding-top: 0px; +} + + +/*** +NoUI Range Sliders +***/ +.noUi-handle { + height: 20px; + width: 20px; + margin: -3px 0 0 -20px; +} + +.noUi-base { + height: 16px; +} + +.noUi-connect { + background: #ffb848; +} + +/*** +Toastr Notifications +***/ +.toast { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.toast { + background-color: #030303; +} +.toast-success { + background-color: #51a351; +} +.toast-error { + background-color: #bd362f; +} +.toast-info { + background-color: #2f96b4; +} +.toast-warning { + background-color: #f89406; +} + +.toast .toast-close-button { + display: inline-block; + margin-top: 0px; + margin-right: 0px; + text-indent: -100000px; + width: 11px; + height: 16px; + background-repeat: no-repeat !important; + background-image: url("../img/portlet-remove-icon-white.png") !important; +} + +.toast-top-center { + top: 12px; + margin: 0 auto; + left: 50%; + margin-left: -150px; +} + +.toast-bottom-center { + bottom: 12px; + margin: 0 auto; + left: 50%; + margin-left: -150px; +} + +/*** +Google reCaptcha +***/ +.form-recaptcha-img { + margin-bottom: 10px; + clear: both; + border: 1px solid #e5e5e5; + padding: 5px; +} + +iframe[src="about:blank"] { + display:none; +} + +/*** +Bootstrap Markdown +***/ +.md-input { + padding: 5px !important; + border-bottom: 0 !important; +} + +.md-editor .btn-toolbar { + margin-left: 0px; +} + +.md-editor.active { + border: 1px solid #999999; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +/*** +Bootstrap Datepaginator +***/ +.datepaginator a { + font-family: 'Open Sans'; + font-size: 13px; + font-weight: 300; +} + +.datepicker .today { + background-image: none !important; + filter: none !important; +} + +#dp-calendar { + right: 4px !important; +} + +/*** +Font Awesome 4.0 Demo +***/ +.fa-item { + font-size: 14px; + padding: 10px 10px 10px 20px; +} + +.fa-item i { + font-size: 16px; + display: inline-block; + width: 20px; +} + +.fa-item:hover { + cursor: pointer; + background: #eee; +} + +/*** +Bootstrap Modal +***/ +/* fix: content shifting to the right on modal open */ +.modal-open.page-overflow .page-container, +.modal-open.page-overflow .page-container .navbar-fixed-top, +.modal-open.page-overflow .page-container .navbar-fixed-bottom, +.modal-open.page-overflow .modal-scrollable { + overflow-y: auto !important; +} + +.modal-scrollable { + overflow: hidden !important; +} + + +/*** +jQuery Notific8 Plugin +***/ + +.jquery-notific8-message { + font-size: 13px; +} + +[class*="jquery-notific8"], +[class*="jquery-notific8"]:after, +[class*="jquery-notific8"]:before { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.right .jquery-notific8-close-sticky span, +.left .jquery-notific8-close-sticky span { + font-size: 10px; +} + +.jquery-notific8-heading { + font-weight: 300; + font-size: 16px; +} + +/*** +jQuery File Upload +***/ + +.blueimp-gallery .close { + background-image: url("../img/portlet-remove-icon-white.png") !important; + margin-top: -2px; +} + +.blueimp-gallery .prev, +.blueimp-gallery .next { + border-radius: 23px !important; +} + +/*** +Bootstrap Switch +***/ + +.has-switch { + border-color: #e5e5e5; +} + +.has-switch:focus { + -webkit-box-shadow: none; + box-shadow: none; +} + +/*** +Jstree +***/ + +.jstree-default .jstree-clicked { + border: 0; + background-color: #e1e1e1; + box-shadow:none; +} + +.jstree-default .jstree-hovered { + border: 0; + background-color: #eee; + box-shadow:none; +} + +.jstree-default .jstree-wholerow-clicked, +.jstree-wholerow .jstree-wholerow-clicked { + background: none; + border: 0; + background-color: #e1e1e1; + box-shadow:none; +} + +.jstree-default .jstree-wholerow-hovered, +.jstree-wholerow .jstree-wholerow-hovered { + border: 0; + background-color: #eee; + box-shadow:none; +} + +.jstree-icon.icon-lg { + margin-top: 1px; +} + +.jstree-open > .jstree-anchor > .fa-folder:before { + margin-left: 2px; + content: "\f07c"; +} + +.jstree-default.jstree-rtl .jstree-last { + background: transparent; + background-repeat: no-repeat; +} + +.vakata-context, +.vakata-context ul { + padding: 0; + min-width: 125px; + background-color: #ffffff; + -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + font-size: 14px; + font-family: "Segoe UI",Helvetica, Arial, sans-serif; + border: 1px solid #ddd; +} + +.vakata-context li a { + padding: 0 10px; +} + +.vakata-context .vakata-context-hover > a, +.vakata-context li a:hover { + background-color: #eee; + color: #333; + box-shadow: none; +} + +.vakata-context li a span, +.vakata-context li a ins { + display: none; +} + +.vakata-context .vakata-context-separator a, +.vakata-context-rtl .vakata-context-separator a { + margin: 0; +} + +.jstree-rename-input { + background-color: #ffffff !important; + border: 1px solid #e5e5e5 !important; + outline: none !important; + padding: 2px 6px !important; + margin-right: -4px !important; +} + +/*** +Bootstrap Select +***/ + +.bootstrap-select .btn { + border-color: #e5e5e5; +} + +.bootstrap-select.open .btn1 { + border-color: #999999; +} + +.bootstrap-select.open.dropup .btn1 { + border-color: #999999; +} + +.bootstrap-select .btn:focus { + outline: none !important; + outline-offset: 0; +} + +.bootstrap-select.btn-group .dropdown-menu { + margin-top: 1px; +} + +.bootstrap-select.btn-group .dropdown-menu > li > dt > .text { + font-weight: 600; + font-family: 'Open Sans'; + font-size: 14px; +} + +.bootstrap-select.btn-group .dropdown-menu .text-muted { + color: #999 !important; +} + +.bootstrap-select .caret { + border: 0; + width: auto; + height: auto; + margin-top: -10px !important; +} + +.bootstrap-select .caret:before { + content: "\f107"; + display: inline-block; + border: 0; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; +} + +.bootstrap-select .selected i { + color: #aaa; +} + +/*** +Pace - Page Progress +***/ + +.pace .pace-progress { + z-index: 10000; + top: 40px; + height: 2px; +} + +.pace .pace-progress-inner { + box-shadow: none; +} + +.pace .pace-activity { + top: 44px; + right: 22px; + border-radius: 10px !important; +} + + +@media (max-width: 480px) { + + .page-header-fixed .pace .pace-progress { + top: 82px; + } + + .page-header-fixed .pace .pace-activity { + top: 88px; + right: 15px; + } + +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/print.css b/openo-portal/portal-common/src/main/webapp/common/css/print.css new file mode 100644 index 00000000..b2a7d76c --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/print.css @@ -0,0 +1,53 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +body { + background-color: #fff !important; +} + +.header { + display: none; +} + +.page-sidebar { + display: none; +} + +.theme-panel { + display: none; +} + +.hidden-print { + display: none; +} + +.footer { + display: none; +} + +.no-page-break { + page-break-after: avoid; +} + +.page-container { + margin: 0px !important; + padding: 0px !important; +} + +.page-content { + min-height: auto !important; + padding: 0px 20px 20px !important; + margin: 0 !important; +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-custom.css b/openo-portal/portal-common/src/main/webapp/common/css/style-custom.css new file mode 100644 index 00000000..e327a31b --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/style-custom.css @@ -0,0 +1,1510 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/* remove rounds from all elements */ + +div, +input, +select, +textarea, +span, +img, +table, +td, +th, +p, +a, +button, +ul, +code, +pre, +li { + //-webkit-border-radius: 0 !important; + //-moz-border-radius: 0 !important; + //border-radius: 0 !important; +} + +/*** +Buttons & Dropdown Buttons +***/ + +.btn { + border-width: 0; + padding: 7px 14px; + font-size: 14px; + outline: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + //-webkit-border-radius: 0 !important; + //-moz-border-radius: 0 !important; + //border-radius: 0 !important; + text-shadow: none; +} + +/* fix jumping group buttons */ +.btn-group.btn-group-solid .btn + .btn, +.btn-group.btn-group-solid .btn + .btn-group.btn-group-solid, +.btn-group.btn-group-solid .btn-group.btn-group-solid + .btn, +.btn-group.btn-group-solid .btn-group.btn-group-solid + .btn-group.btn-group-solid { + margin-left: 0px; +} + +.btn-group-vertical.btn-group-solid > .btn + .btn, +.btn-group-vertical.btn-group-solid > .btn + .btn-group, +.btn-group-vertical.btn-group-solid > .btn-group + .btn, +.btn-group-vertical.btn-group-solid > .btn-group + .btn-group { + margin-top: 0px; + margin-left: 0; +} + +.btn-default { + border-width: 1px; + padding: 6px 13px; +} + +.btn.red-stripe { + border-left: 3px solid #d84a38; +} + +.btn.blue-stripe { + border-left: 3px solid #4d90fe; +} + +.btn.purple-stripe { + border-left: 3px solid #852b99; +} + +.btn.green-stripe { + border-left: 3px solid #35aa47; +} + +.btn.yellow-stripe { + border-left: 3px solid #ffb848; +} + +.btn.dark-stripe { + border-left: 3px solid #555555; +} + +.btn.default { + color: #333333; + text-shadow: none; + background-color: #e5e5e5; +} +.btn.default:hover, +.btn.default:focus, +.btn.default:active, +.btn.default.active, +.btn.default[disabled], +.btn.default.disabled { + color: #333333; + background-color: #d8d8d8 !important; + outline: none !important; +} + +/* Red */ +.btn.red { + color: white; + text-shadow: none; + background-color: #d84a38; +} +.btn.red:hover, +.btn.red:focus, +.btn.red:active, +.btn.red.active, +.btn.red[disabled], +.btn.red.disabled { + background-color: #bb2413 !important; + color: #fff !important; + outline: none !important; +} + +/* Blue */ + +.btn.blue { + color: white; + text-shadow: none; + background-color: #4d90fe; +} +.btn.blue:hover, +.btn.blue:focus, +.btn.blue:active, +.btn.blue.active, +.btn.blue[disabled], +.btn.blue.disabled { + background-color: #0362fd !important; + color: #fff !important; + outline: none !important; +} + +.btn-group .btn.blue.dropdown-toggle { + background-color: #4d90fe !important; +} +.btn-group .btn.blue:hover, +.btn-group .btn.blue:focus, +.btn-group .btn.blue:active, +.btn-group .btn.blue.active, +.btn-group .btn.blue.disabled, +.btn-group .btn.blue[disabled] { + background-color: #0362fd !important; + color: #fff !important; + outline: none !important; +} + +/* Green */ +.btn.green { + color: white; + text-shadow: none; + background-color: #35aa47; +} +.btn.green:hover, +.btn.green:focus, +.btn.green:active, +.btn.green.active, +.btn.green.disabled, +.btn.green[disabled]{ + background-color: #1d943b !important; + color: #fff !important; + outline: none !important; +} + +/* Purple */ +.btn.purple { + color: white; + text-shadow: none; + background-color: #852b99; +} +.btn.purple:hover, +.btn.purple:focus, +.btn.purple:active, +.btn.purple.active, +.btn.purple.disabled, +.btn.purple[disabled] { + background-color: #6d1b81 !important; + color: #fff !important; + outline: none !important; +} + +.btn-group .btn.purple.dropdown-toggle { + background-color: #852b99 !important; +} +.btn-group .btn.purple:hover, +.btn-group .btn.purple:focus, +.btn-group .btn.purple:active, +.btn-group .btn.purple.active, +.btn-group .btn.purple.disabled, +.btn-group .btn.purple[disabled] { + background-color: #6d1b81 !important; + color: #fff !important; + outline: none !important; +} + +/* Yellow */ +.btn.yellow { + color: white; + text-shadow: none; + background-color: #ffb848; +} +.btn.yellow:hover, +.btn.yellow:focus, +.btn.yellow:active, +.btn.yellow.active, +.btn.yellow.disabled, +.btn.yellow[disabled] { + background-color: #eca22e !important; + color: #fff !important; + outline: none !important; +} + +.btn-group .btn.yellow.dropdown-toggle { + background-color: #ffb848 !important; +} +.btn-group .btn.yellow:hover, +.btn-group .btn.yellow:focus, +.btn-group .btn.yellow:active, +.btn-group .btn.yellow.active, +.btn-group .btn.yellow.disabled, +.btn-group .btn.yellow[disabled] { + background-color: #eca22e !important; + color: #fff !important; + outline: none !important; +} + +/* Black */ +.btn.dark { + color: white; + text-shadow: none; + background-color: #555555; +} +.btn.dark:hover, +.btn.dark:focus, +.btn.dark:active, +.btn.dark.active, +.btn.dark.disabled, +.btn.dark[disabled] { + background-color: #222222 !important; + color: #fff !important; + outline: none !important; +} + +.btn-group .btn.dark.dropdown-toggle { + background-color: #555555 !important; +} +.btn-group .btn.dark:hover, +.btn-group .btn.dark:focus, +.btn-group .btn.dark:active, +.btn-group .btn.dark.active, +.btn-group .btn.dark.disabled, +.btn-group .btn.dark[disabled] { + background-color: #222222 !important; + color: #fff !important; + outline: none !important; +} + +.btn-lg { + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + vertical-align: middle; +} + +.btn-lg > i { + font-size: 18px; +} + +.btn > i { + font-size: 14px; +} + +.btn-sm, +.btn-xs { + padding: 4px 10px 5px 10px; + font-size: 13px; + line-height: 1.5; +} + +.btn-sm > i, +.btn-xs > i { + font-size: 13px; +} + +.btn-xs { + padding: 1px 5px; +} + +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} + +/*** +Metro icons +***/ + +[class^="m-icon-"] { + display: inline-block; + width: 14px; + height: 14px; + margin-top: 3px; + line-height: 14px; + vertical-align: top; + background-image: url(../img/syncfusion-icons.png); + background-position: 0 0; + background-repeat: no-repeat; +} + +[class^="m-icon-big-"] { + display: inline-block; + width: 30px; + height: 30px; + margin: 6px; + vertical-align: middle; + background-image: url(../img/syncfusion-icons.png); + background-position: 0 0px; + background-repeat: no-repeat; +} + +/* large icons */ +.btn.m-icon-big { + padding: 9px 16px 8px 16px; +} + +.btn.m-icon-big.m-icon-only{ + padding: 9px 8px 8px 0px; +} + +.btn.m-icon-big [class^="m-icon-big-"] { + margin: 0 0 0 10px; +} + +.btn.m-icon-ony > i { + margin-left: 0px; +} + +/* default icons */ +.btn.m-icon { + padding: 7px 14px 7px 14px; +} + +.btn.m-icon [class^="m-icon-"] { + margin: 4px 0 0 5px; +} + +.btn.m-icon.m-icon-only { + padding: 7px 10px 7px 6px; +} + +/* white icon */ +.m-icon-white { + background-image: url(../img/syncfusion-icons-white.png); +} + +/* Misc */ +.m-icon-swapright { + background-position: -27px -10px; +} +.m-icon-swapdown { + background-position: -68px -10px; +} +.m-icon-swapleft { + background-position: -8px -10px; +} +.m-icon-swapup { + background-position: -46px -10px; +} +.m-icon-big-swapright{ + background-position: -42px -28px; +} +.m-icon-big-swapdown{ + background-position: -115px -28px; +} +.m-icon-big-swapleft{ + background-position: -6px -28px; +} +.m-icon-big-swapup{ + background-position: -78px -28px; +} + + +/*** +Popover + ***/ +.popover { + -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); + padding: 0 !important; +} + +.popover .popover-title { + -webkit-border-radius: 0 !important; + -moz-border-radius: 0 !important; + border-radius: 0 !important; + margin: 0 !important; +} + +.info .popover .popover-title, +.popover.info .popover-title, +.info .popover .popover-content, +.popover.info .popover-content { + color:#27a9e3; +} + +.success .popover .popover-title, +.popover.success .popover-title, +.success .popover .popover-content, +.popover.success .popover-content { + color:#468847; +} + +.error .popover .popover-title, +.popover.error .popover-title, +.error .popover .popover-content, +.popover.error .popover-content { + color:#B94A48; +} + +.warning .popover .popover-title, +.popover.warning .popover-title, +.warning .popover .popover-content, +.popover.warning .popover-content { + color:#C09853; +} + +.popovers.yellow + .popover { + background: yellow; +} + +.popovers.yellow + .popover .popover-title { + background: yellow; +} + +.popovers.yellow + .popover .popover-content { + background: yellow; +} + +/*** +Dropdown +***/ + + /*Fixing dropdown issue on mobile devices in Bootstrap 3.2.2*/ +.dropdown-backdrop { + position: static; +} + +.dropdown:hover .caret, +.open.dropdown .caret { + opacity: 1; + filter: alpha(opacity=100); +} + + +.dropdown.open .dropdown-toggle { + color: #08c; + background: #ccc; + background: rgba(0, 0, 0, 0.3); +} + +/*** +Dropdown Menu +***/ + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + list-style: none; + text-shadow: none; + padding: 0px; + margin:0px; + background-color: #ffffff; + -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + font-size: 14px; + font-family: "Segoe UI",Helvetica, Arial, sans-serif; + border: 1px solid #ddd; +} + +/* custom dropdown conetnt */ +.dropdown-content { + padding:5px; +} + +.dropdown-content form { + margin:0; +} + +.dropdown.inline .dropdown-menu { + display: inline-block; + position: relative; +} + +.dropdown-menu.bottom-up { + top: auto; + bottom: 100%; + margin-bottom: 2px; +} + +.dropdown-menu li > a { + padding: 6px 0 6px 13px; + color: #333; + text-decoration: none; + display: block; + clear: both; + font-weight: normal; + line-height: 18px; + white-space: nowrap; +} + +.dropdown-menu li > a:hover, +.dropdown-menu .active > a, +.dropdown-menu .active > a:hover { + text-decoration: none; + background-image: none; + background-color: #eee; + color: #333; + filter:none; +} + +/* dropdown sub menu support for Bootsrap 3 */ +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 5px; + left: 100%; + margin-top: -6px; + margin-left: -1px; +} + +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; +} + +.dropdown-submenu > a:after { + position: absolute; + display: inline-block; + font-size: 14px; + right: 7px; + top: 7px; + font-family: FontAwesome; + height: auto; + content: "\f105"; + font-weight: 300; +} + +.dropdown-submenu:hover > a:after { + border-left-color: #ffffff; +} + +.dropdown-submenu.pull-left { + float: none; +} + +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; +} + +.nav.pull-right > li > .dropdown-menu, +.nav > li > .dropdown-menu.pull-right { + right: 0; + left: auto; +} + +.nav.pull-right > li > .dropdown-menu:before, +.nav > li > .dropdown-menu.pull-right:before { + right: 12px; + left: auto; +} + +.nav.pull-right > li > .dropdown-menu:after, +.nav > li > .dropdown-menu.pull-right:after { + right: 13px; + left: auto; +} + +.nav.pull-right > li > .dropdown-menu .dropdown-menu, +.nav > li > .dropdown-menu.pull-right .dropdown-menu { + right: 100%; + left: auto; + margin-right: -1px; + margin-left: 0; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + +@media (max-width: 767px) { + + .navbar-nav .open .dropdown-menu { + position: absolute; + float: left; + width: auto; + margin-top: 0; + background-color: #ffffff; + border: 1px solid #ddd; + -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + } + + .navbar-nav .open .dropdown-menu > li > a { + padding: 6px 0 6px 13px; + color: #333 !important; + } + + .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-nav .open .dropdown-menu > li > a:focus { + background-color: #eee !important; + } + +} + +/*** +Dropdown Checkboxes (in v1.3) +***/ +.dropdown-checkboxes { + padding: 5px; +} + +.dropdown-checkboxes label { + display: block; + font-weight: 300; + color: #333; + margin-bottom: 4px; + margin-top: 4px; +} + + +/*** +Dropdown Menu Badges +***/ + +.dropdown-menu > li > a > .badge { + position: absolute; + margin-top: 1px; + right: 3px; + display: inline; + font-size: 11px; + font-weight: 300; + text-shadow:none; + height: 18px; + padding: 3px 6px 3px 6px; + text-align: center; + vertical-align: middle; + -webkit-border-radius: 12px !important; + -moz-border-radius: 12px !important; + border-radius: 12px !important; +} + +.dropdown-menu > li > a > .badge.badge-roundless { + -webkit-border-radius: 0 !important; + -moz-border-radius: 0 !important; + border-radius: 0 !important; +} + +/* end: sidebar menu badges */ + +/*** +Forms +***/ +code { + border: 1px solid #e1e1e1; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); +} +label { + font-weight: 400; + font-size: 14px; +} + +.form-control:-moz-placeholder { + color: #999999; +} +.form-control::-moz-placeholder { + color: #999999; +} +.form-control:-ms-input-placeholder { + color: #999999; +} +.form-control::-webkit-input-placeholder { + color: #999999; +} +.form-control { + font-size: 14px; + font-weight: normal; + color: #333333; + background-color: #ffffff; + border: 1px solid #e5e5e5; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} +.form-control:focus { + border-color: #999999; + outline: 0; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + cursor: not-allowed; + background-color: #eeeeee; +} + +.form-control.height-auto { + height: auto; +} + +.uneditable-input { + padding: 6px 12px; + min-width: 206px; + font-size: 14px; + font-weight: normal; + height: 34px; + color: #333333; + background-color: #ffffff; + border: 1px solid #e5e5e5; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} + +label.form-control { + display: block; + margin-bottom: 5px; +} + +input[disabled], +select[disabled], +textarea[disabled] { + cursor: not-allowed; + background-color: #F4F4F4 !important; +} + +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: #F9F9F9 !important; +} + +/* input groups */ +.input-group.input-group-fixed { + width: auto !important; +} + +.input-group-addon { + border-color: #e5e5e5; + background: #e5e5e5; + min-width: 39px; +} + +.input-group-addon > i { + color: #999; +} + +/* form control sizing */ +.form-control-inline { + display: inline-block !important; +} + +.input-mini { + width: 45px !important; +} + +.input-xsmall { + width: 80px !important; +} + +.input-small { + width: 120px !important; +} + +.input-medium { + width: 240px !important; +} + +.input-large { + width: 320px !important; +} + +.input-xlarge { + width: 480px !important; +} + +.input-inline { + display: inline-block; + width: auto; + vertical-align: middle; +} + +.form-group .input-inline { + margin-right: 5px; +} + +.input-sm { + height: 28px; + padding: 5px 10px; + font-size: 13px; +} + +select.input-sm { + height: 28px; + line-height: 28px; + padding: 2px 10px; +} + +/*** +Input spinner(in v1.4) +***/ + +input[type="text"].spinner, +input[type="password"].spinner, +input[type="datetime"].spinner, +input[type="datetime-local"].spinner, +input[type="date"].spinner, +input[type="month"].spinner, +input[type="time"].spinner, +input[type="week"].spinner, +input[type="number"].spinner, +input[type="email"].spinner, +input[type="url"].spinner, +input[type="search"].spinner, +input[type="tel"].spinner, +input[type="color"].spinner { + background-image: url("../img/input-spinner.gif") !important; + background-repeat: no-repeat; + background-position: right 8px; +} + +@media (max-width: 768px) { + + .input-large { + width: 250px !important; + } + + .input-xlarge { + width: 300px !important; + } + +} + +/*** +Error States +***/ + +.has-warning .help-inline, +.has-warning .help-block, +.has-warning .control-label { + color: #c09853; +} + +.has-warning .form-control { + border-color: #c09853; + -webkit-box-shadow: none; + box-shadow: none; +} + +.has-warning .form-control:focus { + border-color: #a47e3c; + -webkit-box-shadow: none; + box-shadow: none; +} + +.has-warning .input-group-addon { + color: #c09853; + background-color: #fcf8e3; + border-color: #c09853; +} + +.has-error .help-inline, +.has-error .help-block, +.has-error .control-label { + color: #b94a48; +} + +.has-error .form-control { + border-color: #b94a48; + -webkit-box-shadow: none; + box-shadow: none; +} + +.has-error .form-control:focus { + border-color: #953b39; + -webkit-box-shadow: none; + box-shadow: none; +} + +.has-error .input-group-addon { + color: #b94a48; + background-color: #f2dede; + border-color: #b94a48; +} + +.has-success .help-inline, +.has-success .help-block, +.has-success .control-label { + color: #468847; +} + +.has-success .form-control { + border-color: #468847; + -webkit-box-shadow: none; + box-shadow: none; +} + +.has-success .form-control:focus { + border-color: #356635; + -webkit-box-shadow: none; + box-shadow: none; +} + +.has-success .input-group-addon { + color: #468847; + background-color: #dff0d8; + border-color: #468847; +} + +/*** +Custom label and badges +***/ + +.label, +.badge { + font-weight: 300; + text-shadow: none !important; +} + +.label { + font-size: 12px; + padding: 3px 6px 3px 6px; +} + +.label.label-sm { + font-size: 12px; + padding: 1px 4px 1px 4px; +} + +h1 .label, +h2 .label, +h3 .label, +h4 .label, +h5 .label, +h6 .label, +h7 .label { + font-size: 75%; +} + +.badge { + font-size: 11px !important; + font-weight: 300; + text-align: center; + background-color: #e02222; + height: 18px; + padding: 3px 6px 3px 6px; + -webkit-border-radius: 12px !important; + -moz-border-radius: 12px !important; + border-radius: 12px !important; + text-shadow:none !important; + text-align: center; + vertical-align: middle; +} + +.badge.badge-roundless { + -webkit-border-radius: 0 !important; + -moz-border-radius: 0 !important; + border-radius: 0 !important; +} + +.badge-default, +.label-default { + background-color: #999 !important; +} + +.badge-primary, +.label-primary { + background-color: #428bca !important; +} + +.label-success, +.badge-success { + background-color: #3cc051; + background-image: none !important; +} + +.label-warning, +.badge-warning { + background-color: #fcb322; + background-image: none !important; +} + +.label-danger, +.badge-danger { + background-color: #ed4e2a; + background-image: none !important; +} + +.label-info, +.badge-info { + background-color: #57b5e3; + background-image: none !important; +} + +/* fix badge position for navs */ +.nav.nav-pills > li > a > .badge { + margin-top: -2px; +} + +.nav.nav-stacked > li > a > .badge { + margin-top: 1px; + margin-bottom: 0px; +} + +/*** +Iconic Labels +***/ + +.label.label-icon { + padding: 4px 1px 4px 5px; + margin-right: 2px; + text-align: center !important; +} + +.ie9 .label.label-icon, +.ie10 .label.label-icon { + padding: 3px 0px 3px 3px; +} + +.label.label-icon > i { + font-size: 12px; + text-align: center !important; +} + + +/*** +Pagination +***/ +.pagination { + margin: 10px 0; +} + +.pagination .active > a, +.pagination .active > a:hover { + background: #eee; + border-color: #dddddd; + color: #333; +} + + + +/*** +wells +***/ +.well { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +/* Bootstrap Tabs */ + +.dropup.open > .dropdown-toggle, +.dropdown.open > .dropdown-toggle { + border-color: #ddd !important; +} + +.nav-tabs > li > .dropdown-menu:after, +.nav-pills > li > .dropdown-menu:after, +.navbar-nav > li > .dropdown-menu:after, + +.nav-tabs > li > .dropdown-menu:before, +.nav-pills > li > .dropdown-menu:before, +.navbar-nav > li > .dropdown-menu:before { + display: none !important; +} + +.nav-tabs > .dropdown.open > .dropdown-toggle, +.nav-pills > .dropdown.open > .dropdown-toggle { + background: #eee !important; + color: #0d638f !important; +} + + +.nav-tabs, +.nav-pills { + margin-bottom: 10px; +} + +.tabs-right > .nav-tabs, +.tabs-left > .nav-tabs { + border-bottom: 0; +} + +.tabs-left > .nav-tabs > li, +.tabs-right > .nav-tabs > li { + float: none; +} + +.tabs-left > .nav-tabs > li > a, +.tabs-right > .nav-tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} + +.tabs-left > .nav-tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} + +.tabs-left > .nav-tabs > li > a { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.tabs-left > .nav-tabs > li > a:hover, +.tabs-left > .nav-tabs > li > a:focus { + border-color: #eeeeee #dddddd #eeeeee #eeeeee; +} + +.tabs-left > .nav-tabs .active > a, +.tabs-left > .nav-tabs .active > a:hover, +.tabs-left > .nav-tabs .active > a:focus { + border-color: #ddd transparent #ddd #ddd; + *border-right-color: #ffffff; +} + +.tabs-right > .nav-tabs { + float: right; + margin-left: 19px; + border-left: 1px solid #ddd; +} + +.tabs-right > .nav-tabs > li > a { + margin-left: -1px; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.tabs-right > .nav-tabs > li > a:hover, +.tabs-right > .nav-tabs > li > a:focus { + border-color: #eeeeee #eeeeee #eeeeee #dddddd; +} + +.tabs-right > .nav-tabs .active > a, +.tabs-right > .nav-tabs .active > a:hover, +.tabs-right > .nav-tabs .active > a:focus { + border-color: #ddd #ddd #ddd transparent; + *border-left-color: #ffffff; +} + +.tabs-below > .nav-tabs, +.tabs-below > .nav-pills { + border-bottom: 0; + margin-bottom: 0px; + margin-top: 10px; +} + +.tabs-below > .nav-tabs { + border-top: 1px solid #ddd; + margin-bottom: 0; + margin-top: 10px; +} + +.tabs-below > .nav-tabs > li { + margin-top: -1px; + margin-bottom: 0; +} + +.tabs-below > .nav-tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.tabs-below > .nav-tabs > li > a:hover, +.tabs-below > .nav-tabs > li > a:focus { + border-top-color: #ddd; + border-bottom-color: transparent; +} + +.tabs-below > .nav-tabs > .active > a, +.tabs-below > .nav-tabs > .active > a:hover, +.tabs-below > .nav-tabs > .active > a:focus { + border-color: transparent #ddd #ddd #ddd; +} + +/* BS3.0.3 removed tabbable class so its added back */ +.tabbable:before, +.tabbable:after { + display: table; + content: " "; +} + +.tabbable:after { + clear: both; +} + +.tabbable:before, +.tabbable:after { + display: table; + content: " "; +} + +.tabbable:after { + clear: both; +} + +/*** +Bootstrap modal +***/ + +.modal { + z-index: 10050 !important; + outline: none !important; +} + +.modal-header { + border-bottom: 1px solid #EFEFEF; +} + +.modal-header h3{ + font-weight: 300; +} + +.modal-small.modal-dialog { + width: 400px; +} + +.modal-wide.modal-dialog { + width: 60%; +} + +.modal-full.modal-dialog { + width: 100%; +} + +@media (max-width: 768px) { + + .modal-small.modal-dialog, + .modal-wide.modal-dialog, + .modal-full.modal-dialog { + width: auto; + } + +} + +/*** +Modal header close button fix +***/ +.modal-header .close { + margin-top: 0px !important; +} + +.modal > .loading { + position: absolute; + top: 50%; + left:50%; + margin-top: -22px; + margin-left: -22px; +} + +.modal-backdrop { + border: 0 !important; + outline: none !important; + z-index: 10049 !important; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + background-color: #333 !important; +} + +/* fix: content shifting to the right on modal open due to scrollbar closed */ +.modal { + overflow-y: auto !important; +} + +.modal-open { + overflow-y: auto !important; +} + +.modal-open-noscroll { + overflow-y: hidden !important; +} + + +/*** +Image Carousel +***/ +.carousel.image-carousel .carousel-inner { + padding-top: 0; + padding-bottom: 0; +} + +.carousel.image-carousel .carousel-control i { + position: absolute; + top:40%; +} + +.carousel.image-carousel.image-carousel-hoverable .carousel-control i { + display: none; +} + +.carousel.image-carousel.image-carousel-hoverable:hover .carousel-control i { + display: inline-block; +} + +.carousel.image-carousel .carousel-control.left i { + left:10px; +} + +.carousel.image-carousel .carousel-control.right i { + right:10px; +} + +.carousel.image-carousel .carousel-indicators { + margin-top: 10px; + bottom: -7px; +} + +.carousel.image-carousel .carousel-indicators li { + background-color: #666; +} + +.carousel.image-carousel .carousel-indicators li.active { + background-color: #333; +} + +.carousel.image-carousel .carousel-caption { + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: 15px 15px 25px 15px; + background: #333333; + background: rgba(0, 0, 0, 0.75); +} + +.carousel.image-carousel .carousel-caption h4, +.carousel.image-carousel .carousel-caption h3, +.carousel.image-carousel .carousel-caption h2, +.carousel.image-carousel .carousel-caption p { + text-align: left; + line-height: 20px; + color: #ffffff; +} + +.carousel.image-carousel .carousel-caption h2, +.carousel.image-carousel .carousel-caption h3, +.carousel.image-carousel .carousel-caption h4 { + margin: 0 0 5px; +} + +.carousel.image-carousel .carousel-caption h2 a, +.carousel.image-carousel .carousel-caption h3 a, +.carousel.image-carousel .carousel-caption h4 a { + color: #aaa; +} + +.carousel.image-carousel .carousel-caption p { + margin-bottom: 0; +} + +.carousel.image-carousel .item { + margin: 0; +} + +/*** +Bootstrap Tables +***/ + +.table thead > tr > th { + border-bottom: 0; +} + +.table tbody tr.active td, +.table tbody tr.active th { + background-color: #e9e9e9 !important; +} + +.table tbody tr.active:hover td, +.table tbody tr.active:hover th { + background-color: #e1e1e1 !important; +} + +.table-striped tbody tr.active:nth-child(odd) td, +.table-striped tbody tr.active:nth-child(odd) th { + background-color: #017ebc; +} + +.table .heading > th { + background-color: #eee !important; +} + +/*** +Bootstrap Panel +***/ + +.panel { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.panel .panel-title > a:hover { + text-decoration: none; +} + +.accordion .panel-heading { + padding: 0; +} + +.accordion .panel-title { + padding: 0; +} + +.accordion .panel-title .accordion-toggle { + display: block; + padding: 10px 15px; +} + +.accordion .accordion-toggle.accordion-toggle-styled { + background: url("../img/accordion-plusminus.png") no-repeat; + background-position: right -19px; + margin-right: 15px; +} + +.accordion .accordion-toggle.accordion-toggle-styled.collapsed { + background-position: right 12px; +} + +/*** +Responsive Image +***/ +.table td .img-responsive{ + width:100%; +} + +/*** +Unstyled List +***/ + +.list-unstyled li > .list-unstyled { + margin-left: 25px; +} + +.alarm-critical{ + background-color: rgb(255, 0, 0); +} + +.alarm-major{ + background-color: rgb(255, 150, 0); +} + +.alarm-minor{ + background-color: rgb(248, 252, 96); +} + +.alarm-warning{ + background-color: rgb(152, 240, 248); +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css b/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css new file mode 100644 index 00000000..b65cefa9 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css @@ -0,0 +1,838 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@font-face { + font-family: 'Lato'; + font-style: normal; + font-weight: 400; + src: local('Lato Regular'), local('Lato-Regular'), url(9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff'); +} +html, body, div, span, applet, object, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 1em; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + background: rgba(231, 231, 231, 0.43); + line-height: 1.125em; + color: white; + max-width: 1920px; + margin: 0 auto; + position: relative; + font-family: 'Lato', Helvetica, Arial, Tahoma; + text-shadow: 1px 1px 0 rgba(0,0,0,0.3); +} +ol, ul { + padding: 0 10px; + margin: 0 10px; + line-height: 1.5em; +} +h1, h2, h3, h4, h5, h6 { + text-shadow: 1px 1px 0 rgba(0,0,0,0.5); + font-family: 'Lato', Georgia, Helvetica, Tahoma; + margin: 10px 0; + font-weight: normal; +} +h1 { + font-size: 1.875em; +} +h2 { + font-size: 1.6em; + line-height: 1em; +} +h3 { + font-size: 1.25em; +} +h4 { + font-size: 1.125em; +} +h5 { + font-size: 1em; +} +h6 { + font-size: 0.875em; +} +a { + text-decoration: none; + color: white; +} +a:hover { + color: white; + opacity: 0.9; +} +a:visited { + color: white; +} +h2 { + cursor: pointer; +} +code, pre { + font-family: Monaco, Menlo, Consolas; + font-size: 1em; + color: #FFFFDE; + padding: 0 3px 2px; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +.header { + /*padding: 14px 0; + background-color: rgb(19, 17, 17); + background-color: #006a3f; + background-image: + radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), + radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); + background-image: + -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), + -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); + background-position: 0 0px, 4px 4px, 0 1px, 4px 5px; + background-size: 8px 8px; + border-bottom: 1px solid rgb(41, 41, 41);*/ + margin-top: 1%; + /* margin-left: 10%; */ + margin-left: 90px; +} +@media (min-width: 1600px){ + .header { + margin-top: 1%; + margin-left: 95px; + } +} + +.header div.float-left { + /*padding-left: 2%;*/ +} + +@media (min-width: 769px) and (max-width: 1024px) { + .header div.float-left { + /*padding-left: 5%;*/ + } +} + +.header a { + font-size: 35px; + color: white; + display: block; + opacity: 0.8; +} +.header a:first-letter { + font-size: 60px; + line-height: 40px; + font-weight: bold; +} +.header .target { + margin-left: 5px; + margin-bottom: 20px; +} + +.header .reponsive-block { + list-style: none; + margin: 0px; + padding: 50px 2% 0 0; +} + +.header .reponsive-block li { + display: inline-block; + float:left; +} + +.header .reponsive-block a { + display: inline-block; + margin: 0 5px; + cursor: pointer; + background: url(../i/reponsive.png) no-repeat; +} + +.header .reponsive-block a.desktop { + background-position: 3px 0; + width: 34px; height: 26px; +} + +.header .reponsive-block a.tablet-landscape { + background-position: -49px 0; + width: 22px; + height: 22px; +} + +.header .reponsive-block a.tablet-portrait { + background-position: -90px 0; + width: 18px; + height: 24px; +} + +.header .reponsive-block a.iphone-landscape { + background-position: -129px 0; + width: 20px; + height: 20px; +} + +.header .reponsive-block a.iphone-portrait { + background-position: -166px 0; + width: 16px; + height: 26px; +} + +.header .reponsive-block a.desktop:hover, +.header .reponsive-block a.desktop.active { + background-position: 3px -34px; +} + +.header .reponsive-block a.tablet-landscape:hover, +.header .reponsive-block a.tablet-landscape.active { + background-position: -49px -34px; +} + +.header .reponsive-block a.tablet-portrait:hover, +.header .reponsive-block a.tablet-portrait.active { + background-position: -91px -33px; +} + +.header .reponsive-block a.iphone-landscape:hover, +.header .reponsive-block a.iphone-landscape.active { + background-position: -128px -33px; +} + +.header .reponsive-block a.iphone-portrait:hover, +.header .reponsive-block a.iphone-portrait.active { + background-position: -166px -33px; +} +.free-wall { + margin: auto; +} + +.free-wall-logo { + margin: auto; + height: 420px; +} +.size2-2 { + width: 80px; + height: 80px; +} + +.size11 { + height: 160px; + width: 160px; +} + +.size12 { + width: 160px; + height: 320px; +} + +.size21 { + width: 320px; + height: 160px; +} + +.size22 { + height: 320px; + width: 320px; +} + +.size13 { + width: 160px; + height: 480px; +} + +.size31 { + width: 480px; + height: 160px; +} + +.size23 { + width: 320px; + height: 480px; +} + +.size24 { + width: 320px; + height: 640px; +} + +.size32 { + width: 480px; + height: 320px; +} + +.size33 { + width: 480px; + height: 480px; +} + +.size34 { + width: 480px; + height: 640px; +} + +.size43 { + width: 640px; + height: 480px; +} + +.size35 { + width: 480px; + height: 800px; +} + +.size53 { + width: 800px; + height: 480px; +} + +.size36 { + width: 480px; + height: 960px; +} + +.size41 { + width: 270px; + height: 160px; +} +.size42 { + width: 270px; + height: 320px; +} +.size41-1024 { + width: 213px; + height: 133px; +} +.size42-1024 { + width: 213px; + height: 275px; +} +.size41-1366 { + width: 278px; + height: 156px; +} +.size42-1366 { + width: 278px; + height: 332px; +} +.size41-1440 { + width: 310px; + height: 168px; +} +.size42-1440 { + width: 310px; + height: 340px; +} +.size41-1600 { + width: 330px; + height: 173px; +} +.size42-1600 { + width: 330px; + height: 354px; +} + +.donate form { + height: 100%; + width: 100%; + background: rgb(44, 62, 80); +} + +.donate form .paypal { + display: block; + margin: auto; + padding: 20px 0px 0px 0px; + outline: 0; +} + +.img-demo { + vertical-align: bottom; + list-style: none; + margin:0; + padding: 0; +} + +.img-demo li { + float: left; + width: 25%; + text-align: center; +} + +.img-demo li img { + border: 2px solid white; + width: 98px; + height: 98px; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +.rest-left { + margin-left: 244px; +} + +.desc h1, +.desc h2, +.desc h3, +.desc h4, +.desc h5, +.desc h6 { + font-weight: bold; +} + +.desc h2 { + border-bottom: 1px solid rgba(0,0,0,0.1); + margin-top: 0px; + margin-bottom: 0px; + padding-bottom: 50px; +} + +.desc h2 span { + float: left; + display: block; + line-height: 50px; +} + +@media (max-width: 1024px) { + .brick { + height:140px; + } +} + +.brick { + margin-top:10px; + background-color: white; + /* float: left; */ + cursor: default; + overflow: hidden; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height:160px; +} + +@media (min-width: 1440px) { + .brick { + height:180px; + } +} + +.brick .cover { + overflow: hidden; + margin: 20px; + margin-top: 25%; + font-size: 30px; + float: right; + text-align: right; +} + +.brick .read-more { + position: absolute; + display: none; + bottom: 0px; + left: 0px; + right: 0px; + padding: 12px; + background: rgb(0, 0, 0); + background: rgba(0, 0, 0, 0.45); +} + +.brick:hover .read-more { + display: block; + cursor: pointer; +} + +.brick .desc { + display: none; +} + +.full-width .float-left { + display: none; +} + +.full-width .desc { + display: block; +} + +.full-width.brick { + box-shadow: none; + overflow: visible; + border: none !important; + background: none !important; +} + +.full-width.brick .cover { + margin: 0px 20px; + color: #333; +} + +.full-width.brick .cover * { + text-shadow: none; +} + +.full-width.brick .cover code { + color: #666; +} + +.open .float-left { + display: none; +} + +.open .desc { + display: block; +} + +.example { + width: 0px; + height: 0px; + overflow: visible !important; /* for ie7 */ +} + +.example-draggable { + cursor: move; +} + +.example-draggable * { + cursor: move; +} + +.example-draggable a { + cursor: pointer; +} + +.cell { + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + background-color: #222; +} + +[class*="-share"] { + cursor: pointer; + margin: 20px 0; + line-height: 30px; + padding-left: 30px; +} + +.facebook-share { + background: url(../i/fb.png) no-repeat left center; +} + +.twitter-share { + background: url(../i/tw.png) no-repeat left center; +} + +.google-share { + background: url(../i/gp.png) no-repeat left center; +} + +.download-icon { + background: url(../i/download.png) no-repeat left center; + display: block; + margin: 0 0 10px 0; + line-height: 30px; + padding-left: 30px; +} + +.js-icon { + background: url(../i/js.png) no-repeat left center; + display: block; + line-height: 30px; + padding-left: 30px; +} + +.fork { + float: right; + width: 100%; + height: 100%; + display: block; + background: url(../i/forkme.png) no-repeat top right; +} + +.back-button { + position: fixed; + z-index: 9999; + padding: 1%; + bottom: 2%; + right: 2%; + display: none; + background: black; +} + +.back-button .back-icon { + background: url(../i/back.png) no-repeat top center; + width: 45px; + height: 27px; + display: block; +} + +.back-button .back-icon:hover { + background: url(../i/back.png) no-repeat bottom center; +} + +@media (min-width: 1600px) { + .main-content-wrapper{ + width:100%; + margin-left:95px; + margin-right: 1%; + } +} + +@media (min-width: 1441px) and (max-width: 1599px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 0%; */ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 1367px) and (max-width: 1440px) { + .main-content-wrapper{ + width:100%; + margin-left: 75px; + margin-right: 1%; + } +} + +@media (min-width: 1281px) and (max-width: 1366px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 2%; */ + margin-left:75px; + margin-right: 2%; + } +} + +@media (min-width: 1025px) and (max-width: 1280px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 4%;*/ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 6%;*/ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 641px) and (max-width: 768px) { + .main-content-wrapper{ + width:100%; + margin-left: 10%; + margin-right: 1%; + } +} + +@media (min-width: 481px) and (max-width: 640px) { + .main-content-wrapper{ + width:100%; + margin-left: 0%; + margin-right: 1%; + } +} + +@media (max-width: 480px) { + .main-content-wrapper{ + width:100%; + margin-left: 9%; + margin-right: 1%; + } +} + +body{ + font-family: microsoft yahei; + background: #484747; +} + +.skyBlue-mainpage{ + background: -moz-linear-gradient(left top, #1cadd9, #20c0f0); + background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #1cadd9), color-stop(1, #20c0f0)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cadd9', endColorstr='#20c0f0', GradientType='0'); + background: linear-gradient(to bottom right,#1cadd9, #20c0f0); +} +.golden-mainpage{ + background-image: -moz-linear-gradient(left top, #bca374, #d9cf7a); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bca374), color-stop(1, #d9cf7a)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bca374, endColorstr=#d9cf7a, GradientType=0); + background: linear-gradient(to bottom right,#bca374, #d9cf7a); +} +.manLieONCloud-image{ + background-image: url('../img/mainpage/pic/1.png'); +} +.orange-mainpage{ + background-image: -moz-linear-gradient(left top, #f09c0a, #f4be35); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f09c0a), color-stop(1, #f4be35)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f09c0a, endColorstr=#f4be35, GradientType=0); + background: linear-gradient(to bottom right,#f09c0a, #f4be35); +} +.pinkishRed-mainpage{ + background-image: -moz-linear-gradient(left top, #e03655, #ef3a5b); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e03655), color-stop(1, #ef3a5b)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e03655, endColorstr=#ef3a5b, GradientType=0); + background: linear-gradient(to bottom right,#e03655, #ef3a5b); +} +.magicCube-image{ + background-image: url('../img/mainpage/pic/4.png'); +} +.magicThought-image{ + background-image: url('../img/mainpage/pic/5.png'); +} +.grassGreen-mainpage{ + background-image: -moz-linear-gradient(left top, #008b04, #03a501); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #008b04), color-stop(1, #03a501)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008b04, endColorstr=#03a501, GradientType=0); + background: linear-gradient(to bottom right,#008b04, #03a501); +} +.meeting-image{ + background-image: url('../img/mainpage/pic/3.png'); +} +.earth-image{ + background-image: url('../img/mainpage/pic/2.png'); +} +.toolsImageBrokenLine{ + background-image: url('../img/mainpage/icon/1.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImageHierachy{ + background-image: url('../img/mainpage/icon/2.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImageGear{ + background-image: url('../img/mainpage/icon/3.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImagePresent{ + background-image: url('../img/mainpage/icon/4.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImageFile{ + background-image: url('../img/mainpage/icon/5.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.toolsImageBriefcase{ + background-image: url('../img/mainpage/icon/6.png'); + height: 150px; + width: 120px; + margin-top: 15%; + margin-left:-5px; +} +.contentTip{ + opacity:0; + display:block; + padding: 20px; + text-align: left; + line-height: inherit; + text-indent: 2em; + position: absolute; +} +.contentTipShow{ + display:block; + padding: 20px; + text-align: left; + line-height: inherit; + text-indent: 2em; + position: absolute; +} +.coverHidden{ + display:none; +} +.coverShrink{ + width:0px !important; + height:0px !important; +} +/* +.brick .contentToggle{ + -webkit-transition: opacity 1s ease-in-out; + -moz-transition: opacity 1s ease-in-out; + -o-transition: opacity 1s ease-in-out; + transition: opacity 1s ease-in-out; +} +.brick .cover :hover{ + opacity:0; +} +*/ +.hideSideMenuForMainPage { + display: none! important; +} +.fullFillDiv { + width:100%; + height:100%; +} +@media screen and (min-width: 992px)and (max-width: 1280px) { + .brick .cover { + font-size:25px; + } +} + diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-ict.css b/openo-portal/portal-common/src/main/webapp/common/css/style-ict.css new file mode 100644 index 00000000..9912f226 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/style-ict.css @@ -0,0 +1,820 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@font-face { + font-family: 'Lato'; + font-style: normal; + font-weight: 400; + src: local('Lato Regular'), local('Lato-Regular'), url(9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff'); +} +html, body, div, span, applet, object, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 1em; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + background: rgba(231, 231, 231, 0.43); + line-height: 1.125em; + color: white; + max-width: 1920px; + margin: 0 auto; + position: relative; + font-family: 'Lato', Helvetica, Arial, Tahoma; + text-shadow: 1px 1px 0 rgba(0,0,0,0.3); +} +ol, ul { + padding: 0 10px; + margin: 0 10px; + line-height: 1.5em; +} +h1, h2, h3, h4, h5, h6 { + text-shadow: 1px 1px 0 rgba(0,0,0,0.5); + font-family: 'Lato', Georgia, Helvetica, Tahoma; + margin: 10px 0; + font-weight: normal; +} +h1 { + font-size: 1.875em; +} +h2 { + font-size: 1.6em; + line-height: 1em; +} +h3 { + font-size: 1.25em; +} +h4 { + font-size: 1.125em; +} +h5 { + font-size: 1em; +} +h6 { + font-size: 0.875em; +} +a { + text-decoration: none; + color: white; +} +a:hover { + color: white; + opacity: 0.9; +} +a:visited { + color: white; +} +h2 { + cursor: pointer; +} +code, pre { + font-family: Monaco, Menlo, Consolas; + font-size: 1em; + color: #FFFFDE; + padding: 0 3px 2px; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +.header { + /*padding: 14px 0; + background-color: rgb(19, 17, 17); + background-color: #006a3f; + background-image: + radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), + radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); + background-image: + -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), + -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), + -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); + background-position: 0 0px, 4px 4px, 0 1px, 4px 5px; + background-size: 8px 8px; + border-bottom: 1px solid rgb(41, 41, 41);*/ + margin-top: 3%; + /* margin-left: 10%; */ + margin-left: 75px; +} +@media (min-width: 1600px){ + .header { + margin-top: 3%; + margin-left: 95px; + } +} + +.header div.float-left { + /*padding-left: 2%;*/ +} + +@media (min-width: 769px) and (max-width: 1024px) { + .header div.float-left { + /*padding-left: 5%;*/ + } +} + +.header a { + font-size: 35px; + color: white; + display: block; + opacity: 0.8; +} +.header a:first-letter { + font-size: 60px; + line-height: 40px; + font-weight: bold; +} +.header .target { + margin-left: 5px; + margin-bottom: 20px; +} + +.header .reponsive-block { + list-style: none; + margin: 0px; + padding: 50px 2% 0 0; +} + +.header .reponsive-block li { + display: inline-block; + float:left; +} + +.header .reponsive-block a { + display: inline-block; + margin: 0 5px; + cursor: pointer; + background: url(../i/reponsive.png) no-repeat; +} + +.header .reponsive-block a.desktop { + background-position: 3px 0; + width: 34px; height: 26px; +} + +.header .reponsive-block a.tablet-landscape { + background-position: -49px 0; + width: 22px; + height: 22px; +} + +.header .reponsive-block a.tablet-portrait { + background-position: -90px 0; + width: 18px; + height: 24px; +} + +.header .reponsive-block a.iphone-landscape { + background-position: -129px 0; + width: 20px; + height: 20px; +} + +.header .reponsive-block a.iphone-portrait { + background-position: -166px 0; + width: 16px; + height: 26px; +} + +.header .reponsive-block a.desktop:hover, +.header .reponsive-block a.desktop.active { + background-position: 3px -34px; +} + +.header .reponsive-block a.tablet-landscape:hover, +.header .reponsive-block a.tablet-landscape.active { + background-position: -49px -34px; +} + +.header .reponsive-block a.tablet-portrait:hover, +.header .reponsive-block a.tablet-portrait.active { + background-position: -91px -33px; +} + +.header .reponsive-block a.iphone-landscape:hover, +.header .reponsive-block a.iphone-landscape.active { + background-position: -128px -33px; +} + +.header .reponsive-block a.iphone-portrait:hover, +.header .reponsive-block a.iphone-portrait.active { + background-position: -166px -33px; +} +.free-wall { + margin: auto; +} + +.free-wall-logo { + margin: auto; + height: 420px; +} +.size2-2 { + width: 80px; + height: 80px; +} + +.size11 { + height: 160px; + width: 160px; +} + +.size12 { + width: 160px; + height: 320px; +} + +.size21 { + width: 320px; + height: 160px; +} + +.size22 { + height: 320px; + width: 320px; +} + +.size13 { + width: 160px; + height: 480px; +} + +.size31 { + width: 480px; + height: 160px; +} + +.size23 { + width: 320px; + height: 480px; +} + +.size24 { + width: 320px; + height: 640px; +} + +.size32 { + width: 480px; + height: 320px; +} + +.size33 { + width: 480px; + height: 480px; +} + +.size34 { + width: 480px; + height: 640px; +} + +.size43 { + width: 640px; + height: 480px; +} + +.size35 { + width: 480px; + height: 800px; +} + +.size53 { + width: 800px; + height: 480px; +} + +.size36 { + width: 480px; + height: 960px; +} + +.size41 { + width: 270px; + height: 160px; +} +.size42 { + width: 270px; + height: 320px; +} +.size41-1024 { + width: 213px; + height: 133px; +} +.size42-1024 { + width: 213px; + height: 275px; +} +.size41-1366 { + width: 278px; + height: 156px; +} +.size42-1366 { + width: 278px; + height: 332px; +} +.size41-1440 { + width: 310px; + height: 168px; +} +.size42-1440 { + width: 310px; + height: 340px; +} +.size41-1600 { + width: 330px; + height: 173px; +} +.size42-1600 { + width: 330px; + height: 354px; +} + +.donate form { + height: 100%; + width: 100%; + background: rgb(44, 62, 80); +} + +.donate form .paypal { + display: block; + margin: auto; + padding: 20px 0px 0px 0px; + outline: 0; +} + +.img-demo { + vertical-align: bottom; + list-style: none; + margin:0; + padding: 0; +} + +.img-demo li { + float: left; + width: 25%; + text-align: center; +} + +.img-demo li img { + border: 2px solid white; + width: 98px; + height: 98px; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +.rest-left { + margin-left: 244px; +} + +.desc h1, +.desc h2, +.desc h3, +.desc h4, +.desc h5, +.desc h6 { + font-weight: bold; +} + +.desc h2 { + border-bottom: 1px solid rgba(0,0,0,0.1); + margin-top: 0px; + margin-bottom: 0px; + padding-bottom: 50px; +} + +.desc h2 span { + float: left; + display: block; + line-height: 50px; +} + +.brick { + background-color: white; + float: left; + cursor: default; + overflow: hidden; + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +.brick .cover { + overflow: hidden; + margin: 20px; +/* margin-left: 60%; */ + margin-top: 25%; +/* width: 120px; */ + height: 30px; + font-size: 30px; + padding: 7px; + float: right; + text-align: right; +} + +.brick .read-more { + position: absolute; + display: none; + bottom: 0px; + left: 0px; + right: 0px; + padding: 12px; + background: rgb(0, 0, 0); + background: rgba(0, 0, 0, 0.45); +} + +.brick:hover .read-more { + display: block; + cursor: pointer; +} + +.brick .desc { + display: none; +} + +.full-width .float-left { + display: none; +} + +.full-width .desc { + display: block; +} + +.full-width.brick { + box-shadow: none; + overflow: visible; + border: none !important; + background: none !important; +} + +.full-width.brick .cover { + margin: 0px 20px; + color: #333; +} + +.full-width.brick .cover * { + text-shadow: none; +} + +.full-width.brick .cover code { + color: #666; +} + +.open .float-left { + display: none; +} + +.open .desc { + display: block; +} + +.example { + width: 0px; + height: 0px; + overflow: visible !important; /* for ie7 */ +} + +.example-draggable { + cursor: move; +} + +.example-draggable * { + cursor: move; +} + +.example-draggable a { + cursor: pointer; +} + +.cell { + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + background-color: #222; +} + +[class*="-share"] { + cursor: pointer; + margin: 20px 0; + line-height: 30px; + padding-left: 30px; +} + +.facebook-share { + background: url(../i/fb.png) no-repeat left center; +} + +.twitter-share { + background: url(../i/tw.png) no-repeat left center; +} + +.google-share { + background: url(../i/gp.png) no-repeat left center; +} + +.download-icon { + background: url(../i/download.png) no-repeat left center; + display: block; + margin: 0 0 10px 0; + line-height: 30px; + padding-left: 30px; +} + +.js-icon { + background: url(../i/js.png) no-repeat left center; + display: block; + line-height: 30px; + padding-left: 30px; +} + +.fork { + float: right; + width: 100%; + height: 100%; + display: block; + background: url(../i/forkme.png) no-repeat top right; +} + +.back-button { + position: fixed; + z-index: 9999; + padding: 1%; + bottom: 2%; + right: 2%; + display: none; + background: black; +} + +.back-button .back-icon { + background: url(../i/back.png) no-repeat top center; + width: 45px; + height: 27px; + display: block; +} + +.back-button .back-icon:hover { + background: url(../i/back.png) no-repeat bottom center; +} + +@media (min-width: 1600px) { + .main-content-wrapper{ + width:100%; + margin-left:95px; + margin-right: 1%; + } +} + +@media (min-width: 1441px) and (max-width: 1599px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 0%; */ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 1367px) and (max-width: 1440px) { + .main-content-wrapper{ + width:100%; + margin-left: 75px; + margin-right: 1%; + } +} + +@media (min-width: 1281px) and (max-width: 1366px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 2%; */ + margin-left:75px; + margin-right: 2%; + } +} + +@media (min-width: 1025px) and (max-width: 1280px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 4%;*/ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .main-content-wrapper{ + width:100%; + /*margin-left: 6%;*/ + margin-left:75px; + margin-right: 1%; + } +} + +@media (min-width: 641px) and (max-width: 768px) { + .main-content-wrapper{ + width:100%; + margin-left: 10%; + margin-right: 1%; + } +} + +@media (min-width: 481px) and (max-width: 640px) { + .main-content-wrapper{ + width:100%; + margin-left: 0%; + margin-right: 1%; + } +} + +@media (max-width: 480px) { + .main-content-wrapper{ + width:100%; + margin-left: 9%; + margin-right: 1%; + } +} + +body{ + font-family: microsoft yahei; + background: #484747; +} + +.skyBlue-mainpage{ + background: -moz-linear-gradient(left top, #1cadd9, #20c0f0); + background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #1cadd9), color-stop(1, #20c0f0)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cadd9', endColorstr='#20c0f0', GradientType='0'); + background: linear-gradient(to bottom right,#1cadd9, #20c0f0); +} +.golden-mainpage{ + background-image: -moz-linear-gradient(left top, #bca374, #d9cf7a); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bca374), color-stop(1, #d9cf7a)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bca374, endColorstr=#d9cf7a, GradientType=0); + background: linear-gradient(to bottom right,#bca374, #d9cf7a); +} +.manLieONCloud-image{ + background-image: url('../img/mainpage/pic/1.png'); +} +.orange-mainpage{ + background-image: -moz-linear-gradient(left top, #f09c0a, #f4be35); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f09c0a), color-stop(1, #f4be35)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f09c0a, endColorstr=#f4be35, GradientType=0); + background: linear-gradient(to bottom right,#f09c0a, #f4be35); +} +.pinkishRed-mainpage{ + background-image: -moz-linear-gradient(left top, #e03655, #ef3a5b); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e03655), color-stop(1, #ef3a5b)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e03655, endColorstr=#ef3a5b, GradientType=0); + background: linear-gradient(to bottom right,#e03655, #ef3a5b); +} +.magicCube-image{ + background-image: url('../img/mainpage/pic/4.png'); +} +.grassGreen-mainpage{ + background-image: -moz-linear-gradient(left top, #008b04, #03a501); + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #008b04), color-stop(1, #03a501)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008b04, endColorstr=#03a501, GradientType=0); + background: linear-gradient(to bottom right,#008b04, #03a501); +} +.meeting-image{ + background-image: url('../img/mainpage/pic/3.png'); +} +.earth-image{ + background-image: url('../img/mainpage/pic/2.png'); +} +.toolsImageBrokenLine{ + background-image: url('../img/mainpage/icon/1.png'); + height: 150px; + width: 120px; + top: 30px; + position: absolute; +} +.toolsImageHierachy{ + background-image: url('../img/mainpage/icon/2.png'); + height: 150px; + width: 120px; + top: 30px; + position: absolute; +} +.toolsImageGear{ + background-image: url('../img/mainpage/icon/3.png'); + height: 150px; + width: 120px; + top: 30px; + position: absolute; +} +.toolsImagePresent{ + background-image: url('../img/mainpage/icon/4.png'); + height: 150px; + width: 120px; + top: 30px; + position: absolute; +} +.toolsImageFile{ + background-image: url('../img/mainpage/icon/5.png'); + height: 150px; + width: 120px; + top: 30px; + position: absolute; +} +.toolsImageBriefcase{ + background-image: url('../img/mainpage/icon/6.png'); + height: 150px; + width: 120px; + top: 30px; + position: absolute; +} +.contentTip{ + opacity:0; + display:block; + padding: 20px; + text-align: left; + line-height: inherit; + text-indent: 2em; + position: absolute; +} +.contentTipShow{ + display:block; + padding: 20px; + text-align: left; + line-height: inherit; + text-indent: 2em; + position: absolute; +} +.coverHidden{ + display:none; +} +.coverShrink{ + width:0px !important; + height:0px !important; +} +/* +.brick .contentToggle{ + -webkit-transition: opacity 1s ease-in-out; + -moz-transition: opacity 1s ease-in-out; + -o-transition: opacity 1s ease-in-out; + transition: opacity 1s ease-in-out; +} +.brick .cover :hover{ + opacity:0; +} +*/ +.hideSideMenuForMainPage { + display: none! important; +} +.fullFillDiv { + width:100%; + height:100%; +} + diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-responsive.css b/openo-portal/portal-common/src/main/webapp/common/css/style-responsive.css new file mode 100644 index 00000000..9c1b40f4 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/style-responsive.css @@ -0,0 +1,989 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Responsive Theme. +Based on http://getbootstrap.com/css/#responsive-utilities-classes +***/ + +/*** +Fixed Footer +***/ + +.page-footer-fixed.page-footer-fixed-mobile .footer { + position: fixed; + left: 0; + right: 0; + z-index: 10000; + bottom: 0; +} + +.page-footer-fixed.page-footer-fixed-mobile .page-container { + margin-bottom: 20px !important; +} + +.page-footer-fixed.page-footer-fixed-mobile.page-sidebar-fixed .footer { + margin-left: 0 !important; +} + +/*** +Form Medium Devices Up To Large Devices +***/ + +@media (min-width: 992px) and (max-width: 1200px) { + + .page-boxed .header.navbar .dropdown .username { + display: none; + } + +} + +@media (max-width: 1024px) { + .hidden-1024 { + display: none; + } +} + +/*** +From Medium Devices Up To Larger Devices +***/ + +@media (min-width: 992px) { + + /*** + Page sidebar + ***/ + .page-sidebar { + width: 225px; + float: left; + position: relative; + margin-right: -100%; + } + + .page-sidebar.navbar-collapse { + max-height: none !important; + } + + /*** + Page content + ***/ + .page-content-wrapper { + float: left; + width: 100%; + } + + .page-content { + margin-left: 0px; + margin-top: 0px; + min-height: 500px; + padding: 20px 20px 0px 20px; + } + + .page-content.no-min-height { + min-height: auto; + } + + /*** + Footer + ***/ + .footer { + clear: left; + } + + /*** + Fixed Sidebar + ***/ + .page-sidebar-fixed .page-content { + min-height: 500px; + } + + .page-sidebar-fixed .page-sidebar { + position: fixed !important; + margin-left: 0; + top: 41px; + } + + .page-sidebar-fixed ul.page-sidebar-menu > li.last { + margin-bottom: 15px !important; + } + + .page-sidebar-fixed.page-sidebar-hover-on .page-sidebar { + z-index: 10000; + width: 35px; + } + + .page-sidebar-fixed.page-sidebar-hover-on .page-sidebar .selected { + display: none; + } + + .page-sidebar-fixed.page-sidebar-hover-on .page-content { + margin-left: 35px; + } + + .page-sidebar-fixed.page-sidebar-hover-on .footer { + margin-left: 35px; + } + + .page-sidebar-fixed .page-sidebar-closed .page-sidebar .sidebar-search .submit, + .page-sidebar-fixed .page-sidebar .sidebar-toggler { + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; + } + + .page-sidebar-fixed.page-sidebar-reversed .page-sidebar-closed .page-sidebar .sidebar-search .submit, + .page-sidebar-fixed.page-sidebar-reversed .page-sidebar .sidebar-toggler { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + } + + .page-sidebar-hovering { + overflow: hidden !important; + } + + .page-sidebar-hovering .sub-menu, + .page-sidebar-hovering span.title, + .page-sidebar-hovering span.arrow { + display: none !important; + } + + .page-sidebar-hovering .submit { + opacity: 0; + width: 0 !important; + height: 0 !important; + } + + /*** + Fixed Sidebar + ***/ + + .page-sidebar-fixed .footer { + margin-left: 225px; + background-color: #fff; + padding: 8px 20px 5px 20px; + } + + .page-sidebar-fixed .footer .footer-inner { + color: #333; + } + + .page-sidebar-fixed.page-sidebar-closed .footer { + margin-left: 35px; + } + + .page-sidebar-fixed .footer .footer-tools .go-top { + background-color: #666; + } + + .page-sidebar-fixed .footer .footer-tools .go-top i { + color: #ddd; + } + + /*** + Boxed Layout + ***/ + + .page-boxed .header.navbar .navbar-brand { + margin-left: 0px !important; + width: 226px; + } + + .page-boxed .header.navbar .navbar-brand img { + margin-left: 10px; + } + + .page-boxed .header.navbar .navbar-nav { + margin-right: 0px; + } + + .page-boxed .footer { + padding: 8px 0 5px 0; + } + + .page-boxed.page-sidebar-fixed .footer { + padding-right: 20px; + padding-left: 20px; + } + + /*** + Sidebar Reversed + ***/ + + .page-sidebar-reversed .page-sidebar { + float: right; + margin-right: 0; + margin-left: -100%; + } + + .page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + margin-left: -225px; + } + + .page-sidebar-reversed .page-content { + margin-left: 0; + margin-right: 225px; + } + + .page-sidebar-reversed.page-sidebar-fixed .page-sidebar-wrapper { + position: relative; + float: right; + } + + .page-sidebar-reversed.page-sidebar-fixed .footer { + margin-left: 0; + margin-right: 225px; + padding: 8px 20px 5px 20px; + } + + .page-sidebar-reversed.page-sidebar-fixed.page-footer-fixed .footer { + margin-left: 0; + margin-right: 0; + } + + .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-hover-on .page-content { + margin-left: 0; + margin-right: 35px; + } + + .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-hover-on .footer { + margin-right: 35px; + } + + /*** + Sidebar Closed + ***/ + + .page-sidebar-closed .page-sidebar .sidebar-toggler { + margin-left: 3px; + } + + .page-sidebar-closed .page-sidebar .sidebar-search .form-container { + width: 29px; + margin-left: 3px; + } + + .page-sidebar-closed .page-sidebar .sidebar-search .form-container .input-box { + border-bottom: 0 !important; + } + + .page-sidebar-closed .page-sidebar .sidebar-search .form-container input[type="text"] { + display: none; + } + + .page-sidebar-closed .page-sidebar .sidebar-search .form-container .submit { + margin-top: 5px !important; + margin-left: 7px !important; + margin-right: 7px !important; + display: block !important; + } + + .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + width: 255px; + position: relative; + z-index: 1; + padding-top: 0px; + } + + .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container input[type="text"] { + margin-top: 7px; + margin-left: 8px; + padding-left: 10px; + padding-bottom: 2px; + width: 185px; + display: inline-block !important; + } + + .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .submit { + display: inline-block; + width: 13px; + height: 13px; + margin: 11px 8px 9px 6px !important; + } + + .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-repeat: no-repeat; + width: 11px; + height: 11px; + margin: 12px 8px 9px 8px !important; + display: inline-block !important; + float: left !important; + } + + .page-sidebar-closed .page-sidebar-menu > li > a .selected { + right: -3px !important; + } + + .page-sidebar-closed .page-sidebar-menu > li > a > .title, + .page-sidebar-closed .page-sidebar-menu > li > a > .arrow { + display: none !important; + } + + .page-sidebar-closed .page-sidebar .sidebar-toggler { + margin-right: 3px; + } + + .page-sidebar-closed .page-sidebar .sidebar-search { + margin-top: 6px; + margin-bottom: 6px; + } + + .page-sidebar-closed .page-sidebar-menu { + width: 35px !important; + } + + .page-sidebar-closed .page-sidebar-menu > li > a { + padding-left: 7px; + } + + .page-sidebar-fixed.page-sidebar-closed .page-sidebar-menu > li > a { + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; + } + + .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-closed .page-sidebar-menu > li > a { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + } + + .page-sidebar-closed .page-sidebar-menu > li:hover { + width: 236px !important; + position: relative !important; + z-index: 2000; + display: block !important; + } + + .page-sidebar-closed .page-sidebar-menu > li.sidebar-toggler-wrapper:hover, + .page-sidebar-closed .page-sidebar-menu > li.sidebar-search-wrapper:hover { + width: 35px !important; + } + + .page-sidebar-closed .page-sidebar-menu > li:hover .selected { + display: none; + } + + .page-sidebar-closed .page-sidebar-menu > li:hover > a > i { + margin-right: 10px; + } + + .page-sidebar-closed .page-sidebar-menu > li:hover .title { + display: inline !important; + } + + .page-sidebar-closed .page-sidebar-menu > li > .sub-menu { + display: none !important; + } + + .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu { + width: 200px; + position: absolute; + z-index: 2000; + left: 36px; + margin-top: 0; + top: 100%; + display: block !important; + } + + .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu, + .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu > li > .sub-menu { + width: 200px; + } + + /* 2rd level sub menu*/ + .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > a { + padding-left: 15px !important; + } + + /* 3rd level sub menu*/ + .page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > a { + padding-left: 30px !important; + } + + /* 4rd level sub menu*/ + .page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > .sub-menu > li > a { + padding-left: 45px !important; + } + + /* sidebar container */ + + .page-sidebar-closed .page-sidebar { + width: 35px; + } + + .page-sidebar-closed .page-content { + margin-left: 35px; + } + + /*** + Sidebar Reversed & Sidebar Closed + ***/ + + .page-sidebar-reversed.page-sidebar-closed .page-sidebar { + margin-left: -35px; + width: 35px; + } + + .page-sidebar-reversed.page-sidebar-closed .page-content { + margin-left: 0 !important; + margin-right: 35px !important; + } + + .page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li:hover { + margin-left: -201px; + } + + .page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li.sidebar-toggler-wrapper:hover, + .page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li.sidebar-search-wrapper:hover { + margin-left: 0; + } + + .page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + margin-left: -225px; + } + + .page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .submit { + margin: 11px 8px 9px 12px !important; + float: left !important; + } + + .page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + margin: 12px 6px 9px 8px !important; + float: right !important; + } + + .page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu { + left:auto; + right: 36px; + } + + .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-closed .footer { + margin-right: 35px; + } + + /*** + Fixed Footer + ***/ + + .page-footer-fixed .footer { + position: fixed; + left: 0; + right: 0; + z-index: 10000; + bottom: 0; + } + + .page-footer-fixed .page-container { + margin-bottom: 20px !important; + } + + .page-footer-fixed.page-sidebar-fixed .footer { + margin-left: 0 !important; + } + +} + +/*** +Up To Medium Devices +***/ + +@media (max-width:991px) { + + /*** + Page header + ***/ + .header.navbar { + padding: 0 20px 0 20px; + position: relative; + clear: both; + } + + .page-header-fixed.page-header-fixed-mobile .navbar-fixed-top { + position: fixed; + } + + .header.navbar .navbar-toggle { + display: inline-block; + } + + .page-sidebar.navbar-collapse { + max-height: none; /* set some max height to have a scrollable menu on mobile devices */ + } + + .page-sidebar.navbar-collapse.collapse { + display: none !important; + } + + .page-sidebar.navbar-collapse.in { + overflow: hidden !important; + overflow-y: auto !important; + display: block !important; + } + + .page-full-width .page-sidebar-menu { + display: block; + } + + .page-sidebar.navbar-collapse.navbar-no-scroll { + max-height: none !important; + } + + .header.navbar .nav li.dropdown i { + display: inline-block; + position: relative; + top:1px; + right:0px; + } + + .header.navbar .navbar-nav { + display: block; + margin-bottom: 0px !important; + } + + .header.navbar .navbar-nav .open .dropdown-menu { + position: absolute; + } + + .header.navbar .navbar-nav { + display: inline-block; + margin: 0 10px 0 0; + } + + .header.navbar .navbar-nav > li { + float: left; + } + + .header.navbar .navbar-brand { + margin-left: 0px !important; + padding-left: 0px !important; + } + + .header.navbar .navbar-brand img { + margin-left: 4px !important; + } + + + /*** + Header Search Box + ***/ + + .header.navbar .search-form { + display: none; + } + + .page-sidebar .header.navbar-responsive-search { + display: block; + } + + /*** + Page container + ***/ + .page-container { + margin: 0 !important; + padding: 0 !important; + } + + .page-header-fixed.page-header-fixed-mobile .page-container { + margin-top: 42px !important; + } + + /*** + Page content + ***/ + .page-content { + margin: 0px !important; + padding: 20px 20px 20px 20px !important; + min-height: 280px; + } + + /*** + Page sidebar + ***/ + .page-sidebar { + border-top: 0 !important; + margin: 20px; + } + + .page-sidebar.in { + border-top: 0 !important; + margin: 20px; + position: relative; + z-index: 5; + } + + .header.navbar .sidebar-toggler, + .page-sidebar .sidebar-toggler { + display: none; + } + + .page-sidebar ul { + margin-top:0px; + width:100%; + } + + .page-sidebar .selected { + display: none !important; + } + + .page-sidebar .sidebar-search .input-box { + width: 220px; + } + + /*** + Styler panel + ***/ + .styler-panel { + top:55px; + right:20px; + } + + /*** + Boxed Layout + ***/ + .page-boxed .header.navbar > .container, + .page-boxed .footer > .container, + .page-boxed > .container { + max-width: none !important; + margin: 0 !important; + padding: 0 !important; + } + +} + +/*** +From Small Devices Up To Medium Devices +***/ + +@media (min-width: 768px) and (max-width: 991px) { + + /*** + Body + ***/ + body { + padding-top: 0px; + } + + /*** + Page sidebar + ***/ + .page-sidebar .btn-navbar.collapsed .arrow { + display: none; + } + + .page-sidebar .btn-navbar .arrow { + position: absolute; + right: 25px; + width: 0; + height: 0; + top:50px; + border-bottom: 15px solid #5f646b; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + } + + /*** + Boxed Layout + ***/ + .page-boxed .header.navbar > .container, + .page-boxed > .container { + margin: auto !important; + } + + .page-boxed .header.navbar { + margin: auto !important; + padding: 0; + } + + .page-boxed .footer { + padding-left: 0; + padding-right: 0; + } + +} + +/*** +Extra Small Devices Only +***/ + +@media (max-width: 767px) { + + /*** + Page header + ***/ + + .header.navbar { + padding: 0 10px 0 10px; + } + + .header.navbar .top-nav .nav{ + margin-top: 0px; + margin-right: 5px; + } + + .header.navbar .nav > li > .dropdown-menu.notification:after, + .header.navbar .nav > li > .dropdown-menu.notification:before { + margin-right: 160px; + } + + .header.navbar .nav > li > .dropdown-menu.notification { + margin-right: -160px; + } + + .header.navbar .nav > li > .dropdown-menu.inbox:after, + .header.navbar .nav > li > .dropdown-menu.inbox:before { + margin-right: 110px; + } + + .header.navbar .nav > li > .dropdown-menu.inbox { + margin-right: -110px; + } + + .header.navbar .nav > li > .dropdown-menu.tasks:after, + .header.navbar .nav > li > .dropdown-menu.tasks:before { + margin-right: 60px; + } + + .header.navbar .nav > li > .dropdown-menu.tasks { + margin-right: -60px; + } + + /* Header logo */ + .header.navbar .navbar-brand { + margin-left: 0px !important; + width: 110px; + } + + /*** + Page content + ***/ + .page-content { + padding: 20px 10px 10px 10px !important; + overflow: hidden; + } + + /*** + Page title + ***/ + .page-title { + margin-bottom: 20px; + font-size: 18px; + } + + .page-title small { + font-size: 13px; + padding-top: 3px; + } + + /*** + Styler pagel + ***/ + .styler-panel { + top:58px; + right:12px; + } + + /*** + Page breadcrumb + ***/ + .breadcrumb { + padding-left: 10px; + padding-right: 10px; + } + + /*** + Portlet form action + ***/ + .portlet-body.form .form-actions{ + padding-left: 15px; + } + + + /*** + Form input validation states + ***/ + .input-icon .input-error, + .input-icon .input-warning, + .input-icon .input-success { + top:-27px; + float: right; + right:10px !important; + } + + /*** + Advance tables + ***/ + .table-advance tr td.highlight:first-child a { + margin-left: 8px; + } + + /*** + Footer + ***/ + .footer { + padding-left: 10px; + padding-right: 10px; + } + + .footer .go-top { + float: right; + display: block; + margin-right: 0px; + } + + /*** + Vertical inline menu + ***/ + .ver-inline-menu li.active:after { + display: none; + } + + /*** + Form controls + ***/ + .form-horizontal .form-actions { + padding-left: 180px; + } + + .portlet .form-horizontal .form-actions { + padding-left: 190px; + } +} + +/*** +The Most Extra Small Devices Landscape Mode Only +***/ + +@media (max-width: 580px) { + + .header.navbar .username { + display: none; + } + +} + +@media (max-width: 480px) { + + /*** + Header navbar + ***/ + .page-header-fixed.page-header-fixed-mobile .header.navbar { + height: 84px; + } + + .page-header-fixed.page-header-fixed-mobile .page-container { + margin-top: 84px !important; + } + + .header.navbar .navbar-nav { + display: block; + clear: both; + margin-top: 2px; + margin-right: 0; + } + + .header.navbar .navbar-nav > li.dropdown .dropdown-toggle { + margin-top:-1px; + padding-left: 9px; + padding-right: 9px; + } + + .header.navbar .navbar-nav > li.dropdown.language .dropdown-toggle, + .header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle { + padding-left: 4px; + padding-right: 15px; + } + + .header.navbar .navbar-nav li.dropdown .dropdown-toggle .badge { + top: 8px; + } + + /*** + Page sidebar + ***/ + .page-sidebar, + .page-sidebar.in { + margin: 0 10px 10px 10px; + } + + .page-header-fixed.page-header-fixed-mobile .page-sidebar, + .page-header-fixed.page-header-fixed-mobile .page-sidebar.in { + margin-top: 10px; + } + + /*** + Page title + ***/ + .page-title small { + display: block; + clear: both; + } + + /*** + Forms + ***/ + .portlet .form-horizontal .form-actions { + padding-left: 10px; + } + + /*** + Dashboard date range panel + ***/ + .page-content .breadcrumb .dashboard-date-range { + padding-bottom: 8px; + } + + .page-content .breadcrumb .dashboard-date-range span { + display: none; + } + + .page-content .breadcrumb > .btn-group span { + display: none; + } + + .page-content .breadcrumb > .btn-group > .btn { + padding-left: 7px; + padding-right: 7px; + } + + /*** + Hidden phone + ***/ + .hidden-480 { + display: none !important; + } +} + +/*** +The Most Extra Small Devices Portrait Mode Only +***/ + +@media (max-width: 320px) { + + /*** + Hidden phone + ***/ + .hidden-320 { + display: none; + } + + .header.navbar .navbar-brand { + width: 100px; + } +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style.css b/openo-portal/portal-common/src/main/webapp/common/css/style.css new file mode 100644 index 00000000..ade2221f --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/style.css @@ -0,0 +1,4715 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Colors +blue: #4b8df8 +light blue: #bfd5fa +red: #e02222 +yellow: #ffb848 +green: #35aa47 +purple: #852b99 +dark: #555555; +light grey: #fafafa; +***/ +/*fontIcon*/ +[class^="ict-"], [class*=" ict-"]{ + padding-right:3px; + display: inline-block; + width: 1.25em; + text-align: center; +} +.page-sidebar-menu [class^="ict-"], .page-sidebar-menu [class*=" ict-"]{ +padding-right:0; +} +/********************* + GENERAL RESET & SETUP +*********************/ + +/*** +Reset and overrides +***/ +body { + color: #333; + /*font-family: 'Open Sans', sans-serif; + font-size:13px; */ + font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important; + padding: 0px !important; + margin: 0px !important; + direction: ltr; +} +.page-content-body{ +padding-left:15px; +padding-right:15px; +padding-top:10px; +} +/* +Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't +properly apply the media queries in Bootstrap's CSS. To address this, +you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix. +*/ +@-webkit-viewport { + width: device-width; +} + +@-moz-viewport { + width: device-width; +} + +@-ms-viewport { + width: device-width; +} + +@-o-viewport { + width: device-width; +} + +@viewport { + width: device-width; +} + +/* Internet Explorer 10 doesn't differentiate device width from viewport width, +and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied */ +@-ms-viewport { + width: auto !important; +} + +/*** +Custom Scrollbars +***/ + +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + background-color: #eaeaea; + border-left: 1px solid #cecece; +} + +::-webkit-scrollbar-thumb { + background-color: #cecece; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #aaa; +} + +::-webkit-scrollbar-track { + border-radius: 0; + box-shadow: none; + border: 0; +} + +::-webkit-scrollbar-thumb { + border-radius: 0; + box-shadow: none; + border: 0; +} + +/*** +General typography +***/ +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + color: #444; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Arial, sans-serif; + font-weight: 300 !important; +} + +h1.block, +h2.block, +h3.block, +h4.block, +h5.block, +h6.block { + padding-top: 10px; + padding-bottom: 10px; +} + +a { + text-shadow: none !important; + color: #5b9bd1; +} + +/*** +Fix link outlines after click +***/ +a,a:focus, a:hover, a:active { + outline: 0; +} + +/*** +General backgrounds. Can be applied to any block or panel +***/ + +.bg-blue { + background-image: none !important; + background-color: #4b8df8 !important; + border-color:#4b8df8 !important; + color: #fff !important; +} + +.bg-red { + background-image: none !important; + background-color: #e02222 !important; + border-color: #e02222 !important; + color: #fff !important; +} + +.bg-yellow { + background-image: none !important; + background-color: #ffb848 !important; + border-color: #ffb848 !important; + color: #fff !important; +} + +.bg-green { + background-image: none !important; + background-color: #35aa47 !important; + border-color: #35aa47 !important; + color: #fff !important; +} + +.bg-purple { + background-image: none !important; + background-color: #852b99 !important; + border-color: #852b99 !important; + color: #fff !important; +} + +.bg-dark { + background-image: none !important; + background-color: #555555 !important; + border-color: #555555 !important; + color: #fff !important; +} + +.bg-grey { + background-image: none !important; + background-color: #fafafa !important; + border-color: #fafafa !important; +} + +/*** +Font Awesome Icons +***/ + +[class^="fa-"], +[class*=" fa-"] { + display: inline-block; +/* margin-top: 1px;*/ + font-size: 14px; + *margin-right: .3em; + line-height: 14px; +} + +/*** +Make font awesome icons fixed width(latest version issue) +***/ + +li [class^="fa-"], +li [class*=" fa-"] { + display: inline-block; + width: 1.25em; + text-align: center; +} +li [class^="fa-"].icon-large, +li [class*=" fa-"].icon-large { + /* increased font size for icon-large */ + width: 1.5625em; +} + +.page-breadcrumb .fa-angle-right{ + display:inline-block; + margin-left:8px; + margin-right:8px; +} + +.page-breadcrumb i[class^="fa-"], [class*=" fa-"],.page-breadcrumb i[class^="ict-"], [class*=" ict-"]{ + display:none; +} + + + +.fa-lg, +.icon-lg { + font-size: 16px; +} + +.fa-2x { + font-size: 2em; +} +.fa-3x { + font-size: 3em; +} +.fa-4x { + font-size: 4em; +} +.fa-5x { + font-size: 5em; +} + +.icon-default { + color: #ccc; +} + +.icon-success { + color: #468847; +} + +.icon-info { + color: #27a9e3; +} + +.icon-warning { + color: #dbc056; +} + +.icon-danger { + color: #B94A48; +} + +/*** +Close icon used for modal dialog and other UI element close buttons +***/ +.close { + display: inline-block; + margin-top: 0px; + margin-right: 0px; + width: 9px; + height: 9px; + background-repeat: no-repeat !important; + text-indent: -10000px; + outline: none; + background-image: url("../img/remove-icon-small.png") !important; +} + +.about{ + height:345px; + width:528px; +} + +.aboutmain{ + background-image: url("../img/about/about-bg-light.png"); +} + +.aboutinfo{ + background-image: url("../img/about/about-bg-dark.png"); +} + +.about a{ + color: white; + + margin-left:15px; + text-decoration: none; +} + +.about a.about_close{ + float:right; + margin-right:20px; + font-size: 1.2em; +} + +.about div{ + padding-top:10px; + +} + +.about div.info{ + float: right; + margin-right: 15px; + margin-top: 130px; + color: white; + font-size: 13px; +} + +.about div.info div{ + margin-left:15px; +} + +.about div.info img{ + margin-right: 55px; +} + +.aboutDlg{ + width: 530px; + margin-left:150px; +} + +/*** +General HR +***/ + +hr { + margin: 20px 0; + border: 0; + border-top: 1px solid #E0DFDF; + border-bottom: 1px solid #FEFEFE; +} + +/*** +Tools +***/ + +.display-none, +.display-hide { + display: none; +} + +.no-space { + margin: 0px !important; + padding: 0px !important; +} + +.no-margin { + margin:0; +} + +.no-border { + border:0 !important; +} + +.margin-bottom-5 { + margin-bottom: 5px; +} + +.margin-bottom-10 { + margin-bottom: 10px !important; +} + +.margin-top-10 { + margin-top: 10px !important; +} + +.margin-bottom-15 { + margin-bottom: 15px !important; +} + +.margin-bottom-20 { + margin-bottom: 20px !important; +} + +.margin-top-20 { + margin-top: 20px !important; +} + +.margin-bottom-25 { + margin-bottom: 25px !important; +} + +.margin-right-10 { + margin-right: 10px !important; +} + +.bold { + font-weight:600 !important; +} + +.fix-margin { + margin-left: 0px !important +} + +.border { + border: 1px solid red; +} + +.inline { + display: inline; +} + +.text-align-reverse { + text-align: right; +} + +/*** +ie8 & ie9 modes +***/ + +.visible-ie8 { + display: none; +} + +.ie8 .visible-ie8 { + display: inherit !important; +} + +.visible-ie9 { + display: none; +} + +.ie9 .visible-ie9 { + display: inherit !important; +} + +.hidden-ie8 { + display: inherit; +} + +.ie8 .hidden-ie8 { + display: none !important; +} + +.hidden-ie9 { + display: inherit; +} + +.ie9 .hidden-ie9 { + display: none !important; +} + +/******************** + GENERAL LAYOUT +*********************/ + +/*** +Header and header elements. +***/ + +.header.navbar { + width: 100%; + padding: 0 20px 0 20px; + margin: 0; + border: 0px; + padding: 0px; + box-shadow: none; + height: 42px; + min-height: 42px; +} + +.header.navbar.navbar-fixed-top { + z-index: 9995 !important; +} + +.header.navbar .navbar-brand { + display: inline-block; + margin-top: -1px; + margin-right: 0; + padding-left: 0; + padding-right: 0; + width: 225px; + height: 42px; +} + +.header.navbar .navbar-brand img { + margin-left: 20px; +} + +.header.navbar .navbar-brand.text-logo { + padding-left: 20px; + padding-top: 12px; +} + +.header.navbar .navbar-toggle { + margin: 8px 6px 4px 6px; + padding: 0; + padding-top:2px; + padding-bottom: 6px; + background-image: none; + filter:none; + box-shadow: none; + color: #fff; + border: 0; +} + +.header.navbar .navbar-toggle:hover { + text-decoration: none; + background: none; +} + +.header.navbar .navbar-nav { + margin-right: 20px; + display: block; +} + +.header.navbar .navbar-nav > li { + margin: 0px; + padding: 0px; +} + +.header.navbar .navbar-nav > li.dropdown, +.header.navbar .navbar-nav > li.dropdown > a { + padding-left: 4px; + padding-right: 4px; +} + +.header.navbar .navbar-nav > li.dropdown > a:last-child { + padding-right: 0; +} + +.header.navbar .navbar-nav > li.dropdown:last-child { + padding-right: 2px; +} + +.header.navbar .navbar-nav > li.dropdown .dropdown-toggle { + margin: 0px; + padding: 15px 10px 7px 10px; +} + +.header.navbar .navbar-nav > li.dropdown .dropdown-toggle > i { + font-size: 18px; +} + +.header.navbar .navbar-nav > li.dropdown .dropdown-menu > li > a > i { + font-size: 14px; +} + +.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle { + padding-top: 9px; + *padding: 9px 18px 6px 6px; +} + +.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle:hover { + text-decoration: none; +} + +.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle .username { + color: #ddd; +} + +.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle i { + display: inline-block; + margin-top: 5px; + margin: 0; + font-size: 16px; +} + +.header.navbar .navbar-nav > li.dropdown.user .dropdown-menu i { + width: 15px; + display: inline-block; +} + +.header.navbar .navbar-nav > li.dropdown .dropdown-toggle .badge { + position: absolute; + top: 8px; + right: 20px; +} + + +.header.navbar .navbar-nav > li.dropdown.system .dropdown-toggle { + padding: 13px 0px 6px 6px; +} + +.header.navbar .navbar-nav > li.dropdown.system .dropdown-toggle:hover { + text-decoration: none; +} + +.header.navbar .navbar-nav > li.dropdown.system .dropdown-toggle .sysname { + color: #ddd; +} + +.header.navbar .navbar-nav > li.dropdown.system .dropdown-toggle i { + display: inline-block; + margin-top: 5px; + margin: 0; + font-size: 16px; +} + +.header.navbar .navbar-nav > li.dropdown.system .dropdown-menu i { + width: 15px; + display: inline-block; +} + +/*** +Header Search +***/ +.header.navbar .search-form { + float: left; + display: inline-block; + padding: 0; + height: 41px; + margin:0; +} + +.header.navbar .search-form .form-control{ + margin-top: 8px; + border: 0; + padding-top: 1px; + padding-right: 27px; +} + +.header.navbar .search-form .submit { + position: relative; + display: block; + float: right; + margin-top: -21px; + margin-right: 8px; + width: 13px; + height: 15px; + box-shadow: none; + border: 0px; + padding: 0px; + background-color: none; + background-repeat: no-repeat !important; + outline: none !important; + opacity: 0.8; + filter: alpha(opacity=80); +} + +.header.navbar .search-form .submit:hover { + opacity: 1; + filter: alpha(opacity=100); +} + +/*** +Language Bar +***/ + +.header.navbar .navbar-nav > li.dropdown.language { + padding-left: 0; + padding-right: 0; + margin: 0; +} + +.header.navbar .navbar-nav > li.dropdown.language > a { + color: #ddd; + font-size: 13px; + padding: 11px 1px 11px 5px; +} + +.header.navbar .navbar-nav > li.dropdown.language > a > img { + margin-bottom: 2px; +} + +.header.navbar .navbar-nav > li.dropdown.language > a > i { + font-size: 16px; +} + +.header.navbar .navbar-nav > li.dropdown.language > .dropdown-menu > li > a > img { + margin-bottom: 2px; +} + +.header.navbar .navbar-nav .dropdown-menu { + margin-top: 3px; +} + +/*** +Page container +***/ + +.page-container { + margin: 0px; + padding: 0px; + position: relative; +} + +.page-container:before, +.page-container:after { + display: table; + content: " "; +} + +.page-container:after { + clear: both; +} + +.page-header-fixed .page-container { + margin-top: 42px; +} + +/*** IE 8 Fixes ***/ +/*** +Page sidebar +***/ + +.ie8 .page-sidebar { + width: 225px; + float: left; + position: relative; + margin-right: -100%; +} + +/*** +Page content +***/ + +.ie8 .page-content-wrapper { + float: left; + width: 100%; + } + +.ie8 .page-content { + margin-left: 225px; + margin-top: 0px; + min-height: 540px; + padding: 20px 20px 20px 20px; + } +/*** IE 8 Fixes ***/ + +/*** +Page sidebar +***/ + +.page-sidebar.navbar-collapse { + padding: 0; +} + +.page-sidebar-menu { + list-style: none; + margin: 0; + padding: 0; + margin: 0; + padding: 0; +} + +.page-sidebar-menu > li { + display: block; + margin: 0; + padding: 0; + border: 0px; +} + +.page-sidebar-menu > li.start > a { + border-top-color: transparent !important; +} + +.page-sidebar-menu > li:last-child > a, +.page-sidebar-menu > li.last > a { + border-bottom-color: transparent !important; +} + +.page-sidebar-menu > li > a { + display: block; + position: relative; + margin: 0; + border: 0px; + padding: 10px 15px; + text-decoration: none; + font-size: 14px; + font-weight: 300; +} + +.page-sidebar-fixed .page-sidebar-menu > li > a { + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; +} + +.page-sidebar-reversed.page-sidebar-fixed .page-sidebar-menu > li > a{ + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +} + +.page-sidebar-menu > li > a i { + font-size: 16px; + margin-right: 5px; + text-shadow:none; +} + +.page-sidebar-menu > li.break { + margin-bottom: 20px; +} + +.page-sidebar-menu > li.open > a { + font-size: 14px; +} + +.page-sidebar-menu > li.active > a { + border: none; + text-shadow:none; + font-size: 14px; +} + +.page-sidebar-menu > li.active > a .selected { + display: block; + width: 8px; + height: 25px; + background-image: url("../img/sidebar-menu-arrow.png"); + float: right; + position: absolute; + right:0px; + top:8px; +} + +.page-sidebar-reversed .page-sidebar-menu > li.active > a .selected { + background-image: url("../img/sidebar-menu-arrow-reverse.png"); + right: auto; + left:0; +} + +.page-sidebar ul > li > a > .arrow:before { + float: right; + margin-top: 0px; + margin-right: 5px; + display: inline; + font-size: 16px; + font-family: FontAwesome; + height: auto; + content: "\f104"; + font-weight: 300; + text-shadow:none; +} + +.page-sidebar-menu > li > a > .arrow.open:before { + float: right; + margin-top: 0px; + margin-right: 3px; + display: inline; + font-family: FontAwesome; + height: auto; + font-size: 16px; + content: "\f107"; + font-weight: 300; + text-shadow:none; +} + +/* bagin: sidebar menu badges */ +.page-sidebar-menu li > a > .badge { + float: right; + margin-top: 1px; + margin-right: 13px; +} + +/* end: sidebar menu badges */ + +.page-sidebar-menu .sub-menu { + padding: 0; +} + +.page-sidebar-menu > li > ul.sub-menu { + display: none; + list-style: none; + clear: both; + margin: 8px 0px 8px 0px; +} + +.page-sidebar-menu > li.active > ul.sub-menu { + display: block; +} + +.page-sidebar-menu > li > ul.sub-menu > li { + background: none; + margin: 0px; + padding: 0px; + margin-top: 1px !important; +} + +.page-sidebar-menu > li > ul.sub-menu > li > a { + display: block; + margin: 0px 0px 0px 0px; + padding: 5px 0px; + padding-left: 44px !important; + text-decoration: none; + font-size: 14px; + font-weight: 300; + background: none; +} + +/* 3rd level sub menu */ +.page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu { + display: none; + list-style: none; + clear: both; + margin: 0px 0px 0px 0px; +} + +.page-sidebar-menu > li > ul.sub-menu li > a > .arrow:before { + float: right; + margin-top: 1px; + margin-right: 20px; + display: inline; + font-size: 16px; + font-family: FontAwesome; + height: auto; + content: "\f104"; + font-weight: 300; + text-shadow:none; +} + +.page-sidebar-menu > li > ul.sub-menu li > a > .arrow.open:before { + float: right; + margin-top: 1px; + margin-right: 18px; + display: inline; + font-family: FontAwesome; + height: auto; + font-size: 16px; + content: "\f107"; + font-weight: 300; + text-shadow:none; +} + +.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu { + display: block; +} + +.page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu li { + background: none; + margin: 0px; + padding: 0px; + margin-top: 1px !important; +} + +.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a { + display: block; + margin: 0px 0px 0px 0px; + padding: 5px 0px; + text-decoration: none; + font-size: 14px; + font-weight: 300; + background: none; +} + +.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { + padding-left: 60px; +} + +.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { + padding-left: 80px; +} + +.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu > li.active ul.sub-menu { + display: block; +} + + +.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a > i { + font-size: 13px; +} + +/*** +Sidebar Search +***/ + +.page-sidebar .sidebar-search { + padding:0; + margin: 0; +} + +.page-sidebar .header.navbar-responsive-search { + display: none; +} + +.page-sidebar .sidebar-search .form-container { + margin: 15px 20px 15px 20px; + height: 35px; + padding-top: 7px; +} + +.page-sidebar .sidebar-search .form-container .submit { + display: block; + float: right; + margin-top: 3px; + width: 13px; + height: 15px; + background-repeat: no-repeat; + box-shadow: none; + border: 0px; + padding: 0px; + outline: none !important; +} + +.page-sidebar .sidebar-search .form-container input[type="text"] { + margin: 0px; + width: 165px; + border: 0px; + padding: 0 !important; + font-size: 14px !important; + box-shadow: none !important; + font-size: 14px; + font-weight: normal; +} + +.page-sidebar .sidebar-search .form-container input[type="text"]:focus { + outline: none !important; +} + +/*** +Sidebar toggler(show/hide) +***/ +.sidebar-toggler { + cursor: pointer; + opacity: 0.5; + filter: alpha(opacity=50); + width: 29px; + height: 29px; + background-repeat: no-repeat; +} + +.sidebar-toggler:hover { + filter: alpha(opacity=100); + opacity: 1; +} + +.page-sidebar .sidebar-toggler { + margin-top: 15px; + /* margin-left: 175px;*/ +} + +.header.navbar .sidebar-toggler { + float: left; + display: inline-block; + margin-top: 6px; + margin-left: -42px; +} + +/*** +Page content +***/ +.page-content { + margin-top: 0px; + padding: 0px; + background-color: #fff; +} + +.ie8 .page-content { + padding: 20px; + margin-left: 225px; + margin-top: 0px; + min-height: 760px; +} + +.ie8 .page-sidebar-fixed .page-content { + min-height: 600px; +} + +.ie8 .page-content.no-min-height { + min-height: auto; +} + +.page-full-width .page-content { + margin-left: 0px !important; +} + +.page-full-width .page-sidebar-menu { + display: none; +} + +/*** +Page title +***/ +.page-title { + padding: 0px; + font-size: 30px; + letter-spacing: -1px; + display: block; + color: #666; + margin: 0px 0px 15px 0px; + font-weight: 300; + font-family: 'Open Sans', sans-serif; +} + +.page-title small { + font-size: 14px; + letter-spacing: 0px; + font-weight: 300; + color: #888; +} + +/*** +Page breadcrumb +***/ + +.ie8 .row .page-breadcrumb.breadcrumb > li { + margin-right: 1px; +} + +.page-content .page-breadcrumb.breadcrumb { + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + box-shadow: none; + padding-right: 30px; + padding-left: 8px; + margin-top: 15px; + margin-bottom: 25px; + border:0px !important; + background-color: #fff; +} + +.page-content .page-breadcrumb.breadcrumb > li > a, +.page-content .page-breadcrumb.breadcrumb > li > i, +.page-content .page-breadcrumb.breadcrumb > li > span { + color: #333; + font-size: 14px; + text-shadow:none; +} + +.page-content .page-breadcrumb.breadcrumb > li > i { + color: #666; +} + +.page-content .page-breadcrumb.breadcrumb > li+li:before { + display: none; +} + +/* Dashboard breadcrumb Dropdown */ +.page-content .page-breadcrumb.breadcrumb .more-botton-zone .btn-group { + right: 15px; + position: absolute; + margin-top: -8px; +} +.page-content .page-breadcrumb.breadcrumb .more-botton-zone { + position:inherit; +} + +.page-content .page-breadcrumb.breadcrumb .more-botton-zone .btn-group .btn { + padding-top: 8px; + padding-bottom: 8px; + font-size: 12px; +} + +/* Dashboard date range panel */ +.page-content .page-breadcrumb.breadcrumb .dashboard-date-range { + position: relative; + top: -8px; + margin-right: -30px; + display: none; + padding: 9px 9px 8px 9px; + cursor: pointer; + color: #fff; + background-color: #e02222; +} + +/* hack for chrome and safari */ +@media all and (-webkit-min-device-pixel-ratio:0) { + .page-content .page-breadcrumb.breadcrumb .dashboard-date-range { + padding: 9px; + } +} + +.page-content .page-breadcrumb.breadcrumb .dashboard-date-range > span { + font-size: 12px; + font-weight: 300; + color: #fff; + text-transform: uppercase; +} + +.page-content .page-breadcrumb.breadcrumb .dashboard-date-range > .fa-calendar { + text-transform: none; + color: #fff; + margin-top: 0px; + font-size: 14px; +} + +.page-content .page-breadcrumb.breadcrumb .dashboard-date-range > .fa-angle-down { + color:#fff; + font-size: 16px; +} + +/*** +Footer +***/ + +.footer { + padding: 8px 20px 5px 20px; + font-size: 12px; +} + +.footer:after, +.footer:before { + content: ""; + display: table; + line-height: 0; +} + +.footer:after { + clear: both; +} + +.footer .footer-inner { + float: left; + display: inline-block; +} + +.footer .footer-tools { + float: right; + display: inline-block; +} + +.footer .footer-tools .go-top { + display: block; + text-decoration: none; + cursor: pointer; + margin-top: -2px; + margin-right: 0px; + margin-bottom: 0px; + font-size: 16px; + padding: 0px 6px 0px 6px; +} + +.footer .footer-tools .go-top i { + font-size: 22px; + margin-bottom: 5px; +} + + +/******************** + GENERAL UI ELEMENTS +*********************/ + +/*** +Icon stuff +***/ +i.icon, a.icon { + color: #999; + margin-right: 5px; + font-weight: normal; + font-size: 13px; +} + +i.icon-black { + color: #000 !important; +} + +a.icon:hover { + text-decoration: none; + -webkit-transition: all 0.1s ease-in-out; + -moz-transition: all 0.1s ease-in-out; + -o-transition: all 0.1s ease-in-out; + -ms-transition: all 0.1s ease-in-out; + transition: all 0.1s ease-in-out; + opacity: .4; + filter:alpha(opacity=40); +} + +a.icon.huge i{ + font-size: 16px !important; +} + +i.big { + font-size: 20px; +} + +i.warning { + color: #d12610; +} + +i.critical { + color: #37b7f3; +} + +i.normal { + color: #52e136; +} + +/*** +Custom wells +***/ +.well { + background-color: #fafafa; + border: 1px solid #eee; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.well.mini { + padding: 7px !important; +} + +/*** +Form stuff +***/ + + +/*** +Bordered form layout +***/ + +/*** +Input icons +***/ + +/* input with right aligned and colored icons */ + +/* input with left aligned icons */ +.input-icon { + position: relative; +} + + +.input-icon input { + padding-left: 33px !important; +} + +.input-icon i { + color: #ccc; + display: block; + position: absolute; + margin: 11px 2px 4px 10px; + width: 16px; + height: 16px; + font-size: 16px; + text-align: center; +} + +.input-icon.right input { + padding-left: 12px !important; + padding-right: 33px !important; +} + +.input-icon.right i { + right: 8px; + float: right; +} + +.has-success .input-icon > i { + color: #468847; +} + +.has-warning .input-icon > i { + color: #c09853; +} + +.has-error .input-icon > i { + color: #b94a48; +} + +/*** +Portlets +***/ +.portlet { + clear: both; + margin-top: 0px; + margin-bottom: 25px; + padding: 0px; +} + +.portlet > .portlet-title { + margin-bottom: 15px; + border-bottom: 1px solid #eee; +} + +.portlet > .portlet-title:after, +.portlet > .portlet-title:before { + content: ""; + display: table; + line-height: 0; +} + +.portlet > .portlet-title:after { + clear: both; +} + +.portlet > .portlet-title > .caption { + float: left; + display: inline-block; + font-size: 18px; + line-height: 18px; + font-weight: 400; + margin: 0; + padding: 0; + margin-bottom: 8px; +} + +.portlet > .portlet-title > .caption > i { + float: left; + margin-top: 4px; + display: inline-block !important; + font-size: 13px; + margin-right: 5px; + color: #666; +} + +.portlet.blue > .portlet-title > .caption, +.portlet.green > .portlet-title > .caption, +.portlet.yellow > .portlet-title > .caption, +.portlet.red > .portlet-title > .caption, +.portlet.purple > .portlet-title > .caption, +.portlet.grey > .portlet-title > .caption { + color: #fff; +} + +.portlet.box.blue > .portlet-title > .caption > i, +.portlet.box.green > .portlet-title > .caption > i, +.portlet.box.grey > .portlet-title > .caption > i, +.portlet.box.yellow > .portlet-title > .caption > i, +.portlet.box.red > .portlet-title > .caption > i, +.portlet.box.purple > .portlet-title > .caption > i, +.portlet.box.light-grey > .portlet-title > .caption > i{ + color: #fff; +} + +.sortable .portlet > .portlet-title { + cursor: move; +} + +.portlet > .portlet-title > .tools, +.portlet > .portlet-title > .actions + { + display: inline-block; + padding: 0; + margin: 0; + margin-top: 6px; + float: right; +} + +.portlet > .portlet-title > .tools > a { + display: inline-block; + height: 16px; + margin-left:5px; +} + +.portlet > .portlet-title > .actions > .dropdown-menu i { + color: #000 !important; +} + +.portlet > .portlet-title > .tools > a.remove { + margin-bottom: 2px; + background-image:url(../img/portlet-remove-icon.png); + background-repeat: no-repeat; + width: 11px; +} + +.portlet > .portlet-title > .tools > a.config { + margin-bottom: 2px; + background-image:url(../img/portlet-config-icon.png); + background-repeat: no-repeat; + width: 12px; +} + +.portlet > .portlet-title > .tools > a.reload { + margin-bottom: 2px; + background-image:url(../img/portlet-reload-icon.png); + width: 13px; +} + +.portlet > .portlet-title > .tools > a.expand { + margin-bottom: 2px; + background-image:url(../img/portlet-expand-icon.png); + width: 14px; +} + +.portlet > .portlet-title > .tools > a.collapse { + margin-bottom: 2px; + background-image:url(../img/portlet-collapse-icon.png); + width: 14px; +} + +.portlet > .portlet-title > .tools > a:hover { + text-decoration: none; + -webkit-transition: all 0.1s ease-in-out; + -moz-transition: all 0.1s ease-in-out; + -o-transition: all 0.1s ease-in-out; + -ms-transition: all 0.1s ease-in-out; + transition: all 0.1s ease-in-out; + opacity:.6; + filter:'alpha(opacity=60)'; +} + +.portlet > .portlet-title > .actions > .btn-group { + margin-top: -13px; +} + +.portlet > .portlet-title > .actions > .btn { + padding: 4px 10px; + margin-top: -14px; +} + +.portlet > .portlet-title > .actions > .btn-group > .btn { + padding: 4px 10px; + margin-top: -1px; +} + +.portlet > .portlet-title > .actions > .btn.btn-sm { + padding: 3px 8px; + margin-top: -13px; +} + +.portlet > .portlet-title > .actions > .btn-group > .btn-sm { + padding: 3px 8px; + margin-top: -1px; +} + +.portlet > .portlet-title > .pagination.pagination-sm { + float: right !important; + display: inline-block !important; + margin: 0px; + margin-top: -4px; +} + +@media (max-width: 767px) { + .portlet > .portlet-title > .actions.btn-set > .btn-group, + .portlet > .portlet-title > .actions.btn-set > .btn { + margin-top: 0px; + margin-bottom: 5px; + } +} + +.portlet > .portlet-body { + clear: both; + padding: 0; +} + +.portlet > .portlet-empty { + min-height: 125px; +} + +.portlet > .portlet-body.light-blue, .portlet.light-blue { + background-color: #bfd5fa !important; +} + +.portlet > .portlet-body.blue, .portlet.blue { + background-color: #4b8df8 !important; +} + +.portlet > .portlet-body.red, .portlet.red { + background-color: #e02222 !important; +} + +.portlet > .portlet-body.yellow, .portlet.yellow { + background-color: #ffb848 !important; +} + +.portlet > .portlet-body.green, .portlet.green { + background-color: #35aa47 !important; +} + +.portlet > .portlet-body.purple, .portlet.purple { + background-color: #852b99 !important; +} + +.portlet > .portlet-body.light-grey, .portlet.light-grey { + background-color: #fafafa !important; +} + +.portlet > .portlet-body.grey, .portlet.grey { + background-color: #555555 !important; +} + +/* draggable girds */ + +.ui-sortable-placeholder { + border: 1px dotted black; + visibility: visible !important; + height: 100% !important; +} + +.ui-sortable-placeholder * { + visibility: hidden; +} + +.sortable-box-placeholder { + background-color: #f5f5f5; + border: 1px dashed #DDDDDD; + display: block; + /* float: left;*/ + margin-top: 0px !important; + margin-bottom: 24px !important; +} + +.sortable-box-placeholder * { + visibility:hidden; +} + +/*** +Solid colored portlet +***/ +.portlet.solid { + padding: 10px; +} + +.portlet.solid > .portlet-title > .tools { + margin-top: 2px; + border: 0px; +} + +.portlet.solid > .portlet-title { + margin-bottom: 5px; + border: 0px; +} + +.portlet.solid.bordered > .portlet-title { + margin-bottom: 15px; +} + +.portlet.solid.red > .portlet-title, +.portlet.solid.red > .portlet-title > .caption > i, +.portlet.solid.red > .portlet-body, + +.portlet.solid.green > .portlet-title, +.portlet.solid.green > .portlet-title > .caption > i, +.portlet.solid.green > .portlet-body, + +.portlet.solid.yellow > .portlet-title, +.portlet.solid.yellow > .portlet-title > .caption > i, +.portlet.solid.yellow > .portlet-body, + +.portlet.solid.grey > .portlet-title, +.portlet.solid.grey > .portlet-title > .caption > i, +.portlet.solid.grey > .portlet-body, + +.portlet.solid.purple > .portlet-title, +.portlet.solid.purple > .portlet-title > .caption > i, +.portlet.solid.purple > .portlet-body, + +.portlet.solid.blue > .portlet-title, +.portlet.solid.blue > .portlet-title > .caption > i, +.portlet.solid.blue > .portlet-body { + border: 0; + color: #fff; +} + +.portlet.bordered { + border-left: 2px solid #ddd; +} + +/*** +Box portlet +***/ + +.portlet.box { + padding:0px !important +} + +.portlet.box > .portlet-title { + padding:8px 10px 2px 10px; + border-bottom: 1px solid #eee; + color: #fff !important; +} + +.portlet.box > .portlet-title > .tools { + margin-top: 3px; +} + +.portlet.box > .portlet-title > .tools > a.remove, +.portlet.solid > .portlet-title > .tools > a.remove { + background-image:url(../img/portlet-remove-icon-white.png); +} + +.portlet.box > .portlet-title > .tools > a.config, +.portlet.solid > .portlet-title > .tools > a.config { + background-image:url(../img/portlet-config-icon-white.png); +} + +.portlet.box > .portlet-title > .tools > a.reload, +.portlet.solid > .portlet-title > .tools > a.reload { + background-image:url(../img/portlet-reload-icon-white.png); +} + +.portlet.box > .portlet-title > .tools > a.expand, +.portlet.solid > .portlet-title > .tools > a.expand { + background-image:url(../img/portlet-expand-icon-white.png); +} + +.portlet.box > .portlet-title > .tools > a.collapse, +.portlet.solid > .portlet-title > .tools > a.collapse { + background-image:url(../img/portlet-collapse-icon-white.png); +} + +/* portlet buttons */ +.portlet.box > .portlet-body { + background-color: #fff; + padding: 10px; +} + +.portlet.box > .portlet-title { + margin-bottom: 0px; +} + +.portlet.box.blue > .portlet-title { + background-color: #4b8df8; +} + +.portlet.box.blue { + border: 1px solid #b4cef8; + border-top: 0; +} + +.portlet.box.red > .portlet-title { + background-color: #e02222; +} + +.portlet.box.red { + border: 1px solid #ef8476; + border-top: 0; +} + +.portlet.box.yellow > .portlet-title { + background-color: #ffb848; +} + +.portlet.box.yellow { + border: 1px solid #fccb7e; + border-top: 0; +} + +.portlet.box.green > .portlet-title { + background-color: #35aa47; +} + +.portlet.box.green { + border: 1px solid #77e588; + border-top: 0; +} + +.portlet.box.purple > .portlet-title { + background-color: #852b99; +} + +.portlet.box.purple { + border: 1px solid #af5cc1; + border-top: 0; +} + +.portlet.box.grey > .portlet-title { + background-color: #555555; +} + +.portlet.box.grey { + border: 1px solid #9d9c9c; + border-top: 0; +} + +.portlet.box.light-grey > .portlet-title { + background-color: #aaa; +} + +.portlet.box.light-grey { + border: 1px solid #bbb; + border-top: 0; +} + +/*** +Charts and statistics +***/ +.chart, .pie, .bars { + overflow: hidden; + height: 300px; +} + +/*** +Statistic lists +***/ +.item-list.table .percent { + width: 30px; + float: right; + margin-right: 10px; + margin-top: 3px; +} + +/*** +Chart tooltips +***/ +.chart-tooltip { + clear: both; + z-index: 100; + background-color: #736e6e !important; + padding: 5px !important; + color: #fff; +} + +.chart-tooltip .label { + clear: both; + display: block; + margin-bottom: 2px; +} + +/*** +Mini chart containers +***/ +.bar-chart { + display: none +} + +.line-chart { + display: none +} + +/*** +Custom icon buttons +***/ +.icon-btn { + height: 60px; + min-width: 80px; + margin: 5px 5px 0 0; + border: 1px solid #ddd; + padding: 12px 0px 0px 0px; + background-color: #fafafa !important; + background-image: none !important; + filter:none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + display:inline-block !important; + color: #646464 !important; + text-shadow: none !important; + text-align: center; + cursor: pointer; + position: relative; + -webkit-transition: all 0.3s ease !important; + -moz-transition: all 0.3s ease !important; + -ms-transition: all 0.3s ease !important; + -o-transition: all 0.3s ease !important; + transition: all 0.3s ease !important; +} + +.icon-btn i { + font-size: 18px; +} + +.ie8 .icon-btn:hover { + filter: none !important; +} + +.icon-btn:hover { + text-decoration: none !important; + border-color: #999 !important; + color: #444 !important; + text-shadow: 0 1px 0px rgba(255, 255, 255, 1) !important; + -webkit-transition: all 0.3s ease !important; + -moz-transition: all 0.3s ease !important; + -ms-transition: all 0.3s ease !important; + -o-transition: all 0.3s ease !important; + transition: all 0.3s ease !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.icon-btn:hover .badge { + -webkit-transition: all 0.3s ease !important; + -moz-transition: all 0.3s ease !important; + -ms-transition: all 0.3s ease !important; + -o-transition: all 0.3s ease !important; + transition: all 0.3s ease !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.icon-btn div { + font-family: 'Open Sans', sans-serif; + margin-top: 5px; + margin-bottom: 20px; + color: #000; + font-size: 12px; + font-weight: 300; +} + +.icon-btn .badge { + position: absolute; + font-family: 'Open Sans', sans-serif; + font-size: 11px !important; + font-weight: 300; + top: -5px; + right: -5px; + padding: 3px 6px 3px 6px; + color: white !important; + text-shadow: none; + border-width: 0; + border-style: solid; + -webkit-border-radius: 12px !important; + -moz-border-radius: 12px !important; + border-radius: 12px !important; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +/* extended dropdowns */ +.dropdown-menu.extended { + min-width: 160px !important; + max-width: 300px !important; + width: 233px !important; + background-color: #ffffff !important; +} + +.dropdown-menu.extended:before, +.dropdown-menu.extended:after { + border-bottom-color: #ddd !important; +} + +.dropdown-menu.extended li a{ + display: block; + padding: 5px 10px !important; + clear: both; + font-weight: normal; + line-height: 20px; + white-space: normal !important; +} + +.dropdown-menu.extended li i{ + margin-right: 3px; +} + +.dropdown-menu.extended li a{ + font-size: 13px; + padding: 10px !important; + background-color: #ffffff; +} + +.dropdown-menu.extended li a:hover { + background-image: none; + background-color: #f5f5f5; + color: #000; + filter:none; +} + +.dropdown-menu.extended li p{ + padding: 10px; + background-color: #eee; + margin: 0px; + font-size: 14px; + font-weight: 300; + color: #000; +} + +.dropdown-menu.extended li a{ + padding: 7px 0 5px 0px; + list-style: none; + border-bottom: 1px solid #f4f4f4 !important; + font-size: 12px; + text-shadow: none; +} + +.dropdown-menu.extended li:first-child a { + border-top: none; + border-bottom: 1px solid #f4f4f4 !important; +} + +.dropdown-menu.extended li:last-child a { + border-top: 1px solid white !important; + border-bottom: 1px solid #f4f4f4 !important; +} + +.dropdown-menu.extended li.external > a { + font-size: 13px; + font-weight: 400; +} + +.dropdown-menu.extended li.external > a > i{ + margin-top: 3px; + float: right; +} + +/* header notifications dropdowns */ +.dropdown-menu .dropdown-menu-list.scroller { + padding-right: 0 !important; + padding-left: 0; + list-style: none; +} + +.dropdown-menu.notification li > a .time { + font-size: 12px; + font-weight: 600; + text-align: right; + font-style: italic; +} + +/* header inbox dropdowns */ +.dropdown-menu.inbox li > a .photo { + float: left; + padding-right: 6px; +} + +.dropdown-menu.inbox li > a .photo > img { + height: 40px; + width: 40px; +} + +.dropdown-menu.inbox li > a .subject { + display: block; +} + +.dropdown-menu.inbox li > a .subject .from { + font-size: 14px; + font-weight: 400; + color: #02689b; +} + +.dropdown-menu.inbox li > a .subject .time { + font-size: 12px; + font-weight: 600; + font-style: italic; + position: relative; + float: right; +} + +.dropdown-menu.inbox li > a .message { + display: block !important; + font-size: 12px; +} + +/* header tasks */ +.dropdown-menu.tasks .task { + margin-bottom: 5px; +} + +.dropdown-menu.tasks .task .desc { + font-size: 13px; + font-weight: 300; +} + +.dropdown-menu.tasks .task .percent { + font-size: 14px; + font-weight: 600; + font-family: 'Open Sans', sans-serif; + float: right; + display: inline-block; +} + +.dropdown-menu.tasks .progress { + display: block; + height: 11px; + margin: 0px; +} + +/*** +General list for item with image +***/ +.item-list li .img { + height: 50px; + width: 50px; + float: left; + margin-top: 3px; + margin-right: 5px; +} + +.item-list { + margin: 0px; + list-style: none; +} + +.item-list li { + padding: 7px 0 5px 0px; + list-style: none; + border-top: 1px solid white; + border-bottom: 1px solid #EBEBEB; + font-size: 12px; +} + +.item-list li:first-child { + border-top: none; + border-bottom: 1px solid #EBEBEB; +} + +.item-list li:last-child { + border-top: none; + border-bottom: none; +} + +.item-list li .label { + margin-right: 5px; +} + +.item-list.todo li .label { + position: absolute; + right: 80px; +} + +.item-list.todo li .actions { + position: absolute; + right: 45px; +} + +/*** +Custom tables +***/ +.table-toolbar { + margin-bottom: 15px; +} + +.table.table-full-width { + width: 100% !important; +} + +.table .m-btn { + margin-top: 0px; + margin-left: 0px; + margin-right: 5px; +} + +.table thead tr th { + font-size: 14px; + font-weight: 600; +} + +.table-advance { + margin-bottom: 10px !important; +} + +.table-advance thead { + color: #999; +} + +.table-advance thead tr th{ + background-color: #DDD; + font-size: 14px; + font-weight: 400; + color: #666; +} + +.table-advance div.success, +.table-advance div.info, +.table-advance div.important, +.table-advance div.warning, +.table-advance div.danger { + position: absolute; + margin-top:-5px; + float: left; + width: 2px; + height: 30px; + margin-right: 20px !important; +} + +.table-advance tr td { + border-left-width: 0px; +} +.table-advance tr td:first-child { + border-left-width: 1px !important; +} + +.table-advance tr td.highlight:first-child a { + margin-left: 15px; +} + +.table-advance td.highlight div.success { + border-left: 2px solid #66ee66; +} + +.table-advance td.highlight div.info { + border-left: 2px solid #87ceeb; +} + +.table-advance td.highlight div.important { + border-left: 2px solid #f02c71; +} + +.table-advance td.highlight div.warning { + border-left: 2px solid #fdbb39; +} + +.table-advance td.highlight div.danger { + border-left: 2px solid #e23e29; +} + +/*** +Star rating +***/ +.rating { + unicode-bidi: bidi-override; + direction: rtl; + font-size: 30px; +} + +.rating span.star { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; +} + +.rating span.star:hover { + cursor: pointer; +} + +.rating span.star:before { + content: "\f006"; + padding-right: 5px; + color: #999999; +} + +.rating span.star:hover:before, +.rating span.star:hover ~ span.star:before { + content: "\f005"; + color: #e3cf7a; +} + + +/*** +Item block with details shown on hover +***/ +.item { + overflow: hidden; + display: block; + margin-bottom: 20px; +} + +.item .details { + width: 100%; + display: none; + background-color: #000; + color: #fff !important; + padding: 5px; + text-align: center; + position: relative; + bottom:30px; + margin-bottom:-30px; + overflow: hidden; + z-index: 6; +} + +.item:hover .details { + display: block; + opacity: 0.7; + filter: alpha(opacity = 70); +} + +.item:hover .zoom-icon{ + opacity:0.5; + filter: alpha(opacity = 50); +} + +/*** +Zoom icon overlay on images +***/ +.zoom { + cursor: pointer; + width: 100%; + height: 100%; + position: relative; + z-index: 5; +} + +.zoom .zoom-icon { + background-image:url("../img/overlay-icon.png"); + background-color: #222; + background-repeat: no-repeat; + background-position: 50%; + position: absolute; + width: inherit; + height: inherit; + opacity: 0; + filter: alpha(opacity = 0); + z-index: 6; + top:0; +} + +/*** +Chats +***/ +.chats { + margin:0; + padding: 0; + margin-top: -15px; +} + +.chats li { + list-style: none; + padding: 5px 0; + margin: 10px auto; + font-size: 12px; +} + +.chats li img.avatar { + height: 45px; + width: 45px; + -webkit-border-radius: 50% !important; + -moz-border-radius: 50% !important; + border-radius: 50% !important; +} + +.chats li.in img.avatar { + float: left; + margin-right: 10px; +} + +.chats li .name { + color:#3590c1; + font-size: 13px; + font-weight: 400; +} + +.chats li .datetime { + color:#333; + font-size: 13px; + font-weight: 400; +} + +.chats li.out img.avatar { + float: right; + margin-left: 10px; +} + +.chats li .message { + display: block; + padding: 5px; + position: relative; +} + +.chats li.in .message { + text-align: left; + border-left: 2px solid #35aa47; + margin-left: 65px; + background: #fafafa +} + +.chats li.in .message .arrow { + display: block; + position: absolute; + top: 5px; + left: -8px; + width: 0; + height: 0; + + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + border-right: 8px solid #35aa47; +} + +.chats li.out .message .arrow { + display: block; + position: absolute; + top: 5px; + right: -8px; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + border-left: 8px solid #da4a38; +} + +.chats li.out .message { + border-right: 2px solid #da4a38; + margin-right: 65px; + background: #fafafa; + text-align: right; +} + +.chats li.out .name, +.chats li.out .datetime { + text-align: right; +} + +.chats li .message .body { + display: block; +} + +.chat-form { + margin-top: 15px; + padding: 10px; + background-color: #e9eff3; + overflow: hidden; + clear: both; +} + +.chat-form .input-cont { + margin-right: 40px; +} + +.chat-form .input-cont .form-control { + width: 100% !important; + margin-bottom: 0px; +} + +.chat-form .input-cont input{ + border: 1px solid #ddd; + width: 100% !important; + margin-top: 0; +} + +.chat-form .input-cont input { + background-color: #fff !important; +} + +.chat-form .input-cont input:focus{ + border: 1px solid #4b8df9 !important; +} + +.chat-form .btn-cont { + margin-top: -42px; + position: relative; + float: right; + width:44px; +} + +.chat-form .btn-cont .arrow { + position: absolute; + top: 17px; + right: 43px; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + border-right: 8px solid #4d90fe; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.chat-form .btn-cont:hover .arrow { + border-right-color: #0362fd; +} + +.chat-form .btn-cont:hover .btn { + background-color: #0362fd; +} + +.chat-form .btn-cont .btn { + margin-top: 8px; +} + +/*** +System feeds +***/ +.feeds { + margin: 0px; + padding: 0px; + list-style: none; +} + +.feeds li { + background-color: #fafafa; + margin-bottom: 7px; +} + +.feeds li:before, +.feeds li:after { + display: table; + line-height: 0; + content: ""; +} + +.feeds li:after { + clear: both; +} + +.feeds li:last-child { + margin-bottom: 0px; +} + +.feeds .col1 { + float:left; + width:100%; + clear: both; +} + +.feeds .col2 { + float:left; + width:75px; + margin-left:-75px; +} + +.feeds .col1 .cont { + float:left; + margin-right:75px; + overflow:hidden; +} + +.feeds .col1 .cont .cont-col1 { + float:left; + margin-right:-100%; +} + +.feeds .col1 .cont .cont-col1 .label { + display: inline-block; + padding: 5px 4px 6px 5px; + vertical-align: middle; + text-align: center; +} +.feeds .col1 .cont .cont-col1 .label > i { + text-align: center; + font-size: 14px; +} + +.feeds .col1 .cont .cont-col2 { + float:left; + width:100%; +} + +.feeds .col1 .cont .cont-col2 .desc { + margin-left:35px; + padding-top: 4px; + padding-bottom: 5px; + overflow:hidden; +} + +.feeds .col2 .date { + padding: 4px 9px 5px 4px; + text-align: right; + font-style: italic; + color:#c1cbd0; +} + +/*** +Users +***/ +.user-info { + margin-bottom: 10px !important; +} + +.user-info img { + float: left; + margin-right: 5px; +} + +.user-info .details { + display: inline-block; +} + +.user-info .label { + font-weight: 300; + font-size: 11px; +} + +/*** +Accordions +***/ +.accordion-heading { + background:#eee; +} + +.accordion-heading a { + text-decoration:none; +} + +.accordion-heading a:hover { + text-decoration:none; +} + +/*** +Vertical inline menu +***/ +.ver-inline-menu { + padding: 0; + margin: 0; + list-style: none; +} + +.ver-inline-menu li { + position:relative; + margin-bottom:1px; +} + +.ver-inline-menu li i { + width: 37px; + height: 37px; + display: inline-block; + color:#b9cbd5; + font-size:15px; + padding:12px 10px 10px 8px; + margin:0 8px 0 0; + text-align: center; + background:#e0eaf0 !important; +} + +.ver-inline-menu li a { + font-size: 13px; + color:#557386; + display:block; + background:#f0f6fa; + border-left:solid 2px #c4d5df; +} + +.ver-inline-menu li:hover a, +.ver-inline-menu li:hover i { + background:#e0eaf0; + text-decoration:none; +} + +.ver-inline-menu li:hover i { + color:#fff; + background:#c4d5df !important; +} + +.ver-inline-menu li.active a, +.ver-inline-menu li:hover a { + font-size: 13px; +} + +.ver-inline-menu li.active a { + border-left:solid 2px #0c91e5; +} + +.ver-inline-menu li.active a, +.ver-inline-menu li.active i { + color:#fff; + background:#169ef4; + text-decoration:none; +} + +.ver-inline-menu li.active i { + background:#0c91e5 !important; +} + +.ver-inline-menu li.active:after { + content: ''; + display: inline-block; + border-bottom: 6px solid transparent; + border-top: 6px solid transparent; + border-left: 6px solid #169ef4; + position: absolute; + top: 12px; + right: -5px; +} + +/*** +Custom tabs +***/ +.nav-tabs > li > a > .badge, +.nav-pills > li > a > .badge { + margin-top: -3px; +} + +.nav-tabs > li > a, +.nav-pills > li > a { + font-size: 14px; +} + +.nav-tabs-sm > li > a, +.nav-pills-sm > li > a { + font-size: 13px; +} + +.tabbable-custom { + margin-bottom: 15px; + padding: 0px; + overflow: hidden; +} + +.tabbable-custom > .nav-tabs { + border: none; + margin: 0px; +} + +.tabbable-custom > .tab-content { + background-color: #fff; + border: 1px solid #ddd; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + padding: 10px; +} + +.tabbable-custom.nav-justified .tab-content { + margin-top: -1px; +} + +.tabs-below.tabbable-custom.nav-justified .tab-content { + margin-top: 0px; + margin-bottom: -2px; +} + +.tabbable-custom.boxless > .tab-content { + padding:15px 0; + border-left:none; + border-right:none; + border-bottom:none; +} + +.tabbable-custom .nav-tabs > li { + margin-right: 2px; + border-top: 2px solid transparent; +} + +.tabbable-custom .nav-tabs > li > a { + margin-right: 0; + } + +.tabbable-custom .nav-tabs > li > a:hover { + background: none; + border-color:transparent; +} + +.tabbable-custom .nav-tabs > li.active { + border-top: 3px solid #d12610; + margin-top: 0; + position: relative; +} + +.tabbable-custom .nav-tabs > li.active > a { + border-top: none; + font-weight: 400; +} + +.tabbable-custom .nav-tabs > li.active > a:hover { + border-top: none; + background: #fff; + border-color: #d4d4d4 #d4d4d4 transparent; +} + +.tabbable-custom .nav-tabs > li { + margin-right: 2px; + border-top: 2px solid transparent; +} + +/* below tabs */ + +.tabs-below.tabbable-custom .nav-tabs > li > a { + border-top: none; + border-bottom: 2px solid transparent; + margin-top: -1px; +} + +.tabs-below.tabbable-custom .nav-tabs > li.active { + border-top: none; + border-bottom: 3px solid #d12610; + margin-bottom: 0; + position: relative; +} + +.tabs-below.tabbable-custom .nav-tabs > li.active > a { + border-bottom: none +} + +.tabs-below.tabbable-custom .nav-tabs > li.active > a:hover { + background: #fff; + border-color: #d4d4d4 #d4d4d4 transparent; +} + +/*full width tabs with bigger titles */ +.tabbable-custom.tabbable-full-width > .tab-content { + padding:15px 0; + border-left:none; + border-right:none; + border-bottom:none; +} + +.tabbable-custom.tabbable-full-width .nav-tabs > li > a { + color:#424242; + font-size:15px; + padding:9px 15px; +} + +/*** +Custom portlet tabs +***/ + +.portlet-tabs > .nav-tabs { + position: relative; + top: -41px; + margin-right: 10px; + overflow: hidden; +} + +.portlet-tabs > .nav-tabs > li { + float: right; +} + +.portlet-tabs > .nav-tabs { + border-bottom: none; +} + +.portlet-tabs > .nav-tabs > li > a { + color: #fff; + padding-top: 8px; + padding-bottom: 10px; + line-height: 16px; + margin-top: 6px; + margin-left: 0px; + margin-right: 0px; + border-left: 0; + border-right: 0; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; +} + +.portlet-tabs > .nav-tabs > li:last-child > a { + border-right:0; +} + +.portlet-tabs > .nav-tabs > li { + margin-left: 1px; +} + +.portlet-tabs > .nav-tabs > li.active { + color: #333; + border-top-color: transparent; +} + +.portlet-tabs > .nav-tabs > li.active > a { + margin-bottom: 0px; + border-bottom: 0; + margin-left: 0px; + margin-right: 0px; + border-left: 0; + border-right: 0; + border-top-color:transparent !important; +} + +.portlet-tabs > .nav-tabs > li > a:hover { + color: #333; + margin-bottom: 0; + border-bottom-color: transparent; + margin-left: 0; + margin-right: 0; + border-left: 0; + border-right: 0; + border-top-color:transparent; + background-color: #fff; +} + +.portlet-tabs > .nav-tabs > .active > a { + color: #555555; + cursor: default; + background-color: #fff; +} + +.portlet-tabs > .nav-tabs > .active > a:hover { + background-color: #fff !important; +} + +.portlet-tabs > .tab-content { + padding: 10px !important; + margin: 0px; + margin-top: -50px !important; +} + +.portlet.tabbable .portlet-body { + padding: 0px; +} + +.tab-pane > p:last-child { + margin-bottom: 0px; +} + +/* reverse aligned tabs */ + +.tabs-reversed > li { + float: right; +} + +.tabs-reversed > li, +.tabs-reversed > li > a { + margin-right: 0; +} + +/*** +Dashboard container +***/ + +#dashboard { + overflow: hidden; +} + +/*** +Dashboard stats +***/ +.dashboard-stat { + margin-bottom: 25px; +} + +.portlet .dashboard-stat:last-child { + margin-bottom: 0; +} + +.dashboard-stat:before, +.dashboard-stat:after { + display: table; + line-height: 0; + content: ""; +} +.dashboard-stat:after { + clear: both; +} + +.dashboard-stat .visual { + width: 80px; + height:80px; + display: block; + float: left; + padding-top: 10px; + padding-left: 15px; + margin-bottom: 10px; +} + +.dashboard-stat .visual i { + font-size: 65px; + line-height: 65px; + color: #fff; +} + +.dashboard-stat .visual { + font-size: 35px; + line-height: 35px; +} + +@media (min-width: 992px) and (max-width: 1024px) { + + .dashboard-stat .visual i { + font-size: 28px; + line-height: 28px; + } + +} + +.dashboard-stat .details { + position: absolute; + right: 15px; + padding-right: 10px; +} + +.dashboard-stat .details .number { + padding-top: 15px; + text-align: right; + font-size: 34px; + line-height: 34px; + letter-spacing: -1px; + margin-bottom: 5px; + font-weight: 300; + color: #fff; +} + +.dashboard-stat .details .desc { + text-align: right; + font-size: 16px; + letter-spacing: 0px; + font-weight: 300; + color: #fff; +} + +.dashboard-stat .more { + clear: both; + display: block; + padding: 5px 10px 5px 10px; + text-transform: uppercase; + font-weight: 300; + font-size: 11px; + color: #fff; + opacity: 0.7; + filter: alpha(opacity=70); +} + +.dashboard-stat .more:hover { + text-decoration: none; + opacity: 1; + filter: alpha(opacity=100); +} + +.dashboard-stat .more > i { + display: inline-block; + margin-top: 1px; + float: right; +} + +.dashboard-stat.blue { + background-color: #27a9e3; +} + +.dashboard-stat.blue .more { + background-color: #208dbe; +} + +.dashboard-stat.green { + background-color: #28b779; +} + +.dashboard-stat.green .more { + background-color: #10a062; +} + +.dashboard-stat.red { + background-color: #e7191b; +} + +.dashboard-stat.red .more { + background-color:#bc0d0e; +} + +.dashboard-stat.yellow { + background-color: #ffb848; +} + +.dashboard-stat.yellow .more { + background-color: #cb871b; +} + +.dashboard-stat.purple { + background-color: #852b99; +} + +.dashboard-stat.purple .more { + background-color: #6e1881; +} + +/*** +Text Stats +***/ + +.text-stat h3 { + margin-top: 5px; + margin-bottom: 0px; + font-size: 18px; +} + +.text-stat span { + font-size: 12px; + text-transform: uppercase; +} + +@media (max-width: 767px) { + + .text-stat { + margin-top: 20px; + } + +} + +/*** +Tiles(new in v1.1.1) +***/ + +.tiles { + margin-right: -10px; +} + +.tiles:before, +.tiles:after { + display: table; + content: " "; +} + +.tiles:after { + clear: both; +} + +.tile { + display: block; + letter-spacing: 0.02em; + float: left; + height: 135px; + width: 135px !important; + cursor: pointer; + text-decoration: none; + color: #ffffff; + position: relative; + font-weight: 300; + font-size: 12px; + letter-spacing: 0.02em; + line-height: 20px; + overflow: hidden; + border: 4px solid transparent; + margin: 0 10px 10px 0; +} + +.tile:after, +.tile:before { + content: ""; + float: left; +} + +.tile.double { + width: 280px !important; +} + +.tile.double-down { + height: 280px !important; +} + +.tile:active, .tile.selected { + border-color: #ccc !important; +} + +.tile:hover { + border-color: #aaa !important; +} + +.tile.selected .corner:after { + content: ""; + display: inline-block; + border-left: 40px solid transparent; + border-bottom: 40px solid transparent; + border-right: 40px solid #ccc; + position: absolute; + top: -3px; + right: -3px; +} + +.tile.selected .check:after { + content: ""; + font-family: FontAwesome; + font-size: 13px; + content: "\f00c"; + display: inline-block; + position: absolute; + top: 2px; + right: 2px; +} + +.tile * { + color: #ffffff; +} + +.tile .tile-body { + height: 100%; + vertical-align: top; + padding: 10px 10px; + overflow: hidden; + position: relative; + font-weight: 400; + font-size: 12px; + color: #000000; + color: #ffffff; + margin-bottom: 10px; +} + +.tile .tile-body img { + float: left; + margin-right: 10px; +} + +.tile .tile-body img.pull-right { + float: right !important; + margin-left: 10px; + margin-right: 0px; +} + +.tile .tile-body .content { + display: inline-block; +} + +.tile .tile-body > i { + margin-top: 17px; + display: block; + font-size: 56px; + line-height: 56px; + text-align: center; +} + + +.tile.double-down i { + margin-top: 95px; +} + +.tile .tile-body h1, +.tile .tile-body h2, +.tile .tile-body h3, +.tile .tile-body h4, +.tile .tile-body h5, +.tile .tile-body h6, +.tile .tile-body p { + padding: 0; + margin: 0; + line-height: 14px; +} + +.tile .tile-body h3, +.tile .tile-body h4 { + margin-bottom: 5px; +} + +.tile .tile-body h1:hover, +.tile .tile-body h2:hover, +.tile .tile-body h3:hover, +.tile .tile-body h4:hover, +.tile .tile-body h5:hover, +.tile .tile-body h6:hover, +.tile .tile-body p:hover { + color: #ffffff; +} + +.tile .tile-body p { + font-weight: 400; + font-size: 13px; + color: #000000; + color: #ffffff; + line-height: 20px; + overflow: hidden; +} + +.tile .tile-body p:hover { + color: rgba(0, 0, 0, 0.8); +} + +.tile .tile-body p:active { + color: rgba(0, 0, 0, 0.4); +} + +.tile .tile-body p:hover { + color: #ffffff; +} + +.tile.icon > .tile-body { + padding: 0; +} + +.tile .tile-object { + position: absolute; + bottom: 0; + left: 0; + right: 0; + min-height: 30px; + background-color: transparent; + *zoom: 1; +} + +.tile .tile-object:before, +.tile .tile-object:after { + display: table; + content: ""; +} + +.tile .tile-object:after { + clear: both; +} + +.tile .tile-object > .name { + position: absolute; + bottom: 0; + left: 0; + margin-bottom: 5px; + margin-left: 10px; + margin-right: 15px; + font-weight: 400; + font-size: 13px; + color: #ffffff; +} + +.tile .tile-object > .name > i { + vertical-align: middle; + display: block; + font-size: 24px; + height: 18px; + width: 24px; +} + +.tile .tile-object > .number { + position: absolute; + bottom: 0; + right: 0; + margin-bottom: 0; + color: #ffffff; + text-align: center; + font-weight: 600; + font-size: 14px; + letter-spacing: 0.01em; + line-height: 14px; + margin-bottom: 8px; + margin-right: 10px; +} + +.tile.image > .tile-body { + padding: 0 !important; +} + +.tile.image > .tile-body > img{ + width: 100%; + height: auto; + min-height: 100%; + max-width: 100%; +} + +.tile.image .tile-body h3 { + display: inline-block; +} + +/*** +Theme Panel +***/ + +.theme-panel { + width: 400px; + margin-top: 0px; + margin-right: 1px; + z-index: 999; + float: right; + position:relative; +} + +.theme-panel > .toggler { + top:4px; + right:0; + padding:20px; + cursor:pointer; + position:absolute; + background:#c9c9c9 url(../img/icon-color.png) center no-repeat; +} + +.theme-panel > .toggler:hover { + background-color: #3d3d3d !important; +} + +.theme-panel > .toggler-close { + display: none; + top:4px; + right:0; + padding:20px; + cursor:pointer; + position:absolute; + background: #3d3d3d url(../img/icon-color-close.png) center no-repeat !important; +} + +.theme-panel > .toggler-close:hover { + background-color:#222 !important; +} + +.theme-panel > .theme-options { + top:4px; + right:40px; + display:none; + position:absolute; + background:#3d3d3d; +} + +.theme-panel > .theme-options > .theme-option { + color:#cfcfcf; + padding: 15px; + border-top:1px solid #585858; + margin-top: 0px; + margin-bottom: 0px; +} + +.theme-panel > .theme-options > .theme-option.theme-colors { + border-top: 0; +} + +.theme-panel > .theme-options > .theme-option > span { + text-transform:uppercase; + display: inline-block; + width: 138px; + font-size: 14px; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > span { + display: block; + width: auto; +} + +.theme-panel > .theme-options > .theme-option > select.form-control { + display: inline; + width: 100px; + text-transform: lowercase; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul { + list-style:none; + padding: 0; + display: block; + margin-bottom: 1px !important; + margin-top: 10px; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li { + width:37px; + height:37px; + margin:0 4px; + cursor:pointer; + list-style:none; + float: left; + border:solid 1px #707070; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li:first-child { + margin-left: 0; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li:hover, +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.current { + border:solid 2px #ebebeb; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-black { + background:#333438; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-grey { + background:#6d6d6d; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight { + background:#3366cc; +} +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight { + background:#1ab3ec; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-blue { + background:#124f94; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-brown { + background:#623f18; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-purple { + background:#701584; +} + +.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-white { + background:#fff; +} + +/*** +Top bar menu +***/ + +/* enable arrow for dropdown menu */ +.header.navbar .nav > li > .dropdown-menu:before { + position: absolute; + top: -7px; + right: 9px; + display: inline-block !important; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.header.navbar .nav > li > .dropdown-menu:after { + position: absolute; + top: -6px; + right: 10px; + display: inline-block !important; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + border-left: 6px solid transparent; + content: ''; +} + +/*** +Mega Menu(new in v1.6) +***/ + +.mega-menu .nav, +.mega-menu .collapse, +.mega-menu .mega-menu-dropup, +.mega-menu .mega-menu-dropdown { + position: static; +} +.mega-menu .container { + position: relative; +} +.mega-menu .mega-menu-dropdown .dropdown-menu { + left: auto; + width: auto; +} +.mega-menu .nav.navbar-right .dropdown-menu { + left: auto; + right: 0; +} +.mega-menu .mega-menu-content { + padding: 10px; + margin: 0; +} +.mega-menu .mega-menu-full .dropdown-menu { + left: 20px; + right: 20px; +} + +.mega-menu-responsive-content { + padding: 10px 15px 10px 60px; +} + +.page-boxed .mega-menu .mega-menu-dropdown .dropdown-menu { + top: 42px; +} + +.page-boxed .mega-menu .mega-menu-dropdown.mega-menu-full .dropdown-menu { + margin: 0; + padding: 0; + left: 18px; + right: 18px; +} + +.mega-menu .mega-menu-submenu { + width: auto !important; + padding: 0px 30px 0px 0px !important; + margin: 0 !important; +} + + + .mega-menu-content .row :last-child>ul{ + border-right: 0 !important; +} + +.mega-menu .mega-menu-submenu li > h3 { + font-size: 14px; + margin-top: 10px; + padding-left: 5px; +} + +.mega-menu .mega-menu-submenu li { + padding: 2px !important; + margin: 0 !important; + list-style: none; +} + +.mega-menu .mega-menu-submenu li > a { + padding: 5px !important; + margin: 0 !important; +} + +/*** +Horezantal Menu(new in v1.2) +***/ + +.header.navbar .hor-menu { + margin: 0; + float: left; +} + +.header.navbar .hor-menu ul.nav li > a { + font-size: 15px; + padding: 11px 10px; +} + +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected { + left: 50%; + bottom:0; + position: absolute; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + /*border-top: 6px solid #e02222;*/ + display: inline-block; + margin: 0; + width: 0px; + height:0px; + margin-left: -7px; + margin-bottom:-6px; +} + +/*drop-down*/ +.header.navbar .hor-menu .dropdown-menu { + margin-top: 0; + border: none; + box-shadow: none; +} + +.header.navbar .hor-menu .classic-menu-dropdown .dropdown-submenu > .dropdown-menu { + top: 0; +} + +.header.navbar .hor-menu .classic-menu-dropdown .dropdown-submenu > a:after { + top: 8px; + margin-right: 0px; +} + +.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu li > a { + padding: 7px 18px !important; + margin-bottom:1px; +} + +.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu .arrow { + display: none; +} + +.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu li > a:hover, +.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu li:hover > a, +.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu li.active > a { + filter:none !important; +} + +.header.navbar .hor-menu .nav > li > .dropdown-menu:after, +.header.navbar .hor-menu .nav > li > .dropdown-menu:before { + border-bottom: none !important; +} + +/*search*/ +.header.navbar .hor-menu .hor-menu-search-form-toggler { + display: inline-block; + padding: 12px 22px 12px 22px !important; + cursor: pointer; + background: url(../img/hor-menu-search.png) no-repeat center; +} + +.header.navbar .hor-menu .hor-menu-search-form-toggler:hover { + opacity: 0.8; + filter: alpha(opacity=80); +} + +.header.navbar .hor-menu a.hor-menu-search-form-toggler-close { + display: none; +} + +.header.navbar .hor-menu .search-form { + margin: 0; + top:42px; + right:0px; + padding:0 4px; + display:none; + z-index:999; + position:absolute; +} + +.header.navbar .hor-menu .search-form .btn { + padding: 7px 20px; + height: 32px; + width: 10px; + display: inline-block; +} + +.header.navbar .hor-menu .search-form .btn:hover { + opacity: 0.8; + filter: alpha(opacity=80); +} + +.header.navbar .hor-menu .search-form form { + margin-bottom: 0; +} + +.header.navbar .hor-menu .search-form form input { + background: none; + width: 200px; + border: none; + margin-top: 6px; +} + +/*** +Top News Blocks(new in v1.2.2) +***/ +.top-news { + color: #fff; + margin: 8px 0; +} + +.top-news a, +.top-news em, +.top-news span { + display: block; + text-align: left; +} + +.top-news a { + padding: 10px; + position: relative; + margin-bottom: 10px; +} + +.top-news a .top-news-icon { + right: 8px; + bottom: 15px; + opacity:0.3; + font-size: 35px; + position: absolute; + filter: alpha(opacity=30); /*For IE8*/ +} + +.top-news em { + margin-bottom: 0; + font-style: normal; +} + +.top-news span { + font-size: 18px; + margin-bottom: 5px; +} + +/*** +Block Images(new in v1.2.2) +***/ +.blog-images { + margin-bottom: 0; +} + +.blog-images li { + padding: 0; + margin: 0; + display: inline; +} + +.blog-images li a:hover { + text-decoration: none; +} + +.blog-images li img { + width: 50px; + height: 50px; + opacity: 0.6; + margin: 0 2px 8px; +} + +.blog-images li img:hover { + opacity: 1; + box-shadow: 0 0 0 4px #72c02c; + transition: all 0.4s ease-in-out 0s; + -moz-transition: all 0.4s ease-in-out 0s; + -webkit-transition: all 0.4s ease-in-out 0s; +} + +/*Sidebar Tags*/ +ul.sidebar-tags a { + color: #555; + font-size:12px; + padding:3px 5px; + background:#f7f7f7; + margin:0 2px 5px 0; + display:inline-block; +} + +ul.sidebar-tags a:hover, +ul.sidebar-tags a:hover i { + background: #EEE; + text-decoration:none; + -webkit-transition:all 0.3s ease-in-out; + -moz-transition:all 0.3s ease-in-out; + -o-transition:all 0.3s ease-in-out; + transition:all 0.3s ease-in-out; +} + +ul.sidebar-tags a i { + color:#777; +} + +ul.sidebar-tags li { + padding: 0; +} + +/*** +Social Icons(new in v1.2.2) +***/ +.social-icons { + padding: 0; + margin:0; +} + +.social-icons:after, +.social-icons:before { + content: ""; + display: table; +} + +.social-icons:after { + clear: both; +} + +.social-icons li { + float:left; + display:inline; + list-style:none; + margin-right:5px; + margin-bottom:5px; + text-indent:-9999px; +} +.social-icons li a, a.social-icon { + width:28px; + height:28px; + display:block; + background-position:0 0; + background-repeat:no-repeat; + transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; +} +.social-icons li:hover a { + background-position:0 -38px; +} + +.social-icons-color li a { + opacity: 0.7; + background-position:0 -38px !important; +} + +.social-icons-color li a:hover { + opacity: 1; +} + +.social-icons .amazon {background: url(../img/social/amazon.png) no-repeat;} +.social-icons .behance {background: url(../img/social/behance.png) no-repeat;} +.social-icons .blogger {background: url(../img/social/blogger.png) no-repeat;} +.social-icons .deviantart {background: url(../img/social/deviantart.png) no-repeat;} +.social-icons .dribbble {background: url(../img/social/dribbble.png) no-repeat;} +.social-icons .dropbox {background: url(../img/social/dropbox.png) no-repeat;} +.social-icons .evernote {background: url(../img/social/evernote.png) no-repeat;} +.social-icons .facebook {background: url(../img/social/facebook.png) no-repeat;} +.social-icons .forrst {background: url(../img/social/forrst.png) no-repeat;} +.social-icons .github {background: url(../img/social/github.png) no-repeat;} +.social-icons .googleplus {background: url(../img/social/googleplus.png) no-repeat;} +.social-icons .jolicloud {background: url(../img/social/jolicloud.png) no-repeat;} +.social-icons .last-fm {background: url(../img/social/last-fm.png) no-repeat;} +.social-icons .linkedin {background: url(../img/social/linkedin.png) no-repeat;} +.social-icons .picasa {background: url(../img/social/picasa.png) no-repeat;} +.social-icons .pintrest {background: url(../img/social/pintrest.png) no-repeat;} +.social-icons .rss {background: url(../img/social/rss.png) no-repeat;} +.social-icons .skype {background: url(../img/social/skype.png) no-repeat;} +.social-icons .spotify {background: url(../img/social/spotify.png) no-repeat;} +.social-icons .stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;} +.social-icons .tumblr {background: url(../img/social/tumblr.png) no-repeat;} +.social-icons .twitter {background: url(../img/social/twitter.png) no-repeat;} +.social-icons .vimeo {background: url(../img/social/vimeo.png) no-repeat;} +.social-icons .wordpress {background: url(../img/social/wordpress.png) no-repeat;} +.social-icons .xing {background: url(../img/social/xing.png) no-repeat;} +.social-icons .yahoo {background: url(../img/social/yahoo.png) no-repeat;} +.social-icons .youtube {background: url(../img/social/youtube.png) no-repeat;} +.social-icons .vk {background: url(../img/social/vk.png) no-repeat;} +.social-icons .instagram {background: url(../img/social/instagram.png) no-repeat;} +.social-icons .reddit {background: url(../img/social/reddit.png) no-repeat;} +.social-icons .aboutme {background: url(../img/social/aboutme.png) no-repeat;} +.social-icons .flickr {background: url(../img/social/flickr.png) no-repeat;} +.social-icons .foursquare {background: url(../img/social/foursquare.png) no-repeat;} +.social-icons .gravatar {background: url(../img/social/gravatar.png) no-repeat;} +.social-icons .klout {background: url(../img/social/klout.png) no-repeat;} +.social-icons .myspace {background: url(../img/social/myspace.png) no-repeat;} +.social-icons .quora {background: url(../img/social/quora.png) no-repeat;} + +/*** +Inline Social Icons +***/ + +.social-icon { + display:inline-block !important; + width:28px; + height:28px; + background-position:0 0; + background-repeat:no-repeat; + transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; +} + +.social-icon.amazon {background: url(../img/social/amazon.png) no-repeat;} +.social-icon.behance {background: url(../img/social/behance.png) no-repeat;} +.social-icon.blogger {background: url(../img/social/blogger.png) no-repeat;} +.social-icon.deviantart {background: url(../img/social/deviantart.png) no-repeat;} +.social-icon.dribbble {background: url(../img/social/dribbble.png) no-repeat;} +.social-icon.dropbox {background: url(../img/social/dropbox.png) no-repeat;} +.social-icon.evernote {background: url(../img/social/evernote.png) no-repeat;} +.social-icon.facebook {background: url(../img/social/facebook.png) no-repeat;} +.social-icon.forrst {background: url(../img/social/forrst.png) no-repeat;} +.social-icon.github {background: url(../img/social/github.png) no-repeat;} +.social-icon.googleplus {background: url(../img/social/googleplus.png) no-repeat;} +.social-icon.jolicloud {background: url(../img/social/jolicloud.png) no-repeat;} +.social-icon.last-fm {background: url(../img/social/last-fm.png) no-repeat;} +.social-icon.linkedin {background: url(../img/social/linkedin.png) no-repeat;} +.social-icon.picasa {background: url(../img/social/picasa.png) no-repeat;} +.social-icon.pintrest {background: url(../img/social/pintrest.png) no-repeat;} +.social-icon.rss {background: url(../img/social/rss.png) no-repeat;} +.social-icon.skype {background: url(../img/social/skype.png) no-repeat;} +.social-icon.spotify {background: url(../img/social/spotify.png) no-repeat;} +.social-icon.stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;} +.social-icon.tumblr {background: url(../img/social/tumblr.png) no-repeat;} +.social-icon.twitter {background: url(../img/social/twitter.png) no-repeat;} +.social-icon.vimeo {background: url(../img/social/vimeo.png) no-repeat;} +.social-icon.wordpress {background: url(../img/social/wordpress.png) no-repeat;} +.social-icon.xing {background: url(../img/social/xing.png) no-repeat;} +.social-icon.yahoo {background: url(../img/social/yahoo.png) no-repeat;} +.social-icon.youtube {background: url(../img/social/youtube.png) no-repeat;} +.social-icon.vk {background: url(../img/social/vk.png) no-repeat;} +.social-icon.instagram {background: url(../img/social/instagram.png) no-repeat;} +.social-icon.reddit {background: url(../img/social/reddit.png) no-repeat;} +.social-icon.aboutme {background: url(../img/social/aboutme.png) no-repeat;} +.social-icon.flickr {background: url(../img/social/flickr.png) no-repeat;} +.social-icon.foursquare {background: url(../img/social/foursquare.png) no-repeat;} +.social-icon.gravatar {background: url(../img/social/gravatar.png) no-repeat;} +.social-icon.klout {background: url(../img/social/klout.png) no-repeat;} +.social-icon.myspace {background: url(../img/social/myspace.png) no-repeat;} +.social-icon.quora {background: url(../img/social/quora.png) no-repeat;} + +.social-icon:hover { + background-position:0 -38px; +} + +.social-icon-color { + opacity: 0.7; + background-position:0 -38px !important; +} + +.social-icon-color:hover { + opacity: 1; +} + +/*** +Notes +***/ + +/* Common styles for all types */ +.note { + margin: 0 0 20px 0; + padding: 15px 30px 15px 15px; + border-left: 5px solid #eee; +} + +.note h1, +.note h2, +.note h3, +.note h4 { + margin-top: 0; +} + +.note p:last-child { + margin-bottom: 0; +} +.note code, +.note .highlight { + background-color: #fff; +} + +/* Variations */ +.note-danger { + background-color: #FAEAE6; + border-color: #ed4e2a; +} + +.note-warning { + background-color: #FCF3E1; + border-color: #fcb322; +} + +.note-info { + background-color: #E8F6FC; + border-color: #57b5e3; +} + +.note-success { + background-color: #EBFCEE; + border-color: #3cc051; +} + +/*** +Demo Utils +***/ +.scrollspy-example { + position: relative; + height: 200px; + margin-top: 10px; + overflow: auto; +} + +.util-btn-margin-bottom-5 .btn { + margin-bottom: 5px !important; +} + +.util-btn-group-margin-bottom-5 .btn-group { + margin-bottom: 5px !important; +} + +.fontawesome-demo i { + font-size: 18px; +} + +.fontawesome-demo li { + padding-top: 5px; + padding-bottom: 5px; +} + +.glyphicons-demo ul { + padding-left: 0; + padding-bottom: 1px; + margin-bottom: 20px; + list-style: none; + overflow: hidden; +} + +.bs-glyphicons { + padding-left: 0; + padding-bottom: 1px; + margin-bottom: 20px; + list-style: none; + overflow: hidden; +} +.glyphicons-demo ul li { + float: left; + width: 25%; + height: 115px; + padding: 10px; + margin: 0 -1px -1px 0; + font-size: 12px; + line-height: 1.4; + text-align: center; + border: 1px solid #ddd; +} + +.glyphicons-demo .glyphicon { + display: block; + margin: 5px auto 10px; + font-size: 24px; +} +.glyphicons-demo ul li:hover { + background-color: rgba(86,61,124,.1); +} + +@media (min-width: 768px) { + .glyphicons-demo ul li { + width: 12.5%; + } +} + +/*** +Forms +****/ + +.static-info { + margin-bottom: 10px; +} + +.static-info .name { + font-size: 14px; +} + +.static-info .value { + font-size: 14px; + font-weight: 600; +} + +.static-info.align-reverse .name, +.static-info.align-reverse .value { + text-align: right; +} + +input.placeholder, +textarea.placeholder { + color: #aaa !important; +} + +.help-block { + margin-top: 5px; + margin-bottom: 5px; +} + +.form-inline input { + margin-bottom: 0px !important; +} + +.control-label { + margin-top: 2px; +} + +.form-control-static { + font-size: 14px; + padding-top: 7px; +} + +.control-label .required { + color: #e02222; + font-size: 12px; + padding-left: 2px; +} + +.switch-wrapper { + display: inline-block; +} + +.form { + padding: 0 !important; +} + +.form-body { + padding: 10px; +} + +.form-actions { + padding: 20px 10px; + margin-top: 20px; +/* background-color: #f5f5f5; + border-top: 1px solid #e5e5e5;*/ + *zoom: 1; +} + +.form-actions.nobg { + background-color: transparent; +} + +.form-actions.top { + margin-top: 0; + margin-bottom: 20px; + border-top: 0; + border-bottom: 1px solid #e5e5e5; +} + +.form-actions.fluid { + padding: 20px 0; +} + +.form-actions.fluid > [class^="col-"] { + padding-left: 13px; +} + +.form-actions:before, +.form-actions:after { + display: table; + line-height: 0; + content: ""; +} + +.form-actions:after { + clear: both; +} + +.form-section { + margin: 30px 0px 25px 0px; + padding-bottom: 5px; + border-bottom: 1px solid #eee; +} + +.form .form-section:first-child { + margin-top: 5px; +} + +.help-inline { + font-size: 13px; + color: #737373; + display: inline-block; + padding: 5px; +} + +/* left, right aligned form actions */ +.form-actions.right { + padding-left: 0; + padding-right: 10px; + text-align: right; +} + +.form-actions.left { + padding-left: 10px; + padding-right: 0; + text-align: left; +} + +/* Checkboxes */ +.form-group .checkbox { + padding-left: 0; +} + +.checkbox-list > label { + display: block; +} + +.checkbox-list > label.checkbox-inline { + display: inline-block; +} + +.checkbox-list > label.checkbox-inline:first-child { + padding-left: 0; +} + +/* Radios */ + +.radio-list > label { + display: block; +} + +.radio-list > label.radio-inline { + display: inline-block; +} + +.radio-list > label.radio-inline:first-child { + padding-left: 0; +} + +.form-horizontal .radio-list .radio { + padding-top: 1px; +} + +.form-horizontal .radio-list > label { + margin-bottom: 0; +} + +.form-horizontal .radio > span { + margin-top: 2px; +} + +/* Rows seperated form layout */ +.form-row-seperated .form-group { + margin: 0; + border-bottom: 1px solid #efefef; + padding: 10px 0px 10px 0px; +} + +.form-row-seperated .form-group.last { + border-bottom: 0; + margin-bottom: 0; + padding-bottom: 10px; +} + +.form-row-seperated .form-actions { + margin-top: 0; +} + +.form-row-seperated .form-body { + padding: 0; + margin-top: 0; +} + +.form-row-seperated .help-block { + margin-bottom: 0; +} + +/* form bordered */ +.form-bordered .form-body { + margin: 0; + padding: 0; +} + +.form-bordered .form-actions { + margin-top: 0; +} + +.form-bordered .form-group { + margin: 0; + border-bottom: 1px solid #efefef; +} + +.form-bordered .form-group.last { + border-bottom: 0; +} + +.form-bordered .help-block { + margin-bottom: 0; +} + +.form-bordered .control-label { + padding-top: 16px; +} + +.form-bordered .form-group > div { + padding: 10px; + border-left: 1px solid #efefef; +} + +.form-bordered .form-actions.fluid > .row > div { + padding-left: 10px; +} + +.form-horizontal.form-bordered.form-row-stripped .form-group:nth-child(even) { + background-color: #fcfcfc; +} + +.form-horizontal.form-bordered.form-label-stripped .form-group:nth-child(even) { + background-color: #fcfcfc; +} + +.form-horizontal.form-bordered.form-row-stripped .form-control { + background: #fff !important; +} + +.form-horizontal.form-bordered.form-label-stripped .form-group:nth-child(even) > div { + background-color: #ffffff; +} + +/*** +Bordered form layout +***/ + +.form-bordered .form-control { + margin: 0; +} + + +/*** +Disabled Menu Link +***/ + +.disabled-link > a > span.text, +.disabled-link > a > span.title { + font-style: italic !important; + color: #888 !important; +} + +.disabled-link > a:hover { + cursor: not-allowed !important; +} + + +/*** +Responsive & Scrollable Tables +***/ + +.table-scrollable { + width: 100%; + overflow-x: auto; + overflow-y: hidden; + border: 1px solid #dddddd; + margin: 10px 0 !important; +} + +.table-scrollable > .table { + width: 100% !important; + margin: 0 !important; + margin-bottom: 0; + background-color: #fff; +} + +.table-scrollable > .table > thead > tr > th, +.table-scrollable > .table > tbody > tr > th, +.table-scrollable > .table > tfoot > tr > th, +.table-scrollable > .table > thead > tr > td, +.table-scrollable > .table > tbody > tr > td, +.table-scrollable > .table > tfoot > tr > td { + white-space: nowrap; +} + +.table-scrollable > .table-bordered { + border: 0; +} + +.table-scrollable > .table-bordered > thead > tr > th:first-child, +.table-scrollable > .table-bordered > tbody > tr > th:first-child, +.table-scrollable > .table-bordered > tfoot > tr > th:first-child, +.table-scrollable > .table-bordered > thead > tr > td:first-child, +.table-scrollable > .table-bordered > tbody > tr > td:first-child, +.table-scrollable > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; +} + +.table-scrollable > .table-bordered > thead > tr > th:last-child, +.table-scrollable > .table-bordered > tbody > tr > th:last-child, +.table-scrollable > .table-bordered > tfoot > tr > th:last-child, +.table-scrollable > .table-bordered > thead > tr > td:last-child, +.table-scrollable > .table-bordered > tbody > tr > td:last-child, +.table-scrollable > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; +} + +.table-scrollable > .table-bordered > thead > tr:last-child > th, +.table-scrollable > .table-bordered > tbody > tr:last-child > th, +.table-scrollable > .table-bordered > tfoot > tr:last-child > th, +.table-scrollable > .table-bordered > thead > tr:last-child > td, +.table-scrollable > .table-bordered > tbody > tr:last-child > td, +.table-scrollable > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; +} + +/*** +Responsive Flip Scroll Tables +***/ + +.flip-scroll table { width: 100%; } + +@media only screen and (max-width: 768px) { + + .flip-scroll .flip-content:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } + .flip-scroll * html .flip-content { zoom: 1; } + .flip-scroll *:first-child+html .flip-content { zoom: 1; } + + .flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; } + + .flip-scroll th, + .flip-scroll td { margin: 0; vertical-align: top; } + .flip-scroll th { + text-align: left; + border: 0 !important; + border-bottom: 1px solid #ddd !important; + border-right: 1px solid #ddd !important; + font-size: 13px !important; + padding: 5px; + width: auto !important; + } + + .flip-scroll table { display: block; position: relative; width: 100%; } + .flip-scroll thead { + display: block; + float: left; + } + .flip-scroll tbody { + display: block; + width: auto; + position: relative; + overflow-x: auto; + white-space: nowrap; + } + .flip-scroll thead tr { display: block; } + .flip-scroll th { display: block; text-align: right; } + .flip-scroll tbody tr { display: inline-block; vertical-align: top; margin-left: -5px; } + .flip-scroll td { display: block; min-height: 1.25em; text-align: left; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important} + + /* sort out borders */ + + .flip-scroll th { border-bottom: 0; border-left: 0; } + .flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; } + .flip-scroll tbody tr { border-left: 1px solid #ddd; } + .flip-scroll th:last-child, + .flip-scroll td:last-child { border-bottom: 1px solid #ddd; } + +} + +/*** +UI Loading +***/ + +.loading-message { + display: inline-block; + min-width: 125px; + padding: 10px; + margin: 0 auto; + color: #000 !important; + font-size: 13px; + font-weight: 400; + text-align: center; + vertical-align: middle; +} + +.loading-message span { + line-height:20px; + vertical-align: middle; +} + +.loading-message.loading-message-boxed { + border: 1px solid #ddd; + background-color: #eee; + -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); +} + +.page-loading { + position: fixed; + top: 50%; + left: 50%; + min-width: 125px; + margin-left: -50px; + margin-top: -30px; + padding: 7px; + text-align: center; + color: #333; + font-size: 13px; + border: 1px solid #ddd; + background-color: #eee; + vertical-align: middle; + -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); +} + +.page-loading span { + line-height:20px; + vertical-align: middle; +} + +.zteDivWidth +{ + width:auto !important +} + + + +.nav-load-error {} + +.nav-pos-option {} + +/*TAB*/ +.nav-tabs{ +border:0; +} +.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{ +border:0; +border-top:3px solid #F3565D; +} +.nav-tabs>li>a{ +border-radius:0; +} +.nav-tabs>li>a:hover{ +background-color:#f1f3fa; +border:1Px solid #f1f3fa; +} +/*button*/ +.btn{ +min-width: 80px; +letter-spacing:1px; +} +.btnGroup .btn{ +margin-left:15px; +margin-right:15px; +} +.pagination-panel .btn{ +min-width: 4px; } +/*radius*/ +.radius_l{ +border-radius: 20px; +} +.radius_m{ +border-radius: 8px; +} +.radius_s{ +border-radius: 3px; +} +/*common color*/ +.blue1 { + background-color:#5b9bd1; + color:#fff; +} +.blue1:hover{ + background-color:#487ca9; + color:#fff; +} +.blue2{ + background-color:#57b5e3; + color:#fff; +} +.blue2:hover{ + background-color:#43a1cf; + color:#fff; +} +.red{ + background-color:#E35B5A; + color:#fff; +} +.red:hover{ + background-color:#ad9a4d; + color:#fff; +} +.green{ + background-color:#44B6AE; +} +.green:hover{ + background-color:#329d96; +} +.yellow{ + background-color:#C0AF69; + color:#fff; +} +.yellow:hover{ + background-color:#d45150; + color:#fff; +} +.grey{ + background-color:#e5e5e5; + color:#333; +} +.grey:hover{ + background-color:#d8d8d8; + color:#333; +} +/*Progress Bars*/ +.progress { + border: 0; + background-image: none !important; + filter: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + +} +.form-wizard .steps > li.active > a.step .number{ +background-color:#45B6AF +} +.progress > .progress-bar-success{ +background-color:#45B6AF +} +/*label*/ +label{ +font-weight:400; +margin-bottom:15px; +} +/**/ +.input-group-btn-vertical.fa{ +font-size:12px; +} +.spinner { + width: 60px; + margin-left:10px; + margin-right:30px; +} +.spinner input { + text-align: right; +} +.input-group-btn-vertical { + position: relative; + white-space: nowrap; + width: 1%; + vertical-align: middle; + display: table-cell; +} +.input-group-btn-vertical > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + padding: 6px; + margin-left: -1px; + position: relative; + border-radius: 0; +} +.input-group-btn-vertical > .btn{ + min-width:20px; +} +.input-group-btn-vertical > .btn:first-child { + border-top-right-radius: 4px; +} +.input-group-btn-vertical > .btn:last-child { + margin-top: -2px; + border-bottom-right-radius: 4px; +} +.input-group-btn-vertical i{ + position: absolute; + top: -2px; + left: 5px; +} +.input-group .form-control{ +height:26px !important; +} + +.about{ + height:345px; + width:528px; +} + +.aboutmain{ + background-image: url("../img/about/about-bg-light.png"); +} + +.aboutinfo{ + background-image: url("../img/about/about-bg-dark.png"); +} + +.about a{ + color: white; + + margin-left:15px; + text-decoration: none; +} + +.about a.about_close{ + float:right; + margin-right:20px; + font-size: 1.2em; +} + +.about div{ + padding-top:7px; + +} + +.about div.info{ + float: right; + margin-right: 15px; + margin-top: 130px; + color: white; + font-size: 13px; +} + +.about div.info div{ + margin-left:15px; +} + +.about div.info img{ + margin-right: 55px; +} + +.aboutDlg{ + width: 530px; + margin-left:150px; +} + +.aboutDlg .dataTable{ + background-color: white; + +} + +.aboutDlg table.dataTable .heading>th.sorting_disabled { + background-color: white !important; +} + +.aboutDlg #abouttable_wrapper{ + height:285px; + background-color: white; + padding:0px; + overflow:auto; +} + +.aboutDlg td , .aboutDlg .table thead tr th{ + font-size:13px; + font-weight:100; +} + +.aboutDlg{ + font-family:microsoft yahei,Arial; + letter-spacing:1px; +} + +.aboutDlg tr { + height:37px; +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/black.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/black.css new file mode 100644 index 00000000..35572e3e --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/black.css @@ -0,0 +1,388 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Default theme +***/ + +/*** +Reset and overrides +***/ +body { + background-color: #3d3d3d !important; +} +/*** +Page header +***/ +.header { + filter: none !important; + background-image: none !important; + background-color: #212121 !important; +} +.header .btn-navbar { + background-color: #212121 !important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + background-color: #383838 !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #8a8a8a !important; +} +.page-content .page-breadcrumb.breadcrumb{ +background-color:#F5F5F5 !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #000; +} + +.header .search-form .form-control { + color: #999; + border: 0; + background-color: #000; +} + +.header .search-form .form-control::-webkit-input-placeholder { /* WebKit browsers */ + color: #777; +} +.header .search-form .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #777; +} +.header .search-form .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #777; +} +.header .search-form .form-control:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #777; +} + +.header .search-form .submit { + background: url(../../img/search-icon-light.png); +} + +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #999; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #fff; + background: #383838; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #383838; +} +.header .hor-menu .dropdown-menu li > a { + color: #999; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #383838 url(../../img/hor-menu-search-close.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#383838; +} + +.header .hor-menu .search-form form input { + color: #999; +} + +.header .hor-menu .search-form .btn { + color: #999; + background: url(../../img/search-icon.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #999; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #999; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #999; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #999; +} +.btn-group .btn.blue.dropdown-toggle{ + background-color: #3d3d3d !important; + color: #fff !important; +} +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #444; +} +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} +/*** +Page sidebar +***/ +.page-sidebar { + background-color: #3d3d3d; +} +ul.page-sidebar-menu > li > a { + border-top: 1px solid #5c5c5c !important; + color: #ffffff !important; +} +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} +ul.page-sidebar-menu > li a i { + color: #969696; +} +ul.page-sidebar-menu > li.open > a, +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li:hover > a { + background: #303030; +} +ul.page-sidebar-menu > li.active > a { + background: #e02222 !important; + border-top-color: transparent !important; + color: #ffffff; +} +ul.page-sidebar-menu > li.active > a i { + color: #ffffff; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + color: #ffffff !important; + background: #575757 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + background: #575757 !important; +} +/* 3rd level sub menu */ +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover, +ul.page-sidebar-menu > li > ul.sub-menu li.open > a { + color: #ffffff !important; + background: #575757 !important; +} +/* font color for all sub menu links*/ +ul.page-sidebar-menu li > ul.sub-menu > li > a { + color: #bdbdbd; +} +/* menu arrows */ +ul.page-sidebar-menu > li > a .arrow:before, +ul.page-sidebar-menu > li > a .arrow.open:before { + color: #7d7d7d !important; +} +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #707070 !important; +} +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #8a8a8a !important; +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #ffffff !important; +} +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #242424 !important; + color: #7d7d7d; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #7d7d7d !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #7d7d7d !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #7d7d7d !important; +} +.page-sidebar .sidebar-search input { + background-color: #3d3d3d !important; + color: #bfbfbf !important; +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #7d7d7d !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon.png); +} +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler.jpg); + background-color: #242424; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #3d3d3d !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #3d3d3d; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #999999; +} +.footer .footer-tools .go-top { + background-color: #4f4f4f; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #8a8a8a; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #242424; +} +.page-footer-fixed .footer .footer-inner { + color: #999999; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #4f4f4f; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #8a8a8a; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #18a5ed; +} +.gritter-item-wrapper a:hover { + color: #0b6694; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #2e2e2e !important; + } + .page-boxed .page-container { + background-color: #3d3d3d; + border-left: 1px solid #5e5e5e; + border-bottom: 1px solid #5e5e5e; + } + .page-boxed.page-sidebar-reversed .page-container { + border-left: 0; + border-right: 1px solid #5e5e5e; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container { + border-left: 0; + border-right: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #5e5e5e; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #5e5e5e; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #2e2e2e !important; + } +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #292929 !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #4a4a4a !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + .page-sidebar .sidebar-search input { + background-color: #292929 !important; + } + ul.page-sidebar-menu > li.open > a, + ul.page-sidebar-menu > li > a:hover, + ul.page-sidebar-menu > li:hover > a { + background: #1e1e1e; + } +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/black_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/black_ifrm.css new file mode 100644 index 00000000..976a9679 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/black_ifrm.css @@ -0,0 +1,207 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light_ifrm theme +***/ +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #3d3d3d; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #212121; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #3d3d3d; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #212121; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } +.buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #d1d1d1; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #3d3d3d; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #3d3d3d; + } + .sectionHeaderclosed { + background-color: #262626; + } + +#dt_example h1{ +color:#3d3d3d; +font-weight:600 !important; +} + + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #ffede4; + border-bottom: 1px solid #ffede4; + border-top: 1px solid #ffede4; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #f8dddd; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #f8dddd; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #c4d7e2; + } + .cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #f8dddd !important; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #f8dddd !important; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #ffede4 !important; + border-bottom: 1px solid #ffede4; + border-top: 1px solid #ffede4; + } +.treeCellOver, +.treeCellOverDark { + background-color: #ffede4; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/blue.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/blue.css new file mode 100644 index 00000000..72102571 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/blue.css @@ -0,0 +1,374 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Blue theme +***/ +/*** +Reset and overrides +***/ +body { + background-color: #1570a6 !important; +} +/*** +Page header +***/ +.header { + filter: none !important; + background-image: none !important; + background-color: #0f4e74 !important; +} +.header .btn-navbar { + background-color: #0f4e74 !important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + color: #fff; + background-color: #146a9d !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #68bbec !important; +} +.page-content .page-breadcrumb.breadcrumb{ +background-color:#F5F5F5 !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #0B4263; +} + +.header .search-form .form-control{ + color: #68bbec; + border: 0; + background-color: #0B4263; +} + +.header .search-form .submit { + background: url(../../img/search-icon-blue.png); +} + +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #ccc; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #fff; + background: #146a9d; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #146a9d; +} +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #146a9d url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#146a9d; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #ccc; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #ccc; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #ccc; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #1876AD; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} + +/*** +Page sidebar +***/ +.page-sidebar { + background-color: #1570a6; +} +ul.page-sidebar-menu > li > a { + border-top: 1px solid #1c95dc !important; + color: #ffffff !important; +} +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} +ul.page-sidebar-menu > li a i { + color: #7fc5ef; +} +ul.page-sidebar-menu > li.open > a, +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li:hover > a { + background: #12618f; +} +ul.page-sidebar-menu > li.active > a { + background: #cc1d1d !important; + border-top-color: transparent !important; + color: #ffffff; +} +ul.page-sidebar-menu > li.active > a i { + color: #ffffff; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + color: #ffffff !important; + background: #1b8fd3 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + background: #1b8fd3 !important; +} +/* 3rd level sub menu */ +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover, +ul.page-sidebar-menu > li > ul.sub-menu li.open > a { + color: #ffffff !important; + background: #1b8fd3 !important; +} +/* font color for all sub menu links*/ +ul.page-sidebar-menu li > ul.sub-menu > li > a { + color: #c3e4f7; +} +/* menu arrows */ +ul.page-sidebar-menu > li > a .arrow:before, +ul.page-sidebar-menu > li > a .arrow.open:before { + color: #51b1e9 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #3ba6e6 !important; +} +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #68bbec !important; +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #ffffff !important; +} +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #0f5179 !important; + color: #51b1e9; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #51b1e9 !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #51b1e9 !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #51b1e9 !important; +} +.page-sidebar .sidebar-search input { + background-color: #1570a6 !important; + color: #bfbfbf !important; +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #51b1e9 !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-blue.png); +} +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-blue.jpg); + background-color: #0f5179; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #1570a6 !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-blue.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #1570a6; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #68bbec; +} +.footer .footer-tools .go-top { + background-color: #1985c6; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #68bbec; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #0f5179; +} +.page-footer-fixed .footer .footer-inner { + color: #68bbec; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #1985c6; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #68bbec; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #18a5ed; +} +.gritter-item-wrapper a:hover { + color: #0b6694; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #125e8b !important; + } + .page-boxed .page-container { + background-color: #1570a6; + border-left: 1px solid #1c98e1; + border-bottom: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-reversed .page-container { + border-left: 0; + border-right: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container { + border-left: 0; + border-right: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #1c98e1; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #125e8b !important; + } +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #105882 !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #187fbd !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + .page-sidebar .sidebar-search input { + background-color: #105882 !important; + } + ul.page-sidebar-menu > li.open > a, + ul.page-sidebar-menu > li > a:hover, + ul.page-sidebar-menu > li:hover > a { + background: #0e4b70; + } +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/blue_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/blue_ifrm.css new file mode 100644 index 00000000..31ccf309 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/blue_ifrm.css @@ -0,0 +1,207 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light_ifrm theme +***/ +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #3f9ed5; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #398ec0; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #3f9ed5; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #398ec0; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } + .buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #3f9ed5; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #3f9ed5; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #3f9ed5; + } + .sectionHeaderclosed { + background-color: #52ade2; + } + +#dt_example h1{ +color:#438eb9; +font-weight:600 !important; +} + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #d9e3e8; + border-bottom: 1px solid #d9e3e8; + border-top: 1px solid #d9e3e8; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #c4d7e2; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #c4d7e2; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #c4d7e2; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #c4d7e2 !important; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #c4d7e2 !important; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #d9e3e8 !important; + border-bottom: 1px solid #d9e3e8; + border-top: 1px solid #d9e3e8; + } +.treeCellOver, +.treeCellOverDark { + background-color: #d9e3e8; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/brown.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/brown.css new file mode 100644 index 00000000..7fb90fba --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/brown.css @@ -0,0 +1,376 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Brown theme +***/ +/*** +Reset and overrides +***/ +body { + background-color: #623f18 !important; +} +/*** +Page header +***/ +.header { + filter: none !important; + background-image: none !important; + background-color: #35220d !important; +} +.header .btn-navbar { + background-color: #35220d !important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + background-color: #5a3a16 !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #d18d42 !important; +} +.btn-group .btn.blue.dropdown-toggle{ +background-color: #8d6a43 !important; +} +.page-content .page-breadcrumb.breadcrumb{ +background-color:#F5F5F5 !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #241709; +} + +.header .search-form .form-control{ + color: #ccc; + border: 0; + background-color: #241709; +} + +.header .search-form .submit { + background: url(../../img/search-icon-brown.png); +} +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #ccc; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #fff; + background: #5a3a16; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + + +.header .hor-menu .dropdown-menu { + background: #5a3a16; +} +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #5a3a16 url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#5a3a16; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #ccc; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #ccc; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #ccc; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #6B451B; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} + +/*** +Page sidebar +***/ +.page-sidebar { + background-color: #623f18; +} +ul.page-sidebar-menu > li > a { + border-top: 1px solid #935f24 !important; + color: #ffffff !important; +} +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} +ul.page-sidebar-menu > li a i { + color: #9a6d3a; +} +ul.page-sidebar-menu > li.open > a, +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li:hover > a { + background: #4e3112; +} +ul.page-sidebar-menu > li.active > a { + background: #4e3112 !important; + border-top-color: transparent !important; + color: #ffffff; +} +ul.page-sidebar-menu > li.active > a i { + color: #ffffff; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + color: #ffffff !important; + background: #8b5922 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + background: #8b5922 !important; +} +/* 3rd level sub menu */ +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover, +ul.page-sidebar-menu > li > ul.sub-menu li.open > a { + color: #ffffff !important; + background: #8b5922 !important; +} +/* font color for all sub menu links*/ +ul.page-sidebar-menu li > ul.sub-menu > li > a { + color: #e5bf94; +} +/* menu arrows */ +ul.page-sidebar-menu > li > a .arrow:before, +ul.page-sidebar-menu > li > a .arrow.open:before { + color: #c88131 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #b4742c !important; +} +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #d18d42 !important; +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #ffffff !important; +} +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #39250e !important; + color: #b18d65; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #b18d65 !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #b18d65 !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #b18d65 !important; +} +.page-sidebar .sidebar-search input { + background-color: #623f18 !important; + color: #b18d65 !important; +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #845f36 !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-brown.png); +} +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-brown.jpg); + background-color: #39250e; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #623f18 !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-brown.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #623f18; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #999999; +} +.footer .footer-tools .go-top { + background-color: #7f511f; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #d18d42; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #39250e; +} +.page-footer-fixed .footer .footer-inner { + color: #999999; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #7f511f; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #d18d42; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter-brown.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter-brown.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter-brown.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter-brown.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #b18d65; +} +.gritter-item-wrapper a:hover { + color: #755a3b; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #492f12 !important; + } + .page-boxed .page-container { + background-color: #623f18; + border-left: 1px solid #976125; + border-bottom: 1px solid #976125; + } + .page-boxed.page-sidebar-reversed .page-container { + border-left: 0; + border-right: 1px solid #976125; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container { + border-left: 0; + border-right: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #976125; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #976125; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #492f12 !important; + } +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #412a10 !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #764c1d !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + .page-sidebar .sidebar-search input { + background-color: #412a10 !important; + } + ul.page-sidebar-menu > li.open > a, + ul.page-sidebar-menu > li > a:hover, + ul.page-sidebar-menu > li:hover > a { + background: #311f0c; + } +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/brown_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/brown_ifrm.css new file mode 100644 index 00000000..1bda14f9 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/brown_ifrm.css @@ -0,0 +1,207 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light_ifrm theme +***/ +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #8d6a43; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #805b32; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #8d6a43; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #805b32; + } + .menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; +} +.buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #8d6a43; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #8d6a43; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #8d6a43; + } + .sectionHeaderclosed { + background-color: #9f7b53; + } + +#dt_example h1{ +color:#8d6a43; +font-weight:600 !important; +} + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #ece0d3; + border-bottom: 1px solid #ece0d3; + border-top: 1px solid #ece0d3; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #d4c2af; + border-bottom: 1px solid #d4c2af; + border-top: 1px solid #d4c2af; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #d4c2af; + border-bottom: 1px solid #d4c2af; + border-top: 1px solid #d4c2af; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #cbaf8f; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #d4c2af !important; + border-bottom: 1px solid #d4c2af; + border-top: 1px solid #d4c2af; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #d4c2af !important; + border-bottom: 1px solid #d4c2af; + border-top: 1px solid #d4c2af; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #ece0d3 !important; + border-bottom: 1px solid #ece0d3; + border-top: 1px solid #ece0d3; + } +.treeCellOver, +.treeCellOverDark { + background-color: #ece0d3; +} + diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/grey.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/grey.css new file mode 100644 index 00000000..dffb7cdb --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/grey.css @@ -0,0 +1,372 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Grey theme +***/ +/*** +Reset and overrides +***/ +body { + background-color: #666666 !important; +} +/*** +Page header +***/ +.header { + filter: none !important; + background-image: none !important; + background-color: #4a4a4a !important; +} +.header .btn-navbar { + background-color: #4a4a4a !important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + background-color: #616161 !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #b3b3b3 !important; +} +.page-content .page-breadcrumb.breadcrumb{ +background-color:#F5F5F5 !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #3a3a3a; +} + +.header .search-form .form-control{ + color: #ccc; + border: 0; + background-color: #3a3a3a; +} + +.header .search-form .submit { + background: url(../../img/search-icon-light.png); +} +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #ccc; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #fff; + background: #616161; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #616161; +} +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #616161 url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#616161; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #ccc; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #ccc; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #ccc; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #757575; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} + +/*** +Page sidebar +***/ +.page-sidebar { + background-color: #666666; +} +ul.page-sidebar-menu > li > a { + border-top: 1px solid #858585 !important; + color: #ffffff !important; +} +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} +ul.page-sidebar-menu > li a i { + color: #bfbfbf; +} +ul.page-sidebar-menu > li.open > a, +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li:hover > a { + background: #595959; +} +ul.page-sidebar-menu > li.active > a { + background: #e02222 !important; + border-top-color: transparent !important; + color: #ffffff; +} +ul.page-sidebar-menu > li.active > a i { + color: #ffffff; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + color: #ffffff !important; + background: #808080 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + background: #808080 !important; +} +/* 3rd level sub menu */ +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover, +ul.page-sidebar-menu > li > ul.sub-menu li.open > a { + color: #ffffff !important; + background: #808080 !important; +} +/* font color for all sub menu links*/ +ul.page-sidebar-menu li > ul.sub-menu > li > a { + color: #e6e6e6; +} +/* menu arrows */ +ul.page-sidebar-menu > li > a .arrow:before, +ul.page-sidebar-menu > li > a .arrow.open:before { + color: #a6a6a6 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #999999 !important; +} +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #b3b3b3 !important; +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #ffffff !important; +} +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #4d4d4d !important; + color: #a6a6a6; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #a6a6a6 !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #a6a6a6 !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #a6a6a6 !important; +} +.page-sidebar .sidebar-search input { + background-color: #666666 !important; + color: #bfbfbf !important; +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #a6a6a6 !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon.png); +} +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler.jpg); + background-color: #4d4d4d; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #666666 !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #666666; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #b3b3b3; +} +.footer .footer-tools .go-top { + background-color: #787878; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #b3b3b3; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #4d4d4d; +} +.page-footer-fixed .footer .footer-inner { + color: #b3b3b3; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #787878; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #b3b3b3; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #18a5ed; +} +.gritter-item-wrapper a:hover { + color: #0b6694; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #575757 !important; + } + .page-boxed .page-container { + background-color: #666666; + border-left: 1px solid #878787; + border-bottom: 1px solid #878787; + } + .page-boxed.page-sidebar-reversed .page-container { + border-left: 0; + border-right: 1px solid #878787; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container { + border-left: 0; + border-right: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #878787; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #878787; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #575757 !important; + } +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #525252 !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #737373 !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + .page-sidebar .sidebar-search input { + background-color: #525252 !important; + } + ul.page-sidebar-menu > li.open > a, + ul.page-sidebar-menu > li > a:hover, + ul.page-sidebar-menu > li:hover > a { + background: #474747; + } +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/grey_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/grey_ifrm.css new file mode 100644 index 00000000..e3b85681 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/grey_ifrm.css @@ -0,0 +1,209 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light_ifrm theme +***/ +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #69a0f8; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #4b8df8; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #69a0f8; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #4b8df8; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } +.buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #69a0f8; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #69a0f8; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #69a0f8; + } + .sectionHeaderclosed { + background-color: #5e9bfd; + } + +#dt_example h1{ +color:#4b8df8; +font-weight:600 !important; +} + + + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #ffede4; + border-bottom: 1px solid #ffede4; + border-top: 1px solid #ffede4; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #f8dddd; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #f8dddd; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #c4d7e2; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #f8dddd !important; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #f8dddd !important; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #ffede4 !important; + border-bottom: 1px solid #ffede4; + border-top: 1px solid #ffede4; + } +.treeCellOver, +.treeCellOverDark { + background-color: #ffede4; +} + diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/light.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/light.css new file mode 100644 index 00000000..49939fad --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/light.css @@ -0,0 +1,479 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light theme +***/ + +/*** +Reset and overrides +***/ +body { + background-color: #fafafa !important; +} +/*** +Page header +***/ +.header { + filter: none !important; + background-image: none !important; + background-color: #434343 !important; +} +.header .btn-navbar { + background-color: #434343 !important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + background-color: #4f4f4f !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #808080 !important; +} +.btn-group .btn.blue.dropdown-toggle{ +background-color: #28b779 !important; +} +.page-content .page-breadcrumb.breadcrumb{ +background-color:#F5F5F5 !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #3a3a3a; +} + +.header .search-form .form-control{ + color: #ccc; + border: 0; + background-color: #3a3a3a; +} + +.header .search-form .submit { + background: url(../../img/search-icon.png); +} +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #ccc; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #fff; + background: #4f4f4f; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #51b88b !important; +} +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected { + border-top: 6px solid #51b88b; + } + +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #4f4f4f; +} +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #4f4f4f url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#4f4f4f; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #ccc; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #ccc; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #ccc; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #656565; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} + +/*** +Page sidebar +***/ +.page-content { + border-left: 1px solid #e2e2e2 !important; + border-bottom: 1px solid #e2e2e2 !important; +} +.page-sidebar-reversed .page-content { + border-left: 0; + border-right: 1px solid #e2e2e2 !important; +} +.page-sidebar { + background-color: #fafafa; +} +.page-sidebar-fixed .page-content { + border: 0 !important; +} +.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #e2e2e2 !important; +} + + +ul.page-sidebar-menu > li > a { + border-top: 1px solid #e2e2e2 !important; + color: #000 !important; + font-weight: 400; +} + +ul.page-sidebar-menu > li:first-child > a { + border-top: 1px solid transparent !important; +} + +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} + +ul.page-sidebar-menu > li a i { + color: #bbb !important; +} +ul.page-sidebar-menu > li.open > a, +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li:hover > a { + background: #eee; + border-top: 1px solid #e8e8e8; +} +ul.page-sidebar-menu > li.active > a .selected { + right:-7px; + top:0px; + width: 7px; + height: 39px; + background-image: url("../../img/sidebar-menu-arrow-green.png"); +} +.page-sidebar-reversed ul.page-sidebar-menu > li.active > a .selected { + right: auto; + left:-7px; + background-image: url("../../img/sidebar-menu-arrow-green-reverse.png"); +} +ul.page-sidebar-menu > li.active i { + color: #fff !important; +} +.page-sidebar-fixed ul.page-sidebar-menu > li.active > a .selected { + display: none; +} +ul.page-sidebar-menu > li.active > a{ + background: #28b779 !important; + border-top-color: transparent !important; + color:#fff !important; +} +ul.page-sidebar-menu > li.active > a i { + color: #fff; +} +ul.page-sidebar-menu > li > a > .arrow:before, +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #ccc !important; +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #fff !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} + +ul.page-sidebar-menu ul.sub-menu > li > a { + font-weight: 400 !important; + color: #333 !important; +} +ul.page-sidebar-menu ul.sub-menu > li.active > a, +ul.page-sidebar-menu ul.sub-menu > li > a:hover { + color: #818181 !important; + background: #efefef !important; +} + +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #ccc !important; +} + +/* sub menu links effects */ +ul.page-sidebar-menu ul.sub-menu > li.active > a, +ul.page-sidebar-menu ul.sub-menu > li > a:hover, +ul.page-sidebar-menu ul.sub-menu > li.open > a { + color: #818181 !important; + background: #efefef !important; +} +ul.page-sidebar-menu ul.sub-menu > li > a i { + color: #bbb !important; +} + +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #fbfbfb !important; + color: #727272 !important; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #aaa !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #aaa !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #aaa !important; +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #e2e2e2 !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-white.png); +} + +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-light.jpg); + background-color: #333; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #fbfbfb !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-light.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #fbfbfb; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #333333; +} +.footer .footer-tools .go-top { + background-color: #666666; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #999999; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #434343; +} +.page-footer-fixed .footer .footer-inner { + color: #aaaaaa; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #666666; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #aaaaaa; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #18a5ed; +} +.gritter-item-wrapper a:hover { + color: #0b6694; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #E8E8E8 !important; + } + .page-boxed .page-container { + background-color: #fafafa; + border-left: 1px solid #e2e2e2; + border-bottom: 1px solid #e2e2e2; + } + .page-sidebar-reversed.page-boxed .page-container { + border-left: 0; + border-right: 1px solid #e2e2e2; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #e2e2e2; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #e2e2e2; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #E8E8E8 !important; + } +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #f1f1f1 !important; + border-right: none !important; + } + .page-sidebar-fixed .page-sidebar { + border-right: none !important; + } + .page-content { + border-left: none !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #ccc !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + + ul.page-sidebar-menu > li.open > a, + ul.page-sidebar-menu > li > a:hover { + color: #666666 !important; + background-color: #dddddd !important; + } + ul.page-sidebar-menu > li.open > a { + border-bottom-color: transparent !important; + } + ul.page-sidebar-menu > li.active > a { + color: #ffffff !important; + background-color: #28b779 !important; + } + + ul.page-sidebar-menu ul.sub-menu > li > a { + color: #111 !important; + } + + ul.page-sidebar-menu ul.sub-menu > li.open > a, + ul.page-sidebar-menu ul.sub-menu > li.active > a, + ul.page-sidebar-menu ul.sub-menu > li > a:hover { + color: #666666 !important; + background: #dddddd !important; + } + + .page-sidebar .sidebar-search input { + background-color: #f1f1f1 !important; + color: #ccc !important; + } + + .page-sidebar .sidebar-search .input-box { + border-bottom-color: #ccc !important; + } + .page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #ccc !important; + } + .page-sidebar .sidebar-search input:-moz-placeholder { + color: #ccc !important; + } + .page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #ccc !important; + } + + /*** + page footer + ***/ + + .footer { + background-color: #434343; + } + + .footer .footer-inner { + color: #cccccc; + } + .footer .footer-tools .go-top { + background-color: #666666; + } + .footer .footer-tools .go-top i { + color: #999999; + } +} + +@media (max-width: 767px) { + body { + background-color: #333 !important; + } +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/light_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/light_ifrm.css new file mode 100644 index 00000000..170c35ca --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/light_ifrm.css @@ -0,0 +1,207 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light_ifrm theme +***/ +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #5fbf95; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #1faa6e; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #5fbf95; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #1faa6e; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } + .buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #51b88b; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #51b88b; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #51b88b; + } + .sectionHeaderclosed { + background-color: #70c6a0; + } + +#dt_example h1{ +color:#51b88b; +font-weight:600 !important; +} + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #d7eae3; + border-bottom: 1px solid #d7eae3; + border-top: 1px solid #d7eae3; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #c7e5da; + border-bottom: 1px solid #c7e5da; + border-top: 1px solid #c7e5da; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #c7e5da; + border-bottom: 1px solid #c7e5da; + border-top: 1px solid #c7e5da; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #aadac5; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #c7e5da !important; + border-bottom: 1px solid #c7e5da; + border-top: 1px solid #c7e5da; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #c7e5da !important; + border-bottom: 1px solid #c7e5da; + border-top: 1px solid #c7e5da; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #d7eae3 !important; + border-bottom: 1px solid #d7eae3; + border-top: 1px solid #d7eae3; + } +.treeCellOver, +.treeCellOverDark { + background-color: #d7eae3; +} + diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/purple.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/purple.css new file mode 100644 index 00000000..b4e20d60 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/purple.css @@ -0,0 +1,375 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Purple theme +***/ +/*** +Reset and overrides +***/ +body { + background-color: #701584 !important; +} +/*** +Page header +***/ +.header { + filter: none !important; + background-image: none !important; + background-color: #470d54 !important; +} +.header .btn-navbar { + background-color: #470d54 !important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + background-color: #69147b !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #c84fe3 !important; +} +.btn-group .btn.blue.dropdown-toggle{ +background-color: #571067 !important; +} +.page-content .page-breadcrumb.breadcrumb{ +background-color:#F5F5F5 !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #360A40; +} + +.header .search-form .form-control{ + color: #ccc; + border: 0; + background-color: #360A40; +} + +.header .search-form .submit { + background: url(../../img/search-icon-purple.png); +} +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #ccc; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #fff; + background: #69147b; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #69147b; +} +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #69147b url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#69147b; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #ccc; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #ccc; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #ccc; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #78188C; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} + +/*** +Page sidebar +***/ +.page-sidebar { + background-color: #701584; +} +ul.page-sidebar-menu > li > a { + border-top: 1px solid #9d1db9 !important; + color: #ffffff !important; +} +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} +ul.page-sidebar-menu > li a i { + color: #cf65e7; +} +ul.page-sidebar-menu > li.open > a, +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li:hover > a { + background: #5d116e; +} +ul.page-sidebar-menu > li.active > a { + background: #571067 !important; + border-top-color: transparent !important; + color: #ffffff; +} +ul.page-sidebar-menu > li.active > a i { + color: #ffffff; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + color: #ffffff !important; + background: #951cb0 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + background: #951cb0 !important; +} +/* 3rd level sub menu */ +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover, +ul.page-sidebar-menu > li > ul.sub-menu li.open > a { + color: #ffffff !important; + background: #951cb0 !important; +} +/* font color for all sub menu links*/ +ul.page-sidebar-menu li > ul.sub-menu > li > a { + color: #e4a7f1; +} +/* menu arrows */ +ul.page-sidebar-menu > li > a .arrow:before, +ul.page-sidebar-menu > li > a .arrow.open:before { + color: #c239df !important; +} +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #bb23dc !important; +} +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #c84fe3 !important; +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #ffffff !important; +} +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #4b0e58 !important; + color: #bf55d7; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #b84dd0 !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #b84dd0 !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #b84dd0 !important; +} +.page-sidebar .sidebar-search input { + background-color: #701584 !important; + color: #bfbfbf !important; +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #a93bc1 !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-purple.png); +} +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-purple.jpg); + background-color: #4b0e58; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #701584 !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-purple.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #701584; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #c84fe3; +} +.footer .footer-tools .go-top { + background-color: #8a1aa3; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #c84fe3; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #4b0e58; +} +.page-footer-fixed .footer .footer-inner { + color: #c84fe3; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #8a1aa3; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #c84fe3; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter-purple.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter-purple.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter-purple.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter-purple.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #18a5ed; +} +.gritter-item-wrapper a:hover { + color: #0b6694; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #5a116a !important; + } + .page-boxed .page-container { + background-color: #701584; + border-left: 1px solid #a11ebd; + border-bottom: 1px solid #a11ebd; + } + .page-boxed.page-sidebar-reversed .page-container { + border-left: 0; + border-right: 1px solid #a11ebd; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container { + border-left: 0; + border-right: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #a11ebd; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #a11ebd; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #5a116a !important; + } +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #520f61 !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #83189a !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + .page-sidebar .sidebar-search input { + background-color: #520f61 !important; + } + ul.page-sidebar-menu > li.open > a, + ul.page-sidebar-menu > li > a:hover, + ul.page-sidebar-menu > li:hover > a { + background: #430d4f; + } +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/purple_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/purple_ifrm.css new file mode 100644 index 00000000..e2d2f56f --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/purple_ifrm.css @@ -0,0 +1,207 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Purple_ifrm theme +***/ +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #b045c7; + color: #fff !important; + border: 0px solid #b15a59; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada !important; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver , +.buttonRoundedDown, +.buttonRoundedFocusedDown{ + background-color: #8f32a3; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #b045c7; + border: 0px solid #ababab; + color: #fff !important; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #8f32a3; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } + .buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #5d116e; + border-top: 0; +} + +.windowHeader, +.dialogHeader { + background-color: #5d116e; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #8f32a3; + } + .sectionHeaderclosed { + background-color: #a03bb6; + } + +#dt_example h1{ +color:#8f32a3; +font-weight:600 !important; +} + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #e7c7ee; + border-bottom: 1px solid #e7c7ee; + border-top: 1px solid #e7c7ee; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #d49ce0; + border-bottom: 1px solid #d49ce0; + border-top: 1px solid #d49ce0; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #d49ce0; + border-bottom: 1px solid #d49ce0; + border-top: 1px solid #d49ce0; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #ecd4f1; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #d49ce0 !important; + border-bottom: 1px solid #d49ce0; + border-top: 1px solid #d49ce0; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #d49ce0 !important; + border-bottom: 1px solid #d49ce0; + border-top: 1px solid #d49ce0; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #e7c7ee !important; + border-bottom: 1px solid #e7c7ee; + border-top: 1px solid #e7c7ee; + } +.treeCellOver, +.treeCellOverDark { + background-color: #e7c7ee; +} + diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue.css new file mode 100644 index 00000000..a3d71015 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue.css @@ -0,0 +1,398 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Blue theme +***/ +/*** +Reset and overrides +***/ +body { + background-color: #e8e8e8 !important; +} +/*** +Page header +***/ +.header { + filter: none !important; + background-image: none !important; + background-color: #1b8fd3 !important; +} +.header .btn-navbar { + background-color: #1b8fd3!important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + color: #fff; + background-color: #ee5c00 !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #fff !important; +} +.page-content .page-breadcrumb.breadcrumb .dashboard-date-range{ +background-color: #ee5c00 !important; +} +.btn-group .btn.blue.dropdown-toggle{ +background-color: #ee5c00 !important; +} +.page-content .page-breadcrumb.breadcrumb{ +background-color:#F5F5F5 !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #0B4263; +} + +.header .search-form .form-control{ + color: #68bbec; + border: 0; + background-color: #0B4263; +} + +.header .search-form .submit { + background: url(../../img/search-icon-blue.png); +} +.zte-theme-panel > .toggler:hover { + background-color: #146a9d !important; +} +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #ccc; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #fff; + background: #146a9d; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #ee5c00 !important; +} +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected { + border-top: 6px solid #ee5c00; + } +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #146a9d; +} +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #146a9d url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#146a9d; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #ccc; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #ccc; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #ccc; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #1876AD; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} + +/*** +Page sidebar +***/ +.page-sidebar { + background-color: #e8e8e8; +} +ul.page-sidebar-menu > li > a { + border-top: 1px solid #d3d1d1 !important; + /*color: black !important;*/ +} +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} +ul.page-sidebar-menu > li a i { + /*color: black !important;*/ +} +ul.page-sidebar-menu > li.open > a{ +border-bottom: 1px solid #d3d1d1 !important; +color: #0d638f; +} +ul.page-sidebar-menu > li > a:hover +/*ul.page-sidebar-menu > li:hover > a */{ + background: #1b8fd3; + color: #ffffff; +} +ul.page-sidebar-menu > li.active > a { + background: #ee5c00 !important; + border-top-color: transparent !important; + color: #ffffff; +} +ul.page-sidebar-menu > li.active > a i { + color: #ffffff; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + color: #ffffff !important; + background: #1b8fd3 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + background: #1b8fd3 !important; +} +/* 3rd level sub menu */ +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover, +ul.page-sidebar-menu > li > ul.sub-menu li.open > a { + color: #ffffff !important; + background: #1b8fd3 !important; +} +/* font color for all sub menu links*/ +ul.page-sidebar-menu li > ul.sub-menu > li > a { + /*color: #c3e4f7;*/ +} +/* menu arrows */ +ul.page-sidebar-menu > li > a .arrow:before, +ul.page-sidebar-menu > li > a .arrow.open:before { + /*color: #51b1e9 !important;*/ +} +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #3ba6e6 !important; +} +ul.page-sidebar-menu > li > a > .arrow.open:before { + /* color: #68bbec !important;*/ +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #ffffff !important; +} +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #0f5179 !important; + color: #0d638f; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #0d638f !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #0d638f !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #0d638f !important; +} +.page-sidebar .sidebar-search input { + background-color: #e8e8e8 !important; + /* color: #bfbfbf !important;*/ +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #0d638f !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-blue.png); +} +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-grey.jpg); + background-color: #0f5179; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #1b8fd3 !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-blue.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #1b8fd3; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #7c7c7c; +} +.footer .footer-tools .go-top { + background-color: #1985c6; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #68bbec; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #0f5179; +} +.page-footer-fixed .footer .footer-inner { + color: #68bbec; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #1985c6; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #68bbec; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #18a5ed; +} +.gritter-item-wrapper a:hover { + color: #0b6694; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #125e8b !important; + } + .page-boxed .page-container { + background-color: #1570a6; + border-left: 1px solid #1c98e1; + border-bottom: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-reversed .page-container { + border-left: 0; + border-right: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container { + border-left: 0; + border-right: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #1c98e1; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #125e8b !important; + } +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #3d95c9 !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #187fbd !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + .page-sidebar .sidebar-search input { + background-color: #3d95c9 !important; + } + ul.page-sidebar-menu > li.open > a{ + border-bottom: 1px solid #187fbd !important; + + } + ul.page-sidebar-menu > li > a:hover/*, + ul.page-sidebar-menu > li:hover > a */{ + background: #0e4b70; + } + ul.page-sidebar-menu > li a i{ + color:#fff !important; + } + ul.page-sidebar-menu > li a{ + color:#fff !important; + } +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue_ifrm.css new file mode 100644 index 00000000..80affa2f --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue_ifrm.css @@ -0,0 +1,206 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light_ifrm theme +***/ +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #4da9df; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #479fd3; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #4da9df; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #479fd3; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } + .buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #2c9ada; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #2c9ada; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #438eb9; + } + .sectionHeaderclosed { + background-color: #3a85b0; + } + +#dt_example h1{ +color:#438eb9; +font-weight:600 !important; +} + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #ffede4; + border-bottom: 1px solid #ffede4; + border-top: 1px solid #ffede4; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #f8dddd; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #f8dddd; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #c4d7e2; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #f8dddd !important; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #f8dddd !important; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #ffede4 !important; + border-bottom: 1px solid #ffede4; + border-top: 1px solid #ffede4; + } +.treeCellOver, +.treeCellOverDark { + background-color: #ffede4; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight.css new file mode 100644 index 00000000..7146d910 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight.css @@ -0,0 +1,450 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Blue theme +***/ +/*** +Reset and overrides +***/ +body { + background-color: #f1f3fa !important; + font-family:"microsoft yahei"; +} +.page-content{ +background-color:#f1f3fa !important; +} +.page-sidebar-menu > li.active > a .selected{ +background-image:url("../../img/sidebar-menu-arrow-bluelight.png") +} +/*** +Page header +***/ +.header { + filter: none !important; + background-image: none !important; + background-color: #3366CC !important; +} +.header .btn-navbar { + background-color: #3366CC!important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + color: #fff; + background-color: #3061c1 !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: white !important; +} +.zte-theme-panel > .toggler:hover { + background-color: #6192f7 !important; +} +.page-content .page-breadcrumb.breadcrumb .dashboard-date-range{ + background-color: #3366CC !important; +} +.btn-group .btn.blue.dropdown-toggle{ + background-color: #3366CC !important; +} +.btn-group .btn.blue.dropdown-toggle:hover{ + background-color: #2f5ebd !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #0B4263; +} + +.header .search-form .form-control{ + color: #68bbec; + border: 0; + background-color: #0B4263; +} + +.header .search-form .submit { + background: url(../../img/search-icon-blue.png); +} + +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #fff; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #bdcff4; + background: #3366CC; +} +.header .hor-menu .dropdown-menu li > a { + color: #333 !important ; +} +.header .hor-menu .dropdown-menu li:hover > a{ + color: #3366CC !important; + background: #e5e8f0 !important; +} +.dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a, +.dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a:hover{ + color:#333 !important; + background: #D9E5FF !important; +} +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #3366CC !important; +} +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #3366CC; + background: #4174dc !important; +} + +.header .hor-menu .dropdown-menu { + background: #fff ; + border: 1px #769be6 solid !important ; + border-top:0 !important ; + border-bottom-right-radius:5px !important ; + border-bottom-left-radius:5px !important ; + padding-right:20px; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #4d7ee1 url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#4d7ee1; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #ccc; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #ccc; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #ccc; +} + +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected { + border-top: 6px solid #3366CC; +} +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + //border-right: 1px solid #d5d5d5; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #5681DA; + font-weight:600 !important; + +} +/*.mega-menu-dropdown .fa, +#page-f-sidebar-menu .sub-menu .fa, +.sub-menu .sub-menu .fa +{ +display:none; +}去掉左边二级菜单图标*/ +#main_hormenu .mega-menu-dropdown{ +margin-left:30px; +} +/*** +Page sidebar +***/ +.page-sidebar { + background-color: #f1f3fa; +} +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} +.ul.page-sidebar-menu > li a i { + /* color: #0d638f;*/ +} +ul.page-sidebar-menu > li.open > a{ +border-bottom: 1px solid #e0e2e9 !important; +} +ul.page-sidebar-menu > li > a { + border-top: 1px solid #e0e2e9 !important; + /*background: #fff !important;*/ + color: #2e487d !important; +} +ul.page-sidebar-menu > li > a:hover{ + background: #fff !important; + color: #3366CC !important; +} +ul.page-sidebar-menu > li.active > a { + background: #3366CC !important; + border-top-color: transparent !important; + color: #ffffff !important; +} +ul.page-sidebar-menu > li.active > a:hover { + background: #507edb !important; + border-top-color: transparent !important; + color: #ffffff !important; +} +ul.page-sidebar-menu > li.active > a i { + color: #ffffff; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li > a{ + color: #2e487d;/*right menu*/ +} +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a { + color: #3366CC !important; + background: #dde2f1 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a:hover { + background: #e3e7f5 !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + background: #eee !important; + color:#3366CC; +} +ul.page-sidebar-menu > li.open > a{ + color:#fff; + } +/* 3rd level sub menu */ +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover, +ul.page-sidebar-menu > li > ul.sub-menu li.open > a { + color: #3366CC !important; + background: #fff !important; +} +/* font color for all sub menu links*/ +ul.page-sidebar-menu li > ul.sub-menu > li > a { + /*color: #c3e4f7;*/ +} +/* menu arrows */ +ul.page-sidebar-menu > li > a .arrow:before, +ul.page-sidebar-menu > li > a .arrow.open:before { + /*color: #51b1e9 !important;*/ +} +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #3ba6e6 !important; +} +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #68bbec !important; +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #ffffff !important; +} +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #0f5179 !important; + color: #000000; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #000000 !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #000000 !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #000000 !important; +} +.page-sidebar .sidebar-search input { + background-color: #eeeeee !important; + /*color: white !important;*/ +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #000000 !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-blue.png); +} +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-grey.jpg); + background-color: #0f5179; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #3366CC !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-blue.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #e4e4e4; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #7c7c7c; +} +.footer .footer-tools .go-top { + background-color: #1985c6; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #68bbec; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #0f5179; +} +.page-footer-fixed .footer .footer-inner { + color: #68bbec; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #1985c6; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #68bbec; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #18a5ed; +} +.gritter-item-wrapper a:hover { + color: #0b6694; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #fff !important; + } + .page-boxed .page-container { + background-color: #fff; + border-left: 1px solid #1c98e1; + border-bottom: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-reversed .page-container { + border-left: 0; + border-right: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container { + border-left: 0; + border-right: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #1c98e1; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #1c98e1; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #125e8b !important; + } +ul.page-sidebar-menu > li .active> a{ + background: #3366CC !important; +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #f1f3fa !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #e0e2e9 !important; + + } + ul.page-sidebar-menu > li > a :hover{ + border-top: 1px solid #e0e2e9 !important; + color: #fff !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + .page-sidebar .sidebar-search input { + background-color: #4072d6 !important; + color:#c5c5c7 !important; + } + .page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #c5c5c7 !important; +} + .page-sidebar .sidebar-search input:-moz-placeholder { + color: #c5c5c7 !important; +} + .page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #c5c5c7 !important; +} + ul.page-sidebar-menu > li.open > a, + ul.page-sidebar-menu > li.open > a:hover, + ul.page-sidebar-menu > li > a:hover{ + background: #3366CC !important; + } + ul.page-sidebar-menu > li > a:hover, + ul.page-sidebar-menu > li:hover > a { + background: #fff !important; + } + ul.page-sidebar-menu li > ul.sub-menu > li > a { + color: #3366CC; +} + diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2.css new file mode 100644 index 00000000..57ee2096 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2.css @@ -0,0 +1,520 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +Blue theme +***/ +/*** +Reset and overrides +***/ +body { + background-color: #f9f9f9 !important; + font-family: "microsoft yahei" !important; +} + +.page-content { + background-color: #f1f3fa !important; +} + +/*** +Page header +***/ +.header { + filter: none !important; + /*background-image: none !important;*/ + background-color: #1178ee !important; + /* background: -webkit-linear-gradient(#37c4fa, #0081bb ); + background: -o-linear-gradient(#37c4fa, #0081bb ); + background: -moz-linear-gradient(#37c4fa, #0081bb ); + background: linear-gradient(#37c4fa, #0081bb ); */ +} + +.header .btn-navbar { + background-color: #f9f9f9 !important; +} + +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + color: #fff; + background-color: #1470d8 !important; +} + +.zte-theme-panel > .toggler:hover { + background-color: #70abcd !important; +} + +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #fff !important; +} + +.btn-group .btn.blue.dropdown-toggle { + background-color: #1178EE !important; +} + +.btn-group .btn.blue.dropdown-toggle:hover { + background-color: #0f70df !important; +} + +/*** +Header Search +***/ +.header .search-form { + background-color: #0B4263; +} + +.header .search-form .form-control { + color: #68bbec; + border: 0; + background-color: #0B4263; +} + +.header .search-form .submit { + background: url(../../img/search-icon-blue.png); +} + +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #fff; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #D4E9F2; + background-color: #1178ee; + /*background: -webkit-linear-gradient(#37c4fa, #0081bb ); + background: -o-linear-gradient(#37c4fa, #0081bb ); + background: -moz-linear-gradient(#37c4fa, #0081bb ); + background: linear-gradient(#37c4fa, #0081bb );*/ +} + +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected { + border-top: 6px solid #0081bb; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + /*background: -webkit-linear-gradient(#37c4fa, #0081bb ); + background: -o-linear-gradient(#37c4fa, #0081bb ); + background: -moz-linear-gradient(#37c4fa, #0081bb ); + background: linear-gradient(#37c4fa, #0081bb );*/ +} + +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected { + border-top: 6px solid #0081bb; +} + +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #1178EE; +} + +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #126ed8 url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background: #126ed8; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { + /* WebKit browsers */ + color: #ccc; +} + +.header .hor-menu .search-form form input:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} + +.header .hor-menu .search-form form input::-moz-placeholder { + /* Mozilla Firefox 19+ */ + color: #ccc; +} + +.header .hor-menu .search-form form input:-ms-input-placeholder { + /* Internet Explorer 10+ */ + color: #ccc; +} + +.dropdown-menu .mega-menu-content .row .mega-menu-submenu li:hover > a { + color: #fff !important; + background: #388ef1 !important; +} + +.dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a, +.dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a:hover { + color: #fff !important; + background: #0e6ad4 !important; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #1876AD; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; + font-family: "microsoft yahei" +} + +/*** +Page sidebar +***/ +.page-sidebar { + background-color: #f9f9f9; +} + +ul.page-sidebar-menu > li > a { + border-top: 1px solid #e5e5e5 !important; + color: #616161 !important; + border-left: 3px solid transparent !important; +} + +ul.page-sidebar-menu > li > a:hover { + color: #1178EE !important; + background-color: #eee; +} + +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid #e5e5e5 !important; +} + +/*ul.page-sidebar-menu > li a i { + color: #e5e5e5 ! important; +}*/ +ul.page-sidebar-menu ul.sub-menu > li > a { + color: #616161 !important; +} + +ul.page-sidebar-menu ul.sub-menu > li.active > a { + color: #1178EE !important; +} + +ul.page-sidebar-menu ul.sub-menu > li > a:hover { + color: #1178EE !important; + background-color: #eee; +} + +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li:hover > a { + background: #fff; + color: #585858; + border-left: 3px solid #1178ee !important; +} + +ul.page-sidebar-menu > li.open > a { + background: #fff; + color: #585858; + border-bottom: 1px solid #e5e5e5 !important; +} + +ul.page-sidebar-menu > li.active > a { + background: #fff !important; + border-top: 1px solid #e5e5e5 !important; + color: #1178ee !important; + font-weight: bold; +} + +ul.page-sidebar-menu > li.active > a i { + color: #1178ee; +} + +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + /* border-top: 1px solid #e5e5e5 !important;*/ +} + +ul.page-sidebar-menu > li > ul.sub-menu > li.active > a +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + color: #4b88b7 !important; +} + +ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover { + /* background: #1b8fd3 !important;*/ +} + +/* 3rd level sub menu */ +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a, +ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover, +ul.page-sidebar-menu > li > ul.sub-menu li.open > a { + color: #ffffff !important; + border-bottom: 1px solid #e5e5e5 !important; +} + +.page-sidebar-menu > li.active > a .selected { + /* background-image: url(../../img/sidebar-menu-arrow-blue.png) !important;*/ + border-right: 2px solid #1178ee !important; + height: 37px !important; + top: 2px !important; +} + +/* font color for all sub menu links*/ +ul.page-sidebar-menu li > ul.sub-menu > li > a { + /*color: #c3e4f7;*/ +} + +/* menu arrows */ +ul.page-sidebar-menu > li > a .arrow:before, +ul.page-sidebar-menu > li > a .arrow.open:before { + /*color: #51b1e9 !important;*/ +} + +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #3ba6e6 !important; +} + +ul.page-sidebar-menu > li > a > .arrow.open:before { + /* color: #68bbec !important;*/ +} + +/*ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #ffffff !important; +}*/ +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #0f5179 !important; + color: #1178ee; +} + +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #1178ee !important; +} + +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #1178ee !important; +} + +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #1178ee !important; +} + +.page-sidebar .sidebar-search input { + background-color: #f9f9f9 !important; + /* color: #bfbfbf !important;*/ +} + +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #1178ee !important; +} + +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-blue.png); +} + +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-grey.jpg); + background-color: #0f5179; +} + +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #f9f9f9 !important; +} + +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-blue.png"); +} + +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #f9f9f9; +} + +/*** +Footer +***/ +.footer .footer-inner { + color: #7c7c7c; +} + +.footer .footer-tools .go-top { + background-color: #1985c6; +} + +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} + +.footer .footer-tools .go-top i { + color: #68bbec; +} + +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #0f5179; +} + +.page-footer-fixed .footer .footer-inner { + color: #68bbec; +} + +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #1985c6; +} + +.page-footer-fixed .footer .footer-tools .go-top i { + color: #68bbec; +} + +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important; +} + +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important; +} + +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important; +} + +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important; +} + +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} + +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} + +.gritter-item-wrapper a { + color: #18a5ed; +} + +.gritter-item-wrapper a:hover { + color: #0b6694; +} + +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #125e8b !important; + } + + .page-boxed .page-container { + background-color: #1570a6; + border-left: 1px solid #1c98e1; + border-bottom: 1px solid #1c98e1; + } + + .page-boxed.page-sidebar-reversed .page-container { + border-left: 0; + border-right: 1px solid #1c98e1; + } + + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container { + border-left: 0; + border-right: 0; + border-bottom: 0; + } + + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #1c98e1; + } + + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #1c98e1; + border-left: 0; + } + + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #125e8b !important; + } +} + +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #f9f9f9 !important; + } + + ul.page-sidebar-menu > li > a { + border-top: 1px solid #e5e5e5 !important; + } + + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + + .page-sidebar .sidebar-search input { + background-color: #f9f9f9 !important; + } + + ul.page-sidebar-menu > li.open > a, + ul.page-sidebar-menu > li > a:hover, + ul.page-sidebar-menu > li:hover > a { + background: #fff; + } +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2_ifrm.css new file mode 100644 index 00000000..baeeb2d9 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2_ifrm.css @@ -0,0 +1,229 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +ztebluelight2_ifrm theme +***/ +body{ + background-color: white!important; +} + +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #1095cd; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #3a85b0; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #0081bb; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #3a85b0; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } + .buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #0081bb; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #0081bb; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #0081bb; + } + .sectionHeaderclosed { + background-color: #3a85b0; + } + +#dt_example h1{ +color:#0081bb; +font-weight:600 !important; +} +/*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #d9e3e8; + border-bottom: 1px solid #d9e3e8; + border-top: 1px solid #d9e3e8; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #c4d7e2; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #c4d7e2; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #c4d7e2; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #c4d7e2 !important; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #c4d7e2 !important; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #d9e3e8 !important; + border-bottom: 1px solid #d9e3e8; + border-top: 1px solid #d9e3e8; + } +.treeCellOver, +.treeCellOverDark { + background-color: #d9e3e8; +} +/*日志管理的蓝色大圆角筛选按?/ +.blue { + background-color: #fff; + color:#1095cd; + } +.blue:hover { + background-color: #e8f3fd; + color:#5b9bd1; + } +.blue.selected{ + border:0; + background-color: #1178EE; + color:#fff; +} +.blue.selected:hover{ + border:0; + background-color: #1178EE; + color:#fff; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3.css new file mode 100644 index 00000000..1e250004 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3.css @@ -0,0 +1,497 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light theme +***/ + +/*** +Reset and overrides +***/ +body { + background-color: #eeeeee !important; +} +/*** +Page header +***/ +.header { + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3993ba), color-stop(50%, #1f88b3), color-stop(100%, #067ead)); + background-image: -moz-linear-gradient(top, #3993ba 0%, #1f88b3 50%, #067ead 100%); + background-image: -o-linear-gradient(top, #3993ba 0%, #1f88b3 50%, #067ead 100%); + background-image: linear-gradient(top, #3993ba 0%, #1f88b3 50%, #067ead 100%); + background-color: #1584b0 ; +} +.header .btn-navbar { + background-color: #434343 !important; +} +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + background-color: #4399bd !important; +} +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #ffffff !important; +} +.zte-theme-panel > .toggler:hover { + background-color: #54aacf !important; +} +.btn-group .btn.blue.dropdown-toggle{ +background-color: #428bca !important; +} +.page-content .page-breadcrumb.breadcrumb{ +background-color:#F5F5F5 !important; +} +/*** +Header Search +***/ +.header .search-form { + background-color: #3a3a3a; +} + +.header .search-form .form-control{ + color: #ccc; + border: 0; + background-color: #3a3a3a; +} + +.header .search-form .submit { + background: url(../../img/search-icon.png); +} + +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #ccc; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #fff; + background: #4399bd; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #136c8f !important; +} +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected { + border-top: 6px solid #136c8f; + } +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #4399bd; +} +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #4399bd url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background:#4399bd; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ + color: #ccc; +} +.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} +.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #ccc; +} +.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #ccc; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #656565; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} + +/*** +Page sidebar +***/ +/*.page-content { + border-left: 1px solid #e2e2e2 !important; + border-bottom: 1px solid #e2e2e2 !important;*/ +} +.page-sidebar-reversed .page-content { + border-left: 0; + border-right: 1px solid #e2e2e2 !important; +} +.page-sidebar { + background-color: #eeeeee; +} +.page-sidebar-fixed .page-content { + border: 0 !important; +} +.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #e2e2e2 !important; +} + + +ul.page-sidebar-menu > li > a { + border-top: 1px solid #ececec !important; + border-bottom: 1px solid #cccccc !important; + color: #000 !important; + font-weight: 400; + background-color: #e0e0e0 !important; +} + +ul.page-sidebar-menu > li:first-child > a { + border-top: 1px solid transparent !important; +} + +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid transparent !important; +} + +ul.page-sidebar-menu > li a i { + color: #000000 !important; +} +ul.page-sidebar-menu > li.open > a, +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li:hover > a { + background: #eee; + border-top: 1px solid #e8e8e8; +} +/*ul.page-sidebar-menu > li.active > a .selected { + right:-7px; + top:0px; + width: 7px; + height: 39px; + background-image: url("../../img/sidebar-menu-arrow-green.png"); +} */ +.page-sidebar-reversed ul.page-sidebar-menu > li.active > a .selected { + right: auto; + left:-7px; + background-image: url("../../img/sidebar-menu-arrow-green-reverse.png"); +} +ul.page-sidebar-menu > li.active i { + color: #fff !important; +} +.page-sidebar-fixed ul.page-sidebar-menu > li.active > a .selected { + display: none; +} +ul.page-sidebar-menu > li.active > a{ + background: #428bca !important; + border-top-color: transparent !important; + color:#fff!important; +} +ul.page-sidebar-menu > li.active > a i { + color: #fff; +} +ul.page-sidebar-menu > li > a > .arrow:before, +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #ccc !important; +} +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #fff !important; +} +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} + +ul.page-sidebar-menu ul.sub-menu > li > a { + font-weight: 400 !important; + color: #333 !important; +} +ul.page-sidebar-menu ul.sub-menu > li.active > a, +ul.page-sidebar-menu ul.sub-menu > li > a:hover { + color: #818181 !important; + background: #efefef !important; +} + +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #ccc !important; +} + +/* sub menu links effects */ +ul.page-sidebar-menu ul.sub-menu > li.active > a, +ul.page-sidebar-menu ul.sub-menu > li.active > a:hover{ + color: #000 !important; + background: #dbe6ea !important; +} +ul.page-sidebar-menu ul.sub-menu > li > a:hover, +ul.page-sidebar-menu ul.sub-menu > li.open > a { + color: #000000 !important; + background: #e7e7e7 !important; +} +ul.page-sidebar-menu ul.sub-menu > li > a i { + color: #000000 !important; +} + +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #eeeeee !important; + color: #727272 !important; +} +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #aaa !important; +} +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #aaa !important; +} +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #aaa !important; +} +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #e2e2e2 !important; +} +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-white.png); +} + +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-light.jpg); + background-color: #333; +} +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #fbfbfb !important; +} +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-light.png"); +} +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #eeeeee; +} +/*** +Footer +***/ +.footer .footer-inner { + color: #333333; +} +.footer .footer-tools .go-top { + background-color: #666666; +} +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} +.footer .footer-tools .go-top i { + color: #999999; +} +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #434343; +} +.page-footer-fixed .footer .footer-inner { + color: #aaaaaa; +} +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #666666; +} +.page-footer-fixed .footer .footer-tools .go-top i { + color: #aaaaaa; +} +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important; +} +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important; +} +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important; +} +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important; +} +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} +.gritter-item-wrapper a { + color: #18a5ed; +} +.gritter-item-wrapper a:hover { + color: #0b6694; +} +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #E8E8E8 !important; + } + .page-boxed .page-container { + background-color: #eeeeee; + border-left: 1px solid #e2e2e2; + border-bottom: 1px solid #e2e2e2; + } + .page-sidebar-reversed.page-boxed .page-container { + border-left: 0; + border-right: 1px solid #e2e2e2; + } + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #e2e2e2; + } + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #e2e2e2; + border-left: 0; + } + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #E8E8E8 !important; + } +} +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar { + background-color: #f1f1f1 !important; + border-right: none !important; + } + .page-sidebar-fixed .page-sidebar { + border-right: none !important; + } + .page-content { + border-left: none !important; + } + ul.page-sidebar-menu > li > a { + border-top: 1px solid #ececec !important; + border-bottom: 1px solid #cccccc !important; + } + ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + } + + ul.page-sidebar-menu > li.open > a,{ + color: #666666 !important; + background-color: #e0e0e0 !important; + } + + /*ul.page-sidebar-menu > li > a:hover { + color: #666666 !important; + background-color: #e7e7e7 !important; + }*/ + ul.page-sidebar-menu > li.open > a { + border-bottom-color: transparent !important; + } + /* ul.page-sidebar-menu > li.active > a { + color: #ffffff !important; + background-color: #28b779 !important; + }*/ + + ul.page-sidebar-menu ul.sub-menu > li > a { + color: #111 !important; + } +ul.page-sidebar-menu ul.sub-menu > li.active > a{ + color: #000 !important; + background: #dbe6ea !important; +} + ul.page-sidebar-menu ul.sub-menu > li.open > a, + ul.page-sidebar-menu ul.sub-menu > li > a:hover { + color: #000 !important; + background: #e7e7e7 !important; + } + + .page-sidebar .sidebar-search input { + background-color: #f1f1f1 !important; + color: #ccc !important; + } + + .page-sidebar .sidebar-search .input-box { + border-bottom-color: #ccc !important; + } + .page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #ccc !important; + } + .page-sidebar .sidebar-search input:-moz-placeholder { + color: #ccc !important; + } + .page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #ccc !important; + } + + /*** + page footer + ***/ + + .footer { + background-color: #434343; + } + + .footer .footer-inner { + color: #cccccc; + } + .footer .footer-tools .go-top { + background-color: #666666; + } + .footer .footer-tools .go-top i { + color: #999999; + } +} + +@media (max-width: 767px) { + body { + background-color: #077ead !important; + } +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3_ifrm.css new file mode 100644 index 00000000..1072ce0b --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3_ifrm.css @@ -0,0 +1,220 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light_ifrm theme +***/ +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #47a5cc; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #3a8fb3; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #47a5cc; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #3a8fb3; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } + .buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #2b8db6; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #2b8db6; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #2b8db6; + } + .sectionHeaderclosed { + background-color: #3899c2; + } + +#dt_example h1{ +color:#2b8db6; +font-weight:600 !important; +} +/*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #c4d7e2; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #c4d7e2; + } + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #d9e3e8; + border-bottom: 1px solid #d9e3e8; + border-top: 1px solid #d9e3e8; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #c4d7e2; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #c4d7e2; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #c4d7e2; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #c4d7e2 !important; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #c4d7e2 !important; + border-bottom: 1px solid #c4d7e2; + border-top: 1px solid #c4d7e2; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #d9e3e8 !important; + border-bottom: 1px solid #d9e3e8; + border-top: 1px solid #d9e3e8; + } +.treeCellOver, +.treeCellOverDark { + background-color: #d9e3e8; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4.css new file mode 100644 index 00000000..646fdc43 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4.css @@ -0,0 +1,620 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +light theme +***/ + +/*** +Reset and overrides +***/ +body { + background-color: #f1f3fa !important; +} + +.page-content .page-breadcrumb.breadcrumb .dashboard-date-range { + background-color: #ededed !important; +} + +.page-content { + background-color: #f1f3fa !important; +} + +.vSplitbar { + background-color: transparent !important; +} + +.btn-group .btn.blue.dropdown-toggle { + background-color: #333 !important; +} + +.btn-group .btn.blue.dropdown-toggle:hover { + background-color: #000 !important; +} + +/*** +Page header +***/ +.header { + filter: none !important; + background-color: #333333 !important; +} + +.header .btn-navbar { + background-color: #434343 !important; +} + +.header .navbar-nav .dropdown-toggle:hover, +.header .navbar-nav .dropdown.open .dropdown-toggle { + background-color: #40484c !important; +} + +.header .navbar-nav li.dropdown .dropdown-toggle i { + color: #ffffff !important; +} + +.zte-theme-panel > .toggler:hover { + background-color: #40484c !important; +} + +/*** +Header Search +***/ +.header .search-form { + background-color: #3a3a3a; +} + +.header .search-form .form-control { + color: #ccc; + border: 0; + background-color: #3a3a3a; +} + +.header .search-form .submit { + background: url(../../img/search-icon.png); +} + +/*** +Hor menu +***/ +.header .hor-menu ul.nav li a { + color: #fff; +} + +.header .hor-menu ul.nav li.open > a, +.header .hor-menu ul.nav li > a:hover, +.header .hor-menu ul.nav li > a:focus { + color: #ccc; + background: #333333; +} + +.header .hor-menu .dropdown-menu li:hover > a, +.header .hor-menu ul.nav li.active > a, +.header .hor-menu ul.nav li.active > a:hover { + color: #fff; + background: #333 !important; +} + +.header.navbar .hor-menu ul.nav li.current .selected, +.header.navbar .hor-menu ul.nav li.active .selected { + border-top: 6px solid #101010; +} + +.header .hor-menu ul.nav li.current > a, +.header .hor-menu ul.nav li.current > a:hover { + color: #fff; + background: #e02222 !important; +} + +.header .hor-menu .dropdown-menu { + background: #4f4f4f; +} + +.header .hor-menu .dropdown-menu li > a { + color: #ccc; +} + +.header .hor-menu .hor-menu-search-form-toggler.off { + background: #4f4f4f url(../../img/hor-menu-search-close-white.png) no-repeat center; +} + +.header .hor-menu .search-form { + background: #4f4f4f; +} + +.header .hor-menu .search-form form input { + color: #ccc; +} + +.header .hor-menu .search-form .btn { + color: #ccc; + background: url(../../img/search-icon-white.png) no-repeat center; +} + +.header .hor-menu .search-form form input::-webkit-input-placeholder { + /* WebKit browsers */ + color: #ccc; +} + +.header .hor-menu .search-form form input:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + color: #ccc; +} + +.header .hor-menu .search-form form input::-moz-placeholder { + /* Mozilla Firefox 19+ */ + color: #ccc; +} + +.header .hor-menu .search-form form input:-ms-input-placeholder { + /* Internet Explorer 10+ */ + color: #ccc; +} + +/*** +Mega Menu +***/ +.mega-menu .mega-menu-submenu { + border-right: 1px solid #656565; +} + +.mega-menu .mega-menu-submenu li h3 { + color: #fff; +} + +/*** +Page sidebar +***/ +/*.page-content { + border-left: 1px solid #e2e2e2 !important; + border-bottom: 1px solid #e2e2e2 !important; +}*/ +.page-sidebar-menu > li.active > a .selected { + background-image: none !important; + border-right:#5C9ACF 3px solid; + height:40px !important; + top:0 !important; +} + +.page-sidebar-reversed .page-content { + border-left: 0; + border-right: 1px solid #e2e2e2 !important; +} + +.page-sidebar { + background-color: #f1f3fa; +} + +.page-sidebar-fixed .page-content { + border: 0 !important; +} + +.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #e2e2e2 !important; +} + +ul.page-sidebar-menu > li > a { + border: 1px solid #dddddd !important; + color: #000 !important; + font-weight: 400; + background-color: #fff !important; + margin-left: 3px; + margin-right: 3px; + margin-bottom: 5px; + -webkit-border-radius: 3px !important; + -moz-border-radius: 3px !important; + -ms-border-radius: 3px !important; + -o-border-radius: 3px !important; + border-radius: 3px !important; +} + +.page-sidebar-menu > li.start > a { + border-top: 1px solid #dddddd !important; +} + +ul.page-sidebar-menu > li:first-child > a { + border-top: 1px solid #dddddd !important; +} + +ul.page-sidebar-menu > li:last-child > a { + border-bottom: 1px solid #dddddd !important; +} + +/*ul.page-sidebar-menu > li a i { + color: #000 !important; +}*/ + +/*ul.page-sidebar-menu > li.open > a:hover { + background: #ededed !important; + color: #000 !important; +}*/ +ul.page-sidebar-menu > li.open > a { + background: #fff !important; + color: #000 !important; +} +ul.page-sidebar-menu > li.active > a:hover { + background: #fff !important; + color: #5C9ACF !important ; + //border-left: #5C9ACF 3px solid; +} + + +/*ul.page-sidebar-menu > li.active > a .selected { + right:-7px; + top:0px; + width: 7px; + height: 39px; + background-image: url("../../img/sidebar-menu-arrow-green.png");*/ + } + +.page-sidebar-reversed ul.page-sidebar-menu > li.active > a .selected { + right: auto; + left: -7px; + background-image: url("../../img/sidebar-menu-arrow-green-reverse.png"); +} + +/*ul.page-sidebar-menu > li.active i { + color: #fff !important; +}*/ +.page-sidebar-fixed ul.page-sidebar-menu > li.active > a .selected { + display: none; +} + +ul.page-sidebar-menu > li.active > a { + background: #fff !important; + border-right-color: transparent !important; + color: #1177CF !important; +} + +ul.page-sidebar-menu > li.active > a i { + color: #5C9ACF; +} + +ul.page-sidebar-menu > li > a > .arrow:before, +ul.page-sidebar-menu > li > a > .arrow.open:before { + color: #ccc !important; +} + +ul.page-sidebar-menu > li.active > a .arrow:before, +ul.page-sidebar-menu > li.active > a .arrow.open:before { + color: #5C9ACF !important; +} + +ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a { + border-top: 0px !important; +} + +ul.page-sidebar-menu ul.sub-menu > li > a { + font-weight: 400 !important; + color: #2a6496 !important; + margin-left: 4px !important; + margin-right: 4px !important; + margin-bottom: 5px !important; +} + +ul.page-sidebar-menu ul.sub-menu > li.active > a, +ul.page-sidebar-menu ul.sub-menu > li > a:hover { + color: #818181 !important; + background: #ededed !important; +} + +ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before, +ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before { + color: #ccc !important; +} + +/* sub menu links effects */ +ul.page-sidebar-menu ul.sub-menu > li.active > a, +ul.page-sidebar-menu ul.sub-menu > li.active > a:hover { + color: #1177CF !important; + background: #dbe6ea !important; +} + +ul.page-sidebar-menu ul.sub-menu > li > a:hover, +ul.page-sidebar-menu ul.sub-menu > li.open > a { + color: #428bca !important; + background: #eaf1f4 !important; +} + +ul.page-sidebar-menu > li > a:hover, +ul.page-sidebar-menu > li.active > a:hover { + background-color: #ecf1f5 !important; + color: #585858; +} +/* sidebar search */ +.page-sidebar .sidebar-search input { + background-color: #f5f5f5 !important; + color: #727272 !important; +} + +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #aaa !important; +} + +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #aaa !important; +} + +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #aaa !important; +} + +.page-sidebar .sidebar-search .input-box { + border-bottom: 1px solid #e2e2e2 !important; +} + +.page-sidebar .sidebar-search .submit { + background-image: url(../../img/search-icon-white.png); +} + +/*** +Sidebar toggler +***/ +.sidebar-toggler { + background-image: url(../../img/sidebar-toggler-light.jpg); + background-color: #333; +} + +/* search box bg color on expanded */ +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { + background-color: #fbfbfb !important; +} + +.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { + background-image: url("../../img/sidebar-search-close-light.png"); +} + +/* sub menu bg color on hover menu item */ +.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu { + background-color: #f5f5f5; +} + +/*** +Footer +***/ +.footer .footer-inner { + color: #333333; +} + +.footer .footer-tools .go-top { + background-color: #666666; +} + +.footer .footer-tools .go-top:hover { + opacity: 0.7; + filter: alpha(opacity=70); +} + +.footer .footer-tools .go-top i { + color: #999999; +} + +/*** +Footer Layouts (new in v1.3) +***/ +/* begin:fixed footer */ +.page-footer-fixed .footer { + background-color: #434343; +} + +.page-footer-fixed .footer .footer-inner { + color: #aaaaaa; +} + +.page-footer-fixed .footer .footer-tools .go-top { + background-color: #666666; +} + +.page-footer-fixed .footer .footer-tools .go-top i { + color: #aaaaaa; +} + +/* end:fixed footer */ +/*** +Gritter Notifications +***/ +.gritter-top { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important; +} + +.gritter-bottom { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important; +} + +.gritter-item { + display: block; + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important; +} + +.gritter-close { + background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important; +} + +.gritter-title { + text-shadow: none !important; + /* Not supported by IE :( */ + +} + +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-light .gritter-close { + background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important; +} + +.gritter-item-wrapper a { + color: #18a5ed; +} + +.gritter-item-wrapper a:hover { + color: #0b6694; +} + +/* begin: boxed page */ +@media (min-width: 992px) { + .page-boxed { + background-color: #E8E8E8 !important; + } + + .page-boxed .page-container { + background-color: #f5f5f5; + border-left: 1px solid #e2e2e2; + border-bottom: 1px solid #e2e2e2; + } + + .page-sidebar-reversed.page-boxed .page-container { + border-left: 0; + border-right: 1px solid #e2e2e2; + } + + .page-boxed.page-sidebar-fixed .page-container { + border-left: 0; + border-bottom: 0; + } + + .page-boxed.page-sidebar-fixed .page-sidebar { + border-left: 1px solid #e2e2e2; + } + + .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar { + border-right: 1px solid #e2e2e2; + border-left: 0; + } + + .page-boxed.page-sidebar-fixed.page-footer-fixed .footer { + background-color: #E8E8E8 !important; + } + + .page-sidebar-closed .page-sidebar-menu > li > a { + margin-left: 0; + margin-right: 0; + } +} + +/* end: boxed page */ +/*** +Landscape phone to portrait tablet +***/ +@media (max-width: 991px) { + /*** + page sidebar + ***/ + .page-sidebar-closed .page-sidebar-menu > li > a { + margin-left: 0; + margin-right: 0; + } + + .page-sidebar { + background-color: #f1f1f1 !important; + border-right: none !important; + } + + .page-sidebar-fixed .page-sidebar { + border-right: none !important; + } + + .page-content { + border-left: none !important; + } + + ul.page-sidebar-menu > li > a { + border-top: 1px solid #ececec !important; + border-bottom: 1px solid #cccccc !important; + } + + /* ul.page-sidebar-menu > li:last-child > a { + border-bottom: 0 !important; + }*/ + ul.page-sidebar-menu > li.open > a, { + color: #666666 !important; + background-color: #e0e0e0 !important; + } + + /*ul.page-sidebar-menu > li > a:hover { + color: #666666 !important; + background-color: #e7e7e7 !important; + }*/ + ul.page-sidebar-menu > li.open > a { + border-bottom-color: transparent !important; + } + + /* ul.page-sidebar-menu > li.active > a { + color: #ffffff !important; + background-color: #28b779 !important; + }*/ + /*ul.page-sidebar-menu ul.sub-menu > li > a { + color: #111 !important; + }*/ + /*ul.page-sidebar-menu ul.sub-menu > li.active > a{ + color: #000 !important; + background: #dbe6ea !important; */ +} + +/* ul.page-sidebar-menu ul.sub-menu > li.open > a, + ul.page-sidebar-menu ul.sub-menu > li > a:hover { + color: #000 !important; + background: #e7e7e7 !important; + }*/ + +.page-sidebar .sidebar-search input { + background-color: #f1f1f1 !important; + color: #ccc !important; +} + +.page-sidebar .sidebar-search .input-box { + border-bottom-color: #ccc !important; +} + +.page-sidebar .sidebar-search input::-webkit-input-placeholder { + color: #ccc !important; +} + +.page-sidebar .sidebar-search input:-moz-placeholder { + color: #ccc !important; +} + +.page-sidebar .sidebar-search input:-ms-input-placeholder { + color: #ccc !important; +} + +/*** +page footer +***/ + +.footer { + background-color: #434343; +} + +.footer .footer-inner { + color: #cccccc; +} + +.footer .footer-tools .go-top { + background-color: #666666; +} + +.footer .footer-tools .go-top i { + color: #999999; +} + + } + +@media (max-width: 767px) { + body { + background-color: #333333 !important; + } +}
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4_ifrm.css new file mode 100644 index 00000000..a4b26729 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4_ifrm.css @@ -0,0 +1,209 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +ztebluelight4_ifrm theme +***/ +body{ + background-color: white!important; +} +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #47a080; + color: #fff; + border: 0px solid #b15a59; + border-radius: 0px; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown { + background-color: #3f9375; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #47a080; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #3f9375; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } + .buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #47a080; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #47a080; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #47a080; + } + .sectionHeaderclosed { + background-color: #4ca887; + } + +#dt_example h1{ +color:#47a080; +font-weight:600 !important; +} + /*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #d7eae3; + border-bottom: 1px solid #d7eae3; + border-top: 1px solid #d7eae3; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #c7e5da; + border-bottom: 1px solid #c7e5da; + border-top: 1px solid #c7e5da; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #c7e5da; + border-bottom: 1px solid #c7e5da; + border-top: 1px solid #c7e5da; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #a2cfbf; + } +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #c7e5da !important; + border-bottom: 1px solid #c7e5da; + border-top: 1px solid #c7e5da; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #c7e5da !important; + border-bottom: 1px solid #c7e5da; + border-top: 1px solid #c7e5da; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #d7eae3 !important; + border-bottom: 1px solid #d7eae3; + border-top: 1px solid #d7eae3; + } +.treeCellOver, +.treeCellOverDark { + background-color: #d7eae3; +} diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight_ifrm.css new file mode 100644 index 00000000..d3d4f208 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight_ifrm.css @@ -0,0 +1,228 @@ +/** + * Copyright 2016, CMCC Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*** +ztebluelight_ifrm theme +***/ +body{ + background-color: white!important; +} +td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} +td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{ +color:#7083ba; +font-size: 16px; +} + +/* button style*/ +.buttonRounded, +.buttonRoundedOver, +.buttonRoundedFocused, +.buttonRoundedFocusedOver, +.buttonRoundedDown, +.buttonRoundedFocusedDown, +.buttonRoundedSelected, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedDown, +.buttonRoundedSelectedFocusedDown, +.buttonRoundedSelectedOver, +.buttonRoundedSelectedFocusedOver, +.buttonRoundedDisabled, +.buttonRoundedSelectedDisabled { + background-color: #3366cc ; + color: #fff; + border: 0px solid #b15a59; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + /*padding: 0 3px;*/ + padding-left:7px !important; + padding-right:7px !important; + height:30px !important; +} +.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} +.buttonRoundedOver, +.buttonRoundedFocusedOver, +.buttonRoundedSelectedFocused, +.buttonRoundedSelectedFocusedOver , +.buttonRoundedDown, +.buttonRoundedFocusedDown{ + background-color: #6997f5; + height:30px !important; +} + +.menuButton, +.menuButtonOver, +.menuButtonDown, +.menuButtonDisabled, +.menuButtonFocused, +.menuButtonFocusedDown, +.menuButtonFocusedOver, +.menuButtonSelected, +.menuButtonSelectedDown, +.menuButtonSelectedOver, +.menuButtonSelectedDisabled { + background-color: #3366cc; + border: 0px solid #ababab; + color: #fff; + font-family: Arial, Verdana, sans-serif; + font-size: 12px; + padding-left: 7px !important; + padding-right: 7px !important; + height:30px !important; +} +.menuButtonOver { + background-color: #6997f5; + } +.menuButtonDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + .buttonTitle, +.buttonTitleOver, +.buttonTitleDown, +.buttonTitleSelected, +.buttonTitleFocused, +.buttonTitleSelectedFocused, +.buttonTitleSelectedOver, +.buttonTitleFocusedOver, +.buttonTitleSelectedFocusedOver, +.buttonTitleSelectedDown, +.buttonTitleFocusedDown, +.buttonTitleSelectedFocusedDown, +.buttonTitleDisabled, +.buttonTitleSelectedDisabled { + color: #fff ; + } +.buttonTitleDisabled{ + background-color: #f0f0f0; + color: #dadada; + opacity: 1; +} + /* windowBody dialogBody Style */ + .windowBody, +.dialogBody { + background-color: white; + border: 1px solid #b4cef8; + border-top: 0; +} +.windowHeader, +.dialogHeader { + background-color: #3366cc; + padding: 0; +} +/* sectionHeader Style */ +.sectionHeaderopened { + background-color: #3366cc; + } + .sectionHeaderclosed { + background-color: #619bfa; + } + +#dt_example h1{ +color:#3366cc; +font-weight:600 !important; +} +/*cell style*/ +.tallCellOver, +.tallCellOverDark { + background-color: #ffede4; + border-bottom: 1px solid #ffede4; + border-top: 1px solid #ffede4; + } +.tallCellSelected, +.tallCellSelectedDark { + background: #f8dddd; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.tallCellSelectedOver, +.tallCellSelectedOverDark { + background: #f8dddd; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.imgHeaderButtonOver, +.imgHeaderButtonDown, +.headerButtonOver, +.headerButtonDown, +.sorterButtonOver, +.sorterButtonDown { + background-color: #c4d7e2; +} +.cellSelected, +.cellSelectedDark, +.specialColSelected, +.recordSummaryCellSelected, +.recordSummaryCellSelectedDark { + background: #f8dddd !important; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; + } +.cellSelectedOver, +.cellSelectedOverDark, +.specialColSelectedOver, +.recordSummaryCellSelectedOver, +.recordSummaryCellSelectedOverDark { + background: #f8dddd !important; + border-bottom: 1px solid #f8dddd; + border-top: 1px solid #f8dddd; +} +.cellOver, +.cellOverDark, +.specialColOver, +.recordSummaryCellOver, +.recordSummaryCellOverDark { + background: #ffede4 !important; + border-bottom: 1px solid #ffede4; + border-top: 1px solid #ffede4; + } +.treeCellOver, +.treeCellOverDark { + background-color: #ffede4; +} +/*日志管理的蓝色大圆角筛选按?/ +.blue { + background-color: #fff; + color:#1991c5; +} +.blue:hover { + background-color: #e8f3fd; + color:#3366cc; +} +.blue.selected{ + border:0; + background-color: #3366cc; + color:#fff; +} +.blue.selected:hover{ + border:0; + background-color: #3366cc; + color:#fff; +}
\ No newline at end of file |