ARCHBLOX
/
website
1
0
Fork 0
Code Issues Pull Requests 4 Packages Projects Releases Wiki Activity

cleaned css and changed how the animated background works

This commit is contained in:
Thomas G 2022-07-03 22:21:47 +10:00
parent ee6930ef5d
commit fb57b4fe6f
1 changed files with 451 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

899
public/css/app.css
View File

@ -1,509 +1,512 @@
@keyframes animatedbackground { @keyframes animatedbackground {
from { from {
background-position-x: 0px; background-position-x: 0px;
animation-timing-function: linear; animation-timing-function: linear;
}
to {
background-position-x: 2000px;
animation-timing-function: linear;
}
} }
to { #alert {
background-position-x: 2000px; height: fit-content;
animation-timing-function: linear; margin: 0px;
position: fixed;
top: 72px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
padding-left: 5px;
width: 100%;
text-align: center;
background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
} }
}
#alert { .warningtext {
height: fit-content; color: red;
margin: 0px; }
position: fixed;
top: 72px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
padding-left: 5px;
width: 100%;
text-align: center;
background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
}
.warningtext { .popupcontainer {
color: red; top: 0%;
} position: fixed;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 100000000;
}
.popupcontainer { .popup {
top: 0%; color: #000000;
position: fixed; text-align: center;
background-color: rgba(0, 0, 0, 0.5); position: fixed;
width: 100%; top: 50%;
height: 100%; left: 50%;
z-index: 100000000; padding-top: 5px;
} padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
transform: translate(-50%, -50%);
width: max-content;
border-radius: 3px;
border: 1px solid #3D414A;
background: rgb(80, 80, 80);
/* Fallback for IE 11*/
background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
}
.popup { .navbar {
color: #000000; height: 40px;
text-align: center; margin: 0px;
position: fixed; padding-right: 5px;
top: 50%; padding-left: 5px;
left: 50%; padding-top: 2px;
padding-top: 5px; position: fixed;
padding-bottom: 5px; top: 0px;
padding-left: 5px; padding-bottom: 2px;
padding-right: 5px; color: white;
transform: translate(-50%, -50%); line-height: normal;
width: max-content; display: inline-flex;
border-radius: 3px; vertical-align: middle;
border: 1px solid #3D414A; width: 100%;
background: rgb(80, 80, 80); background: rgb(58, 83, 242);
/* Fallback for IE 11*/ /* Fallback for IE 11*/
background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%); background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
} }
.navbar { .navbarbuttoncontainer,
height: 40px; .smallnavbarbuttoncontainer,
margin: 0px; .navbarlogincontainer {
padding-right: 5px; padding-left: 5px;
padding-left: 5px; display: table-cell;
padding-top: 2px; vertical-align: middle;
position: fixed; }
top: 0px;
padding-bottom: 2px;
color: white;
line-height: normal;
display: inline-flex;
vertical-align: middle;
width: 100%;
background: rgb(58, 83, 242);
/* Fallback for IE 11*/
background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
}
.navbarbuttoncontainer, #navbarlogincontainer,
.smallnavbarbuttoncontainer, #navbarsignedincontainer {
.navbarlogincontainer { position: relative;
padding-left: 5px; padding-right: 10px;
display: table-cell; margin-right: 3%;
vertical-align: middle; margin-left: auto;
} float: inline-end;
top: 11px;
}
#navbarlogincontainer, #profilefriendscontainer p,
#navbarsignedincontainer { #profilefriendscontainer a {
position: relative; display: inline;
padding-right: 10px; }
margin-right: 3%;
margin-left: auto;
float: inline-end;
top: 11px;
}
#profilefriendscontainer p, #profiletopcontainer {
#profilefriendscontainer a { margin-bottom: 30px;
display: inline; display: block;
} width: 100%;
}
#profiletopcontainer { .onlinestatus_website {
margin-bottom: 30px; color: #2260DD;
display: block; }
width: 100%;
}
.onlinestatus_website { .onlinestatus_ingame {
color: #2260DD; color: green;
} }
.onlinestatus_ingame { .onlinestatus_offline {
color: green; color: black;
} }
.onlinestatus_offline { #yes,
color: black; #no {
} width: 50%;
}
#yes, #FeedBox {
#no { width: 100%;
width: 50%; height: 22px;
} }
#FeedBox { #FeedButton {
width: 100%; width: 100%;
height: 22px; height: 22px;
} }
#FeedButton { #logo_signup,
width: 100%; #logo-signup p {
height: 22px; margin: auto;
} text-align: center;
width: 200px;
}
#logo_signup, #feed,
#logo-signup p { #profileleftcontainer {
margin: auto; text-align: center;
text-align: center; padding-left: 5px;
width: 200px; padding-right: 5px;
} width: 50%;
}
#feed, #gamesframe,
#profileleftcontainer { #profilerightcontainer {
text-align: center; text-align: center;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
width: 50%; width: 50%;
} }
#gamesframe, .FeedContainerBox,
#profilerightcontainer { .ProfileContainerBox {
text-align: center; border-radius: 1px;
padding-left: 5px; text-align: left;
padding-right: 5px; width: 100%;
width: 50%; vertical-align: top;
} display: inline-flex;
border: 1px solid #000000;
border-width: 1px;
margin-bottom: 5px;
}
.FeedContainerBox, .FriendsContainerBox {
.ProfileContainerBox { border-radius: 1px;
border-radius: 1px; text-align: left;
text-align: left; width: 100%;
width: 100%; min-width: max-content;
vertical-align: top; vertical-align: top;
display: inline-flex; display: inline-flex;
border: 1px solid #000000; border: 1px solid #000000;
border-width: 1px; border-width: 1px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.FriendsContainerBox {
border-radius: 1px;
text-align: left;
width: 100%;
min-width: max-content;
vertical-align: top;
display: inline-flex;
border: 1px solid #000000;
border-width: 1px;
margin-bottom: 5px;
}
#btncontainer { #btncontainer {
margin-left: 75%; margin-left: 75%;
} }
.navbarbutton { .navbarbutton {
position: relative; position: relative;
top: 10px; top: 10px;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
} }
.smallnavbarbutton { .smallnavbarbutton {
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
} }
.smallnav { .smallnav {
height: 25px; height: 25px;
margin: 0px; margin: 0px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
position: fixed; position: fixed;
top: 43px; top: 43px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
display: inline-table; display: inline-table;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
line-height: normal; line-height: normal;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
text-size-adjust: auto; text-size-adjust: auto;
text-align: left; text-align: left;
background-color: black; background-color: black;
} }
.invisible, .invisible,
#invisible { #invisible {
display: none !important; display: none !important;
} }
html { html {
margin: 0px; margin: 0px;
font-family: "Helvetica"; font-family: "Helvetica";
src: url('Helvetica.ttf') format('truetype'), ; src: url('Helvetica.ttf') format('truetype'), ;
font-style: normal; font-style: normal;
background-color: rgb(49, 107, 223); background-color: rgb(49, 107, 223);
color: white; width: 100%;
animation-name: animatedbackground; height: 100%;
animation-duration: 50s; color: white;
animation-iteration-count: infinite; }
background-image: url('../img/animated.png');
background-position: center 100%;
background-repeat: repeat-x;
background-attachment: fixed;
}
body { body {
margin-left: 0px; animation-name: animatedbackground;
margin-right: 0px; animation-duration: 50s;
margin-top: 0px; animation-iteration-count: infinite;
margin-bottom: 35px; background: url('../img/animated.png');
padding-bottom: 0px; background-position: center 100%;
} background-repeat: repeat-x;
background-attachment: fixed;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 35px;
padding-bottom: 0px;
}
.content_special, .content_special,
#content_special { #content_special {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
flex-wrap: nowrap; flex-wrap: nowrap;
align-content: center; align-content: center;
justify-content: flex-start; justify-content: flex-start;
} }
.content { .content {
color: black; color: black;
max-width: 1000px; max-width: 1000px;
margin: auto; margin: auto;
margin-top: 105px; margin-top: 105px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
min-height: 300px; min-height: 300px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
/* Fallback for IE 11*/ /* Fallback for IE 11*/
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
padding-bottom: 5px; padding-bottom: 5px;
padding-top: 5px; padding-top: 5px;
} }
.content_signup { .content_signup {
color: black; color: black;
max-width: 500px; max-width: 500px;
margin: auto; margin: auto;
margin-top: 30px; margin-top: 30px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
/* Fallback for IE 11*/ /* Fallback for IE 11*/
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
padding-bottom: 5px; padding-bottom: 5px;
padding-top: 5px; padding-top: 5px;
} }
.content_signup input, .content_signup input,
.content_signup button { .content_signup button {
width: 90%; width: 90%;
} }
.content p a, .content p a,
.content a, .content a,
.content_signup p a, .content_signup p a,
.content_signup a, .content_signup a,
.content_special p a, .content_special p a,
.content_special a { .content_special a {
color: black color: black
} }
#footer { #footer {
text-align: center; text-align: center;
max-width: 1000px; max-width: 1000px;
margin: auto; margin: auto;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
padding-bottom: 5px; padding-bottom: 5px;
padding-top: 5px; padding-top: 5px;
background: rgb(172, 172, 172); background: rgb(172, 172, 172);
/* Fallback for IE 11*/ /* Fallback for IE 11*/
background-color: rgba(172, 172, 172, 0.8); background-color: rgba(172, 172, 172, 0.8);
min-height: fit-content; min-height: fit-content;
} }
.tab { .tab {
background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%); background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
height: 20px; height: 20px;
border-radius: 1px; border-radius: 1px;
border: 1px solid #3D414A; border: 1px solid #3D414A;
font-family: "Helvetica"; font-family: "Helvetica";
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
color: #fff !important; color: #fff !important;
} }
.tab_selected { .tab_selected {
background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%); background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
height: 20px; height: 20px;
border-radius: 1px; border-radius: 1px;
border: 1px solid #3D414A; border: 1px solid #3D414A;
font-family: "Helvetica"; font-family: "Helvetica";
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
color: #fff !important; color: #fff !important;
} }
button { button {
background: rgb(45, 45, 45); background: rgb(45, 45, 45);
/*Fallback for IE 11*/ /*Fallback for IE 11*/
background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%); background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
height: 20px; height: 20px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #3D414A; border: 1px solid #3D414A;
font-family: "Helvetica"; font-family: "Helvetica";
color: #fff; color: #fff;
} }
button.bluebutton { button.bluebutton {
background:rgb(35, 98, 222); background: rgb(35, 98, 222);
/*Fallback for IE 11*/ /*Fallback for IE 11*/
background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%); background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
} }
button:hover.bluebutton { button:hover.bluebutton {
background: linear-gradient(#7ca1ef 10%, #4a7de4 49%, #396fdb 50%, #3168d6 100%); background: linear-gradient(#7ca1ef 10%, #4a7de4 49%, #396fdb 50%, #3168d6 100%);
cursor: pointer; cursor: pointer;
} }
button:disabled.bluebutton { button:disabled.bluebutton {
background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%); background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
button.greybutton { button.greybutton {
background: rgb(45, 45, 45); background: rgb(45, 45, 45);
/*Fallback for IE 11*/ /*Fallback for IE 11*/
background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%); background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
} }
button:hover.greybutton { button:hover.greybutton {
background: linear-gradient(#d1d8e6 10%, #b3b8c2 49%, #868a91 50%, #393b3e 100%); background: linear-gradient(#d1d8e6 10%, #b3b8c2 49%, #868a91 50%, #393b3e 100%);
cursor: pointer; cursor: pointer;
} }
button:disabled.greybutton { button:disabled.greybutton {
background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%); background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
button.redbutton { button.redbutton {
background: rgb(223, 24, 24); background: rgb(223, 24, 24);
/*Fallback for IE 11*/ /*Fallback for IE 11*/
background: linear-gradient(#e65a5a 10%, #e13535 49%, #d92c2c 50%, #df1818 100%); background: linear-gradient(#e65a5a 10%, #e13535 49%, #d92c2c 50%, #df1818 100%);
} }
button:hover.redbutton { button:hover.redbutton {
background: linear-gradient(#e56c6c 10%, #dd4e4e 49%, #d14343 50%, #da2e2e 100%); background: linear-gradient(#e56c6c 10%, #dd4e4e 49%, #d14343 50%, #da2e2e 100%);
cursor: pointer; cursor: pointer;
} }
button:disabled.redbutton { button:disabled.redbutton {
background: linear-gradient(#e65a5a 10%, #e13535 49%, #d92c2c 50%, #df1818 100%); background: linear-gradient(#e65a5a 10%, #e13535 49%, #d92c2c 50%, #df1818 100%);
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
button.greenbutton { button.greenbutton {
background: rgb(26, 92, 46); background: rgb(26, 92, 46);
/*Fallback for IE 11*/ /*Fallback for IE 11*/
background: linear-gradient(#5acf77 10%, #3abc44 49%, #359c32 50%, #1a5c2e 100%); background: linear-gradient(#5acf77 10%, #3abc44 49%, #359c32 50%, #1a5c2e 100%);
} }
button:hover.greenbutton { button:hover.greenbutton {
background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%); background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%);
cursor: pointer; cursor: pointer;
} }
button:disabled.greenbutton { button:disabled.greenbutton {
background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%); background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%);
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
#footer_signup { #footer_signup {
text-align: center; text-align: center;
max-width: 500px; max-width: 500px;
margin: auto; margin: auto;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
padding-bottom: 5px; padding-bottom: 5px;
padding-top: 5px; padding-top: 5px;
background: rgb(172, 172, 172); background: rgb(172, 172, 172);
/* Fallback for IE 11*/ /* Fallback for IE 11*/
background-color: rgba(172, 172, 172, 0.8); background-color: rgba(172, 172, 172, 0.8);
min-height: fit-content; min-height: fit-content;
} }
#footer p, #footer p,
#footer a, #footer a,
#footer_signup p, #footer_signup p,
#footer_signup a { #footer_signup a {
color: black; color: black;
} }
p, p,
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 0px; margin: 0px;
} }
a, a,
#navbarusername { #navbarusername {
color: white; color: white;
text-decoration: none; text-decoration: none;
font-weight: bolder; font-weight: bolder;
} }
.nonbolded { .nonbolded {
font-weight: normal !important; font-weight: normal !important;
} }
.logoutframe { .logoutframe {
color: black; color: black;
max-width: fit-content; max-width: fit-content;
margin: auto; margin: auto;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
/* Fallback for IE 11*/ /* Fallback for IE 11*/
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
padding-bottom: 5px; padding-bottom: 5px;
padding-top: 5px; padding-top: 5px;
} }
.w-5 { .w-5 {
display: none; display: none;
} }
.flex { .flex {
display: table; display: table;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
.iphone-sidebar { .iphone-sidebar {
position: fixed; position: fixed;
color: black; color: black;
width: 20%; width: 20%;
height: 100%; height: 100%;
margin-left: 0px; margin-left: 0px;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
padding-bottom: 5px; padding-bottom: 5px;
padding-top: 5px; padding-top: 5px;
} }
.iphone-content { .iphone-content {
position: relative; position: relative;
color: black; color: black;
width: 80%; width: 80%;
height: 100%; height: 100%;
left: 20%; left: 20%;
background-color: rgba(132, 132, 132, 0.5); background-color: rgba(132, 132, 132, 0.5);
padding-bottom: 5px; padding-bottom: 5px;
padding-top: 5px; padding-top: 5px;
} }
#InviteTreeContainer { #InviteTreeContainer {
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }