J×Y by yubelious

Details

Authoryubelious

Categoryhttps://duelingnexus.com/

Created2 years, 2 months ago

Updated2 years, 2 months ago

Size31 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

J×Y (Jaden and Yubel v3 skin affecting CSS Fixes Project for Dueling Nexus) is a Yu-Gi-Oh! GX themed style affecting the online Yu-Gi-Oh! TCG simulator Dueling Nexus (or DNx for short). This theme applies to here:

https://duelingnexus.com/

J×Y should not be run by itself. It is a skin that can be run over (and is a part of) the CSS Fixes Project for Dueling Nexus. The base of the project can be found here: https://userstyles.world/style/5980/css-fixes-project-for-dueling-nexus. Expect to see new background images and larger more colorful text, as well as some interesting features you won't find on other themes. If you need help, these skins come with complementary customer support, so feel free to DM me on Discord @Yubelious#5584, or find me on the official Dueling Nexus Discord Server.

Notes

To use Google Fonts, paste this import at the top of your theme!

@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Oxygen');

To change background images, create a new theme and paste the entire code in there. Then ctrl+F (find) "background". Replace the image URL with an image URL of your choice.

If you would like help involving this theme, I offer customer support on Discord @Yubelious!#5584.

3.1 Small changes to match the new version of the CSS fixes project. Adjusted the text shadows. Added a filter to the opponent's RPS buttons.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           J×Y (Jaden and Yubel skin affecting CSS Fixes Project for Dueling Nexus) 2022-09-14, 5:36:18 p.m.
@namespace      github.com/openstyles/stylus
@version        3.1
@description    Inspired by O OO/The XAZ.
Special thanks to Skeletonxf for coming up with a chatbox and getting me back into this. This style wouldn't have a licence without you.
This theme is now a skin for the CSS Fixes Project for Dueling Nexus. Open for testing and feedback. Potentially compatible with any resolution on almost any horizontally capable device, except iPhone.
For optimal viewing, press F11 for full screen.
@author         Yubelious!
==/UserStyle== */

/*PUT THOSE FONTS HERE*/
@-moz-document url("https://duelingnexus.com/login"), url("https://duelingnexus.com/register"), url("https://duelingnexus.com/recover"), url("https://duelingnexus.com/privacy_policy.html"), url("https://duelingnexus.com/home"), url("https://duelingnexus.com/duel"), url("https://duelingnexus.com/gamelist"), url("https://duelingnexus.com/hostgame"), url("https://duelingnexus.com/hostbotgame"), url("https://duelingnexus.com/decks"), url("https://duelingnexus.com/profile"), url("https://duelingnexus.com/leaderboard"), url("https://duelingnexus.com/donate") {
/*SECTION 01 NAVGLOBAL*/
/*This section is global code that applies to all of the navigation pages. For global code for the game and deckbuilding pages, go to GAMEGLOBAL*/
body {
    color: #C19E4D;
    font-family: 'noto sans', sans-serif;
    background-color: rgba(0, 0, 0, 0);
}
html {
    background: url(https://i62.servimg.com/u/f62/17/89/30/88/57448310.jpg) #766D87 0 0/ 100vw 100vh fixed /*Image by the amazing Moribuden*/
}
article {
    border: 0
}
h2, h3, #duel-area > div > p:nth-of-type(7) {
    font-variant: small-caps;
    text-transform: capitalize;
    font-weight: 555;
    text-shadow: -.1vw -.1vw .1vw rgba(75, 75, 75, .5), -.1vw .1vw .1vw rgba(75, 75, 75, .5), .1vw .1vw .1vw rgba(75, 75, 75, .5), .1vw -.1vw .1vw rgba(75, 75, 75, .5), -.5vw -.5vw .5vw rgba(100, 100, 100, .25), -.5vw .5vw .5vw rgba(100, 100, 100, 0.25), .3vw .3vw .3vw rgba(100, 100, 100, 0.25), .3vw -.3vw .3vw rgba(100, 100, 100, 0.25);
}
/*Here we have some general clicky thingies rules.*/
a {
    color: #C19E4D;
    text-shadow: 0 0 .5vh #30A791, 0 0 1vh rgba(48, 167, 145, .8), 0 0 2vh black;
}
a:hover, a:focus {
    color: #30A791;
    text-shadow: 0 0 .5vh #C19E4D, 0 0 1vh rgba(193, 158, 77, .8), 0 0 2vh black;
}
button, input {
    font-family: 'oxygen', sans-serif
}
label {
    font-family: 'noto sans', sans-serif
}
#login-email, #login-password, #register-email, #register-username, #register-password, #register-password2, #recover-email, #login-submit, #register-area button, #recover-submit, #donate-once input[type="text"] {
    opacity: .75;
    color: #C19E4D;
    background-color: #766D87;
    border-color: #C19E4D;
    box-shadow: 0 .15vw .3vw #C19E4D;
    box-shadow: -.15vw -.15vw .3vw rgba(193, 158, 77, 0.8), -.15vw .15vw .3vw rgba(193, 158, 77, 0.8), .15vw -.15vw .3vw rgba(193, 158, 77, 0.8), .15vw .15vw .3vw rgba(193, 158, 77, 0.8);
}
#login-email:focus, #login-password:focus, #register-email:focus, #register-username:focus, #register-password:focus, #register-password2:focus, #recover-email:focus, #login-submit:focus, #register-area button:focus, #recover-submit:focus, #donate-once input[type="text"]:focus {
    color: #30A791;
    background-color: #766D87;
    background-color: rgba(118, 109, 135, 0.3);
    border-color: #30A791;
    box-shadow: -.3vh -.3vw .6vw #30A791, -.3vh .3vw .6vw #30A791, .3vh -.3vw .6vw #30A791, .3vh .3vw .6vw #30A791;
}
#login-email:hover, #login-password:hover, #register-email:hover, #register-username:hover, #register-password:hover, #register-password2:hover, #recover-email:hover, #login-submit:hover, #register-area button:hover, #recover-submit:hover, #donate-once input[type="text"]:hover {
    opacity: 1
}
/*This is the code for the navbar, which can be seen from any tab.*/
@keyframes appear {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: .75}
}
#navbar {
    background-image: linear-gradient(90deg, rgba(1, 7, 17, 0.75), rgba(18, 23, 36, 0.5));
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-style: solid;
    border-width: 0 2.5vw 0 0;
    border-image-source: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(18, 23, 36, .5) .25%);
    border-image-slice: 1;
}
#navbar-left button, #navbar-middle button, #navbar-right button {
    animation: appear 1s
}
#navbar button:not(:first-of-type):focus, #navbar button:not(:first-of-type):hover, .fake-button:focus {
    background-color: rgba(80, 84, 91, .75)
}
#navbar button, #navbar-left button, #navbar-middle button, #gamelist-buttons button[data-v-33d70790], #gamelist-buttons .fake-button[data-v-33d70790], #decks-buttons button, #decks-buttons .fake-button[data-v-417e0dbe], #my-profile button[data-v-dc2d7148]:not(.arrow-button), #my-profile .fake-button[data-v-dc2d7148] {
    color: white;
    text-shadow: .15vw .15vw .15vw rgba(0, 0, 0, 1), .3vw .3vw .3vw rgba(0, 0, 0, 0.5), .45vw .45vw .45vw rgba(0, 0, 0, 0.25), -.1vw -.1vw .15vw rgba(255, 255, 255, 1), -.25vw -.25vw .3vw rgba(255, 255, 255, 0.5), -.4vw -.4vw .4vw rgba(255, 255, 255, 0.25);
    opacity: .8;
    box-sizing: content-box;/*
  border-style: solid;
  border-image: linear-gradient(to left, #8f6B29, #FDE08D, #DF9F28);
  border-image-slice: 1;*/
    border-color: transparent;
}
#navbar-left button:focus, #navbar-middle button:focus, #logout-button:focus, button:focus, .fake-button:focus {
    opacity: .7
}
#navbar-left .button:hover, #navbar-middle button:hover, #logout-button:hover, button:hover, .fake-button:hover {
    opacity: 1
}
#navbar-middle button {
    font-weight: 555;
    text-transform: uppercase;
    letter-spacing: .25vw;
}
#logout-button {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .25) 85%,rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}
#navbar-left:before {
    color: #30A791;
    font-weight: 555;
}
#socket-connection {
    color: #30A791
}
.success {
    background-color: #30A791
}
#togglenavbar {
    color: #30A791;
    background-color: transparent;
    background-clip: padding-box;
    background-image: linear-gradient(90deg,rgba(18, 23, 36, 0), rgba(18, 23, 36, .5), rgba(18, 23, 36, .75));
    border: 0;
    box-shadow: .5vw .5vw rgba(18, 23, 36, .1);
}
/*This is table code that sets up for some other sections.*/
#gamelist-area[data-v-33d70790], #decks-area[data-v-417e0dbe], #my-profile[data-v-dc2d7148] {
    background-color: transparent;
    overflow: visible;
}
#gamelist-container[data-v-33d70790] {
    margin-top: 0;
    max-height: calc(64% - 1.5vw);
}
#gamelist-filters::after, #decks-buttons::after {
    color: rgba(255, 255, 255, .25);
    font-size: 1.25vw;
    font-family: arial, san-serif;
    font-weight: 333;
    text-align: center;
    text-shadow: .1vw .1vh rgba(20, 20, 20, .1);
    box-sizing: border-box;
    display: block;
}
table[data-v-33d70790], table[data-v-417e0dbe] {
    color: #30a791;
    text-align: justify;
    background:  black;
    opacity: 1;
    float: right;
    z-index: 2;
    position: relative;
}
table[data-v-33d70790]::after, table[data-v-417e0dbe]::after {
    content: " ";
    background-size: 100%;
    opacity: .5;
    z-index: 1;
    position: absolute;
    top: -1vh;
    bottom: 0;
    right: 0;
    left: 0;
}
td {
    z-index: 3;
    position: relative;
}
}

@-moz-document url("https://duelingnexus.com/login"), url("https://duelingnexus.com/register"), url("https://duelingnexus.com/recover"), url("https://duelingnexus.com/privacy_policy.html"), url("https://duelingnexus.com/donate") {
/*SECTION 02 LOGIN*/
/*This affects the login, register, and recover pages, since they all key off of the same things.*/
#login-email, #login-password, #register-email, #register-username, #register-password, #register-password2, #recover-email, #login-submit, #register-area button, #recover-submit, #donate-once input[type="text"] {
    opacity: .75;
    color: #C19E4D;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #C19E4D;
    box-shadow: 0 .15vw .3vw #C19E4D;
    box-shadow: -.15vw -.15vw .3vw rgba(193, 158, 77, 0.8), -.15vw .15vw .3vw rgba(193, 158, 77, 0.8), .15vw -.15vw .3vw rgba(193, 158, 77, 0.8), .15vw .15vw .3vw rgba(193, 158, 77, 0.8);
}
#login-email:focus, #login-password:focus, #register-email:focus, #register-username:focus, #register-password:focus, #register-password2:focus, #recover-email:focus, #login-submit:focus, #register-area button:focus, #recover-submit:focus, #donate-once input[type="text"]:focus {
    color: #30A791;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.1);
    border-color: #30A791;
    box-shadow: -.3vh -.3vw .6vw #30A791, -.3vh .3vw .6vw #30A791, .3vh -.3vw .6vw #30A791, .3vh .3vw .6vw #30A791;
}
#login-email:hover, #login-password:hover, #register-email:hover, #register-username:hover, #register-password:hover, #register-password2:hover, #recover-email:hover, #login-submit:hover, #register-area button:hover, #recover-submit:hover, #donate-once input[type="text"]:hover {
    opacity: 1
}
input[type="text"]::placeholder, input[type="password"]::placeholder {
    color: #766D87;
}
}

@-moz-document url("https://duelingnexus.com/login"), url-prefix("https://duelingnexus.com/home") {
/*SECTION 03 HOME*/
/*This section applies to the home page, as well as an awesome login animation I made.*/
#home-area {
    color: #30A791;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}
}

@-moz-document url-prefix("https://duelingnexus.com/duel"...

Reviews

No reviews yet.