lee/changedetection.io
1
0
Fork 0
mirror of https://github.com/dgtlmoon/changedetection.io.git synced 2026-07-08 08:21:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

padding layout colours fixes

Browse Source
This commit is contained in:
dgtlmoon
2026-06-03 10:47:19 +02:00
parent f937347e7b
commit c0575151cd
11 changed files with 88 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changedetectionio/static/styles/scss/_settings.scss
+3
View File
@@ -5,3 +5,6 @@
// Breakpoints
$desktop-wide-breakpoint: 980px;
$common-gap: 0.8rem;
$top-menu-icon-size: 1.8rem;
changedetectionio/static/styles/scss/parts/_action_sidebar.scss
+19 -4
View File
@@ -58,7 +58,8 @@ $action-sidebar-content-slot: 1100px;
.action-sidebar-list {
list-style: none;
padding: 0 20px; // 20 = (64-24)/2 → icon stays centered in collapsed rail
padding-right: 0;
padding-left: 20px;
margin: 0;
display: flex;
flex-direction: column;
@@ -68,17 +69,21 @@ $action-sidebar-content-slot: 1100px;
.action-sidebar-li {
list-style: none;
margin: 0;
padding: 0;
position: relative; // anchor for rollout label
color: var(--color-white);
button {
padding: 0;
margin: 0;
}
a {
color: var(--color-white);
}
}
// Live "is it alive?" activity monitor — compact scrolling strip under the queue count.
// New data enters from the right (pulsing dot); old data scrolls left and fades out.
// Drawn by static/js/queue-sparkline.js. Full rail width, deliberately short.
.action-sidebar-li--spark {
padding: 2px 4px 4px;
.queue-spark {
display: block;
width: 100%;
@@ -347,3 +352,13 @@ body.actionside-bar-on {
}
}
}
/* same menu gets rendered again as the hamburger menu, requires some tweaks */
.mobile-menu-drawer {
.action-sidebar-list {
padding: 0;
}
.mobile-menu-section .action-sidebar-item {
padding-left: 0;
}
}
changedetectionio/static/styles/scss/parts/_llm.scss
-1
View File
@@ -84,7 +84,6 @@
transition: opacity 0.2s ease, filter 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--color-text-menu-link);
svg {
changedetectionio/static/styles/scss/parts/_love.scss
+4
View File
@@ -1,3 +1,5 @@
@use "../settings" as *;
#overlay {
opacity: 0.95;
@@ -30,6 +32,8 @@
}
#heartpath {
height: 1.6rem;
width: 1.6rem;
&:hover {
fill: #ff0000 !important;
transition: all ease 0.3s !important;
changedetectionio/static/styles/scss/parts/_menu.scss
+33 -16
View File
@@ -1,29 +1,42 @@
@use "../settings" as *;
.pure-menu-link {
padding: 0.5rem 1em;
line-height: 1.2rem;
}
#menu-mute, #menu-pause {
padding-left: 0.3rem;
padding-right: 0.3rem;
img {
height: 1.2rem;
}
}
a.github-link {
color: var(--color-text-menu-heading);
margin: 0;
padding: 0;
height: $top-menu-icon-size;
display: block;
svg {
fill: currentColor;
height: 100%;
}
&:hover {
color: var(--color-icon-github-hover);
}
}
.pure-menu-item {
height: initial;
svg {
height: 1.2rem;
}
* {
vertical-align: middle;
}
.github-link {
height: 1.8rem;
display: block;
svg {
height: 100%;
}
}
.bi-heart {
&:hover {
cursor: pointer;
@@ -34,25 +47,29 @@
&.active {
.pure-menu-link {
background-color: var(--color-background-menu-link-hover);
color: var(--color-text-menu-link-hover);
color: var(--color-text-menu-heading);
}
}
.action-label {
color: var(--color-text-menu-link-hover);
color: var(--color-text-menu-heading);
@media only screen and (max-width: 768px) {
display: none;
}
}
.action-icon {
stroke: var(--color-text-menu-link-hover);;
stroke: var(--color-text-menu-heading);
}
}
#inline-menu-extras-group {
> * {
display: inline-block;
}
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: $common-gap;
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center;
}
changedetectionio/static/styles/scss/parts/_top_menu.scss
+16
View File
@@ -0,0 +1,16 @@
@use "../settings" as *;
ul#top-right-menu {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: $common-gap;
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center;
.toggle-button {
padding: 0;
}
}
changedetectionio/static/styles/scss/parts/_watch_table.scss
+3 -1
View File
@@ -1,3 +1,5 @@
@use "../settings" as *;
$table-cell-padding: 8px 10px;
/* below this width the optional restock info drops to its own row in the title cell */
$title-col-stack-breakpoint: 1200px;
@@ -72,7 +74,7 @@ body.has-queue {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-auto-columns: auto;
align-items: center;
gap: 0.8rem;
gap: $common-gap;
> .favicon { grid-column: 1; }
> .watch-text-info { grid-column: 2; }
changedetectionio/static/styles/scss/styles.scss
+2 -14
View File
@@ -2,6 +2,7 @@
* -- BASE STYLES --
*/
@use "settings" as *;
@use "parts/top_menu";
@use "parts/variables";
@use "parts/arrows";
@use "parts/browser-steps";
@@ -127,19 +128,6 @@ a {
color: var(--color-link);
}
a.github-link {
color: var(--color-icon-github);
margin: 0 1rem 0 0.5rem;
svg {
fill: currentColor;
}
&:hover {
color: var(--color-icon-github-hover);
}
}
#search-result-info {
color: #fff;
}
@@ -150,7 +138,7 @@ button.toggle-button {
border: none;
cursor: pointer;
color: var(--color-icon-github);
color: var(--color-text-menu-heading);
&:hover {
color: var(--color-icon-github-hover);
changedetectionio/static/styles/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
changedetectionio/templates/base.html
+4 -4
View File
@@ -69,11 +69,11 @@
<span style="max-width: 30%; overflow: hidden">{{ current_diff_url }}</span></a>
{% endif %}
<ul class="pure-menu-list" id="top-right-menu">
<ul class="top-menu-list" id="top-right-menu">
<!-- Collapsible menu items (hidden on mobile, shown in drawer) -->
{% include "menu.html" %}
<li class="pure-menu-item" id="heart-us">
<li class="" id="heart-us">
<svg
fill="#ff0000"
class="bi bi-heart"
@@ -86,7 +86,7 @@
</svg>
</li>
<!-- Hamburger menu button (mobile only) -->
<li class="pure-menu-item">
<li class="">
<button class="hamburger-menu" id="hamburger-toggle" aria-label="Toggle menu">
<div class="hamburger-icon">
<span></span>
@@ -108,7 +108,7 @@
{% endif %}
<ul class="mobile-menu-items">
{% include "menu.html" %}
<li class="pure-menu-item menu-collapsible">
<li class=" menu-collapsible">
{%- if right_sticky -%}<div>{{ right_sticky }}</div>{%- endif -%}
<a href="https://changedetection.io/?ref={{ guid }}">Let us host your instance!</a><br>
</li>
changedetectionio/templates/sidebar-nav.html
+3 -3
View File
@@ -96,10 +96,10 @@
<li class="action-sidebar-divider" aria-hidden="true"></li>
<li class="action-sidebar-li" id="checking-now-stats-sidebar">
{{ _('Checking now') }}: <span class="checking-now-int">{{ checking_now_size }}</span>
<a href="{{ url_for('ui.ui_queue.queue_page') }}" class="action-sidebar-item">{{ _('Checking now') }}:&nbsp;<span class="checking-now-int">{{ checking_now_size }}</span></a>
</li>
<li class="action-sidebar-li" id="queue-stats-sidebar">
{{ _('In queue') }}: <span class="queue-size-int">{{ queue_size }}</span>
<a href="{{ url_for('ui.ui_queue.queue_page') }}" class="action-sidebar-item">{{ _('In queue') }}:&nbsp;<span class="queue-size-int">{{ queue_size }}</span></a>
</li>
{% if socket_io_enabled %}
<li class="action-sidebar-li action-sidebar-li--spark" aria-hidden="true">
@@ -109,7 +109,7 @@
<li class="action-sidebar-li">
{% if hosted_sticky %}
<div id="hosted-sticky">
<a href="https://changedetection.io/?ref={{guid}}">Let us host your instance!</a>
<a href="https://changedetection.io/?ref={{guid}}" class="action-sidebar-item">Let us host your instance!</a>
</div>
{% endif %}
{% if right_sticky %}