Binternet - Create Your Theme [Redesign] by tsyron

/* ==UserStyle==
@name           Binternet - Create Your Theme [Redesign]
@namespace      github.com/Tsyron/Create-Your-Theme/tree/main/Binternet
@version        1.0.0
@description    A new userstyle
@author         Tsyron
@license        AGPLv3
@preprocessor   stylus

@var            color color-background-light "Light Mode: Background" white

@var            color color-foreground-light "--- Foreground" black

@var            color color-accent-light "--- Accent" #2975c5

@var            color color-blue-light "--- Blue" #065fd4

@var            color color-background-dark "Dark Mode: Background" #2a2b2b

@var            color color-foreground-dark "--- Foreground" white

@var            color color-accent-dark "--- Accent" #12e8b9

@var            color color-blue-dark "--- Blue" #3ea6ff

==/UserStyle== */

@-moz-document url-prefix("https://binternet"),
url-prefix("https://bn"),
domain("revznkqdwy7nmlzql66x226g3qnapiooss3rg2uajbj4rypxjnba.b32.i2p"),
domain("5cv2aw6jhe6la444vpn3jvo46442ls3ccgp3difx5ddlv5yf4hlq.b32.i2p") {
    
    /* Light Mode */
    bg1l=color-background-light
    bg2l=darken(bg1l, 5%)
    
    fg1l=color-foreground-light
    fg2l=rgba(fg1l, 0.2)
    fg3l=rgba(fg1l, 0.05)
    fg4l=rgba(fg1l, 0.1)
    fg5l=rgba(fg1l, 0.7)
    
    ca1l=color-accent-light
    
    cb1l=color-blue-light
    
    /* Dark Mode */
    bg1d=color-background-dark
    bg2d=darken(bg1d, 20%)
    
    fg1d=color-foreground-dark
    fg2d=rgba(fg1d, 0.1)
    fg3d=rgba(fg1d, 0.2)
    fg4d=rgba(fg1d, 0.15)
    fg5d=rgba(fg1d, 0.8)
    
    ca1d=color-accent-dark
    
    cb1d=color-blue-dark
    
    /* Border-Radius */
    br1=6px
    br2=12px
    br3=18px
    
    body-width=100em
    
    @media (prefers-color-scheme: light) {
         
        :root {
            --main: bg1l;
            --main-second: bg2l;
            --main-third: fg3l;
            --main-fourth: fg4l;
            --fg-color: fg1l;
            --fg-color-2: fg5l;
            --border-color: fg2l;
            --accent-color: ca1l;
            --blue-color: cb1l; } }
    
    @media (prefers-color-scheme: dark) {
         
        :root {
            --main: bg1d;
            --main-second: bg2d;
            --main-third: fg2d;
            --main-fourth: fg4d;
            --fg-color: fg1d;
            --fg-color-2: fg5d;
            --border-color: fg3d;
            --accent-color: ca1d;
            --blue-color: cb1d; } }
    
        body {
            font-family: Arial, Helvetica, sans-serif;
            margin-bottom: 40px;
            width: 100%; }
                
        @media (max-width: body-width) {
             div.img-container {
                 max-width: 100%; } }
                    
        @media (min-width: body-width) {
            body {
                width: 100% !important;
                max-width: body-width !important; } }
            
        html {
            font-family: Arial, Helvetica, sans-serif;
            display: table;
            margin: auto; }
                
        footer {
            font-family: Arial, Helvetica, sans-serif;
            left: 0px;
            width: 100%; }
          
        a[href^="/search.php?"] {
            background-color: var(--main-third);
            color: var(--fg-color);
            border: 1px solid var(--border-color);
            margin: 0 20px;
            float: right;
            border-radius: br3;
            padding: .5em 1em;
            font-size: 11pt;
            font-weight: normal; }
                
        a[href^="/search.php?"]:hover, #inputWrapper button:hover {
                background-color: var(--main-fourth); }
                
        .search-container {
            margin: 20px 40px 40px 40px; }
            
        .search-container input, #inputWrapper input {
            color: var(--fg-color);
            margin: auto;
            padding: .5em .6em;
            padding-left: 15px;
            background-color: transparent; }
                   
        .search-container input, #inputWrapper input {
                border: 1px solid var(--border-color); }
                
        .search-container input {
            border-radius: br3; }
                
        .no-decoration.accent {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            display: inline;
            font-size: 14pt;
            text-transform: uppercase; }
              
        #inputWrapper input {
            background-color: var(--main-third);
            border: 1px solid var(--border-color);
            border-radius: br3 0 0 br3; }
              
        #inputWrapper button, button {
            background-color: var(--main-third);
            color: var(--fg-color);
            font-size: 11pt;
            border: 1px solid var(--border-color);
            border-radius: 0 br3 br3 0;
            padding: .54em 1em;
            height: 37px; }
                
        .search-container input:focus, a[href^="/search.php?"]:focus,
        #inputWrapper input:focus,
        #inputWrapper button:focus {
            border: 1px solid var(--blue-color); }
                
        ::placeholder {
            color: var(--fg-color-2); }
            
        .img-container {
            grid-gap: 20px;
            margin-left: 40px;
            margin-right: 40px;
            /*margin: 0px;
            width: 100%;*/
            .img-result {
                width: auto;
                height: 300px; }
                    
            img {
                border-radius: br2; } } }