public/assets/style.css

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