Skip to content

CSS fixes project for Dueling Nexus by yubelious

Screenshot of CSS fixes project for Dueling Nexus

Details

Authoryubelious

LicenseMIT License

CategoryDueling Nexus

Created

Updated

Size42 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

All fixes. No pictures. Designed to be compatible with some other themes, but not to be a theme itself. Now available on Userstyles.world

Notes

CSS FIXES PROJECT
Patch Notes
v3.0 The project has long since been out of date. Applied fixes to the current website, as it now appears after its major overhaul. Much of the features remain the same, but some were deemed unnecesary. Most notibly, the card names in the search results no longer scroll, and instead, excessively long names overflow into the card image. Everything should just fit now.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         CSS fixes project for Dueling Nexus
@version      20220804.23.02
@namespace    userstyles.world/user/yubelious
@description  All fixes. No pictures. Designed to be compatible with some other themes, but not to be a theme itself. Now available on Userstyles.world
@author       yubelious
@license      MIT License
==/UserStyle== */

@-moz-document url("https://duelingnexus.com/login"), url("https://duelingnexus.com/register"), url("https://duelingnexus.com/recover"), 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*/
html {
    background-position: right bottom;
    background-color: black;
}
body {
    font-size: 2vh;
    line-height: 1;
    height: 100vh;
    margin: 0;
    position: relative;
}
article {
    padding: 1%
}
div#app, #duel-area {
    margin-bottom: 41px /*Increase this value if your taskbar blocks the interface. Search "41px" and raise all of them to the same value.*/
}
h2, h3 {/*This is the main header for each of the tabs.*/
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
button img, .fake-button img {
    height: 2vw;
    width: 2vw;
    float: right;
}
#home-area {
    background-color: rgba(0, 0, 0, 0);
    border-width: 0;
}
#home-area h2, #home-area button {
    display: none
}
#gamelist-area[data-v-33d70790], #custom-game-area[data-v-6ab2f434], #decks-area[data-v-417e0dbe], #my-profile[data-v-dc2d7148], #leaderboard-page, #donate-area[data-v-7f4b9848] {
    box-sizing: border-box;
    display: block;
    overflow-y: auto;
    min-height: 0;
    max-height: 100vh;
    height: 75%;
    width: auto;
    min-width: 0;
    max-width: 100vw;
    margin: 0;
    position: absolute;
    right: 12%;
    bottom: 12%;
    left: 12%;
}
/*Here we have some general clicky thingy rules.*/
a {
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    font-size: 2vh;
    padding: 0;
    text-decoration: underline;
    opacity: .75;
}
a:focus {
    font-style: italic
}
a:hover {
    opacity: 1
}
article button, .fake-button[data-v-6f705b54], .file-picker-container img {
    line-height: 1;
    text-align: center;
}
.fake-button[data-v-6f705b54], .file-picker-container img {  
    font-size: 2vh
}
article button, p button, #gamelist-buttons button, .button, button[data-v-417e0dbe]/*Refers to the button(s) on the Deck Editor page.*/, .fake-button[data-v-417e0dbe]/*Refers to the fake button(s) on the Deck Editor page.*/, button[data-v-dc2d7148]/*Refers to the button(s) on the My Profile page.*/, .fake-button[data-v-dc2d7148]/*Refers to the fake button(s) on the My Profile page.*/ {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    transition-property: color, background, border;
    font-size: 2vh;
    border: .15vw solid;
    min-height: 0;
    min-width: 0;
}
p button:focus, #gamelist-buttons button:focus, .button:focus, button[data-v-6f705b54]:focus, .fake-button[data-v-6f705b54]:focus, button[data-v-7d3c70a7]:focus, .fake-button[data-v-7d3c70a7]:focus {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    transition-property: color, background, border;
    font-style: italic;
}
article button:hover, p button:hover, #gamelist-buttons button:hover, .button:hover, button[data-v-6f705b54]:hover, .fake-button[data-v-6f705b54]:hover, button[data-v-7d3c70a7]:hover, .fake-button[data-v-7d3c70a7]:hover {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    transition-property: color, background, border;
}
article button:focus, p button:focus, .file-picker-container:focus {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    transition-property: color, background, border;
    font-style: italic;
}
form div {
    margin: 0 0 1vw 0
}
form input[type="checkbox"] {
    margin: 0
}
form input[type="email"], form input[type="password"], form input[type="text"], input[type="text"], #login-submit, #register-area button, #recover-submit {
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    font-family: sans-serif;
    text-indent: 0.5vw;
    border-width: .15vw;
    height: 2.75vw;
    padding: 0;
}
form input[type="email"]:focus, form input[type="password"]:focus, form input[type="text"]:focus, input[type="text"]:focus, #login-submit:focus, #register-area button:focus, #recover-submit:focus, form input[type="email"]:hover, form input[type="password"]:hover, form input[type="text"]:hover, input[type="text"]:hover, #login-submit:hover, #register-area button:hover, #recover-submit:hover {
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
}
input[type="checkbox"], label {
    vertical-align: middle;
    user-select: none;
}
input, label {
    font-size: 2vh;
    opacity: .7;
    cursor: pointer;
}
input:hover, label:hover {
    opacity: 1
}
label {
    line-height: 1
}
/*Table stuff*/
td, .table-button:active {
    line-height: 2.5;
	margin: 0;
	padding: .5vw;
}
.table-button:active {
    font-style: italic
}
/*Animations*/
#navbar, #socket-connection {
	opacity: 1;
	animation-name: fadein;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: .5s
}
#home-area {
    animation: disappear 2s;
    font-size: 5vh;
    height: 100%;
    width: 100%;
    margin: 0;
    padding-top: 30%;
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}
/*This section affects the navbar and login regardless of the device you're using.*/
body {
    margin: 0;
    height: 100vh;
    position: relative;
}
form[data-v-26bcedb3]/*Login form*/, form[data-v-4068c77b]/*Register form*/, form input[type="checkbox"] {
    margin: 0;
    padding: 0;
}
article button, form div {
    min-height: 0
}
#navbar {
    border-width: 0 1px 0 0;
    border-style: solid;
    height: 100%;
    padding-top: 2%;
}
#navbar-left {
    height: 25%;
    width: 25%;
    position: fixed;
    left: 0;
}
#navbar-left:before {
    content: 'JOIN US ON';
    text-align: left;
    display: block;
}
#navbar-left button, #navbar-left button:hover, #navbar-middle button, #navbar-middle button:hover, #navbar-right button, #navbar-right button:hover {
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
}
#navbar-left button {
    font-size: 0;
    border-width: 1px;
    float: left;
    padding: .5vh;
    min-height: 0;
    min-width: 0;
}
#navbar-left br, #navbar-middle br {
    display: none
}
#navbar-middle, #navbar-right button {
    margin: 0
}
#navbar-middle button, #navbar-right button {
    text-align: left;
    vertical-align: middle;
    min-height: 0;
}
#navbar-middle button {
    border-width: 1px;
    padding: 3% 3% 3% 6%;
}
#navbar-middle > button:nth-of-type(1) {
    background: url('https://i.imgur.com/s5Fi8nR.png') center no-repeat;/*Logo by Svasselt*/
    font-size: 0;
    height: 110px;
    border-width: 0;
    cursor: default;
}
#navbar-middle > button:nth-of-type(1) img {
    display: none
}
#navbar-middle button, form button, form input[type="text"], form input[type="password"], form input[type="email"] {
    width: 80%
}
#navbar-middle button img, #navbar-right button img {
    float: right
}
#navbar #logout-button {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}
#login-area[data-v-26bcedb3], #register-area[data-v-e589858c], #recover-area[data-v-29814b14] {
    background-color: rgba(0, 0, 0, 0);
    border-width: 0;
}
form button, form input[type="text"], form input[type="password"], form input[type="email"] {
    padding: 0
}
form div {
    padding: 1% 0 0 0
}
#socket-connection {
    line-height: 1.5;
    background-color: rgba(0, 0, 0, 0.5);
    border: 0;
    height: 3vh;
    width: auto;
    min-width: 0;
    z-index: 3;
    position: fixed;
}
#togglenavbar {
	font-size: 5vh;
    border-width: 1px;
    border-bottom-right-radius: 20%;
    height: 10vh;
    width: 10vh;
    padding: .5vh;
    position: absolute;
    top: 0;
}
/*This affects the site while the navbar is colapsed. For this feature, ask me for Collapserpent in the official Dueling Nexus discord.*/
.app-navbar-hidden #navbar, .app-navbar-hidden #socket-connection, .app-navbar-hidden #login-area, .app-navbar-hidden #register-area, .app-navbar-hidden #recover-area {
    display: none
}
.app-navbar-hidden, .app-navbar-hidden div[data-v-26bcedb3]/*Login area*/, .app-navbar-hidden div[data-v-26bcedb3]/*Login area*/ .app-navbar-hidden #news-area, .app-navbar-hidden #nexus-gui-popup-background {
    height: 100%;
    width: 100% !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0 !important;
}
/*This section affects the navbar and login on larger horizontal displays.*/
@media (min-height: 500px) and (orientation: landscape) {
#app, #nexus-gui-popup-background {
    height: 100%;
    width: 75%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 25%;
}
#navbar, #login-area[data-v-26bcedb3], #register-area[data-v-e589858c], #recover-area[data-v-29814b14] {
    max-height...

Reviews

No reviews yet.