Add general search and refactor header
This commit is contained in:
Marcel
@@ -1,12 +1,281 @@
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
justify-content: normal;
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px auto 50px 50px;
|
||||
grid-template-areas: "menuButton . center firstAction secondAction";
|
||||
grid-gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
margin-left: auto;
|
||||
margin-top: 17px;
|
||||
.navbar.loggedIn {
|
||||
grid-template-columns: 180px 50px 50px auto 50px 50px 180px;
|
||||
grid-template-areas: "menuButton . . center firstAction secondAction thirdAction";
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container {
|
||||
grid-area: center;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container .navbar-logo {
|
||||
position: relative;
|
||||
min-width: 240px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
transition: opacity .25s;
|
||||
}
|
||||
|
||||
.navbar.search-open .navbar-logo-container .navbar-logo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container .navbar-logo-svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
-o-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container .navbar-logo-title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
transform: translate(calc(-50% + 100px), -50%);
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
font-size: 24px;
|
||||
text-transform: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .navbar-action {
|
||||
height: auto;
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar .navbar-action:nth-child(4) {
|
||||
grid-area: firstAction;
|
||||
}
|
||||
|
||||
.navbar .navbar-action:nth-child(5) {
|
||||
grid-area: secondAction;
|
||||
}
|
||||
|
||||
.navbar .navbar-action:nth-child(6) {
|
||||
grid-area: thirdAction;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn:active,
|
||||
.navbar .navbar-action-btn:focus {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn:hover {
|
||||
color: #ddd !important;
|
||||
}
|
||||
|
||||
.navbar-action-btn #login-icon .z {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.navbar-action-btn:hover #logo-icon .z {
|
||||
fill: #ddd;
|
||||
}
|
||||
|
||||
.navbar-action-btn:hover #login-icon .y {
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
-ms-transition: all .2s;
|
||||
-o-transition: all .2s;
|
||||
transition: all .2s;
|
||||
transform: translate(0, 0);
|
||||
animation: arrow-pointing 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes arrow-pointing {
|
||||
50% {
|
||||
-webkit-transform: translate(-140px, 0);
|
||||
-moz-transform: translate(-140px, 0);
|
||||
-ms-transform: translate(-140px, 0);
|
||||
-o-transform: translate(-140px, 0);
|
||||
transform: translate(-140px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Logo animation
|
||||
*/
|
||||
|
||||
.navbar-logo svg, .navbar-logo svg .a {
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .b {
|
||||
-webkit-transform: translateX(-100px);
|
||||
-moz-transform: translateX(-100px);
|
||||
-ms-transform: translateX(-100px);
|
||||
-o-transform: translateX(-100px);
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .c {
|
||||
-webkit-transform: translateX(100px);
|
||||
-moz-transform: translateX(100px);
|
||||
-ms-transform: translateX(100px);
|
||||
-o-transform: translateX(100px);
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .d {
|
||||
animation: bouncing 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes bouncing {
|
||||
14% {
|
||||
transform: translate(90px, 10px);
|
||||
}
|
||||
28% {
|
||||
transform: translate(-45px, 50px);
|
||||
}
|
||||
42% {
|
||||
transform: translate(-22px, -76px);
|
||||
}
|
||||
56% {
|
||||
transform: translate(96px, -29px);
|
||||
}
|
||||
70% {
|
||||
transform: translate(-63px, 34px);
|
||||
}
|
||||
84% {
|
||||
transform: translate(-40px, -56px);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-logo:hover .navbar-logo-title {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(calc(-50% + 55px), -50%);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .navbar-logo-svg {
|
||||
transform: translateX(calc(-50% - 55px));
|
||||
}
|
||||
|
||||
#searchButton > i.fa {
|
||||
transform-origin: 25% 25%;
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
#searchButton:hover i.fa {
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
-moz-transform: rotateZ(360deg);
|
||||
-ms-transform: rotateZ(360deg);
|
||||
-o-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
.navbar .navbar-search {
|
||||
pointer-events: none;
|
||||
grid-area: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navbar .navbar-search input.form-control {
|
||||
width: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
transition: all .25s;
|
||||
opacity: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navbar.search-open .navbar-search {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.navbar.search-open .navbar-search input.form-control {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#userMenuButton {
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
background: white;
|
||||
color: #444 !important;
|
||||
border-radius: 25px;
|
||||
padding: 4px 25px 4px 4px;
|
||||
}
|
||||
|
||||
#userMenuButton img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.navbar {
|
||||
grid-template-columns: 50px 50px 50px auto 50px 50px 50px;
|
||||
}
|
||||
|
||||
/*.navbar-content {*/
|
||||
/*transform: scale(.75) translateX(25px);*/
|
||||
/*margin-top: -8px;*/
|
||||
/*}*/
|
||||
|
||||
#userMenuButton {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#userMenuButton::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#userMenuButton text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*.navbar {*/
|
||||
/*height: 60px;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content {*/
|
||||
/*margin-left: auto;*/
|
||||
/*margin-top: 17px;*/
|
||||
/*}*/
|
||||
|
||||
.menu-icon span, .menu-icon:before, .menu-icon:after, .menu-icon span:before, .menu-icon span:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -98,65 +367,73 @@
|
||||
}
|
||||
|
||||
/* Navbar brand svg */
|
||||
.navbar-brand {
|
||||
padding: 7px;
|
||||
transition: padding 0.3s;
|
||||
}
|
||||
/*.navbar-brand {*/
|
||||
/*padding: 7px;*/
|
||||
/*transition: padding 0.3s;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-brand svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 45px;
|
||||
}
|
||||
/*.navbar-brand svg {*/
|
||||
/*position: absolute;*/
|
||||
/*left: 50%;*/
|
||||
/*transform: translateX(-50%);*/
|
||||
/*height: 45px;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content {
|
||||
height: 60px;
|
||||
margin-top: 0;
|
||||
}
|
||||
/*.navbar-content {*/
|
||||
/*height: 60px;*/
|
||||
/*margin-top: 0;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul {
|
||||
list-style: none;
|
||||
cursor: default;
|
||||
height: 60px;
|
||||
margin: 0;
|
||||
}
|
||||
/*.navbar-content ul {*/
|
||||
/*display: grid;*/
|
||||
/*grid-template-columns: 1fr 2fr auto;*/
|
||||
/*align-items: center;*/
|
||||
/*grid-gap: 10px;*/
|
||||
/*list-style: none;*/
|
||||
/*cursor: default;*/
|
||||
/*height: 60px;*/
|
||||
/*margin: 0;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li {
|
||||
display: inline-block;
|
||||
font-size: 30px;
|
||||
margin: 0 10px;
|
||||
height: 60px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/*.navbar-content ul li {*/
|
||||
/*display: block;*/
|
||||
/*height: auto;*/
|
||||
/*font-size: 30px;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li a.navbar-link {
|
||||
display: block;
|
||||
height: 48px;
|
||||
margin: 6px 0;
|
||||
color: #fff !important;
|
||||
}
|
||||
/*.navbar-content ul li a.navbar-link {*/
|
||||
/*display: block;*/
|
||||
/*height: auto;*/
|
||||
/*color: #fff !important;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li #notificationMenuButton {
|
||||
height: 30px;
|
||||
margin: 9px -14px 9px 0;
|
||||
}
|
||||
/*.navbar-content ul li #notificationMenuButton {*/
|
||||
/*height: 30px;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li:hover a.navbar-link,
|
||||
.navbar-content ul li:active a.navbar-link,
|
||||
.navbar-content ul li:focus a.navbar-link {
|
||||
color: #ddd !important;
|
||||
}
|
||||
/*.navbar-content ul li #notificationMenuButton .fa {*/
|
||||
/*display: block;*/
|
||||
/*margin: 0 auto;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li .badge {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
transform: translate(-50%, -75%);
|
||||
}
|
||||
|
||||
.navbar-content ul li .badge:empty {
|
||||
opacity: 0;
|
||||
}
|
||||
/*.navbar-content ul li:hover a.navbar-link,*/
|
||||
/*.navbar-content ul li:active a.navbar-link,*/
|
||||
/*.navbar-content ul li:focus a.navbar-link {*/
|
||||
/*color: #ddd !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li .badge {*/
|
||||
/*position: absolute;*/
|
||||
/*top: 0;*/
|
||||
/*right: 0;*/
|
||||
/*font-size: 14px;*/
|
||||
/*transform: translate(25%, -50%);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li .badge:empty {*/
|
||||
/*opacity: 0;*/
|
||||
/*}*/
|
||||
|
||||
#notificationMenu {
|
||||
width: 360px;
|
||||
@@ -179,26 +456,7 @@
|
||||
background-color: #2272ff;
|
||||
}
|
||||
|
||||
#userMenuButton {
|
||||
font-size: 18px;
|
||||
background: white;
|
||||
color: #444 !important;
|
||||
border-radius: 25px;
|
||||
vertical-align: middle;
|
||||
padding: 4px 25px 5px 0;
|
||||
}
|
||||
|
||||
#userMenuButton img {
|
||||
height: 100%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.navbar-content {
|
||||
transform: scale(.75) translateX(25px);
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
top: 8px;
|
||||
@@ -294,33 +552,7 @@
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#login-icon .z {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.navbar-link:hover #logo-icon .z {
|
||||
fill: #ddd;
|
||||
}
|
||||
|
||||
.navbar-link:hover #login-icon .y {
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
-ms-transition: all .2s;
|
||||
-o-transition: all .2s;
|
||||
transition: all .2s;
|
||||
transform: translate(0, 0);
|
||||
animation: arrow-pointing 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes arrow-pointing {
|
||||
50% {
|
||||
-webkit-transform: translate(-140px, 0);
|
||||
-moz-transform: translate(-140px, 0);
|
||||
-ms-transform: translate(-140px, 0);
|
||||
-o-transform: translate(-140px, 0);
|
||||
transform: translate(-140px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link svg, .navbar-link i {
|
||||
display: block;
|
||||
|
||||
@@ -62,7 +62,7 @@ body > section {
|
||||
}
|
||||
|
||||
.primary a:not(.btn):hover, .secondary a:not(.btn):hover, .section-red a:not(.btn):hover, .section-green a:not(.btn):hover, .section-orange a:not(.btn):hover {
|
||||
color: rgba(255,255,255,.5) !important;
|
||||
color: rgba(255, 255, 255, .5) !important;
|
||||
}
|
||||
|
||||
.primary .btn.btn-default, .secondary .btn.btn-default, .section-red .btn.btn-default, .section-green .btn.btn-default, .section-orange .btn.btn-default {
|
||||
@@ -137,7 +137,7 @@ body > section {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: inset 0 0 20px 5px rgba(0,0,0,.18);
|
||||
box-shadow: inset 0 0 20px 5px rgba(0, 0, 0, .18);
|
||||
}
|
||||
|
||||
.embed-container {
|
||||
@@ -312,6 +312,132 @@ ul.tag-cloud li {
|
||||
background-color: #F72754;
|
||||
}
|
||||
|
||||
.loadingSpinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #2272ff url('/assets/images/logo_little_transparent.png');
|
||||
background-size: cover;
|
||||
margin: 40px auto;
|
||||
-webkit-animation: loadingAnimation 2.4s infinite ease-in-out;
|
||||
-o-animation: loadingAnimation 2.4s infinite ease-in-out;
|
||||
animation: loadingAnimation 2.4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loadingSpinner.failed {
|
||||
background-color: #F72754;
|
||||
animation: loadingAnimationFailed .6s;
|
||||
}
|
||||
|
||||
.loadingSpinner.success {
|
||||
animation: loadingAnimationSucceeded 1.2s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimationSucceeded {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
50% {
|
||||
|
||||
transform: none;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateY(-10px);
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimationFailed {
|
||||
0% {
|
||||
transform: none;
|
||||
|
||||
}
|
||||
|
||||
16% {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
32% {
|
||||
transform: translateX(15px);
|
||||
|
||||
}
|
||||
|
||||
48% {
|
||||
transform: translateX(-15px);
|
||||
|
||||
}
|
||||
|
||||
64% {
|
||||
transform: translateX(15px);
|
||||
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(-15px);
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
color: #fff;
|
||||
@@ -468,7 +594,6 @@ ul.social > li > a:hover {
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.img {
|
||||
margin: 2em auto;
|
||||
width: 100%;
|
||||
@@ -1049,7 +1174,6 @@ blockquote {
|
||||
}
|
||||
|
||||
|
||||
|
||||
#downloadSlider img {
|
||||
max-height: 240px;
|
||||
}
|
||||
@@ -1213,7 +1337,7 @@ ul#downloadSlider a.active .overlay {
|
||||
}
|
||||
|
||||
.comment-list .comment-well .action-btns .action-btn:last-child,
|
||||
.postFullviewModal .action-btns .action-btn:last-child{
|
||||
.postFullviewModal .action-btns .action-btn:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@@ -1481,6 +1605,82 @@ ul#downloadSlider a.active .overlay {
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
/*.navbar-search {*/
|
||||
/*position: absolute;*/
|
||||
/*width: 38px;*/
|
||||
/*height: 38px;*/
|
||||
/*margin: 11px 0;*/
|
||||
/*top: 0;*/
|
||||
/*left: 84%;*/
|
||||
/*transform: translateX(-100%) translateX(-38px);*/
|
||||
/*!*transform: translateX(-100%);*!*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search.active {*/
|
||||
/*width: 77%;*/
|
||||
/*transform: translateX(-100%);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search.active {*/
|
||||
/*width: 77%;*/
|
||||
/*transform: translateX(-100%);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search .input-group {*/
|
||||
/*display: grid;*/
|
||||
/*grid-template-columns: calc(100% - 76px) 38px 38px;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search input {*/
|
||||
/*width: 100% !important;*/
|
||||
/*text-align: center;*/
|
||||
/*padding: 0;*/
|
||||
/*border: none;*/
|
||||
/*border-radius: 4px !important;*/
|
||||
/*opacity: 0;*/
|
||||
/*transform: scaleX(0);*/
|
||||
/*-webkit-transform-origin: 100% 50%;*/
|
||||
/*-moz-transform-origin: 100% 50%;*/
|
||||
/*-ms-transform-origin: 100% 50%;*/
|
||||
/*-o-transform-origin: 100% 50%;*/
|
||||
/*transform-origin: 100% 50%;*/
|
||||
/*transition: all .5s;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search.active input {*/
|
||||
/*transform: none;*/
|
||||
/*padding: .375rem .75rem;*/
|
||||
/*opacity: 1;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search button {*/
|
||||
/*width: 38px;*/
|
||||
/*padding: .375rem 0;*/
|
||||
/*border: none;*/
|
||||
/*background: none;*/
|
||||
/*color: #fff;*/
|
||||
/*transition: transform .25s;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search button:hover, .navbar-search button:active, .navbar-search button:focus {*/
|
||||
/*color: #fff !important;*/
|
||||
/*background: none !important;*/
|
||||
/*transform: scale(1.5);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search .btn-reset {*/
|
||||
/*!*display: none;*!*/
|
||||
/*pointer-events: none;*/
|
||||
/*opacity: 0;*/
|
||||
/*transition: transform .25s, opacity .25s;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search.active .btn-reset {*/
|
||||
/*!*display: inline;*!*/
|
||||
/*pointer-events: all;*/
|
||||
/*opacity: 1;*/
|
||||
/*}*/
|
||||
|
||||
.btn-floating {
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
@@ -1900,7 +2100,7 @@ ul#downloadSlider a.active .overlay {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
z-index: 1100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -1969,4 +2169,219 @@ ul#downloadSlider a.active .overlay {
|
||||
background-size: cover;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.video-container .video {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.video-container .video-controls {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-columns: 25px 25px 50px auto 50px 25px;
|
||||
grid-gap: 5px;
|
||||
bottom: 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: linear-gradient(0, rgba(0, 0, 0, .5), transparent);
|
||||
padding: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity .5s;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.video-container:hover .video-controls {
|
||||
opacity: 1;
|
||||
transition: opacity .25s;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-control-btn {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-volume-container {
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-volume-container:hover .video-volume {
|
||||
transform: rotateZ(-90deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.video-container .video-volume {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
padding: 5px 10px;
|
||||
height: 40px;
|
||||
width: 150px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
transform: rotateZ(-90deg) scaleX(0);
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
-moz-transform-origin: 0% 50%;
|
||||
-ms-transform-origin: 0% 50%;
|
||||
-o-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
transition: opacity .25s, transform .25s;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-time,
|
||||
.video-container .video-controls .video-length {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0px;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-webkit-slider-thumb {
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(13, 13, 13, 0.2);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus::-webkit-slider-runnable-track {
|
||||
background: rgba(26, 26, 26, 0.25);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0px;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(13, 13, 13, 0.2);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-track {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 0px;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-fill-upper {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 0px;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(13, 13, 13, 0.2);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus::-ms-fill-upper {
|
||||
background: rgba(26, 26, 26, 0.25);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-webkit-slider-thumb,
|
||||
.video-container .video-controls .video-seek-bar::-moz-range-thumb,
|
||||
.video-container .video-controls .video-seek-bar::-ms-thumb {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 100%;
|
||||
border: 0 !important;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user