X-Git-Url: http://git.draconx.ca/gitweb/homepage.git/blobdiff_plain/3f707bce834daa1c9c3f5029611090430caa2178..0015d84bea1204b4534e5568ff7c0920b9ef02b7:/content/style.scss diff --git a/content/style.scss b/content/style.scss index 5240779..912fe4a 100644 --- a/content/style.scss +++ b/content/style.scss @@ -240,7 +240,7 @@ $clickynames: name, date, size; } } - &:focus ~ table th.clicky-#{$col}>label~label>span { + &:focus ~ table th.clicky-#{$col}>label~label>span:first-child { border-color: $foregroundcolour; } @@ -256,15 +256,15 @@ $clickynames: name, date, size; &:checked ~ table { // Update table header state & th.clicky-#{$col} { - img+img { + .svg+.svg { display: -moz-inline-box !important; display: inline-block !important; } - img { display: none; } + .svg { display: none; } } } - &:focus ~ table th.clicky-#{$col}>label~label>img { + &:focus ~ table th.clicky-#{$col}>label~label .svg { border-color: $foregroundcolour; } @@ -275,16 +275,17 @@ $clickynames: name, date, size; } th.clicky-#{$col}>label { - &, &>* { - white-space: nowrap; - vertical-align: middle; + white-space: nowrap; + cursor: pointer; + line-height: 1.5em; + + &>* { display: -moz-inline-box; display: inline-block; - cursor: pointer; + border: 1px dotted transparent; + vertical-align: middle; } - &>* { border: 1px dotted transparent; } - // Expand the first label a bit so the table (hopefully) // does not reshape as columns are selected. &:first-child { @@ -293,28 +294,39 @@ $clickynames: name, date, size; } &:active { color: $linkactivecolour; } - &:first-child:active>span, &~label:active>img { + &:first-child:active>span, &~label:active>.svg { border-color: $linkactivecolour; } - img { + .svg { margin-left: 0.25em; - width: 1.5em; - height: auto; } + + .svg, svg, img.svgfallback { + height: 1.5em; + width: auto; + } + .svg svg { width: 1.5em; } } } table.filelist { - &>tr>*:first-child, &>*>tr>*:first-child { - &+td { min-width: 50%; } - width: 0; + &>*>tr>*:first-child { + &+* { width: 50%; } + // chrome doesn't like width: 0 for some reason + width: 0.1px; } - tbody img { - display: block; - height: 1.5em; - width: auto; + tbody { + .svg, svg, img.svgfallback { + height: 1.5em; + width: auto; + } + + .svg { + svg { width: 1.5em; } + display: inline-block; + } } }