Mercurial > code > home > repos > streamed-graph
annotate src/style.ts @ 146:9347277e8311
try a bit harder to notice <sg-source> children after <streamed-graph> startup
| author | drewp@bigasterisk.com |
|---|---|
| date | Mon, 08 May 2023 13:52:50 -0700 |
| parents | 5a1a79f54779 |
| children | 3ce355e4f388 |
| rev | line source |
|---|---|
| 128 | 1 import { css } from "lit"; |
| 48 | 2 |
|
83
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
3 export function addFontToRootPage() { |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
4 const content = ` |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
5 @font-face { |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
6 font-family: 'Allerta'; |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
7 font-style: normal; |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
8 font-weight: 400; |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
9 font-display: swap; |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
10 src: url(https://fonts.gstatic.com/s/allerta/v11/TwMO-IAHRlkbx940YnYXTQ.ttf) format('truetype'); |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
11 }`; |
| 48 | 12 |
| 128 | 13 if (!document.getElementById("allerta-style")) { |
| 14 var head = document.head || document.getElementsByTagName("head")[0], | |
| 15 style = document.createElement("style"); | |
| 16 style.id = "allerta-style"; | |
| 17 style.type = "text/css"; | |
|
83
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
18 style.innerText = content; |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
19 head.appendChild(style); |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
20 } |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
21 } |
| 48 | 22 |
| 128 | 23 export const pageStyle = css` |
| 24 a { | |
| 25 color: #b1b1fd; | |
| 26 text-shadow: 1px 1px 0px rgba(4, 0, 255, 0.58); | |
| 27 text-decoration-color: rgba(0, 0, 119, 0.078); | |
| 28 } | |
| 29 body.rdfBrowsePage { | |
| 30 background: #000; | |
| 31 color: #fff; | |
| 32 font-size: 12px; | |
| 33 } | |
| 48 | 34 |
| 128 | 35 /* |
| 36 for my pages serving rdf data, not necessarily part of browse/ | |
| 37 */ | |
| 38 .served-resources { | |
| 39 margin-top: 4em; | |
| 40 padding-top: 1em; | |
| 41 border-top: 1px solid #808080; | |
| 42 } | |
| 43 .served-resources a { | |
| 44 padding-right: 2em; | |
| 45 } | |
| 46 `; | |
| 47 | |
| 48 export const streamedGraphStyle = css` | |
|
83
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
49 :host { |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
50 display: inline-block; |
| 128 | 51 min-width: 30em; |
| 52 padding: 0 0 0 1em; | |
|
83
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
53 border: 1px solid #808080; |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
54 background: #000; |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
55 color: #fff; |
|
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
56 font-family: 'Allerta', sans-serif; |
| 128 | 57 |
| 58 display: flex; | |
| 59 flex-direction: column; | |
| 60 padding: 2px 0; | |
| 61 | |
|
83
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
62 } |
| 128 | 63 .isCurrent { |
| 64 font-weight: bold; | |
| 65 font-size: 167%; | |
| 66 display: inline-block; | |
| 67 height: 1.4em; | |
| 68 vertical-align: middle; | |
|
83
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
69 } |
| 128 | 70 .isCurrent-true { |
| 71 color: green; | |
|
83
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
72 } |
| 128 | 73 .isCurrent-false { |
| 74 color: orange; | |
|
83
b973d7f95fdf
bake out the stylus to plain css; add this https://ziga-petek.medium.com/using-fonts-in-web-components-6aba251ed4e5 to make fonts work
drewp@bigasterisk.com
parents:
48
diff
changeset
|
75 } |
| 128 | 76 `; |
| 77 | |
| 78 export const graphViewStyle = css` | |
| 79 section { | |
| 80 padding: 4px; | |
| 81 } | |
| 82 .spoGrid { | |
| 83 display: flex; | |
| 84 flex-direction: column; | |
| 85 } | |
| 86 .subject, | |
| 87 .predicate { | |
| 88 display: flex; | |
| 89 align-items: baseline; | |
| 90 } | |
| 91 .predicate, | |
| 92 .object { | |
| 93 margin-left: 5px; | |
| 94 } | |
| 95 .literal { | |
| 96 display: inline-block; | |
| 97 margin: 3px; | |
| 98 padding: 4px; | |
| 99 } | |
| 100 .literalType { | |
| 101 vertical-align: super; | |
| 102 font-size: 80%; | |
| 103 } | |
| 104 .resource { | |
| 105 display: inline-block; | |
| 106 margin: 2px; | |
| 107 padding: 1px 6px; | |
| 108 } | |
| 109 .predicate > a::before { | |
| 110 padding-right: 2px; | |
| 111 content: "━"; | |
| 112 font-weight: bolder; | |
| 113 font-size: 125%; | |
| 114 } | |
| 115 .predicate > a::after { | |
| 116 content: "🠪"; | |
| 117 } | |
| 118 table.typeBlock { | |
| 119 border-collapse: collapse; | |
| 120 } | |
| 121 table.typeBlock td { | |
| 122 white-space: nowrap; | |
| 123 } | |
| 124 table tr:nth-child(even) td:nth-child(even) { | |
| 125 background: #1a191c; | |
| 126 } | |
| 127 table tr:nth-child(even) td:nth-child(odd) { | |
| 128 background: #181719; | |
| 129 } | |
| 130 table tr:nth-child(odd) td:nth-child(even) { | |
| 131 background: #201e22; | |
| 132 } | |
| 133 table tr:nth-child(odd) td:nth-child(odd) { | |
| 134 background: #1e1c1e; | |
| 135 } | |
| 136 table td, | |
| 137 table th { | |
| 138 vertical-align: top; | |
| 139 } | |
| 140 table.typeBlock td .literal { | |
| 141 padding-top: 1px; | |
| 142 padding-bottom: 1px; | |
| 143 } | |
| 144 .typeBlockScroll { | |
| 145 overflow-x: auto; | |
| 146 max-width: 100%; | |
| 147 } | |
| 148 /* ------------------ */ | |
| 149 :host { | |
| 150 background: #000; | |
| 151 color: #fff; | |
| 152 font-family: "Allerta", sans-serif; | |
| 153 } | |
| 154 section { | |
| 155 border: 1px solid #808080; | |
| 156 } | |
| 157 .subject { | |
| 158 border-top: 1px solid #2f2f2f; | |
| 159 } | |
| 160 .literal { | |
| 161 border: 1px solid #808080; | |
| 162 border-radius: 9px; | |
| 163 font-size: 115%; | |
| 164 font-family: monospace; | |
| 165 } | |
| 166 .subject > .node { | |
| 167 border: 2px solid #448d44; | |
| 168 } | |
| 169 .resource { | |
| 170 border-radius: 6px; | |
| 171 background: #add8e6; | |
| 172 } | |
| 173 .predicate > a { | |
| 174 color: #e49dfb; | |
| 175 } | |
| 176 .comment { | |
| 177 color: #008000; | |
| 178 } | |
| 179 table.typeBlock th { | |
| 180 border: 2px #333 outset; | |
| 181 background: #1f1f1f; | |
| 182 } | |
| 183 table.typeBlock td { | |
| 184 border: 2px #4a4a4a outset; | |
| 185 background: #2b2b2b; | |
| 186 } | |
| 187 `; |