rss-reader/static/css/style.css

247 lines
4.5 KiB
CSS
Raw Normal View History

2025-02-03 00:26:59 -08:00
@import 'root.css';
2025-02-05 03:26:05 -08:00
@import 'components/layout.css';
@import 'components/sidebar.css';
@import 'components/topbar.css';
@import 'components/forms.css';
@import 'components/modal.css';
@import 'components/feed-entries.css';
@import 'components/dropdown.css';
2025-02-01 00:39:16 -08:00
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: var(--dark-bg);
color: var(--text-color);
}
2025-02-01 16:53:58 -08:00
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
background-color: var(--dark-bg);
}
.login-form {
background-color: var(--sidebar-bg);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 400px;
}
.login-form h1 {
color: var(--primary-red);
text-align: center;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-color);
}
.form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--text-muted);
border-radius: 4px;
background-color: var(--dark-bg);
color: var(--text-color);
font-size: 1rem;
}
.form-group input:focus {
outline: none;
border-color: var(--primary-red);
}
.login-form button {
width: 100%;
padding: 0.75rem;
background-color: var(--primary-red);
color: var(--text-color);
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: opacity 0.2s ease;
}
.login-form button:hover {
opacity: 0.9;
2025-02-02 01:25:18 -08:00
}
2025-02-05 03:59:07 -08:00
.setup-container {
2025-02-03 00:36:23 -08:00
display: flex;
2025-02-05 03:59:07 -08:00
justify-content: center;
2025-02-03 00:36:23 -08:00
align-items: center;
2025-02-05 03:59:07 -08:00
min-height: 100vh;
width: 100%;
background-color: var(--dark-bg);
2025-02-02 20:44:00 -08:00
}
.setup-container h1 {
2025-02-05 03:59:07 -08:00
color: var(--primary-red);
2025-02-02 20:44:00 -08:00
text-align: center;
2025-02-05 03:59:07 -08:00
margin-bottom: 1.5rem;
2025-02-02 20:44:00 -08:00
}
.setup-container p {
2025-02-05 03:59:07 -08:00
line-height: 1.6;
2025-02-02 20:44:00 -08:00
color: var(--text-muted);
2025-02-05 03:59:07 -08:00
margin-bottom: 1.5em;
2025-02-02 20:44:00 -08:00
}
.setup-form {
2025-02-05 03:59:07 -08:00
background-color: var(--sidebar-bg);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
2025-02-02 20:44:00 -08:00
}
.setup-form .form-group {
2025-02-05 03:59:07 -08:00
margin-bottom: 1.5rem;
max-width: 400px;
2025-02-02 20:44:00 -08:00
}
.setup-form label {
color: var(--text-color);
}
.setup-form input {
2025-02-05 03:59:07 -08:00
width: 100%;
padding: 0.75rem;
border: 1px solid var(--text-muted);
2025-02-02 20:44:00 -08:00
border-radius: 4px;
2025-02-05 03:59:07 -08:00
background-color: var(--dark-bg);
2025-02-02 20:44:00 -08:00
}
.setup-form input:focus {
outline: none;
2025-02-02 20:50:36 -08:00
border-color: var(--primary-red);
box-shadow: 0 0 0 2px rgba(244, 63, 63, 0.2);
}
.setup-form input:hover {
2025-02-05 03:59:07 -08:00
border-color: var(--primary-red);
2025-02-02 20:44:00 -08:00
}
.setup-form button {
2025-02-05 03:59:07 -08:00
width: 100%;
padding: 0.75rem;
background-color: var(--primary-red);
2025-02-02 20:50:36 -08:00
color: var(--text-color);
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
2025-02-05 03:59:07 -08:00
transition: all 0.2s ease;
margin-top: 1rem;
2025-02-02 20:50:36 -08:00
}
.setup-form button:hover {
2025-02-05 03:59:07 -08:00
background-color: #d63030;
2025-02-02 20:50:36 -08:00
}
.setup-form button:active {
2025-02-05 03:59:07 -08:00
transform: translateY(1px);
2025-02-02 20:50:36 -08:00
}
.setup-form button:disabled {
background-color: #666;
cursor: not-allowed;
}
2025-02-03 15:53:08 -08:00
.demo-notice {
2025-02-05 03:59:07 -08:00
background-color: var(--sidebar-bg);
2025-02-03 15:53:08 -08:00
padding: 1rem;
2025-02-05 03:59:07 -08:00
border-radius: 8px;
margin-top: 2rem;
2025-02-03 15:53:08 -08:00
}
.demo-notice p {
2025-02-05 03:59:07 -08:00
margin: 0 0 1rem 0;
2025-02-03 15:53:08 -08:00
}
.demo-notice pre {
2025-02-05 03:59:07 -08:00
background-color: var(--dark-bg);
border-radius: 4px;
overflow-x: auto;
2025-02-03 17:50:14 -08:00
}
/* User menu styles */
.user-menu {
position: relative;
2025-02-05 03:08:14 -08:00
grid-column: 3;
justify-self: end;
2025-02-03 17:50:14 -08:00
}
.user-menu-button {
background: none;
border: none;
color: var(--text-color);
padding: 0.5rem;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
transition: opacity 0.2s ease;
}
.user-menu-button:hover {
opacity: 0.8;
}
.user-menu-icon {
font-size: 1.4rem;
}
.user-menu-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: var(--sidebar-bg);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
min-width: 150px;
display: none;
z-index: 1000;
}
.user-menu-dropdown.show {
display: block;
}
.user-menu-item {
display: block;
width: 100%;
padding: 0.75rem 1rem;
text-align: left;
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
transition: background-color 0.2s ease;
}
.user-menu-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.user-menu-item#logoutButton {
color: var(--primary-red);
}
.user-menu-item#logoutButton:hover {
background-color: rgba(244, 63, 63, 0.1);
2025-02-02 14:13:02 -08:00
}