mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 05:59:26 +08:00
3c75a0a514
This introduces some new CSS variables that I would have found useful while building some themes recently: for /categories — this helps control the category box width `--category-boxes-min-width` `--category-boxes-max-width` rather than a mixin, just a couple simple variables for quotes `--d-post-aside-background` `--d-post-aside-border-left` nice to be able to control the heading font-weight in one place with `--heading-font-weight` managing the button colors in the header `--d-header-icon-color` `--d-header-icon-color--hover` `--d-header-icon-color--active` `--d-header-icon-background--hover` `--d-header-icon-background--active` we have some calculations in the welcome banner for the search dropdown height, these help there and make it easier to adjust styles generally: `--d-welcome-banner-text-alignment` `--d-welcome-banner-header-size` `--d-welcome-banner-padding-top` `--d-welcome-banner-padding-right` `--d-welcome-banner-padding-bottom` `--d-welcome-banner-padding-left` `--d-welcome-banner-title-margin-bottom` for links, if you'd like to change the decoration `--d-link-text-decoration`
211 lines
4.6 KiB
SCSS
Vendored
211 lines
4.6 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
@import "common/foundation/mixins";
|
|
|
|
:root {
|
|
--d-welcome-banner-text-alignment: center;
|
|
--d-welcome-banner-header-size: var(--font-up-6);
|
|
--d-welcome-banner-padding-top: var(--space-6);
|
|
--d-welcome-banner-padding-right: 0;
|
|
--d-welcome-banner-padding-bottom: var(--space-12);
|
|
--d-welcome-banner-padding-left: 0;
|
|
--d-welcome-banner-title-margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.display-welcome-banner {
|
|
#main-outlet {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.welcome-banner--visible.header-search--enabled {
|
|
.floating-search-input-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.welcome-banner {
|
|
border-radius: var(--d-border-radius-large);
|
|
|
|
@include viewport.until(sm) {
|
|
display: none;
|
|
}
|
|
|
|
&__wrap {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
padding: var(--d-welcome-banner-padding-top)
|
|
var(--d-welcome-banner-padding-right)
|
|
var(--d-welcome-banner-padding-bottom);
|
|
|
|
.--with-bg-img & {
|
|
--d-welcome-banner-padding-right: var(--space-4);
|
|
--d-welcome-banner-padding-left: var(--space-4);
|
|
border-radius: var(--d-border-radius);
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
@include viewport.until(md) {
|
|
--d-welcome-banner-padding-top: var(--space-4);
|
|
--d-welcome-banner-padding-right: 8px;
|
|
--d-welcome-banner-padding-bottom: var(--space-5);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.search-menu {
|
|
display: flex;
|
|
position: relative;
|
|
margin-inline: auto;
|
|
max-width: 600px;
|
|
|
|
.search-menu-container {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.d-icon-magnifying-glass {
|
|
margin: 0;
|
|
}
|
|
|
|
.search-input {
|
|
.search-term__input {
|
|
min-width: 0;
|
|
flex: 1 1;
|
|
}
|
|
}
|
|
|
|
.btn.search-icon {
|
|
z-index: 2;
|
|
background: transparent;
|
|
line-height: 1;
|
|
color: var(--primary-medium);
|
|
height: 100%;
|
|
position: absolute;
|
|
left: calc(
|
|
1rem - 0.65em
|
|
); // to align with result panel, minus padding of search icon btn
|
|
|
|
.rtl & {
|
|
right: 0;
|
|
left: unset;
|
|
}
|
|
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
background: transparent;
|
|
color: var(--primary);
|
|
|
|
.d-icon {
|
|
color: currentcolor;
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .search-menu-container .search-input {
|
|
padding-left: var(--space-8);
|
|
|
|
.rtl & {
|
|
padding-left: unset;
|
|
padding-right: var(--space-8);
|
|
}
|
|
}
|
|
|
|
+ .search-menu-container .search-input .search-context {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
.search-menu-container .results {
|
|
@include d-animation(float-down, 0.25s, ease);
|
|
box-sizing: border-box;
|
|
border-radius: var(--d-border-radius);
|
|
background: var(--secondary);
|
|
z-index: 9;
|
|
left: 0;
|
|
top: 100%;
|
|
right: 0;
|
|
padding-top: 0;
|
|
|
|
@include viewport.until(sm) {
|
|
width: 100%;
|
|
}
|
|
|
|
.search-random-quick-tip {
|
|
padding-top: var(--space-3);
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.search-icon-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.no-results {
|
|
padding-top: var(--space-3);
|
|
}
|
|
}
|
|
|
|
.search-link .d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
span.keyword {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.search-menu-panel {
|
|
// hacky but best guestimate we can do
|
|
// 4em is roughly the input height
|
|
--d-welcome-banner-height: calc(
|
|
var(--font-up-6) + var(--d-welcome-banner-padding-top) +
|
|
var(--d-welcome-banner-padding-bottom) +
|
|
var(--d-welcome-banner-title-margin-bottom) + 4em
|
|
);
|
|
max-height: calc(
|
|
100vh - var(--header-offset) - var(--d-welcome-banner-height)
|
|
);
|
|
}
|
|
}
|
|
|
|
.welcome-banner__title {
|
|
font-size: var(--font-up-6);
|
|
line-height: var(--line-height-medium);
|
|
font-family: var(--heading-font-family);
|
|
font-weight: var(--heading-font-weight);
|
|
margin-bottom: var(--d-welcome-banner-title-margin-bottom);
|
|
text-align: var(--d-welcome-banner-text-alignment);
|
|
margin-inline: auto;
|
|
max-width: 70ch;
|
|
|
|
@include viewport.until(md) {
|
|
font-size: var(--font-up-4);
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
}
|
|
|
|
.welcome-banner__subheader {
|
|
font-size: var(--font-up-1-rem);
|
|
font-weight: normal;
|
|
margin: 0;
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
// hide search icon from default search menu
|
|
.search-menu.glimmer-search-menu .search-icon {
|
|
display: none;
|
|
}
|
