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