CSS loading with STYLE_APPEND

sanic/pages/css.py

@@ -25,6 +25,7 @@ class CSS(ABCMeta):
         Page = super().__new__(cls, name, bases, attrs)
         # Use a locally defined STYLE or the one from styles directory
         Page.STYLE = _extract_style(attrs.get("STYLE_FILE"), name)
+        Page.STYLE += attrs.get("STYLE_APPEND", "")
         # Combine with all ancestor styles
         Page.CSS = "".join(
             Class.STYLE

sanic/pages/error.py

@@ -9,7 +9,7 @@ import tracerite.html
 inspector.blacklist_types += Request,
 
 class ErrorPage(BasePage):
-    EXTRA_STYLE = tracerite.html.style + "summary { color: #888; }"
+    STYLE_APPEND = tracerite.html.style
     def __init__(self, title: str, text: str, request: Request, exc: Exception, full: bool) -> None:
         super().__init__()
         # Internal server errors come with the text of the exception, which we don't want to show to the user.

sanic/pages/styles/ErrorPage.css

@@ -1,139 +1,2 @@
 /** ErrorPage **/
 summary { color: #888; }
-
-/** TraceRite **/
-:root {
-  --tracerite-var: #8af;
-  --tracerite-type: #5c8;
-  --tracerite-val: #8af;
-  --tracerite-tab: #aaaa;
-}
-.tracerite,
-.tracerite * {
-  margin: 0;
-  padding: 0;
-  outline: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  font: inherit;
-}
-.tracerite h3 {
-  margin: 0;
-  padding: .2em 0;
-  font-size: 1.2em;
-}
-.tracerite p {
-  margin: 0;
-}
-.tracerite pre {
-  width: 100%;
-  padding: .5em;
-}
-.tracerite .codeline {
-  text-indent: 4ch each-line;
-}
-.tracerite .codeline::before {
-  content: attr(data-lineno);
-  color: #888;
-  opacity: 0.0;
-  transition: all 0.4s;
-  display: inline-block;
-  text-align: right;
-  text-indent: 0;
-  white-space: nowrap;
-  word-break: keep-all;
-  padding-right: 1ch;
-  width: 4ch;
-}
-.tracerite pre:hover .codeline::before {
-  opacity: 1.0;
-}
-.tracerite mark {
-  background: none;
-}
-.tracerite mark span {
-  background: #ff0;
-}
-.tracerite mark::after {
-  display: inline-block;
-  content: attr(data-symbol);
-  margin: -1ch;
-  transform: translate(2em, 0) scale(1.8);
-  color: #ff0;
-  -webkit-text-stroke: .05em black;
-}
-.tracerite .excmessage {
-  max-height: 12em;
-  overflow: auto;
-}
-.tracerite .exctype {color: gray}
-.tracerite .traceback-labels {
-  display: flex;
-  align-items: center;
-  border-bottom: 3px solid var(--tracerite-tab);
-  margin-top: 0.3em;
-}
-.tracerite .traceback-labels button {
-  background: var(--tracerite-tab); color: black;
-  border: 0;
-  border-radius: .5em .5em 0 0;
-  flex-shrink: 1;
-  line-height: 1.0;
-  padding: .5em;
-  margin-right: .2em;
-}
-.tracerite .traceback-labels button:hover { background: #ddd }
-.tracerite .traceback-labels * {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.tracerite .traceback-tabs .content {
-  scroll-snap-type: x mandatory;
-  display: flex;
-  align-items: flex-start;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.tracerite .traceback-tabs .content::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-.tracerite .traceback-details {
-  min-width: 20ch;
-  max-width: 100%;
-  margin: 0 .3em;
-  flex-shrink: 0;
-  scroll-snap-align: start;
-  border-radius: .5em;
-  padding: .2em;
-}
-.tracerite .traceback-details:last-child {
-  width: 100%;
-}
-.tracerite table.inspector { margin-left: 3.5em; width: auto; word-break: break-word;) }
-.tracerite .inspector tbody tr,
-.tracerite .inspector th,
-.tracerite .inspector td {
-  padding: 0;
-  background: none;
-  text-align: left;
-  max-width: 20em;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.tracerite .inspector .var { font-weight: bold; color: var(--tracerite-var) }
-.tracerite .inspector .type { white-space: nowrap; color: var(--tracerite-type) }
-.tracerite .inspector .val { white-space: pre-wrap; color: var(--tracerite-val) }
-/* matrix value on a variable */
-.tracerite .inspector table td {
-  color: var(--tracerite-val);
-  min-width: 3em;
-  word-break: keep-all;
-  overflow: hidden;
-  padding: 0;
-  font-size: 0.8em;
-  border-collapse: collapse;
-  text-align: right;
-}