Mercurial > code > home > repos > streamed-graph
annotate src/style.ts @ 150:3ce355e4f388 default tip
bye jest; hi vitest. new working test for styles.ts
| author | drewp@bigasterisk.com |
|---|---|
| date | Mon, 08 May 2023 17:27:44 -0700 |
| parents | 5a1a79f54779 |
| children |
| 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"; | |
|
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
|
17 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
|
18 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
|
19 } |
|
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 } |
| 48 | 21 |
| 128 | 22 export const pageStyle = css` |
| 23 a { | |
| 24 color: #b1b1fd; | |
| 25 text-shadow: 1px 1px 0px rgba(4, 0, 255, 0.58); | |
| 26 text-decoration-color: rgba(0, 0, 119, 0.078); | |
| 27 } | |
| 28 body.rdfBrowsePage { | |
| 29 background: #000; | |
| 30 color: #fff; | |
| 31 font-size: 12px; | |
| 32 } | |
| 48 | 33 |
| 128 | 34 /* |
| 35 for my pages serving rdf data, not necessarily part of browse/ | |
| 36 */ | |
| 37 .served-resources { | |
| 38 margin-top: 4em; | |
| 39 padding-top: 1em; | |
| 40 border-top: 1px solid #808080; | |
| 41 } | |
| 42 .served-resources a { | |
| 43 padding-right: 2em; | |
| 44 } | |
| 45 `; | |
| 46 | |
|
150
3ce355e4f388
bye jest; hi vitest. new working test for styles.ts
drewp@bigasterisk.com
parents:
128
diff
changeset
|
47 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
|
48 :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
|
49 display: inline-block; |
| 128 | 50 min-width: 30em; |
| 51 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
|
52 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
|
53 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
|
54 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
|
55 font-family: 'Allerta', sans-serif; |
| 128 | 56 |
| 57 display: flex; | |
| 58 flex-direction: column; | |
| 59 padding: 2px 0; | |
| 60 | |
|
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
|
61 } |
| 128 | 62 .isCurrent { |
| 63 font-weight: bold; | |
| 64 font-size: 167%; | |
| 65 display: inline-block; | |
| 66 height: 1.4em; | |
| 67 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
|
68 } |
| 128 | 69 .isCurrent-true { |
| 70 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
|
71 } |
| 128 | 72 .isCurrent-false { |
| 73 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
|
74 } |
| 128 | 75 `; |
| 76 | |
| 77 export const graphViewStyle = css` | |
| 78 section { | |
| 79 padding: 4px; | |
| 80 } | |
| 81 .spoGrid { | |
| 82 display: flex; | |
| 83 flex-direction: column; | |
| 84 } | |
| 85 .subject, | |
| 86 .predicate { | |
| 87 display: flex; | |
| 88 align-items: baseline; | |
| 89 } | |
| 90 .predicate, | |
| 91 .object { | |
| 92 margin-left: 5px; | |
| 93 } | |
| 94 .literal { | |
| 95 display: inline-block; | |
| 96 margin: 3px; | |
| 97 padding: 4px; | |
| 98 } | |
| 99 .literalType { | |
| 100 vertical-align: super; | |
| 101 font-size: 80%; | |
| 102 } | |
| 103 .resource { | |
| 104 display: inline-block; | |
| 105 margin: 2px; | |
| 106 padding: 1px 6px; | |
| 107 } | |
| 108 .predicate > a::before { | |
| 109 padding-right: 2px; | |
| 110 content: "━"; | |
| 111 font-weight: bolder; | |
| 112 font-size: 125%; | |
| 113 } | |
| 114 .predicate > a::after { | |
| 115 content: "🠪"; | |
| 116 } | |
| 117 table.typeBlock { | |
| 118 border-collapse: collapse; | |
| 119 } | |
| 120 table.typeBlock td { | |
| 121 white-space: nowrap; | |
| 122 } | |
| 123 table tr:nth-child(even) td:nth-child(even) { | |
| 124 background: #1a191c; | |
| 125 } | |
| 126 table tr:nth-child(even) td:nth-child(odd) { | |
| 127 background: #181719; | |
| 128 } | |
| 129 table tr:nth-child(odd) td:nth-child(even) { | |
| 130 background: #201e22; | |
| 131 } | |
| 132 table tr:nth-child(odd) td:nth-child(odd) { | |
| 133 background: #1e1c1e; | |
| 134 } | |
| 135 table td, | |
| 136 table th { | |
| 137 vertical-align: top; | |
| 138 } | |
| 139 table.typeBlock td .literal { | |
| 140 padding-top: 1px; | |
| 141 padding-bottom: 1px; | |
| 142 } | |
| 143 .typeBlockScroll { | |
| 144 overflow-x: auto; | |
| 145 max-width: 100%; | |
| 146 } | |
| 147 /* ------------------ */ | |
| 148 :host { | |
| 149 background: #000; | |
| 150 color: #fff; | |
| 151 font-family: "Allerta", sans-serif; | |
| 152 } | |
| 153 section { | |
| 154 border: 1px solid #808080; | |
| 155 } | |
| 156 .subject { | |
| 157 border-top: 1px solid #2f2f2f; | |
| 158 } | |
| 159 .literal { | |
| 160 border: 1px solid #808080; | |
| 161 border-radius: 9px; | |
| 162 font-size: 115%; | |
| 163 font-family: monospace; | |
| 164 } | |
| 165 .subject > .node { | |
| 166 border: 2px solid #448d44; | |
| 167 } | |
| 168 .resource { | |
| 169 border-radius: 6px; | |
| 170 background: #add8e6; | |
| 171 } | |
| 172 .predicate > a { | |
| 173 color: #e49dfb; | |
| 174 } | |
| 175 .comment { | |
| 176 color: #008000; | |
| 177 } | |
| 178 table.typeBlock th { | |
| 179 border: 2px #333 outset; | |
| 180 background: #1f1f1f; | |
| 181 } | |
| 182 table.typeBlock td { | |
| 183 border: 2px #4a4a4a outset; | |
| 184 background: #2b2b2b; | |
| 185 } | |
| 186 `; |