yomichan/ext/mixed/css/display.css

/*
 * Copyright (C) 2016  Alex Yatskov <alex@foosoft.net>
 * Author: Alex Yatskov <alex@foosoft.net>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the entrys of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */


/*
 * Fonts
 */

@font-face {
    font-family: kanji-stroke-orders;
    src: url('/mixed/ttf/kanji-stroke-orders.ttf');
}

/*
 * General
 */

html:root[data-yomichan-page=float]:not([data-yomichan-theme]),
html:root[data-yomichan-page=float]:not([data-yomichan-theme]) body {
    background-color: transparent;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    margin: 0;
    border: 0;
    padding: 0;
}

hr {
    padding: 0px;
    margin: 0px;
    border: 0;
    border-top-width: 1px;
    border-top-style: solid;
}

ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}

#spinner {
    bottom: 5px;
    display: none;
    position: fixed;
    right: 5px;
}

#error-orphaned {
    display: none;
}

.invisible {
    visibility: hidden;
}

/*
 * Navigation
 */

.term-navigation {
    position: fixed;
    top: 0px;
}

.term-button-fade {
    opacity: 0.4;
}


/*
 * Search page
 */

.icon-checkbox {
    display: none;
}

.icon-checkbox + label {
    cursor: pointer;
    font-size: 22px;
    padding: 2px;
    user-select: none;
}

#query-parser {
    margin-top: 10px;
    font-size: 24px;
}

.query-parser-term {
    margin-right: 5px;
}

html:root[data-yomichan-page=search] body {
    overflow-y: scroll; /* always show scroll bar to avoid scanning problems */
}


/*
 * Entries
 */

.entry, .note {
    padding-top: 20px;
    padding-bottom: 10px;
}

html:root[data-yomichan-page=float] .entry,
html:root[data-yomichan-page=float] .note {
    padding-left: 10px;
    padding-right: 10px;
}

.actions .disabled {
    pointer-events: none;
    cursor: default;
}

.actions .disabled img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.25;
}

.actions .pending {
    visibility: hidden;
}

.actions {
    display: block;
    float: right;
}

.actions:after {
    clear: both;
    content: '';
    display: block;
}

.expression {
    display: inline-block;
    font-size: 24px;
}

.expression .kanji-link {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    text-decoration: none;
}

.expression .peek-wrapper {
    font-size: 14px;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    width: 0px;
    height: 0px;
    visibility: hidden;
}

.expression .peek-wrapper .action-play-audio {
    position: absolute;
    left: 0px;
    bottom: 10px;
}

.expression .peek-wrapper .tags {
    position: absolute;
    left: 0px;
    bottom: -10px;
}

.expression .peek-wrapper .frequencies {
    position: absolute;
    left: 0px;
    bottom: -30px;
}

.expression:hover .peek-wrapper {
    visibility: visible;
}

.reasons {
    display: inline-block;
}

.compact-info {
    display: inline-block;
}

.glossary ol, .glossary ul {
    padding-left: 1.4em;
}

.glossary ul.compact-glossary {
    display: inline;
    list-style: none;
    padding-left: 0px;
}

.glossary .compact-glossary li {
    display: inline;
}

.glossary .compact-glossary li:not(:first-child):before {
    content: " | ";
}

div.glossary-item.compact-glossary {
    display: inline;
}

.glyph {
    font-family: kanji-stroke-orders;
    font-size: 120px;
    line-height: 120px;
    padding: 0.01em;
    vertical-align: top;
}

.glyph-data {
    margin-top: 10px;
}

.info-output {
    width: 100%;
}

.info-output td {
    text-align: right;
}

.entry:not(.entry-current) .current {
    display: none;
}

.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}