Nordic Dark Yomitan Styles

outer.css

iframe.yomitan-popup {
  background: rgba(45, 45, 55, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

popup.css

/* =========================================
   1. NORDIC THEME & VARIABLES
   ========================================= */
:root {
    /* --- PALETTE (Nord Official) --- */
    --nord-bg:      #1e1e1e; /* Deep Dark */
    --nord-card:    #252526; /* Card Background */
    --nord-shadow:  rgba(0, 0, 0, 0.9);
    --nord-border:  #434C5E; /* Default Border */

    /* SNOW STORM (Text) */
    --nord-white:   #ECEFF4;
    --nord-mist:    #D8DEE9;
    
    /* FROST (Accents) */
    --acc-1: #5E81AC; /* Navy */
    --acc-2: #88C0D0; /* Cyan */
    --acc-3: #81A1C1; /* Blue */

    /* AURORA (Accents) */
    --acc-green:  #A3BE8C; 
    --acc-purple: #B48EAD; 
    --acc-red:    #BF616A; 
    --acc-gold:   #EBCB8B; /* Warning/Gold */

    /* GLOBAL SHADOW (Critical for white text) */
    --std-shadow: 1px 1px 1px var(--nord-shadow);
}

/* =========================================
   2. GLOBAL TYPOGRAPHY & LINKS
   ========================================= */
body {
    font-family: serif !important;
    font-size: 16px !important;
    background-color: var(--nord-bg) !important;
    color: var(--nord-white) !important;
    text-shadow: var(--std-shadow) !important;
}

/* Links: White/Frost */
a { 
    color: var(--nord-white) !important; 
    text-decoration: none; 
    border-bottom: 1px dotted var(--acc-2); 
}
a:hover { 
    color: var(--acc-2) !important; 
    border-bottom: 1px solid var(--acc-2);
}

/* Headword */
.headword-term {
    font-size: 1.6em !important;
    color: #FFFFFF !important;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5); 
}

.inflection-rule-chains {
    font-size: .65em;
}
.tag-label {
    font-size: .8em;
}
/* =========================================
   4. NORDIC TAGS (Outline Only + Clean Nesting)
   ========================================= */

/* 1. Base Tag Architecture */
.tag{
    background-color: transparent !important;
    --tag-color: transparent !important;
    
    color: var(--nord-white) !important;
    
    /* The Main Outline */
    border: 1px solid var(--nord-border) !important; 
    border-radius: 4px !important;
    
    padding: 1px 1px !important;
    margin: 0 4px 4px 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* 2. NESTED TAG RESET (The Fix for Double Outlines) */
/* This targets tags INSIDE tags (like Frequency values) and strips their border */
.tag .tag {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 3. Helper for tag layout */
.tag-label-content { color: inherit !important; padding: 0 !important; }
.tag-body { margin-left: 4px !important; display: inline-block !important; }


/* 4. THEME MAPPINGS (Apply Color to Border Only) */

/* Green (Frequency / Success) */
.tag[data-category="frequency"],
.tag[data-category="popular"] { 
    border-color: var(--acc-green) !important;
    /* Optional: Tint the text slightly so it's not just a white blob? */
    /* color: var(--acc-green) !important; */
}

/* Purple (Pronunciation / Technical) */
.tag[data-category="pronunciation-dictionary"],
.tag[data-category="pitch-accent"] { border-color: var(--acc-purple) !important; }

/* Gold (Names / Misc Meta) */
.tag[data-category="name"], 
.tag[data-category="expression"] { border-color: var(--acc-gold) !important; }

/* Cyan (Part of Speech) */
.tag[data-category="part-of-speech"] { border-color: var(--acc-2) !important; }


/* 5. SPECIFIC DICTIONARY MAPPINGS (Outline Only) */

/* Green Border */
.tag[data-dictionary="旺文社国語辞典 第十一版"],
.tag[data-dictionary="新明解国語辞典 第五版"],
.tag[data-dictionary="明鏡国語辞典"] { border-color: var(--acc-green) !important; }

/* Purple Border */
.tag[data-dictionary="広辞苑 第七版"],
.tag[data-dictionary="Jitendex.org [2024-02-12]"] { border-color: var(--acc-purple) !important; }

/* Gold Border */
.tag[data-dictionary="JMnedict"],
.tag[data-dictionary="JPDB"] { border-color: var(--acc-gold) !important; }

/* Red Border */
.tag[data-dictionary="Nico/Pixiv"],
.tag[data-dictionary="絵でわかる日本語"] { border-color: var(--acc-red) !important; }

/* =========================================
   3. THE "CARD" SYSTEM (Definition Entries)
   ========================================= */
ol, ul, li, .gloss-sc-ol, .gloss-sc-ul, .gloss-sc-li {

    list-style-type: none !important;

    list-style: none !important;

}
ol, ul, .gloss-sc-ol, .gloss-sc-ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Target the Definition ITEM */
.definition-item {
    background-color: var(--nord-card) !important;
    margin: 12px 0 !important;
    padding: 12px 15px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    
    /* The Accent Bar on the Left */
    border-left: 4px solid var(--acc-1) !important; 
    border-top: none !important; 
}

/* ROTATING ACCENT COLORS (Left Border Only) */
.definition-item:nth-of-type(5n+1) { border-left-color: var(--acc-1) !important; } /* Navy */
.definition-item:nth-of-type(5n+2) { border-left-color: var(--acc-green) !important; } /* Green */
.definition-item:nth-of-type(5n+3) { border-left-color: var(--acc-purple) !important; } /* Purple */
.definition-item:nth-of-type(5n+4) { border-left-color: var(--acc-gold) !important; } /* Gold */
.definition-item:nth-of-type(5n+5) { border-left-color: var(--acc-red) !important; } /* Red */

/* Clean up the wrapper (No Borders Here!) */
.entry-body-section {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important; 
}

/* =========================================
   4. DICTIONARY TAGS (REVERTED FIX)
   ========================================= */
/* Logic: 
   1. Text color is ALWAYS white (via --nord-white).
   2. Background is transparent.
   3. The COLOR variable applies ONLY to the BORDER of the .tag container.
*/



/* Ensure inner label doesn't override color */
.tag-label-content {
    color: inherit !important;
}

/* --- CUSTOM DICTIONARY BORDERS --- */
/* Targeting the .tag (parent) to color its border */

/* Green Border (Definitions) */
.tag[data-dictionary="旺文社国語辞典 第十一版"],
.tag[data-dictionary="新明解国語辞典 第五版"],
.tag[data-dictionary="明鏡国語辞典"] { 
    border-color: var(--acc-green) !important; 
}

/* Purple Border (Detailed/Technical) */
.tag[data-dictionary="広辞苑 第七版"],
.tag[data-dictionary="Jitendex.org [2024-02-12]"] { 
    border-color: var(--acc-purple) !important; 
}

/* Gold Border (Names/Frequency) */
.tag[data-dictionary="JMnedict"],
.tag[data-dictionary="JPDB"] { 
    border-color: var(--acc-gold) !important; 
}

/* Red Border (Visual/Misc) */
.tag[data-dictionary="Nico/Pixiv"],
.tag[data-dictionary="絵でわかる日本語"] { 
    border-color: var(--acc-red) !important; 
}


/* =========================================
   5. LAYOUT & BUTTONS (Fixed)
   ========================================= */
.entry-header {
    align-items: flex-end !important; 
    min-height: 35px !important;
    margin-bottom: 0px !important;
    padding-bottom: 5px !important;
}

.action-button-container[data-card-format-index="0"] .action-button,
button[data-action="play-audio"] {
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    margin-bottom: 2px !important; 
}

.action-button-container[data-card-format-index="0"] .action-icon,
button[data-action="play-audio"] .action-icon {
    width: 40px !important;
    height: 40px !important;
    position: absolute !important;
    top: 0; bottom: 0; left: 0; right: 0; margin: auto !important;
}

/* Hiding Elements */
.action-button-container { border: none !important; }
.action-button-container::after { display: none !important; }
.action-button-container[data-card-format-index="1"] { display: none !important; }
.action-button-container[data-card-format-index="0"] .action-button[disabled] { display: none !important; }
.top-progress-bar-container { display: none !important; }

/* Anti-Jump */
.note-actions-container {
    min-width: 65px !important;
    min-height: 65px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* Click Feedback */
.action-button-container[data-card-format-index="0"] .action-button:active .action-icon {
    filter: grayscale(100%) brightness(0.8) !important;
    transform: scale(0.95);
    transition: none !important;
}

/* =========================================
   6. KANJI OPTIMIZATIONS (Marv Style)
   ========================================= */
.kanji-glyph-data > tbody > tr:nth-child(n + 3) { display: none !important; }

div.entry[data-type='kanji']:nth-child(n + 2) .kanji-glyph-container,
div.entry[data-type='kanji']:nth-child(n + 2) [data-section-type='frequencies'],
div.entry[data-type='kanji']:nth-child(n + 2) table.kanji-glyph-data > tbody > tr:first-child {
  display: none !important;
}

.kanji-info-table-item-value-empty { display: none !important; }

.kanji-glyph-data,
div.entry[data-type='kanji'],
div.entry[data-type='kanji']:nth-child(n + 2) .kanji-glyph-data > tbody > tr > *,
.kanji-glyph-data dl.kanji-readings-japanese,
div.entry[data-type='kanji']:nth-child(n + 2) .kanji-glyph-data dl.kanji-readings-chinese[data-count='0'] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0em !important;
  margin-top: 0 !important;
}

.entry + .entry[data-type='kanji'],
div#dictionary-entries > div.entry:nth-child(n + 2) .kanji-glyph-data > tbody > tr > * {
  border-top: none !important;
}

.kanji-gloss-list { list-style-type: circle !important; }


/* =========================================
   10. STABLE LOADING STATE (The Transition Hack)
   ========================================= */

/* 1. THE "RETURN TRIP" (Release Click) 
   When you let go of the button, we force it to take 3 seconds 
   to turn back to Green. It will likely disappear/be replaced 
   by the Book icon before this animation finishes. */
.action-button-container[data-card-format-index="0"] .action-button[data-action="save-note"] .action-icon {
    filter: grayscale(0%) brightness(1);
    transform: scale(1);
    transition: filter 5s ease-out, transform 5s ease-out !important; 
}

/* 2. THE "CLICK" (Press Down) 
   Happens instantly. No transition. */
.action-button-container[data-card-format-index="0"] .action-button[data-action="save-note"]:active .action-icon {
    filter: grayscale(100%) brightness(0.7) !important;
    transform: scale(0.90) !important;
    transition: none !important; 
}

.action-button-container[data-card-format-index="0"] .action-button[data-action="save-note"]:focus {
    cursor: wait !important; 
    outline: none !important; /* Removes the blue focus ring */
}
/* =========================================
   11. INLINE HEADER STATS (Refined Layout)
   ========================================= */

/* 1. Main Container: Flex Row, Wrapping Enabled */
.entry-body {
    display: flex !important;
    flex-flow: row wrap !important; /* Horizontal flow, allow wrapping */
    align-items: center !important; /* Vertically align Freq tags with Pitch graphs */
    
    /* Spacing */
    column-gap: 15px !important;    /* Gap between Freq and Pitch */
    row-gap: 5px !important;        /* Gap if they wrap to a new line */
}

/* 2. Header Sections (Freq & Pitch) -> Fit Content */
/* These stay on the first line as long as they fit */
.entry-body-section[data-section-type="frequencies"],
.entry-body-section[data-section-type="pronunciations"] {
    flex: 0 1 auto !important; /* Allow shrinking if necessary, but prefer auto width */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    min-height: 0 !important;
}

/* 3. Force Definitions to a New Line (100% Width) */
/* This forces the "Break" to the next row */
.entry-body-section[data-section-type="definitions"] {
    flex: 1 0 100% !important; /* Basis 100% pushes it to a new line */
    width: 100% !important;
    margin-top: 5px !important;
    padding-top: 0 !important;
}

/* 4. Internal List Cleanup (The Stacking Fix) */
/* Forces the items INSIDE the Freq/Pitch sections to sit in a horizontal row */
.frequency-group-list,
.pronunciation-group-list,
.pronunciation-group, 
.pronunciation-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important; /* Space between multiple pitch graphs */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important; /* Double check list markers are gone */
}

/* 5. SPECIFIC GAP FIX: Pull the first card up */
/* The cards have 12px margin. We reduce ONLY the first one to 4px. */
.definition-list .definition-item:first-child {
    margin-top: 4px !important; 
}