Stylus Fluent by thejenja

/* ==UserStyle==
@name         Stylus Fluent
@version      20240716.05.13
@namespace    https://userstyles.world/user/thejenja
@description  Stylus in Fluent style (like Windows 11)
@author       thejenja
@license      No License
==/UserStyle== */

@-moz-document url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne") {
body{
    font-family: "Segoe UI Variable Text","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
:root {
    --c97: hsl(0, 0%, 8%);
    --c98: hsl(0, 0%, 10%);
    --c99: hsl(0, 0%, 15%);
    --c100: hsl(0, 0%, 10%);
    --name-padding-left: 0;
}

#header h1, #header #filters summary h2{
    font-family: "Segoe UI Variable Display","Segoe UI","Helvetica Neue",Helvetica,Verdana,sans-serif !important;
    font-weight: 600
}

button {
    border-radius: 4px;
    padding: 6px 25px!important;
    border: 1px solid var(--c70);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--fg);
    background-color: rgba(255, 255, 255, .0605);
    border-color: rgba(255, 255, 255, .09) rgba(255, 255, 255, .07) rgba(255, 255, 255, .07);
    transition: background-color .25s, border-color .25s;
}
.dirty #save-button, .dirty #save-button + button, #usw-publish-style {
    background: #3da8ff;
    border-color: transparent;
    color: #000;
}
input:not([type]), input[type=text], input[type=number], input[type=search], textarea, input[type="url"], input[type="time"], #search, #manage\.newUI\.sort
{
    padding-left: 10px;
    font-family: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Verdana, Tahoma, Geneva, Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    outline: 0;
    height: 32px;
    background-color: rgba(255, 255, 255, .0605)!important;
    border: 1px solid;
    border-bottom-width: 2px;
    border-color: rgba(255, 255, 255, .0698)!important;
    border-radius: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    color: rgba(255, 255, 255, .786)
}
input:not([type]):focus, input[type=text]:focus, input[type=number]:focus, input[type=search]:focus, input[type="url"]:focus, input[type="time"]:focus, #search:focus, #manage\.newUI\.sort:focus
 {
    outline: none;
    box-shadow: none !important;
    border-bottom: 2px solid #0076d6 !important;
    background-color: rgba(30, 30, 30, .7);
    color: #fff;
    border-color: rgba(255, 255, 255, .0698);
}
select{
    padding-left: 10px;
    font-family: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Verdana, Tahoma, Geneva, Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    outline: 0;
    height: 32px;
    border: 1px solid;
    border-bottom-width: 2px;
    border-color: rgba(255, 255, 255, .0698)!important;
    border-radius: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    color: rgba(255, 255, 255, .786);
    background-color: #363636 !important;
}
input[type="checkbox"]:not(.slider), input[type = radio]
{
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    outline: 0;
    cursor: pointer;
    vertical-align: middle;
    margin: 0px 5px 3px;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8.5' y='8.5' width='15' height='15' rx='1.5' stroke='%23ADADAD'/%3E%3C/svg%3E%0A");
    border: 0;
    background-position: -6px -6px;
    flex: 0 0 20px !important;
}
input[type="checkbox"]:not(.slider):checked::after{
    content: '';
}
input[type = radio]
{
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='7.5' stroke='%23ADADAD'/%3E%3C/svg%3E");
    background-position: -5px -6px
}
input[type="checkbox"]:not(.slider):checked
{
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='8' width='16' height='16' rx='2' fill='%23479EF5'/%3E%3Cpath d='M19.765 13.2047C20.0661 13.4892 20.0797 13.9638 19.7953 14.265L15.5453 18.765C15.4061 18.9123 15.2133 18.997 15.0107 18.9999C14.8081 19.0028 14.6129 18.9236 14.4697 18.7803L12.2197 16.5303C11.9268 16.2374 11.9268 15.7626 12.2197 15.4697C12.5126 15.1768 12.9874 15.1768 13.2803 15.4697L14.9846 17.174L18.7047 13.235C18.9891 12.9339 19.4638 12.9203 19.765 13.2047Z' fill='%23242424'/%3E%3C/svg%3E");
    background-position: -6px -6px;
}
input[type="checkbox"]:not(.slider):hover:checked
{
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='8' width='16' height='16' rx='2' fill='%2362ABF5'/%3E%3Cpath d='M19.765 13.2047C20.0661 13.4892 20.0797 13.9638 19.7953 14.265L15.5453 18.765C15.4061 18.9123 15.2133 18.997 15.0107 18.9999C14.8081 19.0028 14.6129 18.9236 14.4697 18.7803L12.2197 16.5303C11.9268 16.2374 11.9268 15.7626 12.2197 15.4697C12.5126 15.1768 12.9874 15.1768 13.2803 15.4697L14.9846 17.174L18.7047 13.235C18.9891 12.9339 19.4638 12.9203 19.765 13.2047Z' fill='%23242424'/%3E%3C/svg%3E%0A");
    background-position: -6px -6px
}

input[type="checkbox"]:not(.slider):hover
{
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8.5' y='8.5' width='15' height='15' rx='1.5' stroke='%23BDBDBD'/%3E%3C/svg%3E");
    background-position: -6px -6px
}
input[type = radio]:checked
{
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 16C24 20.1421 20.6421 23.5 16.5 23.5C12.3579 23.5 9 20.1421 9 16C9 11.8579 12.3579 8.5 16.5 8.5C20.6421 8.5 24 11.8579 24 16Z' stroke='%23479EF5'/%3E%3Ccircle cx='16.5' cy='16' r='5' fill='%23479EF5'/%3E%3C/svg%3E%0A");
    background-position: -5px -6px
}
input[type = radio]:checked:hover
{
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 16C24 20.1421 20.6421 23.5 16.5 23.5C12.3579 23.5 9 20.1421 9 16C9 11.8579 12.3579 8.5 16.5 8.5C20.6421 8.5 24 11.8579 24 16Z' stroke='%2362ABF5'/%3E%3Ccircle cx='16.5' cy='16' r='5' fill='%2362ABF5'/%3E%3C/svg%3E%0A");
    background-position: -5px -6px
}
input[type = radio]:hover
{
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='7.5' stroke='%23BDBDBD'/%3E%3C/svg%3E%0A");
    background-position: -5px -6px
}
input[type="radio"]::after{
    display: none
}
#header-resizer::after, .resize-grip::after {
    border: 0;
}
#header-resizer {
    width: 0;
}
.resize-grip{
    height: 0;
}
#popup-options button, .edit-actions button {
    height: initial
}
.filter-selection select, #header .filter-selection label {
    height: 30px;
}
.filter-selection .select-wrapper {
    left: 40px;
}
#message-box{
    backdrop-filter: blur(1px)
}
#message-box > div{
    border-radius: 8px;
}
#message-box-title {
    font-family: "Segoe UI Variable Display","Segoe UI","Helvetica Neue",Helvetica,Verdana,sans-serif !important;
    font-weight: 600;
    background-color: transparent;
    padding: .45rem 12px;
    font-size: 18px;
    min-height: 0;
}
#message-box-title::before {
    display: none;
}
.i-edit::after{
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5289 1.76386C11.5525 0.740171 13.2123 0.740172 14.236 1.76386C15.2596 2.78755 15.2596 4.44728 14.236 5.47097L13.4571 6.24979L9.75002 2.54269L10.5289 1.76386ZM9.04292 3.24979L2.65722 9.63549C2.28304 10.0097 2.01623 10.4775 1.88467 10.99L1.01571 14.3755C0.971767 14.5467 1.02148 14.7284 1.14646 14.8534C1.27144 14.9783 1.45312 15.028 1.62432 14.9841L5.00978 14.1151C5.52234 13.9836 5.99015 13.7168 6.36433 13.3426L12.75 6.9569L9.04292 3.24979Z' fill='%23878787'/%3E%3C/svg%3E%0A");
}
.i-config::after {
    content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.91099 7.38266C2.28028 6.24053 2.88863 5.19213 3.69133 4.30364C3.82707 4.15339 4.04002 4.09984 4.23069 4.16802L6.14897 4.85392C6.66905 5.03977 7.24131 4.76883 7.42716 4.24875C7.44544 4.19762 7.45952 4.14507 7.46925 4.09173L7.83471 2.08573C7.87104 1.88627 8.02422 1.7285 8.22251 1.6863C8.8027 1.5628 9.39758 1.5 10.0003 1.5C10.6026 1.5 11.1971 1.56273 11.7769 1.68607C11.9752 1.72824 12.1284 1.88591 12.1648 2.08529L12.5313 4.09165C12.6303 4.63497 13.1511 4.9951 13.6944 4.89601C13.7479 4.88627 13.8004 4.87219 13.8515 4.85395L15.7698 4.16802C15.9605 4.09984 16.1734 4.15339 16.3092 4.30364C17.1119 5.19213 17.7202 6.24053 18.0895 7.38266C18.1518 7.57534 18.0918 7.78658 17.9374 7.91764L16.3825 9.23773C15.9615 9.5952 15.9101 10.2263 16.2675 10.6473C16.3027 10.6887 16.3411 10.7271 16.3825 10.7623L17.9374 12.0824C18.0918 12.2134 18.1518 12.4247 18.0895 12.6173C17.7202 13.7595 17.1119 14.8079 16.3092 15.6964C16.1734 15.8466 15.9605 15.9002 15.7698 15.832L13.8515 15.1461C13.3315 14.9602 12.7592 15.2312 12.5733 15.7512C12.5551 15.8024 12.541 15.8549 12.5312 15.9085L12.1648 17.9147C12.1284 18.1141 11.9752 18.2718 11.7769 18.3139C11.1971 18.4373 10.6026 18.5 10.0003 18.5C9.39758 18.5 8.8027 18.4372 8.22251 18.3137C8.02422 18.2715 7.87104 18.1137 7.83471 17.9143L7.46926 15.9084C7.37018 15.365 6.8494 15.0049 6.30608 15.104...