| | |
| | | --pre-bg-color: #f9f9fd; |
| | | --nav-text-color:#5a5a5a; |
| | | --tag-color: #424242; |
| | | transition: all .8s; |
| | | } |
| | | |
| | | html[data-theme='dark'] { |
| | |
| | | /*basic styles ends*/ |
| | | /*animation starts*/ |
| | | .animated { |
| | | transition: all .8s; |
| | | -webkit-animation-fill-mode: both; |
| | | -moz-animation-fill-mode: both; |
| | | -ms-animation-fill-mode: both; |
| | |
| | | } |
| | | 100% { |
| | | opacity: 1; |
| | | background-color: var(--bg-color); |
| | | -webkit-transform: translateY(0); |
| | | } |
| | | } |
| | |
| | | } |
| | | 100% { |
| | | opacity: 1; |
| | | background-color: var(--bg-color); |
| | | -moz-transform: translateY(0); |
| | | } |
| | | } |
| | |
| | | } |
| | | 100% { |
| | | opacity: 1; |
| | | background-color: var(--bg-color); |
| | | -o-transform: translateY(0); |
| | | } |
| | | } |
| | |
| | | } |
| | | 100% { |
| | | opacity: 1; |
| | | background-color: var(--bg-color); |
| | | transform: translateY(0); |
| | | } |
| | | } |
| | |
| | | background-size: cover; |
| | | background-color: var(--bg-color); |
| | | height: 100%; |
| | | transition: 0.8s; |
| | | top: 0; |
| | | left: 0; |
| | | position: fixed; |