Merge branch 'development_article_color'
* development_article_color: added options to change background for article in css set navbarright at rightmost position changed nav bar color to differentiate with body put light and dark icons into one, made sure the top bar follows the theme
This commit is contained in:
commit
d032e75d43
@ -1,3 +1,24 @@
|
||||
/* Custom properties for theming */
|
||||
:root {
|
||||
--nav-background: #f1f3f5;
|
||||
--nav-text: #495057;
|
||||
--nav-hover: #1971c2;
|
||||
--nav-input-border: #ced4da;
|
||||
--nav-input-background: #f8f9fa;
|
||||
--theme-icon-hover: #e9ecef;
|
||||
--background-color-article: #fffffff8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--nav-background: #3c4149b9;
|
||||
--nav-text: #e0e0e0;
|
||||
--nav-hover: #4dabf7;
|
||||
--nav-input-border: #495057;
|
||||
--nav-input-background: #2a2e33;
|
||||
--theme-icon-hover: #2a2e33;
|
||||
--background-color-article: #242527;
|
||||
}
|
||||
|
||||
/* Custom styles to enhance the nav bar */
|
||||
body > main {
|
||||
display: flex;
|
||||
@ -6,10 +27,13 @@ body > main {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #f1f3f5;
|
||||
background-color: var(--nav-background);
|
||||
padding: 0rem 1rem;
|
||||
width: 100%; /* Ensure nav takes full width */
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -17,129 +41,164 @@ nav ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%; /* Ensure ul takes full width */
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
text-decoration: none;
|
||||
color: #495057;
|
||||
color: var(--nav-text);
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: #1971c2;
|
||||
color: var(--nav-hover);
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30%;
|
||||
margin-left: auto; /* Push to the right */
|
||||
margin-right: 0; /* Ensure no right margin */
|
||||
}
|
||||
|
||||
navbar-right a {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
navbar-right input[type="search"] {
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 1px solid #ced4da;
|
||||
border: 1px solid var(--nav-input-border);
|
||||
border-radius: 1rem;
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--nav-input-background);
|
||||
color: var(--nav-text);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1;
|
||||
height: 2rem;
|
||||
width: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
/* New styles for theme icons */
|
||||
|
||||
/* Styles for theme icons */
|
||||
.theme-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.theme-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor;
|
||||
}
|
||||
.theme-icon:hover {
|
||||
background-color: #e9ecef;
|
||||
fill: var(--nav-text);
|
||||
}
|
||||
|
||||
.theme-icon:hover {
|
||||
background-color: var(--theme-icon-hover);
|
||||
}
|
||||
|
||||
mynav {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 250px;
|
||||
overflow-y: auto;
|
||||
color: var(--nav-text);
|
||||
padding-top: 1.3rem;
|
||||
}
|
||||
|
||||
mynav,
|
||||
docnav {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 250px;
|
||||
overflow-y: auto; /* Enable scrolling for nav and docnav */
|
||||
overflow-y: auto;
|
||||
color: var(--nav-text);
|
||||
}
|
||||
|
||||
mynav ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
mynav ul ul {
|
||||
list-style-type: none; /* Remove bullets */
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-left: 0.2rem;
|
||||
display: none; /* Hide nested lists by default */
|
||||
display: none;
|
||||
}
|
||||
|
||||
mynav ul li {
|
||||
margin-left: 0.5rem;
|
||||
padding-left: 0.3rem;
|
||||
cursor: pointer; /* Indicate that items are clickable */
|
||||
list-style-type: none; /* Remove bullets */
|
||||
cursor: pointer;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
mynav ul li a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
mynav ul li.open > ul {
|
||||
display: block; /* Show nested lists when parent is open */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 0.8rem; /* Reduce the font size of the arrows */
|
||||
margin-right: 0.2rem; /* Adjust the space between the arrow and the text */
|
||||
font-size: 0.8rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
article {
|
||||
flex: 4;
|
||||
min-width: 200px;
|
||||
max-width: 1200px;
|
||||
overflow-y: auto; /* Enable scrolling for article */
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
background-color: var(--background-color-article);
|
||||
}
|
||||
|
||||
article textarea {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
article md {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
docnav {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
docnav ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
docnav ul li {
|
||||
margin-left: 0.4rem;
|
||||
padding-left: 0rem;
|
||||
cursor: pointer; /* Indicate that items are clickable */
|
||||
white-space: nowrap; /* Prevent text from wrapping */
|
||||
overflow: hidden; /* Hide overflow text */
|
||||
text-overflow: ellipsis; /* Add ellipses for overflow text */
|
||||
max-width: 40ch; /* Limit length of item to 40 characters */
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 40ch;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@ -148,45 +207,27 @@ docnav ul li {
|
||||
}
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: stretch; /* Changed from flex-start to stretch */
|
||||
}
|
||||
nav ul li {
|
||||
margin: 0 rem 0;
|
||||
margin: 0.5rem 0; /* Added vertical margin */
|
||||
}
|
||||
navbar-right {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: stretch; /* Changed from flex-start to stretch */
|
||||
margin-left: 0;
|
||||
width: 100%; /* Ensure full width on mobile */
|
||||
}
|
||||
navbar-right a {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem; /* Add some vertical spacing */
|
||||
}
|
||||
navbar-right input[type="search"] {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin: 0.5rem 0; /* Add some vertical spacing */
|
||||
}
|
||||
.theme-icons {
|
||||
margin-top: 0.5rem;
|
||||
justify-content: flex-end; /* Align icons to the right on mobile */
|
||||
}
|
||||
}
|
||||
|
||||
/* [data-theme="dark"] {
|
||||
--background-color: #333;
|
||||
--text-color: #fff;
|
||||
}
|
||||
[data-theme="dark"] body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
[data-theme="dark"] nav {
|
||||
background-color: #444;
|
||||
}
|
||||
[data-theme="dark"] nav ul li a {
|
||||
color: #ddd;
|
||||
}
|
||||
[data-theme="dark"] nav ul li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="dark"] .theme-icon:hover {
|
||||
background-color: #555;
|
||||
} */
|
||||
|
||||
@ -79,38 +79,74 @@ function addNavEventListeners() {
|
||||
});
|
||||
}
|
||||
|
||||
// function settypes() {
|
||||
// const navInputs = document.querySelectorAll("search-inpu");
|
||||
// navInputs.forEach((input) => {
|
||||
// input.setAttribute("type", "text");
|
||||
// });
|
||||
// }
|
||||
|
||||
// Call the initialization function when the DOM is loaded
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
createThemeIcons();
|
||||
initializeMarkdownConverter("markdown-input", "markdown-output", "content-pointers");
|
||||
initializeMarkdownConverter("markdown-nav", "mynav");
|
||||
addNavEventListeners();
|
||||
//settypes();
|
||||
});
|
||||
|
||||
function setTheme(theme) {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
localStorage.setItem("theme", theme);
|
||||
console.log(`Theme set to: ${theme}`);
|
||||
updateThemeIcon(theme);
|
||||
}
|
||||
|
||||
function getSystemTheme() {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
}
|
||||
|
||||
document.querySelectorAll(".theme-icon").forEach((icon) => {
|
||||
icon.addEventListener("click", () => {
|
||||
const theme = icon.getAttribute("data-theme-switcher");
|
||||
setTheme(theme);
|
||||
});
|
||||
});
|
||||
function toggleTheme() {
|
||||
const currentTheme = document.documentElement.getAttribute("data-theme") || "light";
|
||||
const newTheme = currentTheme === "light" ? "dark" : "light";
|
||||
setTheme(newTheme);
|
||||
}
|
||||
|
||||
function updateThemeIcon(theme) {
|
||||
const themeIcon = document.querySelector(".theme-icon");
|
||||
if (themeIcon) {
|
||||
themeIcon.innerHTML = theme === "light" ? getLightIconSVG() : getDarkIconSVG();
|
||||
themeIcon.setAttribute("title", `Switch to ${theme === "light" ? "dark" : "light"} theme`);
|
||||
}
|
||||
}
|
||||
|
||||
function createThemeIcons() {
|
||||
const themeIconsHTML = `
|
||||
<div class="theme-icons">
|
||||
<span class="theme-icon" title="Toggle theme">
|
||||
${getLightIconSVG()}
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const placeholder = document.getElementById("theme-switcher-icons");
|
||||
if (placeholder) {
|
||||
placeholder.innerHTML = themeIconsHTML;
|
||||
}
|
||||
|
||||
// Add event listener for theme switching
|
||||
const themeIcon = document.querySelector(".theme-icon");
|
||||
if (themeIcon) {
|
||||
themeIcon.addEventListener("click", toggleTheme);
|
||||
}
|
||||
|
||||
// Set initial icon based on current theme
|
||||
updateThemeIcon(document.documentElement.getAttribute("data-theme") || "light");
|
||||
}
|
||||
|
||||
function getLightIconSVG() {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z" />
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
function getDarkIconSVG() {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
// Check for saved theme preference or use system theme
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
@ -123,37 +159,4 @@ if (savedTheme) {
|
||||
// Listen for system theme changes
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
|
||||
setTheme(e.matches ? "dark" : "light");
|
||||
});
|
||||
|
||||
function createThemeIcons() {
|
||||
const themeIconsHTML = `
|
||||
<div class="theme-icons">
|
||||
<span class="theme-icon" data-theme-switcher="light" title="Light theme">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="theme-icon" data-theme-switcher="dark" title="Dark theme">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const placeholder = document.getElementById("theme-switcher-icons");
|
||||
if (placeholder) {
|
||||
placeholder.innerHTML = themeIconsHTML;
|
||||
}
|
||||
// Add event listeners for theme switching
|
||||
document.querySelectorAll(".theme-icon").forEach((icon) => {
|
||||
icon.addEventListener("click", () => {
|
||||
const theme = icon.getAttribute("data-theme-switcher");
|
||||
setTheme(theme);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user