css/grauphel.css

   1 .app-grauphel #app-content {
   2     box-sizing: border-box;
   3 }
   4 .app-grauphel #app-content.content {
   5     padding: 2ex;
   6 }
   7
   8 .app-grauphel #app-content h1 {
   9     font-weight: bold;
  10     font-size: 2em;
  11     margin-bottom: 1ex;
  12 }
  13 .app-grauphel #app-content.list h1 {
  14     padding: 1ex;
  15 }
  16 .app-grauphel #app-content.list > p {
  17     margin: 2ex;
  18 }
  19
  20 .app-grauphel #app-content h2 {
  21     font-weight: bold;
  22     font-size: 150%;
  23     margin-bottom: 1ex;
  24     margin-top: 2ex;
  25 }
  26 .app-grauphel #app-content dt,
  27 .app-grauphel #app-content dd {
  28     display: block;
  29     padding: 0;
  30     text-align: left;
  31 }
  32 .app-grauphel #app-content dt {
  33     font-weight: bold;
  34 }
  35 .app-grauphel #app-content dd {
  36     margin-left: 3ex;
  37 }
  38 .app-grauphel #app-content pre {
  39     margin: 1em;
  40     background-color: #DDD;
  41     padding: 1ex;
  42     font-family: monospace;
  43 }
  44 .app-grauphel #app-content blockquote {
  45     margin-left: 2ex;
  46 }
  47
  48 .app-grauphel #app-content ul {
  49     list-style-type: disc;
  50     margin-bottom: 1ex;
  51 }
  52 .app-grauphel #app-content li {
  53     margin-left: 4ex;
  54 }
  55 .app-grauphel #app-content a.lined {
  56     text-decoration: underline;
  57 }
  58
  59 .app-grauphel #app-content .error {
  60     color: red;
  61 }
  62 .app-grauphel #app-content .success {
  63     color: green;
  64 }
  65 .app-grauphel #app-content .error a {
  66     color: red !important;
  67 }
  68
  69 .app-grauphel #app-content .actions {
  70     float: right;
  71 }
  72 .app-grauphel #app-content .actions a {
  73     color: #555;
  74     padding: 14px 10px;
  75     position: relative;
  76     top: 7px;
  77     min-width: 25px;
  78     padding: 5px;
  79     background-color: rgba(240,240,240,.9);
  80 }
  81
  82 .app-grauphel .oauth-authorize {
  83     margin: 2ex;
  84     text-align: center;
  85 }
  86 .app-grauphel .msg {
  87     padding: 2ex;
  88 }
  89 .app-grauphel .buttons {
  90     margin-top: 2ex;
  91     text-align: center;
  92 }
  93
  94
  95 /* make the settings menu nicer */
  96 .app-grauphel #app-settings-content li a {
  97     display: block;
  98     line-height: 2rem;
  99     min-height: 2rem;
 100     padding-left: 1rem;
 101 }
 102 .app-grauphel #app-settings-content li a:hover {
 103     opacity: 1;
 104     box-shadow: inset 4px 0 var(--color-primary);
 105 }
 106
 107 /* table style */
 108
 109 table.table {
 110     position: relative;
 111     width: 100%;
 112 }
 113
 114 /* make sure there's enough room for the file actions */
 115 #body-user table.table {
 116         min-width: 688px; /* 768 (mobile break) - 80 (nav width) */
 117 }
 118
 119 table.table tbody tr { background-color:#fff; height:51px; }
 120
 121 /* fit app list view heights */
 122 /*
 123 .app-files #app-content>.viewcontainer {
 124         min-height: 100%;
 125 }*/
 126
 127 table.table tbody tr { background-color:#fff; height:40px; }
 128 table.table tbody tr:hover, tbody tr:active {
 129         background-color: rgb(240,240,240);
 130 }
 131 table.table tbody tr.selected {
 132         background-color: rgb(230,230,230);
 133 }
 134 table.table tbody tr.searchresult {
 135         background-color: rgb(240,240,240);
 136 }
 137 table.table tbody a { color:#000; }
 138
 139 table.table tr.mouseOver td {
 140         background-color: #eee;
 141 }
 142 table.table th, table th a {
 143         color: #999;
 144 }
 145 table.table thead th {
 146     background-color: white;
 147     padding: 15px;
 148     height: 50px;
 149     box-sizing: border-box;
 150     vertical-align: middle;
 151 }
 152
 153 table.table th, table.table td, #searchresults td {
 154     border-bottom:1px solid #ddd;
 155     text-align:left;
 156     font-weight:normal;
 157 }
 158 table.table td {
 159     padding: 0 15px;
 160     border-bottom: 1px solid #eee;
 161     font-style: normal;
 162     background-position: 8px center;
 163     background-repeat: no-repeat;
 164 }
 165 #headerTitle {
 166     /* let it take all available space */
 167     width: 9999px;
 168 }
 169
 170 a.action.delete, table.table form button.action.delete {
 171     position: absolute;
 172     right: 0px;
 173     padding: 17px 14px;
 174     padding: 3px 14px;
 175 }
 176 a.action {
 177     line-height: 30px;
 178 }
 179 a.cellclick {
 180     display: block;
 181 }
 182 table.table form {
 183     display: inline;
 184 }
 185 table.table form button.action {
 186     border: none;
 187     background-color: transparent;
 188 }
 189
 190 .muted {
 191     color: #999;
 192 }
 193
 194 .note-content {
 195     padding-top: 2ex;
 196 }
 197
 198 .note-content .strikethrough {
 199     text-decoration: line-through;
 200 }
 201 .note-content .highlight {
 202     background-color: yellow;
 203 }
 204 .note-content .small {
 205     font-size: 80%;
 206 }
 207 .note-content .large {
 208     font-size: 150%;
 209 }
 210 .note-content .huge {
 211     font-size: 200%;
 212 }
 213 .note-content a {
 214     text-decoration: underline;
 215 }
 216
 217 #searchresults {
 218     margin-top: 0px;
 219     min-height: 100%;
 220     margin-bottom: 50px;
 221 }