Kenmei Midnight Blue by ushruff

Imported and mirrored from https://github.com/ush-ruff/Kenmei-Midnight-Blue/raw/main/kenmei.user.css
Details

Authorushruff
LicenseGNU GPLv3
Categorykenmei
Created1 year, 7 months ago
Updated2 months, 4 days ago
Size30 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

This is a dark userstyle for Kenmei with a blue color palette. It completely restyles all elements of the website to dark with slight tweaks to some elements to better fit in with the theme.
Notes

Features

All element restyled in theme colors.
Option to customize your dashboard with a custom background image. (Please make sure to enter the URL within quotation marks to avoid errors)
Option to create a semi-transparent dashboard. (Only available to use alongside custom background image)
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Kenmei Midnight Blue
@namespace      github.com/ush-ruff
@homepageURL    https://github.com/ush-ruff/Kenmei-Midnight-Blue
@version        0.18.0
@description    A new userstyle
@author         ushruff
@preprocessor   stylus
@var            checkbox customBG "Custom Dashboard Background" 1
@var            checkbox enableTransparency "Dashboard Transparency" 1
@var            range topdrawerOpacity "Top Drawer Opacity" [0.95, 0, 1, 0.05]
@var            range dashboardOpacity "Dashboard Background Opacity" [0.9, 0, 1, 0.05]
@var            text customBgImage "Custom Background Image" "Enter url within quotes"
==/UserStyle== */
@-moz-document domain("kenmei.co") {
  $bg1=#2e3947;
  $bg2=#222f41;
  $bg3=#1c2633;
  $bg4=#141d29;
  $bg5=#3c5474;

  :root {
    /*
    --bg-1: #7400B8;
    --bg-2: #6930C3;
    --bg-3: #5E60CE;
    --bg-4: #5390D9;
    --bg-5: #4EA8DE;
    --bg-6: #48BFE3;
    --bg-7: #56CFE1;
    --bg-8: #64DFDF;
    --bg-9: #72EFDD;
    --bg-10: #80FFDB; 
    */
    /*
    --bg-1: #334154;
    --bg-2: #1f2936;
    --bg-3: #23262c;
    --bg-4: #1a1d21; 
    */
    /*
    --bg-1: #2e3947;
    --bg-2: #222f41;
    --bg-3: #1c2633;
    --bg-4: #141d29;
    --bg-5: #3c5474;
    */
    --bg-1: $bg1;
    --bg-2: $bg2;
    --bg-3: $bg3;
    --bg-4: $bg4;
    --bg-5: $bg5;

    scrollbar-color: var(--bg-5) var(--bg-3);
    scrollbar-width: thin;
  }
  html {
    background: var(--bg-4);
  }
  #app .router--wrapper {
    background-color: var(--bg-1)
  }
  .bg-white {
    background-color: var(--bg-3);
  }
  .dark_bg-blueGray-700, .dark_bg-slate-700 {
    background-color: var(--bg-1);
  }
  .dark_bg-gray-900 {
    background-color: var(--bg-4);
  }
  .bg-blue-500 {
    background-color: #4EA8DE;
  }
  .text-black {
    color: #e3eaf2;
  }
  .hover_text-gray-300:hover {
    color: #d4dce6;
  }
  .text-gray-400 {
    color: #9dabbe;
  }
  .text-gray-500 {
    color: #8f9db0;
  }
  .text-gray-700 {
    color: #7a8696;
  }
  .text-gray-900 {
    color: #6d798a;
  }
  .dark_text-white {
    color: #d4dce6;
  }
  .border-gray-100 {
    border-color: var(--bg-5);
  }
  .border-gray-200 {
    border-color: var(--bg-1);
  }
  .border-gray-300 {
    border-color: #6d798a;
  }
  .dark_border-gray-700 {
    border-color: var(--bg-1);
  }
  .text-blue-600 {
    color: #4EA8DE;
  }
  .sm_bg-transparent {
    background-color: transparent;
  }
  .sm_divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--bg-1);
  }
  
  /* LOGIN */
  [data-form-type="login"] {
    a {
      color: #4EA8DE;
      
      &:hover {
        color: #48BFE3;
      }
    }
    label {
      color: #9dabbe !important;
    }
    input[data-v-e32367a8]:focus {
      --tw-ring-offset-color: var(--bg-4);
    }
  }

  /* SKELETON LOADING */
  .bg-gray-400 {
    background-color: var(--bg-5);
  }
  .list-row__regular:hover .bg-gray-400 {
    background-color: var(--bg-4);
  }
  #app, .vfm__content {
    .skeleton-loader, .skeleton-loader--text, .skeleton-loader--badge, .skeleton-text, .skeleton--subtitle, .skeleton--badge {
      background-color: var(--bg-5);
    }
  }


  /* FOOTER */
  #app footer {
    background-color: var(--bg-4);
    border-color: var(--bg-3);
    
    h5 {
      color: #d4dce6;
    }
    .link {
      color: #7a8696;

      &:hover {
        color: #9dabbe;
      }
    }
  }


  /* POPUP */
  .el-message {
    background-color: var(--bg-5);
    border-color: var(--bg-1);
    color: #d4dce6;
  }
  .el-message .el-icon-info,
  .el-message--info .el-message__content {
    color: inherit;
  }


  /* UPDATE PROMPT */
  #app .prompt-wrapper {
  background-color: var(--bg-4);
  box-shadow: 0 0 10px rgba(black,0.4);

  button {
    padding: 0.25rem 0.5rem;
    background-color: var(--bg-4);

    &:focus {
      --tw-ring-offset-color: var(--bg-4);
      --tw-ring-color: #4EA8DE;
    }
  }
  
  .button--primary {
    color: #4EA8DE;
    
    &:hover, &:focus {
      color: #48BFE3;
    }
  }
  
  .button--secondary {
    color: #9dabbe;
    
    &:hover, &:focus {
      color: #d4dce6;
    }
  }
}


  /* HEADER */
  #app header {
    .desktop-links > div:first-child img {
      filter: brightness(2);
    }
    .desktop-link {
      color: #9dabbe;
      
      &:focus, &:hover {
        border-color: currentColor;
        color: #d4dce6;
      }
      &.router-link-active {
        border-color: #4EA8DE;
        color: #4EA8DE;
      }
    }
    .btn--search {
      --_size: 32px;
      display: grid;
      place-items: center;
      width: var(--_size);
      height: var(--_size);
      background-color: var(--bg-1);
      color: #9dabbe;
      
      &:hover, &:active, &:focus {
        color: #d4dce6;
      }
      &:focus {
        border-color: #4EA8DE;
        --tw-ring-color: #4EA8DE;
        --tw-ring-offset-color: var(--bg-4);
        --tw-ring-offset-width: 3px;
      }
    }
    .dropdown-wrapper {
      background-color: var(--bg-2);
      
      .dark_text-white:not(.text-gray-900) {
        color: #d4dce6;
      }
      .profile-link {
        color: #9dabbe;
        
        &:focus, &:hover {
          background-color: var(--bg-5);
          color: #d4dce6;
        }
      }
    }
  }
  .router-link-active img {
    filter: brightness(1.65)
  }


  /* LANDING PAGE */
  #landing-page {
    h1 {
      color: #e3eaf2;
    }
    h2, h3, h4, h5 {
      color: #d4dce6;
    }
    p {
      color: #9dabbe;
    }
    .secondary-text {
      color: #7a8696;
    }
    .btn-action {
      background-color: #4EA8DE;
      color: #e3eaf2;
      
      &:hover {
        background-color: #48BFE3;
      }
      &:focus {
        --tw-ring-offset-color: var(--bg-3);
      }
    }
    .icon {
      background-color: #4EA8DE;
      color: #e3eaf2;
    }
    .stats-container {
      background-color: var(--bg-2);
      border: 1px solid var(--bg-1);
      
      .stat-count {
        color: #4EA8DE;
      }
      .stat-text {
        color: #9dabbe;
      }
    }
    .card {
      background-color: #4EA8DE;
      
      .text-blue-200 {
        color: #e3eaf2;
      }
      h2 {
        color: #fff;
      }
      a {
        font-weight: 600;
        background-color: #e3eaf2;
        color: #4EA8DE;
        
        &:hover {
          background-color: #d4dce6;
        }
      }
    }
  }

  /* Hero Image */
  .hero-text + div {
    .svg--wrapper {
      background-color: var(--bg-2);
    }
    
    .img-wrapper {
      margin-inline-start: 3rem;
      padding: unset;
      background-image: url(https://raw.githubusercontent.com/ush-ruff/Kenmei-Midnight-Blue/main/images/sc-01.png);
      border-radius: 0.25rem;
      box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
      
      picture {
        display: none;
      }
    }
  }


  /* DASHBOARD */
  #app {
    .top-drawer {
      background-color: var(--bg-3);
      border-color: var(--bg-4);
    }
    .the-dashboard {
      background-color: var(--bg-2);
    }
    .the-dashboard,
    .the-dashboard-header,
    .the-dashboard-footer,
    .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
      border-color: var(--bg-4);
    }
    /* List Style */
    .list-row__regular:hover {
      background-color: var(--bg-5);
    }
    .list-row__selected {
      background-color: var(--bg-4);
    }
    .series-link {
      color: #d4dce6;
      
      &:hover {
        color: #4EA8DE
      }
    }
    /* Card Style */
    .skeleton-card {
      background-color: var(--bg-4);
    }
    .shadow-card {
      --tw-shadow: 0 3px 10px 2px rgba(0, 0, 0, 0.35);
    }
    .shadow-card.cover__selected {
      --tw-ring-color: #4EA8DE;
      --tw-ring-offset-color: var(--bg-5);
      --tw-ring-offset-width: 3px;
    }
    .cover__indicator {
      border-radius: unset;
    }
    .group .overlay {
      background-color: hsla($bg2, 0.5);
    }
  }

  /* Checkboxes */
  .the-dashboard, 
  .top-drawer + div > div:nth-child(2), 
  .vfm__content {
    input[type="checkbox"] {
      background-color: var(--bg-1);
      border-color: var(--bg-4);
      color: #8f9db0;
      
      &:focus {
        background-color: var(--bg-1);
        border-color: var(--bg-4);
        --tw-ring-color: #4EA8DE;
        --tw-ring-offset-color: var(--bg-5);
        --tw-ring-offset-width: 0px;
      }
      &:checked, &:checked:focus, &:checked:hover {
        background-color: #4EA8DE;
        border-color: #4EA8DE;
        --tw-ring-offset-color: var(--bg-4);
        --tw-ring-offset-width: 2px;
      }
      &:indeterminate {
        background-color: #4EA8DE;
        
        &:focus, &:hover {
          background-color: #4EA8DE;
          border-color: #4EA8DE;
          outline-color: transparent;
          --tw-ring-offset-width: 2px;
        }
      }
    }
  }

  /* Unread */
  .the-dashboard, .top-drawer + div > div:nth-child(2) {
    .unread-indicator-ping, .unread-indicator {
      background-color: #4EA8DE;
    }
  }

  /* Status */
  .the-dashboard, 
  .top-drawer + div > div:nth-child(2) {
    .primary,
    .success,
    .warning,
    .warning-light,
    .danger {
      padding: 0.25rem 0.75rem;
      font-size: 0.8rem;
    }
    .primary {
      background-color: #203ea2;
      color: #b4c3d7;
    }
    .success {
      background-color: #144a44;
      color: #34d399;
    }
    .warning {
      background-color: #bb5031;
      color: #fdc;
    }
    .warning-light {
      background-color: #cb733e;
      color: #f9f8c9;
    }
    .danger {
      background-color: #822222;
      color: #d8b7b7;
    }
  }

  /* Chapters */
  .the-dashboard, 
  .top-drawer + div > div:nth-child(2) {
    .chapter, .chapter-classes {
      background-color: #133a8b;
      color: #79a7e1;
      
      &:hover {
        background-color: #135ff9;
        color: #a2cafb;
      }
    }
    .chapter__none {
      background-color: #294684;
      color: #9ec4f5;
    }
    .chapter-meta {
      color: #9dabbe;
    }
  }

  /* Row Actions */
  .the-dashboard .row-actions, 
  .top-drawer + div > di...
Reviews

No reviews yet.