Skip to content

suragu's neocity by ace

Screenshot of suragu's neocity

Details

Authorace

LicenseGNU AGPLv3

Categorysuragu.net

Created

Updated

Size8.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Inspired by what you would see in a neocities website

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           neocity
@namespace      suragu.net
@version        1.0.0
@description    Inspired by what you would see in a neocities website
@author         aorivoid
==/UserStyle== */

@-moz-document domain("suragu.net") {
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap');
    
    :root {
        --primary-color: #e8f7d9;
        --secondary-color: #f8fef4;
        --font-color: #a9c3ab;
        --link-color: #bdb89d;
        
        /* Scrollbar */
        --sb-track-color: #f8fef4;
        --sb-thumb-color: #a9c3ab;
        --sb-size: 3px;
    }
    body {
        background: url(https://aorivoid.net/images/aowori.png);
        width: 790px;
        max-width: 790px;
        margin: auto;
        color: var(--font-color) !important;
        font-family: 'Roboto Slab';
        background-attachment: fixed;
        font-size: 10pt !important;
    }
    body::-webkit-scrollbar {
      width: var(--sb-size);
    }

    body::-webkit-scrollbar-track {
      background: var(--sb-track-color);
      border-radius: 4px;
    }

    body::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:horizontal {
      background: var(--sb-thumb-color);
      border-radius: 4px;
    }

    @supports not selector(::-webkit-scrollbar) {
      body {
          scrollbar-color: var(--sb-thumb-color)
                         var(--sb-track-color);
      }
    }
    a, a:hover, a:focus {
        color: var(--link-color);
    }
    
    /* all nav */
    .sidebar {
        padding: 0;
        margin: 0;
        display: block;
        background: white;
        height: auto;
        position: fixed;
        float: left;
        border: 3px double var(--primary-color);
        outline: 1px solid var(--secondary-color);
        border-radius: 15px;
        width: 120px;
        top: initial;
        left: initial;
        margin-top: 30px;
    }
    .content .sidebar {
        margin-left: -150px;
        margin-top: 0;
    }
    .sidebar .cat_image {
        border: none;
    }
    .sidebar .cat_image img {
        content: url('https://aorivoid.net/images/nav_t3.jpg') !important;
        max-width: 100%;
        width: 100%;
        height: auto;
        display: block;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border: none;
    }
    .sidebar .button {
        display: block;
        text-align: left;
        border: 1px solid var(--primary-color);
        margin: 0.3em;
        padding: 0.15em;
        background: linear-gradient(110deg, white 63%, var(--primary-color) 100%);
        text-transform: lowercase;
        font-weight: 300;
    }
    .sidebar .button a {
        font-size: 10pt;
        font-weight: normal;
        color: var(--link-color);
    }
    .sidebar .button:before {
        content:"♡ ";
        padding: 0 0.25em;
    }
    .sidebar .button:hover {
        text-decoration: none;
    }
    .sidebar .button a:hover {
        font-weight: bold;
        text-decoration: none;
    }
    .sidebar .button:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-bottom: 5px;
    }
    .cat_image:after {
        content:"navegación";
        display: block;
        padding: 0.3em;
        font-weight: bold;
    }
    /* all things content */
    #content, .content, .container {
        background: linear-gradient(0deg, white 97%, var(--primary-color) 100%) !important;
        color: var(--font-color) !important;
        position: initial !important;
        float: right;
        border: 3px double var(--primary-color) !important;
        outline: 1px solid var(--secondary-color);
        border-radius: 15px;
        margin-top: 30px;
        width: 640px !important;
        padding: 0 1px;
        margin-bottom: 30px;
    }
     .container, .outline-2 {
        border: none;
        background: none;
        margin:0;
        max-width: 96%;
        margin-bottom: 30px;
        padding: 0 10px;
    }
    .container {
        margin-top: 30px;
    }
    img {
        border: 2px dashed var(--primary-color);
        max-width: 99%;
    }
    hr {
        border-color: var(--primary-color);
    }
    h1, h3, h4, h5, h6, p, ul, li, pre, blockquote, ruby, rt {
        color: var(--font-color) !important;
        font-family: "Roboto Slab" !important;
    }
    .src {
        border-radius: 5px;
        border: 1px dashed var(--primary-color) !important;
        background-color: var(--secondary-color) !important;
        font-family: 'Roboto Mono', monospace !important;
        padding: 5px 12px;
        max-width: 100%;
        margin: 0;
    }
    h2 {
        display: block;
        margin: 0 -9px -10px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding: 2px 0 1px 10px ;
    }
    h3 {
        color: var(--font-color) !important;
        font-family: 'Roboto Slab' !important;
    }
    p {
        max-width: 100%;
        width: 100%;
        line-height: 22px;
    }
    
    h1 {
        margin-top: 20px;
        border: none;
        text-align: center;
        width: 100%;
        letter-spacing: 2.5px;
        text-shadow: 0 0 10px #FFFFFF;
        color: var(--font-color) !important
       
    }
    h2 {
        border-radius: 0;
        padding: 5px 20px;
        margin: 30px 10px 10px -10px;
        background: linear-gradient(270deg, #00000000 0%, var(--primary-color) 110%);
        color: var(--font-color) !important;
        font-size: 14pt;
        font-family: 'Roboto Slab';
        font-weight: bold;
    }
    #content .entry_content {
        line-height: 22px;
        padding-left: 1px;
    }
    #content a {
        color: var(--link-color);
    }
    #content::after, .content::after {
        background: linear-gradient(180deg, white 70%, var(--primary-color) 100%);
        min-height: 0px;
        min-height: 30px;
        padding: 0;
        margin: 0 -10px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    figure blockquote, blockquote {
    border-left: 3px solid var(--primary-color);
    padding: 3px 20px;
    font-style: italic;
}
    /* guestbook */
    #entries {
        color: var(--font-color) !important;
    }
    #entries td, #entries th {
        padding: 0.2em 0.5em 0.2em 0.5em;
        border: 1px solid var(--primary-color);
        color: var(--font-color);
        max-width: 127px;
    }
    #entries tr:nth-child(odd) {
        background-color: var(--secondary-color);
    }
    #entries td:nth-child(3) /* email */ {
            overflow-x: auto;
    white-space: nowrap;
    }
    #entries th {
        background: var(--primary-color);
    }
    #entries td::-webkit-scrollbar {
        height: 3px !important;
        border: 1px solid var(--primary-color);
    }
    form[action="post.cgi"] {
        display: grid;
        grid-template-columns: auto auto auto;
    }
    form[action="post.cgi"] input {
        width: 87%;
        margin: 2px;
    }
    input {
        background-color: #fff;
        border: 1px solid var(--primary-color);
        padding: 4px 15px 4px 5px;
        font-family: 'Roboto Slab';
        color: var(--font-color);
        transition: 0.3s ease;
    }
    input:focus {
        background-color: var(--secondary-color);
        border: 1px solid var(--primary-color);
        outline: none;
        transition: 0.3s ease;
    }
    button[type="submit"], input[type="submit"] {
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        font-family: 'Roboto Slab';
        background-color: var(--secondary-color);
        color: var(--font-color);
        padding: 3px 10px 4px 10px;
        transition: 0.3s ease;
    }
    button[type="submit"]:hover,  input[type="submit"]:hover {
        background-color: white;
        transition: 0.3s ease;
    }
    form[action="post.cgi"] input[type="submit"] {
        width: 298%;
    }
}

Reviews

No reviews yet.