From 4dbaf3978c98a860490baa339a15735adae03405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 2 Dec 2023 13:45:21 +0900 Subject: [PATCH 1/3] feat: generate light mode style on build --- build/esbuild-build.ts | 14 +- build/plugins/invert-colors.ts | 49 +++++ src/home/home-controller.ts | 1 + src/home/home.ts | 25 +++ static/index.html | 2 +- static/style/inverted-style.css | 327 ++++++++++++++++++++++++++++++++ 6 files changed, 409 insertions(+), 9 deletions(-) create mode 100644 build/plugins/invert-colors.ts create mode 100644 static/style/inverted-style.css diff --git a/build/esbuild-build.ts b/build/esbuild-build.ts index e361c5ad..b61d3452 100644 --- a/build/esbuild-build.ts +++ b/build/esbuild-build.ts @@ -1,20 +1,17 @@ +import * as dotenv from "dotenv"; import esbuild from "esbuild"; +import { invertColors } from "./plugins/invert-colors"; const typescriptEntries = [ "src/home/home.ts", // "src/login/login.ts", // "src/authenticated/authenticated.ts" ]; -// const cssEntries = ["static/style.css"]; -import * as dotenv from "dotenv"; -dotenv.config(); -const entries = [ - ...typescriptEntries, - // ...cssEntries -]; +const cssEntries = ["static/style/style.css"]; +const entries = [...typescriptEntries, ...cssEntries]; export const esBuildContext: esbuild.BuildOptions = { define: createEnvDefines(["GITHUB_TOKEN", "SUPABASE_URL", "SUPABASE_KEY"]), - + plugins: [invertColors], sourcemap: true, entryPoints: entries, bundle: true, @@ -42,6 +39,7 @@ esbuild function createEnvDefines(variableNames: string[]): Record { const defines: Record = {}; + dotenv.config(); for (const name of variableNames) { const envVar = process.env[name]; if (envVar !== undefined) { diff --git a/build/plugins/invert-colors.ts b/build/plugins/invert-colors.ts new file mode 100644 index 00000000..10df1e73 --- /dev/null +++ b/build/plugins/invert-colors.ts @@ -0,0 +1,49 @@ +import esbuild from "esbuild"; +import fs from "fs"; +import path from "path"; + +export const invertColors: esbuild.Plugin = { + name: "invert-colors", + setup(build) { + build.onLoad({ filter: /\.css$/ }, async (args) => { + const contents = await fs.promises.readFile(args.path, "utf8"); + + // Invert colors in the CSS content + const invertedContents = contents.replace(/#([0-9A-Fa-f]{3,8})/g, (match) => { + // Convert hex color to RGB, supporting three and six character hex codes + let color = match.startsWith("#") ? match.slice(1) : match; + if (color.length === 3) { + color = color.split('').map(char => char + char).join(''); + } + const r = parseInt(color.slice(0, 2), 16); + const g = parseInt(color.slice(2, 4), 16); + const b = parseInt(color.slice(4, 6), 16); + const a = color.length === 8 ? parseInt(color.slice(6, 8), 16) / 255 : 1; + + // Invert RGB values + const invertedR = (255 - r).toString(16).padStart(2, "0"); + const invertedG = (255 - g).toString(16).padStart(2, "0"); + const invertedB = (255 - b).toString(16).padStart(2, "0"); + const invertedA = + a !== 1 + ? Math.round((1 - a) * 255) + .toString(16) + .padStart(2, "0") + : ""; + + // Return the inverted color + return `#${invertedR}${invertedG}${invertedB}${invertedA}`; + }); + + // Define the output path for the new CSS file + const outputPath = path.resolve("static/style", "inverted-style.css"); + const outputDir = path.dirname(outputPath); + await fs.promises.mkdir(outputDir, { recursive: true }); + // Write the new contents to the output file + await fs.promises.writeFile(outputPath, invertedContents, "utf8"); + + // Return an empty result to esbuild since we're writing the file ourselves + return { contents: "", loader: "css" }; + }); + }, +}; diff --git a/src/home/home-controller.ts b/src/home/home-controller.ts index 79a05e3e..c975809e 100644 --- a/src/home/home-controller.ts +++ b/src/home/home-controller.ts @@ -96,6 +96,7 @@ export function homeController(container: HTMLDivElement, issues: GitHubIssue[]) } container.appendChild(issueWrapper); + container.classList.add("ready"); } }); } diff --git a/src/home/home.ts b/src/home/home.ts index 80ef7c00..da290f2e 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -16,3 +16,28 @@ displayGitHubIssues(gitHubToken) .catch((error) => { console.error(error); }); + +const isLight = prefersLightMode(); +if (isLight) { + downloadStylesheet("style/inverted-style.css"); +} + +function downloadStylesheet(url: string) { + const xhr = new XMLHttpRequest(); + xhr.open("GET", url, true); + xhr.onreadystatechange = () => { + if (xhr.readyState === XMLHttpRequest.DONE) { + if (xhr.status === 200) { + const style = document.createElement("style"); + style.textContent = xhr.responseText; + document.head.appendChild(style); + } else { + console.error("Failed to load stylesheet", url); + } + } + }; + xhr.send(); +} +function prefersLightMode() { + return window.matchMedia("(prefers-color-scheme: light)").matches; +} diff --git a/static/index.html b/static/index.html index 33b7b6a4..d2fa1feb 100644 --- a/static/index.html +++ b/static/index.html @@ -17,6 +17,6 @@ >Ubiquity DAO | DevPool Directory - + diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css new file mode 100644 index 00000000..183ace2e --- /dev/null +++ b/static/style/inverted-style.css @@ -0,0 +1,327 @@ +:root { + --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); +} +#logo { + height: 28px; + margin-right: 2px; +} +#branding { + opacity: 0.5; + transition: 0.125s opacity ease-in-out; +} +#branding:hover { + opacity: 1; +} +#branding > span { + padding: 8px; + /* line-height: 1; */ +} +html, +body { + background-color: #f9f9e5; + margin: 0; + padding: 0; + background-image: var(--grid-background-image); +} +* { + font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; + color: #000000; + font-weight: 400; +} +@font-face { + font-family: "Ubiquity Nova"; + font-style: normal; + font-weight: 400; + src: url(./fonts/ubiquity-nova-standard.eot); + src: + url(./fonts/ubiquity-nova-standard.eot#iefix) format("embedded-opentype"), + url(./fonts/ubiquity-nova-standard.woff) format("woff"), + url(./fonts/ubiquity-nova-standard.ttf) format("truetype"); +} + +#issues-container { + /* padding: 8px; */ + max-width: 640px; + margin: auto; + /* border-left: 1px solid #7f7f7fef; */ + padding: 48px 0; + /* background: linear-gradient(to bottom, #7f7f7fff 0%, #7f7f7f 15%, #7f7f7f 85%, #7f7f7fff 100%); */ + -webkit-mask-image: linear-gradient(to bottom, #ffffffff, #ffffff 0%, #ffffff 75%, #ffffffff 100%); + height: calc(100vh - 96px); + overflow: scroll; + scrollbar-width: none; /* For Firefox */ + -ms-overflow-style: none; /* For Internet Explorer and Edge */ +} +&::-webkit-scrollbar { + display: none; /* For Chrome, Safari, and Opera */ +} + +#issues-container:hover .issue-element-inner { + opacity: 0.5; + transition: 0.125s opacity ease-in-out; +} + +#issues-container * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#issues-container > div:first-child { + border-top: 1px solid #7f7f7fdf; +} +#issues-container > div:last-child { + border-top: 1px solid #7f7f7fdf; +} + +#issues-container > div { + padding: 0 16px; + overflow: hidden; + background-size: 20px; + background-position: 12px calc(100% - 9px); + background-repeat: no-repeat; + opacity: 0.25; + margin: 3px auto; + border: 1px solid #7f7f7fdf; + border-radius: 4px; + cursor: pointer; +} + +#issues-container > div.active { + transition: 0.125s all ease-in-out; + margin-left: 1px; + opacity: 1; + filter: blur(0px); +} + +#issues-container > div:hover { + /* background-position: 9px calc(100% - 9px); */ + opacity: 1; + + background-color: #7f7f7fef; + transition: background-color 0s; +} + +#issues-container > div:hover .info { + opacity: 1; +} +#issues-container > div:hover .issue-element-inner { + transition: 0.125s opacity ease-in-out; + opacity: 1; +} +#issues-container > div:active { + /* border-left: 4px solid #ff0000; */ + background-color: #7f7f7fbf; +} + +h3 { + margin: 0 0 0 12px; + line-height: 1; + font-size: 16px; + text-overflow: ellipsis; +} + +p { + margin: 0; + line-height: 1; + color: #00000040; + font-size: 12px; + text-align: right; + letter-spacing: 0.5px; + text-rendering: geometricPrecision; + top: 0; + right: 0; +} + +.issue-element-inner { + position: relative; + text-align: left; + display: flex; + padding: 12px 0px; +} + +p.organization-name { + opacity: 0.5; + display: inline-block; +} +p.repository-name { + display: inline-block; + margin-left: 2px; +} +.labels > .label:first-child { + margin-left: 0; +} +.labels > .label { + display: inline-block; + padding: 4px 6px; + border-radius: 4px; + margin: 0px 4px 0px; + font-size: 12px; + text-align: center; + white-space: nowrap; + background-color: #7f7f7fbf; + width: 64px; + letter-spacing: 0.5px; + flex-grow: 3; +} +.labels { + text-align: right; + display: inline-block; + display: flex; +} + +.partner { + bottom: 0; + text-align: right; + margin: 4px 4px 0; +} + +body { + text-align: center; +} +.info { + opacity: 0.66; + transition: 0.125s opacity ease-in-out; +} + +.title { + display: flex; + align-items: center; +} + +.label.pricing { +} + +#issues-container > .issue-element-wrapper { + opacity: 0.5; + /* margin-left: 100vw; */ + transition: 0.33s all cubic-bezier(0, 1, 1, 1); + filter: blur(4px); +} + +button { + appearance: unset; + text-rendering: unset; + color: unset; + letter-spacing: unset; + word-spacing: unset; + line-height: unset; + text-transform: unset; + text-indent: unset; + text-shadow: unset; + display: unset; + text-align: unset; + align-items: unset; + cursor: pointer; + box-sizing: unset; + background-color: unset; + margin: unset; + padding-block: unset; + padding-inline: unset; + border-width: unset; + border-style: unset; + border-color: unset; + border-image: unset; + border: 1px solid #7f7f7fdf; + padding: 8px 16px; + border-radius: 4px; + text-transform: uppercase; + letter-spacing: 1px; + background-color: #7f7f7fef; +} +button:hover { + background-color: #7f7f7fdf; +} +button:active { + background-color: #7f7f7fbf; +} + +#toolbar { + position: fixed; + width: 100vw; + height: 48px; + /* background: red; */ + bottom: 0; + backdrop-filter: blur(8px); + padding: 4px; + display: flex; + /* text-align: right; */ + border-top: 1px solid #7f7f7fdf; + /* text-align: center; */ + /* align-items: stretch; */ + justify-content: center; + -webkit-backdrop-filter: blur(8px); + /* display: flex; */ + justify-content: space-between; + /* align-items: flex-end; This will align the items to the bottom of the container */ + /* width: 100%; */ + /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */ +} +#toolbar > * { + /* justify-content: center; */ + align-items: center; + display: inline-flex; + text-align: left; + margin: 0 16px; +} +/* #toolbar > *:first-child { + padding-left: 16px; +} +#toolbar > *:last-child { + padding-right: 16px; +} */ +#authenticated > * { + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0 4px; + max-height: 48px; +} +#authenticated > img { + border-radius: 50%; + height: 40px; + padding: 4px 0; +} + +#toolbar[data-authenticated] > * { + /* opacity: 0; */ + /* transition: 1s opacity ease-in-out; */ +} +#toolbar[data-authenticated="true"] > #github-login-button { + display: none; +} + +#toolbar { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0; + transition: 0.5s opacity ease-in-out; + background-image: var(--grid-background-image); +} + +#toolbar.ready { + opacity: 1; +} + +#branding { + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 400; + text-rendering: geometricPrecision; +} + +.full { + display: none !important; +} +@media screen and (min-width: 640px) { + .full { + display: unset !important; + } +} + +#toolbar > button { + text-align: center; +} From 13c076f07addf55e42fb1cd5c5b60cab15d61628 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 2 Dec 2023 14:07:24 +0900 Subject: [PATCH 2/3] feat: dynamic light mode style --- build/plugins/invert-colors.ts | 38 +- src/home/home.ts | 47 +-- static/index.html | 2 + static/style/inverted-style.css | 590 ++++++++++++++++---------------- static/style/special.css | 10 + static/style/style.css | 590 ++++++++++++++++---------------- 6 files changed, 650 insertions(+), 627 deletions(-) create mode 100644 static/style/special.css diff --git a/build/plugins/invert-colors.ts b/build/plugins/invert-colors.ts index 10df1e73..b8003fb8 100644 --- a/build/plugins/invert-colors.ts +++ b/build/plugins/invert-colors.ts @@ -8,31 +8,33 @@ export const invertColors: esbuild.Plugin = { build.onLoad({ filter: /\.css$/ }, async (args) => { const contents = await fs.promises.readFile(args.path, "utf8"); - // Invert colors in the CSS content - const invertedContents = contents.replace(/#([0-9A-Fa-f]{3,8})/g, (match) => { - // Convert hex color to RGB, supporting three and six character hex codes - let color = match.startsWith("#") ? match.slice(1) : match; + const updatedContents = contents.replace(/prefers-color-scheme: dark/g, "prefers-color-scheme: light"); + + // Invert greyscale colors and accommodate alpha channels in the CSS content + const invertedContents = updatedContents.replace(/#([0-9A-Fa-f]{3,6})([0-9A-Fa-f]{2})?\b/g, (match, rgb, alpha) => { + let color = rgb.startsWith("#") ? rgb.slice(1) : rgb; if (color.length === 3) { - color = color.split('').map(char => char + char).join(''); + color = color + .split("") + .map((char) => char + char) + .join(""); } const r = parseInt(color.slice(0, 2), 16); const g = parseInt(color.slice(2, 4), 16); const b = parseInt(color.slice(4, 6), 16); - const a = color.length === 8 ? parseInt(color.slice(6, 8), 16) / 255 : 1; + // const a = alpha ? parseInt(alpha, 16) : 255; - // Invert RGB values - const invertedR = (255 - r).toString(16).padStart(2, "0"); - const invertedG = (255 - g).toString(16).padStart(2, "0"); - const invertedB = (255 - b).toString(16).padStart(2, "0"); - const invertedA = - a !== 1 - ? Math.round((1 - a) * 255) - .toString(16) - .padStart(2, "0") - : ""; + // Check if the color is greyscale (R, G, and B components are equal) + if (r === g && g === b) { + // Invert RGB values and calculate inverted alpha + const invertedColorValue = (255 - r).toString(16).padStart(2, "0"); + // const invertedAlphaValue = (255 - a).toString(16).padStart(2, "0"); + // Return the inverted greyscale color with alpha channel + return `#${invertedColorValue}${invertedColorValue}${invertedColorValue}${alpha}`; + } - // Return the inverted color - return `#${invertedR}${invertedG}${invertedB}${invertedA}`; + // If the color is not greyscale, return it as is, including the alpha channel + return `#${color}${alpha || ''}`; }); // Define the output path for the new CSS file diff --git a/src/home/home.ts b/src/home/home.ts index da290f2e..981bed20 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -17,27 +17,28 @@ displayGitHubIssues(gitHubToken) console.error(error); }); -const isLight = prefersLightMode(); -if (isLight) { - downloadStylesheet("style/inverted-style.css"); -} +// const isLight = prefersLightMode(); +// if (isLight) { +// console.trace({ isLight }); +// downloadStylesheet("style/inverted-style.css"); +// } -function downloadStylesheet(url: string) { - const xhr = new XMLHttpRequest(); - xhr.open("GET", url, true); - xhr.onreadystatechange = () => { - if (xhr.readyState === XMLHttpRequest.DONE) { - if (xhr.status === 200) { - const style = document.createElement("style"); - style.textContent = xhr.responseText; - document.head.appendChild(style); - } else { - console.error("Failed to load stylesheet", url); - } - } - }; - xhr.send(); -} -function prefersLightMode() { - return window.matchMedia("(prefers-color-scheme: light)").matches; -} +// function downloadStylesheet(url: string) { +// const xhr = new XMLHttpRequest(); +// xhr.open("GET", url, true); +// xhr.onreadystatechange = () => { +// if (xhr.readyState === XMLHttpRequest.DONE) { +// if (xhr.status === 200) { +// const style = document.createElement("style"); +// style.textContent = xhr.responseText; +// document.head.appendChild(style); +// } else { +// console.error("Failed to load stylesheet", url); +// } +// } +// }; +// xhr.send(); +// } +// function prefersLightMode() { +// return window.matchMedia("(prefers-color-scheme: light)").matches; +// } diff --git a/static/index.html b/static/index.html index d2fa1feb..75ddf8d7 100644 --- a/static/index.html +++ b/static/index.html @@ -4,7 +4,9 @@ DevPool Directory | Ubiquity DAO + +
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 183ace2e..3fbfe77d 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -1,327 +1,331 @@ -:root { - --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); -} -#logo { - height: 28px; - margin-right: 2px; -} -#branding { - opacity: 0.5; - transition: 0.125s opacity ease-in-out; -} -#branding:hover { - opacity: 1; -} -#branding > span { - padding: 8px; - /* line-height: 1; */ -} -html, -body { - background-color: #f9f9e5; - margin: 0; - padding: 0; - background-image: var(--grid-background-image); -} -* { - font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; - color: #000000; - font-weight: 400; -} -@font-face { - font-family: "Ubiquity Nova"; - font-style: normal; - font-weight: 400; - src: url(./fonts/ubiquity-nova-standard.eot); - src: - url(./fonts/ubiquity-nova-standard.eot#iefix) format("embedded-opentype"), - url(./fonts/ubiquity-nova-standard.woff) format("woff"), - url(./fonts/ubiquity-nova-standard.ttf) format("truetype"); -} +@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"); + } -#issues-container { - /* padding: 8px; */ - max-width: 640px; - margin: auto; - /* border-left: 1px solid #7f7f7fef; */ - padding: 48px 0; - /* background: linear-gradient(to bottom, #7f7f7fff 0%, #7f7f7f 15%, #7f7f7f 85%, #7f7f7fff 100%); */ - -webkit-mask-image: linear-gradient(to bottom, #ffffffff, #ffffff 0%, #ffffff 75%, #ffffffff 100%); - height: calc(100vh - 96px); - overflow: scroll; - scrollbar-width: none; /* For Firefox */ - -ms-overflow-style: none; /* For Internet Explorer and Edge */ -} -&::-webkit-scrollbar { - display: none; /* For Chrome, Safari, and Opera */ -} -#issues-container:hover .issue-element-inner { - opacity: 0.5; - transition: 0.125s opacity ease-in-out; -} + #logo { + height: 28px; + margin-right: 2px; + } + #branding { + opacity: 0.5; + transition: 0.125s opacity ease-in-out; + } + #branding:hover { + opacity: 1; + } + #branding > span { + padding: 8px; + /* line-height: 1; */ + } + html, + body { + margin: 0; + padding: 0; + background-image: var(--grid-background-image); + } -#issues-container * { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} + * { + font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; + color: #000000undefined; + font-weight: 400; + } + @font-face { + font-family: "Ubiquity Nova"; + font-style: normal; + font-weight: 400; + src: url(./fonts/ubiquity-nova-standard.eot); + src: + url(./fonts/ubiquity-nova-standard.eot#iefix) format("embedded-opentype"), + url(./fonts/ubiquity-nova-standard.woff) format("woff"), + url(./fonts/ubiquity-nova-standard.ttf) format("truetype"); + } -#issues-container > div:first-child { - border-top: 1px solid #7f7f7fdf; -} -#issues-container > div:last-child { - border-top: 1px solid #7f7f7fdf; -} + #issues-container { + /* padding: 8px; */ + max-width: 640px; + margin: auto; + /* border-left: 1px solid #7f7f7f10; */ + padding: 48px 0; + /* background: linear-gradient(to bottom, #7f7f7f00 0%, #7f7f7fff 15%, #7f7f7fff 85%, #7f7f7f00 100%); */ + -webkit-mask-image: linear-gradient(to bottom, #ffffff00, #ffffffff 0%, #ffffffff 75%, #ffffff00 100%); + height: calc(100vh - 96px); + overflow: scroll; + scrollbar-width: none; /* For Firefox */ + -ms-overflow-style: none; /* For Internet Explorer and Edge */ + } + &::-webkit-scrollbar { + display: none; /* For Chrome, Safari, and Opera */ + } -#issues-container > div { - padding: 0 16px; - overflow: hidden; - background-size: 20px; - background-position: 12px calc(100% - 9px); - background-repeat: no-repeat; - opacity: 0.25; - margin: 3px auto; - border: 1px solid #7f7f7fdf; - border-radius: 4px; - cursor: pointer; -} + #issues-container:hover .issue-element-inner { + opacity: 0.5; + transition: 0.125s opacity ease-in-out; + } -#issues-container > div.active { - transition: 0.125s all ease-in-out; - margin-left: 1px; - opacity: 1; - filter: blur(0px); -} + #issues-container * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } -#issues-container > div:hover { - /* background-position: 9px calc(100% - 9px); */ - opacity: 1; + #issues-container > div:first-child { + border-top: 1px solid #7f7f7f20; + } + #issues-container > div:last-child { + border-top: 1px solid #7f7f7f20; + } - background-color: #7f7f7fef; - transition: background-color 0s; -} + #issues-container > div { + padding: 0 16px; + overflow: hidden; + background-size: 20px; + background-position: 12px calc(100% - 9px); + background-repeat: no-repeat; + opacity: 0.25; + margin: 3px auto; + border: 1px solid #7f7f7f20; + border-radius: 4px; + cursor: pointer; + } -#issues-container > div:hover .info { - opacity: 1; -} -#issues-container > div:hover .issue-element-inner { - transition: 0.125s opacity ease-in-out; - opacity: 1; -} -#issues-container > div:active { - /* border-left: 4px solid #ff0000; */ - background-color: #7f7f7fbf; -} + #issues-container > div.active { + transition: 0.125s all ease-in-out; + margin-left: 1px; + opacity: 1; + filter: blur(0px); + } -h3 { - margin: 0 0 0 12px; - line-height: 1; - font-size: 16px; - text-overflow: ellipsis; -} + #issues-container > div:hover { + /* background-position: 9px calc(100% - 9px); */ + opacity: 1; -p { - margin: 0; - line-height: 1; - color: #00000040; - font-size: 12px; - text-align: right; - letter-spacing: 0.5px; - text-rendering: geometricPrecision; - top: 0; - right: 0; -} + background-color: #7f7f7f10; + transition: background-color 0s; + } -.issue-element-inner { - position: relative; - text-align: left; - display: flex; - padding: 12px 0px; -} + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 0.125s opacity ease-in-out; + opacity: 1; + } + #issues-container > div:active { + /* border-left: 4px solid #00ffff; */ + background-color: #7f7f7f40; + } -p.organization-name { - opacity: 0.5; - display: inline-block; -} -p.repository-name { - display: inline-block; - margin-left: 2px; -} -.labels > .label:first-child { - margin-left: 0; -} -.labels > .label { - display: inline-block; - padding: 4px 6px; - border-radius: 4px; - margin: 0px 4px 0px; - font-size: 12px; - text-align: center; - white-space: nowrap; - background-color: #7f7f7fbf; - width: 64px; - letter-spacing: 0.5px; - flex-grow: 3; -} -.labels { - text-align: right; - display: inline-block; - display: flex; -} + h3 { + margin: 0 0 0 12px; + line-height: 1; + font-size: 16px; + text-overflow: ellipsis; + } -.partner { - bottom: 0; - text-align: right; - margin: 4px 4px 0; -} + p { + margin: 0; + line-height: 1; + color: #404040undefined; + font-size: 12px; + text-align: right; + letter-spacing: 0.5px; + text-rendering: geometricPrecision; + top: 0; + right: 0; + } -body { - text-align: center; -} -.info { - opacity: 0.66; - transition: 0.125s opacity ease-in-out; -} + .issue-element-inner { + position: relative; + text-align: left; + display: flex; + padding: 12px 0px; + } -.title { - display: flex; - align-items: center; -} + p.organization-name { + opacity: 0.5; + display: inline-block; + } + p.repository-name { + display: inline-block; + margin-left: 2px; + } + .labels > .label:first-child { + margin-left: 0; + } + .labels > .label { + display: inline-block; + padding: 4px 6px; + border-radius: 4px; + margin: 0px 4px 0px; + font-size: 12px; + text-align: center; + white-space: nowrap; + background-color: #7f7f7f40; + width: 64px; + letter-spacing: 0.5px; + flex-grow: 3; + } + .labels { + text-align: right; + display: inline-block; + display: flex; + } -.label.pricing { -} + .partner { + bottom: 0; + text-align: right; + margin: 4px 4px 0; + } -#issues-container > .issue-element-wrapper { - opacity: 0.5; - /* margin-left: 100vw; */ - transition: 0.33s all cubic-bezier(0, 1, 1, 1); - filter: blur(4px); -} + body { + text-align: center; + } + .info { + opacity: 0.66; + transition: 0.125s opacity ease-in-out; + } -button { - appearance: unset; - text-rendering: unset; - color: unset; - letter-spacing: unset; - word-spacing: unset; - line-height: unset; - text-transform: unset; - text-indent: unset; - text-shadow: unset; - display: unset; - text-align: unset; - align-items: unset; - cursor: pointer; - box-sizing: unset; - background-color: unset; - margin: unset; - padding-block: unset; - padding-inline: unset; - border-width: unset; - border-style: unset; - border-color: unset; - border-image: unset; - border: 1px solid #7f7f7fdf; - padding: 8px 16px; - border-radius: 4px; - text-transform: uppercase; - letter-spacing: 1px; - background-color: #7f7f7fef; -} -button:hover { - background-color: #7f7f7fdf; -} -button:active { - background-color: #7f7f7fbf; -} + .title { + display: flex; + align-items: center; + } -#toolbar { - position: fixed; - width: 100vw; - height: 48px; - /* background: red; */ - bottom: 0; - backdrop-filter: blur(8px); - padding: 4px; - display: flex; - /* text-align: right; */ - border-top: 1px solid #7f7f7fdf; - /* text-align: center; */ - /* align-items: stretch; */ - justify-content: center; - -webkit-backdrop-filter: blur(8px); - /* display: flex; */ - justify-content: space-between; - /* align-items: flex-end; This will align the items to the bottom of the container */ - /* width: 100%; */ - /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */ -} -#toolbar > * { - /* justify-content: center; */ - align-items: center; - display: inline-flex; - text-align: left; - margin: 0 16px; -} -/* #toolbar > *:first-child { + .label.pricing { + } + + #issues-container > .issue-element-wrapper { + opacity: 0.5; + /* margin-left: 100vw; */ + transition: 0.33s all cubic-bezier(0, 1, 1, 1); + filter: blur(4px); + } + + button { + appearance: unset; + text-rendering: unset; + color: unset; + letter-spacing: unset; + word-spacing: unset; + line-height: unset; + text-transform: unset; + text-indent: unset; + text-shadow: unset; + display: unset; + text-align: unset; + align-items: unset; + cursor: pointer; + box-sizing: unset; + background-color: unset; + margin: unset; + padding-block: unset; + padding-inline: unset; + border-width: unset; + border-style: unset; + border-color: unset; + border-image: unset; + border: 1px solid #7f7f7f20; + padding: 8px 16px; + border-radius: 4px; + text-transform: uppercase; + letter-spacing: 1px; + background-color: #7f7f7f10; + } + button:hover { + background-color: #7f7f7f20; + } + button:active { + background-color: #7f7f7f40; + } + + #toolbar { + position: fixed; + width: 100vw; + height: 48px; + /* background: red; */ + bottom: 0; + backdrop-filter: blur(8px); + padding: 4px; + display: flex; + /* text-align: right; */ + border-top: 1px solid #7f7f7f20; + /* text-align: center; */ + /* align-items: stretch; */ + justify-content: center; + -webkit-backdrop-filter: blur(8px); + /* display: flex; */ + justify-content: space-between; + /* align-items: flex-end; This will align the items to the bottom of the container */ + /* width: 100%; */ + /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */ + } + #toolbar > * { + /* justify-content: center; */ + align-items: center; + display: inline-flex; + text-align: left; + margin: 0 16px; + } + /* #toolbar > *:first-child { padding-left: 16px; } #toolbar > *:last-child { padding-right: 16px; } */ -#authenticated > * { - display: inline-flex; - align-items: center; - justify-content: center; - margin: 0 4px; - max-height: 48px; -} -#authenticated > img { - border-radius: 50%; - height: 40px; - padding: 4px 0; -} + #authenticated > * { + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0 4px; + max-height: 48px; + } + #authenticated > img { + border-radius: 50%; + height: 40px; + padding: 4px 0; + } -#toolbar[data-authenticated] > * { - /* opacity: 0; */ - /* transition: 1s opacity ease-in-out; */ -} -#toolbar[data-authenticated="true"] > #github-login-button { - display: none; -} + #toolbar[data-authenticated] > * { + /* opacity: 0; */ + /* transition: 1s opacity ease-in-out; */ + } + #toolbar[data-authenticated="true"] > #github-login-button { + display: none; + } -#toolbar { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - opacity: 0; - transition: 0.5s opacity ease-in-out; - background-image: var(--grid-background-image); -} + #toolbar { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0; + transition: 0.5s opacity ease-in-out; + background-image: var(--grid-background-image); + } -#toolbar.ready { - opacity: 1; -} + #toolbar.ready { + opacity: 1; + } -#branding { - text-transform: uppercase; - letter-spacing: 1.5px; - font-weight: 400; - text-rendering: geometricPrecision; -} + #branding { + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 400; + text-rendering: geometricPrecision; + } -.full { - display: none !important; -} -@media screen and (min-width: 640px) { .full { - display: unset !important; + display: none !important; + } + @media screen and (min-width: 640px) { + .full { + display: unset !important; + } } -} -#toolbar > button { - text-align: center; + #toolbar > button { + text-align: center; + } } diff --git a/static/style/special.css b/static/style/special.css new file mode 100644 index 00000000..302a45d7 --- /dev/null +++ b/static/style/special.css @@ -0,0 +1,10 @@ +@media (prefers-color-scheme: dark) { + html { + background-color: #06061aff; + } +} +@media (prefers-color-scheme: light) { + html { + background-color: #f0f0f0; + } +} diff --git a/static/style/style.css b/static/style/style.css index 1d5f33af..c9d3d148 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -1,327 +1,331 @@ -:root { - --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); -} -#logo { - height: 28px; - margin-right: 2px; -} -#branding { - opacity: 0.5; - transition: 0.125s opacity ease-in-out; -} -#branding:hover { - opacity: 1; -} -#branding > span { - padding: 8px; - /* line-height: 1; */ -} -html, -body { - background-color: #06061aff; - margin: 0; - padding: 0; - background-image: var(--grid-background-image); -} -* { - font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; - color: #fff; - font-weight: 400; -} -@font-face { - font-family: "Ubiquity Nova"; - font-style: normal; - font-weight: 400; - src: url(./fonts/ubiquity-nova-standard.eot); - src: - url(./fonts/ubiquity-nova-standard.eot#iefix) format("embedded-opentype"), - url(./fonts/ubiquity-nova-standard.woff) format("woff"), - url(./fonts/ubiquity-nova-standard.ttf) format("truetype"); -} +@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"); + } -#issues-container { - /* padding: 8px; */ - max-width: 640px; - margin: auto; - /* border-left: 1px solid #80808010; */ - padding: 48px 0; - /* background: linear-gradient(to bottom, #80808000 0%, #808080ff 15%, #808080ff 85%, #80808000 100%); */ - -webkit-mask-image: linear-gradient(to bottom, #00000000, #000000ff 0%, #000000ff 75%, #00000000 100%); - height: calc(100vh - 96px); - overflow: scroll; - scrollbar-width: none; /* For Firefox */ - -ms-overflow-style: none; /* For Internet Explorer and Edge */ -} -&::-webkit-scrollbar { - display: none; /* For Chrome, Safari, and Opera */ -} -#issues-container:hover .issue-element-inner { - opacity: 0.5; - transition: 0.125s opacity ease-in-out; -} + #logo { + height: 28px; + margin-right: 2px; + } + #branding { + opacity: 0.5; + transition: 0.125s opacity ease-in-out; + } + #branding:hover { + opacity: 1; + } + #branding > span { + padding: 8px; + /* line-height: 1; */ + } + html, + body { + margin: 0; + padding: 0; + background-image: var(--grid-background-image); + } -#issues-container * { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} + * { + font-family: "Proxima Nova", "Ubiquity Nova", sans-serif; + color: #fff; + font-weight: 400; + } + @font-face { + font-family: "Ubiquity Nova"; + font-style: normal; + font-weight: 400; + src: url(./fonts/ubiquity-nova-standard.eot); + src: + url(./fonts/ubiquity-nova-standard.eot#iefix) format("embedded-opentype"), + url(./fonts/ubiquity-nova-standard.woff) format("woff"), + url(./fonts/ubiquity-nova-standard.ttf) format("truetype"); + } -#issues-container > div:first-child { - border-top: 1px solid #80808020; -} -#issues-container > div:last-child { - border-top: 1px solid #80808020; -} + #issues-container { + /* padding: 8px; */ + max-width: 640px; + margin: auto; + /* border-left: 1px solid #80808010; */ + padding: 48px 0; + /* background: linear-gradient(to bottom, #80808000 0%, #808080ff 15%, #808080ff 85%, #80808000 100%); */ + -webkit-mask-image: linear-gradient(to bottom, #00000000, #000000ff 0%, #000000ff 75%, #00000000 100%); + height: calc(100vh - 96px); + overflow: scroll; + scrollbar-width: none; /* For Firefox */ + -ms-overflow-style: none; /* For Internet Explorer and Edge */ + } + &::-webkit-scrollbar { + display: none; /* For Chrome, Safari, and Opera */ + } -#issues-container > div { - padding: 0 16px; - overflow: hidden; - background-size: 20px; - background-position: 12px calc(100% - 9px); - background-repeat: no-repeat; - opacity: 0.25; - margin: 3px auto; - border: 1px solid #80808020; - border-radius: 4px; - cursor: pointer; -} + #issues-container:hover .issue-element-inner { + opacity: 0.5; + transition: 0.125s opacity ease-in-out; + } -#issues-container > div.active { - transition: 0.125s all ease-in-out; - margin-left: 1px; - opacity: 1; - filter: blur(0px); -} + #issues-container * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } -#issues-container > div:hover { - /* background-position: 9px calc(100% - 9px); */ - opacity: 1; + #issues-container > div:first-child { + border-top: 1px solid #80808020; + } + #issues-container > div:last-child { + border-top: 1px solid #80808020; + } - background-color: #80808010; - transition: background-color 0s; -} + #issues-container > div { + padding: 0 16px; + overflow: hidden; + background-size: 20px; + background-position: 12px calc(100% - 9px); + background-repeat: no-repeat; + opacity: 0.25; + margin: 3px auto; + border: 1px solid #80808020; + border-radius: 4px; + cursor: pointer; + } -#issues-container > div:hover .info { - opacity: 1; -} -#issues-container > div:hover .issue-element-inner { - transition: 0.125s opacity ease-in-out; - opacity: 1; -} -#issues-container > div:active { - /* border-left: 4px solid #00ffff; */ - background-color: #80808040; -} + #issues-container > div.active { + transition: 0.125s all ease-in-out; + margin-left: 1px; + opacity: 1; + filter: blur(0px); + } -h3 { - margin: 0 0 0 12px; - line-height: 1; - font-size: 16px; - text-overflow: ellipsis; -} + #issues-container > div:hover { + /* background-position: 9px calc(100% - 9px); */ + opacity: 1; -p { - margin: 0; - line-height: 1; - color: #ffffffbf; - font-size: 12px; - text-align: right; - letter-spacing: 0.5px; - text-rendering: geometricPrecision; - top: 0; - right: 0; -} + background-color: #80808010; + transition: background-color 0s; + } -.issue-element-inner { - position: relative; - text-align: left; - display: flex; - padding: 12px 0px; -} + #issues-container > div:hover .info { + opacity: 1; + } + #issues-container > div:hover .issue-element-inner { + transition: 0.125s opacity ease-in-out; + opacity: 1; + } + #issues-container > div:active { + /* border-left: 4px solid #00ffff; */ + background-color: #80808040; + } -p.organization-name { - opacity: 0.5; - display: inline-block; -} -p.repository-name { - display: inline-block; - margin-left: 2px; -} -.labels > .label:first-child { - margin-left: 0; -} -.labels > .label { - display: inline-block; - padding: 4px 6px; - border-radius: 4px; - margin: 0px 4px 0px; - font-size: 12px; - text-align: center; - white-space: nowrap; - background-color: #80808040; - width: 64px; - letter-spacing: 0.5px; - flex-grow: 3; -} -.labels { - text-align: right; - display: inline-block; - display: flex; -} + h3 { + margin: 0 0 0 12px; + line-height: 1; + font-size: 16px; + text-overflow: ellipsis; + } -.partner { - bottom: 0; - text-align: right; - margin: 4px 4px 0; -} + p { + margin: 0; + line-height: 1; + color: #bfbfbf; + font-size: 12px; + text-align: right; + letter-spacing: 0.5px; + text-rendering: geometricPrecision; + top: 0; + right: 0; + } -body { - text-align: center; -} -.info { - opacity: 0.66; - transition: 0.125s opacity ease-in-out; -} + .issue-element-inner { + position: relative; + text-align: left; + display: flex; + padding: 12px 0px; + } -.title { - display: flex; - align-items: center; -} + p.organization-name { + opacity: 0.5; + display: inline-block; + } + p.repository-name { + display: inline-block; + margin-left: 2px; + } + .labels > .label:first-child { + margin-left: 0; + } + .labels > .label { + display: inline-block; + padding: 4px 6px; + border-radius: 4px; + margin: 0px 4px 0px; + font-size: 12px; + text-align: center; + white-space: nowrap; + background-color: #80808040; + width: 64px; + letter-spacing: 0.5px; + flex-grow: 3; + } + .labels { + text-align: right; + display: inline-block; + display: flex; + } -.label.pricing { -} + .partner { + bottom: 0; + text-align: right; + margin: 4px 4px 0; + } -#issues-container > .issue-element-wrapper { - opacity: 0.5; - /* margin-left: 100vw; */ - transition: 0.33s all cubic-bezier(0, 1, 1, 1); - filter: blur(4px); -} + body { + text-align: center; + } + .info { + opacity: 0.66; + transition: 0.125s opacity ease-in-out; + } -button { - appearance: unset; - text-rendering: unset; - color: unset; - letter-spacing: unset; - word-spacing: unset; - line-height: unset; - text-transform: unset; - text-indent: unset; - text-shadow: unset; - display: unset; - text-align: unset; - align-items: unset; - cursor: pointer; - box-sizing: unset; - background-color: unset; - margin: unset; - padding-block: unset; - padding-inline: unset; - border-width: unset; - border-style: unset; - border-color: unset; - border-image: unset; - border: 1px solid #80808020; - padding: 8px 16px; - border-radius: 4px; - text-transform: uppercase; - letter-spacing: 1px; - background-color: #80808010; -} -button:hover { - background-color: #80808020; -} -button:active { - background-color: #80808040; -} + .title { + display: flex; + align-items: center; + } -#toolbar { - position: fixed; - width: 100vw; - height: 48px; - /* background: red; */ - bottom: 0; - backdrop-filter: blur(8px); - padding: 4px; - display: flex; - /* text-align: right; */ - border-top: 1px solid #80808020; - /* text-align: center; */ - /* align-items: stretch; */ - justify-content: center; - -webkit-backdrop-filter: blur(8px); - /* display: flex; */ - justify-content: space-between; - /* align-items: flex-end; This will align the items to the bottom of the container */ - /* width: 100%; */ - /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */ -} -#toolbar > * { - /* justify-content: center; */ - align-items: center; - display: inline-flex; - text-align: left; - margin: 0 16px; -} -/* #toolbar > *:first-child { + .label.pricing { + } + + #issues-container > .issue-element-wrapper { + opacity: 0.5; + /* margin-left: 100vw; */ + transition: 0.33s all cubic-bezier(0, 1, 1, 1); + filter: blur(4px); + } + + button { + appearance: unset; + text-rendering: unset; + color: unset; + letter-spacing: unset; + word-spacing: unset; + line-height: unset; + text-transform: unset; + text-indent: unset; + text-shadow: unset; + display: unset; + text-align: unset; + align-items: unset; + cursor: pointer; + box-sizing: unset; + background-color: unset; + margin: unset; + padding-block: unset; + padding-inline: unset; + border-width: unset; + border-style: unset; + border-color: unset; + border-image: unset; + border: 1px solid #80808020; + padding: 8px 16px; + border-radius: 4px; + text-transform: uppercase; + letter-spacing: 1px; + background-color: #80808010; + } + button:hover { + background-color: #80808020; + } + button:active { + background-color: #80808040; + } + + #toolbar { + position: fixed; + width: 100vw; + height: 48px; + /* background: red; */ + bottom: 0; + backdrop-filter: blur(8px); + padding: 4px; + display: flex; + /* text-align: right; */ + border-top: 1px solid #80808020; + /* text-align: center; */ + /* align-items: stretch; */ + justify-content: center; + -webkit-backdrop-filter: blur(8px); + /* display: flex; */ + justify-content: space-between; + /* align-items: flex-end; This will align the items to the bottom of the container */ + /* width: 100%; */ + /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */ + } + #toolbar > * { + /* justify-content: center; */ + align-items: center; + display: inline-flex; + text-align: left; + margin: 0 16px; + } + /* #toolbar > *:first-child { padding-left: 16px; } #toolbar > *:last-child { padding-right: 16px; } */ -#authenticated > * { - display: inline-flex; - align-items: center; - justify-content: center; - margin: 0 4px; - max-height: 48px; -} -#authenticated > img { - border-radius: 50%; - height: 40px; - padding: 4px 0; -} + #authenticated > * { + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0 4px; + max-height: 48px; + } + #authenticated > img { + border-radius: 50%; + height: 40px; + padding: 4px 0; + } -#toolbar[data-authenticated] > * { - /* opacity: 0; */ - /* transition: 1s opacity ease-in-out; */ -} -#toolbar[data-authenticated="true"] > #github-login-button { - display: none; -} + #toolbar[data-authenticated] > * { + /* opacity: 0; */ + /* transition: 1s opacity ease-in-out; */ + } + #toolbar[data-authenticated="true"] > #github-login-button { + display: none; + } -#toolbar { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - opacity: 0; - transition: 0.5s opacity ease-in-out; - background-image: var(--grid-background-image); -} + #toolbar { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0; + transition: 0.5s opacity ease-in-out; + background-image: var(--grid-background-image); + } -#toolbar.ready { - opacity: 1; -} + #toolbar.ready { + opacity: 1; + } -#branding { - text-transform: uppercase; - letter-spacing: 1.5px; - font-weight: 400; - text-rendering: geometricPrecision; -} + #branding { + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 400; + text-rendering: geometricPrecision; + } -.full { - display: none !important; -} -@media screen and (min-width: 640px) { .full { - display: unset !important; + display: none !important; + } + @media screen and (min-width: 640px) { + .full { + display: unset !important; + } } -} -#toolbar > button { - text-align: center; + #toolbar > button { + text-align: center; + } } From 21fc28d4a78add37d613d44664a72a6656714479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Sat, 2 Dec 2023 14:07:36 +0900 Subject: [PATCH 3/3] feat: dynamic light mode style --- build/plugins/invert-colors.ts | 2 +- static/style/inverted-style.css | 1 - static/style/style.css | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/build/plugins/invert-colors.ts b/build/plugins/invert-colors.ts index b8003fb8..98e89bf6 100644 --- a/build/plugins/invert-colors.ts +++ b/build/plugins/invert-colors.ts @@ -34,7 +34,7 @@ export const invertColors: esbuild.Plugin = { } // If the color is not greyscale, return it as is, including the alpha channel - return `#${color}${alpha || ''}`; + return `#${color}${alpha || ""}`; }); // Define the output path for the new CSS file diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 3fbfe77d..29e13c7f 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -3,7 +3,6 @@ --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); } - #logo { height: 28px; margin-right: 2px; diff --git a/static/style/style.css b/static/style/style.css index c9d3d148..ce6e1494 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -3,7 +3,6 @@ --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC"); } - #logo { height: 28px; margin-right: 2px;