packages/muya/src/assets/styles/index.css - develop - githubmirror/marktext

packages/muya/src/assets/styles/index.css
251 строка6 KB
Ran Luo
fix: opaque light-theme editor text colors for crisp antialiasing (#4631)
22 июн 2026, 10:13
22 июн 2026, 10:1315b1366
:root {
    /* editor */
    --theme-color: rgb(33 181 111 / 100%);
    --highlight-color: rgb(33 181 111 / 40%);
    --selection-color: rgb(45 170 219 / 30%);
    --editor-color: #4d4d4d;
    --editor-color-80: #333;
    --editor-color-50: #808080;
    --editor-color-30: #b3b3b3;
    --editor-color-10: #e6e6e6;
    --editor-color-04: #f7f7f7;
    --editor-bg-color: rgb(255 255 255 / 100%);

    /* width of the centered editing column (`.mu-container` max-width) */
    --editor-area-width: 800px;
    --delete-color: #ff6969;
    --icon-color: #6b737b;
    --code-block-bg-color: rgb(0 0 0 / 3%);
    --table-border-color: #e5e5e5;
    --input-bg-color: rgb(0 0 0 / 6%);
    --button-font-color: var(--editor-color);
    --button-bg-color: #fff;
    --button-border: 1px solid #dcdfe6;
    --button-bg-color-hover: linear-gradient(#f9f9f9, #f2f2f2);
    --button-border-hover: var(--button-border);

    /* active / focus button variants — default to the resting button look so
       the bundled light theme is unchanged; desktop themes can override. */
    --button-bg-color-active: var(--button-bg-color);
    --button-border-active: var(--button-border);
    --button-border-focus: var(--button-border);
    --float-bg-color: #fff;
    --float-hover-color: rgb(0 0 0 / 4%);
    --float-border-color: rgb(0 0 0 / 10%);
    --float-shadow: rgb(15 15 15 / 3%) 0 0 0 1px, rgb(15 15 15 / 4%) 0 3px 6px, rgb(15 15 15 / 5%) 0 9px 24px;

    /* markdown element colors — defaults mirror the current hardcoded /
       opacity-tier values so the bundled light theme renders identically.
       Consumers override them per theme. The desktop themes currently use
       camelCase names (e.g. --linkColor, --h1Color); they will be migrated
       to these kebab-case names as part of the muyajs -> @muyajs/core move. */
    --link-color: rgb(20 86 240);
    --h1-color: var(--editor-color-80);
    --h2-color: var(--editor-color-80);
    --h3-color: var(--editor-color-80);
    --h4-color: var(--editor-color-80);
    --h5-color: var(--editor-color-80);
    --h6-color: var(--editor-color-80);
    --blockquote-text-color: var(--editor-color-50);
    --blockquote-border-color: var(--editor-color-30);
    --strong-color: inherit;
    --em-color: inherit;
    --list-marker-color: inherit;
    --hr-color: var(--editor-color-10);
}

/*
 * Open Sans
 * https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=latin-ext
 */
@font-face {
    font-weight: 300;
    font-family: 'Open Sans';
    font-style: normal;
    src:
        local('Open Sans Light'),
        local('OpenSans-Light'),
        url('./fonts/open-sans-v27-latin-ext_latin-300.woff') format('woff');
}

@font-face {
    font-weight: 300;
    font-family: 'Open Sans';
    font-style: italic;
    src:
        local('Open Sans Light Italic'),
        local('OpenSans-LightItalic'),
        url('./fonts/open-sans-v27-latin-ext_latin-300italic.woff') format('woff');
}

@font-face {
    font-weight: 400;
    font-family: 'Open Sans';
    font-style: normal;
    src:
        local('Open Sans Regular'),
        local('OpenSans-Regular'),
        url('./fonts/open-sans-v27-latin-ext_latin-regular.woff') format('woff');
}

@font-face {
    font-weight: 400;
    font-family: 'Open Sans';
    font-style: italic;
    src:
        local('Open Sans Italic'),
        local('OpenSans-Italic'),
        url('./fonts/open-sans-v27-latin-ext_latin-italic.woff') format('woff');
}

@font-face {
    font-weight: 600;
    font-family: 'Open Sans';
    font-style: normal;
    src:
        local('Open Sans SemiBold'),
        local('OpenSans-SemiBold'),
        url('./fonts/open-sans-v27-latin-ext_latin-600.woff') format('woff');
}

@font-face {
    font-weight: 600;
    font-family: 'Open Sans';
    font-style: italic;
    src:
        local('Open Sans SemiBold Italic'),
        local('OpenSans-SemiBoldItalic'),
        url('./fonts/open-sans-v27-latin-ext_latin-600italic.woff') format('woff');
}

@font-face {
    font-weight: 700;
    font-family: 'Open Sans';
    font-style: normal;
    src:
        local('Open Sans Bold'),
        local('OpenSans-Bold'),
        url('./fonts/open-sans-v27-latin-ext_latin-700.woff') format('woff');
}

@font-face {
    font-weight: 700;
    font-family: 'Open Sans';
    font-style: italic;
    src:
        local('Open Sans Bold Italic'),
        local('OpenSans-BoldItalic'),
        url('./fonts/open-sans-v27-latin-ext_latin-700italic.woff') format('woff');
}

/*
 * DejaVu Sans Mono
 */
@font-face {
    font-family: 'DejaVu Sans Mono';
    src: local('DejaVu Sans Mono'), url('./fonts/DejaVuSansMono.ttf');
}

@font-face {
    font-weight: bold;
    font-family: 'DejaVu Sans Mono';
    src: url('./fonts/DejaVuSansMono-Bold.ttf');
}

@font-face {
    font-weight: bold;
    font-family: 'DejaVu Sans Mono';
    font-style: oblique;
    src: url('./fonts/DejaVuSansMono-BoldOblique.ttf');
}

@font-face {
    font-weight: bold;
    font-family: 'DejaVu Sans Mono';
    font-style: italic;
    src: url('./fonts/DejaVuSansMono-BoldOblique.ttf');
}

@font-face {
    font-family: 'DejaVu Sans Mono';
    font-style: italic;
    src: url('./fonts/DejaVuSansMono-Oblique.ttf');
}

@font-face {
    font-family: 'DejaVu Sans Mono';
    font-style: oblique;
    src: url('./fonts/DejaVuSansMono-Oblique.ttf');
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes highlight {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    } /* ignored */
    100% {
        transform: scale(1);
    }
}

html,
body {
    font-size: 16px;
    font-family: 'Open Sans', 'Clear Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.mu-highlight {
    display: inline-block;
    height: 1.3em;
    padding: 0 2px;

    color: var(--editor-color-80);
    line-height: 1.3em;

    background: var(--highlight-color);
    border-radius: 1px;

    animation-name: highlight;
    animation-duration: 0.25s;
}

*:not(.mu-hide)::selection,
.mu-selection {
    padding: 0 0.2em;

    color: var(--editor-color);

    background: var(--selection-color);
    border-radius: 2px;
}

.mu-hide::selection {
    color: transparent;

    background: none;
}

/* Drag-and-drop image drop indicator (PG4). `dragDropImage.ts` positions this
   absolutely-anchored bar at the top/bottom edge of the drop-target block. */
#mu-dragover-ghost {
    position: absolute;

    height: 3px;

    background: var(--highlight-color);
}