tanner/qotnews
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Style fixes

Browse Source
This commit is contained in:
Tanner Collin
2026-01-03 23:26:56 +00:00
parent 83cc49e7ec
commit 98955a1ce7
5 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
webclient/src/App.js
View File

@@ -178,7 +178,9 @@ function App() {
return ( return (
<div className={theme}> <div className={theme}>
{settingsOpen && {settingsOpen &&
<div className="modal-overlay" onClick={() => setSettingsOpen(false)}> <>
<div className="modal-overlay" onClick={() => setSettingsOpen(false)}></div>
<div className="modal-content" onClick={e => e.stopPropagation()}> <div className="modal-content" onClick={e => e.stopPropagation()}>
<button className="close-modal-button" onClick={() => setSettingsOpen(false)}>&times;</button> <button className="close-modal-button" onClick={() => setSettingsOpen(false)}>&times;</button>
<h3>Settings</h3> <h3>Settings</h3>
@@ -202,11 +204,10 @@ function App() {
<div className="setting-group"> <div className="setting-group">
<h4>Feed</h4> <h4>Feed</h4>
<div className="font-option"> <div className="font-option gap">
<input className="checkbox" type="checkbox" id="filter-smallweb" checked={filterSmallweb} onChange={handleFilterChange} /> <input className="checkbox" type="checkbox" id="filter-smallweb" checked={filterSmallweb} onChange={handleFilterChange} />
<label htmlFor="filter-smallweb">Small websites only</label> <label htmlFor="filter-smallweb">Small websites only</label>
</div> </div>
<br/>
<div className="font-option"> <div className="font-option">
<input className="checkbox" type="checkbox" id="filter-hackernews" name="feed-source" checked={feedSources.hackernews} onChange={() => handleFeedSourceChange('hackernews')} /> <input className="checkbox" type="checkbox" id="filter-hackernews" name="feed-source" checked={feedSources.hackernews} onChange={() => handleFeedSourceChange('hackernews')} />
<label htmlFor="filter-hackernews">Hacker News</label> <label htmlFor="filter-hackernews">Hacker News</label>
@@ -265,7 +266,7 @@ function App() {
</div> </div>
</div> </div>
</div> </div>
</div> </>
} }
{waitingWorker && {waitingWorker &&

6
webclient/src/Style-black.css
View File

@@ -13,7 +13,7 @@
.black .menu button, .black .menu button,
.black .story-text button { .black .story-text button {
background-color: #444444; background-color: #222222;
border-color: #bbb; border-color: #bbb;
color: #ddd; color: #ddd;
} }
@@ -82,7 +82,7 @@
} }
.black .update-banner button { .black .update-banner button {
background-color: #444444; background-color: #222222;
border-color: #bbb; border-color: #bbb;
color: #ddd; color: #ddd;
} }
@@ -94,7 +94,7 @@
} }
.black .modal-content button { .black .modal-content button {
background-color: #444444; background-color: #222222;
border-color: #bbb; border-color: #bbb;
} }

8
webclient/src/Style-dark.css
View File

@@ -13,7 +13,7 @@
.dark .menu button, .dark .menu button,
.dark .story-text button { .dark .story-text button {
background-color: #444444; background-color: #222222;
border-color: #bbb; border-color: #bbb;
color: #ddd; color: #ddd;
} }
@@ -78,19 +78,19 @@
} }
.dark .update-banner button { .dark .update-banner button {
background-color: #444444; background-color: #222222;
border-color: #bbb; border-color: #bbb;
color: #ddd; color: #ddd;
} }
.dark .modal-content { .dark .modal-content {
background: #333; background: #222;
border-color: #828282; border-color: #828282;
color: #ddd; color: #ddd;
} }
.dark .modal-content button { .dark .modal-content button {
background-color: #444444; background-color: #222222;
border-color: #bbb; border-color: #bbb;
} }

5
webclient/src/Style-light.css
View File

@@ -86,6 +86,7 @@ pre {
.slogan { .slogan {
color: #828282; color: #828282;
margin-bottom: 0.5rem;
} }
.theme { .theme {
@@ -485,6 +486,10 @@ button.comment {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.modal-content .gap {
margin-bottom: 0.75rem;
}
.close-modal-button { .close-modal-button {
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;

8
webclient/src/Style-red.css
View File

@@ -22,7 +22,7 @@
.red .menu button, .red .menu button,
.red .story-text button { .red .story-text button {
background-color: #440000; background-color: #220000;
border-color: #b00; border-color: #b00;
color: #b00; color: #b00;
} }
@@ -100,19 +100,19 @@
} }
.red .update-banner button { .red .update-banner button {
background-color: #440000; background-color: #220000;
border-color: #b00; border-color: #b00;
color: #d00; color: #d00;
} }
.red .modal-content { .red .modal-content {
background: #300; background: #100;
border-color: #690000; border-color: #690000;
color: #b00; color: #b00;
} }
.red .modal-content button { .red .modal-content button {
background-color: #440000; background-color: #220000;
border-color: #b00; border-color: #b00;
} }