init
This commit is contained in:
270
animex/Resources/old/styles.css
Normal file
270
animex/Resources/old/styles.css
Normal file
@@ -0,0 +1,270 @@
|
||||
/* body, #app-wrapper, #desktop-message, @media (max-width: 420px) rules remain the same as your previous version */
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #e0e0e0; /* A light grey for desktop background */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: Verdana, sans-serif;
|
||||
}
|
||||
|
||||
#app-wrapper {
|
||||
width: 402px; /* Design reference width */
|
||||
height: 874px; /* Design reference height */
|
||||
position: relative;
|
||||
background: white;
|
||||
overflow: hidden; /* Crucial to contain absolutely positioned children */
|
||||
display: none; /* Hidden by default, shown via media query for mobile */
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.2); /* Optional: for better visual separation if shown on desktop */
|
||||
}
|
||||
|
||||
/* --- Desktop Message --- */
|
||||
#desktop-message {
|
||||
display: flex; /* Shown by default on desktop/larger screens */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100vh; /* Can be min-height: 100vh as well */
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* --- Styles for elements INSIDE #app-wrapper --- */
|
||||
/* --- Explore Tab Backing --- */
|
||||
.explore-backing {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 299px;
|
||||
width: 100%;
|
||||
background: #36362F;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* --- Explore Title --- */
|
||||
.explore-title {
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 15px;
|
||||
color: white;
|
||||
font-size: 24px; /* Slightly reduced for potentially longer text */
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
word-wrap: break-word;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* --- Scrollable List --- */
|
||||
#scrollable-list-content {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.loading-message, .error-message, .info-message {
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* --- List Items --- */
|
||||
.list-item-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80px; /* Increased height slightly for better spacing */
|
||||
margin-bottom: 12px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(255, 255, 255, 0.05); /* Subtle background for items */
|
||||
border-radius: 8px;
|
||||
}
|
||||
.list-item-wrapper:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --- Helper Classes --- */
|
||||
.app-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.flex-center-col {
|
||||
justify-content: center; /* Vertically center text in its given height */
|
||||
align-items: flex-start; /* Align text to the start horizontally */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* --- Image Adjustments --- */
|
||||
img {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Bottom Navigation Bar --- */
|
||||
.bottom-tabbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: #22221C;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* --- Header and Featured Content Specific Styles --- */
|
||||
.header-main-image {
|
||||
width: 540px;
|
||||
height: 409px;
|
||||
box-shadow: 1.6px 1.6px 1.6px rgba(0,0,0,0.1);
|
||||
filter: blur(1.5px) brightness(0.7); /* Adjusted for better text visibility */
|
||||
}
|
||||
|
||||
.featured-poster-img {
|
||||
width: 126px;
|
||||
height: 193px;
|
||||
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.featured-small-text {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-family: Verdana;
|
||||
font-weight: 600;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.featured-title-text { /* New class for the featured title div */
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3; /* Limit to 3 lines */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.featured-button-background {
|
||||
width: 160px;
|
||||
height: 21px;
|
||||
background: rgba(54, 54, 47, 0.8); /* Darker, slightly transparent */
|
||||
border-radius: 81px;
|
||||
}
|
||||
.featured-button-icon-svg-wrapper {
|
||||
/* Positioned by inline styles */
|
||||
}
|
||||
|
||||
|
||||
/* List Item Specific Styles (Updated for CSS backgrounds) */
|
||||
.li-thumb-container {
|
||||
/* No explicit background needed if img fills it */
|
||||
width: 58px; /* Ensure container size matches image */
|
||||
height: 64px;
|
||||
/* left: 10px; top: 5px; (from JS) */
|
||||
}
|
||||
.li-thumb-img {
|
||||
width:58px;
|
||||
height:64px;
|
||||
border-radius:9px; /* Rounded corners for the manga cover */
|
||||
}
|
||||
.li-main-title-text {
|
||||
/* top: 8px; left: 85px; (from JS) */
|
||||
color: white;
|
||||
font-size: 16px; /* Adjusted for better fit */
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
max-height: 38px; /* Approx 2 lines */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* width: calc(100% - 125px); (from JS - to prevent overlap with arrow) */
|
||||
display: -webkit-box; /* For multi-line ellipsis */
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.li-rating-badge-bg, .li-chapters-badge-bg { /* Combined for similar styling */
|
||||
height: 22px; /* Adjusted height */
|
||||
background: #22221C; /* Dark background for badges */
|
||||
border-radius: 11px; /* Rounded corners */
|
||||
/* top: 48px; (from JS) */
|
||||
}
|
||||
.li-rating-badge-bg {
|
||||
width: 85px; /* Fixed width for rating */
|
||||
/* left: 85px; (from JS) */
|
||||
}
|
||||
.li-chapters-badge-bg {
|
||||
min-width: 55px; /* Min width, can grow */
|
||||
padding: 0 8px; /* Padding for dynamic width */
|
||||
/* left: 180px; (from JS) */
|
||||
}
|
||||
|
||||
.li-badge-text {
|
||||
/* height: 19px; (Not strictly needed with flex centering) */
|
||||
/* top: 51px; (from JS, vertically align with badge bg) */
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 11px; /* Adjusted for badge size */
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
line-height: 22px; /* Match badge height for vertical center */
|
||||
white-space: nowrap;
|
||||
/* width and left are set in JS or specific badge bg above */
|
||||
}
|
||||
.li-rating-text-spacing {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.li-arrow-icon-wrapper {
|
||||
/* top: 24px; right: 15px; (from JS) */
|
||||
}
|
||||
|
||||
/* Bottom Tab Bar Specific Styles */
|
||||
.tab-icon-svg-wrapper {
|
||||
/* Positioned via inline styles (top, left) */
|
||||
}
|
||||
.tab-label-text {
|
||||
top: 66px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
/* --- Mobile View Overrides & Enhancements --- */
|
||||
@media (max-width: 420px) {
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#app-wrapper {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#desktop-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.explore-backing {
|
||||
bottom: 98px;
|
||||
}
|
||||
|
||||
#scrollable-list-content {
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user