feat: unify header bars and navigation
This commit is contained in:
parent
7061f8d64c
commit
958a55ff17
@ -10,7 +10,8 @@
|
||||
<script src="/static/js/conversion.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<header id="header">
|
||||
<a href="/"><img class="logo" src="/static/images/icon3.svg"></a>
|
||||
<h1>Media Conversion</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
@ -10,8 +10,8 @@
|
||||
<script src="/static/js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="/static/images/icon3.svg">
|
||||
<header id="header">
|
||||
<a href="/"><img class="logo" src="/static/images/icon3.svg"></a>
|
||||
<h1>Melies</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
@ -14,6 +14,10 @@
|
||||
<img src="/static/images/improve.svg">
|
||||
<img class="clicked" src="/static/images/improve_clicked.svg">
|
||||
</button>
|
||||
<header id="header">
|
||||
<a href="/"><img class="logo" src="/static/images/icon3.svg"></a>
|
||||
<h1>Metadata Editor</h1>
|
||||
</header>
|
||||
<header id="toolbar">
|
||||
<a href="/metadata/">Back</a>
|
||||
<button id="check-integrity">Check integrity</button>
|
||||
|
@ -10,7 +10,8 @@
|
||||
<script src="/static/js/metadata.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<header id="header">
|
||||
<a href="/"><img class="logo" src="/static/images/icon3.svg"></a>
|
||||
<h1>Metadata Editor</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
@ -1,3 +1,13 @@
|
||||
@keyframes moon-pulse {
|
||||
from {
|
||||
filter: drop-shadow(0px 0px 0px #e7d7a8);
|
||||
}
|
||||
|
||||
to {
|
||||
filter: drop-shadow(0px 0px 12px white);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
@ -29,19 +39,17 @@ header {
|
||||
gap: 0.8em;
|
||||
color: white;
|
||||
|
||||
a, button {
|
||||
padding: 0.4em 0.8em;
|
||||
border: none;
|
||||
color: black;
|
||||
background-color: #e4e4e4;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
text-decoration: none;
|
||||
border-radius: 0.2em;
|
||||
cursor: pointer;
|
||||
&#header {
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #dbdbdb;
|
||||
img.logo {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
object-fit: contain;
|
||||
|
||||
&:hover {
|
||||
animation: moon-pulse 2s alternate infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4,6 +4,27 @@ main {
|
||||
gap: 1.2em;
|
||||
}
|
||||
|
||||
header#toolbar {
|
||||
padding: 0.8em;
|
||||
background-color: #4b4b4b;
|
||||
|
||||
a, button {
|
||||
padding: 0.4em 0.8em;
|
||||
border: none;
|
||||
color: black;
|
||||
background-color: #e4e4e4;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
text-decoration: none;
|
||||
border-radius: 0.2em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-notifs {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
@ -1,12 +1,3 @@
|
||||
header {
|
||||
align-items: center;
|
||||
img {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
#pages {
|
||||
display: grid;
|
||||
max-width: calc(max(50%, 20em));
|
||||
|
Loading…
x
Reference in New Issue
Block a user