Z-index cleanups (#11157)
* tooltips 1.0.1 * tooltips 1.0.1 * cleanup css * few more fixes * fix
This commit is contained in:
ludwiczakpawel
GitHub
parent
038385e4f8
commit
44466532dd
35 changed files with 69 additions and 1099 deletions
|
|
@ -41,7 +41,7 @@ label {
|
|||
.broadcast-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
z-index: unset;
|
||||
}
|
||||
|
||||
.site-config__required {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ article {
|
|||
|
||||
&.article {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -227,7 +226,6 @@ article {
|
|||
line-height: 32px;
|
||||
background: var(--card-bg);
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 5px 0px;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
top: 48px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
z-index: var(--z-drawer);
|
||||
overflow-y: auto;
|
||||
width: 200%;
|
||||
height: calc(100% - 48px);
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
line-height: 1.35em;
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
z-index: var(--z-drawer);
|
||||
padding: 16px 0;
|
||||
box-sizing: border-box;
|
||||
color: var(--card-secondary-color);
|
||||
|
|
@ -307,15 +307,6 @@
|
|||
// TODO: what is this .active thingy?
|
||||
opacity: 0.66;
|
||||
}
|
||||
&.big-article {
|
||||
&.active {
|
||||
opacity: 0.84;
|
||||
}
|
||||
.time-ago-indicator {
|
||||
// TODO: where do we use it?
|
||||
vertical-align: 0.11em;
|
||||
}
|
||||
}
|
||||
&.single-article-small-pic {
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
|
|
@ -344,37 +335,6 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.single-article-video-preview {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
position: relative;
|
||||
padding-top: 56%;
|
||||
display: block;
|
||||
background: $black no-repeat center center;
|
||||
background-size: cover;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.single-article-video-duration {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 7px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px 3px;
|
||||
font-size: 0.75em;
|
||||
font-weight: 500;
|
||||
img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 4px;
|
||||
vertical-align: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Organization Badge
|
||||
.org-headline-filler {
|
||||
@include themeable(
|
||||
|
|
@ -543,89 +503,6 @@
|
|||
color: rgb(163, 188, 201);
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
&.big-article {
|
||||
padding: 0px;
|
||||
.picture {
|
||||
padding-top: 42%;
|
||||
border-radius: 3px 3px 0 0;
|
||||
background: no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.content-wrapper {
|
||||
padding-bottom: 115px;
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
line-height: 1.28em;
|
||||
@media screen and (min-width: 450px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
.title-block {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.featured-profile-button {
|
||||
float: left;
|
||||
z-index: 10;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
margin-top: -110px;
|
||||
}
|
||||
img.featured-profile-pic {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50px;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
.featured-user-name {
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 10;
|
||||
left: 72px;
|
||||
bottom: 65px;
|
||||
font-size: 0.8em;
|
||||
a {
|
||||
color: var(--card-color-tertiary);
|
||||
}
|
||||
@media screen and (min-width: 450px) {
|
||||
font-size: 1em;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.featured-tags {
|
||||
font-size: 1em;
|
||||
position: absolute;
|
||||
max-width: 80%;
|
||||
bottom: 95px !important;
|
||||
left: 62px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 10;
|
||||
}
|
||||
.article-reading-time {
|
||||
position: absolute;
|
||||
right: 82px;
|
||||
bottom: 12px;
|
||||
font-size: 0.7em;
|
||||
padding: 6px 0px;
|
||||
z-index: 8;
|
||||
color: var(--card-color-tertiary);
|
||||
}
|
||||
.article-engagement-count {
|
||||
font-size: 13px;
|
||||
|
|
@ -708,28 +585,6 @@
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.video-player-header {
|
||||
background: $black;
|
||||
margin-top: 0;
|
||||
max-width: 1050px;
|
||||
margin: auto;
|
||||
margin-bottom: 15px;
|
||||
height: 52.5vw;
|
||||
margin-bottom: -5px;
|
||||
overflow-y: hidden;
|
||||
@media screen and (min-width: 750px) {
|
||||
height: 396px;
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
height: calc(52.5vw - 172px);
|
||||
}
|
||||
@media screen and (min-width: 1120px) {
|
||||
height: calc(52.5vw - 314px);
|
||||
}
|
||||
@media screen and (min-width: 1240px) {
|
||||
height: 339px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Podcast episode that goes within the <TodaysPodcast /> component.
|
||||
|
|
|
|||
|
|
@ -201,10 +201,10 @@
|
|||
}
|
||||
|
||||
&.swiped-in {
|
||||
z-index: 100;
|
||||
z-index: var(--z-drawer);
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
|
|
@ -215,7 +215,6 @@
|
|||
.side-bar {
|
||||
position: relative;
|
||||
background: var(--body-bg);
|
||||
z-index: 2;
|
||||
padding: 16px;
|
||||
align-content: start;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -199,7 +199,6 @@ a.header-link {
|
|||
margin-top: 0px;
|
||||
}
|
||||
summary {
|
||||
z-index: 15;
|
||||
position: relative;
|
||||
}
|
||||
&[open] {
|
||||
|
|
@ -240,7 +239,7 @@ a.header-link {
|
|||
margin-top: -45px;
|
||||
margin-bottom: 45px;
|
||||
border: 1px solid transparent;
|
||||
z-index: -10;
|
||||
z-index: var(--z-negative);
|
||||
position: relative;
|
||||
&:target + .single-comment-node {
|
||||
animation-name: fade-out;
|
||||
|
|
@ -538,55 +537,6 @@ a.header-link {
|
|||
right: 10px;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
font-size: var(--fs-base);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border-radius: 3px;
|
||||
@include generate-box(
|
||||
$level: 2,
|
||||
$bg: var(--card-bg),
|
||||
$border: var(--card-color),
|
||||
$color: var(--card-color)
|
||||
);
|
||||
z-index: 20;
|
||||
width: 160px;
|
||||
&.showing {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
padding: 12px 16px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-content button {
|
||||
display: inline-block;
|
||||
color: black;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 12px 16px;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
&:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content .comment-actions .async-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
border-color: var(--border-hover);
|
||||
box-shadow: var(--shadow-hover);
|
||||
color: var(--color-hover);
|
||||
z-index: 2;
|
||||
z-index: var(--z-elevate);
|
||||
}
|
||||
|
||||
&.crayons-btn--inverted {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
display: none; // initially hidden
|
||||
padding: var(--su-4);
|
||||
min-width: 250px;
|
||||
z-index: var(--z-dropdown);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
max-width: 360px;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 102; // Must be higher than the z-index of the broadcast-wrapper.
|
||||
z-index: var(--z-sticky);
|
||||
}
|
||||
|
||||
&__container {
|
||||
|
|
@ -93,7 +93,6 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
perspective: 1000px;
|
||||
|
|
@ -144,7 +143,7 @@
|
|||
transform: translate(-50%, -100px);
|
||||
background: var(--body-color);
|
||||
color: var(--body-color-inverted);
|
||||
z-index: 9999;
|
||||
z-index: var(--z-popover);
|
||||
padding: var(--su-4);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
|
|
@ -230,7 +229,7 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
background: var(--accent-brand);
|
||||
z-index: 103;
|
||||
z-index: var(--popover);
|
||||
height: var(--su-1);
|
||||
width: 0;
|
||||
&.showing {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 500;
|
||||
z-index: var(--z-modal);
|
||||
pointer-events: none;
|
||||
|
||||
&__overlay {
|
||||
|
|
@ -42,7 +42,6 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 600;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
|
@ -52,7 +51,7 @@
|
|||
max-width: var(--modal-max-width);
|
||||
background: var(--card-bg);
|
||||
color: var(--card-color);
|
||||
z-index: 700;
|
||||
z-index: var(--z-elevate);
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.crayons-snackbar {
|
||||
position: fixed;
|
||||
z-index: 9999; // todo: make z-index a variable..
|
||||
z-index: var(--z-popover);
|
||||
left: var(--su-2);
|
||||
right: var(--su-2);
|
||||
bottom: var(--su-2);
|
||||
|
|
|
|||
|
|
@ -187,8 +187,6 @@
|
|||
|
||||
&__actions {
|
||||
padding-left: calc(var(--su-6) + var(--su-4));
|
||||
z-index: 6;
|
||||
position: relative;
|
||||
margin-top: var(--su-1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ div.highlight {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
z-index: var(--z-modal);
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: var(--syntax-background-color);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
transform: translateY(var(--su-1));
|
||||
opacity: 0;
|
||||
transition: all var(--transition-props);
|
||||
z-index: 1000;
|
||||
z-index: var(--z-popover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -409,22 +409,7 @@
|
|||
(),
|
||||
true
|
||||
),
|
||||
(
|
||||
'z',
|
||||
'z-index',
|
||||
(
|
||||
'negative': -1,
|
||||
'0': 0,
|
||||
'10': 10,
|
||||
'20': 20,
|
||||
'30': 30,
|
||||
'40': 40,
|
||||
'50': 50,
|
||||
'auto': auto
|
||||
),
|
||||
(),
|
||||
false
|
||||
),
|
||||
('z', 'z-index', $z-indexes, (), false),
|
||||
(
|
||||
'overflow',
|
||||
'overflow',
|
||||
|
|
|
|||
12
app/assets/stylesheets/config/_import.scss
vendored
12
app/assets/stylesheets/config/_import.scss
vendored
|
|
@ -86,6 +86,18 @@ $negative-spacing-units: (
|
|||
'10': calc(var(--su-10) * -1),
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$z-indexes: (
|
||||
'negative': var(--z-negative),
|
||||
'elevate': var(--z-elevate),
|
||||
'sticky': var(--z-sticky),
|
||||
'drawer': var(--z-drawer),
|
||||
'modal': var(--z-modal),
|
||||
'dropdown': var(--z-dropdown),
|
||||
'popover': var(--z-popover),
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Helpers /////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
|
|||
|
|
@ -94,4 +94,16 @@
|
|||
|
||||
--lh-tight: 1.25; // 20px for 16px font-size
|
||||
--lh-base: 1.5; // 24px for 16px font-size
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Z-indexes. //////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--z-negative: -1; // to hide something behind everything else
|
||||
--z-elevate: 1; // to elevate something, just a little, in relation to its sibling
|
||||
--z-sticky: 100; // header, mobile actions bar
|
||||
--z-drawer: 200; // sidebar sliding nav drawers
|
||||
--z-modal: 300; // modals ¯\_(ツ)_/¯
|
||||
--z-dropdown: 400; // all kinds of dropdowns
|
||||
--z-popover: 500; // tooltips, snackbars, etc.
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,7 +109,6 @@
|
|||
margin-top: -63px;
|
||||
}
|
||||
position: absolute;
|
||||
z-index: 13;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -160,7 +159,6 @@
|
|||
box-shadow: 5px 5px 60px rgba(0, 0, 0, 0.3);
|
||||
background: $black;
|
||||
position: relative;
|
||||
z-index: 12;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 160px;
|
||||
|
|
@ -176,11 +174,9 @@
|
|||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -60px 0 0 -60px;
|
||||
z-index: 18;
|
||||
}
|
||||
.pause-butt {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
@import '../variables';
|
||||
@import '../mixins';
|
||||
|
||||
.articleformcontainer {
|
||||
padding: 24px 0 96px;
|
||||
}
|
||||
|
||||
.article-form-video-preview {
|
||||
text-align: center;
|
||||
padding-top: 60px;
|
||||
|
|
@ -34,676 +30,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.articleform {
|
||||
margin: 0 auto;
|
||||
width: 97%;
|
||||
max-width: 860px;
|
||||
padding: 0px 6px;
|
||||
@include dev-card;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
padding: 0px 12px;
|
||||
}
|
||||
@media screen and (min-width: 600px) {
|
||||
width: calc(97% - 30px);
|
||||
}
|
||||
@media screen and (min-width: 800px) {
|
||||
width: calc(95% - 40px);
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.container {
|
||||
border: 1px solid $light-medium-gray;
|
||||
}
|
||||
.help-guide-title {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.articleform__errors {
|
||||
background: $red;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin-top: 12px;
|
||||
border-radius: 3px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.articleform__orgsettings {
|
||||
padding: 0px;
|
||||
padding-left: 0px;
|
||||
margin: 20px 2px 0px;
|
||||
font-size: 16px;
|
||||
select {
|
||||
margin-left: 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media screen and (min-width: 600px) {
|
||||
font-size: 18px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__mainimage {
|
||||
text-align: center;
|
||||
width: 60%;
|
||||
border-radius: 8px;
|
||||
background: $light-gray;
|
||||
background: var(--body-bg);
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
@media screen and (min-width: 550px) {
|
||||
width: 40%;
|
||||
}
|
||||
@media screen and (min-width: 985px) {
|
||||
width: 30%;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: calc(28vw - 42px);
|
||||
background: #fcfcfc;
|
||||
border-radius: 8px;
|
||||
@media screen and (min-width: 550px) {
|
||||
height: calc(16.8vw - 18px);
|
||||
}
|
||||
@media screen and (min-width: 985px) {
|
||||
height: 111px;
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&.articleform__mainimagepreview {
|
||||
border-radius: 0px;
|
||||
border: 0px;
|
||||
margin-top: 0px;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
cursor: default;
|
||||
img {
|
||||
width: 100%;
|
||||
height: calc(42vw - 44px);
|
||||
border-radius: 3px;
|
||||
@media screen and (min-width: 985px) {
|
||||
height: 355px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__title {
|
||||
height: 26px;
|
||||
width: 99%;
|
||||
font-size: 17px;
|
||||
border: 0;
|
||||
padding: 20px 0px 15px;
|
||||
font-weight: 600;
|
||||
color: var(--body-color);
|
||||
resize: none;
|
||||
background: transparent;
|
||||
font-family: var(--ff-monospace);
|
||||
@media screen and (min-width: 600px) {
|
||||
font-size: 29px;
|
||||
height: 50px;
|
||||
}
|
||||
&::placeholder {
|
||||
color: var(--form-placeholder-color);
|
||||
}
|
||||
&.articleform__titlepreview {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 1px;
|
||||
@media screen and (min-width: 600px) {
|
||||
height: 43px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__titleTooLong {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: 'Title Too Long';
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.articleform__title {
|
||||
background: darken($red, 8%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__detailfields {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
.articleform__tagswrapper {
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
float: left;
|
||||
padding-right: 15px;
|
||||
@media screen and (min-width: 500px) {
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__tags {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
padding: 8px 8px 7px;
|
||||
@media screen and (min-width: 500px) {
|
||||
width: 98%;
|
||||
}
|
||||
@media screen and (min-width: 600px) {
|
||||
height: 19px;
|
||||
border-radius: 100px;
|
||||
padding-left: 17px;
|
||||
}
|
||||
margin-left: -4px;
|
||||
resize: none;
|
||||
border: 0;
|
||||
font-size: 16px;
|
||||
font-family: var(--ff-monospace);
|
||||
font-weight: bold;
|
||||
background: var(--form-bg);
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
.articleform__tagsoptions {
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
right: 3px;
|
||||
top: 50px;
|
||||
@media screen and (min-width: 600px) {
|
||||
top: 30px;
|
||||
left: 8px;
|
||||
right: 155px;
|
||||
}
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--body-color);
|
||||
font-family: var(--ff-monospace);
|
||||
z-index: 20;
|
||||
}
|
||||
.articleform__tagoptionrow {
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background: var(--button-primary-bg-hover);
|
||||
color: var(--button-primary-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__tagsoptionsbottomrow {
|
||||
padding: 12px 10px 10px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
font-size: 0.7em;
|
||||
font-style: italic;
|
||||
border-top: 1px solid $medium-gray;
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
.articleform__tagsoptionrulesbutton {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 7px;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
background: var(--button-primary-bg);
|
||||
color: var(--button-primary-color);
|
||||
font-size: 0.8em;
|
||||
width: 130px;
|
||||
padding: 6px 0px;
|
||||
}
|
||||
|
||||
.articleform__tagrules--inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.articleform__tagrules--active {
|
||||
font-size: 0.76em;
|
||||
max-height: 270px;
|
||||
overflow: auto;
|
||||
border: 1px solid $medium-gray;
|
||||
border-radius: 3px;
|
||||
margin-top: 8px;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.articleform__tagoptionrow--active {
|
||||
background: var(--button-primary-bg);
|
||||
color: var(--button-primary-color);
|
||||
}
|
||||
|
||||
.articleform__tagoptionsummary {
|
||||
color: var(--card-color-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.articleform__detailsButton {
|
||||
color: var(--button-secondary-color);
|
||||
background: var(--form-bg);
|
||||
border: 0px;
|
||||
border-radius: 300px;
|
||||
padding: 3px 18px;
|
||||
font-family: $helvetica-condensed;
|
||||
font-size: 14.4px;
|
||||
height: 34px;
|
||||
width: 60px;
|
||||
display: none;
|
||||
@media screen and (min-width: 600px) {
|
||||
display: inline-block;
|
||||
}
|
||||
margin-left: 25px;
|
||||
&:hover {
|
||||
background: var(--button-secondary-bg-hover);
|
||||
}
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: -4px;
|
||||
display: inline-block;
|
||||
filter: var(--theme-social-icon-invert, invert(0));
|
||||
}
|
||||
&.articleform__detailsButton--moreconfig {
|
||||
margin-left: 5px;
|
||||
&.articleform__detailsButton--bottom {
|
||||
margin-left: 5px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
&.articleform__detailsButton--bottom {
|
||||
margin-left: 2px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
padding: 2px 15px;
|
||||
border-radius: 3px;
|
||||
width: 110px;
|
||||
@media screen and (min-width: 600px) {
|
||||
margin-left: -5px;
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__form--v1 {
|
||||
.articleform__detailsButton--bottom {
|
||||
@media screen and (min-width: 600px) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__description {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.articleform__body {
|
||||
height: calc(80vh - 265px);
|
||||
width: 98%;
|
||||
border: 0;
|
||||
font-size: 15px;
|
||||
resize: none;
|
||||
padding: 20px 6px;
|
||||
font-family: var(--ff-monospace);
|
||||
background: var(--card-bg);
|
||||
color: var(--card-color);
|
||||
overflow-y: auto;
|
||||
@media screen and (min-width: 600px) {
|
||||
font-size: 18px;
|
||||
height: calc(82vh - 200px);
|
||||
}
|
||||
&::placeholder {
|
||||
color: var(--form-placeholder-color);
|
||||
}
|
||||
}
|
||||
.articleform__form--v1 {
|
||||
.articleform__body {
|
||||
min-height: calc(90vh - 370px);
|
||||
@media screen and (min-width: 600px) {
|
||||
font-size: 18px;
|
||||
height: calc(95vh - 280px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__buttons {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
flex-wrap: wrap-reverse;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--card-bg);
|
||||
z-index: 20;
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background: var(--body-color);
|
||||
opacity: 0.1;
|
||||
content: '';
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 4px calc(0.7vw);
|
||||
}
|
||||
|
||||
span {
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
max-width: 90%;
|
||||
width: 290px;
|
||||
@media screen and (min-width: 430px) {
|
||||
max-width: 90%;
|
||||
width: auto;
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
font-size: 11px;
|
||||
color: var(--card-color-secondary);
|
||||
font-style: italic;
|
||||
margin-left: -2px;
|
||||
}
|
||||
button {
|
||||
margin-top: 0px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.hidden {
|
||||
visibility: 'hidden';
|
||||
}
|
||||
.clear-button {
|
||||
// in part from https://css-tricks.com/overriding-default-button-styles/
|
||||
display: inline-block;
|
||||
border: none;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $medium-gray;
|
||||
color: var(--card-color-secondary);
|
||||
font-family: sans-serif;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
text-decoration: underline;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
cursor: pointer;
|
||||
font-size: 12.5px;
|
||||
font-style: italic;
|
||||
display: inline;
|
||||
width: fit-content;
|
||||
}
|
||||
.clear-button:hover {
|
||||
background: none;
|
||||
color: #666;
|
||||
}
|
||||
.clear-button:focus {
|
||||
outline: 1px solid #fff;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
.clear-button:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
}
|
||||
button,
|
||||
a {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
background: var(--button-secondary-bg);
|
||||
font-family: $helvetica-condensed;
|
||||
font-size: 14.5px;
|
||||
border: 0px;
|
||||
border-radius: 113px;
|
||||
padding: 6px 13px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: var(--button-secondary-color);
|
||||
white-space: nowrap;
|
||||
@media screen and (min-width: 430px) {
|
||||
margin-top: 23px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&:hover {
|
||||
background: var(--button-secondary-bg-hover);
|
||||
}
|
||||
&:focus {
|
||||
background: var(--button-secondary-bg-hover);
|
||||
outline: 0;
|
||||
}
|
||||
&.active {
|
||||
background: $green;
|
||||
color: $black;
|
||||
}
|
||||
&.previewbutt {
|
||||
min-width: 95px;
|
||||
}
|
||||
&.articleform__buttons--small {
|
||||
width: 45px;
|
||||
border: white;
|
||||
}
|
||||
&.articleform__buttons--publish {
|
||||
background: $bold-blue;
|
||||
color: white;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 630px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $dark-gray;
|
||||
color: white;
|
||||
padding: 4%;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
overflow-y: scroll;
|
||||
clipboard-copy {
|
||||
cursor: pointer;
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 24px;
|
||||
margin: -10px 5px;
|
||||
position: relative;
|
||||
filter: invert(100%);
|
||||
}
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#image-markdown-copy-link-input {
|
||||
margin-left: 24px;
|
||||
}
|
||||
#image-markdown-copy-link-announcer {
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
color: $green;
|
||||
font-size: 1.9em;
|
||||
font-family: $helvetica-condensed;
|
||||
}
|
||||
p {
|
||||
font-size: 0.8em;
|
||||
padding: 20px 0px;
|
||||
code {
|
||||
background: $black;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
input[type='file'] {
|
||||
width: 90%;
|
||||
background: $black;
|
||||
padding: 20px;
|
||||
border-radius: 3px;
|
||||
margin: 20px auto;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type='text'],
|
||||
textarea {
|
||||
width: calc(80% - 20px);
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
margin: 5px auto 0px;
|
||||
display: inline-block;
|
||||
border: 0px;
|
||||
font-size: 1em;
|
||||
@media screen and (min-width: 600px) {
|
||||
width: calc(100% - 270px);
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
margin: 20px auto 0px;
|
||||
}
|
||||
}
|
||||
label {
|
||||
margin-top: 20px;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
background: $medium-gray;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
@media screen and (min-width: 600px) {
|
||||
width: 180px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
color: $light-medium-gray;
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
margin: 7px auto;
|
||||
font-style: oblique;
|
||||
@media screen and (min-width: 600px) {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
button {
|
||||
margin-left: 5px;
|
||||
background: $bold-blue;
|
||||
}
|
||||
}
|
||||
.articleform__exitbutton {
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 37px;
|
||||
font-weight: bold;
|
||||
left: 1%;
|
||||
top: 0%;
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button {
|
||||
background: $red;
|
||||
color: white;
|
||||
border: 0px;
|
||||
padding: 4px 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.articleform__donebutton {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
background: $green;
|
||||
color: $black;
|
||||
padding: 10px 40px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
width: 200px;
|
||||
height: 84px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__notice {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 25px 0px;
|
||||
color: white;
|
||||
background: $green;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
z-index: 50;
|
||||
&.articleform__notice--draft {
|
||||
background: $yellow;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.articleform_titlepreviewsmall {
|
||||
font-size: calc(1.9vw + 22px) !important;
|
||||
@media screen and (min-width: 1600px) {
|
||||
font-size: 50px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.articleform__uploaderror {
|
||||
color: darken($red, 8%);
|
||||
font-size: 0.8em;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
// modal box card
|
||||
.onboarding-main {
|
||||
border: none;
|
||||
z-index: 1;
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
border-width: 2px;
|
||||
|
|
@ -310,7 +309,6 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
transition: all ease-in-out 0.1s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ body.ten-x-hacker-theme {
|
|||
position: fixed;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 101; // Must be higher than the z-index of the sticky-nav.
|
||||
z-index: var(--z-sticky);
|
||||
|
||||
.static-header & {
|
||||
position: relative;
|
||||
|
|
@ -105,7 +105,7 @@ body.trusted-status-true .trusted-visible-block {
|
|||
animation: loading-fadein 1.5s;
|
||||
animation-delay: 0.6s;
|
||||
font-size: 1.2em;
|
||||
z-index: -1;
|
||||
z-index: var(--z-negative);
|
||||
}
|
||||
|
||||
@keyframes loading-fadein {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 15;
|
||||
z-index: var(--z-sticky);
|
||||
font-family: var(--ff-sans-serif);
|
||||
display: block;
|
||||
#progressBar {
|
||||
|
|
@ -19,7 +19,6 @@
|
|||
right: 0;
|
||||
text-align: left;
|
||||
background: rgb(236, 236, 236);
|
||||
z-index: 19;
|
||||
display: none;
|
||||
&.playing {
|
||||
display: block;
|
||||
|
|
@ -105,7 +104,7 @@
|
|||
top: 0px;
|
||||
left: 26px;
|
||||
background: rgb(32, 32, 32);
|
||||
z-index: 30;
|
||||
z-index: var(--z-elevate);
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
transition: width 200ms ease-out 95ms;
|
||||
|
|
@ -137,7 +136,6 @@
|
|||
height: calc(48px + 1vh);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 23;
|
||||
transition: width 0.25s ease-in-out;
|
||||
}
|
||||
#buffer {
|
||||
|
|
@ -146,18 +144,17 @@
|
|||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 22;
|
||||
transition: width 0.15s ease-in-out;
|
||||
}
|
||||
#time {
|
||||
position: absolute;
|
||||
right: calc(50px + 0.1vh + 1.5vw);
|
||||
top: calc(16px + 0.1vh);
|
||||
z-index: 23;
|
||||
color: rgb(161, 161, 161);
|
||||
font-size: calc(14px + 0.2vh);
|
||||
background: rgba(236, 236, 236, 0.74);
|
||||
padding: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
#closebutt {
|
||||
position: absolute;
|
||||
|
|
@ -172,7 +169,6 @@
|
|||
padding-top: calc(8px + 0.2vh);
|
||||
color: #535353;
|
||||
font-size: 13.5px;
|
||||
z-index: 25;
|
||||
width: calc(42px + 0.1vh + 1.5vw);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease 0s;
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
);
|
||||
@include themeable(border, container-border, 2px solid $purple);
|
||||
padding: 12px 30px;
|
||||
z-index: 20;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
z-index: var(--z-popover);
|
||||
border-radius: var(--radius);
|
||||
font-weight: var(--fw-bold);
|
||||
@media screen and (min-width: 430px) {
|
||||
right: auto;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -224,13 +224,13 @@
|
|||
margin-left: 5%;
|
||||
@media screen and (min-width: 430px) {
|
||||
font-size: 1.15em;
|
||||
padding: 15px 15px 15px 0
|
||||
padding: 15px 15px 15px 0;
|
||||
}
|
||||
@media screen and (min-width: 1100px) {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
transform: translateY(-45%);
|
||||
padding: 15px 15px 15px 0
|
||||
padding: 15px 15px 15px 0;
|
||||
}
|
||||
.row {
|
||||
padding: calc(5px + 0.2vw) 0px;
|
||||
|
|
@ -350,160 +350,4 @@
|
|||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// new message modal for open inbox
|
||||
.modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 990;
|
||||
}
|
||||
|
||||
.modal .overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 995;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-height: 80%;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border: 1px solid #d6d6d6;
|
||||
box-shadow: 3px 3px 0px #bababa;
|
||||
border-radius: 3px;
|
||||
max-width: 95%;
|
||||
width: 600px;
|
||||
|
||||
.message-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
align-content: stretch;
|
||||
@media screen and (min-width: 500px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
textarea {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d6d6d6;
|
||||
font-size: 14px;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
width: calc(100% - 50px);
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
height: 80px;
|
||||
resize: vertical;
|
||||
max-height: 50vh;
|
||||
@media screen and (min-width: 500px) {
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
.submit-message {
|
||||
margin: 0px auto;
|
||||
border-radius: 3px;
|
||||
background: $dark-purple;
|
||||
font-weight: 600px;
|
||||
font-family: $helvetica-condensed;
|
||||
width: 220px;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
height: 40px;
|
||||
order: 10;
|
||||
flex-grow: 1;
|
||||
border: 0px;
|
||||
@media screen and (min-width: 500px) {
|
||||
margin: 10px 10px 10px 0;
|
||||
width: 82px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $dark-gray;
|
||||
font-size: 0.8em;
|
||||
margin: 5px auto;
|
||||
width: 96%;
|
||||
}
|
||||
.close-modal {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
opacity: 0.5;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 0 0 10px;
|
||||
transition: opacity 0.2s ease;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-dropdown {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 6px;
|
||||
button {
|
||||
border: 0px;
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
}
|
||||
img {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
.profile-dropdownmenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 3px;
|
||||
border: 1px solid $light-medium-gray;
|
||||
border-radius: 3px;
|
||||
background: var(--card-bg);
|
||||
z-index: 20;
|
||||
width: 200px;
|
||||
box-shadow: $shadow;
|
||||
a {
|
||||
font-size: 0.75em;
|
||||
color: var(--body-color);
|
||||
display: block;
|
||||
padding: 9px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.showing {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
font-size: 0.75em;
|
||||
color: var(--body-color);
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
display: block;
|
||||
border: none;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -246,7 +246,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
top: calc(100% + var(--su-4));
|
||||
z-index: 100;
|
||||
z-index: var(--z-dropdown);
|
||||
padding: var(--su-1);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
padding: var(--su-2);
|
||||
background: var(--body-bg);
|
||||
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
z-index: var(--z-sticky);
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
top: calc(100%);
|
||||
z-index: 100;
|
||||
z-index: var(--z-dropdown);
|
||||
padding: var(--su-1);
|
||||
left: calc(var(--su-1) * -1);
|
||||
right: calc(var(--su-1) * -1);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
top: var(--header-height);
|
||||
right: 0;
|
||||
height: calc(100vh - var(--header-height));
|
||||
z-index: 100;
|
||||
z-index: var(--z-drawer);
|
||||
transform: translateX(360px);
|
||||
transition: var(--transition-props);
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
bottom: var(--su-7);
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
right: var(--su-7);
|
||||
z-index: 201;
|
||||
z-index: var(--z-elevate);
|
||||
cursor: pointer;
|
||||
border-radius: 50px;
|
||||
|
||||
|
|
|
|||
|
|
@ -166,7 +166,6 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
|
|
@ -177,7 +176,7 @@
|
|||
color: var(--card-color-secondary);
|
||||
background: var(--card-bg);
|
||||
padding: 0 var(--su-2);
|
||||
z-index: 1;
|
||||
z-index: var(--z-elevate);
|
||||
display: inline-block;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ export class CommentSubscription extends Component {
|
|||
aria-hidden={!showOptions}
|
||||
className={
|
||||
showOptions
|
||||
? `inline-block z-30 right-4 left-4 s:right-0 s:left-auto${
|
||||
? `inline-block right-4 left-4 s:right-0 s:left-auto${
|
||||
positionType === 'relative' ? ' w-full' : ''
|
||||
}`
|
||||
: null
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
|
||||
<%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon crayons-icon", title: "More...") %>
|
||||
</button>
|
||||
<div class="crayons-dropdown p-1 z-30 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">
|
||||
<div class="crayons-dropdown p-1 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">
|
||||
<clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer" class="dropdown-link-row">
|
||||
<div class="flex items-center">
|
||||
<input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" class="crayons-textfield" readonly />
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
<%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon", title: "Dropdown menu") %>
|
||||
</button>
|
||||
<div class="dropdown">
|
||||
<div class="crayons-dropdown p-1 z-30 right-1 left-1 s:right-0 s:left-auto fs-base">
|
||||
<div class="crayons-dropdown p-1 right-1 left-1 s:right-0 s:left-auto fs-base">
|
||||
<a href="<%= comment.path %>" class="crayons-link crayons-link--block">Permalink</a>
|
||||
<span class="comment-actions hidden" data-user-id="<%= comment.user_id %>" data-action="settings-button" data-path="<%= comment.path %>/settings">
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
<%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "crayons-icon", title: "More...") %>
|
||||
</button>
|
||||
|
||||
<div class="crayons-dropdown top-100 right-0 z-10 align-left js-dashboard-row-more-dropdown p-1">
|
||||
<div class="crayons-dropdown top-100 right-0 align-left js-dashboard-row-more-dropdown p-1">
|
||||
<% if article.user_subscriptions_count > 0 %>
|
||||
<a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="crayons-link crayons-link--block w-100"><%= "Subscriptions (#{article.user_subscriptions_count})" %></a>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<%= inline_svg_tag("overflow-horizontal.svg", class: "dropdown-icon crayons-icon", aria: true, title: "Toggle dropdown menu") %>
|
||||
</button>
|
||||
|
||||
<div id="user-profile-dropdownmenu" class="crayons-dropdown top-100 right-0 z-10 p-1">
|
||||
<div id="user-profile-dropdownmenu" class="crayons-dropdown top-100 right-0 p-1">
|
||||
<a href="javascript:void(0);" id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="border-none crayons-link crayons-link--block">Block @<%= @user.username %></a>
|
||||
<% if user_signed_in? %>
|
||||
<%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ title: Imgproxy
|
|||
# Imgproxy
|
||||
|
||||
Imgproxy is a standalone server for resizing images. It is optional and you do
|
||||
not need it to start Forem locally. We are currently only using it in Forem Cloud.
|
||||
not need it to start Forem locally. We are currently only using it in Forem
|
||||
Cloud.
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,8 @@ redis-cli ping
|
|||
|
||||
Forem requires Elasticsearch 7.x to run. We recommend version 7.5.2.
|
||||
|
||||
You have the option of installing Elasticsearch with Homebrew or through an archive. We **recommend** installing from archive on Mac.
|
||||
You have the option of installing Elasticsearch with Homebrew or through an
|
||||
archive. We **recommend** installing from archive on Mac.
|
||||
|
||||
### Installing Elasticsearch from the archive
|
||||
|
||||
|
|
@ -107,10 +108,11 @@ To start elasticsearch as a daemonized process:
|
|||
|
||||
### Installing Elasticsearch with Homebrew
|
||||
|
||||
To install Elasticsearch with Homebrew we will use the following commands to:
|
||||
To install Elasticsearch with Homebrew we will use the following commands to:
|
||||
|
||||
- tap the Elastic Homebrew repository
|
||||
- install the latest OSS distribution
|
||||
- pin the latest OSS distribution.
|
||||
- pin the latest OSS distribution.
|
||||
|
||||
```shell
|
||||
brew tap elastic/tap
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue