mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-27 02:05:26 +08:00
73a3b995f9
Reported here https://meta.discourse.org/t/do-auto-margins-still-need-to-be-unset-on-mobile/351503 This helps better handle some situations where we want to center content on large screens while using mobile view
132 lines
2.1 KiB
SCSS
Vendored
132 lines
2.1 KiB
SCSS
Vendored
// Mobile
|
|
// global styles that apply to the Discourse application specifically
|
|
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
|
// throughout the Discourse application
|
|
|
|
// Base Elements
|
|
body {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
.ios-device {
|
|
textarea {
|
|
background-color: var(--secondary);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
input#reply-title {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
/* 13px left is intentional here to properly align with post quotes */
|
|
padding: 10px 8px 10px 13px;
|
|
|
|
p {
|
|
margin: 0 0 10px 0;
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Common classes
|
|
.boxed {
|
|
.contents {
|
|
padding: 10px 0 0 0;
|
|
}
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.mobile-nav {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
position: relative;
|
|
|
|
a {
|
|
color: var(--primary);
|
|
|
|
.d-icon {
|
|
margin-right: 0.25em;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
> li > a.expander {
|
|
display: flex;
|
|
align-items: center;
|
|
@include form-item-sizing;
|
|
border-color: var(--primary-medium);
|
|
max-width: 100%;
|
|
|
|
.selection {
|
|
@include ellipsis;
|
|
max-width: 120px;
|
|
}
|
|
|
|
> .d-icon {
|
|
&:last-of-type {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.drop {
|
|
display: none;
|
|
|
|
&.expanded {
|
|
left: 0;
|
|
display: block;
|
|
position: absolute;
|
|
z-index: z("dropdown");
|
|
background-color: var(--secondary);
|
|
width: 100%;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 5px;
|
|
border: 1px solid var(--primary-low);
|
|
box-sizing: border-box;
|
|
|
|
li {
|
|
margin: 5px 0;
|
|
padding: 0;
|
|
|
|
a {
|
|
height: 100%;
|
|
display: block;
|
|
padding: 5px 8px;
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-vertical {
|
|
.control-group {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
// Special elements
|
|
#main-outlet {
|
|
padding-top: 1.25em;
|
|
|
|
&::after {
|
|
// setup overlay for sidebar
|
|
content: "";
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
}
|
|
|
|
#main {
|
|
position: relative;
|
|
}
|
