Skeuomorphic Userstyles.world FIX by kindongshin

/* ==UserStyle==
@name         Skeuomorphic Userstyles.world FIX
@version      20250418.01.46
@namespace    userstyles.world/user/tai7k
@description  Inspired by YouTube's Cosmic Panda layout from 2012 mostly.
A "skeuomorphic" take on the Userstyles website.
@author       tai7k
@license      No License
@preprocessor   stylus
@var checkbox three "Show column 3" 0
==/UserStyle== */

@-moz-document domain("userstyles.world") {
.card {
    background: linear-gradient(to bottom,#fff 0,#f0f0f0 100%) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 -1px 0 #fff;
    border-radius: 2px;
}
.card:hover {
    background: linear-gradient(to bottom,#fff 0,#f0f0f0 100%) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.83), inset 0 -1px 0 #fff;
}
.Box {
    background: rgba(0,0,0,0);
    border: 0;
    color: #535353;
    padding: 0px;
}
.rwrap {
    justify-content: center;
    padding: 0px !important;
}
.screenshot,
picture,
img {
    border-radius: 0px !important;
}
#share,
.share,
#btn-share {
    height: 28px;
    min-height: 0px;
}
h1 {
    font-size: 20pt !important;
}
.input-like,
.Style-source > pre {
    border-radius: 2px;
    background: #fdfdfd !important;
    border: 0px;
    box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.26) !important; 
    padding: 5px;
}

.icon.flex {
    background-color: rgba(0,0,0,0) !important;
}
.search input {
    border-radius: 50px;
    background: #CCCCCC !important;
    border: 0px;
    box-shadow: inset 0px 1px 4px 1px rgba(0,0,0,0.26) !important;
    min-width: 24px;
    min-height: 8px;
}
input {
    border-radius: 2px;
    background: #eaeaea !important;
    border: 0px;
    min-width: 50px;
    min-height: 5px;
    padding: 4px;
    box-shadow: inset 0px 1px 4px 1px rgba(0,0,0,0.26) !important;
}
textarea {
    border-radius: 2px;
    background: #eaeaea !important;
    border: 0px;
    padding: 4px;
    box-shadow: inset 0px 1px 4px 1px rgba(0,0,0,0.26) !important;
}
.navbar {
    background: linear-gradient(to bottom,#3F3F3F 0,#282828 100%) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 -1px 0 #1c1c1c;
    border: 0px;
}
.navbar a {
    color: #CCCCCC;
}
nav a:hover {
    color: #ffffff;
}
.navbar .menu-icon {
  top: 18px;
  right: 18px;
}
.navbar .menu-icon .i,
.navbar .menu-icon .i::before, .navbar .menu-icon .i::after {
  background-color: #CCCCCC;
}
.wrapper.flex {
    max-width: 837px;
    height: 40px;
    padding: 0px;
}
.navbar .left {
  padding-top: 4px;
  padding-bottom: 4px;
}
html body > main {
    max-width: 837px;
    background: #E7E7E7 !important;
    box-shadow: 0px 0px 15px -4px rgb(0,0,0);
    border-radius: 2px;
    padding: 5px 14px 15px;
    margin-top: 10px !important;
}
if three {
@media screen and (min-width: 1024px) {
.wrapper.flex,
html body > main {
    max-width: 1037px;
}
}
}
html body {
    background: linear-gradient(#35485C, #455A71);
    font-family: "Helvetica Neue",Arial,sans-serif !important;
    font-size: 9pt;
}
.btn {
    background: linear-gradient(to bottom,#fafafa 0,#dcdcdc 100%);
    border-color: #ccc #ccc #aaa;
    text-shadow: 0 1px 0 #fff;
    color: #555;
    padding: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.btn:hover {
    background: linear-gradient(to bottom,#75be65 0,#37622d 100%);
    border-color: #74bc63 #558e48 #38642f;
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    color: #fff;
    box-shadow: none;
}
.Form-select {
    height: 32px;
    padding: 5px !important;
    min-height: 5px !important;
    border: revert;
    background-color: revert;
    border-radius: revert;
    appearance: revert;
}
.Form-select:hover,
.Form-select:focus {
  border-color: revert;
  box-shadow: revert;
}
.Form-select + svg {
    display: none;
}
.Form-control {
    margin: 0px;
    padding: 3px;
    min-height: 0px;
}
.Form-control > button {
    margin: 0px;
    padding: 7px;
    min-height: 0px;    
}
.Hero {
    padding: 15px !important;
    margin-bottom: 15px !important;
    margin-top: 15px !important;
    min-height: 0px;
    background: linear-gradient(to bottom,#fff 0,#f0f0f0 100%) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 -1px 0 #fff;
}
.btn.primary {
    background: linear-gradient(to bottom,#6581be 0,#2d4a62 100%);
    border-color: #4f6997 #36506b #202f42;
    text-shadow: 0 1px 0 #323a7c;
    color: #555;
    padding: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.btn.primary:hover {
    background: linear-gradient(to top,#6581be 0,#2d4a62 100%);
    border-color: #6383bc #486b8e #304764;
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    color: #fff;
    box-shadow: inset 1px 0px 13px 0.5px rgba(0,22,81,0.76);
}
.Footer {
    margin-top: 30px;
    background: linear-gradient(to bottom,#fafafa 0,#dcdcdc 100%);
    border-color: #ccc #ccc #aaa;
    text-shadow: 0 1px 0 #fff;
    color: #555;
}
.Footer-wrapper {
    max-width: 837px;
}
}