note-dark (userstyle port) by onurtag

/* ==UserStyle==
@name         note-dark (userstyle port)
@version      1.0.3
@namespace    userstyles.world/user/onurtag
@description  A userstyle port of the note-dark chrome extension.
@preprocessor stylus
@author       onurtag
@license      No License

@var    color    bgcolor         "BG Color"              #15202B
@var    color    subbgcolor      "Sub BG Color"          #1c2a37
@var    color    primarycolor    "Primary Text Color"    #8fc7d0f2
@var    color    secondarycolor  "Secondary Text Color"  #bfbfbff2
@var    color    textcolor       "Main Text Color"       #F8F8F8
@var    color    subtextcolor    "Sub Text Color"        #8899A6
@var    color    graycolor       "Gray Accent"           #c1cfd9
@var    color    bluegraycolor   "Blue-Gray Accent"      #5a7488
@var    color    likecolor       "Like Color"            rgb(234,63,96)
@var    color    maincolor       "Main Color"            rgb(44,182,150)
@var    color    maincolordark   "Main Color Dark"       #228d74
==/UserStyle== */

/* (ignore the following unnecessary curly bracket error) */
@-moz-document domain("note.com") {
    /* 
    note-dark
    
    A userstyle port of the note-dark chrome extension.
    Many thanks to Blue-Pix the creator of the note-dark extension.
    
    https://github.com/Blue-Pix/note-dark
    https://chrome.google.com/webstore/detail/ndjhheglhimmpjbgedbacgmloigpicng/
    
    My few contributions are the ones below until the first seperator.  
    Everything below that seperator is all ported from the note-dark chrome extension.
    
    */
    
    
    /* TODO: Recheck if I still need to keep the borrowed parts (for now, I don't think so) */
    
    :root {
        --color-white: bgcolor;
        --color-black: textcolor;
        --color-surface-normal: subbgcolor;
        --color-text-clickable: subtextcolor;
        --color-background-primary: bgcolor;
        --color-background-secondary: subbgcolor;
        --color-surface-successSubdued: subbgcolor;
        --color-background-default: bgcolor;
        --bg-color: bgcolor;
        --sub-bg-color: subbgcolor;
        --color-text-primary: primarycolor;
        --color-text-secondary: secondarycolor;
        --text-color: textcolor;
        --sub-text-color: subtextcolor;
        --gray: graycolor;
        --blue-gray: bluegraycolor;
        --like-color: likecolor;
        --main-color: maincolor;
        --main-color-dark: maincolordark;
        --color-text-clickable-icon: subtextcolor;
        --color-gray-900: #B6B6B699;
    }

    select {
        color: var(--sub-text-color) !important;
        background-color: var(--sub-bg-color) !important;
    }
    
    /* Fix logo text */
    .a-noteLogo > path:first-of-type, .m-navbarLogo path {
        fill: #D6D6D6 !important;
    }

    /* Fix note card background and add paddings */
    .m-largeNoteWrapper__card,
    .m-wideNoteWrapper__card {
        background-color: var(--sub-bg-color) !important;
        padding: 10px;
    }

    /* Fix sidebar, login form backgrounds and much more (sub-bg-color) */
    .o-magazineFloatingSidebar,
    .o-login__form,
    .o-signup__formWrapper,
    .p-resetPassword,
    .p-followRecommend__footer,
    .m-richModalContent__panel,
    .m-userPromoteCard,
    .o-notification__popover,
    .o-pickupHashtagItem__tag,
    .m-timelineItemWrapper__itemRowWrapper,
    .o-twitterCard,
    .note-common-styles__textnote-body blockquote,
    .note-common-styles__textnote-body figure blockquote {
        background-color: var(--sub-bg-color) !important;
    }

    /* Fix magazine, notification title text colors */
    .note-common-styles__textnote-body,
    .m-infoNotificationListItem__title {
        color: var(--text-color) !important;
    }

    /* Fix notification tabs */
    .o-notification__tabItem.is-active,
    .o-notification__tabItem:hover {
        color: var(--sub-text-color) !important;
    }

    /* Fix input placeholders */
    .a-input::placeholder {
        color: var(--text-color) !important;
        opacity: 0.3;
    }

    .bg-white {
        background-color: bgcolor;
    }


    .a-checkbox__check:before {
        border-color: var(--subtextcolor) !important;
    }

    /* 
    ------------ SEPERATOR ------------
    
    Below styling is all ported from the note-dark chrome extension.    
    Many thanks to Blue-Pix the creator of the note-dark extension.
    
    ------------ SEPERATOR ------------
    */
    html,
    body {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

    .o-navBar {
        background: var(--bg-color) !important;
    }

    button.a-button,
    a.a-button {
        background: var(--bg-color) !important;
        border: 1px solid var(--sub-text-color) !important;
        color: var(--text-color) !important;
    }

    button.a-button:hover,
    a.a-button:hover {
        border: 1px solid var(--gray) !important;
    }

    button.a-button[data-type="primary"] {
        background: var(--bg-color) !important;
        border: 1px solid var(--main-color) !important;
        color: var(--main-color) !important;
    }

    button.a-button[data-type="primary"]:hover {
        border: 1px solid var(--main-color-dark) !important;
        color: var(--main-color-dark);
    }

    button.a-button[data-type="secondary"] {
        border: 1px solid var(--main-color) !important;
        color: var(--main-color) !important;
    }

    button.a-button[data-type="secondary"]:hover {
        border: 1px solid var(--main-color-dark) !important;
        color: var(--main-color-dark) !important;
    }


    .a-input,
    .a-textarea {
        background: var(--sub-bg-color) !important;
        border: 1px solid var(--sub-text-color) !important;
        color: var(--text-color) !important;
    }

    .a-textarea::placeholder {
        color: var(--sub-text-color) !important;
    }

    .m-siteLogo__image {
        background: var(--bg-color) !important;
    }

    .o-navBar {
        border-bottom: 1px solid var(--sub-text-color) !important;
    }

    .o-navbarMenu__category {
        border-top: 1px solid var(--sub-text-color) !important;
    }

    /** 選択中以外 */
    .a-navItem {
        color: var(--sub-text-color);
    }

    /** ホバー時は選択中と同じになる */
    .a-navItem:hover > .a-navItem__item {
        color: var(--text-color) !important;
    }

    .a-navItem:hover > .a-navItem__item:before {
        background: var(--text-color) !important;
    }

    /** 選択中 */
    .a-navItem .is-active {
        color: var(--text-color) !important;
    }

    .a-navItem .is-active:before {
        background: var(--text-color) !important;
    }

    .m-submenu__item {
        color: var(--sub-text-color);
    }

    .m-submenu__item > .m-submenu__link:hover {
        color: var(--text-color);
    }

    .m-submenu__item > .m-submenu__link.active {
        color: var(--text-color) !important;
    }


    /**
    .a-button[data-type=primary] {
        background: #09f !important;
    }
    **/
    /** 記事背景 */
    .o-textNote,
    .o-imageNote {
        background: var(--bg-color) !important;
    }

    /** 記事ホバー時の背景 */
    .o-textNote:hover:before,
    .o-imageNote:hover:before {
        background: var(--sub-bg-color) !important;
    }

    /** 記事見出し */
    /** 記事サマリ */
    /** 投稿者名 */
    .o-timelineFooter__name .a-link {
        color: var(--text-color);
    }

    /** 投稿日時 */
    /** 〇〇からのおすすめ */
    .o-timelineFooter__date .a-link,
    .o-timelineNotificationMessages__text {
        color: var(--sub-text-color);
    }

    /** 記事右下スキアイコン */
    .o-like > .a-icon--heartFill {
        color: var(--like-color) !important;
    }

    /** マガジン追加モーダル */
    .modal-backdrop {
        background: var(--sub-bg-color);
        opacity: 0.5;
    }

    .m-basicModalContent__header {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
        border-bottom: 1px solid var(--sub-text-color) !important;
    }

    .o-magazineList {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

    .m-basicModalContent__footer {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
        border-top: 1px solid var(--sub-text-color) !important;
    }

    .m-basicModalContent__body {
        background: var(--bg-color) !important;
    }

    /* .o-magazineListItem:not(:last-of-type) {
      border-bottom: 1px solid var(--sub-text-color) !important;
    } */
    .o-magazineListItem:last-of-type {
        border-bottom: none
    }

    .o-magazineListForm {
        border-top: 1px solid var(--sub-text-color) !important;
    }

    .m-magazineCover__title {
        color: var(--text-color) !important;
    }

    .m-magazineCover__name {
        color: var(--sub-text-color) !important;
    }

    .o-magazineListItem__action,
    .o-magazineListItem__button > button {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

    .m-magazineCover__status--lock {
        background: var(--sub-bg-color) !important;
    }

    /** サイドバー */
    .o-sidebarPickupNotes .m-noteListItem__name {
        color: var(--sub-text-color) !important;
    }

    .m-noteListItem__border--bottom {
        border-bottom: 1px solid var(--sub-text-color) !important;
    }

    .m-noteListItem__hover:hover:before,
    .m-contestListItem:hover:before {
        background: var(--sub-bg-color) !important;
    }

    .o-sidebarPickupNotes__header__readAll:hover,
    .o-sidebarContests__header__readAll:hover {
        color: var(--text-color) !important;
    }

    .m-contestListItem__description {
        color: var(--sub-text-color) !important;
    }

    .m-contestListItem.o-sidebarContests__listItem {
        border-bottom: 1px solid var(--sub-text-color);
    }

    .o-sidebarTwitter {
        border: 1px solid var(--sub-text-color) !important;
    }

    .o-sidebarTwitter__description {
        color: var(--s...