mirror of
https://github.com/ND-Framework/ND_Core.git
synced 2026-08-17 13:56:02 +01:00
Updated 2.1.0
Updated everything to new format, N1K0 is about to work on some more stuff.
This commit is contained in:
Andyyy7666
287
ND_CharacterSelection/source/ui/style.css
Normal file
287
ND_CharacterSelection/source/ui/style.css
Normal file
@@ -0,0 +1,287 @@
|
||||
body {
|
||||
background-size: 105%;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Main page */
|
||||
#overlay {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100vh;
|
||||
width: 30vw;
|
||||
background-color: rgba(2, 2, 2, 0.911);
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#charactersSection {
|
||||
height: 50%;
|
||||
margin: none;
|
||||
padding: none;
|
||||
width: 83%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(2, 2, 2, 0);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(99, 99, 99, 0.575);
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(128, 128, 128);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#logoContainer {
|
||||
margin-top: 3vh;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
#logo {
|
||||
height: 10vw;
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
#serverName {
|
||||
color: white;
|
||||
font-size: 130%;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.mainPage {
|
||||
color: white;
|
||||
font-size: 95%;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
text-align: center;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.homeScreenButton, .createdButton, .createdButtonEdit, .createdButtonDelete {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#newCharacterButton {
|
||||
margin-left: 9vw;
|
||||
margin-bottom: 0.8vh;
|
||||
height: 4.5vh;
|
||||
width: 12vw;
|
||||
background: rgb(95,141,254);
|
||||
background-image: linear-gradient(90deg, rgba(95,141,254,1) 0%, rgba(142,104,219,1) 100%);
|
||||
border-radius: 5vw;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#quitGameButton {
|
||||
margin-left: 10vw;
|
||||
margin-bottom: 5vh;
|
||||
height: 4.5vh;
|
||||
width: 10vw;
|
||||
background: rgb(255,110,100);
|
||||
background: linear-gradient(90deg, rgb(255, 100, 208) 0%, rgb(255, 60, 109) 100%);
|
||||
border-radius: 5vw;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.createdButton {
|
||||
display: inline-block;
|
||||
margin-bottom: 1vh;
|
||||
margin-left: 5.5vw;
|
||||
height: 3vh;
|
||||
width: 10vw;
|
||||
background-color: rgb(17, 113, 238);
|
||||
border: none;
|
||||
border-radius: 0.5vh;
|
||||
transition: 0.3s;
|
||||
white-space: nowrap;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.createdButtonEdit {
|
||||
margin-left: 0.2vw;
|
||||
height: 3vh;
|
||||
width: 4vw;
|
||||
background-color: rgb(128, 128, 128);
|
||||
border: none;
|
||||
border-radius: 0.5vh;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.createdButtonDelete {
|
||||
margin-left: 0.2vw;
|
||||
height: 3vh;
|
||||
width: 4vw;
|
||||
background-color: rgb(236, 19, 19);
|
||||
border: none;
|
||||
border-radius: 0.5vh;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Button transitions */
|
||||
#newCharacterButton:hover, #quitGameButton:hover, .characterSubmitButton:hover, .characterResetButton:hover, .confirmationScreenConfirm:hover, .confirmationScreenCancel:hover, .createdButton:hover, .createdButtonEdit:hover, .createdButtonDelete:hover, .spawnButtons:hover {
|
||||
transition: 0.3s;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#newCharacterButton:active, #quitGameButton:active, .characterSubmitButton:active, .characterResetButton:active, .confirmationScreenConfirm:active, .confirmationScreenCancel:active, .createdButton:active, .createdButtonEdit:active, .createdButtonDelete:active, .spawnButtons:active {
|
||||
transition: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Character creator and Editor menu */
|
||||
.characterMenu {
|
||||
height: 60%;
|
||||
width: 50vw;
|
||||
margin: auto 0 auto 40vw;
|
||||
background-color: rgba(2, 2, 2, 0.911);
|
||||
border-radius: 3vh;
|
||||
}
|
||||
|
||||
#characterCreatorTopText {
|
||||
padding-top: 2vh;
|
||||
margin-left: 3vw;
|
||||
color: white;
|
||||
font-size: 120%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#characterCreatorTopTextLine {
|
||||
background: rgb(255, 255, 255);
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(0, 0, 0, 0.014) 100%);
|
||||
height: 0.1vh;
|
||||
width: 95%;
|
||||
border: none;
|
||||
border-radius: 2vh;
|
||||
}
|
||||
|
||||
/* character info */
|
||||
#characterInfoContainer {
|
||||
padding: 2vh 3vw;
|
||||
}
|
||||
#characterInfoContainerLeft {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
#characterInfoContainerRight {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.firstRowText, .secondRowText, .thirdRowText, .fourthRowText {
|
||||
color: white;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.firstRowInput, .secondRowInput, .thirdRowInput, .fourthRowInput {
|
||||
background: white;
|
||||
color: black;
|
||||
border: none;
|
||||
border-radius: 0.2vw;
|
||||
height: 3vh;
|
||||
width: 95%;
|
||||
margin-top: 0.5vh;
|
||||
margin-bottom: 2vh;
|
||||
padding: 0 0 0 0.5vw;
|
||||
}
|
||||
|
||||
.characterSubmitButton {
|
||||
margin-top: 1vh;
|
||||
margin-left: 33.7vw;
|
||||
margin-bottom: 2vh;
|
||||
width: 8vw;
|
||||
background-color: rgb(17, 113, 238);
|
||||
}
|
||||
|
||||
.characterResetButton {
|
||||
width: 4vw;
|
||||
background-color: rgb(231, 50, 50);
|
||||
}
|
||||
|
||||
.characterSubmitButton, .characterResetButton, .confirmationScreenConfirm, .confirmationScreenCancel, .spawnButtons {
|
||||
height: 4vh;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
border: none;
|
||||
border-radius: 1vh;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* confirmation Screen */
|
||||
.confirmationScreen {
|
||||
height: 25vh;
|
||||
width: 30vw;
|
||||
margin-top: 20vh;
|
||||
margin-left: 45vw;
|
||||
background-color: rgba(2, 2, 2, 0.911);
|
||||
border-radius: 3vh;
|
||||
}
|
||||
|
||||
.confirmationScreenConfirm {
|
||||
margin-top: 5vh;
|
||||
margin-left: 19%;
|
||||
margin-right: 5%;
|
||||
width: 8vw;
|
||||
background-color: rgb(17, 113, 238);
|
||||
}
|
||||
|
||||
.confirmationScreenCancel {
|
||||
width: 8vw;
|
||||
background-color: rgb(231, 50, 50);
|
||||
}
|
||||
|
||||
.spawnMenu {
|
||||
height: 39%;
|
||||
width: 40vw;
|
||||
margin: auto 0 auto 40vw;
|
||||
background-color: rgba(2, 2, 2, 0.911);
|
||||
border-radius: 3vh;
|
||||
}
|
||||
|
||||
#spawnMenuContainer {
|
||||
margin-top: 3vh;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.spawnButtons {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-bottom: 1vh;
|
||||
text-align: center;
|
||||
width: 95%;
|
||||
height: 4vh;
|
||||
background-color: rgb(17, 113, 238);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "Pricedown Bl", sans-serif;
|
||||
position: absolute;
|
||||
font-size: 1vw;
|
||||
color: rgba(255, 255, 255, 0.925);
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding: 0.15% 1.1%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10vw;
|
||||
}
|
||||
|
||||
#cash {
|
||||
top: 5.5vh;
|
||||
right: 1.5vw;
|
||||
}
|
||||
|
||||
#bank {
|
||||
top: 9vh;
|
||||
right: 1.5vw;
|
||||
}
|
||||
Reference in New Issue
Block a user