From 555d5f549b9c41d23fdbfe50d08204ef7a27bc7d Mon Sep 17 00:00:00 2001 From: rashmithakkar Date: Sat, 8 Jun 2019 10:35:09 +0530 Subject: [PATCH] version: updated --- README.md | 2 +- package.json | 2 +- src/styles/css/at-md-army-olive.css | 153 ++++++++++++++---- src/styles/css/at-md-ash-stone-black.css | 153 ++++++++++++++---- src/styles/css/at-md-black.css | 153 ++++++++++++++---- src/styles/css/at-md-blue-grey.css | 153 ++++++++++++++---- src/styles/css/at-md-blue.css | 153 ++++++++++++++---- src/styles/css/at-md-bruntor-tangerine.css | 153 ++++++++++++++---- src/styles/css/at-md-cerise-magenta.css | 153 ++++++++++++++---- src/styles/css/at-md-charcoal-iron.css | 153 ++++++++++++++---- src/styles/css/at-md-chocolate-russet.css | 153 ++++++++++++++---- .../css/at-md-darkgreen-darkolivegreen.css | 153 ++++++++++++++---- src/styles/css/at-md-darkgreen-teal.css | 153 ++++++++++++++---- src/styles/css/at-md-darkkhaki-moccasin.css | 153 ++++++++++++++---- .../css/at-md-darkmagenta-darkorchid.css | 153 ++++++++++++++---- src/styles/css/at-md-darkslateblue-indigo.css | 153 ++++++++++++++---- .../css/at-md-darkslategray-dimgray.css | 153 ++++++++++++++---- .../css/at-md-darkturquoise-aquamarine.css | 153 ++++++++++++++---- src/styles/css/at-md-fern-lime.css | 153 ++++++++++++++---- src/styles/css/at-md-firebrick-crimson.css | 153 ++++++++++++++---- src/styles/css/at-md-frenchrose-mulberry.css | 153 ++++++++++++++---- src/styles/css/at-md-gingerbread.css | 153 ++++++++++++++---- src/styles/css/at-md-gold-amber.css | 153 ++++++++++++++---- src/styles/css/at-md-grape-violet.css | 153 ++++++++++++++---- src/styles/css/at-md-honey-mustard.css | 153 ++++++++++++++---- src/styles/css/at-md-hot-pink-fuchsia.css | 153 ++++++++++++++---- src/styles/css/at-md-hot-pink-violetred.css | 153 ++++++++++++++---- src/styles/css/at-md-indianred-salmon.css | 153 ++++++++++++++---- src/styles/css/at-md-indigo-darkviolet.css | 153 ++++++++++++++---- src/styles/css/at-md-indigo-slateblue.css | 153 ++++++++++++++---- src/styles/css/at-md-indigo.css | 153 ++++++++++++++---- src/styles/css/at-md-jungle-mint.css | 153 ++++++++++++++---- src/styles/css/at-md-mahogany-barny-red.css | 153 ++++++++++++++---- src/styles/css/at-md-mauve-orchid.css | 153 ++++++++++++++---- src/styles/css/at-md-maya.css | 153 ++++++++++++++---- .../css/at-md-mediumblue-deepskyblue.css | 153 ++++++++++++++---- src/styles/css/at-md-mediumblue-slateblue.css | 153 ++++++++++++++---- .../css/at-md-mediumvioletred-hotpink.css | 153 ++++++++++++++---- src/styles/css/at-md-navy-egyptian.css | 153 ++++++++++++++---- src/styles/css/at-md-navy-royalblue.css | 153 ++++++++++++++---- src/styles/css/at-md-orangered-tomato.css | 153 ++++++++++++++---- src/styles/css/at-md-pineapple-flaxen.css | 153 ++++++++++++++---- src/styles/css/at-md-pumpkin-fire.css | 153 ++++++++++++++---- src/styles/css/at-md-rasberry-sangria.css | 153 ++++++++++++++---- src/styles/css/at-md-rebeccapurple-orchid.css | 153 ++++++++++++++---- src/styles/css/at-md-red-maroon.css | 153 ++++++++++++++---- src/styles/css/at-md-royalblue-dodgerblue.css | 153 ++++++++++++++---- src/styles/css/at-md-sacramento-jade.css | 153 ++++++++++++++---- src/styles/css/at-md-saddlebrown-peru.css | 153 ++++++++++++++---- src/styles/css/at-md-sienna-rosybrown.css | 153 ++++++++++++++---- src/styles/css/at-md-tronbone-royal.css | 153 ++++++++++++++---- src/styles/css/at-md-yale-azure.css | 153 ++++++++++++++---- src/styles/css/at-md-z-flag-bahamas.css | 153 ++++++++++++++---- src/styles/css/at-md-z-flag-france.css | 153 ++++++++++++++---- src/styles/css/at-md-z-flag-germany.css | 153 ++++++++++++++---- src/styles/css/at-md-z-flag-india.css | 153 ++++++++++++++---- src/styles/css/at-md-z-flag-italy.css | 153 ++++++++++++++---- src/styles/css/at-md-z-flag-japan.css | 153 ++++++++++++++---- src/styles/css/at-md-z-flag-usa.css | 153 ++++++++++++++---- 59 files changed, 7184 insertions(+), 1541 deletions(-) diff --git a/README.md b/README.md index 874d97bb7..f9e1f3dd3 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@
Amexio
- Amexio Angular EXtensions v5.13.1 + Amexio Angular EXtensions v5.14.0
diff --git a/package.json b/package.json index 3ec559da7..825bb6557 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "amexio-ng-extensions", "description": "Angular UI library", - "version": "5.13.1", + "version": "5.14.0", "homepage": "https://www.amexio.tech/", "author": { "name": "MetaMagic Global", diff --git a/src/styles/css/at-md-army-olive.css b/src/styles/css/at-md-army-olive.css index 8a932e21e..acae4edd5 100644 --- a/src/styles/css/at-md-army-olive.css +++ b/src/styles/css/at-md-army-olive.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-ash-stone-black.css b/src/styles/css/at-md-ash-stone-black.css index ec2cbf960..cad8927d7 100644 --- a/src/styles/css/at-md-ash-stone-black.css +++ b/src/styles/css/at-md-ash-stone-black.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-black.css b/src/styles/css/at-md-black.css index 9565e3ecd..f7c9ee532 100644 --- a/src/styles/css/at-md-black.css +++ b/src/styles/css/at-md-black.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-blue-grey.css b/src/styles/css/at-md-blue-grey.css index cd68a6728..4b4d7af02 100644 --- a/src/styles/css/at-md-blue-grey.css +++ b/src/styles/css/at-md-blue-grey.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-blue.css b/src/styles/css/at-md-blue.css index a0478b683..1e31cf6ca 100644 --- a/src/styles/css/at-md-blue.css +++ b/src/styles/css/at-md-blue.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-bruntor-tangerine.css b/src/styles/css/at-md-bruntor-tangerine.css index 94f862784..9ea2f78b9 100644 --- a/src/styles/css/at-md-bruntor-tangerine.css +++ b/src/styles/css/at-md-bruntor-tangerine.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-cerise-magenta.css b/src/styles/css/at-md-cerise-magenta.css index 1e5a24ce8..60fbb39dd 100644 --- a/src/styles/css/at-md-cerise-magenta.css +++ b/src/styles/css/at-md-cerise-magenta.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-charcoal-iron.css b/src/styles/css/at-md-charcoal-iron.css index c4ea78e50..da80e571c 100644 --- a/src/styles/css/at-md-charcoal-iron.css +++ b/src/styles/css/at-md-charcoal-iron.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-chocolate-russet.css b/src/styles/css/at-md-chocolate-russet.css index 472f0af63..db49afd5f 100644 --- a/src/styles/css/at-md-chocolate-russet.css +++ b/src/styles/css/at-md-chocolate-russet.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-darkgreen-darkolivegreen.css b/src/styles/css/at-md-darkgreen-darkolivegreen.css index 20a97309b..426f318c9 100644 --- a/src/styles/css/at-md-darkgreen-darkolivegreen.css +++ b/src/styles/css/at-md-darkgreen-darkolivegreen.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-darkgreen-teal.css b/src/styles/css/at-md-darkgreen-teal.css index 87957a067..77cef3485 100644 --- a/src/styles/css/at-md-darkgreen-teal.css +++ b/src/styles/css/at-md-darkgreen-teal.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-darkkhaki-moccasin.css b/src/styles/css/at-md-darkkhaki-moccasin.css index bbc7af21d..f13afa0c1 100644 --- a/src/styles/css/at-md-darkkhaki-moccasin.css +++ b/src/styles/css/at-md-darkkhaki-moccasin.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-darkmagenta-darkorchid.css b/src/styles/css/at-md-darkmagenta-darkorchid.css index f97ac381d..21a242d78 100644 --- a/src/styles/css/at-md-darkmagenta-darkorchid.css +++ b/src/styles/css/at-md-darkmagenta-darkorchid.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-darkslateblue-indigo.css b/src/styles/css/at-md-darkslateblue-indigo.css index 6af1bd262..9ab504058 100644 --- a/src/styles/css/at-md-darkslateblue-indigo.css +++ b/src/styles/css/at-md-darkslateblue-indigo.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-darkslategray-dimgray.css b/src/styles/css/at-md-darkslategray-dimgray.css index 6eb1a5381..749ede005 100644 --- a/src/styles/css/at-md-darkslategray-dimgray.css +++ b/src/styles/css/at-md-darkslategray-dimgray.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-darkturquoise-aquamarine.css b/src/styles/css/at-md-darkturquoise-aquamarine.css index 9e4bb5b15..b554c81c0 100644 --- a/src/styles/css/at-md-darkturquoise-aquamarine.css +++ b/src/styles/css/at-md-darkturquoise-aquamarine.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-fern-lime.css b/src/styles/css/at-md-fern-lime.css index b4a4653c0..6b4656264 100644 --- a/src/styles/css/at-md-fern-lime.css +++ b/src/styles/css/at-md-fern-lime.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-firebrick-crimson.css b/src/styles/css/at-md-firebrick-crimson.css index 780d01569..88f764989 100644 --- a/src/styles/css/at-md-firebrick-crimson.css +++ b/src/styles/css/at-md-firebrick-crimson.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-frenchrose-mulberry.css b/src/styles/css/at-md-frenchrose-mulberry.css index eced5f39c..6450941a1 100644 --- a/src/styles/css/at-md-frenchrose-mulberry.css +++ b/src/styles/css/at-md-frenchrose-mulberry.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-gingerbread.css b/src/styles/css/at-md-gingerbread.css index bc03a5c4e..c4966dba7 100644 --- a/src/styles/css/at-md-gingerbread.css +++ b/src/styles/css/at-md-gingerbread.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-gold-amber.css b/src/styles/css/at-md-gold-amber.css index aaee27727..19d92d950 100644 --- a/src/styles/css/at-md-gold-amber.css +++ b/src/styles/css/at-md-gold-amber.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-grape-violet.css b/src/styles/css/at-md-grape-violet.css index 36d6329d7..ac09fc70e 100644 --- a/src/styles/css/at-md-grape-violet.css +++ b/src/styles/css/at-md-grape-violet.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-honey-mustard.css b/src/styles/css/at-md-honey-mustard.css index 9011021dc..17f1af684 100644 --- a/src/styles/css/at-md-honey-mustard.css +++ b/src/styles/css/at-md-honey-mustard.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-hot-pink-fuchsia.css b/src/styles/css/at-md-hot-pink-fuchsia.css index cc9241630..32731a052 100644 --- a/src/styles/css/at-md-hot-pink-fuchsia.css +++ b/src/styles/css/at-md-hot-pink-fuchsia.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-hot-pink-violetred.css b/src/styles/css/at-md-hot-pink-violetred.css index 85aa2b504..946b0a093 100644 --- a/src/styles/css/at-md-hot-pink-violetred.css +++ b/src/styles/css/at-md-hot-pink-violetred.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-indianred-salmon.css b/src/styles/css/at-md-indianred-salmon.css index 33d8ba86b..39324a351 100644 --- a/src/styles/css/at-md-indianred-salmon.css +++ b/src/styles/css/at-md-indianred-salmon.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-indigo-darkviolet.css b/src/styles/css/at-md-indigo-darkviolet.css index 138257943..4b44528b0 100644 --- a/src/styles/css/at-md-indigo-darkviolet.css +++ b/src/styles/css/at-md-indigo-darkviolet.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-indigo-slateblue.css b/src/styles/css/at-md-indigo-slateblue.css index cbfad16f9..b1c31ec55 100644 --- a/src/styles/css/at-md-indigo-slateblue.css +++ b/src/styles/css/at-md-indigo-slateblue.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-indigo.css b/src/styles/css/at-md-indigo.css index 82fcd575f..ccf5bda2e 100644 --- a/src/styles/css/at-md-indigo.css +++ b/src/styles/css/at-md-indigo.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-jungle-mint.css b/src/styles/css/at-md-jungle-mint.css index e10550617..c120cc306 100644 --- a/src/styles/css/at-md-jungle-mint.css +++ b/src/styles/css/at-md-jungle-mint.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-mahogany-barny-red.css b/src/styles/css/at-md-mahogany-barny-red.css index 578e0633d..61e242dca 100644 --- a/src/styles/css/at-md-mahogany-barny-red.css +++ b/src/styles/css/at-md-mahogany-barny-red.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-mauve-orchid.css b/src/styles/css/at-md-mauve-orchid.css index 7a480ae21..4610375b7 100644 --- a/src/styles/css/at-md-mauve-orchid.css +++ b/src/styles/css/at-md-mauve-orchid.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-maya.css b/src/styles/css/at-md-maya.css index 0f2fee9b2..359d75eb8 100644 --- a/src/styles/css/at-md-maya.css +++ b/src/styles/css/at-md-maya.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-mediumblue-deepskyblue.css b/src/styles/css/at-md-mediumblue-deepskyblue.css index a23420230..e87afcbd4 100644 --- a/src/styles/css/at-md-mediumblue-deepskyblue.css +++ b/src/styles/css/at-md-mediumblue-deepskyblue.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-mediumblue-slateblue.css b/src/styles/css/at-md-mediumblue-slateblue.css index d2e735057..5e9328920 100644 --- a/src/styles/css/at-md-mediumblue-slateblue.css +++ b/src/styles/css/at-md-mediumblue-slateblue.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-mediumvioletred-hotpink.css b/src/styles/css/at-md-mediumvioletred-hotpink.css index 911e1b804..65f30c9db 100644 --- a/src/styles/css/at-md-mediumvioletred-hotpink.css +++ b/src/styles/css/at-md-mediumvioletred-hotpink.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-navy-egyptian.css b/src/styles/css/at-md-navy-egyptian.css index 22d143eb5..c2c6bef54 100644 --- a/src/styles/css/at-md-navy-egyptian.css +++ b/src/styles/css/at-md-navy-egyptian.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-navy-royalblue.css b/src/styles/css/at-md-navy-royalblue.css index 65e909e67..222e99ba1 100644 --- a/src/styles/css/at-md-navy-royalblue.css +++ b/src/styles/css/at-md-navy-royalblue.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-orangered-tomato.css b/src/styles/css/at-md-orangered-tomato.css index 6e888455a..9492f1edf 100644 --- a/src/styles/css/at-md-orangered-tomato.css +++ b/src/styles/css/at-md-orangered-tomato.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-pineapple-flaxen.css b/src/styles/css/at-md-pineapple-flaxen.css index 33fbbcfd9..180dd85fb 100644 --- a/src/styles/css/at-md-pineapple-flaxen.css +++ b/src/styles/css/at-md-pineapple-flaxen.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-pumpkin-fire.css b/src/styles/css/at-md-pumpkin-fire.css index 5341a0e47..8dd5e4ccf 100644 --- a/src/styles/css/at-md-pumpkin-fire.css +++ b/src/styles/css/at-md-pumpkin-fire.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-rasberry-sangria.css b/src/styles/css/at-md-rasberry-sangria.css index 4edd6b957..fe1da540e 100644 --- a/src/styles/css/at-md-rasberry-sangria.css +++ b/src/styles/css/at-md-rasberry-sangria.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-rebeccapurple-orchid.css b/src/styles/css/at-md-rebeccapurple-orchid.css index 110f4019f..ed0b11b75 100644 --- a/src/styles/css/at-md-rebeccapurple-orchid.css +++ b/src/styles/css/at-md-rebeccapurple-orchid.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-red-maroon.css b/src/styles/css/at-md-red-maroon.css index 0a79ce46e..9565309a6 100644 --- a/src/styles/css/at-md-red-maroon.css +++ b/src/styles/css/at-md-red-maroon.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-royalblue-dodgerblue.css b/src/styles/css/at-md-royalblue-dodgerblue.css index 92db1d4dc..391b67f77 100644 --- a/src/styles/css/at-md-royalblue-dodgerblue.css +++ b/src/styles/css/at-md-royalblue-dodgerblue.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-sacramento-jade.css b/src/styles/css/at-md-sacramento-jade.css index a72884ab4..fb705f3de 100644 --- a/src/styles/css/at-md-sacramento-jade.css +++ b/src/styles/css/at-md-sacramento-jade.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-saddlebrown-peru.css b/src/styles/css/at-md-saddlebrown-peru.css index dd586c3ca..9f791ff21 100644 --- a/src/styles/css/at-md-saddlebrown-peru.css +++ b/src/styles/css/at-md-saddlebrown-peru.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-sienna-rosybrown.css b/src/styles/css/at-md-sienna-rosybrown.css index cd5f3ad71..ee702a0fc 100644 --- a/src/styles/css/at-md-sienna-rosybrown.css +++ b/src/styles/css/at-md-sienna-rosybrown.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-tronbone-royal.css b/src/styles/css/at-md-tronbone-royal.css index 078334625..83073fba2 100644 --- a/src/styles/css/at-md-tronbone-royal.css +++ b/src/styles/css/at-md-tronbone-royal.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-yale-azure.css b/src/styles/css/at-md-yale-azure.css index c181eb4e5..7224b5474 100644 --- a/src/styles/css/at-md-yale-azure.css +++ b/src/styles/css/at-md-yale-azure.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-z-flag-bahamas.css b/src/styles/css/at-md-z-flag-bahamas.css index 84d979cc1..611686d48 100644 --- a/src/styles/css/at-md-z-flag-bahamas.css +++ b/src/styles/css/at-md-z-flag-bahamas.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-z-flag-france.css b/src/styles/css/at-md-z-flag-france.css index 372960c6a..0a562dbff 100644 --- a/src/styles/css/at-md-z-flag-france.css +++ b/src/styles/css/at-md-z-flag-france.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-z-flag-germany.css b/src/styles/css/at-md-z-flag-germany.css index 583532026..4fc3bd14f 100644 --- a/src/styles/css/at-md-z-flag-germany.css +++ b/src/styles/css/at-md-z-flag-germany.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-z-flag-india.css b/src/styles/css/at-md-z-flag-india.css index cc217a222..67564725e 100644 --- a/src/styles/css/at-md-z-flag-india.css +++ b/src/styles/css/at-md-z-flag-india.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-z-flag-italy.css b/src/styles/css/at-md-z-flag-italy.css index 414bba328..21d47dd70 100644 --- a/src/styles/css/at-md-z-flag-italy.css +++ b/src/styles/css/at-md-z-flag-italy.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-z-flag-japan.css b/src/styles/css/at-md-z-flag-japan.css index 308304016..511a42ff5 100644 --- a/src/styles/css/at-md-z-flag-japan.css +++ b/src/styles/css/at-md-z-flag-japan.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox diff --git a/src/styles/css/at-md-z-flag-usa.css b/src/styles/css/at-md-z-flag-usa.css index 6355b4632..a3dabbe54 100644 --- a/src/styles/css/at-md-z-flag-usa.css +++ b/src/styles/css/at-md-z-flag-usa.css @@ -303,7 +303,6 @@ Spin animation for .loading-mask::after transform: rotate(359deg); } } label { display: inline-block; - margin-top: 5px; max-width: 100%; font-size: 14px; font-weight: 500; } @@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { height: inherit; } .topnavmainbar-mobile { - flex-direction: column; } + flex-direction: column; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } .topnavmainbaritems { display: flex; @@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel { -webkit-transform-origin: 0 0; transform-origin: 0 0; } +.mobileModeNav { + position: relative !important; + width: 100% !important; + box-shadow: none !important; + height: 250px !important; + overflow-y: auto !important; } + /**************************************************************************** Component Name : Paginator Version : Amexio v4.0 onwards @@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel { overflow: auto; } .nav-badge { - margin-left: 10px; display: inline-block; min-width: 10px; padding: 3px 7px; @@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel { background-color: var(--componentActiveBGColor); color: var(--componentActiveFontColor); } +.accordion-transparent:focus, .accordion-transparent:hover { + background-color: var(--componentHoverBGColor); + color: var(--componentActiveFontColor); } + .accordion:after { color: #dc143c; } @@ -8084,6 +8096,9 @@ fieldset { height: 96%; margin-top: 5%; } +.amexio-root-window-content { + position: relative; } + .amexio-root-window-content > * { padding: 10px 16px; } @@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item { top: 0; left: 0; } +.amexio-root-window-content-ce { + position: relative; } + .amexio-root-window-content-ce { display: flex; flex-direction: column; @@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item { flex-direction: row; align-items: center; position: relative; - z-index: 2; } + z-index: 0; } .creative-header .creative-header-div { height: auto; } @@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item { box-shadow: none; } /** creative card - Structure CSS **/ -.card-container-ce-main { +.card-container-ce-main1 { position: relative; height: 100%; } @@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item { background-color: var(--componentHoverBGColor); color: var(--componentFontColor); } +.flip-card { + background-color: transparent; + width: 300px; + height: 300px; + perspective: 1000px; } + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); } + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; } + +/* dn */ +/* dn */ +.flip-card-back { + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + transform: rotateY(180deg); } + +.maincontainer { + position: relative; + /* width: 250px; + height: 320px; */ + background: none; + /* top: 50%; + left: 50%; */ + /* transform: translate(-50%, -50%); */ } + +.card-container-ce-main { + /* position: relative; */ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: all 0.8s ease; } + +.back { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + overflow: hidden; + background-color: var(--componentHoverBGColor); + color: var(--componentFontColor); + text-align: center; + transform: rotateY(180deg); } + +.card-container-ce-main:hover { + transform: rotateY(180deg); } + /**************************************************************************** Component Name : Creative Menus Version : Amexio v5.12 onwards *****************************************************************************/ /** creative card - var CSS **/ /** creative card - Visual CSS **/ +.bmenu1 a { + color: transparent; + text-shadow: 0px 0px 5px black; } + +.bmenu1 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu2 a { + color: transparent; + text-shadow: 0px 0px 6px black; } + +.bmenu2 a:hover { + text-shadow: 0px 0px 1px var(--componentHeaderBGColor); } + +.bmenu3 a { + text-shadow: 0px 0px 4px black; } + +.bmenu3 a:hover { + color: var(--componentHoverFontColor); + text-shadow: 0px 0px 1px black; } + +.bmenu4 a { + color: transparent; + text-shadow: 0px 0px 3px black; } + +.bmenu4 a:hover { + color: var(--componentHoverFontColor); + background: var(--componentHoverBGColor); } + +.bmenu4 a:hover { + text-shadow: none; } + +/** creative card - Structure CSS **/ .textLeftPosition { width: max-content; - padding-left: 3%; - float: left; + display: grid; + justify-content: center; position: relative; } .textRightPosition { width: max-content; - padding-right: 7%; + text-align: right; float: right; position: relative; } .textCenterPosition { text-align: center; position: relative; - padding-left: 30%; - width: max-content; } + width: 100%; } .bmenu { padding: 0px; @@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item { position: relative; } .bmenu1 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 5px black; letter-spacing: 1px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; @@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item { text-decoration: none; } .bmenu1 a:hover { - /* color: black; */ - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); padding-left: 10px; } .bmenu2 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 6px black; letter-spacing: 1px; -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item { transition: all 0.6s linear; } .bmenu2 a:hover { - text-shadow: 0px 0px 1px var(--componentHeaderBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); @@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item { transform: scale(1); } .bmenu3 a { - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 4px black; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.2s ease-in-out; } .bmenu3 a:hover { - color: var(--componentHoverFontColor); - text-shadow: 0px 0px 1px black; padding-left: 10px; } .bmenu4 a { white-space: nowrap; - color: transparent; display: block; text-transform: uppercase; - text-shadow: 0px 0px 3px black; letter-spacing: 1px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); @@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item { transition: all 0.4s linear; } .bmenu4 a:hover { - text-shadow: none; - color: var(--componentHoverFontColor); - background: var(--componentHoverBGColor); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } -/** creative card - Structure CSS **/ /** Initialze Animation variables ------------ */ /**************************************************************************** Animation CSS for Checkbox