html/style.css

   1 html, body {
   2   width: 100%;
   3   height: 100%;
   4   padding: 0;
   5   margin: 0;
   6   font-family: sans-serif;
   7   overflow: hidden;
   8 }
   9
  10
  11 h1,h2,h3,h4,h5,h6 {
  12   font-size: 1rem;
  13 }
  14 h1 {
  15   background-color: #eee;
  16   margin: 0;
  17   padding: 4px 8px;
  18 }
  19
  20 a {
  21   color: #1e61df;
  22 }
  23
  24 .app {
  25   display: grid;
  26   grid-template-columns: 25% 75% auto;
  27   grid-template-rows: calc(40% - 24px) 60% 24px;
  28   grid-column-gap: 0px;
  29   grid-row-gap: 0px;
  30 }
  31
  32 #feed-pane {
  33   grid-area: 1 / 1 / 3 / 2;
  34   overflow: auto;
  35 }
  36
  37 #feed-item-list {
  38   height: calc(100% - 75px);
  39 }
  40 #feed-item-list span {
  41   float: right;
  42 }
  43
  44 #list-pane {
  45   grid-area: 1 / 2 / 2 / 3;
  46   border-left: solid 1px #000;
  47   border-bottom: solid 1px #000;
  48 }
  49
  50 #reading-pane {
  51   grid-area: 2 / 2 / 3 / 3;
  52   border: solid 0px #000;
  53   border-left-width: 1px;
  54 }
  55 #reading-pane img {
  56   max-width: 100%;
  57 }
  58 #feed-content, #meta, #feed-info {
  59   padding: 10px;
  60 }
  61 #feed-content {
  62   height: calc(100% - 100px)
  63 }
  64 #meta, #feed-info {
  65   background-color: #ddd;
  66   font-size: 0.9rem;
  67   max-height: 100px;
  68   overflow: hidden;
  69   border-bottom: solid 1px #000;
  70 }
  71
  72 #status-bar {
  73   grid-area: 3 / 1 / 3 / 3;
  74   background-color: #ccc;
  75   border-top: solid 1px #000;
  76   padding: 4px;
  77   line-height: 1rem;
  78   text-align: right;
  79 }
  80
  81 .btn {
  82   display: inline-block;
  83   border: solid 1px #888;
  84   border-radius: 4px;
  85   padding: 4px 10px;
  86   background-color: #eee;
  87   text-decoration: none;
  88 }
  89 .btn:hover {
  90   background-color: #ddd;
  91 }
  92
  93
  94 .scrollable {
  95   overflow: auto;
  96 }
  97 .list {
  98   padding: 0;
  99   margin: 0;
 100 }
 101
 102 .list li {
 103   list-style: none;
 104   margin: 0;
 105 }
 106
 107 .list li a {
 108   display: block;
 109   border: solid 0px #777;
 110   padding: 4px 8px;
 111 }
 112 #feed-pane a:hover {
 113   background-color: #eee;
 114 }
 115 #feed-pane a.active {
 116   background-color: #fff2cc;
 117 }
 118 #feed-pane a.unread {
 119   font-weight: bold;
 120 }
 121 #feed-pane a.active::after {
 122   content: '\21D2';
 123   float: right;
 124 }
 125 #feed-list {
 126   height: calc(100% - 70px);
 127 }
 128 #add-feed {
 129   padding: 5px;
 130   border-top: solid 1px #000;
 131 }
 132
 133 #list-pane table {
 134   width: 100%;
 135   border-spacing: 0;
 136 }
 137 #list-pane tr:hover {
 138   background-color: #aaa;
 139 }
 140 #list-pane th {
 141   text-align: left;
 142   background-color: #eee;
 143 }
 144 #list-pane th {
 145   padding: 4px;
 146 }
 147 #feed-actions {
 148   float: right;
 149 }
 150 #feed-item-list a {
 151   display: block;
 152   padding: 4px;
 153 }
 154 #feed-item-list a.active {
 155   background-color: #fff5e3;
 156 }
 157 #feed-item-list a.active {
 158   background-color: #e3f2ff;
 159 }
 160 #feed-item-list a.unread {
 161   font-weight: bold;
 162 }
 163
 164 .hidden {
 165   display: none !important;
 166 }