git.scottworley.com Git - vopamoi/blob - vopamoi.css

   1 input {
   2   width: calc(100% - 8px); /* 8px to account for the default padding and border */
   3 }
   4 .tag {
   5   float: right;
   6   margin-left: 1em;
   7   font-size: 80%;
   8 }
   9 body.dark .tag {
  10   opacity: 60%;
  11 }
  12 span.tag {
  13   color: white;
  14   padding: 1px .5em;
  15   font-weight: bold;
  16 }
  17 input.tag {
  18   width: 7em;
  19   border: none;
  20 }
  21 .content {
  22   font-size: 80%;
  23 }
  24 .content, textarea {
  25   margin-left: 2em;
  26   color: #555;
  27   white-space: pre;
  28 }
  29 body.dark .content, body.dark textarea {
  30   color: #bbb;
  31 }
  32 textarea {
  33   width: 90%;
  34   height: 5em;
  35 }
  36 body.dark textarea {
  37   background-color: black;
  38 }
  39 .hide {
  40   display: none;
  41 }
  42 .task {
  43   clear: right;
  44 }
  45 .task > .task {
  46   margin-left: 1em;
  47 }
  48 .statedate {
  49   font-size: 80%;
  50   margin-right: 0.5em;
  51   padding: 0 .2em;
  52   border-radius: 1em;
  53 }
  54 body.dark .statedate { opacity: 60%; }
  55 .task[data-state=cancelled]     > .statedate { background-color: #fee; }
  56 .task[data-state=deleted]       > .statedate { background-color: #ddd; }
  57 .task[data-state=done]          > .statedate { background-color: #efe; }
  58 .task[data-state=someday-maybe] > .statedate { background-color: #eef; }
  59 .task[data-state=waiting]       > .statedate { background-color: #faf; }
  60 body.dark .task[data-state=cancelled]     > .statedate { background-color: #600; }
  61 body.dark .task[data-state=deleted]       > .statedate { background-color: #222; }
  62 body.dark .task[data-state=done]          > .statedate { background-color: #060; }
  63 body.dark .task[data-state=someday-maybe] > .statedate { background-color: #006; }
  64 body.dark .task[data-state=waiting]       > .statedate { background-color: #303; }
  65 #ui {
  66   padding: 15px 10px;
  67 }
  68 body:before, body:after {
  69   content: "";
  70   position: fixed;
  71   background: var(--view-state-indicator-color);
  72   left: 0;
  73   right: 0;
  74   height: 5px;
  75 }
  76 body:before {
  77   top: 0;
  78 }
  79 body:after {
  80   bottom: 0;
  81 }
  82 body {
  83   margin: 0;
  84   min-height: 100vh;
  85   border-left: 5px solid var(--view-state-indicator-color);
  86   border-right: 5px solid var(--view-state-indicator-color);
  87 }
  88 body.dark, body.dark input {
  89   color: #eee;
  90   background-color: black;
  91 }