diff options
| author | sameerasw <[email protected]> | 2025-04-23 20:07:43 +0530 |
|---|---|---|
| committer | sameerasw <[email protected]> | 2025-04-23 20:07:43 +0530 |
| commit | 45e4ac63aa7ef59c9fb8bf75f476049aa009c0d9 (patch) | |
| tree | 558c9f31d59fc31b82dc6bb47eb37d45be63408c /popup | |
| parent | e7fddf621a59292ebc2440666a109e7d4aa0e0ea (diff) | |
better header and new header font
Diffstat (limited to 'popup')
| -rw-r--r-- | popup/popup.css | 38 | ||||
| -rw-r--r-- | popup/popup.html | 14 | ||||
| -rw-r--r-- | popup/popup.js | 2 |
3 files changed, 37 insertions, 17 deletions
diff --git a/popup/popup.css b/popup/popup.css index 67eab43..ba754e0 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -1,6 +1,12 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("../theme.css");
+@font-face {
+ font-family: "sugar-magic";
+ src: url("../assets/fonts/sugarmagicpersonaluseonly-jemyo.otf")
+ format("opentype");
+}
+
body {
width: 360px;
margin: 0;
@@ -30,12 +36,15 @@ body { border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow);
position: relative;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
}
.logo-container {
display: flex;
align-items: center;
- gap: 8px;
+ gap: 12px;
}
.logo-img {
@@ -46,16 +55,24 @@ body { }
.app-title {
+ font-family: "sugar-magic", sans-serif;
margin: 0;
- font-size: 20px;
- font-weight: 600;
- letter-spacing: -0.5px;
+ font-size: 30px;
}
-.author {
- font-size: 12px;
- margin-top: 4px;
- opacity: 0.9;
+#header-container{
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ width: 100%;
+}
+
+.miniheader{
+ margin-top: 2px;
+ font-size: 11px;
+ display: flex;
+ gap: 4px;
+ flex-direction: row;
}
.author a {
@@ -70,9 +87,9 @@ body { /* What's New Button */
.whats-new-button {
- position: absolute;
+ /* position: absolute;
top: 16px;
- right: 16px;
+ right: 16px; */
background: none;
border: none;
color: white;
@@ -474,7 +491,6 @@ input:checked + .slider:before { margin-right: 4px;
}
-#addon-version,
#last-fetched-time {
font-size: 0.75em;
}
diff --git a/popup/popup.html b/popup/popup.html index bc53134..9d8d042 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -12,12 +12,16 @@ <body> <div class="container"> <header class="app-header"> - <div class="logo-container"> - <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img"> - <h1 class="app-title">ZenInternet</h1> + <div id="header-container"> + <div class="logo-container"> + <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img"> + <h1 class="app-title">Zen Internet</h1> + </div> + <div class="miniheader"> + <div id="addon-version" class="addon-version"></div> + <div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div> + </div> </div> - <div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div> - <div id="addon-version" class="addon-version"></div> <button id="whats-new" class="whats-new-button" title="What's New">✨</button> </header> diff --git a/popup/popup.js b/popup/popup.js index 44123ee..64036a9 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -593,7 +593,7 @@ new (class ExtensionPopup { const version = manifest.version; document.getElementById( "addon-version" - ).textContent = `Version: ${version}`; + ).textContent = `v${version}`; } setupAutoUpdate() { |