Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Color tweaks for Error Handling. #2676

Merged
merged 22 commits into from Mar 1, 2023
Merged

Color tweaks for Error Handling. #2676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
b0cb01d
Add color sections for dark mode
smlbiobot Feb 8, 2023
844cab2
Tweak colors for light mode
smlbiobot Feb 8, 2023
d8bf65a
Tweak colors for dark mode
smlbiobot Feb 8, 2023
21ad1ae
Remove tab styling
smlbiobot Feb 8, 2023
f798eda
Remove forced hanging emoji from error header
smlbiobot Feb 8, 2023
db0b904
Add padding for main container so text doesn’t touch screen boundary
smlbiobot Feb 8, 2023
aa8af0d
invalid text justify css
smlbiobot Feb 8, 2023
e544cd8
Tweak color scheme for dark themes
smlbiobot Feb 8, 2023
ecf3489
Add margins for h3. Probably should be done in the tracerite package.
smlbiobot Feb 8, 2023
14f1635
Add tracerite tab color with new sanic-tab variable.
smlbiobot Feb 8, 2023
51a9605
Soften lightmode text color
smlbiobot Feb 8, 2023
3587a4f
Define sanic-background, sanic-text as top-level colors. Restructure …
smlbiobot Feb 8, 2023
c111d93
Define highlight and tab colors as variables
smlbiobot Feb 8, 2023
94eff28
Add tab hover shadow definition. Intended to have better hover accent…
smlbiobot Feb 8, 2023
59f9b5c
Ensure sanic brand color be the same in dark mode.
smlbiobot Feb 9, 2023
8f30504
Add header background, change all dark theme grays to neutral grays.
smlbiobot Feb 9, 2023
26e999d
Switch blue to code block orange in sanic docs. Add sanic highlight o…
smlbiobot Feb 9, 2023
a5a9387
Add sanic id to top level document.
smlbiobot Feb 9, 2023
505f2c9
Use hsl and rgba for dark themed background so that they can be easil…
smlbiobot Feb 9, 2023
7917e4d
Change colors to Adam’s preferences.
smlbiobot Feb 9, 2023
138a98b
Remove important from css after adding sanic as id,
smlbiobot Feb 9, 2023
3c5a12c
Remove remnants of “important” for pre and code tags. Add Meslo in font.
smlbiobot Feb 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion sanic/pages/base.py
View file
Open in desktop
Expand Up @@ -20,7 +20,7 @@ def style(self) -> str:
return self.CSS

def render(self) -> str:
self.doc = Document(self.TITLE, lang="en")
self.doc = Document(self.TITLE, lang="en", id="sanic")
self._head()
self._body()
self._foot()
Expand Down
68 changes: 53 additions & 15 deletions sanic/pages/styles/BasePage.css
View file
Open in desktop
@@ -1,28 +1,56 @@
/** BasePage **/

:root {
--sanic: #ff0d68;
--sanic-blue: #0092FF;
--sanic-yellow: #FFE900;
--sanic-purple: #833FE3;
--sanic-green: #37ae6f;
--sanic-background: #f1f5f9;
--sanic-text: #1f2937;
--sanic-tab-background: #fff;
--sanic-tab-text: #0f172a;
--sanic-tab-shadow: #adadad;
--sanic-highlight-background: var(--sanic-yellow);
--sanic-highlight-text: var(--sanic-text);
--sanic-header-background: #000;
}

@media (prefers-color-scheme: dark) {
:root {
--sanic-purple: #D246DE;
--sanic-green: #16DB93;
--sanic-background: #111;
--sanic-text: #e7e7e7;
--sanic-tab-background: #484848;
--sanic-tab-text: #e1e1e1;
--sanic-tab-shadow: #000;
--sanic-highlight-background: var(--sanic-yellow);
Copy link
Member

@Tronic Tronic Feb 13, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The yellow can be a lot darker (and less disruptive) on dark mode. Yellow is a strange color in that it only seems yellow if it is brighter or similar brightness to its surroundings, which is why on black background it can be quite dark while on white background it needs to be close to #ff0. Yellow (or orange) darker than its surroundings is seen as (greenish) brown, a different color and not simply a darker shade.

--sanic-highlight-text: #000;
--sanic-header-background: #000;
}
}

html {
font: 16px sans-serif;
background: #eee;
color: #111;
background: var(--sanic-background);
color: var(--sanic-text);
scrollbar-gutter: stable;
overflow: hidden auto;
}

body {
margin: 0;
font-size: 1.25rem;
--sanic: #ff0d68;
--sanic-blue: #0092FF;
--sanic-yellow: #FFE900;
--sanic-purple: #833FE3;
--sanic-green: #16DB93;
line-height: 125%;
}

body>* {
body > * {
padding: 1rem 2vw;
}

@media (max-width: 1000px) {
body>* {
body > * {
padding: 0.5rem 1.5vw;
}

Expand All @@ -31,9 +59,12 @@ body>* {
font-size: calc(6px + 10 * 100vw / 1000);
}
}

main {
min-height: 70vh; /* Make sure the footer is closer to bottom */
min-height: 70vh; /* Make sure the footer is closer to bottom */
padding: 1rem 2.5rem; /* Generous padding for readability */
}

.smalltext {
font-size: 1.0rem;
}
Expand Down Expand Up @@ -89,12 +120,19 @@ span.icon {


@media (prefers-color-scheme: dark) {
html {
background: #111;
color: #ccc;
}

#logo-simple path:last-child {
fill: #e1e1e1;
}
}

#sanic pre, #sanic code {
font-family: "Fira Code",
"Source Code Pro",
Menlo,
Meslo,
Monaco,
Consolas,
Lucida Console,
monospace;
font-size: 0.8rem;
}
48 changes: 44 additions & 4 deletions sanic/pages/styles/ErrorPage.css
View file
Open in desktop
Expand Up @@ -3,14 +3,17 @@
max-width: 30em;
margin: 5em auto 5em auto;
text-align: justify;
text-justify: both;
/*text-justify: both;*/
}

#enduser a {
color: var(--sanic-blue);
}

#enduser p:last-child {
text-align: right;
}

summary {
margin-top: 3em;
color: var(--sanic-blue);
Expand All @@ -23,15 +26,49 @@ summary {
--tracerite-type: var(--sanic-purple);
--tracerite-exception: var(--sanic);
--tracerite-highlight: var(--sanic-yellow);
--tracerite-tab: var(--sanic-tab-background);
--tracerite-tab-text: var(--sanic-tab-text);
}

.tracerite > h3 {
margin: 0.5rem 0 !important;
}

#sanic .tracerite .traceback-labels button {
font-size: 0.8rem;
line-height: 120%;
background: var(--tracerite-tab);
color: var(--tracerite-tab-text);
transition: 0.3s;
cursor: pointer;
}

.tracerite .traceback-labels {
padding-top: 5px;
}
.tracerite .traceback-labels button:hover {
filter: contrast(150%) brightness(120%) drop-shadow(0 -0 2px var(--sanic-tab-shadow));
}

#sanic .tracerite .traceback-details mark span {
background: var(--sanic-highlight-background);
color: var(--sanic-highlight-text);
}

header {
background: var(--sanic-header-background);
}

h1 {
margin-left: -1.5rem; /* Emoji partially in the left margin */
/*margin-left: -1.5rem; !* Emoji partially in the left margin *!*/
}

h2 {
margin: 1em 0 0.2em 0;
font-size: 1.25rem;
color: #888;
color: var(--sanic-text);
}

dl.key-value-table {
width: 100%;
margin: 0;
Expand All @@ -40,13 +77,16 @@ dl.key-value-table {
grid-gap: .3em;
white-space: pre-wrap;
}

dl.key-value-table * {
margin: 0;
}

dl.key-value-table dt {
color: #888;
word-break: break-word;
}

dl.key-value-table dd {
word-break: break-all; /* Better breaking for cookies header and such */
word-break: break-all; /* Better breaking for cookies header and such */
}