diff options
Diffstat (limited to 'docs/glyphs/glyphs.css')
-rw-r--r-- | docs/glyphs/glyphs.css | 79 |
1 files changed, 66 insertions, 13 deletions
diff --git a/docs/glyphs/glyphs.css b/docs/glyphs/glyphs.css index 636211aa1..c2af47a2d 100644 --- a/docs/glyphs/glyphs.css +++ b/docs/glyphs/glyphs.css @@ -1,5 +1,5 @@ -h1 span.glyph-name {} -h1 span.glyph-name:before { +h1 .glyph-name {} +h1 .glyph-name:before { content: " / "; color: rgba(0,0,0,0.2); font-weight:400; @@ -52,7 +52,7 @@ body.single #glyphs { .glyph .names { position: absolute; left:20px; right:20px; bottom:6px; - color:white; + color: white; text-align: center; font-size:1em; } @@ -106,6 +106,10 @@ body.single .intro p { #single-info { max-width: 500px; } +#single-info a { + background-image: none; + text-shadow: none; +} #single-info ul { list-style: none; } @@ -119,6 +123,9 @@ body.single .intro p { font-feature-settings: 'case' 1; padding-left:0.3em; } +#single-info .svgFile { + font-feature-settings: 'case' 1; +} #single-info .colorMark { display:inline-block; vertical-align:baseline; @@ -177,13 +184,17 @@ body.single .row.kerning { background: white; } .kernpair:target, .kernpair.selected { - background: rgba(250, 240, 0, 0.9); + background: rgba(0, 0, 0, 0.9); + /*color: white;*/ +} +.kernpair:target svg path, .kernpair.selected svg path { + fill: white; } .kernpair:focus { outline: none; - box-shadow: 0 0 0 2px rgba(0,0,0,0.4); + box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); } - .kernpair .left, .kernpair .right { + .kernpair .g.left, .kernpair .g.right { width:100px; height:100px; /*background:rgba(40,240,90,0.3);*/ @@ -191,16 +202,15 @@ body.single .row.kerning { background-repeat: no-repeat; opacity:0.8; } - .kernpair:hover .left, .kernpair:hover .right { + .kernpair:hover .g.left, .kernpair:hover .g.right { opacity:0.9; } - .kernpair.selected .left, .kernpair.selected .right { + .kernpair.selected .g.left, .kernpair.selected .g.right { opacity:1; } - /*.kernpair .left { background-color:rgba(120,90,140,0.3); }*/ + /*.kernpair .g.left { background-color:rgba(120,90,140,0.3); }*/ .kernpair .kern { position: absolute; - /*background-color: blue;*/ background-color: rgba(255,0,0,0.1); right:0; top:0; bottom:0; z-index:9; @@ -209,7 +219,7 @@ body.single .row.kerning { background-color: rgba(36,207,128,0.3); } .kernpair:hover .kern, .kernpair.selected .kern { - background-color: rgba(255,0,0,0.5); + background-color: rgba(255,100,100,0.5); } .kernpair:hover .kern.pos, .kernpair.selected .kern.pos { background-color: rgba(36,207,128,0.5); @@ -219,17 +229,60 @@ body.single .row.kerning { white-space: nowrap; opacity:0.9; height: 20px; - right:-8px; bottom:-20px; + right:-6px; bottom:-20px; z-index:1; text-align: center; color: rgba(255,0,0,0.8); visibility:hidden; + pointer-events: none; + font-size:11px; } .kernpair .kern.pos .label { - color: rgba(36,207,128,0.8); + color: rgba(1,163,88,0.8); } .kernpair:hover .kern .label, .kernpair.selected .kern .label { visibility:visible; } + .kernpair .link { + display: flex; + justify-content: flex-end; + position: absolute; + /*background: yellow;*/ + left:0; right:0; bottom:-22px; + height: 20px; + padding-top:2px; + user-select: none; + opacity: 0; + z-index:0; + } + .kernpair:hover .link { + opacity: 1; + } + .kernpair .link a { + background: none; + box-sizing: border-box; + color: rgba(0,0,0,0.2); + /*border: 1px solid #aaa;*/ + text-shadow: none; + display: block; + text-align: center; + font-size: 13px; + font-weight: 500; + width: 16px; /* sync with JS kLinkAWidth */ + height: 16px; + line-height: 14px; + padding-top:3px; + border-radius: 50%; + } + .kernpair .link:hover { + z-index:999; + } + .kernpair .link a:hover { + color: white; + background: #222; + } + .kernpair.right .link { + justify-content: flex-start; + } |