From 92d02c5f8a0c23aa16025179cab829722ed60651 Mon Sep 17 00:00:00 2001 From: Goldie Date: Thu, 24 Oct 2024 16:45:08 +0000 Subject: [PATCH 1/5] fix: disable hover on mobile devices --- static/style/inverted-style.css | 27 ++++++++++++++++----------- static/style/style.css | 27 ++++++++++++++++----------- 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index fb078752..d3691bb0 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -113,7 +113,7 @@ transition: 125ms opacity ease-out 62.5ms; } #issues-container:hover .issue-element-inner { - opacity: 0.5; + opacity: 1; } #issues-container.keyboard-selection:hover .issue-element-inner { opacity: 1; @@ -161,16 +161,21 @@ opacity: 1; filter: blur(0); } - #issues-container > div:hover { - opacity: 1; - transition: background-color 0s; - } - #issues-container > div:hover .info { - opacity: 1; - } - #issues-container > div:hover .issue-element-inner { - transition: 125ms opacity ease-in-out; - opacity: 1; + @media (hover: hover) { + #issues-container > div:hover { + opacity: 1; + transition: background-color 0s; + } + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 125ms opacity ease-in-out; + opacity: 1; + } + #issues-container:hover .issue-element-inner { + opacity: 0.5; + } } #issues-container > div:active { background-color: #7f7f7f40; diff --git a/static/style/style.css b/static/style/style.css index ffb03bce..16266eab 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -113,7 +113,7 @@ transition: 125ms opacity ease-out 62.5ms; } #issues-container:hover .issue-element-inner { - opacity: 0.5; + opacity: 1; } #issues-container.keyboard-selection:hover .issue-element-inner { opacity: 1; @@ -161,16 +161,21 @@ opacity: 1; filter: blur(0); } - #issues-container > div:hover { - opacity: 1; - transition: background-color 0s; - } - #issues-container > div:hover .info { - opacity: 1; - } - #issues-container > div:hover .issue-element-inner { - transition: 125ms opacity ease-in-out; - opacity: 1; + @media (hover: hover) { + #issues-container > div:hover { + opacity: 1; + transition: background-color 0s; + } + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 125ms opacity ease-in-out; + opacity: 1; + } + #issues-container:hover .issue-element-inner { + opacity: 0.5; + } } #issues-container > div:active { background-color: #80808040; From 37f5834ab837c16980e03d135b26858473ed0020 Mon Sep 17 00:00:00 2001 From: Goldie Date: Thu, 24 Oct 2024 16:46:47 +0000 Subject: [PATCH 2/5] Revert "fix: disable hover on mobile devices" This reverts commit 92d02c5f8a0c23aa16025179cab829722ed60651. --- static/style/inverted-style.css | 27 +++++++++++---------------- static/style/style.css | 27 +++++++++++---------------- 2 files changed, 22 insertions(+), 32 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index d3691bb0..fb078752 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -113,7 +113,7 @@ transition: 125ms opacity ease-out 62.5ms; } #issues-container:hover .issue-element-inner { - opacity: 1; + opacity: 0.5; } #issues-container.keyboard-selection:hover .issue-element-inner { opacity: 1; @@ -161,21 +161,16 @@ opacity: 1; filter: blur(0); } - @media (hover: hover) { - #issues-container > div:hover { - opacity: 1; - transition: background-color 0s; - } - #issues-container > div:hover .info { - opacity: 1; - } - #issues-container > div:hover .issue-element-inner { - transition: 125ms opacity ease-in-out; - opacity: 1; - } - #issues-container:hover .issue-element-inner { - opacity: 0.5; - } + #issues-container > div:hover { + opacity: 1; + transition: background-color 0s; + } + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 125ms opacity ease-in-out; + opacity: 1; } #issues-container > div:active { background-color: #7f7f7f40; diff --git a/static/style/style.css b/static/style/style.css index 16266eab..ffb03bce 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -113,7 +113,7 @@ transition: 125ms opacity ease-out 62.5ms; } #issues-container:hover .issue-element-inner { - opacity: 1; + opacity: 0.5; } #issues-container.keyboard-selection:hover .issue-element-inner { opacity: 1; @@ -161,21 +161,16 @@ opacity: 1; filter: blur(0); } - @media (hover: hover) { - #issues-container > div:hover { - opacity: 1; - transition: background-color 0s; - } - #issues-container > div:hover .info { - opacity: 1; - } - #issues-container > div:hover .issue-element-inner { - transition: 125ms opacity ease-in-out; - opacity: 1; - } - #issues-container:hover .issue-element-inner { - opacity: 0.5; - } + #issues-container > div:hover { + opacity: 1; + transition: background-color 0s; + } + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 125ms opacity ease-in-out; + opacity: 1; } #issues-container > div:active { background-color: #80808040; From 6798af76940a924be6d08ead6cd5c04260338595 Mon Sep 17 00:00:00 2001 From: Goldie Date: Thu, 24 Oct 2024 16:50:06 +0000 Subject: [PATCH 3/5] fix: disable hover on mobile devices --- static/style/inverted-style.css | 95 +++++++++++++++++--------------- static/style/style.css | 97 +++++++++++++++++---------------- 2 files changed, 101 insertions(+), 91 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index fb078752..27fdd759 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -82,7 +82,7 @@ } * { font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; - color: #000000; + color: #ffffff; font-weight: 500; } @font-face { @@ -113,7 +113,7 @@ transition: 125ms opacity ease-out 62.5ms; } #issues-container:hover .issue-element-inner { - opacity: 0.5; + opacity: 1; } #issues-container.keyboard-selection:hover .issue-element-inner { opacity: 1; @@ -125,10 +125,10 @@ user-select: none; } #issues-container > div:first-child { - border-top: 1px solid #7f7f7f20; + border-top: 1px solid #80808020; } #issues-container > div:last-child { - border-top: 1px solid #7f7f7f20; + border-top: 1px solid #80808020; } #issues-container > div { padding: 0 16px; @@ -138,7 +138,7 @@ background-repeat: no-repeat; opacity: 0.125; margin: 3px auto; - border: 1px solid #7f7f7f20; + border: 1px solid #80808020; border-radius: 4px; cursor: pointer; margin: 4px; @@ -161,19 +161,24 @@ opacity: 1; filter: blur(0); } - #issues-container > div:hover { - opacity: 1; - transition: background-color 0s; - } - #issues-container > div:hover .info { - opacity: 1; - } - #issues-container > div:hover .issue-element-inner { - transition: 125ms opacity ease-in-out; - opacity: 1; + @media (hover: hover) { + #issues-container > div:hover { + opacity: 1; + transition: background-color 0s; + } + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 125ms opacity ease-in-out; + opacity: 1; + } + #issues-container:hover .issue-element-inner { + opacity: 0.5; + } } #issues-container > div:active { - background-color: #7f7f7f40; + background-color: #80808040; } #issues-container h3 { line-height: 1; @@ -186,7 +191,7 @@ p { margin: 0; line-height: 1; - color: #404040; + color: #bfbfbf; font-size: 12px; letter-spacing: 0.5px; text-rendering: geometricPrecision; @@ -196,7 +201,7 @@ li { margin: 0; line-height: 1; - color: #404040; + color: #bfbfbf; font-size: 12px; letter-spacing: 0.5px; text-rendering: geometricPrecision; @@ -234,7 +239,7 @@ font-size: 12px; text-align: center; white-space: nowrap; - background-color: #7f7f7f20; + background-color: #80808020; width: 64px; letter-spacing: 0.5px; flex-grow: 4; @@ -260,13 +265,13 @@ cursor: pointer; } .filters-container label:not([for="view-toggle"]):hover { - background-color: #7f7f7f40; + background-color: #80808040; } .filters-container label:not([for="view-toggle"]):active { - background-color: #7f7f7f80; + background-color: #80808080; } input[type="radio"]:checked + label:not([for="view-toggle"]) { - background-color: #7f7f7f80 !important; + background-color: #80808080 !important; } .labels { display: flex; @@ -336,18 +341,18 @@ border-style: unset; border-color: unset; border-image: unset; - border: 1px solid #7f7f7f20; + border: 1px solid #80808020; padding: 8px 16px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; - background-color: #7f7f7f10; + background-color: #80808010; } button:hover { - background-color: #7f7f7f20; + background-color: #80808020; } button:active { - background-color: #7f7f7f40; + background-color: #80808040; } .toolbar { position: fixed; @@ -357,7 +362,7 @@ backdrop-filter: blur(8px); padding: 4px; display: flex; - border-bottom: 1px solid #7f7f7f20; + border-bottom: 1px solid #80808020; -webkit-backdrop-filter: blur(8px); align-items: center; } @@ -510,7 +515,7 @@ } .preview hr { border-width: 0; - border-top: 1px solid #7f7f7f20; + border-top: 1px solid #80808020; } .preview p { line-height: 1.25; @@ -551,7 +556,7 @@ } .preview .preview-header a[href*="//"] svg { - fill: #00000080; + fill: #ffffff80; vertical-align: middle; height: 20px; } @@ -579,7 +584,7 @@ position: fixed; transition: 0.25s all cubic-bezier(0, 1, 1, 1); max-width: 640px; - border: 1px solid #7f7f7f20; + border: 1px solid #80808020; border-radius: 4px; opacity: 0; top: 60px; @@ -594,7 +599,7 @@ pointer-events: all; } .close-preview svg { - fill: #00000080; + fill: #ffffff80; vertical-align: middle; height: 36px; } @@ -609,7 +614,7 @@ justify-content: space-between; align-items: center; padding: 8px 16px; - border-bottom: 1px solid #7f7f7f20; + border-bottom: 1px solid #80808020; } .preview-header > a { word-wrap: initial; @@ -652,7 +657,7 @@ padding: 0; } .preview button.close-preview:hover svg { - fill: #000000; + fill: #ffffff; } .preview li { margin-bottom: 8px; @@ -668,7 +673,7 @@ padding: 4px; border: none; border-radius: 4px; - background-color: #7f7f7f20; + background-color: #80808020; width: 100%; max-width: 500px; height: 16px; @@ -701,7 +706,7 @@ bottom: 0; bottom: env(safe-area-inset-bottom); opacity: 1; - border-top: 1px solid #7f7f7f20; + border-top: 1px solid #80808020; border-bottom: unset; } #bottom-bar a { @@ -749,7 +754,7 @@ } } .svg-icon { - fill: #070707; + fill: #f8f8f8; width: 24px; height: 24px; } @@ -761,7 +766,7 @@ .github-avatar-default { width: 48px; height: 48px; - background-color: #7f7f7f; + background-color: #808080; } #view-toggle:checked::after { content: "Proposals"; @@ -794,7 +799,7 @@ vertical-align: middle; opacity: 0.25; font-size: 12px; - color: #000000; + color: #ffffff; text-decoration: none; display: inline-block; } @@ -802,10 +807,10 @@ opacity: 1; } #bottom-right svg { - fill: #000000bf; + fill: #ffffffbf; } #bottom-right:hover svg { - fill: #000000; + fill: #ffffff; } #issues-container::after { @@ -813,8 +818,8 @@ display: block; width: 48px; height: 48px; - border: 4px solid #00000040; - border-top: 4px solid #000000; + border: 4px solid #ffffff40; + border-top: 4px solid #ffffff; border-radius: 50%; animation: spin 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate, @@ -838,11 +843,11 @@ 75% { transform: rotate(5400deg); - border-bottom-color: #000000; + border-bottom-color: #ffffff; } 100% { transform: rotate(7200deg); - border-color: #000000; + border-color: #ffffff; } } @keyframes fadeOut { @@ -880,4 +885,4 @@ .preview-active div#mobile-modal-scrub { display: unset; } -} +} \ No newline at end of file diff --git a/static/style/style.css b/static/style/style.css index ffb03bce..360a6e80 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -42,7 +42,7 @@ display: none; } } -@media (prefers-color-scheme: dark) { +@media (prefers-color-scheme: light) { :root { --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); --background-color-default-brightness: 2%; @@ -82,7 +82,7 @@ } * { font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; - color: #fff; + color: #000000; font-weight: 500; } @font-face { @@ -113,7 +113,7 @@ transition: 125ms opacity ease-out 62.5ms; } #issues-container:hover .issue-element-inner { - opacity: 0.5; + opacity: 1; } #issues-container.keyboard-selection:hover .issue-element-inner { opacity: 1; @@ -125,10 +125,10 @@ user-select: none; } #issues-container > div:first-child { - border-top: 1px solid #80808020; + border-top: 1px solid #7f7f7f20; } #issues-container > div:last-child { - border-top: 1px solid #80808020; + border-top: 1px solid #7f7f7f20; } #issues-container > div { padding: 0 16px; @@ -138,7 +138,7 @@ background-repeat: no-repeat; opacity: 0.125; margin: 3px auto; - border: 1px solid #80808020; + border: 1px solid #7f7f7f20; border-radius: 4px; cursor: pointer; margin: 4px; @@ -161,19 +161,24 @@ opacity: 1; filter: blur(0); } - #issues-container > div:hover { - opacity: 1; - transition: background-color 0s; - } - #issues-container > div:hover .info { - opacity: 1; - } - #issues-container > div:hover .issue-element-inner { - transition: 125ms opacity ease-in-out; - opacity: 1; + @media (hover: hover) { + #issues-container > div:hover { + opacity: 1; + transition: background-color 0s; + } + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 125ms opacity ease-in-out; + opacity: 1; + } + #issues-container:hover .issue-element-inner { + opacity: 0.5; + } } #issues-container > div:active { - background-color: #80808040; + background-color: #7f7f7f40; } #issues-container h3 { line-height: 1; @@ -186,7 +191,7 @@ p { margin: 0; line-height: 1; - color: #bfbfbf; + color: #404040; font-size: 12px; letter-spacing: 0.5px; text-rendering: geometricPrecision; @@ -196,7 +201,7 @@ li { margin: 0; line-height: 1; - color: #bfbfbf; + color: #404040; font-size: 12px; letter-spacing: 0.5px; text-rendering: geometricPrecision; @@ -234,7 +239,7 @@ font-size: 12px; text-align: center; white-space: nowrap; - background-color: #80808020; + background-color: #7f7f7f20; width: 64px; letter-spacing: 0.5px; flex-grow: 4; @@ -260,13 +265,13 @@ cursor: pointer; } .filters-container label:not([for="view-toggle"]):hover { - background-color: #80808040; + background-color: #7f7f7f40; } .filters-container label:not([for="view-toggle"]):active { - background-color: #80808080; + background-color: #7f7f7f80; } input[type="radio"]:checked + label:not([for="view-toggle"]) { - background-color: #80808080 !important; + background-color: #7f7f7f80 !important; } .labels { display: flex; @@ -336,18 +341,18 @@ border-style: unset; border-color: unset; border-image: unset; - border: 1px solid #80808020; + border: 1px solid #7f7f7f20; padding: 8px 16px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; - background-color: #80808010; + background-color: #7f7f7f10; } button:hover { - background-color: #80808020; + background-color: #7f7f7f20; } button:active { - background-color: #80808040; + background-color: #7f7f7f40; } .toolbar { position: fixed; @@ -357,7 +362,7 @@ backdrop-filter: blur(8px); padding: 4px; display: flex; - border-bottom: 1px solid #80808020; + border-bottom: 1px solid #7f7f7f20; -webkit-backdrop-filter: blur(8px); align-items: center; } @@ -510,7 +515,7 @@ } .preview hr { border-width: 0; - border-top: 1px solid #80808020; + border-top: 1px solid #7f7f7f20; } .preview p { line-height: 1.25; @@ -551,7 +556,7 @@ } .preview .preview-header a[href*="//"] svg { - fill: #ffffff80; + fill: #00000080; vertical-align: middle; height: 20px; } @@ -579,7 +584,7 @@ position: fixed; transition: 0.25s all cubic-bezier(0, 1, 1, 1); max-width: 640px; - border: 1px solid #80808020; + border: 1px solid #7f7f7f20; border-radius: 4px; opacity: 0; top: 60px; @@ -594,7 +599,7 @@ pointer-events: all; } .close-preview svg { - fill: #ffffff80; + fill: #00000080; vertical-align: middle; height: 36px; } @@ -609,7 +614,7 @@ justify-content: space-between; align-items: center; padding: 8px 16px; - border-bottom: 1px solid #80808020; + border-bottom: 1px solid #7f7f7f20; } .preview-header > a { word-wrap: initial; @@ -652,7 +657,7 @@ padding: 0; } .preview button.close-preview:hover svg { - fill: #fff; + fill: #000000; } .preview li { margin-bottom: 8px; @@ -668,7 +673,7 @@ padding: 4px; border: none; border-radius: 4px; - background-color: #80808020; + background-color: #7f7f7f20; width: 100%; max-width: 500px; height: 16px; @@ -701,7 +706,7 @@ bottom: 0; bottom: env(safe-area-inset-bottom); opacity: 1; - border-top: 1px solid #80808020; + border-top: 1px solid #7f7f7f20; border-bottom: unset; } #bottom-bar a { @@ -749,7 +754,7 @@ } } .svg-icon { - fill: #f8f8f8; + fill: #070707; width: 24px; height: 24px; } @@ -761,7 +766,7 @@ .github-avatar-default { width: 48px; height: 48px; - background-color: #808080; + background-color: #7f7f7f; } #view-toggle:checked::after { content: "Proposals"; @@ -794,7 +799,7 @@ vertical-align: middle; opacity: 0.25; font-size: 12px; - color: #fff; + color: #000000; text-decoration: none; display: inline-block; } @@ -802,10 +807,10 @@ opacity: 1; } #bottom-right svg { - fill: #ffffffbf; + fill: #000000bf; } #bottom-right:hover svg { - fill: #ffffff; + fill: #000000; } #issues-container::after { @@ -813,8 +818,8 @@ display: block; width: 48px; height: 48px; - border: 4px solid #ffffff40; - border-top: 4px solid #ffffff; + border: 4px solid #00000040; + border-top: 4px solid #000000; border-radius: 50%; animation: spin 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate, @@ -838,11 +843,11 @@ 75% { transform: rotate(5400deg); - border-bottom-color: #ffffff; + border-bottom-color: #000000; } 100% { transform: rotate(7200deg); - border-color: #ffffff; + border-color: #000000; } } @keyframes fadeOut { @@ -880,4 +885,4 @@ .preview-active div#mobile-modal-scrub { display: unset; } -} +} \ No newline at end of file From ef3abdf23b243f8ab448fdcbcfbfc4553bc843c3 Mon Sep 17 00:00:00 2001 From: Goldie Date: Thu, 24 Oct 2024 18:39:22 +0000 Subject: [PATCH 4/5] fix: fix css issue --- static/style/inverted-style.css | 17 ++++++++++++++--- static/style/style.css | 17 ++++++++++++++--- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 27fdd759..41002215 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -153,9 +153,20 @@ #issues-container.keyboard-selection > div.active { opacity: 0.33; } - #issues-container.keyboard-selection > div.active.selected { - opacity: 1; - } + + @media (hover: hover) { + #issues-container.keyboard-selection > div.active.selected { + opacity: 1; + } + #issues-container > div:hover { + opacity: 1; + transition: background-color 0s; + } + #issues-container:hover .issue-element-inner { + opacity: 0.5; + } + } + #issues-container > div.active { transition: 125ms all ease-in-out; opacity: 1; diff --git a/static/style/style.css b/static/style/style.css index 360a6e80..6282da49 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -153,9 +153,20 @@ #issues-container.keyboard-selection > div.active { opacity: 0.33; } - #issues-container.keyboard-selection > div.active.selected { - opacity: 1; - } + + @media (hover: hover) { + #issues-container.keyboard-selection > div.active.selected { + opacity: 1; + } + #issues-container > div:hover { + opacity: 1; + transition: background-color 0s; + } + #issues-container:hover .issue-element-inner { + opacity: 0.5; + } + } + #issues-container > div.active { transition: 125ms all ease-in-out; opacity: 1; From 47b72a07b7ec942531f0a879fb0b702a101d7b6e Mon Sep 17 00:00:00 2001 From: Goldie Date: Thu, 24 Oct 2024 18:53:25 +0000 Subject: [PATCH 5/5] fix: fix site breaking css issues --- static/style/inverted-style.css | 89 +++++++++++++++----------------- static/style/style.css | 91 +++++++++++++++------------------ 2 files changed, 81 insertions(+), 99 deletions(-) diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 41002215..945170a6 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -82,7 +82,7 @@ } * { font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; - color: #ffffff; + color: #000000; font-weight: 500; } @font-face { @@ -125,10 +125,10 @@ user-select: none; } #issues-container > div:first-child { - border-top: 1px solid #80808020; + border-top: 1px solid #7f7f7f20; } #issues-container > div:last-child { - border-top: 1px solid #80808020; + border-top: 1px solid #7f7f7f20; } #issues-container > div { padding: 0 16px; @@ -138,7 +138,7 @@ background-repeat: no-repeat; opacity: 0.125; margin: 3px auto; - border: 1px solid #80808020; + border: 1px solid #7f7f7f20; border-radius: 4px; cursor: pointer; margin: 4px; @@ -172,24 +172,15 @@ opacity: 1; filter: blur(0); } - @media (hover: hover) { - #issues-container > div:hover { - opacity: 1; - transition: background-color 0s; - } - #issues-container > div:hover .info { - opacity: 1; - } - #issues-container > div:hover .issue-element-inner { - transition: 125ms opacity ease-in-out; - opacity: 1; - } - #issues-container:hover .issue-element-inner { - opacity: 0.5; - } + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 125ms opacity ease-in-out; + opacity: 1; } #issues-container > div:active { - background-color: #80808040; + background-color: #7f7f7f40; } #issues-container h3 { line-height: 1; @@ -202,7 +193,7 @@ p { margin: 0; line-height: 1; - color: #bfbfbf; + color: #404040; font-size: 12px; letter-spacing: 0.5px; text-rendering: geometricPrecision; @@ -212,7 +203,7 @@ li { margin: 0; line-height: 1; - color: #bfbfbf; + color: #404040; font-size: 12px; letter-spacing: 0.5px; text-rendering: geometricPrecision; @@ -250,7 +241,7 @@ font-size: 12px; text-align: center; white-space: nowrap; - background-color: #80808020; + background-color: #7f7f7f20; width: 64px; letter-spacing: 0.5px; flex-grow: 4; @@ -276,13 +267,13 @@ cursor: pointer; } .filters-container label:not([for="view-toggle"]):hover { - background-color: #80808040; + background-color: #7f7f7f40; } .filters-container label:not([for="view-toggle"]):active { - background-color: #80808080; + background-color: #7f7f7f80; } input[type="radio"]:checked + label:not([for="view-toggle"]) { - background-color: #80808080 !important; + background-color: #7f7f7f80 !important; } .labels { display: flex; @@ -352,18 +343,18 @@ border-style: unset; border-color: unset; border-image: unset; - border: 1px solid #80808020; + border: 1px solid #7f7f7f20; padding: 8px 16px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; - background-color: #80808010; + background-color: #7f7f7f10; } button:hover { - background-color: #80808020; + background-color: #7f7f7f20; } button:active { - background-color: #80808040; + background-color: #7f7f7f40; } .toolbar { position: fixed; @@ -373,7 +364,7 @@ backdrop-filter: blur(8px); padding: 4px; display: flex; - border-bottom: 1px solid #80808020; + border-bottom: 1px solid #7f7f7f20; -webkit-backdrop-filter: blur(8px); align-items: center; } @@ -526,7 +517,7 @@ } .preview hr { border-width: 0; - border-top: 1px solid #80808020; + border-top: 1px solid #7f7f7f20; } .preview p { line-height: 1.25; @@ -567,7 +558,7 @@ } .preview .preview-header a[href*="//"] svg { - fill: #ffffff80; + fill: #00000080; vertical-align: middle; height: 20px; } @@ -595,7 +586,7 @@ position: fixed; transition: 0.25s all cubic-bezier(0, 1, 1, 1); max-width: 640px; - border: 1px solid #80808020; + border: 1px solid #7f7f7f20; border-radius: 4px; opacity: 0; top: 60px; @@ -610,7 +601,7 @@ pointer-events: all; } .close-preview svg { - fill: #ffffff80; + fill: #00000080; vertical-align: middle; height: 36px; } @@ -625,7 +616,7 @@ justify-content: space-between; align-items: center; padding: 8px 16px; - border-bottom: 1px solid #80808020; + border-bottom: 1px solid #7f7f7f20; } .preview-header > a { word-wrap: initial; @@ -668,7 +659,7 @@ padding: 0; } .preview button.close-preview:hover svg { - fill: #ffffff; + fill: #000000; } .preview li { margin-bottom: 8px; @@ -684,7 +675,7 @@ padding: 4px; border: none; border-radius: 4px; - background-color: #80808020; + background-color: #7f7f7f20; width: 100%; max-width: 500px; height: 16px; @@ -717,7 +708,7 @@ bottom: 0; bottom: env(safe-area-inset-bottom); opacity: 1; - border-top: 1px solid #80808020; + border-top: 1px solid #7f7f7f20; border-bottom: unset; } #bottom-bar a { @@ -765,7 +756,7 @@ } } .svg-icon { - fill: #f8f8f8; + fill: #070707; width: 24px; height: 24px; } @@ -777,7 +768,7 @@ .github-avatar-default { width: 48px; height: 48px; - background-color: #808080; + background-color: #7f7f7f; } #view-toggle:checked::after { content: "Proposals"; @@ -810,7 +801,7 @@ vertical-align: middle; opacity: 0.25; font-size: 12px; - color: #ffffff; + color: #000000; text-decoration: none; display: inline-block; } @@ -818,10 +809,10 @@ opacity: 1; } #bottom-right svg { - fill: #ffffffbf; + fill: #000000bf; } #bottom-right:hover svg { - fill: #ffffff; + fill: #000000; } #issues-container::after { @@ -829,8 +820,8 @@ display: block; width: 48px; height: 48px; - border: 4px solid #ffffff40; - border-top: 4px solid #ffffff; + border: 4px solid #00000040; + border-top: 4px solid #000000; border-radius: 50%; animation: spin 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate, @@ -854,11 +845,11 @@ 75% { transform: rotate(5400deg); - border-bottom-color: #ffffff; + border-bottom-color: #000000; } 100% { transform: rotate(7200deg); - border-color: #ffffff; + border-color: #000000; } } @keyframes fadeOut { @@ -896,4 +887,4 @@ .preview-active div#mobile-modal-scrub { display: unset; } -} \ No newline at end of file +} diff --git a/static/style/style.css b/static/style/style.css index 6282da49..99300c03 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -42,7 +42,7 @@ display: none; } } -@media (prefers-color-scheme: light) { +@media (prefers-color-scheme: dark) { :root { --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); --background-color-default-brightness: 2%; @@ -82,7 +82,7 @@ } * { font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; - color: #000000; + color: #fff; font-weight: 500; } @font-face { @@ -125,10 +125,10 @@ user-select: none; } #issues-container > div:first-child { - border-top: 1px solid #7f7f7f20; + border-top: 1px solid #80808020; } #issues-container > div:last-child { - border-top: 1px solid #7f7f7f20; + border-top: 1px solid #80808020; } #issues-container > div { padding: 0 16px; @@ -138,7 +138,7 @@ background-repeat: no-repeat; opacity: 0.125; margin: 3px auto; - border: 1px solid #7f7f7f20; + border: 1px solid #80808020; border-radius: 4px; cursor: pointer; margin: 4px; @@ -172,24 +172,15 @@ opacity: 1; filter: blur(0); } - @media (hover: hover) { - #issues-container > div:hover { - opacity: 1; - transition: background-color 0s; - } - #issues-container > div:hover .info { - opacity: 1; - } - #issues-container > div:hover .issue-element-inner { - transition: 125ms opacity ease-in-out; - opacity: 1; - } - #issues-container:hover .issue-element-inner { - opacity: 0.5; - } + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 125ms opacity ease-in-out; + opacity: 1; } #issues-container > div:active { - background-color: #7f7f7f40; + background-color: #80808040; } #issues-container h3 { line-height: 1; @@ -202,7 +193,7 @@ p { margin: 0; line-height: 1; - color: #404040; + color: #bfbfbf; font-size: 12px; letter-spacing: 0.5px; text-rendering: geometricPrecision; @@ -212,7 +203,7 @@ li { margin: 0; line-height: 1; - color: #404040; + color: #bfbfbf; font-size: 12px; letter-spacing: 0.5px; text-rendering: geometricPrecision; @@ -250,7 +241,7 @@ font-size: 12px; text-align: center; white-space: nowrap; - background-color: #7f7f7f20; + background-color: #80808020; width: 64px; letter-spacing: 0.5px; flex-grow: 4; @@ -276,13 +267,13 @@ cursor: pointer; } .filters-container label:not([for="view-toggle"]):hover { - background-color: #7f7f7f40; + background-color: #80808040; } .filters-container label:not([for="view-toggle"]):active { - background-color: #7f7f7f80; + background-color: #80808080; } input[type="radio"]:checked + label:not([for="view-toggle"]) { - background-color: #7f7f7f80 !important; + background-color: #80808080 !important; } .labels { display: flex; @@ -352,18 +343,18 @@ border-style: unset; border-color: unset; border-image: unset; - border: 1px solid #7f7f7f20; + border: 1px solid #80808020; padding: 8px 16px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; - background-color: #7f7f7f10; + background-color: #80808010; } button:hover { - background-color: #7f7f7f20; + background-color: #80808020; } button:active { - background-color: #7f7f7f40; + background-color: #80808040; } .toolbar { position: fixed; @@ -373,7 +364,7 @@ backdrop-filter: blur(8px); padding: 4px; display: flex; - border-bottom: 1px solid #7f7f7f20; + border-bottom: 1px solid #80808020; -webkit-backdrop-filter: blur(8px); align-items: center; } @@ -526,7 +517,7 @@ } .preview hr { border-width: 0; - border-top: 1px solid #7f7f7f20; + border-top: 1px solid #80808020; } .preview p { line-height: 1.25; @@ -567,7 +558,7 @@ } .preview .preview-header a[href*="//"] svg { - fill: #00000080; + fill: #ffffff80; vertical-align: middle; height: 20px; } @@ -595,7 +586,7 @@ position: fixed; transition: 0.25s all cubic-bezier(0, 1, 1, 1); max-width: 640px; - border: 1px solid #7f7f7f20; + border: 1px solid #80808020; border-radius: 4px; opacity: 0; top: 60px; @@ -610,7 +601,7 @@ pointer-events: all; } .close-preview svg { - fill: #00000080; + fill: #ffffff80; vertical-align: middle; height: 36px; } @@ -625,7 +616,7 @@ justify-content: space-between; align-items: center; padding: 8px 16px; - border-bottom: 1px solid #7f7f7f20; + border-bottom: 1px solid #80808020; } .preview-header > a { word-wrap: initial; @@ -668,7 +659,7 @@ padding: 0; } .preview button.close-preview:hover svg { - fill: #000000; + fill: #fff; } .preview li { margin-bottom: 8px; @@ -684,7 +675,7 @@ padding: 4px; border: none; border-radius: 4px; - background-color: #7f7f7f20; + background-color: #80808020; width: 100%; max-width: 500px; height: 16px; @@ -717,7 +708,7 @@ bottom: 0; bottom: env(safe-area-inset-bottom); opacity: 1; - border-top: 1px solid #7f7f7f20; + border-top: 1px solid #80808020; border-bottom: unset; } #bottom-bar a { @@ -765,7 +756,7 @@ } } .svg-icon { - fill: #070707; + fill: #f8f8f8; width: 24px; height: 24px; } @@ -777,7 +768,7 @@ .github-avatar-default { width: 48px; height: 48px; - background-color: #7f7f7f; + background-color: #808080; } #view-toggle:checked::after { content: "Proposals"; @@ -810,7 +801,7 @@ vertical-align: middle; opacity: 0.25; font-size: 12px; - color: #000000; + color: #fff; text-decoration: none; display: inline-block; } @@ -818,10 +809,10 @@ opacity: 1; } #bottom-right svg { - fill: #000000bf; + fill: #ffffffbf; } #bottom-right:hover svg { - fill: #000000; + fill: #ffffff; } #issues-container::after { @@ -829,8 +820,8 @@ display: block; width: 48px; height: 48px; - border: 4px solid #00000040; - border-top: 4px solid #000000; + border: 4px solid #ffffff40; + border-top: 4px solid #ffffff; border-radius: 50%; animation: spin 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate, @@ -854,11 +845,11 @@ 75% { transform: rotate(5400deg); - border-bottom-color: #000000; + border-bottom-color: #ffffff; } 100% { transform: rotate(7200deg); - border-color: #000000; + border-color: #ffffff; } } @keyframes fadeOut { @@ -896,4 +887,4 @@ .preview-active div#mobile-modal-scrub { display: unset; } -} \ No newline at end of file +}