import { css } from 'lit';

export function addFontToRootPage() {
  const content = `
  @font-face {
    font-family: 'Allerta';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/allerta/v11/TwMO-IAHRlkbx940YnYXTQ.ttf) format('truetype');
  }`;

  if (!document.getElementById('allerta-style')) {
    var head = document.head || document.getElementsByTagName('head')[0],
      style = document.createElement('style');
    style.id = 'allerta-style';
    style.type = 'text/css';
    style.innerText = content;
    head.appendChild(style);
  }
}


export const style = css`
:host {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
}
#ui {
  display: inline-block;
  width: 30em;
}
#ui button {
  width: 2em;
}
#ui .expander {
  display: inline-block;
  padding: 3px;
}
#graphView section {
  padding: 4px;
}
#graphView .spoGrid {
  display: flex;
  flex-direction: column;
}
#graphView .subject,
#graphView .predicate {
  display: flex;
  align-items: baseline;
}
#graphView .predicate,
#graphView .object {
  margin-left: 5px;
}
#graphView .literal {
  display: inline-block;
  margin: 3px;
  padding: 4px;
}
#graphView .literalType {
  vertical-align: super;
  font-size: 80%;
}
#graphView .resource {
  display: inline-block;
  margin: 2px;
  padding: 1px 6px;
}
#graphView .predicate > a::before {
  padding-right: 2px;
  content: '━';
  font-weight: bolder;
  font-size: 125%;
}
#graphView .predicate > a::after {
  content: '🠪';
}
#graphView table.typeBlock {
  border-collapse: collapse;
}
#graphView table.typeBlock td {
  white-space: nowrap;
}
#graphView table.typeBlock td .literal {
  padding-top: 1px;
  padding-bottom: 1px;
}
#graphView .typeBlockScroll {
  overflow-x: auto;
  max-width: 100%;
}
a {
  color: #b1b1fd;
  text-shadow: 1px 1px 0px rgba(4,0,255,0.58);
  text-decoration-color: rgba(0,0,119,0.078);
}
body.rdfBrowsePage {
  background: #000;
  color: #fff;
  font-size: 12px;
}
#ui {
  border: 1px solid #808080;
  background: #000;
  color: #fff;
  font-family: 'Allerta', sans-serif;
}
#graphView {
  background: #000;
  color: #fff;
  font-family: 'Allerta', sans-serif;
}
#graphView section {
  border: 1px solid #808080;
}
#graphView .subject {
  border-top: 1px solid #2f2f2f;
}
#graphView .literal {
  border: 1px solid #808080;
  border-radius: 9px;
  font-size: 115%;
  font-family: monospace;
}
#graphView .subject > .node {
  border: 2px solid #448d44;
}
#graphView .resource {
  border-radius: 6px;
  background: #add8e6;
}
#graphView .predicate > a {
  color: #e49dfb;
}
#graphView .comment {
  color: #008000;
}
#graphView table.typeBlock th {
  border: 2px #333 outset;
  background: #1f1f1f;
}
#graphView 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 #808080;
}
.served-resources a {
  padding-right: 2em;
}
  `;