Skip to content

ComicK - Amoled by xiggi

Write a review Install Get Stylus

Details

Authorxiggi

LicenseNo License

Categorycomick

Created

Updated

Size44 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Deep dark theme for ComicK.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           ComicK - Amoled
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("comick.io") {
    :root {
        /** Backgrounds **/
        --main-bg: rgb(12, 12, 12);
        
        --second-bg: rgb(21, 21, 21);
        --second-bg-opacity: rgba(21, 21, 21, .5);
        
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);;
        
        --gray-bg: rgb(31, 31, 31);
        
        /** Colors **/
        --white: #fff;
        --gray: #ccc;
        --blue: #3d53f5;
        --light-blue: : #02a9ff;
    }
    
    body {
        background-color: var(--main-bg);
    }
    
    a.ml-3.mt-2.border.rounded-md.px-4.py-2.w-12.h-12.flex.items-center.justify-center {
        border-color: var(--gray-bg);
        color: var(--gray);
    }
    
    a.ml-3.mt-2.border.rounded-md.px-4.py-2.w-12.h-12.flex.items-center.justify-center:hover {
        background: var(--third-bg);
        border-color: var(--gray-bg);
        color: var(--white);
        transition: 0.2s;
    }
    
a.ml-3.mt-2.border.rounded-md.px-4.py-2.w-12.h-12.flex.items-center.justify-center.bg-blue-500.text-gray-300 {
        background: var(--third-bg);
        border-color: var(--blue);
        color: var(--blue);
    }
    
    a.ml-3.mt-2.border.rounded-md.px-4.py-2.flex.items-center.justify-center {
        border-color: var(--gray-bg);
        color: var(--gray);
    }
    
    a.ml-3.mt-2.border.rounded-md.px-4.py-2.flex.items-center.justify-center:hover {
        background: var(--third-bg);
        border-color: var(--gray-bg);
        color: var(--white);
        transition: 0.2s;
    }
    
.divide-slate-500>:not([hidden])~:not([hidden]) {
    border-color: var(--third-bg);
}
    
    span#headlessui-menu-item-\:r5\:hover {
        color: #fff;
    }
    
    body.dark, body[data-theme=dark] {
    --aa-scrollbar-track-background-color-rgb:  21, 21, 21;
    --aa-scrollbar-thumb-background-color-rgb: 31, 31, 31;
    }
    
    :is(.dark .dark\:bg-gray-800) {
        background-color: var(--main-bg);
    }
    
:is(.dark .dark\:text-gray-300) {
    color: var(--white);
}
    
.text-gray-500 {
    color: var(--gray);
}
    
:is(.dark .dark\:divide-gray-700)>:not([hidden])~:not([hidden]) {
    border-color: var(--third-bg);
}
    
:is(.dark .dark\:bg-gray-800\/95) {
    background-color: var(--main-bg);
}
    
:is(.dark .dark\:border-gray-700) {
    border-color:transparent;
}
    
:is(.dark .dark\:text-blue-300) {
    color: var(--blue);
}

.text-blue-500 {
    color: var(--blue);
}
    
:is(.dark .dark\:border-blue-200) {
    border-color: var(--blue);
}
    
:is(.dark .link) {
    color: var(--white);
}
    
:is(.dark .link):hover {
    color: var(--blue);
        transition: 0.2s;
    text-decoration-line: none;
}
    
:is(.dark .dark\:hover\:bg-gray-600:hover) {
    background-color: var(--third-bg);
}
    
.text-gray-400 {
    color: var(--white);
}
    
:is(.dark .dark\:hover\:text-gray-200:hover) {
    color: var(--blue);
        transition: 0.2s;
}
    
:is(.dark .dark\:bg-gray-700) {
    background-color: var(--third-bg);
}
    
    :is(.dark .dark\:hover\:bg-gray-700:hover) {
    background-color: var(--third-bg);
    }
    
    :is(.dark .dark\:bg-gray-750) {
    background-color: var(--third-bg);
    }
    
.border-gray-300 {
    border-color: var(--third-bg);
}
    
    [type=checkbox], [type=radio] {
    background-color: var(--third-bg);
    }
    
.hm2git0 {
    color: var(--blue);
    background:var(--third-bg);
    }
    
.hm2git0:hover {
    background-color: var(--blue);
    color: #fff;
    transition: 0.2s;
}
    
.i8n2ik0 {
    color: var(--gray);
    background-color: transparent;
    border: 1px solid var(--third-bg);
    }
    
.i8n2ik0:focus, .i8n2ik0:hover {
    border-color: var(--third-bg);
    background: var(--third-bg);
    color: var(--white);
    transition: 0.2s;
    }
    
:is(.dark input[type=email]), :is(.dark input[type=number]), :is(.dark input[type=password]), :is(.dark input[type=text]), :is(.dark select), :is(.dark textarea) {
    color: var(--white);
    background-color: var(--third-bg);
    }
    
:is(.dark input[type=email]:hover), :is(.dark input[type=number]:hover), :is(.dark input[type=password]:hover), :is(.dark input[type=text]:hover), :is(.dark select:hover), :is(.dark textarea:hover) {
    background-color: var(--third-bg);
    }
    
    :is(.dark hr) {
        border-color:transparent;
    }
    
    :is(.dark .autocomplete-search .aa-DetachedSearchButton) {
    background-color: var(--third-bg);
    }
    
.aa-DetachedOverlay {
    background-color: var(--third-bg-hover);
    }
    
.aa-DetachedContainer .aa-Panel {
    background-color: var(--second-bg);
    }
    
.aa-Item[aria-selected=true] {
    background-color: var(--third-bg);
    color: var(--white);
}
    
    .aa-ItemIcon--noBorder {
    color: var(--white);
    }
    
.aa-ItemActionButton {
    color: var(--white) !Important;
    }
    
html.dark::-webkit-scrollbar-track {
    --tw-bg-opacity: 1;
    background-color: var(--main-bg);
}

html.dark::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    background-color: var(--third-bg);
}
    
:is(.dark .dark\:scrollbar-thumb-gray-600) {
    --scrollbar-thumb: var(--third-bg)!important;
}
:is(.dark .dark\:scrollbar-track-gray-700) {
    --scrollbar-track: var(--main-bg)!important;
}
    
::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: var(--main-bg); 
}

::-webkit-scrollbar-thumb {
  background: var(--third-bg);
}
    
    :is(.dark .dark\:scrollbox-dark) {
        background: transparent;
    }
    
.dark .btn:hover {
    background-color: var(--third-bg);
    border: 1px solid transparent;
    color: #fff;
    transition: 0.2s;
}
    
.dark .btn {
    border: 1px solid transparent;
    background-color: var(--second-bg);
    color: #ccc;
    font-weight: 600;
}
    
li.text-sm.md\:text-base.ml-1.mt-1.px-2.py-1.rounded.bg-gray-100.dark\:bg-gray-750.cursor-pointer.active\:bg-blue-500.hover\:bg-gray-200.dark\:hover\:bg-gray-700.md\:text-lg {
    border: 1px solid transparent;
    background-color: var(--second-bg);
    color: var(--gray);
    }
    
li.text-sm.md\:text-base.ml-1.mt-1.px-2.py-1.rounded.bg-gray-100.dark\:bg-gray-750.cursor-pointer.active\:bg-blue-500.hover\:bg-gray-200.dark\:hover\:bg-gray-700.md\:text-lg:hover {
    border: 1px solid transparent;
    border: 1px solid var(--third-bg);
    color: var(--blue);
    transition: 0.2s;
    }
    
li.text-sm.md\:text-base.ml-1.mt-1.px-2.py-1.rounded.bg-gray-100.dark\:bg-gray-750.cursor-pointer.active\:bg-blue-500.hover\:bg-gray-200.dark\:hover\:bg-gray-700 {
    border: 1px solid transparent;
    background-color: var(--second-bg);
    color: var(--gray);
    }
    
li.text-sm.md\:text-base.ml-1.mt-1.px-2.py-1.rounded.bg-gray-100.dark\:bg-gray-750.cursor-pointer.active\:bg-blue-500.hover\:bg-gray-200.dark\:hover\:bg-gray-700:hover {
    border: 1px solid transparent;
    border: 1px solid var(--third-bg);
    color: var(--blue);
    transition: 0.2s;
    }
    
img.select-none.rounded.object-cover.object-top.w-24.h-32.md\:w-28.md\:h-36.lg\:w-36.lg\:h-48.xl\:w-44.xl\:h-56.active\:brightness-75:hover {
    opacity: 50%;
    transition: 0.2s;
    }
    
    img.select-none.object-cover.object-top.w-full.active\:brightness-75:hover {
    opacity: 50%;
    transition: 0.2s;
    }
    
    img.select-none.rounded.w-full.mb-2.md\:mb-3.lg\:mb-4.active\:brightness-75.object-top:hover {
    opacity: 50%;
    transition: 0.2s; 
    }
    
    .flex.items-center.rounded.absolute.top-3.right-0 {
    color: var(--blue);
    font-weight: 600;
    }
    
    :is(.dark .dark\:text-gray-400) {
        color: var(--blue);
    }
    
    :is(.dark .dark\:text-gray-500) {
        color: var(--blue);
    }
    
    :is(.dark .dark\:text-gray-600) {
        color: var(--gray);
    }
    
    .line-clamp-2.text-ellipsis.mt-2 {
        text-align: center;
        font-weight: 600;
    }
    
.prose :where(ul>li):not(:where([class~=not-prose] *))::marker {
    color: var(--blue);
}
    
.prose :where(a):not(:where([class~=not-prose] *)) {
    color: var(--white);
    text-decoration: none;
    }
    
.prose :where(a):not(:where([class~=not-prose] *)):hover {
    color: var(--blue);
    text-decoration: none;
        transition: 0.2s;
    }
    
    span.block.bg-auto.bg-al.cursor-pointer.w-6.h-6.ml-2.rounded.hover\:opacity-60 {
        margin-right: 5px;
    }
    
    span.block.bg-auto.bg-ap.cursor-pointer.w-6.h-6.ml-2.rounded.hover\:opacity-60 {
        margin-right: 5px;
    }
    
:is(.dark .dark\:border-gray-600) {
    border-color: var(--third-bg);
}
    
:is(.dark .myscrollbar) {
    --scrollbar-track: var(--main-bg);
    --scrollbar-thumb: var(--third-bg);
    background-color: transparent;
    background: transparent;
}
    
    .xl\:text-gray-500 {
        color: var(--gray);
    }
    
:is(.dark .dark\:border-gray-500) {
    border-color: transparent;
}
    
.text-gray-300.dark\:text-gray-400.text-5xl.md\:text-9xl.font-extrabold.absolute.left-1\/2.-translate-x-1\/2.px-3.py-1 {
        color: var(--gray);
    }
    
.p-1.md\:p-3.w-full.\!bg-opacity-80.right-0.bg-gray-200.dark\:bg-gray-700.text-sm.md\:text-base.padding-safe-top {
    background-color: var(--main-bg);
    }
    
    span.bg-white.dark\:bg-gray-800.cursor-pointer {
    background-color: transparent;
    }
    
    div#bottom-reader-settings {
        opacity: 50%;
    }
    
    div#bottom-reader-settings:hover {
        opacity: 100%;
        transition: 0.2s;
    }
    
.w-12.overflow-y-hidden.flex.flex-col.items-center.hover\:bg-gray-100.dark\:hover\:bg-gray-600.cursor-pointer.sticky.top-0 {
        opacity: 50%;
    }
    
.w-12.overflow-y-hidden.flex.flex-col.items-center.hover\:bg-gray-100.dark\:hover\:bg-gray-600.cursor-pointer.sticky.top-0:hover {
        opacity: 100%;
        ...

Reviews

No reviews yet.