member_webapp/src/styles.scss
2018-08-03 15:11:48 +09:00

1989 lines
56 KiB
SCSS

/* You can add global styles to this file, and also import other style files */
//Logo
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.landing-wrapper .header .header-top .logo {
background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
background-size: 200px 30px; } }
.layout-container .topbar .logo {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 30px;
background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
background-size: 200px 30px; }
// Menu
.layout-container .topbar-items > li.profile-item .profile-image {
width: 24px;
height: 24px; }
.layout-container {
.topbar {
position: fixed;
z-index: 100;
width: 100%;
height: 50px !important;
//background-color: $primaryColor;
//@include shadow(0 2px 5px 0 rgba(0,0,0,0.26));
.logo {
display: inline-block;
vertical-align: middle;
width: 150px !important;
height: 20px !important;
background: url("/assets/layout/images/overFlow_CI_white_200_30.png") center center no-repeat !important;
background-size: 150px 20px !important;
}
.topbar-left {
box-sizing: border-box;
padding: 15px 20px !important;
height: 50px !important;
width: 200px !important;
//background-color: $primaryDarkColor;
float: left;
//@include shadow(3px 0 6px rgba(0,0,0,0.3));
}
.topbar-right {
padding: 10px !important;
position: relative;
#menu-button {
//color: $accentTextColor;
display: inline-block;
vertical-align: middle;
height: 30px !important;
margin-right: 10px;
position: relative;
left: 16px !important;
top: 3px;
background-color: transparent !important;
//@include border-radius(50%);
//@include transition(all $transitionDuration);
//@include multi-shadow(0 3px 10px rgba(0,0,0,0.23), 0 3px 10px rgba(0,0,0,0.16));
&:hover {
//@include scale(1.2);
}
i {
//@include material-icon("chevron_left");
//@include transition(all $transitionDuration);
font-size: 24px !important;
}
}
#topbar-menu-button, #rightpanel-menu-button {
display: none;
//color: $topbarButtonColor;
vertical-align: middle;
height: 30px !important;
margin-top: 4px;
float: right;
//@include transition(all $transitionDuration);
i {
//@include transition(color $transitionDuration);
font-size: 24px !important;
}
}
#rightpanel-menu-button {
display: block;
&:hover {
//color: $topbarButtonHoverColor;
}
}
.topbar-items {
.search-item {
input {
position: relative;
top: -5px !important;
//font-size: $fontSize;
background-color: transparent;
border-width: 0 0 1px 0;
padding: 2px 2px 1px 2px;
//border-color: $topbarSearchBorderColor;
// color: $topbarSearchColor;
&:focus {
outline: 0 none;
border-bottom-width: 2px;
}
}
input:focus ~ label {
top:-5px;
font-size:12px;
//color: $primaryColor;
}
input.ui-state-filled ~ label {
display: none;
}
label {
//color: $topbarSearchColor;
top: 6px !important;
}
}
}
}
}
.layout-menu {
overflow: visible;
position: fixed;
width: 200px !important;
z-index: 99;
top: 50px !important;
height: 100%;
background-color: #ececec !important;
//background-color: $layoutMenuBgColor;
//@include shadow(3px 0 6px rgba(0,0,0,0.3));
//@include transition(margin-left $transitionDuration);
.ui-scrollpanel {
background: transparent;
border-radius: 0;
border: none;
.ui-scrollpanel-bar {
//background-color: $layoutMenuScrollbarBgColor;
//@include opacity(.3);
}
.ui-scrollpanel-hidden {
display: block;
visibility: hidden;
}
.layout-menu {
padding-bottom: 120px;
}
}
.profile {
box-sizing: border-box;
padding-top: 2em !important;
width: 200px !important;
height: 110px !important;
text-align: center;
//background: url("../images/profile-bg.png") top left no-repeat;
background-size: 200px 110px !important;
//@include shadow(0 2px 5px 0 rgba(0,0,0,0.16));
.profile-image {
width: 40px !important;
height: 40px !important;
margin: 0 auto 5px auto;
display: block;
}
.profile-name {
display: inline-block;
//color: $textColor;
vertical-align: middle;
font-size: 1em;
}
i {
//color: $textColor;
vertical-align: middle;
// @include transition(transform $transitionDuration);
}
&.profile-expanded {
i {
//@include rotate(-180deg);
}
}
}
.profile-menu {
//border-bottom: 1px solid $profileMenuBorderBottomColor;
overflow: hidden;
li:first-child {
margin-top: 1em;
}
li:last-child {
margin-bottom: 1em;
}
}
&.layout-menu-dark {
//background-color: $darkMenuBgColor;
.profile {
//background-image: url("../images/profile-bg-dark.png");
.profile-name {
//color: $darkMenuColor;
}
i {
//color: $darkMenuColor;
}
}
.profile-menu {
//border-bottom: 1px solid $profileMenuDarkBorderBottomColor;
}
.ui-scrollpanel {
.ui-scrollpanel-wrapper {
.ui-scrollpanel-content {
border-radius: 0;
border: none;
}
}
}
ul.ultima-menu {
li {
a {
//color: $darkMenuColor;
i {
//color: $darkMenuColor;
}
&:hover {
//background-color: $darkMenuHoverColor;
}
&.active-menuitem-routerlink {
//color: $darkMenuRouterLinkActiveColor;
i {
//color: $darkMenuRouterLinkActiveColor;
}
&:hover {
//color: $darkMenuColor;
> i {
//color: $darkMenuColor;
}
}
}
}
&.active-menuitem {
> a {
//color: $accentTextColor;
//background-color: $accentColor;
&.active-menuitem-routerlink {
//color: $accentTextColor;
//background-color: $accentColor;
i {
//color: $textColor;
}
}
}
}
}
}
}
.menuitem-badge {
position: absolute;
right: 3.5em;
top: .75em;
display: inline-block;
width: 1em;
height: 1em;
margin-right: .5em;
text-align: center;
//background-color: $accentColor;
//color: $accentTextColor;
//font-size: $fontSize - 2;
font-weight: 700;
line-height: 1em;
//@include border-radius(50%);
}
.layout-menu-tooltip {
display:none;
padding: 0 5px;
position: absolute;
left: 76px;
top: 6px;
z-index: 101;
line-height: 1;
.layout-menu-tooltip-text {
padding: 6px 8px;
font-weight: 700;
//background-color: darken($darkMenuBgColor, 5%);
//color: $slimMenuTooltipColor;
min-width: 75px;
white-space: nowrap;
text-align: center;
//@include border-radius($borderRadius);
//@include shadow(0 6px 12px rgba(0,0,0,.175));
}
.layout-menu-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
//border-right-color: darken($darkMenuBgColor, 5%);
}
}
}
&.menu-layout-overlay {
.layout-menu {
margin-left: -200px !important;
}
.layout-main {
margin-left: 0px;
}
&.layout-menu-overlay-active {
.layout-menu {
z-index: 999999999;
margin-left: 0px;
}
.layout-mask {
display: block;
}
.topbar {
.topbar-right {
#menu-button {
i {
//@include rotate(0deg);
}
}
}
}
}
.topbar {
z-index: 999999998;
.topbar-right {
#menu-button {
i {
font-size: 24px !important;
//@include rotate(180deg);
}
}
}
}
}
.layout-main {
padding: 50px 0 0 0 !important;
.layout-content {
padding: 16px;
}
//@include transition(margin-left $transitionDuration);
}
.layout-mask {
display: none;
}
.layout-breadcrumb {
background-color: #ececec;
//@include shadow(inset 0 -2px 4px 0 rgba(0, 0, 0, 0.14));
min-height: 30px !important;
// @include clearfix();
ul {
margin: 4px 0 0 0 !important;
padding: 0 0 0 20px;
list-style: none;
//color: $textSecondaryColor;
display: inline-block;
li {
display: inline-block;
vertical-align: top;
font-size: 12px !important;
//color: $textSecondaryColor;
&:nth-child(even) {
font-size: 12px !important;
}
&:first-child(even) {
//color: $primaryColor;
}
a {
//color: $textSecondaryColor;
}
}
}
.layout-breadcrumb-options {
float: right;
padding: 0px 20px 0 0;
height: 100%;
a {
//color: $textSecondaryColor;
display: inline-block;
width: 30px !important;
height: 30px !important;
line-height: 30px !important;
text-align: center;
//@include transition(background-color $transitionDuration);
&:hover {
//background-color: $hoverBgColor;
}
i {
line-height: inherit;
}
}
}
}
.ultima-menu {
margin: 0;
padding: 0;
list-style: none;
width: 220px !important;
&.ultima-main-topmenu{
top: 35px !important;
}
&.ultima-main-menu {
margin-top: 0px; //16px;
padding-bottom: 120px;
}
li {
a {
font-size: 1em;
display: block;
padding: 1em 2.5em 1em 1.2em;
//color: $textColor;
width: 100%;
box-sizing: border-box;
//@include transition(background-color $transitionDuration);
overflow: hidden;
i {
//color: $layoutMenuItemIconColor;
}
i:first-child {
display: inline-block;
vertical-align: middle;
margin-right: .5em;
font-size: 1em !important; //1.5em;
}
i:last-child {
float: right;
//font-size: $fontSize + 4;
margin-top: .15em;
margin-right: -.15em;
//@include transition(transform $transitionDuration);
}
&:hover {
background-color: #cdcdcd !important;
}
span {
display: inline-block;
vertical-align: middle;
}
&.active-menuitem-routerlink {
background-color: #cdcdcd !important;
> i {
//background-color: #cdcdcd !important;
}
&:hover {
//color: $textColor;
> i {
//color: $layoutMenuItemIconColor;
}
}
}
}
&.active-menuitem {
> a {
//color: $primaryColor;
background-color: #cdcdcd !important;
i {
//color: $primaryColor;
}
i:last-child {
//@include rotate(-180deg);
}
}
}
ul {
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
li {
a {
//padding: .5em 2.5em .5em 2em;
padding: 1em 2.5em 1em 2.4em;
> span {
//font-size: $fontSize - 1;
}
i:first-child {
display: inline-block;
vertical-align: middle;
margin-right: .6em;
font-size: 1.250em;
}
}
ul {
li {
a {
padding-left: 3em;
}
}
ul {
li {
a {
padding-left: 4em;
}
}
ul {
li {
a {
padding-left: 5em;
}
}
ul {
li {
a {
padding-left: 6em;
}
}
}
}
}
}
}
}
&.red-badge {
> a {
.menuitem-badge {
background-color: #F44336;
color: #ffffff;
}
}
}
&.purple-badge {
> a {
.menuitem-badge {
background-color: #4527A0;
color: #ffffff;
}
}
}
&.teal-badge {
> a {
.menuitem-badge {
background-color: #00695C;
color: #ffffff;
}
}
}
}
}
.footer {
padding: 0px;
.footer-text-left {
float: left;
}
.footer-text-right {
//color: $textSecondaryColor;
float: right;
span {
vertical-align: middle;
display: inline-block;
}
}
}
.layout-rightpanel {
position: fixed;
top: 50px !important;
height: 100%;
right: -240px;
width: 240px;
z-index: 100;
//background-color: $rightPanelBgColor;
//@include box-sizing(border-box);
// @include transition(right $transitionDuration);
//@include shadow(0 2px 10px 0 rgba(0, 0, 0, 0.3));
&.layout-rightpanel-active {
right: 0;
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.layout-rightpanel-content {
padding: 14px;
padding-bottom: 120px;
}
.ui-scrollpanel {
border-radius: 0;
border: none;
.ui-scrollpanel-hidden {
display: block;
visibility: hidden;
}
.layout-rightpanel-wrapper{
width: 258px;
padding-right: 18px;
}
}
}
}
.ajax-loader {
font-size: 2em;
//color: $accentColor;
}
@media (min-width: 1025px) {
.layout-container {
.topbar-items {
float: right;
margin: 0;
padding: 5px 0 0 0;
list-style-type: none;
> li {
float: right;
position: relative;
margin-left: 8px;
> a {
position: relative;
display: block;
.topbar-item-name {
display: none;
}
.topbar-badge {
position: absolute;
right: -5px;
top: -5px;
//background-color: $accentColor;
//color: $accentTextColor;
//@include border-radius(50%);
padding: 2px 4px;
display: block;
font-size: 12px;
line-height: 12px;
}
}
.topbar-icon {
font-size: 24px !important;
//color: $topbarIconColor;
//@include transition(color $transitionDuration);
&:hover {
//color: $topbarIconHoverColor;
}
}
&.profile-item {
.profile-image {
width: 24px !important;
height: 24px !important;
}
}
> ul {
position: absolute;
top: 55px;
right: 5px;
display: none;
width: 250px;
//background-color: $topbarSubmenuBgColor;
//@include multi-shadow(0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2));
//-webkit-animation-duration: $transitionDuration;
//-moz-animation-duration: $transitionDuration;
//animation-duration: $transitionDuration;
}
&.active-top-menu {
> ul {
display: block;
}
}
.topbar-message {
img {
display: inline-block;
vertical-align: middle;
margin-right: 12px;
}
}
}
}
&.menu-layout-static {
.layout-menu {
margin-left: 0;
}
.layout-main {
margin-left: 200px !important;
}
&.layout-menu-static-inactive {
.topbar {
.topbar-right {
#menu-button {
i {
//@include rotate(180deg);
}
}
}
}
.layout-menu {
margin-left: -200px !important;
}
.layout-main {
margin-left: 0px !important;
}
}
.layout-mask {
display: none;
}
}
&.menu-layout-horizontal {
.topbar {
//@include no-shadow();
.topbar-left {
//background-color: $primaryColor;
//@include no-shadow();
}
.topbar-right {
#menu-button {
display: none;
}
}
}
.layout-menu {
overflow: visible;
position: fixed;
width: 100%;
top: 50px !important;
height: auto;
//background-color: $primaryDarkColor;
//@include shadow(0 2px 5px 0 rgba(0,0,0,0.26));
.ui-scrollpanel {
overflow: visible;
border: none;
.ui-scrollpanel-wrapper {
overflow: visible;
.ui-scrollpanel-content {
overflow: visible;
}
}
}
ul.ultima-menu {
width: 100%;
&.ultima-main-menu {
margin-top: 0;
padding-bottom: 0;
}
> li {
float: left;
position: relative;
> a {
padding: .5em 1em;
//color: $horizontalLayoutMenuItemTextColor;
i {
//color: $horizontalLayoutMenuItemTextColor;
}
&:hover {
//background-color: $horizontalLayoutMenuItemHoverBgColor;
//color: $textColor;
i {
//color: $textColor;
}
}
&.active-menuitem-routerlink {
//color: $horizontalLightMenuRouterLinkActiveColor;
> i {
//color: $horizontalLightMenuRouterLinkActiveColor;
}
&:hover {
//color: $textColor;
i {
//color: $textColor;
}
}
}
}
> ul {
position: absolute;
top: 41px;
left: 0px;
width: 200px !important;
//background-color: $horizontalLayoutMenuSubMenuBgColor;
//@include multi-shadow(0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2));
li {
a {
padding: 10px 16px;
}
ul {
position: static;
li {
a {
padding-left: 32px;
}
}
ul {
li {
a {
padding-left: 48px;
}
}
ul {
li {
a {
padding-left: 64px;
}
}
ul {
li {
a {
padding-left: 80px;
}
}
ul {
li {
a {
padding-left: 96px;
}
}
}
}
}
}
}
&.active-menuitem {
> a {
//color: $primaryColor;
//background-color: $horizontalLayoutMenuSubMenuActiveBgColor;
}
> ul {
display: block;
}
}
}
}
&.active-menuitem {
> a {
//color: $accentTextColor;
//background-color: $accentColor;
i {
//color: $accentTextColor;
}
}
> ul {
display: block;
}
}
}
}
&.layout-menu-dark {
//background-color: $darkMenuBgColor;
ul.ultima-menu {
li {
a {
//color: $horizontalDarkLayoutMenuItemTextColor;
&:hover {
//background-color: $darkMenuHoverColor;
//color: $horizontalDarkLayoutMenuItemTextColor;
i {
//color: $horizontalDarkLayoutMenuItemTextColor;
}
}
&.active-menuitem-routerlink {
//color: $darkMenuRouterLinkActiveColor;
i {
//color: $darkMenuRouterLinkActiveColor;
}
&:hover {
//color: $horizontalDarkLayoutMenuItemTextColor;
i {
//color: $horizontalDarkLayoutMenuItemTextColor;
}
}
}
}
&.active-menuitem {
> a {
//color: $accentTextColor;
//background-color: $accentColor;
}
}
ul {
//background-color: $darkMenuBgColor;
}
}
}
}
.menuitem-badge {
left: 32px;
top: 7px;
}
.active-menuitem {
.menuitem-badge {
//background-color: $activeMenuItemBadgeColor;
//color: $activeMenuItemBadgeTextColor;
}
}
}
.layout-main {
padding-top: 80px !important;
margin-left: 0px;
}
.layout-mask {
display: none;
}
}
&.menu-layout-slim {
.topbar {
left: 75px;
width: calc(100% - 75px);
.topbar-left {
background: transparent;
//@include no-shadow();
}
.topbar-right {
#menu-button {
display: none;
}
}
}
.layout-menu {
width: 75px;
overflow: visible;
z-index: 100;
top: 0;
.profile {
width: calc(100% - 18px);
height: 74px;
padding-top: 15px;
> a {
.profile-image {
width: 45px;
height: 45px;
}
.profile-name, i {
display: none;
}
}
}
.ui-scrollpanel {
border: none;
border-radius: 0;
.ui-scrollpanel-wrapper {
overflow: visible;
.ui-scrollpanel-content {
overflow: visible;
}
}
}
.ultima-menu {
padding: 0;
width: calc(100% - 18px);
> li {
position: relative;
> a {
text-align: center;
padding-left: 0;
padding-right: 0;
padding-top: .5em;
padding-bottom: .5em;
i:first-child {
font-size: 1.75em;
margin-right: 0;
}
span, .submenu-icon {
display: none;
}
&:hover + .layout-menu-tooltip {
display: block;
}
}
> ul {
//background-color: $slimLayoutMenuSubMenuBgColor;
position: absolute;
top: 0;
left: 75px;
min-width: 200px;
//@include shadow(0 2px 5px 0 rgba(0,0,0,0.26));
li {
a {
padding: .5em 1em .5em 2em;
padding-left: 16px;
}
ul {
li {
a {
padding-left: 32px;
}
}
ul {
li {
a {
padding-left: 48px;
}
}
ul {
li {
a {
padding-left: 64px;
}
}
ul {
li {
a {
padding: 80px;
}
}
ul {
li {
a {
padding: 96px;
}
}
}
}
}
}
}
}
}
&.active-menuitem {
> a {
&:hover + .layout-menu-tooltip {
display: none;
}
}
}
}
}
&.layout-menu-dark {
.ultima-menu {
> li {
> ul {
//background-color: $darkMenuBgColor;
}
}
}
}
}
.layout-main {
margin-left: 75px;
}
.layout-footer {
margin-left: 75px;
}
}
}
}
@media (max-width: 1024px) {
.layout-container {
&.menu-layout-static {
.topbar {
.topbar-right {
#menu-button {
i {
//@include rotate(180deg);
}
}
}
}
.layout-menu {
margin-left: -265px;
}
.layout-main {
margin-left: 0px;
}
&.layout-menu-static-active {
.layout-menu {
margin-left: 0;
z-index: 999999999;
}
.topbar {
z-index: 999999998;
.topbar-right {
#menu-button {
i {
//@include rotate(0);
}
}
}
}
.layout-main {
margin-left: 0;
}
.layout-mask {
display: block;
}
}
}
.topbar {
.topbar-right {
#topbar-menu-button {
display: block;
}
.topbar-items {
position: absolute;
top: 50px !important;
right: 15px;
width: 215px !important;
display: none;
//background-color: $topbarMenuBgColor;
//@include multi-shadow(0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2));
//@include animation-duration($transitionDuration);
list-style-type: none;
margin: 0;
padding: 0;
> li {
> a {
width: 100%;
display: block;
box-sizing: border-box;
font-size: 14px !important;
padding: 14px 14px !important;
//color: $textColor;
position: relative;
i {
display: inline-block;
vertical-align: middle;
margin-right: 12px;
font-size: 18px !important;
}
&:hover {
//background-color: $topbarIconHoverColor;
}
.topbar-item-name {
display: inline-block;
vertical-align: middle;
}
.topbar-badge {
position: absolute;
left: 30px;
top: 10px;
//background-color: $accentColor;
//color: $accentTextColor;
//@include border-radius(50%);
padding: 2px 4px;
display: block;
font-size: 12px;
line-height: 12px;
}
}
> ul {
display: none;
li {
a {
span, img, i {
display: inline-block;
vertical-align: middle;
}
}
}
}
&.active-top-menu {
> a {
//color: $primaryColor;
}
> ul {
display: block;
li {
a {
padding-left: 32px;
}
}
}
}
&.search-item {
text-align: center;
width: 100%;
display: block;
box-sizing: border-box;
font-size: 14px !important;
padding: 14px 14px !important;
position: relative;
input {
top: 0;
width: 100%;
box-sizing: border-box;
padding-right:14px !important;
//border-color: $dividerColor;
//color: $textColor;
&:focus {
margin-bottom: -1px;
//border-color: $dividerColor;
}
}
input:focus ~ label,
input.ui-state-filled ~ label {
top: -25px !important;
//color: $primaryColor;
}
label {
top: -5px !important;
//color: $textColor;
}
i {
position: absolute;;
right: 5px;
top: -2px;
}
}
&.profile-item {
.profile-image {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
//background: url("../images/avatar.png") top left no-repeat;
background-size: 24px 24px;
margin-right: 14px;
}
span {
vertical-align: middle;
display: inline-block;
}
}
}
&.topbar-items-visible {
display: block;
}
}
}
}
}
}
@media (max-width: 385px) {
.layout-container {
.topbar {
.topbar-right {
#topbar-menu-button {
position: absolute;
height: 1.5em;
right: 24px;
top: 0.8em !important;
i {
font-size: 1.5em;
}
}
#rightpanel-menu-button {
position: absolute;
height: 1.5em;
right: 8px;
top: 0.8em !important;
i {
font-size: 1.5em;
}
}
#menu-button {
margin-right: 0;
}
}
}
}
}
//top menu-button
.layout-container .topbar .topbar-right #menu-button {
color: #ffffff;
display: inline-block;
vertical-align: middle;
height: 36px;
margin-right: 10px;
position: relative;
//left: -16px;
left: 16px !important;
top: 3px;
background-color: transparent !important;
}
.layout-container .topbar .topbar-right #menu-button:hover {
color: #e8e8e8;}
.layout-container .topbar .topbar-right #menu-button i {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 1.5em;
/* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
text-indent: 0;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: 36px; }
.layout-container .topbar .topbar-right #menu-button i:before {
//content: "chevron_left";
content: "menu" !important;
}
//auth style
.login-body {
//background: url("../images/login/login.png") top left no-repeat #f7f7f7;
//background: url("/assets/layout/images/login11.jpg") center no-repeat #f7f7f7 !important;
background: #ffffff;
margin: 0 !important;
padding: 0 !important;
min-height: 100vh !important;
background-size: cover !important;
background-attachment: fixed !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.login-body {
//background: url("../images/login/login2x.png") top left no-repeat #f7f7f7;
//background: url("/assets/layout/images/login11.jpg") top left no-repeat #f7f7f7 !important;
background: #ffffff;
}
}
.login-descript{
background: #203976;
color: #ffffff;
}
.login-panel {
margin: 0 !important;
width: 450px !important;
min-height: 300px !important;
.ui-g {
.ui-g-12 {
a {
color: #5e6166;
font-size: 0.8em;
}
a:hover{
color: rgb(18, 86, 233);
}
.recaptcha-align{
margin: 0 auto;
}
}
.ui-g-12.ui-g-padding-15 {
padding: 15px 40px !important;
}
}
.ui-message{
text-align: left;
}
}
.login-table {
vertical-align: middle;
text-align: left;
margin-left: auto;
margin-right: auto;
margin: auto;
height: 100vh;
border-collapse: collapse;
border-spacing: 0;
}
//.layout-container .layout-main .layout-content
.layout-container .layout-main .layout-content {
padding: 0px !important;
}
.ui-button-secondary{
background-color : #f5f6f8 !important;
.ui-button-icon-left{
color: #5e6166 !important;
}
}
.ui-button-secondary:hover{
color : #5e6166 !important;
background-color : #ededee !important;
}
.ui-button-large {
font-size: 1.6em !important;
}
.ui-bottom-space-10{
margin-bottom: 10px;
}
.ui-bottom-space-20{
margin-bottom: 20px;
}
.ui-top-space-10{
margin-top: 10px;
.ui-panel{
margin-top: 10px;
}
}
.ui-top-space--0-5em{
margin-top: -0.5em;
}
.ui-left-space-10{
margin-left: 10px;
}
.ui-float-right{
float:right;
}
.ui-button-width-fit{
width: auto !important;
}
.ui-nopad{
padding: 0px !important;
.ui-accordion-content{
padding: 0px !important;
border: 0px !important;
}
}
.ui-width-100-{
.ui-orderlist-list-container{
width : 100% !important;
}
}
.ui-no-border{
border: 0px !important;
.ui-tree{
border : 0px !important;
}
}
.ui-s-button{
.ui-button-text {
padding: 0 !important;
.ui-button-text-icon-left {
padding: 2px 12px 2px 4px !important;
}
.ui-button-text-icon-right {
padding: 2px 4px 2px 12px !important;
}
}
font-size: 0.8em !important;
}
.ui-xs-button{
.ui-button-text {
padding: 2px !important;
.ui-button-text-icon-left {
padding: 2px 12px 2px 4px !important;
}
.ui-button-text-icon-right {
padding: 2px 4px 2px 12px !important;
}
}
font-size: 0.6em !important;
}
.ui-status-icon{
//margin-top: 3px;
//position: static;
//display: inline-block;
vertical-align: middle;
&.ui-status-info {
color: #2196F3 !important;
}
&.ui-status-warn {
color: #ffc107 !important;
}
&.ui-status-error {
color: #e62a10 !important;
}
&.ui-status-fatal {
color: #212121 !important;
}
&.ui-status-success {
color: #8BC34A !important;
}
}
.ui-img-profile{
min-width: 250px !important;
@media (max-width: 640px) {
text-align: center;
}
}
.ui-img-profile-box {
width: 244px !important;
padding: 12px;
box-sizing: border-box;
display: block;
background-color: #ffffff;
border: 1px solid #bdbdbd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin: auto;
img {
object-fit: cover;
width:220px;
height:220px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
}
}
.ui-sensors-datalist {
.ui-sensors{
.ui-sensor{
display:inline-block;
margin: auto;
padding:9px;
text-align: center;
.ui-icon-lg{
font-size: 3em;
margin: 3px;
}
}
.ui-sensors-details{
display:inline-block;
margin: auto 0;
}
}
}
.ui-key-value {
padding: 10px;
margin: 0 !important;
of-key-value{
//width: 100%;
min-width: 250px;
margin: 0;
}
.of-key-value-div{
//width: 100%;
min-width: 250px;
margin: 0;
}
span {
font-weight: bold;
width: 150px ;
display: inline-block;
padding: 5px;
margin: 0;
text-align: right;
//background: red;
}
span::after {
content: " : ";
}
span.ng-star-inserted, a.ng-star-inserted>span {
font-weight: normal;
text-align: left;
display: inline-block;
padding: 5px;
margin: 0;
width: 50%;
//background: blue;
}
span.ng-star-inserted::after, a.ng-star-inserted>span::after {
content: " ";
}
// input {
// border: 0px;
// background : #f5f5f5;
// padding: 5px;
// }
}
.ui-left-info{
margin-left: -15px !important;
min-width: 300px !important;
span{
width: 105px !important;
}
}
.ui-left-info2{
padding: 10px !important;
margin-left: -15px !important;
min-width: 300px !important;
span::after {
content: " : ";
}
span{
width: 95px !important;
}
span.ng-star-inserted, a.ng-star-inserted>span {
width: auto !important;
}
}
.ui-bottom-border-1 {
border-bottom: #bdbdbd 1px solid;
}
.ui-bottom-border-sm-1 {
@media (max-width: 640px) {
border-bottom: #bdbdbd 1px solid;
}
}
.ui-top-border-1 {
border-top: #bdbdbd 1px solid;
}
/*.layout-container .ultima-menu{
width: 100% ;
}*/
.layout-container .ultima-menu .ui-app-noti{
h4 {
line-height: 1.2em;
margin: 0;
width: 100%;
border-bottom: #bdbdbd 1px solid;
padding: 7px 10px;
color: #bdbdbd;
}
@media (max-width: 1024px){
h4 {
display: none;
}
li{
border-top: #bdbdbd 1px solid;
}
}
li{
padding: 0 ;
width: 100%;
border-bottom: #bdbdbd 1px solid;
a {
display: block;
.ui-app-noti-title {
font-weight: bold;
float: left;
}
.ui-app-noti-date{
float: right;
font-size: 0.8em;
color: #5e6166;
}
.ui-app-noti-content{
float: left;
overflow: hidden;
}
}
}
}
.ui-button-photo-add {
vertical-align: text-bottom;
float: right;
margin-top: -30px;
margin-right: -5px;
}
.ui_orderlist_controls_none {
.ui-orderlist-controls {
display: none !important;
}
}
.layout-container .layout-menu .profile .profile-image{
border-radius: 50%;
}
.layout-container .topbar-items .profile-image{
border-radius: 50%;
}
body .ui-progressbar .ui-progressbar-value {
height: 0 !important;
}
.font-s{
font-size: 80%;
}
.layout-content {
min-height: calc(100vh - 215px);
}
.footer {
height: 50px;
}
.block-icon {
position: absolute;
top: 40%;
left: 45%;
font-size: 50px;
color: #ffffff !important;
}
.block-panel>div {
border: none !important;
}
.block-panel div .ui-panel-content {
padding : 0px !important;
margin : 0px !important;
}
.ui-blockui.ui-widget-overlay {
opacity: 0;
}
.ui-tab-bgcolor{
.ui-tabview-nav > li.ui-state-active {
background-color: #f3f3f3 !important;
}
}
.ui-confirmdialog-message {
white-space: pre-line;
}
.ui-unbg-table{
.ui-table .ui-table-tbody > tr:nth-child(odd) .ui-state-active, .ui-state-highlight {
background-color: #f4f4f4 !important;
color: #2449a7 !important;
font-weight: normal;
.fa {
color: #ffffff;
}
}
.ui-table .ui-table-tbody > tr:nth-child(odd) .ui-state-active, .ui-state-highlight .ui-chkbox .ui-chkbox-box.ui-state-active {
border-color: #3e464c!important;
background-color: #3e464c!important;
}
.ui-table .ui-table-tbody > tr:nth-child .ui-state-active, .ui-state-highlight {
background-color: #ffffff !important;
color: #203976 !important;
.fa {
color: #ffffff;
}
}
}
.ui-tabs-noborder div.ui-tabmenu {
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
//ui-togglebutton
body .ui-discovery .ui-button, .ui-togglebutton {
background-color: #f1f1f1 !important;
border: 1px solid #bdbdbd !important;
color: #212121 !important;
}
body .ui-discovery .ui-button, .ui-togglebutton:not(.ui-state-active):not(.ui-state-disabled):hover {
background-color: #e2e2e2 !important; }
body .ui-discovery .ui-button, .ui-togglebutton.ui-state-active {
background-color: #5180ce !important;
color: #ffffff !important; }
body .ui-discovery, .ui-card {
width: 200px;
}
body .ui-discovery, .ui-discovery-selected .ui-widget-content{
border-color: #5180ce !important;
background: #5180ce !important;
color: #ffffff !important;
}
body .ui-discovery, .ui-discovery-disable .ui-widget-content{
border-color: #e3e4e6 !important;
background: #e3e4e6 !important;
color: #cac9c9 !important;
}
body .ui-discovery, .ui-card-body {
padding: 0.5em !important;
}
body .ui-discovery, .ui-card-body .ui-discovery-title {
width: 100%;
font-size: 1em ;
font-weight: bold ;
margin-bottom: 0.2em ;
}
body .ui-discovery, .ui-card-body .ui-discovery-date {
width: 100%;
font-size: 0.8em;
text-align: right;
}
body .ui-discovery, .ui-card-body .ui-discovery-new {
float: right;
font-size: 0.8em;
font-weight: bold;
text-align: right;
color: #e62a10;
}