balaji
/
GCC_Officer_Portal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Base Head Bell & Ribbon CSS 

Bell Notification Animation and Ribbon extra CSS added
main
Balaji 3 years ago
parent
c7fd787de5
commit
e5894a8383
1 changed files with 487 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 487
      src/main/resources/templates/fragments/modules/base/head.html

487
src/main/resources/templates/fragments/modules/base/head.html
View File

@ -42,6 +42,108 @@
<link rel="stylesheet" href="dist/css/theme.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<style>
.text-center {
text-align: center !important;
}
/* Define the keyframes for the ringing animation */
.bell{
padding-top: 12px;
display:block;
font-size: 40px;
/*margin:50px auto 0;*/
/*color: #9e9e9e;*/
-webkit-animation: ring 4s .7s ease-in-out infinite;
-webkit-transform-origin: 50% 4px;
-moz-animation: ring 4s .7s ease-in-out infinite;
-moz-transform-origin: 50% 4px;
animation: ring 4s .7s ease-in-out infinite;
transform-origin: 50% 4px;
}
@-webkit-keyframes ring {
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ring {
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}
@keyframes ring {
0% { transform: rotate(0); }
1% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }
}
.showInputValue {
padding: 0.375rem 0.75rem !important;
margin-bottom: 0.5rem !important;
@ -142,5 +244,390 @@
.link{
color:#0d6efd;
}
.swal-title-custom {
font-size: 15px; /* Change the font size as needed */
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
::file-selector-button {
font: inherit;
-webkit-appearance: button;
}
.form-control[type=file] {
overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
cursor: pointer;
}
.form-control::-webkit-file-upload-button {
padding: 0.375rem 0.75rem;
margin: -0.375rem -0.75rem;
min-height: 40px;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
color: #343a40;
background-color: #edf0f7;
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: 1px;
border-radius: 0;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control::file-selector-button {
padding: 0.375rem 0.75rem;
margin: -0.375rem -0.75rem;
min-height: 40px;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
color: #343a40;
background-color: #edf0f7;
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: 1px;
border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.form-control::-webkit-file-upload-button {
-webkit-transition: none;
transition: none;
}
.form-control::file-selector-button {
transition: none;
}
}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
background-color: #e1e4eb;
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: #e1e4eb;
}
/* For print */
@media print {
.wrapper .page-wrap .main-content {
padding: 0 !important;
background-color: #F6F7FB;
min-height: 0 !important;
margin-top: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.header-top,
.app-sidebar,
.page-overlay,
.page-loader,
.page-header,
.footer,
.sidebar,
.side-overlay,
.block-options {
padding: 0 !important;
margin: 0 !important;
display: none !important;
}
.block {
box-shadow: none !important;
}
/*
#ack1table{
margin-top:50px !important;
margin-right:100px !important;
margin-left:100px !important;
}
#ack2table{
margin-top:50px !important;
margin-right:100px !important;
margin-left:100px !important;
}
*/
.ack {
height: 100%; /* Set height to 100% */
}
.ack-container {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100%; /* Set height to 100% */
}
#ack1table {
width: 70% !important; /* Set width */
page-break-before: auto; /* Avoid page breaks after ack1table */
}
#ack2table {
width: 70% !important; /* Set width */
page-break-before: auto; /* Avoid page breaks after ack1table */
}
.printack2{
margin-top:250px;
}
.print_no{
display: none !important;
}
}
.ack {
height: 100%; /* Set height to 100% */
}
.ack-container {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100%; /* Set height to 100% */
}
#ack1table {
border: 1px solid black; /* Add border */
width: 99%; /* Set width */
height: 100%; /* Set height */
}
#ack2table {
border: 1px solid black; /* Add border */
width: 99%; /* Set width */
height: 100%; /* Set height */
}
</style>
<style>
.ribbon1 {
position: absolute;
top: -6.1px;
right: 10px;
}
.ribbon1:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 53px solid transparent;
border-right: 53px solid transparent;
border-top: 10px solid #F8463F;
}
.ribbon1 span {
position: relative;
display: block;
text-align: center;
background: #F8463F;
font-size: 14px;
line-height: 1;
padding: 12px 8px 10px;
border-top-right-radius: 8px;
width: 90px;
}
.ribbon1 span:before, .ribbon1 span:after {
position: absolute;
content: "";
}
.ribbon1 span:before {
height: 6px;
width: 6px;
left: -6px;
top: 0;
background: #F8463F;
}
.ribbon1 span:after {
height: 6px;
width: 8px;
left: -8px;
top: 0;
border-radius: 8px 8px 0 0;
background: #C02031;
}
.ribbon2 {
width: 60px;
padding: 10px 0;
position: absolute;
top: -6px;
left: 25px;
text-align: center;
border-top-left-radius: 3px;
background: #F47530;
}
.ribbon2:before {
height: 0;
width: 0;
right: -5.5px;
top: 0.1px;
border-bottom: 6px solid #8D5A20;
border-right: 6px solid transparent;
}
.ribbon2:before, .ribbon2:after {
content: "";
position: absolute;
}
.ribbon2:after {
height: 0;
width: 0;
bottom: -29.5px;
left: 0;
border-left: 30px solid #F47530;
border-right: 30px solid #F47530;
border-bottom: 30px solid transparent;
}
.ribbon3 {
width: 150px;
height: 50px;
line-height: 50px;
padding-left: 15px;
position: absolute;
left: -8px;
top: 20px;
background: #59324C;
}
.ribbon3:before, .ribbon3:after {
content: "";
position: absolute;
}
.ribbon3:before {
height: 0;
width: 0;
top: -8.5px;
left: 0.1px;
border-bottom: 9px solid black;
border-left: 9px solid transparent;
}
.ribbon3:after {
height: 0;
width: 0;
right: -14.5px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid #59324C;
}
.ribbon4 {
position: absolute;
top: 15px;
padding: 8px 10px;
background: #00B3ED;
box-shadow: -1px 2px 3px rgba(0,0,0,.3);
}
.ribbon4:before, .ribbon4:after {
content: "";
position: absolute;
}
.ribbon4:before {
width: 7px;
height: 100%;
top: 0;
left: -6.5px;
padding: 0 0 7px;
background: inherit;
border-radius: 5px 0 0 5px;
}
.ribbon4:after {
width: 5px;
height: 5px;
bottom: -5px;
left: -4.5px;
background: lightblue;
border-radius: 5px 0 0 5px;
}
.ribbon5 {
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
background: #EDBA19;
position: relative;
top: 20px;
}
.ribbon5:before, .ribbon5:after {
content: "";
position: absolute;
}
.ribbon5:before {
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-top: 10px solid #cd8d11;
border-left: 10px solid transparent;
}
.ribbon5:after {
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-top: 10px solid #cd8d11;
border-right: 10px solid transparent;
}
.wrap {
width: 100%;
height: 188px;
position: absolute;
top: -8px;
left: 8px;
overflow: hidden;
}
.wrap:before, .wrap:after {
content: "";
position: absolute;
}
.wrap:before {
width: 40px;
height: 8px;
right: 100px;
background: #4D6530;
border-radius: 8px 8px 0px 0px;
}
.wrap:after {
width: 8px;
height: 40px;
right: 0px;
top: 100px;
background: #4D6530;
border-radius: 0px 8px 8px 0px;
}
.ribbon6 {
width: 200px;
height: 40px;
line-height: 40px;
position: absolute;
top: 30px;
right: -50px;
z-index: 2;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: 1px dashed;
box-shadow:0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0,0,0,0.6);
background: #57DD43;
text-align: center;
}
@media (min-width: 500px) {
.ribbons-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ribbon {
width: 48%;
}
}
.cursure_poiter{
cursor: pointer;
}
</style>
</head>
Write Preview
Loading…
Cancel
Save