From cfa58d725b1fdfebfdb469a88d742abcef873b26 Mon Sep 17 00:00:00 2001 From: doncr Date: Sat, 10 Dec 2016 01:08:41 +0000 Subject: [PATCH] Style redesign. --- conjugation/drill.css | 81 +++++++++++++++++++++++++++++++++++++++++- conjugation/drill.html | 2 +- 2 files changed, 81 insertions(+), 2 deletions(-) diff --git a/conjugation/drill.css b/conjugation/drill.css index 3054ab7..bba762c 100644 --- a/conjugation/drill.css +++ b/conjugation/drill.css @@ -1,5 +1,5 @@ body { - font-family: 'Source Sans Pro', sans-serif; + font-family: 'Amaranth', sans-serif; margin: 0; } @@ -66,3 +66,82 @@ body { .incorrect { background: #f88; } + +div#history, +div#explanation { + margin-left: auto; + margin-right: auto; + display: table; +} + +table.syllabary { + border-collapse: collapse; +} + +table.syllabary td { + padding: 12px; + font-size: 14px; + color: gray; + border: 1px solid gray; + text-align: center; + width: 32px; + height: 32px; +} + +table.syllabary td div:first-child { + color: black; + font-size: 24px; +} + +table.syllabary td.empty { + background: #eee; +} + +.answer-correct { + color: red; +} + +.answer-wrong { + color: blue; +} + +div#history table { + border-collapse: collapse; +} + +div#history table th, +div#history table td { + padding: 8px; + border: 1px solid gray; +}: + +div#history table th { + text-align: left; +} + +/* Tooltip from http://jsfiddle.net/AndreaLigios/jtLbpy62/ */ + +[tooltip]:before { + /* needed - do not touch */ + content: attr(tooltip); + position: absolute; + opacity: 0; + + /* customizable */ + transition: all 0.15s ease; + color: #333; + font-size: 12px; +background: yellow; +} + +[tooltip]:hover:before { + /* needed - do not touch */ + opacity: 1; + + /* customizable */ + margin-top: -20px; +} + +[tooltip]:not([tooltip-persistent]):before { + pointer-events: none; +} diff --git a/conjugation/drill.html b/conjugation/drill.html index 4834ae6..d6b8745 100644 --- a/conjugation/drill.html +++ b/conjugation/drill.html @@ -3,7 +3,7 @@ - +