pixel-editor/css/_splash-page.scss
2021-12-28 22:51:18 +01:00

317 lines
5.4 KiB
SCSS

/********SPLASH PAGE*************/
#splash {
width:100% !important;
height:100%!important;
background-color: #232125 !important;
opacity: 1 !important;
#splash-input {
width:74%;
height:100% !important;
color:$baselink;
#splash-menu {
position:relative;
height:100%;
left:0;
top:0;
}
.splash-menu {
display: flex;
}
#editor-logo {
font-weight:bold;
text-transform:uppercase;
font-size:20px;
height:35vh;
width:100%;
position:relative;
background-image:url('https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
#black {
width:100%;
height:100%;
position:relative;
background-color:rgba(0,0,0,0.2);
}
#sp-coverdata {
padding:20px;
p, a {
font-size:15px;
position:absolute;
text-transform:none;
right:20px;
}
p {
top:0px;
}
a {
font-size:17px;
bottom:20px;
text-decoration:underline;
}
* {
filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.4));
}
}
}
#sp-quickstart-container {
width:70%;
float:right;
padding:40px;
display: flex;
flex-direction: column;
justify-content: space-between;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
overflow-y: auto;
&::-webkit-scrollbar {
background: #232125;
width: 0.5em;
}
&::-webkit-scrollbar-track {
margin-top: -0.125em;
width: 0.5em;
}
&::-webkit-scrollbar-thumb {
background: #332f35;
border-radius: 0.25em;
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
}
&::-webkit-scrollbar-corner {
background: #232125;
}
.mode-switcher {
margin-top: 2em;
font-size: 1.2em;
color: $basetext;
a {
font-weight: bolder;
color: white;
margin-left: 0.5em;
}
//show the correct info when the .advanced class is added
.advanced {display: none};
&.advanced-mode {
.basic {display: none}
.advanced {display: inline}
}
}
}
#sp-quickstart {
display:flex;
flex-wrap: wrap;
align-content: flex-start;
overflow-y: auto;
min-height: 0;
flex: 1 1 0;
// Fancy scrollbar
&::-webkit-scrollbar {
background: #232125;
width: 0.5em;
}
&::-webkit-scrollbar-track {
margin-top: -0.125em;
width: 0.5em;
}
&::-webkit-scrollbar-thumb {
background: #332f35;
border-radius: 0.25em;
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
}
&::-webkit-scrollbar-corner {
background: #232125;
}
}
#sp-quickstart-title {
font-size:27px;
text-transform: uppercase;
font-weight: bold;
}
.sp-template {
display: flex;
align-items: center;
text-transform: uppercase;
width:5.5em;
border-radius:5%;
margin-right:4%;
margin-top:4%;
background-color:$basecolor;
font-size: 18px;
text-align:center;
font-weight: bold;
&:hover {
cursor:pointer;
background-color:$baseselected;
}
p {
span {
display:block;
font-size:14px !important;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
width:100%;
float:left;
position:relative;
}
}
.sp-template:before {
content:'';
float:left;
padding-top:100%;
}
#sp-newpixel {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: inline-block;
width: 30% !important;
height:65vh;
padding:20px;
position:relative;
background-color:$basecolor;
#palette-button-splash {
left:5%;
width:90%;
}
.sp-np-entry {
width:100%;
text-align:center;
}
input {
border:none;
background-color: #232125;
color:$basetext;
font-size:14px;
width:40px;
padding:7px;
text-align:center;
}
#create-button {
font-size:18px;
width:150px;
margin-top:40px;
font-weight: bold;
}
#sp-mode-palette {
text-align: center;
position: relative;
float:bottom;
font-size:16px;
font-weight: bold;
div.button-menu {
border:2px solid $basetextweak;
border-radius:5px;
position:relative;
display:inline-block;
padding: 0 0 0 0;
text-align:left;
width:90%;
div {
border:none;
padding:none;
margin:none;
background-color:transparent;
width:50%;
float:left;
text-align: center;
height:25px;
cursor:pointer;
z-index:1;
p {
z-index:0;
-ms-transform: translateY(-60%);
transform: translateY(-60%);
}
}
.sp-interface-selected {
background-color: $basetextweak;
}
}
}
}
#splash-news {
box-sizing: border-box;
width:26%;
height:100%;
background-color:#151516 !important;
float: right;
}
#latest-update {
width:100%;
font-size:15px;
height:90%;
line-height: 1.5;
position:relative;
top:20px;
padding: 0 1.5em;
overflow-y:scroll;
box-sizing: border-box;
img {
width:100%;
}
&::-webkit-scrollbar {
background: #232125;
width: 0.5em;
}
&::-webkit-scrollbar-track {
margin-top: -0.125em;
width: 0.5em;
}
&::-webkit-scrollbar-thumb {
background: #332f35;
border-radius: 0.25em;
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
}
&::-webkit-scrollbar-corner {
background: #232125;
}
}
}