CSS fixes project for Dueling Nexus by yubelious

CSS fixes project for Dueling Nexus screenshot
Install Get Stylus Write a review

Details

Authoryubelious

LicenseMIT License

Created

Updated

CategoryDueling Nexus

Statistics

Learn how we calculate statistics in the FAQ.

Total views28

Total installs6

Weekly installs1

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.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==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: 100vh;
    width: 25%;
    position: fixed;
    top: 0;
    margin: 0;
    left: 0;
}
#navbar button img {
    height: 1.5vw;
    width: 1.5vw;
}
#navbar-left {
    margin-left: 1.5vw;
    top: 72%;
}
#navbar-left:before {
    padding-bottom: 5%
}
#navbar-left button {
    margin: 0 1.5vw 0 0
}
#navbar-left button img {
    padding: .5vw
}
#navbar-middle button, #navbar-right button, input {
    font-size: 1.25vw
}
#navbar-middle button {
    margin: 3.5% 0 0 0
}
#navbar #logout-button img {
    padding: 0 .75vw;
}
#logout-button {
    position: fixed;
    top: 0;
    right: 0;
    border-width: 0;
}
#login-area h2, #register-area h2, #recover-area h2 {
    font-size: 3vh;
    margin: 2vh 0 3vh 0;
}
input[type="email"], form input[type="email"], form input[type="password"], form input[type="text"], form button {
    text-indent: 0.5vw;
    height: 2.5vw;
}
#socket-connection {
    top: auto;
    bottom: 6%;
    left: 1.5vw;
}
a, label, #login-area p, #register-area p, #recover-area p {
    font-size: 2vh
}
}
@media (max-height: 500px) and (orientation: landscape) {
#app, #nexus-gui-popup-background {
    height: 100%;
    width: 80%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 20%;
}
#navbar, #login-area[data-v-26bcedb3], #register-area[data-v-e589858c], #recover-area[data-v-29814b14] {
    max-height: 100vh;
    width: 20%;
    position: fixed;
    top: 0;
    margin: 0;
    left: 0;
}
#navbar {
    padding-top: 1%
}
#navbar-left {
    margin-left: 2.8%;
    top: 78%;
}
#navbar-left:before {
    padding-bottom: 2.5%
}
#navbar-left button {
    margin: 0 1.25vw 0 0
}
#navbar-left button img, #navbar-right #logout-button img {
    height: 3.375vh;
    width: 3.375vh;
}
#navbar-left button img, #navbar #logout-button, #navbar #logout-button img {
    padding: .25vw
}
#navbar-middle {
    transform: scale(.75) translateY(-5vw)
}
#navbar-middle button, input[type="email"], form input[type="email"], form input[type="password"], form input[type="text"], form button {
    font-size: 3.5vh
}
#navbar-middle button {
    width: 95%;
    margin: 4.5% 0 0 0;
    border-width: 1.333px;
}
#navbar-middle button img {
    height: 4.5vh;
    width: 4.5vh;
}
#navbar-right {
    position: fixed;
    top: auto;
    right: 1%;
    bottom: 1%;
}
#login-area h2, #register-area h2, #recover-area h2 {
    font-size: 5vh;
    margin: 0 0 2% 0;
}
input[type="email"], form input[type="email"], form input[type="password"], form input[type="text"], form button {
    text-indent: 0.5vw;
    height: 7vh;
}
#socket-connection {
    top: auto;
    bottom: 2%;
    left: 25.2%;
}
a, label, #login-area p, #register-area p, #recover-area p {
    font-size: 2vh
}
}
/*This section affects navbar and login on smaller devices that can display either horizontally or vertically.*/
@media (orientation: portrait) {
body {
    font-size: 2.5vh
}
article {
    z-index: 1
}
#login-area[data-v-26bcedb3], #register-area[data-v-e589858c], #recover-area[data-v-29814b14], #navbar, #navbar-left {
    width: 100vw;
    z-index: 2;
    position: fixed;
}
#navbar button img {
    height: 4vh;
    width: 4vh;
}
#navbar-left {
    margin-left: 3vh;
    top: 75%;
}
#navbar-left:before {
    padding-bottom: 5%
}
#navbar-left button {
    margin: 0 3vh 0 0
}
#navbar-left button img {
    padding: .5vh
}
#navbar-middle {
    margin-top: 5%
}
#navbar-middle button, #navbar-right button, form input[type="email"], form input[type="email"], form input[type="password"], form input[type="text"], form button {
    font-size: 3vh
}
#navbar-middle button {
    margin: 5% 0 0 0
}
#navbar-right {
    position: absolute;
    top: 0;
    right: 0;
}
#logout-button {
    font-size: 2vw
}
#login-area h2, #register-area h2, #recover-area h2 {
    font-size: 3vh;
    margin: 2vh 0 3vh 0;
}
form input[type="email"], form input[type="email"], form input[type="password"], form input[type="text"], form button {
    text-indent: 1vh;
    height: 5.5vh;
}
#socket-connection {
    top: auto;
    bottom: 7%;
    left: 3vh;
}
a, label, #login-area p, #register-area p, #recover-area p {
    font-size: 2.75vh
}
div#app {
    left: 0
}
}
@media (orientation: landscape) {
h1, h2, h3 {
    letter-spacing: .1vw
}
h1 {
    font-size: 2vw
}
h2 {
    font-size: 1.75vw;
    margin: 1%;
}
h3 {
    font-size: 1.5vw
}
h4 {
    font-size: 1.25vw
}
li {
    font-size: 1vw
}
}
@media (orientation: portrait) {
#gamelist-area h1, #gamelist-area h2, #gamelist-area h3 {
    letter-spacing: .2vh
}
#gamelist-area h1 {
    font-size: 4vh
}
#gamelist-area h2 {
    font-size: 3.5vh;
    margin: 1%;
}
#gamelist-area h3 {
    font-size: 3vh
}
#gamelist-area h4 {
    font-size: 2.5vh
}
#gamelist-area li {
    font-size: 2vh
}
}
@keyframes disappear {
    0% {opacity: 1}
    25% {opacity: 1}
    100% {opacity: 0}
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
}

@-moz-document url("https://duelingnexus.com/login"), url("https://duelingnexus.com/register"), url("https://duelingnexus.com/recover"), url("https://duelingnexus.com/privacy_policy.html") {
/*SECTION 02 LOGIN*/
/*This section applies to the pages you can access without logging in.*/
#navbar-middle:before {
    display: none
}
#news-area {
    background-color: rgba(0, 0, 0, 0);
    height: 100%;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    position: absolute;
}
#news-area:before, div#app:before {
    content: ' ';
    background: url('https://cdn.discordapp.com/attachments/670405796747673620/754166777587564655/Logo_Full.png') no-repeat center;
    background-size: auto 100%;
    height: 40%;
    width: 100%;
    display: block;
    opacity: 1;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 30%;
    left: auto;
}
#socket-connection, #navbar-right, #news-area h3, #news-area p, #news-area strong, #news-area em {
    font-size: 0;
    opacity: 0;
}
#login-loading {
    font-size: 4vh;
    margin: 0;
    padding-top: 30%;
}
a {
    padding: 0;
    text-decoration: underline;
    opacity: .75;
}
a:focus {
    font-style: italic
}
a:hover {
    opacity: 1
}
h1, h2, h3 {
    font-variant: small-caps;
    line-height: 1;
    text-transform: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    margin: .5vh;
    padding: 0;
}
#newsMain {
    height: 100vh;
    width: 100vw;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.news_list {
    margin: 5vh 2.5vw;
    height: 85vh;
    width: auto;
    max-width: 100%;
    overflow-y: scroll;
    position: absolute;
    top: 0;
}
#recover-area::before {
    content: "This feature is sometimes unavailable.";
    color: #F33;
}
/*This affects the navbar area while logged out. This smooths out the login animation.*/
#navbar-middle button, #navbar-right {
    display: none
}
#links-area[data-v-26bcedb3]/*login*/, #links-area[data-v-e589858c]/*register*/, #links-area[data-v-29814b14]/*recover*/ {
    border-top: 0;
    margin: 0;
    padding: 0;
}
form button {
    text-align: center
}
}

@-moz-document url("https://duelingnexus.com/home") {
/*SECTION 03 HOME*/
/*This section affects the page that loads when you first login*/
#navbar-right {
    z-index: 2
}
#news-area {
    box-sizing: border-box;
    opacity: 1;
    display: block;
    overflow-y: auto;
    min-height: 0;
    max-height: 100vh;
    height: 60%;
    width: auto;
    min-width: 0;
    max-width: 100vw;
    margin: 0;
    position: absolute;
    top: 30%;
    right: 12%;
    left: 12%;
}
article:not(#home-area) {
    animation: appear 2s
}
@keyframes appear {
	0% {
		opacity: 0;
	}
    11% {
        opacity: 0;
    }
	100% {
		opacity: 1;
	}
}
}

@-moz-document url("https://duelingnexus.com/duel"), url("https://duelingnexus.com/gamelist"), url("https://duelingnexus.com/hostgame"), url("https://duelingnexus.com/hostbotgame") {
/*SECTION 04 DUEL ZONE*/
/*This section effects the pages that show up when you click the Duel Zone button.*/
#app {
    overflow-y: auto
}
/*duel area*/
/*#duel-area h2, #duel-area h3 {
    text-align: left;
    margin: 0;
    padding: 1vh 0 .5vh 10%
}*/
select {
    height: 100%;
    padding: 0;
}
/*gamelist*/
#gamelist-buttons[data-v-33d70790] {
    height: 6vh;
    max-height: 10%;
    overflow: visible;
    margin: 0;
}
#gamelist-buttons[data-v-33d70790] button {
    line-height: 5vh
}
#gamelist-filters[data-v-33d70790] {
    max-height: 20%;
    overflow: visible;
    margin: 0;
}
#gamelist-filters[data-v-33d70790] p {
    margin: 2%
}
#gamelist-container[data-v-33d70790] {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 64%;
}
input[data-v-33d70790][type="text"] {
    height: 3.25vh;
    width: 26%;
    padding: 0;
    z-index: 2;
    position: relative;
}
/*table*/
td, th {
    font-size: 2vh;
    max-width: 15vw;
}
td[data-v-33d70790] {
    animation: 2.5s GrowFromTop
}
@-moz-keyframes GrowFromTop {
    0% {
        font-size: 0;
    }
    100% {
        font-size: 2vh;
    }
}
@-o-keyframes GrowFromTop {
    0% {
        font-size: 0;
    }
    100% {
        font-size: 2vh;
    }
}
@keyframes GrowFromTop {
    0% {
        font-size: 0;
    }
    100% {
        font-size: 2vh;
    }
}
}

@-moz-document url("https://duelingnexus.com/decks") {
/*SECTION 05 DECK EDITOR*/
/*This section applies to the page that loads when you click the Deck Editor button.*/
#app {
    overflow-y: auto
}
h2[data-v-417e0dbe] {
    font-size: 3.5vh;
    overflow: visible;
    max-height: 6%;
    margin: 1%;
}
#decks-buttons[data-v-417e0dbe] {
    overflow: visible;
    max-height: 15%;
    margin-bottom : 1%;
}
#decks-buttons button, button[data-v-417e0dbe], #deck-buttons .fake-button[data-v-417e0dbe] {
    text-align: center;
    box-sizing: border-box;
    width: 24%;
    padding: 1vh;
    margin-right: 1%;
}
#decks-container {
    overflow-y: auto;
    max-height: 75%;
    position: absolute;
    bottom: 2%;
}
table[data-v-417e0dbe] {
    width: 99%;
    table-layout: fixed;
}
.td-big {
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 65%;
    min-width: 0;
    overflow: hidden;
}
td {
    font-size: 1vw;
    text-align: center;
    padding: .75vw;
}
}

@-moz-document url("https://duelingnexus.com/profile") {
/*SECTION 06 PROFILE*/
/*This section applies to the page that loads when you click the Profile button.*/
.remove-custom-button[data-v-dc2d7148], .fake-button[data-v-dc2d7148] {
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    width: 70%;
    padding: 1vw;
}
}

@-moz-document url-prefix("https://duelingnexus.com/game"), url-prefix("https://duelingnexus.com/editor") {
/*SECTION 07 GAMEGLOBAL*/
/*This section applies to the game and editor pages. Much of the code is shared.*/
html {
    background-position: right bottom;
    background-color: black;
}
body {
    height: 100vh;
    margin: 0;
    position: relative;
}
article {
    padding: 1%
}
div {
    font-size: 2vh;
    line-height: 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.*/
    font-size: 3.5vh;
    line-height: 1;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    margin: .5vh;
}
button img, .fake-button img {
    height: 2vw;
    width: 2vw;
    float: right;
}
#card-name, #editor-deck-main-title, #editor-deck-extra-title, #editor-deck-side-title, #siding-deck-main-title, #siding-deck-extra-title, #siding-deck-side-title {/*Big headers.*/
    font-size: 1.25vw;
    text-align: center;
}
h6 {/*Small headers.*/
    font-size: 1.5vh
}
#editor-container, #game-container, .engine-dark-box {
    margin: 0
}
#card-column, #game-card-info {
    height: 92vh;
    width: 24vw;
}
#card-column, #game-column, #game-siding-column, #editor-decks-column {
    margin: 8vh 1vw 0 0 !important
}
#editor-decks-column, #game-siding-column {
    max-width: 39vw;
    padding: 0;
}
#editor-search-column, #game-siding-button-container {
    height: 40vw;
    min-width: 33vw;
    width: 33vw;
    padding: 0;
    position: relative;
}
.engine-dark-box { 
    min-height: 2vw
}
.engine-text-box, #card-description-box, #editor-main-deck, #siding-main-deck, #editor-extra-deck, #editor-side-deck, #siding-extra-deck, #siding-side-deck {
    border-width: .15vw
}
.engine-dark-box, .engine-text-box, #card-column, #card-name, #card-picture-container, #card-description-box, #editor-main-deck, #siding-main-deck, #editor-extra-deck, #editor-side-deck, #siding-extra-deck, #siding-side-deck, #editor-search-results {
    box-sizing: border-box
}
#card-name, #editor-deck-main-title, #editor-search-title, #siding-deck-main-title, #editor-deck-extra-title, #editor-deck-side-title, #siding-deck-extra-title, #siding-deck-side-title {
    line-height: 1.5;
	margin: .5vw 0;
}
#editor-main-deck, #siding-main-deck {
    min-height: 0
}
#siding-main-deck, #editor-main-deck {
    margin: 1vw 0 .5vw 0
}
/*Card Column*/
.game-card-tab {
    height: 8vh;
    width: 24vw;
    position: fixed;
    top: 0;
}
#game-card-info {
    top: 8vh
}
#editor-container #card-column, #game-card-info {
    display: grid;
    grid-template-areas: 'header' 'picture' 'description' '.';
    grid-template-rows: max-content auto 25% 18%;
    gap: 1.5vh;
}
#card-name {
	grid-area: header;
    overflow: auto;
    padding: .5%;
    width: 99%;
    max-height: 5vw;
    z-index: 2;
}
#card-picture-container {
	grid-area: picture;
    display: inline-block;
    min-height: 0;
    margin: 0;
    position: relative;
    bottom: 0;
}
#card-picture {
    height: auto;
    width: 50%;
    max-width: 100%;
    position: absolute;
    right: 25%;
    bottom: 0;
}
#card-description-box {
    grid-area: description;
    font-size: 1vw;
    text-align: justify;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .5vh 1vh;
    position: relative;
    bottom: 0;
}
#card-description {
    line-height: 1.1
}
#card-description-box p {
    margin-bottom: 0
}
#card-if-monster, #card-if-spell, #card-if-trap {
    font: bold 1.1vw sans-serif
}
/*ENGINE BUTTONS*/
.engine-button:not(.game-phase-button) button {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    font-family: "Arial Narrow", inherit;
    border-width: .15vw;
    cursor: pointer;
}
.engine-button:active, button:active {
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
    transform: translate(.1vw, .5vh);
}
select {
    cursor: pointer
}
}

@-moz-document url-prefix("https://duelingnexus.com/game") {
/*SECTION 08 GAME*/
/*This section affects only the game pages.*/
.engine-window p, #game-chat-area, #game-chat-area .engine-text-box, #game-end-text, #game-end-title {
    margin: 0;
    padding: 0;
}
#game-room-container {
    margin: 0;
    padding: 0;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    overflow: auto;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#game-room-container-top {
    margin-top: 8vh;
    margin-left: 25vw;
    height: 25vh;
    min-width: 0;
    width: 70vw;
}
#game-room-players {
    user-select: none;
    height: 50vh;
    width: 70vw;
    max-width: 100%;
    padding: 0;
    position: absolute;
    bottom: 41px;
    left: 25vw;
}
#game-room-information {
    padding: 0
}
#game-room-information-table tr {
    height: 3vh
}
/*Chatbox*/
#game-chat-area {/*This is the box that contains the chat to a confined space. It's the heart of this theme.*/
    font-size: 2vh;
    border: 1px dashed antiquewhite;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 11vh;
    width: 23vw;
    min-width: 0;
    bottom: 40px;
}
#game-chat-area .engine-text-box {/*This is the smaller box where you type into.*/
    font-size: 1vw;
    border: 3px double #f0f0f0;
    height: 4vh;
    width: 21vw;
    position: fixed;
    bottom: 41px;
    left: .6%;
}
/*Options tab*/
.game-card-tab-button {
    height: 8vh;
    padding: 0;
}
.game-option {
    padding: .2vw
}
table.game-option input {
    width: 95%;
    cursor: grab;
}
table.game-option input:active {
    cursor: grabbing
}
#game-options {
    max-height: 72vh;
    overflow-y: auto;
}
#game-options td, #game-options p {
    font-size: 1vw;
    line-height: 1;
    margin: .5vh;
}
/*Game room*/
#game-room-players > div:nth-of-type(1) {
    display: grid;
    grid-template-areas: 'Host Ready Opponent';
    grid-template-columns: 33.33% 33.33% 33.33%;
    height: 50%;
    position: relative;
}
.game-room-player-container, #game-room-player-ready-button-container {
    height: 100%;
    width: 100% !important;
    border-collapse: collapse;
}
.game-room-player-container:nth-of-type(1) {
    grid-area: Host
}
#game-room-player-ready-button-container {
    grid-area: Ready;
    display: flex;
    flex-direction: column;
}
.game-room-player-container:nth-of-type(2) {
    grid-area: Opponent;
    margin: 0 0 0 auto;
}
.game-room-player-container img {
    background-size: 85% 85% !important
}
#game-room-avatar-player1-image, #game-room-avatar-player2-image, #game-room-avatar-player3-image, #game-room-avatar-player4-image {
    height: 12vh
}
table p {
    width: 17vw;
    margin-bottom: 0 !important;
}
#game-room-player1-username, #game-room-player2-username, #game-room-player3-username, #game-room-player4-username {
    font-size: 2.5vh;
    max-height: 7vh;
    overflow: auto;
}
#game-room-player1-title, #game-room-player2-title, #game-room-player3-title, #game-room-player4-title {
    font-size: 2vh
}
#game-room-current-action {
    font-size: 1.5vw !important
}
#game-room-current-action-subheading {
    font-size: 1.1vw !important
}
#game-room-circular-button-container {
    width: 25%;
    padding-top: 25%;
    margin: auto auto 0 auto;
}
#game-room-circular-button-container button {
    font-size: 1.2vw
}
.game-room-player-container:nth-of-type(2) td:nth-of-type(1) {
    transform: translateX(-2%)
}
#game-room-deck-container-player1, #game-room-deck-container-player2 {
    height: 50% !important
}
#game-room-deck-selection-player1, #game-room-deck-selection-player2 {
    padding-top: 3% !important
}
#game-room-deck-container-player2 {
    width: 49%;
    position: absolute;
    right: 0;
}
#game-deck-selection-player1, #game-deck-selection-player2 {
    height: 15vh
}
#game-room-deck-selection-player2 {
    margin-right: 5%;
    float: right;
}
#game-rps-rock, #game-rps-paper, #game-rps-scissors, #game-rps-rock-hidden, #game-rps-paper-hidden, #game-rps-scissors-hidden, #game-rps-first, #game-rps-second {
    width: 25%
}
/*Game field*/
#game-column {
    height: calc(92vh - 40px);
    width: auto;
    overflow: auto;
    padding: 0;
}
#game-field {
    transform: scale(.7) translateY(-5%)
}
#game-alert-window, #game-end-window, #options-window, #game-results-container, #game-message-window, #game-waiting-menu, #game-selection-window, #game-yesno-window, #game-position-window, #game-option-window, #game-announce-window, #game-announce-card-window {/*This makes the windows transparent.*/
    background-color: rgba(0, 0, 0, 0.5)
}
#game-option-list .engine-button {/*This gives buttons a shape.*/
    height: auto;
    width: auto;
    min-width: 5vw;
    margin: 0.25vw;
    padding: 0;
    position: relative;
    bottom: 0;
}
#game-option-list .engine-button:before, #game-option-list .engine-button:after {/*This gives empty buttons a shape.*/
    content: "~";
    font-size: 0;
}
#game-yesno-yes-button, #game-yesno-no-button {
    font-size: 3vw
}
#game-announce-window {/*DNx uses a lot of pop-up windows. This is one of them. The Game Announce Window is used for displaying lists ingame, such as types or attributes. Chances are you may not even know it exists.*/
    overflow-y: scroll;
    height: 10vw;
    width: 10vw;
}
#game-selection-window, #game-announce-card-window {/*This affects the Graveyard, RFG, and search selection windows.*/
    transform: translateY(-10vw) translateX(35vw);
    overflow-y: scroll;
    height: 20vw;
    width: 40vw;
    margin: 0;
    padding-top: 0;
}
.game-selection-card {/*This adds space between the card images on the window so you can see the field below.*/
    margin: 1vh 1vw 1vh 1vw;
    z-index: 7;
}
#game-action-menu .engine-button-default {
    font-size: 2.5vw
}
.game-field-zone-activate {
    position: absolute
}
.empty-game-field-zone-full button {
    margin: 0 !important
}
#game-field-player-hand .game-field-zone-content, #game-field-opponent-hand .game-field-zone-content {
    height: max-content;
    max-height: min-content;
    width: 158%;
    transform: translateX(-18.5%);
}
#game-field-player-hand {
    transform: translateY(70%)
}
#game-field-opponent-hand {
    transform: translateY(-70%)
}
/*Avatar, bars, and buttons*/
.game-avatar-area, .empty-game-field-zone-full button, #game-turn-display {
    font-size: 1vw;
    width: 6vw !important;
}
.empty-game-field-zone-full:nth-of-type(1) .game-avatar-area, .empty-game-field-zone-full:nth-of-type(1) button, #game-turn-display {
    transform: translateX(-35%)
}
.empty-game-field-zone-full:nth-of-type(3) .game-avatar-area, .empty-game-field-zone-full:nth-of-type(3) button {
    transform: translateX(25%)
}
.game-avatar-area {
    font-size: 1vw;
    text-align: center;
    word-break: break-all;
    height: 30vh;
    overflow-x: hidden;
    overflow-y: auto;
}
#game-turn-display {
    margin: 1vw 0 1vw 0
}
/*Siding*/
#game-siding-button-container {
    height: 100vh;
	position: absolute;
    top: 0;
    right: 0;
}
#game-siding-button-container:after {
    content: 'HOW TO SIDE: \A \A To side on desktop, right click a card(s) in the "Main" area and it will move to the "Side", then right click a card(s) in the "Side" and it will move to the "Main". If you are on Android, drag a card(s) to the bottom right corner with your finger.\A \A Note that you will not be able to complete siding until the cards you sided in are in the bottom right corner of the "Main", and there are the same number of cards in the "Main" after siding as before siding. When you are done, click the buttom below.';
    font: 1.25vw/1 sans-serif;
    text-align: justify;
    white-space: pre-line;
    border-left: 1px solid #777777;
    background: linear-gradient(rgba(18,23,36,0.7) 0%, rgba(1,1,17,0.7) 100%);
    height: 100vh;
    padding: 10vh 10% 0 5%;
	display: block;
    position: relative;
}
button#game-siding-done {
    width: 96%;
    z-index: 2;
    position: absolute;
    bottom: calc(40px + 2%);
    left: 2%;
}
}

@-moz-document url-prefix("https://duelingnexus.com/editor") {
/*SECTION 09 EDITOR*/
body {
    overflow: auto
}
select {
    text-align: center
}
.engine-button[disabled], .engine-button:disabled {
    cursor: not-allowed
}
.editor-select, .editor-filter-text-box, .editor-filter-multliine-text-box {
    height: auto
}
/*Editor menu*/
#editor-menu-container, #editor-menu-content {
    box-sizing: border-box;
    position: fixed;
}
#editor-menu-container, #editor-menu-content, #editor-menu-title, #editor-menu-title-banlist {
    height: 8vh;
    line-height: 3.5;
}
#editor-menu-container, #editor-menu-content, #editor-menu-title, #editor-menu-title-deck, #editor-menu-spacer, #editor-menu-title-banlist, #editor-select-banlist, #editor-menu-spacer-small, #editor-menu-container button {
    font-size: 2.25vh;
    width: 100%;
    padding: 0;
    margin: 0;
}
#editor-menu-content {
    display: grid;
    grid-template-areas: '. name spacer2 banlist select spacer save clear undo redo sort shuffle share';
    grid-template-columns: .5vw 30vw .5vw 5.5vw 12.25vw 1vw repeat(7, 6vw);
    gap: .5vw;
}
#editor-menu-title-deck {
    grid-area: name;
    white-space: normal;
    word-wrap: break-word;
    overflow-y: auto;
    height: 8vh;
}
#editor-menu-spacer {
    grid-area: spacer;
}
#editor-menu-title-banlist {
    grid-area: banlist;
    text-align: right;
}
#editor-select-banlist {
    grid-area: select;
}
#editor-menu-spacer-small {
    grid-area: spacer2;
}
#editor-save-button {
    grid-area: save
}
#editor-clear-button {
    grid-area: clear
}
#editor-undo-button {
    grid-area: undo
}
#editor-redo-button {
    grid-area: redo
}
#editor-sort-button {
    grid-area: sort
}
#editor-shuffle-button {
    grid-area: shuffle
}
#editor-share-button {
    grid-area: share
}
#editor-menu-title-deck, #editor-select-banlist {
    text-align: left
}
#editor-select-banlist, #editor-menu-container button {
    align-self: center;
    min-height: 0;
    min-width: 0;
}
/*The right-most column.*/
#editor-search-column {
    display: grid;
    grid-template-areas: 'box' 'results' '.';
    grid-template-rows: max-content auto 41px;
    margin-top: 8vh;
    overflow: hidden;
    height: 92vh;
    min-height: 0 !important;
}
#editor-search-box {
    grid-area: box;
    position: relative;
}
#editor-search-results {
	grid-area: results;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-top: .15vw;
}
/*The top of the right-most column*/
#editor-search-text {
    margin-top: 1vh;
    z-index: 2;
    position: relative;
}
#editor-search-text, #editor-select-card-type, #editor-multi-select-monster-type, #editor-multi-select-monster-ability, #editor-select-monster-attribute, #editor-select-monster-race, #editor-select-spell-type, #editor-select-trap-type, #editor-multi-select-genre, #editor-select-limit, #editor-select-cardpool, #editor-select-results, #editor-sort-results {
	height: auto;
    min-width: 0;
}
/*The filters in the right-most column*/
#editor-filters {
    height: 44vh;
    padding: 2%;
    overflow-y: auto;
    scrollbar-width: none;
}
#editor-filters span {
    font-size: 1em;
    line-height: 1.5;
}
#filters-left, #filters-right, #editor-filters span:not(.editor-realtime-search-span), .editor-filter-select, .editor-filter-multiselect-span, .editor-filter-text-box, .editor-filter-multliine-text-box {
    width: 48%;
    min-width: 0;
}
#filters-right, .editor-filter-select, .editor-filter-multiselect-span, .editor-filter-multliine-text-box, .editor-filter-text-box {
    float: right
}
#filters-right span {
    padding-left: 0 !important
}
.editor-filter-label-right {
    padding-left: 5% !important
}
.editor-filter-multiselect {
	width: 100%
}
.editor-select-checkboxes {
    width: max-content;
    max-height: 75% !important;
}
input {
    text-align: center
}
.editor-realtime-search-span, #editor-clear-filters-button, #editor-search-button {
    width: max-content;
    min-width: 0;
    height: auto;
    min-height: 0;
    float: right;
}
/*The search results in the right-most column*/
.editor-search-result {
    cursor: pointer;
    border-right: 0;
    max-width: 50%;
    position: relative;
}
.editor-search-card {
    width: calc(100% / 3);
    position: relative;
}
.editor-search-description {
    background: radial-gradient(rgba(17, 25, 37, .7) 25%, rgba(0, 0, 0, 0));
    text-align: right;
    direction: rtl;
    padding: 0;
    max-height: 100%;
    width: calc(103% / 1.5);
    overflow: visible;
    scrollbar-width: none;
    z-index: 2;
    position: absolute;
    right: 3%;
}
.editor-search-description .template-name {
    font-weight: bold;
    white-space: pre-line;
    overflow: visible;
}
.editor-search-description .template-name, .editor-search-description .template-if-monster, .editor-search-description .template-if-spell {
    font-size: 1.75vh;
    height: max-content;
    width: max-content;
    max-width: 94%;
    float: right;
}/*
.editor-search-description .template-if-monster, .editor-search-description .template-if-spell {
}*/
}

@-moz-document url("https://duelingnexus.com/privacy_policy.html"), url("https://duelingnexus.com/donate") {
/*SECTION 10 PRIVACY*/
/*This section affects the Privacy Policy page.*/
/*Here we have some general clicky thingy rules.*/
a {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    padding: 0;
    text-decoration: underline;
    opacity: .75;
}
a:focus {
    font-style: italic
}
a:hover {
    opacity: 1
}
h1, h2, h3 {
    font-variant: small-caps;
    line-height: 1;
    text-transform: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    margin: .5vh;
    padding: 0;
}
#newsMain {
    height: 100vh;
    width: 100vw;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.news_list {
    margin: 5vh 2.5vw;
    height: 85vh;
    width: auto;
    max-width: 100%;
    overflow-y: scroll;
    position: absolute;
    top: 0;
}
/*This section affects the donate page.*/
@media (orientation: portrait) {
div:not(#app), #donate-area {
    display: none
}
}
@media (orientation: landscape) {
h1, h2, h3 {
    letter-spacing: .1vw
}
h1 {
    font-size: 2vw
}
h2 {
    font-size: 1.75vw
}
h3 {
    font-size: 1.5vw
}
h4 {
    font-size: 1.25vw
}
li, p {
    font-size: 1vw
}
}
@media (orientation: portrait) {
h1, h2, h3 {
    letter-spacing: .2vh
}
h1 {
    font-size: 4vh
}
h2 {
    font-size: 3.5vh
}
h3 {
    font-size: 3vh
}
h4 {
    font-size: 2.5vh
}
li, p {
    font-size: 1.75vh
}
}
}

@-moz-document url-prefix("https://duelingnexus.com/login"), url-prefix("https://duelingnexus.com/register"), url-prefix("https://duelingnexus.com/recover"), url-prefix("https://duelingnexus.com/home"), url-prefix("https://duelingnexus.com/duel"), url-prefix("https://duelingnexus.com/gamelist"), url-prefix("https://duelingnexus.com/hostgame"), url-prefix("https://duelingnexus.com/decks"), url-prefix("https://duelingnexus.com/profile"), url-prefix("https://duelingnexus.com/leaderboard"), url-prefix("https://duelingnexus.com/game"), url-prefix("https://duelingnexus.com/editor"), url-prefix("https://duelingnexus.com/donate"), url-prefix("https://duelingnexus.com/privacy_policy.html") {
/*SECTION 14 MINI*/
/*This section uses a rule that changes various elements so they fit on really small screens.*/
@media (max-width: 1024px) {
body {
    background-attachment: scroll;
    background-position: right bottom;
}
/*Smaller headers*/
h2, h3 {
    font-size: 3vh
}
h4 {
    font-size: 2vw
}
/*Smaller navbar*/
#navbar-left {
    display: none
}
#navbar-middle, #navbar-middle button {
    float: left;
    vertical-align: top;
    left: 0;
}
/*Smaller login*/
#register-email, #register-username, #register-password, #register-password2, #recover-email {
    margin: .5vh 0 1.5vh
}
#links-area[data-v-7df22d6c], #links-area[data-v-c3640fe8], #links-area[data-v-80980b4] {
    bottom: 0
}
#links-area a[data-v-c3640fe8] {
    line-height: 5.5
}
/*Smaller profile*/
#my-profile[data-v-7d3c70a7] {
    height: 59.5vh
}
#my-profile-in, #my-profile-in h2 {
    height: 2.5vh;
    padding: 0;
    margin: 0;
}
.avatar-image[data-v-7d3c70a7], .sleeve-image[data-v-7d3c70a7] {
    max-height: 20vh;
    border-width: .1vh;
}
.avatar-image[data-v-7d3c70a7] {
    width: 20vh
}
button.arrow-button[data-v-7d3c70a7] {
    font-size: 2vh;
    height: 20.2vh;
    width: 4.5vh;
    margin: 0 .5vh;
    padding: 0;
}
.file-picker-container[data-v-7d3c70a7], .remove-custom-button[data-v-7d3c70a7] {
    font-size: 1.5vh;
    line-height: 2;
    width: 30vh;
    margin: .5vh auto;
}
#my-profile h3:nth-child(3){
    top: 60vh
}
#profile-ranking-table {
    top: 65vh;
}
/*Phase buttons*/
button#game-dp-button {
    transform: translate(0,-9vh) scale(1.5)
}
button#game-sp-button {
    transform: translate(0,-6vh) scale(1.5)
}
button#game-mp1-button {
    transform: translate(0,-3vh) scale(1.5)
}
button#game-bp-button {
    transform: translate(0,0vh) scale(1.5)
}
button#game-mp2-button {
    transform: translate(0,3vh) scale(1.5)
}
button#game-ep-button {
    transform: translate(0,6vh) scale(1.5)
}
/*Smaller textbox*/
#game-chat-area .engine-text-box {
    width: 21.5vw
}
/*smaller editor*/
.engine-button-navbar {
    font-size: 2vh
}
}
}

Reviews

No reviews yet.