diff options
Diffstat (limited to 'components/styles/header.css')
| -rw-r--r-- | components/styles/header.css | 27 |
1 files changed, 8 insertions, 19 deletions
diff --git a/components/styles/header.css b/components/styles/header.css index 845168a..0ca9a35 100644 --- a/components/styles/header.css +++ b/components/styles/header.css @@ -11,7 +11,7 @@ header { align-items: center; text-align: center; z-index: 1000; - background-color: #000; + background-color: rgba(0,0,0,0.3); border-radius: 32px; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ @@ -36,13 +36,11 @@ header { text-decoration: none; margin-left: 10mm; margin-right: 10mm; - padding-top: 5mm; + padding-top: 4mm; /* padding-bottom: 3mm; */ border-radius: 32px; color: #F4E8C1; transition: all .3s; - -webkit-user-select: none; /* Safari */ - -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } @@ -59,7 +57,7 @@ header { .navBar a::after { content: ''; - position: fixed; + position: absolute; left: 0; bottom: 0; width: 100%; @@ -67,20 +65,15 @@ header { background: rgba(128, 128, 128, 0.2); border-radius: 1mm; transform: scaleX(0); - -webkit-transition: all 0.3s; transition: all 0.3s; } .navBar a:hover::after { - transform: scaleX(1.1); + position: absolute; + transform: scaleX(1); } .navBar a:hover { - /* background: rgba(255, 255, 255, 0.2); */ - /* outline: ridge rgba(128, 128, 128, .6); */ - /* -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); */ - -webkit-transition: all 1s; transition: all 1s } @@ -100,18 +93,15 @@ header { .navBar:hover, header:hover, #navBarHeader:hover -/* #navBarHeader:active */ { transform: scale(1.005); - /* -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); */ transition: all 0.5s } header:active, #navBarHeader:active, .navBar:active { - transform: scale(1.01); + transform: scale(1.01) /* transition: transform 700ms; */ } @@ -126,8 +116,7 @@ header, header.minimizedIsland { opacity: 0; scale: 0; - -webkit-animation-name: minimizeIsland; - animation-name: minimizeIsland; + transform: translateY(-100%); animation-fill-mode: forwards; - transition: all 0.3s + transition: all 3s }
\ No newline at end of file |
