diff src/style.styl @ 48:b8e5850acca0

local demo; styles
author drewp@bigasterisk.com
date Thu, 09 Jan 2020 00:04:45 -0800
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/style.styl	Thu Jan 09 00:04:45 2020 -0800
@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css?family=Allerta|Dosis|Jura&display=swap')
+
+:host
+  display: flex
+  flex-direction: column
+  padding: 2px 0
+
+#ui // layout
+  display: inline-block
+  width: 30em
+
+  button
+    width: 2em
+
+  .expander
+    display: inline-block
+    padding: 3px
+
+#graphView // layout
+  section
+    padding: 4px
+
+  .spoGrid
+    display: flex
+    flex-direction: column
+
+  .subject, .predicate
+    display: flex
+    align-items: baseline
+
+  .predicate, .object
+    margin-left: 5px
+
+  .literal
+    display: inline-block
+    margin: 3px
+    padding: 4px
+
+  .literalType
+    vertical-align: super
+    font-size: 80%
+
+  .resource
+    display: inline-block
+    margin: 2px
+    padding: 1px 6px
+
+  .predicate > a::before
+    padding-right: 2px
+    content: '━'
+    font-weight: bolder
+    font-size: 125%
+
+  .predicate > a::after
+    content: '🠪'
+
+  table.typeBlock
+    border-collapse: collapse
+
+  table.typeBlock td
+    white-space: nowrap
+
+  table.typeBlock td .literal
+    padding-top: 1px
+    padding-bottom: 1px
+
+  .typeBlockScroll
+    overflow-x: auto
+    max-width: 100%
+
+// ///////////////////////////////////////////////////////////////////
+a
+  color: #b1b1fd
+  text-shadow: 1px 1px 0px #0400ff94
+  text-decoration-color: #00007714
+
+body.rdfBrowsePage
+  background: black
+  color: white
+  font-size: 12px
+
+#ui // color
+  border: 1px solid gray
+  background: black
+  color: white
+  font-family: 'Allerta', sans-serif
+
+#graphView // color
+  background: black
+  color: white
+  font-family: 'Allerta', sans-serif
+
+  section
+    border: 1px solid gray
+
+  .subject
+    border-top: 1px solid #2f2f2f
+
+  .literal
+    border: 1px solid gray
+    border-radius: 9px
+    font-size: 115%
+    font-family: monospace
+
+  .subject > .node
+    border: 2px solid rgb(68, 141, 68)
+
+  .resource
+    border-radius: 6px
+    background: lightblue
+
+  .predicate > a
+    color: #e49dfb
+
+  .comment
+    color: green
+
+  table.typeBlock th
+    border: 2px #333333 outset
+    background: #1f1f1f
+
+  table.typeBlock td
+    border: 2px #4a4a4a outset
+    background: #2b2b2b
+
+/*
+for my pages serving rdf data, not necessarily part of browse/
+*/
+.served-resources
+  margin-top: 4em
+  padding-top: 1em
+  border-top: 1px solid gray
+
+.served-resources a
+  padding-right: 2em