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