public/assets/style.css

   1 body {
   2   background-color: #eee;
   3   font-size: 1rem;
   4   margin: 4rem;
   5   margin: 0 auto;
   6   width: 780px;
   7   padding: 2rem 1rem;
   8 }
   9
  10 .modal {
  11   position: absolute;
  12   top: 0;
  13   left: 0;
  14   width: 100%;
  15 }
  16 .modal-content {
  17   position: relative;
  18   top: 5px;
  19   margin: 5rem auto;
  20   width: 50%;
  21   background-color: #fff;
  22   border: solid 1px #ddd;
  23   padding: 1rem;
  24   box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  25 }
  26 .modal-content > h1 {
  27   margin-bottom: 1rem;
  28 }
  29
  30 /** search **/
  31 #search-query {
  32   width: 100%;
  33   border: solid 1px #888;
  34   padding: 0.5rem;
  35   box-sizing: border-box;
  36 }
  37 .search-results {
  38   margin: 1rem 0;
  39 }
  40 .search-result {
  41   margin: 0.6rem 0;
  42   padding: 0.6rem;
  43   line-height: 1.6rem;
  44 }
  45 .search-result.selected {
  46   color: #fff;
  47   background-color: #000;
  48 }
  49
  50 #outliner {
  51   background-color: #fff;
  52   border: solid 1px #ddd;
  53   padding: 2rem 1rem;
  54   margin: 2rem 0;
  55 }
  56 .node {
  57   margin: 0 1rem;
  58   color: #222;
  59 }
  60 .node.collapsed::before, .node.expanded::before {
  61   float: left;
  62   padding-top: 6px;
  63   padding-right: 5px;
  64 }
  65 .node.collapsed::before {
  66   color: #222;
  67   content: '\25B8';
  68 }
  69 .node.expanded::before {
  70   color: #aaa;
  71   content: '\25B9';
  72 }
  73
  74 .node.collapsed > .node {
  75   display: none;
  76 }
  77
  78 .nodeContent {
  79   padding: 2px 1rem;;
  80   line-height: 1.7rem;
  81 }
  82 .node.cursor.expanded::before {
  83   color: #000;
  84   content: '\25B8';
  85 }
  86 .node.cursor.collapsed::before {
  87   color: #fff;
  88 }
  89 .node.cursor > .nodeContent {
  90   color: #fff;
  91   background-color: #000;
  92 }
  93 .nodeContent img {
  94   width: 100%;
  95 }
  96
  97 .cursor.hidden-cursor > .nodeContent {
  98   color: #000;
  99   background-color: #fff;
 100 }
 101 .strikethrough, .strikethrough .node {
 102   text-decoration: line-through;
 103   color: #808080;
 104 }
 105
 106
 107 footer {
 108   text-align: center;
 109 }
 110
 111
 112 /* text styles */
 113
 114 em {
 115   font-style: italic;
 116 }
 117 strong, b {
 118   font-weight: bold;
 119 }
 120 h1 {
 121   font-size: 1.7rem;
 122 }
 123 table {
 124   border: solid 1px #ddd;
 125 }
 126 th {
 127   font-weight: bold;
 128   background-color: #666;
 129   color: #fff;
 130 }
 131 th, td {
 132   padding: 0.7rem;
 133 }
 134 tr:nth-child(even) {
 135   background-color: #eee;
 136 }
 137 kbd {
 138   border: solid 1px #aaa;
 139   background-color: #d2d2d2;
 140   padding: 0 5px;
 141   line-height: 1rem;
 142   white-space: nowrap;
 143 }
 144