pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 06:11:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add styles for browse menu and button functionality

Browse Source 
Remove browse menu and button styles from tailwind.css and move them to input.css.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/oDeWG1n
This commit is contained in:
pac7
2025-09-22 03:11:46 +00:00
parent 1511fcfcfe
commit 0331e2087a
3 changed files with 0 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@@ -62,10 +62,6 @@ externalPort = 3000
localPort = 45245
externalPort = 3001
[[ports]]
localPort = 45563
externalPort = 3002
[deployment]
deploymentTarget = "autoscale"
run = [

194
static/css/src/input.css
View File

@@ -430,197 +430,3 @@
opacity: 1;
}
}
/* Browse Menu Dropdown Styles */
.browse-dropdown {
position: absolute;
left: 0;
margin-top: 0.25rem;
width: auto;
max-width: 56rem; /* max-w-4xl */
padding: 1.5rem;
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
z-index: 50;
animation: dropdownFadeIn 0.15s ease-out;
}
.browse-dropdown-content {
display: flex;
gap: 2rem; /* gap-8 */
}
.browse-column {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem; /* space-y-4 */
}
.browse-menu-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 0.375rem;
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
cursor: pointer;
}
.browse-menu-item:hover {
background-color: #f9fafb;
transform: translateY(-1px);
}
.browse-menu-item-icon {
width: 1rem;
height: 1rem;
margin-top: 0.125rem;
color: #6b7280;
flex-shrink: 0;
transition: color 0.2s ease;
}
.browse-menu-item:hover .browse-menu-item-icon {
color: #374151;
}
.browse-menu-item-content {
min-width: 0;
flex: 1;
}
.browse-menu-item-title {
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.25rem;
line-height: 1.25;
color: #111827;
}
.browse-menu-item-description {
font-size: 0.75rem;
color: #6b7280;
line-height: 1.5;
}
/* Browse Button Styles */
.browse-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.375rem;
color: #374151;
background: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.browse-button:hover {
background-color: #f3f4f6;
}
.browse-button-icon {
width: 1rem;
height: 1rem;
}
.browse-chevron {
width: 0.75rem;
height: 0.75rem;
transition: transform 0.2s ease;
}
.browse-chevron.rotate {
transform: rotate(180deg);
}
/* Dropdown Animations */
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-0.5rem);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes dropdownFadeOut {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.95) translateY(-0.5rem);
}
}
/* Dark Mode Browse Menu Styles */
@media (prefers-color-scheme: dark) {
.browse-dropdown {
background-color: #1f2937;
border-color: #374151;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.browse-menu-item:hover {
background-color: #374151;
}
.browse-menu-item-icon {
color: #9ca3af;
}
.browse-menu-item:hover .browse-menu-item-icon {
color: #e5e7eb;
}
.browse-menu-item-title {
color: #f9fafb;
}
.browse-menu-item-description {
color: #9ca3af;
}
.browse-button {
color: #e5e7eb;
}
.browse-button:hover {
background-color: #374151;
}
}
/* Responsive Browse Menu */
@media (max-width: 640px) {
.browse-dropdown {
position: fixed;
left: 1rem;
right: 1rem;
top: 4rem;
width: auto;
max-width: none;
}
.browse-dropdown-content {
flex-direction: column;
gap: 1rem;
}
.browse-column {
gap: 0.5rem;
}
}

161
static/css/tailwind.css
View File

@@ -5043,167 +5043,6 @@
opacity: 1;
}
}
.browse-dropdown {
position: absolute;
left: 0;
margin-top: 0.25rem;
width: auto;
max-width: 56rem;
padding: 1.5rem;
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
z-index: 50;
animation: dropdownFadeIn 0.15s ease-out;
}
.browse-dropdown-content {
display: flex;
gap: 2rem;
}
.browse-column {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.browse-menu-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 0.375rem;
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
cursor: pointer;
}
.browse-menu-item:hover {
background-color: #f9fafb;
transform: translateY(-1px);
}
.browse-menu-item-icon {
width: 1rem;
height: 1rem;
margin-top: 0.125rem;
color: #6b7280;
flex-shrink: 0;
transition: color 0.2s ease;
}
.browse-menu-item:hover .browse-menu-item-icon {
color: #374151;
}
.browse-menu-item-content {
min-width: 0;
flex: 1;
}
.browse-menu-item-title {
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.25rem;
line-height: 1.25;
color: #111827;
}
.browse-menu-item-description {
font-size: 0.75rem;
color: #6b7280;
line-height: 1.5;
}
.browse-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.375rem;
color: #374151;
background: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.browse-button:hover {
background-color: #f3f4f6;
}
.browse-button-icon {
width: 1rem;
height: 1rem;
}
.browse-chevron {
width: 0.75rem;
height: 0.75rem;
transition: transform 0.2s ease;
}
.browse-chevron.rotate {
transform: rotate(180deg);
}
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-0.5rem);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes dropdownFadeOut {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.95) translateY(-0.5rem);
}
}
@media (prefers-color-scheme: dark) {
.browse-dropdown {
background-color: #1f2937;
border-color: #374151;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.browse-menu-item:hover {
background-color: #374151;
}
.browse-menu-item-icon {
color: #9ca3af;
}
.browse-menu-item:hover .browse-menu-item-icon {
color: #e5e7eb;
}
.browse-menu-item-title {
color: #f9fafb;
}
.browse-menu-item-description {
color: #9ca3af;
}
.browse-button {
color: #e5e7eb;
}
.browse-button:hover {
background-color: #374151;
}
}
@media (max-width: 640px) {
.browse-dropdown {
position: fixed;
left: 1rem;
right: 1rem;
top: 4rem;
width: auto;
max-width: none;
}
.browse-dropdown-content {
flex-direction: column;
gap: 1rem;
}
.browse-column {
gap: 0.5rem;
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;