e0b8f34770
This commit addresses the issue of improper dark mode implementation. The background of all pages and form elements in dark mode were previously displayed in white, which has now been corrected. The background for input and textarea elements is set to a darker shade in dark mode, ensuring consistency with the overall theme. Additionally, the toggle button for switching themes has been redesigned to resemble iPhone-style toggles, replacing the previous square button. This enhances the user interface and provides a more intuitive experience when toggling between light and dark modes. Fixes #FLAS-3
214 lines
3 KiB
CSS
214 lines
3 KiB
CSS
html {
|
|
font-family: 'Roboto', sans-serif;
|
|
background: #FEFAE0;
|
|
padding: 1rem;
|
|
}
|
|
|
|
body {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Roboto', sans-serif;
|
|
color: #377ba8;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
a {
|
|
color: #377ba8;
|
|
text-decoration: none;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid #E0E5B6;
|
|
}
|
|
|
|
nav {
|
|
background: #CCD5AE;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
nav h1 {
|
|
flex: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
nav h1 a {
|
|
text-decoration: none;
|
|
padding: 0.25rem 0.5rem;
|
|
color: #377ba8;
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav ul li a, nav ul li span, header .action {
|
|
display: block;
|
|
padding: 0.5rem;
|
|
color: #377ba8;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 1rem 1rem;
|
|
}
|
|
|
|
.content > header {
|
|
border-bottom: 1px solid #E0E5B6;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.content > header h1 {
|
|
flex: auto;
|
|
margin: 1rem 0 0.25rem 0;
|
|
}
|
|
|
|
.flash {
|
|
margin: 1em 0;
|
|
padding: 1em;
|
|
background: #FAEDCE;
|
|
border: 1px solid #377ba8;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.post > header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.post > header > div:first-of-type {
|
|
flex: auto;
|
|
}
|
|
|
|
.post > header h1 {
|
|
font-size: 1.5em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post .about {
|
|
color: slategray;
|
|
font-style: italic;
|
|
}
|
|
|
|
.post .body {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.content:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.content form {
|
|
margin: 1em 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content label {
|
|
font-weight: bold;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.content input, .content textarea {
|
|
margin-bottom: 1em;
|
|
background: #f5f5f5;
|
|
border: 1px solid #ccc;
|
|
padding: 0.5em;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.content textarea {
|
|
min-height: 12em;
|
|
resize: vertical;
|
|
}
|
|
|
|
input.danger {
|
|
color: #cc2f2e;
|
|
}
|
|
|
|
input[type=submit] {
|
|
align-self: start;
|
|
min-width: 10em;
|
|
background-color: #377ba8;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
input[type=submit]:hover {
|
|
background-color: #2c5f8a;
|
|
}
|
|
|
|
#theme-toggle {
|
|
position: relative;
|
|
width: 50px;
|
|
height: 25px;
|
|
background: #ccc;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
#theme-toggle:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 21px;
|
|
height: 21px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
body.dark-mode #theme-toggle {
|
|
background: #4d4d4d;
|
|
}
|
|
|
|
body.dark-mode #theme-toggle:before {
|
|
transform: translateX(25px);
|
|
}
|
|
|
|
body.dark-mode {
|
|
background: #121212;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
body.dark-mode a {
|
|
color: #bb86fc;
|
|
}
|
|
|
|
body.dark-mode nav {
|
|
background: #333;
|
|
}
|
|
|
|
body.dark-mode .flash {
|
|
background: #333;
|
|
border-color: #bb86fc;
|
|
}
|
|
|
|
body.dark-mode .post .about {
|
|
color: #999;
|
|
}
|
|
|
|
body.dark-mode .content input,
|
|
body.dark-mode .content textarea {
|
|
background: #333;
|
|
color: #e0e0e0;
|
|
border: 1px solid #555;
|
|
}
|