From fb1be51f68ae067fa36725066f945e3c0aeb87d4 Mon Sep 17 00:00:00 2001 From: Daniel Micay Date: Fri, 14 May 2021 22:27:38 -0400 Subject: rename grapheneos.css to main.css --- static/main.css | 257 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 257 insertions(+) create mode 100644 static/main.css (limited to 'static/main.css') diff --git a/static/main.css b/static/main.css new file mode 100644 index 00000000..99aac46a --- /dev/null +++ b/static/main.css @@ -0,0 +1,257 @@ +/* use the standard Material Light theme to match GrapheneOS apps */ +/* https://android.googlesource.com/platform/frameworks/base/+/android-11.0.0_r32/core/res/res/values/colors_material.xml */ + +html { + height: -webkit-fill-available; /* replace with stretch when standardized */ +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; + min-height: -webkit-fill-available; /* replace with stretch when standardized */ + font-family: Roboto, sans-serif; + background-color: #fafafa; /* grey50 */ + color: rgba(0, 0, 0, 0.87); /* 87% black */ + margin: 0; + padding: 0; + overflow-y: scroll; +} + +a { + color: #1565c0; /* blue800 */ + text-decoration: none; +} + +a:visited { + color: #6a1b9a; /* purple800 */ +} + +a:hover { + text-decoration: underline; +} + +h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited { + color: rgba(0, 0, 0, 0.87); /* 87% black */ +} + +code, pre { + background-color: #e0e0e0; /* grey300 */ + font-family: "Roboto Mono", monospace; +} + +pre { + overflow-x: auto; + border-radius: 5px; + padding: 10px; +} + +code { + border-radius: 2.5px; +} + +#site-menu ul { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + margin: 0; + padding: 0; +} + +#site-menu { + background-color: #212121; /* grey900 */ + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); + white-space: nowrap; +} + +#site-menu ul li { + list-style-type: none; + display: flex; +} + +#site-menu ul li:hover { + background-color: #424242; /* grey800 */ +} + +#site-menu ul li a { + color: #fff; /* 100% white */ + display: flex; + text-decoration: none; + padding: 1em; + align-items: center; +} + +#site-menu ul li a:visited { + color: #fff; /* 100% white */ +} + +#site-menu ul li[aria-current] a { + color: #64b5f6; /* blue300 */ +} + +#site-menu img { + height: 1.8rem; + width: 1.8rem; + filter: invert(100); + vertical-align: middle; + margin-right: 0.5rem; +} + +#site-menu ul li[aria-current] img { + filter: invert(67%) sepia(13%) saturate(3136%) hue-rotate(180deg) brightness(102%) contrast(93%); +} + +main { + margin-left: auto; + margin-right: auto; + padding: 1em; + max-width: 832px; + min-width: 0; + width: 100%; + box-sizing: border-box; + overflow-wrap: break-word; +} + +.coin-address { + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +.coin-address > img { + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +footer img { + width: 60px; + height: auto; + display: block; + margin-left: auto; + margin-right: auto; +} + +footer { + margin-top: auto; + margin-left: auto; + margin-right: auto; + padding: 1em; + max-width: 800px; + overflow-wrap: break-word; + text-align: center; +} + +footer a, footer a:visited { + color: #616161; /* grey500 */ +} + +#social { + margin-top: 2em; + padding: 0; + list-style-type: none; +} + +#social li { + display: inline; + padding: 0 0.5em; +} + +#stable-channel ul, #beta-channel ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.error-text { + /* Baseline Material error color */ + color: #b00020; +} + +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Roboto'), local('Roboto-Regular'), url(/fonts/roboto-v20-regular-latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Roboto Italic'), local('Roboto-Italic'), url(/fonts/roboto-v20-regular-italic-latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Roboto Bold'), local('Roboto-Bold'), url(/fonts/roboto-v20-bold-latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/fonts/robotomono-v13-regular-latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/fonts/robotomono-v13-bold-latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@media (prefers-color-scheme: dark) { + body { + background: #121212; + color: rgba(255, 255, 255, 0.87); /* 87% white */ + } + + a { + color: #90caf9; /* blue200 */ + } + + a:visited { + color: #ce93d8; /* purple200 */ + } + + h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited { + color: rgba(255, 255, 255, 0.87); /* 87% white */ + } + + code, pre { + background-color: #424242; /* grey800 */ + } + + footer a, footer a:visited { + color: #9f9f9f; + } + + footer img { + filter: invert(87%); + } + + .error-text { + /* Baseline Material dark error color */ + color: #cf6679; + } +} -- cgit v1.3.1