Commit 36fe7f893ca8db2aca11a868d8a6c3f8ec2b9cef
better styles for tabs
Dominic Tarr committed on 9/6/2016, 1:02:08 AMParent: f41b6c61b7161142ee4ad28be80315b062e1c39b
Files changed
| style.css | changed |
| style.css | |||
|---|---|---|---|
| @@ -1,8 +1,12 @@ | |||
| 1 | 1 … | body { | |
| 2 | 2 … | font-family: sans-serif; | |
| 3 | 3 … | } | |
| 4 | 4 … | ||
| 5 … | +* { | ||
| 6 … | + word-break: break-word; | ||
| 7 … | +} | ||
| 8 … | + | ||
| 5 | 9 … | .screen { | |
| 6 | 10 … | position: absolute; | |
| 7 | 11 … | top: 0px; bottom: 0px; | |
| 8 | 12 … | left: 0px; right: 0px; | |
| @@ -11,28 +15,41 @@ | |||
| 11 | 15 … | ||
| 12 | 16 … | .column { | |
| 13 | 17 … | display: flex; | |
| 14 | 18 … | flex-direction: column; | |
| 15 | - min-height: 0px; | ||
| 16 | 19 … | } | |
| 17 | 20 … | ||
| 18 | 21 … | .row { | |
| 19 | 22 … | display: flex; | |
| 20 | 23 … | flex-direction: row; | |
| 21 | 24 … | } | |
| 22 | 25 … | ||
| 26 … | +.end { | ||
| 27 … | + justify-content: flex-end; | ||
| 28 … | +} | ||
| 29 … | + | ||
| 23 | 30 … | .wrap { | |
| 24 | 31 … | display: flex; | |
| 25 | 32 … | flex-direction: row; | |
| 26 | 33 … | flex-wrap: wrap; | |
| 27 | 34 … | } | |
| 28 | 35 … | ||
| 36 … | +.no-shrink { | ||
| 37 … | + flex-shrink: 0; | ||
| 38 … | +} | ||
| 39 … | + | ||
| 40 … | +.expand { | ||
| 41 … | + justify-content: space-between; | ||
| 42 … | +} | ||
| 43 … | + | ||
| 29 | 44 … | .scroll-y { | |
| 30 | 45 … | overflow-y: auto; | |
| 46 … | + min-height: 0px; | ||
| 31 | 47 … | } | |
| 32 | 48 … | ||
| 33 | 49 … | .scroll-x { | |
| 34 | 50 … | overflow-x: auto; | |
| 51 … | + min-width: 0px; | ||
| 35 | 52 … | } | |
| 36 | 53 … | ||
| 37 | 54 … | pre { | |
| 38 | 55 … | white-space: pre-wrap; | |
| @@ -67,34 +84,8 @@ | |||
| 67 | 84 … | margin-left: auto; | |
| 68 | 85 … | margin-right: auto; | |
| 69 | 86 … | } | |
| 70 | 87 … | ||
| 71 | -/* --- hypertabs ------- */ | ||
| 72 | - | ||
| 73 | -.hypertabs__tabs { | ||
| 74 | - overflow-y: hide; | ||
| 75 | -} | ||
| 76 | - | ||
| 77 | -.hypertabs > .row { | ||
| 78 | - flex-grow: 0; | ||
| 79 | - flex-shrink: 0; | ||
| 80 | - margin: 0; | ||
| 81 | -} | ||
| 82 | - | ||
| 83 | -.hypertabs__tabs > * { | ||
| 84 | - max-width: 4em; | ||
| 85 | - overflow-x: hidden; | ||
| 86 | - margin-right: .5ex; | ||
| 87 | - padding-top: .1ex; | ||
| 88 | -} | ||
| 89 | - | ||
| 90 | -.hypertabs--selected { | ||
| 91 | - max-width: 4em; | ||
| 92 | - background: yellow; | ||
| 93 | - padding-left: .5ex; | ||
| 94 | - padding-right: .5ex; | ||
| 95 | -} | ||
| 96 | - | ||
| 97 | 88 … | /* compose */ | |
| 98 | 89 … | ||
| 99 | 90 … | .compose { | |
| 100 | 91 … | width: 100%; | |
| @@ -156,15 +147,11 @@ | |||
| 156 | 147 … | ||
| 157 | 148 … | /* -- suggest box */ | |
| 158 | 149 … | ||
| 159 | 150 … | .suggest-box > * { | |
| 160 | - margin: .5ex; | ||
| 151 … | + display: block; | ||
| 161 | 152 … | } | |
| 162 | 153 … | ||
| 163 | -.suggest-box { | ||
| 164 | - width: 5em; | ||
| 165 | -} | ||
| 166 | - | ||
| 167 | 154 … | .suggest-box ul { | |
| 168 | 155 … | list-style-type: none; | |
| 169 | 156 … | padding-left: -2em; | |
| 170 | 157 … | } | |
| @@ -172,8 +159,13 @@ | |||
| 172 | 159 … | .suggest-box .selected { | |
| 173 | 160 … | background: yellow; | |
| 174 | 161 … | } | |
| 175 | 162 … | ||
| 163 … | +.suggest-box { | ||
| 164 … | + width: max-content; | ||
| 165 … | + background: white; | ||
| 166 … | +} | ||
| 167 … | + | ||
| 176 | 168 … | /* avatar */ | |
| 177 | 169 … | ||
| 178 | 170 … | .avatar { | |
| 179 | 171 … | display: flex; | |
| @@ -237,14 +229,8 @@ | |||
| 237 | 229 … | height: 20px; | |
| 238 | 230 … | background: green; | |
| 239 | 231 … | } | |
| 240 | 232 … | ||
| 241 | -.menu { | ||
| 242 | - position: fixed; | ||
| 243 | - right: 10px; | ||
| 244 | - top: 10px; | ||
| 245 | -} | ||
| 246 | - | ||
| 247 | 233 … | .error { | |
| 248 | 234 … | background: red; | |
| 249 | 235 … | } | |
| 250 | 236 … | ||
| @@ -271,11 +257,8 @@ | |||
| 271 | 257 … | ||
| 272 | 258 … | .status { | |
| 273 | 259 … | width: .7em; | |
| 274 | 260 … | height: .7em; | |
| 275 | - position: fixed; | ||
| 276 | - right: .8em; | ||
| 277 | - top: .8em; | ||
| 278 | 261 … | border-radius: 100%; | |
| 279 | 262 … | background: green; | |
| 280 | 263 … | } | |
| 281 | 264 … | ||
| @@ -300,6 +283,70 @@ | |||
| 300 | 283 … | margin: 1ex; | |
| 301 | 284 … | } | |
| 302 | 285 … | ||
| 303 | 286 … | ||
| 287 … | +/* tabs */ | ||
| 304 | 288 … | ||
| 289 … | +.header { | ||
| 290 … | + background: lightgray; | ||
| 291 … | + border-bottom: 2px inset; | ||
| 292 … | + flex-shrink: 0; //I don't understand why this is needed, but it breaks without this. | ||
| 293 … | +} | ||
| 305 | 294 … | ||
| 295 … | +.header__tabs { | ||
| 296 … | + width: 100%; min-width: 0px; | ||
| 297 … | +} | ||
| 298 … | + | ||
| 299 … | +/* --- hypertabs ------- */ | ||
| 300 … | + | ||
| 301 … | +.hypertabs__tabs { | ||
| 302 … | + min-width: 0px; | ||
| 303 … | + width: 100%; | ||
| 304 … | +} | ||
| 305 … | + | ||
| 306 … | +.hypertabs__tab { | ||
| 307 … | + overflow-x: hidden; | ||
| 308 … | + min-width: 0px; | ||
| 309 … | + width: 100%; | ||
| 310 … | +} | ||
| 311 … | + | ||
| 312 … | +.hypertabs__button { | ||
| 313 … | + overflow-x: hidden; | ||
| 314 … | + min-width: 0px; | ||
| 315 … | + width: 100%; | ||
| 316 … | +} | ||
| 317 … | + | ||
| 318 … | +.hypertabs__tab { | ||
| 319 … | + color: black; | ||
| 320 … | + background: lightgray; | ||
| 321 … | + border: 1px ridge; | ||
| 322 … | + //border-top-right-radius: 3px; | ||
| 323 … | + border-top-left-radius: 5px; | ||
| 324 … | + margin-left: -3px; | ||
| 325 … | + border-bottom: none; | ||
| 326 … | + padding: 0.5em; | ||
| 327 … | + width: 100%; //stretch tabs to fill the space | ||
| 328 … | +} | ||
| 329 … | + | ||
| 330 … | +.hypertabs__tab > a { | ||
| 331 … | + color: black; | ||
| 332 … | + text-decoration: none; | ||
| 333 … | + white-space: nowrap; | ||
| 334 … | +} | ||
| 335 … | + | ||
| 336 … | +.hypertabs--selected { | ||
| 337 … | + background: #E7E7E7; | ||
| 338 … | + border-top-right-radius: 3px; | ||
| 339 … | + z-index: 1; | ||
| 340 … | +} | ||
| 341 … | + | ||
| 342 … | +.hypertabs__x { | ||
| 343 … | + display: none; //hide x on unselected tabs, like in firefox. | ||
| 344 … | + //margin-right: -5px; | ||
| 345 … | + //margin-top: -5px; | ||
| 346 … | + transform: translate(5px, -5px); | ||
| 347 … | +} | ||
| 348 … | + | ||
| 349 … | +.hypertabs--selected .hypertabs__x { | ||
| 350 … | + display: block; | ||
| 351 … | +} | ||
| 352 … | + | ||
Built with git-ssb-web