Andrew's git / newtab.git / style.css
?
style.csson commit keyboard shortcuts & mouseover events (ce3ce1f)
   1:root {
   2  --hover-bg: #434c5e;
   3  --hover-grn: #a3be8c;
   4  --hover-bg-2: #848ead;
   5  --remove-bg: #bf616a;
   6  --default-fg: #d8dee9;
   7}
   8  
   9html, body {
  10  font-size: 16px !important;
  11  width: 100%;
  12  height: 100%;
  13}
  14
  15body {
  16  margin: 0;
  17  color: var(--default-fg);
  18  display: flex;
  19  flex-direction: column;
  20  align-items: center;
  21  justify-content: center;
  22}
  23
  24.favorites {
  25  display: flex;
  26  flex-direction: row;
  27  display: -webkit-flex;
  28  -webkit-flex-direction: row;
  29}
  30
  31ul {
  32  list-style: none;
  33  padding: 0;
  34  width: 10rem;
  35  margin: 0.5rem 2em 2em 2em;
  36}
  37
  38img {
  39  float: left;
  40  margin-top: 1px;
  41  padding-right: 3px;
  42}
  43
  44input {
  45  font-size: 16px !important;
  46  padding: 0;
  47  height: 18.5px;
  48  width: 112px;
  49  margin: 5px;
  50}
  51
  52input.name {
  53  margin-bottom: 2.5px
  54}
  55
  56input.url {
  57  margin-top: 2.5px
  58}
  59
  60.remove {
  61  width: 29px;
  62  height: 35px;
  63  padding: 0;
  64  background: var(--hover-bg);
  65  float: right;
  66  text-align: center;
  67  justify-content: center;
  68  align-items: center;
  69  cursor: pointer;
  70  font-family: monospace;
  71  display: flex;
  72}
  73
  74.save {
  75  padding-left: 8px;
  76  float: right;
  77  height: 60px;
  78  width: 21px;
  79  display: flex;
  80  text-align: center;
  81  align-items: center;
  82  cursor: pointer;
  83  background-color: var(--hover-bg-2);
  84}
  85
  86.save:hover, .save:focus, .save:focus-within {
  87  background: var(--hover-grn);
  88}
  89
  90.remove:hover {
  91  background: var(--remove-bg);
  92}
  93
  94.add {
  95  background-color: var(--hover-bg);
  96  margin-top: 14px;
  97  width: 29px;
  98  height: 29px;
  99  padding: 0;
 100  justify-content: center;
 101  align-items: center;
 102  float: right;
 103  display: none;
 104  cursor: pointer;
 105}
 106
 107.add:hover {
 108  background-color: var(--hover-grn) !important;
 109}
 110
 111.new {
 112  background-color: var(--hover-bg);
 113}
 114
 115.title:hover > .add {
 116  display: flex;
 117}
 118
 119.title:hover .add:not(:hover),
 120li:hover > .remove:not(:hover) {
 121  display: flex;
 122  background-color: var(--hover-bg);
 123}
 124
 125li:hover > a, li > a:focus, li > a:focus-within {
 126  display: inline-block;
 127  background-color: var(--hover-bg);
 128}
 129
 130li:hover {
 131  background-color: var(--hover-bg);
 132}
 133
 134a {
 135  color: inherit;
 136  outline: none;
 137  display: block;
 138  text-decoration: none;
 139  padding: 0.5rem;
 140  height: 19px;
 141}
 142
 143.remove:not(:hover) {
 144  display: none;
 145}
 146
 147a, ul > .title > p {
 148  width: calc(100% - 45px);
 149  display: inline-block;
 150}
 151
 152li.sortable-chosen.sortable-ghost > a {
 153  background-color: var(--hover-bg-2);
 154}
 155
 156.title {
 157  margin-bottom: 0.5rem;
 158  font-weight: bold;
 159  text-align: left;
 160  border-bottom: 1px solid var(--hover-bg);
 161}
 162
 163.title p {
 164  width: 160px;
 165  margin-left: 0.5rem;
 166  margin-bottom: 0.5rem !important;
 167}