Gnarwhal/achievements_project
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

A heckin ton. Mostly hackish

Browse source
This commit is contained in:
Gnarwhal 2021-02-16 14:11:12 -05:00
parent 052052d76b
commit b229ff9a15
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
70 changed files with 2226 additions and 881 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/webpage/static/styles/about.css Normal file
View file

@ -0,0 +1,13 @@
#about-page {
max-width: 1600px;
}
#about-text {
margin: 0;
padding: 16px;
font-size: 18px;
color: var(--foreground);
background-color: var(--distinction);
}

426
frontend/webpage/static/styles/common.css Normal file
View file

@ -0,0 +1,426 @@
:root {
--shadow-color: rgba(0, 0, 0, 0.5);
}
html, body {
background-color: var(--background-dark);
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
}
#navbar {
z-index: 1;
position: fixed;
background-color: var(--accent-value2);
color: var(--foreground);
width: 100%;
min-height: 76px;
height: 5%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0px 0px 5px 10px var(--shadow-color);
}
.navbar-section {
width: max-content;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.navbar-item {
box-sizing: border-box;
padding: 0px 20px;
width: max-content;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 24px;
user-select: none;
transition-property: background-color;
transition-duration: 0.15s;
position: relative;
}
.navbar-item:hover {
background-color: var(--accent-value3);
}
.ap-button {
color: var(--foreground);
background-color: var(--accent-value2);
border-radius: 4px;
cursor: default;
display: flex;
justify-content: center;
align-items: center;
transition-property: background-color;
transition-duration: 0.15s;
}
.ap-button:hover {
background-color: var(--accent-value3);
}
.ap-button:active {
background-color: var(--accent-value1);
}
.ap-button.disabled {
background-color: var(--accent-value1);
color: var(--accent-value0);
}
.ap-button.disabled:hover {
background-color: var(--accent-value1);
color: var(--accent-value0);
}
.ap-button.disabled:active {
background-color: var(--accent-value1);
color: var(--accent-value0);
}
#content-body {
position: relative;
top: max(76px, 5%);
width: 100%;
height: calc(100% - max(76px, 5%));
overflow-y: auto;
display: flex;
justify-content: center;
}
.page {
box-sizing: border-box;
padding: 32px;
width: 100%;
height: max-content;
min-height: 100%;
background-color: var(--background);
box-shadow: 0px 0px 5px 10px var(--shadow-color);
}
.page-subsection {
box-sizing: border-box;
margin: 32px;
padding: 16px;
background-color: var(--background-dark);
border-radius: 8px;
box-shadow: inset 0px 0px 8px 8px var(--shadow-color);
}
.page-subsection-wrapper {
padding: 16px;
}
.page-subsection-chunk {
box-shadow: 0px 0px 8px 8px var(--shadow-color);
border-radius: 8px;
overflow: hidden;
}
.page-header {
box-sizing: border-box;
height: max-content;
margin: 16px;
}
.page-subheader {
margin-bottom: 16px;
width: 100%;
}
.page-subheader-flex {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-header-text,
.page-subheader-text {
margin: 0 0 0.25em;
color: var(--foreground);
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
}
.page-header-text.link,
.page-subheader-text.link {
transition-property: color;
transition-duration: 0.15s;
}
.page-header-text.link:hover,
.page-subheader-text.link:hover {
color: var(--accent-value4);
}
.page-header-text {
font-size: 48px;
}
.page-subheader-text,
.page-subheader-icon {
font-size: 32px;
}
.page-subheader-icon {
margin: 0 0 0.25em;
height: 32px;
padding: 0;
}
.page-header-separator,
.page-subheader-separator {
width: 100%;
height: 3px;
background-color: var(--accent-value3);
}
.list-page-search {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.list-page-search > label,
.list-page-search > input {
box-sizing: border-box;
padding: 12px 20px;
color: var(--foreground);
font-size: 24px;
}
.list-page-search > label {
background-color: var(--accent-value2);
}
.list-page-search > label:hover {
background-color: var(--accent-value3);
}
.list-page-search > label:active {
background-color: var(--accent-value1);
transition-property: background-color;
transition-duration: 0.15s;
}
.list-page-search > input {
background-color: var(--distinction);
border: 0;
flex-grow: 1;
outline: none;
transition-property: background-color, color;
transition-duration: 0.075s;
}
.list-page-search > input:focus {
background-color: var(--foreground);
color: var(--background);
}
.list-page-partitions {
box-sizing: border-box;
width: 100%;
height: max-content;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
.list-page-filter-partition {
width: 20%;
max-width: 640px;
}
.list-page-filter-chunk {
background-color: var(--distinction);
width: 100%;
height: 100%;
}
.list-page-filter {
box-sizing: border-box;
width: 100%;
height: max-content;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.list-page-filter-checkbox {
width: 28px;
height: 28px;
background-color: var(--foreground);
border: 3px solid var(--foreground);
border-radius: 8px;
transition-property: background-color, border-color;
transition-duration: 0.15s;
}
.list-page-filter:hover > .list-page-filter-checkbox {
background-color: var(--foreground);
border-color: var(--selected-accent1);
}
.list-page-filter.selected > .list-page-filter-checkbox {
background-color: var(--selected-accent1);
border-color: var(--selected-accent1);
}
.list-page-filter.selected:hover > .list-page-filter-checkbox {
background-color: var(--selected-accent0);
border-color: var(--selected-accent1);
}
.list-page-filter-name {
margin: 0;
padding: 16px;
color: var(--foreground);
font-size: 24px;
user-select: none;
}
.list-page-list-partition {
box-sizing: border-box;
flex-grow: 1;
}
.list-page-list {
border-radius: 8px;
overflow: hidden;
}
.list-page-header {
width: 100%;
height: 64px;
background-color: var(--accent-value2);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: var(--foreground);
font-size: 24px;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-page-entry {
width: 100%;
height: 64px;
background-color: var(--distinction);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: var(--foreground);
font-size: 24px;
}
.list-page-entry-icon {
width: 64px;
height: 64px;
flex-grow: 0;
}
.list-page-entry-text {
box-sizing: border-box;
margin: 0;
padding: 0 12px;
height: 64px;
line-height: 64px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-top: 1px solid var(--background);
}
.list-page-header > .list-page-entry-text {
border: 0;
}

111
frontend/webpage/static/styles/index.css Normal file
View file

@ -0,0 +1,111 @@
#index-page {
max-width: 1600px;
}
#list-page-search-filters {
width: 100%;
height: max-content;
}
#list-page-search-dropdown {
display: flex;
flex-direction: row;
align-items: center;
}
#search-wrapper {
width: 100%;
}
#list-page-search-pair {
flex-grow: 1;
}
#filter-dropdown-wrapper {
box-sizing: border-box;
height: 84px;
width: 84px;
}
#filter-dropdown-stack {
width: 100%;
height: 100%;
position: relative;
}
#filter-dropdown-stack.active {
transform: rotateZ(-90deg);
}
#filter-dropdown-button {
position: absolute;
left: 0;
top: 0;
height: 100%;
display: block;
}
#filter-dropdown-stack:hover > #filter-dropdown-button {
display: none;
}
#filter-dropdown-button-hover {
position: absolute;
left: 0;
top: 0;
height: 100%;
display: none;
}
#filter-dropdown-stack:hover > #filter-dropdown-button-hover {
display: block;
}
#list-page-filters-flex {
display: none;
width: 100%;
height: max-content;
flex-direction: row;
}
#list-page-filters-flex.active {
display: flex;
}
.list-page-filter-section {
box-sizing: border-box;
flex-basis: 0;
flex-grow: 1;
height: 100%;
display: flex;
flex-direction: column;
}
#list-page-filters-background {
background-color: var(--distinction);
}
.list-page-entry-text.achievement-name {
flex-grow: 3;
flex-basis: 0;
}
.list-page-entry-text.achievement-description {
flex-grow: 6;
flex-basis: 0;
}
.list-page-entry-text.achievement-stages {
flex-grow: 1;
flex-basis: 0;
}

127
frontend/webpage/static/styles/login.css Normal file
View file

@ -0,0 +1,127 @@
:root {
--form-spacing: 48px;
--element-spacing: 12px;
--error: #F95959;
}
#login-page {
display: block;
max-width: 1280px;
}
#login-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
#login-subsection {
width: 100%;
}
#login-elements {
display: flex;
flex-direction: column;
align-items: center;
}
#login-header {
box-sizing: border-box;
width: 50%;
height: max-content;
}
#login-form {
box-sizing: border-box;
padding: 24px 0;
width: 50%;
height: max-content;
background-color: var(--distinction);
border-radius: 8px;
}
.form-row {
margin: var(--element-spacing) var(--form-spacing) 0;
border: 0;
padding: 0;
width: calc(100% - var(--form-spacing) * 2);
height: 40px;
}
.form-row.top {
margin-top: 0;
}
.form-row.multiline {
height: max-content;
}
#error-message {
display: none;
line-height: 40px;
color: var(--error);
font-size: 20px;
}
.login-field {
box-sizing: border-box;
padding: 0 var(--element-spacing);
font-size: 18px;
border-radius: 4px;
outline: none;
}
.login-field.error {
background-color: var(--error);
}
.ap-button.login {
height: 40px;
font-size: 18px;
}
#username,
#confirm {
display: none;
}
#button-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#create-user-button,
#guest-login-button {
width: calc(50% - var(--element-spacing) / 2);
}
#login-button {
width: calc(100% - var(--form-spacing * 2))
}
#warning {
color: var(--error);
font-size: 24px;
text-align: center;
line-height: 40px;
}
#warning-message {
margin-top: 0;
color: var(--foreground);
font-size: 18px;
text-align: center;
}

401
frontend/webpage/static/styles/profile.css Normal file
View file

@ -0,0 +1,401 @@
#profile-page {
max-width: 1600px;
}
.profile-list {
width: 100%;
height: max-content;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 0px 8px 8px var(--shadow-color);
}
.profile-entry {
overflow: hidden;
height: 64px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: var(--distinction);
}
.profile-entry-left {
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.profile-entry-right {
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.profile-entry-icon {
width: 64px;
flex-grow: 0;
}
.profile-entry-text {
box-sizing: border-box;
margin: 0;
padding: 0px 16px;
height: 100%;
line-height: 64px;
color: var(--foreground);
font-size: 24px;
border-top: 1px solid var(--background);
flex-basis: max-content;
flex-grow: 0;
}
.top > .profile-entry-text {
border: 0;
}
.profile-entry-text.platform-name {
flex-grow: 1;
}
#profile-section-1 {
box-sizing: border-box;
width: 100%;
height: max-content;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
#profile-info {
width: 50%;
height: max-content;
max-width: 480px;
}
#profile-info-username-text.active,
#profile-info-username-field {
display: none;
}
#profile-info-username-field.active {
display: block;
}
#profile-info-username-field {
margin-right: 8px;
padding: 4px;
font-size: 24px;
color: var(--background);
background-color: var(--foreground);
border-radius: 8px;
border: 0;
outline: none;
}
#profile-info-pfp-border {
box-sizing: border-box;
padding: 24px;
background-color: var(--distinction);
width: 100%;
height: max-content;
box-shadow: 0px 0px 8px 8px var(--shadow-color);
border-radius: 8px;
}
#profile-info-pfp {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
position: relative;
}
#profile-info-pfp-img {
display: block;
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: contain;
background-color: var(--background);
position: absolute;
}
#profile-info-pfp-vignette {
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 30px 10px var(--shadow-color);
border-radius: 8px;
position: absolute;
z-index: 1;
}
#profile-info-pfp-upload,
#profile-info-pfp-upload-hover,
#profile-info-pfp-upload-invalid {
top: 0;
left: 0;
width: 100%;
border-radius: 8px;
background-color: var(--background);
opacity: 0.8;
display: block;
visibility: hidden;
}
#profile-info-pfp-upload {
position: relative;
}
#profile-info-pfp-upload-hover,
#profile-info-pfp-upload-invalid {
position: absolute;
}
#profile-info-pfp #profile-info-pfp-upload.active,
#profile-info-pfp.hover #profile-info-pfp-upload-hover.active,
#profile-info-pfp.invalid #profile-info-pfp-upload-invalid.active {
visibility: visible;
}
#profile-info-pfp.hover #profile-info-pfp-upload.active,
#profile-info-pfp.invalid #profile-info-pfp-upload.active {
visibility: hidden;
}
#profile-stats {
flex-grow: 1;
display: flex;
flex-direction: row;
}
#profile-stats-numeric {
flex-grow: 1;
max-width: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#profile-completion-stack {
width: 100%;
height: max-content;
position: relative;
}
#profile-completion-background {
width: 100%;
display: block;
}
#profile-completion-canvas {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#profile-completion-text {
margin: 0;
width: 100%;
height: 100%;
color: var(--foreground);
font-size: 64px;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
#profile-perfect-text {
margin: 0;
height: 48px;
color: var(--foreground);
font-size: 48px;
line-height: 48px;
text-align: center;
}
#profile-section-2 {
box-sizing: border-box;
width: 100%;
height: max-content;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
#profile-hardest {
flex-grow: 1;
height: 100%;
}
#profile-platforms {
flex-grow: 1;
max-width: 480px;
}
#profile-platforms .profile-entry {
display: none;
}
#profile-platforms .profile-entry-text {
color: var(--foreground);
}
#profile-platforms .profile-entry.connected,
#profile-platforms .profile-entry.editing {
display: flex;
}
#profile-page .profile-edit-stack,
#profile-page .profile-save-stack {
display: none;
}
#profile-page.self .profile-edit-stack,
#profile-page.self .profile-save-stack.active {
display: block;
width: max-content;
height: max-content;
}
#profile-page.self .profile-edit-stack.active,
#profile-page.self .profile-save-stack {
display: none;
}
.profile-edit-stack:hover > .profile-edit-hover,
.profile-edit {
display: block;
}
.profile-edit-stack:hover > .profile-edit,
.profile-edit-hover {
display: none;
}
.profile-save-stack:hover > .profile-save-hover,
.profile-save {
display: block;
}
.profile-save-stack:hover > .profile-save,
.profile-save-hover {
display: none;
}
.profile-entry .platform-remove-stack,
.profile-entry .platform-add,
.profile-entry .platform-unsupported,
.profile-entry.connected.editing .platform-add {
border-top: 1px solid var(--background);
display: none;
}
.profile-entry.connected.editing .platform-remove-stack {
box-sizing: border-box;
display: block;
height: 100%;
width: max-content;
flex-grow: 0;
}
.platform-remove, .platform-remove-hover {
box-sizing: border-box;
padding: 12px;
height: 100%;
}
.profile-entry.connected.editing .platform-remove-stack .platform-remove,
.profile-entry.connected.editing .platform-remove-stack:hover .platform-remove-hover {
display: block;
}
.profile-entry.connected.editing .platform-remove-stack:hover .platform-remove,
.profile-entry.connected.editing .platform-remove-stack .platform-remove-hover {
display: none;
}
.profile-entry .platform-add {
box-sizing: border-box;
height: 100%;
padding: 16px 8px;
}
.profile-entry.editing .platform-add {
display: block;
}
.profile-entry.editing .platform-unsupported {
box-sizing: border-box;
display: block;
margin: 0;
padding: 0% 2%;
line-height: 63px;
font-size: 24px;
color: var(--foreground-disabled);
}
#profile-ratings {
flex-grow: 1;
}

21
frontend/webpage/static/styles/theme.css Normal file
View file

@ -0,0 +1,21 @@
:root {
--background-dark: #111117;
--background: #22222A;
--foreground-disabled: #77777D;
--foreground-dark: #AAAAAA;
--foreground: #EEEEEE;
--distinction: #44444C;
--accent-hue: 0;
--accent-value0: hsl(var(--accent-hue), 100%, 16%);
--accent-value1: hsl(var(--accent-hue), 100%, 25%);
--accent-value2: hsl(var(--accent-hue), 100%, 31%);
--accent-value3: hsl(var(--accent-hue), 73%, 47%);
--accent-value4: hsl(var(--accent-hue), 83%, 57%);
--accent-value5: hsl(var(--accent-hue), 93%, 72%);
--accent-pure: hsl(var(--accent-hue), 100%, 50%);
--selected-accent0: #2266CC;
--selected-accent1: #3388FF;
}