mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 08:23:45 +08:00
9a5cc3c012
A little fairy dust sprinkle | BC | AC | |--------|--------| | <img width="718" height="1546" alt="CleanShot 2025-09-25 at 20 39 23@2x" src="https://github.com/user-attachments/assets/db98e434-effb-41a5-98da-8d66e41a710c" /> | <img width="732" height="1550" alt="CleanShot 2025-09-25 at 20 36 49@2x" src="https://github.com/user-attachments/assets/42543c25-7ac8-4f70-9f4f-737e8d675a68" /> | | <img width="2496" height="1698" alt="CleanShot 2025-09-25 at 20 39 13@2x" src="https://github.com/user-attachments/assets/1ded9617-3ee9-435e-b4d2-8f8835186a45" /> | <img width="2450" height="1702" alt="CleanShot 2025-09-25 at 20 43 02@2x" src="https://github.com/user-attachments/assets/f2ae2f36-b474-43f1-a0bc-3efd40b34d39" /> |
156 lines
2.7 KiB
SCSS
Vendored
156 lines
2.7 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
// Page not found styles
|
|
html:has(.not-found-container) {
|
|
background-color: var(--d-content-background) !important;
|
|
}
|
|
|
|
#main-outlet.not-found-container {
|
|
background: var(--d-content-background);
|
|
padding-top: var(--space-8);
|
|
}
|
|
|
|
.page-not-found {
|
|
margin: 0 0 40px 0;
|
|
|
|
.heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-8);
|
|
|
|
@include viewport.until(sm) {
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
}
|
|
|
|
.title_wrapper {
|
|
text-align: center;
|
|
}
|
|
|
|
h1.title {
|
|
font-size: var(--font-up-4);
|
|
line-height: var(--line-height-medium);
|
|
text-align: center;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.btn.--home {
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.illustration-not-found {
|
|
text-align: center;
|
|
|
|
svg {
|
|
width: clamp(150px, 20vw, 200px);
|
|
}
|
|
}
|
|
|
|
&-search {
|
|
margin-top: 20px;
|
|
background: var(--tertiary-very-low);
|
|
border-radius: var(--d-border-radius-large);
|
|
padding: var(--space-8) var(--space-8) var(--space-10);
|
|
|
|
@include viewport.until(sm) {
|
|
margin-top: var(--space-8);
|
|
padding: var(--space-6) var(--space-6) var(--space-8);
|
|
}
|
|
|
|
label {
|
|
color: var(--primary);
|
|
font-size: var(--font-up-3);
|
|
flex-basis: 100%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.search-input {
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
margin-bottom: 0;
|
|
padding-right: 2.5rem;
|
|
|
|
&__wrapper {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&__icon {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
gap: var(--space-6);
|
|
max-width: 600px;
|
|
box-sizing: border-box;
|
|
flex-wrap: wrap;
|
|
margin-inline: auto;
|
|
|
|
@include viewport.until(sm) {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-not-found-topics {
|
|
display: flex;
|
|
justify-content: center;
|
|
column-gap: var(--space-10);
|
|
|
|
@include viewport.until(sm) {
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
}
|
|
|
|
.popular-topics,
|
|
.recent-topics {
|
|
box-sizing: border-box;
|
|
flex-basis: 50%;
|
|
max-width: 400px;
|
|
margin-bottom: 40px;
|
|
border-radius: var(--d-border-radius-large);
|
|
padding: var(--space-4);
|
|
|
|
@include viewport.until(sm) {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: var(--space-4);
|
|
padding-bottom: var(--space-4);
|
|
border-bottom: 1px solid var(--primary-low-mid);
|
|
font-size: var(--font-up-2);
|
|
}
|
|
}
|
|
|
|
.not-found-topic {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
margin-bottom: 15px;
|
|
|
|
@include viewport.until(sm) {
|
|
&:nth-of-type(n + 6) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
a:not(.badge-category__wrapper) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
