Skip to content
This repository was archived by the owner on Mar 16, 2026. It is now read-only.

Changed Navbar text to icons #167

Open
lasersPew wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Changed Navbar text to icons #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 71 additions & 1 deletion metatube/static/CSS/libraries/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,45 @@
.sun-and-moon {
pointer-events: none;
}
.icons {
width: 1.5rem;
height: 1.5rem;
fill: #454D54;
}

[data-theme="dark"] .icons {
fill: #e8eaed;
}
[data-theme="dark"] .icons:hover {
fill: #251619;
}

@import "https://unpkg.com/open-props/easings.min.css";

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
transform-origin: center;
}

.sun-and-moon > :is(.moon, .sun) {
fill: var(--icon-fill);
}

.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
fill: var(--icon-fill-hover);
}

.sun-and-moon > .sun-beams {
stroke: var(--icon-fill);
stroke-width: 2px;
}

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
stroke: var(--icon-fill-hover);
}




[data-theme="dark"] {
background-color: #111 !important;
color: #eee;
Expand All @@ -7,7 +49,7 @@
color: #8dc6ff;
}

[data-theme="dark"] .darkanchor:hover {
[data-theme="dark"] svg:hover {
color: #fff;
}

Expand Down Expand Up @@ -78,4 +120,32 @@
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-footer {
border-color: #222;
}

svg {
fill: rgba(0,0,0,.5)
}

[data-theme="dark"] .svg {
fill: #ebe9fc;
}

button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
svg[xmlns] {
width: 24px;
height: 24px;
}
.nav-link {
color: inherit;
}
.tab-content {
margin-top: 1rem;
}
30 changes: 30 additions & 0 deletions metatube/static/JS/dark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
function dark() {
// Get the dark mode switch element by its ID
var isDarkModeEnabled, darkSwitch = document.getElementById("darkSwitch");
// Check if the dark mode switch exists in the DOM
if (darkSwitch) {
// Determine if dark mode was previously enabled by checking localStorage
isDarkModeEnabled = localStorage.getItem("theme") === "dark";
// Set the checkbox state based on whether dark mode was previously enabled
darkSwitch.checked = isDarkModeEnabled;
// Apply or remove the "dark" theme based on the checkbox state
if (isDarkModeEnabled) {
document.body.setAttribute("data-theme", "dark");
} else {
document.body.removeAttribute("data-theme");
}
// Add an event listener to the switch for handling user changes
darkSwitch.addEventListener("click", function () {
if (document.body.getAttribute("data-theme") === "dark") {
// If the switch is unchecked, disable dark mode
document.body.removeAttribute("data-theme");
localStorage.removeItem("theme"); // Remove the preference from localStorage
} else {
// If the switch is checked, enable dark mode
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark"); // Save the preference in localStorage
}
});
}
}
dark();
53 changes: 40 additions & 13 deletions metatube/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,49 @@
<script src="{{ url_for('static', filename='JS/global.js') }}"></script>
</head>
<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item {{ 'active' if current_page == 'overview' else '' }}">
<a class="nav-link" href="{{ url_for('overview.index') }}">Overview</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item {{ 'active' if current_page == 'overview' else '' }}">
<a class="nav-link" href="{{ url_for('overview.index') }}">
<svg class="icons" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
<path d="M160-200v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H600q-17 0-28.5-11.5T560-160v-200q0-17-11.5-28.5T520-400h-80q-17 0-28.5 11.5T400-360v200q0 17-11.5 28.5T360-120H240q-33 0-56.5-23.5T160-200Z"/>
</svg>
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<span class="custom-control custom-switch nav-link">
<input type="checkbox" class="custom-control-input nav-link" id="darkSwitch" />
<label class="custom-control-label" id="switchlabel" for="darkSwitch">Dark Mode</label>
<button aria-label="auto" aria-live="polite" class="theme-toggle" data-theme-toggle id="darkSwitch" title="Toggles light & dark">
<svg aria-hidden="true" class="icons sun-and-moon"viewBox="0 0 24 24">
<mask class="moon" id="moon-mask">
<rect fill="white" height="100%" width="100%" x="0" y="0" />
<circle cx="24" cy="10" fill="black" r="6" />
</mask>
<circle class="sun" cx="12" cy="12" fill="currentColor" mask="url(#moon-mask)" r="6" />
<g class="sun-beams" stroke="currentColor">
<line x1="12" x2="12" y1="1" y2="3" />
<line x1="12" x2="12" y1="21" y2="23" />
<line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
<line x1="18.36" x2="19.78" y1="18.36" y2="19.78" />
<line x1="1" x2="3" y1="12" y2="12" />
<line x1="21" x2="23" y1="12" y2="12" />
<line x1="4.22" x2="5.64" y1="19.78" y2="18.36" />
<line x1="18.36" x2="19.78" y1="5.64" y2="4.22" />
</g>
</svg>
</button>
<!-- <input type="checkbox" class="custom-control-input nav-link" id="darkSwitch" />-->
<!-- <label class="custom-control-label" id="switchlabel" for="darkSwitch">Dark Mode</label>-->
</span>
</li>
<li class="nav-item {{ 'active' if current_page == 'settings' else '' }} ">
<a class="nav-link" href="{{ url_for('settings.settings') }}">Settings <i class="bi bi-gear-fill" aria-hidden="true"></i></a>
<a class="nav-link" href="{{ url_for('settings.settings') }}">
<svg class="icons" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
<path d="M433-80q-27 0-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62 26q-25 11-50 2t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5 1-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23 39-32t50 2l62 26q11-8 23-15t24-12l9-66q4-26 23.5-44t46.5-18h94q27 0 46.5 18t23.5 44l9 66q13 5 24.5 12t22.5 15l62-26q25-11 50-2t39 32l47 82q14 23 8 49t-27 43l-53 40q1 7 1 13.5v27q0 6.5-2 13.5l53 40q21 17 27 43t-8 49l-48 82q-14 23-39 32t-50-2l-60-26q-11 8-23 15t-24 12l-9 66q-4 26-23.5 44T527-80h-94Zm49-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z"/>
</svg>
</a>
</li>
</ul>
</div>
Expand All @@ -41,6 +68,6 @@
<p class="text-right text-dark">Made by JVT038<br/><a href="https://github.com/JVT038/MetaTube" target="_blank">Star me on Github<i class="bi bi-github" aria-hidden="true"></i></a></p>
</footer>
<link rel="stylesheet" href="{{ url_for('static', filename='CSS/libraries/dark.css') }}" />
<script src="{{ url_for('static', filename='JS/libraries/dark.min.js') }}"></script>
<script src="{{ url_for('static', filename='JS/dark.js') }}"></script>
</body>
</html>
Loading