Hugyouu/Letterboxd-Diary-Posters-Picker
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

update style and setup gh-pages

Browse Source
This commit is contained in:
Hugo Pierret
2024-10-20 00:42:23 +02:00
parent 129fcb672c
commit ba881b1637
14 changed files with 1455 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/styles/App.css → src/styles/App.scss
View File

@@ -1,3 +1,8 @@
@use "./scss/uploadDiary";
@use "./scss/posterSelector";
@use "./scss/posterGallery";
@use "./scss/cart";
.App {
text-align: center;
}

1
src/styles/index.css
View File

@@ -16,6 +16,7 @@ code {
:root {
--background: #fff;
--bgComp: #1c1f23;
--foreground: #2c3e50;
--primary: #1caff2;
--secondary: #000;

166
src/styles/scss/_cart.scss Normal file
View File

@@ -0,0 +1,166 @@
// Variables
$primary-color: #00a346;
$secondary-color: #3498db;
$background-dark: #2c3e50;
$background-light: #34495e;
$text-white: #ecf0f1;
$text-muted: #95a5a6;
$hover-scale: 1.05;
$gap-spacing: 1rem;
.cart-container {
margin-top: 2rem;
margin-bottom: 4rem;
display: flex;
gap: $gap-spacing;
.poster-list {
flex: 2;
margin-right: 2rem;
max-height: calc(100vh - 200px);
overflow-y: auto;
.cart-title {
color: $text-white;
margin-bottom: 1rem;
font-size: 2rem;
font-weight: 400;
}
.poster-card {
display: flex;
margin-bottom: 1rem;
background-color: $background-dark;
border-radius: 4px;
overflow: hidden;
.poster-media {
width: 120px;
height: 180px;
object-fit: cover;
border-radius: 4px 0 0 4px;
}
.poster-content {
flex-grow: 1;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
.poster-title {
color: $text-white;
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.poster-id {
color: $text-muted;
font-size: 1rem;
margin-bottom: 1rem;
}
.poster-actions {
display: flex;
justify-content: space-between;
gap: 0.5rem;
.action-button {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 4px;
background-color: transparent;
border: 1px solid $text-muted;
color: $text-white;
transition: background-color 0.3s ease;
&:hover {
background-color: $background-light;
cursor: pointer;
}
&:not(:last-child) {
margin-right: 0.5rem;
}
}
}
}
}
}
.action-panel {
flex: 1;
position: sticky;
top: 2rem;
height: fit-content;
padding: 1.5rem;
background-color: $background-light;
border-radius: 8px;
.action-title {
color: $text-white;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.form-control {
width: 100%;
margin-bottom: 1.5rem;
color: $text-white;
select {
background-color: $background-dark;
color: $text-white;
padding: 0.5rem;
border: 1px solid $text-muted;
border-radius: 4px;
}
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
.primary-button,
.secondary-button {
width: 100%;
padding: 0.75rem;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: bold;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
&.primary-button {
background-color: $primary-color;
color: $text-white;
&:hover {
background-color: darken($primary-color, 10%);
}
&:disabled {
background-color: darken($primary-color, 20%);
cursor: not-allowed;
}
}
&.secondary-button {
background-color: $secondary-color;
color: $text-white;
&:hover {
background-color: darken($secondary-color, 10%);
}
}
}
}
}
}

70
src/styles/scss/_posterGallery.scss Normal file
View File

@@ -0,0 +1,70 @@
// Variables
$primary-color: #00a346;
$background-dark: #1c1f23;
$text-white: #ffffff;
$hover-scale: 1.05;
$loading-height: 50vh;
.poster-gallery {
margin-top: 2rem;
margin-bottom: 2rem;
.content-paper {
padding: 1.5rem;
border-radius: 4px;
background-color: $background-dark;
}
.title {
color: $text-white;
margin-bottom: 1.5rem;
font-size: 2rem;
font-weight: 400;
}
.poster-card {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
background-color: transparent;
box-shadow: none;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
transform: scale($hover-scale);
}
&.selected-poster {
border: 4px solid $primary-color;
border-radius: 4px;
}
.poster-image {
padding-top: 150%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 4px;
transition: transform 0.3s ease-in-out;
}
.check-icon {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background-color: $primary-color;
color: $text-white;
border-radius: 50%;
padding: 0.25rem;
}
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: $loading-height;
}
}

192
src/styles/scss/_posterSelector.scss Normal file
View File

@@ -0,0 +1,192 @@
// Variables
$primary-color: #00a346;
$secondary-color: #667788;
$background-dark: #1c1f23;
$text-white: #ffffff;
$text-gray: #667788;
$border-color: #667788;
$hover-color: rgba(102, 119, 136, 0.2);
.poster-selector {
padding: 0 2rem;
max-width: 100% !important; // Override MUI Container
margin: 2rem auto 4rem !important;
.content-paper {
padding: 1.5rem;
border-radius: 4px;
background-color: $background-dark !important;
}
.title {
margin-bottom: 1.5rem;
color: $text-white;
}
.username {
color: $primary-color;
margin-bottom: 1rem;
}
.movies-list {
max-height: 800px;
min-height: 900px;
padding: 0;
}
.movie-item {
margin-bottom: 1rem;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
&:hover {
background-color: $hover-color;
}
&:not(:last-child) {
border-bottom: 1px solid $border-color;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
// Override MUI ListItem styles
&.MuiListItem-root {
padding: 0.5rem !important;
}
.MuiGrid-container {
display: flex;
justify-content: space-between;
width: 100%;
}
.movie-poster {
width: 50px;
height: 75px;
object-fit: cover;
margin-right: 1rem;
border-radius: 4px;
}
.movie-info {
flex-grow: 1;
max-width: calc(100% - 110px);
}
.movie-title {
color: $text-white;
font-family: "TiemposTextWeb-Semibold, Georgia, serif";
font-size: 1.38461538rem;
font-weight: 400;
transition: color 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: $primary-color;
}
}
.movie-year {
color: $text-gray;
}
.watched-date {
color: $text-gray;
}
.watched-day {
font-size: 2rem;
line-height: 1;
margin-bottom: 0.25rem;
}
.watched-month {
font-size: 0.875rem;
}
}
.pagination-container {
display: flex;
justify-content: center;
margin-top: 1.5rem;
// Override MUI Pagination styles
.MuiPagination-root {
.MuiPaginationItem-root {
color: $text-white;
&.Mui-selected {
background-color: $secondary-color;
}
}
}
}
.progress-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 200px;
.MuiLinearProgress-root {
width: 100%;
margin-bottom: 1rem;
}
}
.progress-label {
margin-top: 1rem;
color: $text-white;
}
.no-movies-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 400px;
}
.gif-container {
display: flex;
justify-content: center;
position: relative;
width: 200px;
height: 200px;
margin-bottom: 1rem;
}
.circle-background {
position: absolute;
width: 120%;
height: 120%;
border-radius: 50%;
background-color: $text-white;
clip-path: inset(0 0 25% 0);
bottom: -28%;
}
.reaction-gif {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
}
.back-button {
margin-top: 1rem;
background-color: $primary-color !important;
color: $text-white !important;
transition: background-color 0.3s ease;
&:hover {
background-color: darken($primary-color, 10%) !important;
}
}
}

112
src/styles/scss/_uploadDiary.scss Normal file
View File

@@ -0,0 +1,112 @@
.upload-diary {
padding: 3rem;
background-color: #14181c;
min-height: 100vh;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
.upload-card {
width: 100%;
max-width: 600px;
background-color: #1c1f23;
border-radius: 4px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
padding: 2rem;
.title {
margin-bottom: 1.5rem;
font-weight: bold;
color: #ffffff;
}
.username-field {
margin-bottom: 1.5rem;
.MuiOutlinedInput-root {
color: #ffffff;
fieldset {
border-color: #00a346 !important;
}
&:hover fieldset {
border-color: #00a346 !important;
}
&.Mui-focused fieldset {
border-color: #1caff2 !important;
}
}
.MuiInputLabel-root {
color: #ffffff !important;
}
}
.or-text {
color: #ffffff;
margin-bottom: 1rem;
}
.dropzone {
border: 2px dashed #00a346;
border-radius: 4px;
padding: 2rem;
text-align: center;
cursor: pointer;
&:hover {
background-color: #1f252a;
}
.dropzone-icon {
margin-bottom: 1rem;
color: #00a346;
font-size: 4rem;
}
.dropzone-text {
margin-bottom: 1rem;
color: #ffffff;
}
}
.progress-container {
margin-top: 1rem;
}
.submit-button {
color: #fff;
font-size: 0.8rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 2.8rem;
display: inline-block;
cursor: pointer;
padding: 0 1rem;
border: 0;
border-radius: 4px;
outline: none;
background: #526e89;
transition: background-color 0.3s ease;
&:hover {
background-color: #1caff2;
}
&:disabled {
opacity: 0.7;
cursor: not-allowed;
}
}
}
.overview-text {
color: #456;
margin-top: 2rem;
padding: 1.5rem;
}
}