Project-Pro/eng.vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New logo + animation

Browse Source
This commit is contained in:
Roman Pyrih
2025-11-21 15:10:58 +01:00
parent 607dcab830
commit 7b738bbe8e
4 changed files with 1844 additions and 1735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/style.css
View File

File diff suppressed because one or more lines are too long

2
layout/style-css/style.css.map
View File

File diff suppressed because one or more lines are too long

133
layout/style-scss/style.scss
View File

@@ -61,7 +61,7 @@ a {
position: relative;
&.parent {
>a {
> a {
@include respond-above(xs) {
pointer-events: none;
}
@@ -97,17 +97,17 @@ a {
.level-0 {
justify-content: space-between;
>li {
> li {
display: flex;
align-items: center;
>a {
> a {
color: $cTxtGray;
text-transform: uppercase;
}
&#link-8 {
>a {
> a {
color: $cTxtWhite;
font-weight: 800;
font-size: 23px;
@@ -618,6 +618,100 @@ header {
max-width: 150px;
}
}
.header-logo {
min-height: 52px;
min-width: 120px;
.box-logo-relative {
position: relative;
transform-style: preserve-3d;
width: 100%;
height: 100%;
.box-logo-absolute {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 52px;
object-fit: contain;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-animation: action-logo 4s linear infinite alternate;
-webkit-animation: action-logo 4s linear infinite alternate;
-ms-animation: none;
&.box-logo-absolute-front {
}
&.box-logo-absolute-back {
transform: rotateY(180deg);
-moz-animation: action-logo-back 4s linear infinite alternate;
-webkit-animation: action-logo-back 4s linear infinite alternate;
-ms-animation: none;
}
img {
width: 100%;
height: 52px;
object-fit: contain;
}
}
}
}
@keyframes action-logo {
0% {
transform: rotateY(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
40% {
transform: rotateY(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
61% {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
100% {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
@keyframes action-logo-back {
0% {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
40% {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
61% {
transform: rotateY(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
100% {
transform: rotateY(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
}
.header_right {
@@ -675,14 +769,14 @@ header {
li {
&.parent {
&:hover {
>a {
> a {
&::before {
width: calc(100% - 23px);
}
}
}
>a {
> a {
&::after {
content: url('/upload/filemanager/Icons/mini_arrow_bottom_new.svg');
display: inline-block;
@@ -698,7 +792,7 @@ header {
@include respond-below(md) {
li {
&.parent {
>a {
> a {
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -722,7 +816,7 @@ header {
li {
&.parent {
>a {
> a {
width: fit-content;
@include respond-above(md) {
@@ -732,7 +826,7 @@ header {
}
&:hover {
>a {
> a {
&::before {
width: 100%;
}
@@ -814,7 +908,7 @@ header {
padding-right: 15px;
}
>li {
> li {
position: relative;
@include respond-below(md) {
@@ -877,10 +971,10 @@ header {
display: none;
}
>li {
> li {
@include respond-above(md) {
&:hover {
>a {
> a {
&::after {
transform: rotate(-90deg);
}
@@ -924,7 +1018,7 @@ header {
}
}
>a {
> a {
padding: 5px 0;
}
@@ -1003,7 +1097,7 @@ header {
height: 400px;
}
>div {
> div {
width: 100%;
}
@@ -1272,7 +1366,7 @@ header {
background-color: $cSandDarker;
}
>.row {
> .row {
align-items: center;
}
@@ -1290,7 +1384,8 @@ header {
}
}
.col-right {}
.col-right {
}
@include respond-below(md) {
&::before {
@@ -2036,7 +2131,7 @@ header {
li {
a {
border: 1px solid #D4D4D4;
border: 1px solid #d4d4d4;
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -2057,11 +2152,11 @@ header {
top: -2px;
content: '';
display: flex;
background: url('/upload/filemanager/Icons/icon-file.svg') no-repeat center;
background: url('/upload/filemanager/Icons/icon-file.svg') no-repeat
center;
height: 20px;
width: 20px;
background-size: contain;
}
&:hover {

16
templates_user/components/NavMenu.php
View File

@@ -6,10 +6,24 @@
<div class="container">
<div class="header__wrapper">
<div class="header_left">
<a href="/">
<!-- <a href="/">
<img src="/upload/filemanager/Logos/logo-black.svg" alt="">
</a> -->
<div class="header-logo">
<div class="box-logo-relative">
<div class="box-logo-absolute box-logo-absolute-front">
<a href="/">
<img src="/upload/filemanager/Logos/VIDOK-logo-new.png" alt="logo">
</a>
</div>
<div class="box-logo-absolute box-logo-absolute-back">
<a href="/">
<img src="/upload/filemanager/Logos/VIDOK-COM_ENG.png" alt="logo">
</a>
</div>
</div>
</div>
</div>
<div class="header_right">
<nav id="advance_menu">
<ul class="lvl_1">