Skip to content

C
COM6009M
Commit 03be3cb7 authored by bailey.barber-scar's avatar bailey.barber-scar
Browse files
Options

Upload New File

parent 0bdecc82
Hide whitespace changes
Inline Side-by-side
Showing with 960 additions and 0 deletions
Front End/styles.css 0 → 100644
View file @ 03be3cb7
/* YSJGE Yellow: #FECB37 */
/* YSJGE Blue: #13152E */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind&family=Montserrat:wght@400;500;600;700;800&display=swap');
.preload * {
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
*,
*::before,
*::after {
box-sizing: border-box;
line-height: 1.5em;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: 'Hind', sans-serif;
background-color: #13152E;
}
.fieldRequired {
color: gold;
font-weight: bold;
}
#loading {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #13152E;
z-index: 99;
}
.loader, .loader:before, .loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
animation-fill-mode: both;
animation: bblFadInOut 1.8s infinite ease-in-out;
}
.loader {
color: #FFF;
font-size: 7px;
position: relative;
text-indent: -9999em;
transform: translateZ(0);
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@keyframes bblFadInOut {
0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
40% { box-shadow: 0 2.5em 0 0 }
}
@keyframes animloader {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
/*#region NAVBAR*/
header {
background-color:
#FECB37;
box-shadow: 0 10px 15px -3px
rgba(0, 0, 0, 0.1),
0 4px 6px -4px
rgba(0, 0, 0, 0.1);
padding: 0px 20px;
}
header .wrapper {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
header .logo img {
height: 75px;
display: block;
}
.navbar {
position: fixed;
top: 0;
left: 100%;
margin: 0;
width: 100%;
height: 100%;
background-color:
#13152E;
padding: 20px;
transition: left 0.3s;
font-family: 'Montserrat', sans-serif;
}
.navbar.show {
left: 0 !important;
}
.hide-scroll {
overflow: hidden;
}
.navbar ul {
all: unset;
list-style-type: none;
display: flex;
flex-direction: column;
align-items: right;
direction: rtl;
float: right;
gap: 10px;
}
.navbar ul a {
all: unset;
color:
white;
text-transform: uppercase;
cursor: pointer;
font-weight: bold;
font-size: 48px;
}
.navbar ul a:hover {
color: white;
}
.navbar ul .btnLogin {
font-size: 20px;
}
.close-nav {
text-align: right;
margin-bottom: 20px;
}
.close-nav button {
all: unset;
background: #f7f7f7;
font-size: 42px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 3px;
color: #444444;
margin-bottom: 25%;
}
.close-nav button:hover {
color:
#222222;
background:
white;
}
.nav-bar-currentpage {
color: white !important;
}
.menu-bar button {
border: transparent;
background:
#FECB37;
height: 50px;
width: 50px;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
.menu-bar i {
display: block;
border-top: 3px solid
#444444;
border-bottom: 3px solid
#444444;
}
.menu-bar i::after {
display: block;
content: "";
border-top: 3px solid
#444444;
margin: 6px 0;
}
.menu-bar button:hover {
background:
white;
}
.menu-bar button:hover i {
border-color:
#222222;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 30px;
}
/*#endregion NAVBAR*/
/*#region LOGIN-BUTTON*/
.btnLogin {
appearance: none;
background-color: white;
border-width: 0;
box-sizing: border-box;
color: #13152E;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 800;
letter-spacing: 0;
line-height: 1em;
margin: 30px 0px;
opacity: 1;
outline: 0;
position: relative;
padding: 1px 20px;
text-align: center;
text-decoration: none;
text-rendering: geometricprecision;
text-transform: uppercase;
transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1),background-color 100ms cubic-bezier(.694, 0, 0.335, 1),color 100ms cubic-bezier(.694, 0, 0.335, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
white-space: nowrap;
}
.btnLogin:before {
animation: opacityFallbackOut .5s step-end forwards;
backface-visibility: hidden;
background-color: white;
clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: translateZ(0);
transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
width: 100%;
}
.btnLogin:hover:before {
animation: opacityFallbackIn 0s step-start forwards;
clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}
.btnLogin:hover {
transition: 1s all;
color: #13152E;
}
.btnLogin:after {
background-color: white;
}
.btnLogin span {
z-index: 1;
position: relative;
}
/*#endregion LOGIN-BUTTON*/
/*#region POPUP LOGIN*/
.form-popup {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
transition: 1s all;
background-color: rgba(0, 0, 0, 0.6);
}
.form-header {
font-family: 'Montserrat', sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
font-weight: 900;
text-transform: uppercase;
}
.form-title {
margin: 0;
}
.form-container {
width: 80%;
max-width: 500px;
margin: 0 auto;
background-color: #13152E;
border-radius: 10px;
padding: 20px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
transform: translateY(100px);
border: 3px solid #FFFFFF;
}
.form-body {
display: flex;
flex-direction: column;
color: white;
}
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #d1d1d1;
transition: 0.5s;
}
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ededed;
outline: none;
transform: scale(1.03);
}
.form-container .btn {
font-family: 'Montserrat', sans-serif;
background-color: #04AA6D;
color: white;
padding: 10px 14px;
border: none;
cursor: pointer;
width: 70%;
margin-bottom:10px;
font-weight: 900;
transform: translateX(20%);
transition: 0.3s ease-in-out;
}
.form-container .btnFormLogin {
background-color: white;
color:#13152E;
font-size: 14px;
border: 2px solid #FFFFFF;
}
.form-container .btnFormSignUp {
background-color: transparent;
border: 2px solid #FFFFFF;
}
.form-container .cancel {
background-color: rgb(255, 50, 50);
margin-left: auto;
width: auto;
max-height: 60px;
font-size: 20px;
opacity: 0.8;
}
.form-container .cancel:hover {
opacity: 1;
}
.form-container .btn:hover:not(.cancel), .open-button:hover {
opacity: 0.8;
}
.form-footer p{
font-size: small;
text-align: center;
}
.form-footer a {
cursor: pointer;
}
.loginFormResponse {
display: none;
color: red;
background-color: pink;
font-weight: 900;
border-radius: 20px;
text-align: center;
margin-bottom: 20px;
}
.info-icon {
display: inline-block;
margin-left: 5px;
position: relative;
}
.info-icon i {
color: white;
cursor: pointer;
transition: color 0.3s ease, opacity 0.3s ease;
}
.info-icon:hover i {
color: rgba(255, 255, 255, 0.8);
}
.saveGameTags{
background-color: lightgreen;
cursor: pointer;
}
/*#endregion POP LOGIN*/
/*#region accountPage*/
.user-details-box {
margin: 0 auto;
background-color: #13152E;
color: white;
padding-left: 20px;
}
.user-details-box input {
padding: 10px;
border-radius: 10px;
border: none;
}
.user-details-box button {
border-radius: 10px;
padding: 5px;
border: none;
padding: 8px;
}
.show-pass-button {
background-color: #F08080;
cursor: pointer;
}
.copy-pass-button {
background-color: white;
cursor: pointer;
}
.role-user {
background-color: lightgray;
color: white;
padding: 0px 10px 0px 10px;
border-radius: 10px;
font-weight: bold;
}
.role-team-cap {
background-color: magenta;
color: white;
padding: 0px 10px 0px 10px;
border-radius: 10px;
font-weight: bold;
}
.role-admin {
background-color: #FECB37;
color: white;
padding: 0px 10px 0px 10px;
border-radius: 10px;
font-weight: bold;
}
.welcomeText {
color: white;
text-align: center;
}
.btnHomeLogin {
padding: 2px 4px;
color: white;
background-color: #FECB37;
border: none;
border-radius: 4px;
font-weight: bold;
}
.homeInfo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.homeUserGameTag {
background-color: rgba(255, 255, 255, 0.2);
margin: 10px 20px;
border-radius: 5px;
padding: 5px 10px;
text-align: center;
color: white;
max-width: 500px;
}
.homeUserGameTag .homeUserGameTagConnected,
.homeUserGameTag .homeUserGameTagConnected span {
background-color: rgb(80, 255, 80);
color:rgb(51, 167, 51);
padding: 2px 5px;
border-radius: 4px;
}
.homeUserGameTag .homeUserGameTagNotConnected,
.homeUserGameTag .homeUserGameTagNotConnected span {
background-color: rgb(255, 80, 80);
color:rgb(167, 51, 51);
padding: 2px 5px;
border-radius: 4px;
}
.card {
margin: 20px 20px 20px 0px;
}
.user-stats-cards {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.user-overwatch-stats,
.user-valorant-stats {
display: none;
}
.user-overwatch-stats .user-stats-card {
background-color: #43484c;
border: solid 2px #f99e1a;
border-radius: 10px;
padding: 20px;
text-align: center;
color: white;
max-width: 450px;
}
.user-overwatch-stats .user-stats-card .game-logo img {
max-height: 75px;
width: auto;
}
.user-overwatch-stats .user-stats-card .basic-user-info img {
width: 75px;
height: auto;
border-radius: 5px;
border: solid 2px white;
}
.user-overwatch-stats .user-stats-card .basic-user-info .ow-name {
background-color: #00B4FF;
color: rgb(255, 255, 255);
padding: 0px 5px 0px 5px;
margin-left: 5px;
font-weight: bold;
border-radius: 5px;
}
.user-overwatch-stats .user-stats-card .basic-user-info .title {
text-align: center;
border-radius: 5px;
margin-top: -8px;
}
.user-overwatch-stats .user-stats-card .ranked-stats {
background-color: #405275;
padding: 5px;
border-radius: 5px;
margin: 10px 0px;
}
.user-overwatch-stats .user-stats-card .player-ranks {
padding: 5px;
border-radius: 5px;
display: flex;
justify-content: space-around;
}
.user-overwatch-stats .user-stats-card .player-ranks .rank-item {
background-color: rgba(0, 0, 0, 0.4);
padding: 0px 10px;
border-radius: 5px;
margin: 10px 5px;
min-width: 80px;
}
.user-overwatch-stats .user-stats-card .player-ranks img {
width: 40px;
height: auto;
margin-top: 10px;
}
.user-overwatch-stats .user-stats-card .most-played-hero {
background-color: #f99e1a;
border-radius: 5px;
padding: 1px;
}
.user-overwatch-stats .user-stats-card .most-played-hero img {
width: 100px;
height: auto;
}
.user-valorant-stats .user-stats-card {
background-color: #0f1822;
border: solid 2px #fa4454;
border-radius: 10px;
padding: 20px;
text-align: center;
}
.user-valorant-stats .user-stats-card .game-logo img {
max-height: 75px;
width: auto;
}
.user-valorant-stats .user-stats-card .basic-user-info {
justify-content: center;
text-align: center;
}
.user-valorant-stats .user-stats-card .basic-user-info p {
color: white;
}
.user-valorant-stats .user-stats-card .basic-user-info .tag {
background-color: rgba(0, 0, 0, 0.5);
color: rgb(180, 180, 180);
padding: 0px 5px 0px 5px;
margin-left: 5px;
font-weight: bold;
border-radius: 5px;
}
.user-valorant-stats .user-stats-card .basic-user-info img {
width: 75px;
height: auto;
border-radius: 100px;
border: solid 2px white;
}
.user-valorant-stats .user-stats-card .basic-user-info .level {
padding: 5px;
background-color: #364966;
text-align: center;
border-radius: 5px;
}
.user-valorant-stats .user-stats-card .userValLastMapName {
background-color: #b78460;
padding: 0px 5px;
border-radius: 5px;
font-weight: bold;
}
.user-valorant-stats .user-stats-card .ranked-stats {
background-color: #364966;
padding: 5px;
border-radius: 5px;
margin: 10px 0px;
}
.user-valorant-stats .user-stats-card .ranked-stats img {
width: 100px;
height: auto;
}
.user-valorant-stats .user-stats-card .player-stats {
background-color: #364966;
padding: 5px;
border-radius: 5px;
display: flex;
justify-content: space-around;
}
.user-valorant-stats .user-stats-card .player-stats .stat-item {
background-color: rgba(0, 0, 0, 0.4);
padding: 0px 10px;
border-radius: 5px;
margin: 10px 5px;
min-width: 80px;
}
.user-valorant-stats .user-stats-card .last-match-data {
background-color: #b78460;
padding: 5px;
margin: 10px 0px;
border-radius: 5px;
}
.user-valorant-stats .user-stats-card .last-match-data img {
width: 100px;
height: auto;
}
.playerList {
text-align: center;
}
.playersTitle {
color: white;
font-family: 'Montserrat', sans-serif;
text-align: center;
font-size: 25px;
margin: 0px 50px;
padding: 10px 0px;
font-weight: bolder;
border: solid 2px white;
margin-bottom: 20px;
}
.playerList .player {
background-color: #ffffff;
padding: 5px 10px;
border-radius: 10px;
margin: 0px 50px;
margin-bottom: 20px;
}
.playerList .noPlayersFound {
background-color: rgb(255, 94, 94);
color: rgb(155, 34, 34);
padding: 4px 8px;
border-radius: 4px;
margin: 0px 50px;
}
.playerList .noServerConnection {
background-color: rgb(255, 166, 49);
color: rgb(46, 46, 46);
padding: 4px 8px;
border-radius: 4px;
margin: 0px 50px;
align-self: center;
}
.playerList .player:nth-child(even) {
background-color: #b6b6b6;
}
.playerList .player .player-name {
font-weight: bolder;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 5px;
}
.playerList .player:nth-child(even) .player-name {
background-color: rgba(255, 255, 255, 0.5);
}
.playerList .player p {
display: flex;
justify-content: space-between;
align-items: center;
}
.playerList .player .playerTags {
float: right;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
align-self: center;
}
.playerList .player .playerTags .playerBattleNet,
.playerList .player .playerTags .playerBattleNet span {
background-color: #00B4FF;
padding: 2px 4px;
color: white;
border-radius: 4px;
}
.playerList .player .playerTags .playerRiotID,
.playerList .player .playerTags .playerRiotID span {
background-color: #fa4454;
padding: 2px 4px;
color: white;
border-radius: 4px;
}
.playerList .player .playerTags .playerNoTags,
.playerList .player .playerTags .playerNoTags span {
background-color: rgba(0, 0, 0, 0.5);
color: lightgray;
padding: 2px 4px;
border-radius: 4px;
}
.playerList .player .playerTags .playerBattleNet,
.playerList .player .playerTags .playerRiotID {
margin-right: 0;
margin-top: 5px;
}
.playerList .player .playerTags img {
height: 15px;
width: auto;
margin: 2px;
vertical-align: middle;
}
/*#endregion accountPage*/
@media (min-width: 550px) {
.playersTitle {
max-width: 500px;
width: 50%;
margin: auto;
margin-bottom: 20px;
}
.playerList .player{
width: 50%;
margin: auto;
max-width: 500px;
margin-bottom: 20px;
}
.playerList .player .playerTags .playerBattleNet,
.playerList .player .playerTags .playerBattleNet span {
margin-right: 5px;
}
.navbar {
all: unset;
display: block;
}
.navbar ul {
flex-direction: row;
direction: ltr;
gap: 20px;
}
.navbar ul a {
font-size: inherit;
color: #13152E;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 20px;
transition: 0.3s ease-in-out;
}
.close-nav,
.menu-bar {
display: none;
}
.btnLogin {
background-color: #13152E;
color: white ;
font-size: 20px;
font-weight: 600;
margin: 0;
padding: 1px 5px;
transform: translateY(-5px);
}
.form-popup {
background-color: rgba(0, 0, 0, 0.6);
}
.form-container {
left: 50%;
}
.form-footer {
all: unset;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-footer .btn {
width: 150px;
transform: none;
}
.games-box {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.tag-input {
flex: 0 0 100%;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.tag-input p {
flex: 0 0 120px;
margin: 0;
}
.tag-input input {
width: 200px;
}
.user-stats-cards {
display: flex;
}
}
/*#endregion NAVBAR*/
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment