More themeable mixin in action (#2646)
* More themeable mixin in action. * Missed a CSS var to themeable mixin.
This commit is contained in:
Nick Taylor
Ben Halpern
parent
7100eab636
commit
957d1887b7
6 changed files with 244 additions and 231 deletions
|
|
@ -1,4 +1,5 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'shared';
|
||||
|
||||
$indent-distance: calc(1.1vw + 13px);
|
||||
|
|
@ -13,18 +14,15 @@ $indent-distance: calc(1.1vw + 13px);
|
|||
}
|
||||
|
||||
a.header-link {
|
||||
color: $black;
|
||||
color: var(--theme-color, $black);
|
||||
@include themeable(color, theme-color, $black);
|
||||
display: block;
|
||||
&:hover {
|
||||
color: $black;
|
||||
color: var(--theme-color, $black);
|
||||
@include themeable(color, theme-color, $black);
|
||||
}
|
||||
}
|
||||
|
||||
.comments {
|
||||
background: $light-gray;
|
||||
background: var(--theme-background, $light-gray);
|
||||
@include themeable(background, theme-background, $light-gray);
|
||||
.picture {
|
||||
height: 180px;
|
||||
max-width: 900px;
|
||||
|
|
@ -54,15 +52,17 @@ a.header-link {
|
|||
max-width: 100%;
|
||||
margin: 50px auto 10px;
|
||||
padding: 0px 0px 90px;
|
||||
background: white;
|
||||
background: var(--theme-container-background, white);
|
||||
@include themeable(background, theme-container-background, #fff);
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
@media screen and (min-width: 820px) {
|
||||
margin: 72px auto 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid darken($lightest-gray, 4%);
|
||||
border: var(--theme-container-border, 1px solid darken($lightest-gray, 4%));
|
||||
@include themeable(
|
||||
border,
|
||||
theme-container-border,
|
||||
1px solid darken($lightest-gray, 4%)
|
||||
);
|
||||
}
|
||||
h3 {
|
||||
width: 94%;
|
||||
|
|
@ -89,8 +89,7 @@ a.header-link {
|
|||
margin: auto;
|
||||
margin-bottom: -35px;
|
||||
.read-more {
|
||||
color: $sky-blue;
|
||||
color: var(--theme-anchor-color, $sky-blue);
|
||||
@include themeable(color, theme-anchor-color, $sky-blue);
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
opacity: 0.96;
|
||||
|
|
@ -223,20 +222,29 @@ a.header-link {
|
|||
}
|
||||
form {
|
||||
width: 104%;
|
||||
background: $light-gray;
|
||||
background: var(--theme-container-accent-background, $light-gray);
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-accent-background,
|
||||
$light-gray
|
||||
);
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
z-index: 4;
|
||||
margin-left: -2%;
|
||||
border-top: 1px solid $light-medium-gray;
|
||||
border-top: var(--theme-container-border, 1px solid $light-medium-gray);
|
||||
@include themeable(
|
||||
border-top,
|
||||
theme-container-border,
|
||||
1px solid $light-medium-gray
|
||||
);
|
||||
@media screen and (min-width: 820px) {
|
||||
width: calc(100% - 2px);
|
||||
margin-left: 0%;
|
||||
border: 1px solid $light-medium-gray;
|
||||
border: var(--theme-container-border, 1px solid $light-medium-gray);
|
||||
@include themeable(
|
||||
border,
|
||||
theme-container-border,
|
||||
1px solid $light-medium-gray
|
||||
);
|
||||
}
|
||||
|
||||
.field {
|
||||
|
|
@ -254,19 +262,20 @@ a.header-link {
|
|||
display: block;
|
||||
resize: vertical;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgb(232, 229, 229);
|
||||
border: var(--theme-container-background, 1px solid rgb(232, 229, 229));
|
||||
@include themeable(
|
||||
border,
|
||||
theme-container-background,
|
||||
1px solid rgb(232, 229, 229)
|
||||
);
|
||||
height: 125px;
|
||||
font-size: 16px;
|
||||
padding: 6px;
|
||||
cursor: text;
|
||||
background: white;
|
||||
background: var(--theme-container-background, white);
|
||||
color: $black;
|
||||
color: var(--theme-color, $black);
|
||||
&::placeholder{
|
||||
color:#8f949c;
|
||||
}
|
||||
@include themeable(background, theme-container-background, #fff);
|
||||
@include themeable(color, theme-color, $black);
|
||||
&::placeholder {
|
||||
color: #8f949c;
|
||||
}
|
||||
&.embiggened {
|
||||
height: calc(2vw + 115px);
|
||||
}
|
||||
|
|
@ -279,8 +288,9 @@ a.header-link {
|
|||
&.preview-loading {
|
||||
background: white url(image_path('loading-ellipsis.svg')) no-repeat
|
||||
center center;
|
||||
background-color: var(--theme-container-background, white);
|
||||
color: var(--theme-container-background, white);
|
||||
@include themeable(background-color, theme-container-background, white);
|
||||
@include themeable(color, theme-container-background, white);
|
||||
|
||||
background-size: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -293,8 +303,11 @@ a.header-link {
|
|||
text-align: left;
|
||||
font-size: 19px;
|
||||
font-family: $helvetica;
|
||||
background: lighten($yellow, 19%);
|
||||
background: var(--theme-container-accent-background, lighten($yellow, 19%));
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-accent-background,
|
||||
lighten($yellow, 19%)
|
||||
);
|
||||
box-shadow: $shadow;
|
||||
width: calc(100% - 80px);
|
||||
margin: 19px auto 8px;
|
||||
|
|
@ -347,8 +360,7 @@ a.header-link {
|
|||
text-align: right;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
color: $dark-gray;
|
||||
color: var(--theme-secondary-color, $dark-gray);
|
||||
@include themeable(color, theme-secondary-color, $dark-gray);
|
||||
&.sub-comment-code-of-conduct {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
|
@ -358,8 +370,7 @@ a.header-link {
|
|||
margin: 5px 0px;
|
||||
}
|
||||
a {
|
||||
color: $sky-blue;
|
||||
color: var(--theme-anchor-color, $sky-blue);
|
||||
@include themeable(color, theme-anchor-color, $sky-blue);
|
||||
}
|
||||
}
|
||||
input[type='submit'] {
|
||||
|
|
@ -617,8 +628,7 @@ a.header-link {
|
|||
code {
|
||||
margin: auto;
|
||||
white-space: nowrap;
|
||||
background: $lightest-gray;
|
||||
background: var(--theme-background, $lightest-gray);
|
||||
@include themeable(background, theme-background, $lightest-gray);
|
||||
padding: 1px 5px 0px;
|
||||
border-radius: 2px;
|
||||
color: #333842;
|
||||
|
|
@ -674,8 +684,7 @@ a.header-link {
|
|||
padding: 0px;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
color: $dark-gray;
|
||||
color: var(--theme-secondary-color, $dark-gray);
|
||||
@include themeable(color, theme-secondary-color, $dark-gray);
|
||||
position: relative;
|
||||
// background:$light-gray;
|
||||
.comment-date {
|
||||
|
|
@ -686,8 +695,7 @@ a.header-link {
|
|||
font-size: 12px;
|
||||
text-align: right;
|
||||
a {
|
||||
color: $medium-gray;
|
||||
color: var(--theme-secondary-color, $dark-gray);
|
||||
@include themeable(color, theme-secondary-color, $medium-gray);
|
||||
}
|
||||
}
|
||||
.dropbtn {
|
||||
|
|
@ -780,8 +788,7 @@ a.header-link {
|
|||
}
|
||||
}
|
||||
a {
|
||||
color: lighten($dark-gray, 3%);
|
||||
color: var(--theme-secondary-color, $dark-gray);
|
||||
@include themeable(color, theme-secondary-color, lighten($dark-gray, 3%));
|
||||
}
|
||||
}
|
||||
.reaction-button,
|
||||
|
|
@ -953,8 +960,7 @@ a.header-link {
|
|||
.inner-comment {
|
||||
padding: 0px;
|
||||
border: 1px solid $light-medium-gray;
|
||||
background: white;
|
||||
background: var(--theme-container-background, #fff);
|
||||
@include themeable(background, theme-container-background, #fff);
|
||||
&.comment-created-via-fetch {
|
||||
animation: comment-create 1.2s;
|
||||
.body {
|
||||
|
|
@ -996,7 +1002,6 @@ a.header-link {
|
|||
background-color: $light-green;
|
||||
}
|
||||
to {
|
||||
background-color: white;
|
||||
background-color: var(--theme-container-background, #fff);
|
||||
@include themeable(background-color, theme-container-background, #fff);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import 'variables';
|
||||
|
||||
@import 'mixins';
|
||||
.dashboard-container {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
|
|
@ -70,8 +70,7 @@
|
|||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
color: $black;
|
||||
color: var(--theme-color, $black);
|
||||
@include themeable(color, theme-color, $black);
|
||||
padding: 10px 0px;
|
||||
border-radius: 3px;
|
||||
min-width: 115px;
|
||||
|
|
@ -82,18 +81,22 @@
|
|||
text-align: center;
|
||||
|
||||
&.active {
|
||||
background: $purple;
|
||||
background: var(--theme-container-accent-background, $purple);
|
||||
color: $black;
|
||||
color: var(--theme-container-color, $black);
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-accent-background,
|
||||
$purple
|
||||
);
|
||||
@include themeable(color, theme-container-color, $black);
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
background: $light-medium-purple;
|
||||
background: var(--theme-container-background-hover,
|
||||
$light-medium-purple);
|
||||
color: $black;
|
||||
color: var(--theme-container-color, $black);
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-background-hover,
|
||||
$light-medium-purple
|
||||
);
|
||||
@include themeable(color, theme-container-color, $black);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
@ -147,7 +150,11 @@
|
|||
outline: none;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
|
||||
font-family: 'HelveticaNeue-CondensedBold', 'HelveticaNeueBoldCondensed',
|
||||
'HelveticaNeue-Bold-Condensed', 'Helvetica Neue Bold Condensed',
|
||||
'HelveticaNeueBold', 'HelveticaNeue-Bold', 'Helvetica Neue Bold',
|
||||
'HelveticaNeue', 'Helvetica Neue', 'TeXGyreHerosCnBold', 'Helvetica',
|
||||
'Tahoma', 'Geneva', 'Arial Narrow', 'Arial', sans-serif;
|
||||
|
||||
@media screen and (max-width: 426px) {
|
||||
text-align-last: center;
|
||||
|
|
@ -163,8 +170,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
background: $dark-gray;
|
||||
box-shadow: $bold-shadow;
|
||||
box-shadow: var(--theme-container-box-shadow, $bold-shadow);
|
||||
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
|
|
@ -226,21 +232,24 @@
|
|||
}
|
||||
|
||||
.single-article {
|
||||
border: 1px solid $light-medium-gray;
|
||||
border: var(--theme-container-border, 1px solid $light-medium-gray);
|
||||
box-shadow: $bold-shadow;
|
||||
box-shadow: var(--theme-container-box-shadow, $bold-shadow);
|
||||
@include themeable(
|
||||
border,
|
||||
theme-container-border,
|
||||
1px solid $light-medium-gray
|
||||
);
|
||||
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
|
||||
padding: 5px 15px;
|
||||
margin-bottom: 13px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
background: white;
|
||||
background: var(--theme-container-background, white);
|
||||
|
||||
@include themeable(background, theme-container-background, #fff);
|
||||
&.single-article-unpublished {
|
||||
background: lighten($yellow, 20%);
|
||||
background: var(--theme-container-accent-background,
|
||||
lighten($yellow, 20%));
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-accent-background,
|
||||
lighten($yellow, 20%)
|
||||
);
|
||||
}
|
||||
&.thanks-for-suggesting-a-tweet {
|
||||
background: lighten($green, 20%);
|
||||
|
|
@ -261,7 +270,7 @@
|
|||
height: 100px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
input[type="submit"] {
|
||||
input[type='submit'] {
|
||||
background: #1da1f2; // twitter blue
|
||||
color: white;
|
||||
font-size: 19px;
|
||||
|
|
@ -311,10 +320,12 @@
|
|||
|
||||
.dashboard-collection-org-details {
|
||||
.dashboard-top-pill {
|
||||
background: darken($light-gray, 6%);
|
||||
background: var(--theme-secondary-color, darken($light-gray, 6%));
|
||||
color: white;
|
||||
color: var(--theme-container-background, white);
|
||||
@include themeable(
|
||||
background,
|
||||
theme-secondary-color,
|
||||
darken($light-gray, 6%)
|
||||
);
|
||||
@include themeable(color, theme-container-background, #fff);
|
||||
margin-right: 5px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 100px;
|
||||
|
|
@ -327,14 +338,11 @@
|
|||
.dashboard-meta-details {
|
||||
font-size: 0.85em;
|
||||
padding: 3px 0px 6px;
|
||||
color: $medium-gray;
|
||||
color: var(--theme-secondary-color, $medium-gray);
|
||||
@include themeable(color, theme-secondary-color, $medium-gray);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
color: var(--theme-container-color, $black);
|
||||
|
||||
@include themeable(color, theme-container-color, $black);
|
||||
&.block-link {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -366,8 +374,11 @@
|
|||
}
|
||||
|
||||
form {
|
||||
background: $light-gray;
|
||||
background: var(--theme-container-accent-background, $light-gray);
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-accent-background,
|
||||
$light-gray
|
||||
);
|
||||
padding: 8px 15px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -502,8 +513,7 @@
|
|||
|
||||
.no-articles {
|
||||
text-align: center;
|
||||
background: white;
|
||||
background: var(--theme-container-accent-background, white);
|
||||
@include themeable(background, theme-container-accent-background, #fff);
|
||||
padding: 2vw 3vw 6vw;
|
||||
box-shadow: $shadow;
|
||||
border-radius: 3px;
|
||||
|
|
@ -605,16 +615,16 @@
|
|||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid #d6d6d6;
|
||||
border: var(--theme-container-border, 1px solid #d6d6d6);
|
||||
box-shadow: 3px 3px 0px #bababa;
|
||||
box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #bababa);
|
||||
@include themeable(border, theme-container-border, 1px solid #d6d6d6);
|
||||
@include themeable(
|
||||
box-shadow,
|
||||
theme-container-box-shadow,
|
||||
3px 3px 0px #bababa
|
||||
);
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
margin: 5px;
|
||||
background-color: #fff;
|
||||
background-color: var(--theme-container-background, #fff);
|
||||
|
||||
@include themeable(background-color, theme-container-background, #fff);
|
||||
h4 {
|
||||
font-size: 0.8em;
|
||||
margin: 0px;
|
||||
|
|
@ -658,4 +668,4 @@
|
|||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
footer{
|
||||
footer {
|
||||
// background: darken($tan,1%);
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
.container{
|
||||
width:100%;
|
||||
margin:auto;
|
||||
max-width:1200px;
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
&.centered-footer{
|
||||
&.centered-footer {
|
||||
width: 97%;
|
||||
max-width: 722px;
|
||||
@media screen and (min-width: 950px) and (max-width: 1119px) {
|
||||
|
|
@ -26,30 +27,29 @@ footer{
|
|||
max-width: 606px;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: $black;
|
||||
color: var(--theme-color, $black);
|
||||
display:inline-block;
|
||||
a {
|
||||
@include themeable(color, theme-color, $black);
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
&:hover{
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.inner-footer-container{
|
||||
.inner-footer-container {
|
||||
max-width: 820px;
|
||||
background: $tan;
|
||||
background: var(--theme-container-background, $tan);
|
||||
border: 1px solid darken($light-medium-gray, 2%);
|
||||
border: var(--theme-container-border, 1px solid darken($light-medium-gray, 2%));
|
||||
box-shadow: $bold-shadow;
|
||||
box-shadow: var(--theme-container-box-shadow, $bold-shadow);
|
||||
padding:50px 30px;
|
||||
@include themeable(background, theme-container-background, $tan);
|
||||
@include themeable(
|
||||
border,
|
||||
theme-container-border,
|
||||
1px solid darken($light-medium-gray, 2%)
|
||||
);
|
||||
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
|
||||
padding: 50px 30px;
|
||||
line-height: 3em;
|
||||
margin:auto;
|
||||
@media screen and ( min-width: 1250px ){
|
||||
margin: auto;
|
||||
@media screen and (min-width: 1250px) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,80 +1,74 @@
|
|||
@import 'variables';
|
||||
|
||||
.index-comments{
|
||||
text-align:left;
|
||||
padding-bottom:calc(0.6vw + 5px);
|
||||
background:white;
|
||||
background: var(--theme-container-background, white);
|
||||
border-radius:3px;
|
||||
border:1px solid $outline-color;
|
||||
border: var(--theme-container-border, 1px solid $outline-color);
|
||||
box-shadow: $bold-shadow;
|
||||
box-shadow: var(--theme-container-box-shadow, $bold-shadow);
|
||||
margin:auto;
|
||||
margin-top:8px;
|
||||
width:94%;
|
||||
@media screen and ( min-width: 950px ){
|
||||
margin-top:12px;
|
||||
@import 'mixins';
|
||||
.index-comments {
|
||||
text-align: left;
|
||||
padding-bottom: calc(0.6vw + 5px);
|
||||
@include themeable(background, theme-container-background, #fff);
|
||||
border-radius: 3px;
|
||||
@include themeable(border, theme-container-border, 1px solid $outline-color);
|
||||
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
|
||||
margin: auto;
|
||||
margin-top: 8px;
|
||||
width: 94%;
|
||||
@media screen and (min-width: 950px) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
@media screen and ( min-width: 950px ){
|
||||
width:100%;
|
||||
@media screen and (min-width: 950px) {
|
||||
width: 100%;
|
||||
}
|
||||
.breadcrumb{
|
||||
margin-top:10px;
|
||||
margin-left:5px;
|
||||
.breadcrumb {
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
text-decoration: underline;
|
||||
a{
|
||||
padding:5px 10px;
|
||||
color:$dark-gray;
|
||||
color: var(--theme-color, $dark-gray);
|
||||
font-weight:500;
|
||||
font-size:0.85em;
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
@include themeable(color, theme-color, $dark-gray);
|
||||
font-weight: 500;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
header{
|
||||
padding:calc(1vw + 3px) 13px 0.5vw;
|
||||
margin:0;
|
||||
font-size:17px;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
@media screen and ( min-width: 430px ){
|
||||
font-size:19px;
|
||||
header {
|
||||
padding: calc(1vw + 3px) 13px 0.5vw;
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
|
||||
monospace;
|
||||
@media screen and (min-width: 430px) {
|
||||
font-size: 19px;
|
||||
}
|
||||
h4{
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color:$black;
|
||||
color: var(--theme-color, $black);
|
||||
display:block;
|
||||
padding-left:13px;
|
||||
padding-right:13px;
|
||||
a {
|
||||
@include themeable(color, theme-color, $black);
|
||||
display: block;
|
||||
padding-left: 13px;
|
||||
padding-right: 13px;
|
||||
}
|
||||
.single-comment{
|
||||
padding:3px 0px;
|
||||
font-size:16px;
|
||||
&.strong-comment{
|
||||
.comment-title{
|
||||
font-weight:600;
|
||||
.single-comment {
|
||||
padding: 3px 0px;
|
||||
font-size: 16px;
|
||||
&.strong-comment {
|
||||
.comment-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.comment-date{
|
||||
font-size:0.7em;
|
||||
color:$medium-gray;
|
||||
color: var(--theme-secondary-color, $medium-gray);
|
||||
margin-left:5px;
|
||||
vertical-align:2px;
|
||||
display:inline-block;
|
||||
.comment-date {
|
||||
font-size: 0.7em;
|
||||
@include themeable(color, theme-secondary-color, $medium-gray);
|
||||
margin-left: 5px;
|
||||
vertical-align: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
.comment-preview{
|
||||
font-size:0.9em;
|
||||
color:$medium-gray;
|
||||
color: var(--theme-secondary-color, $medium-gray);
|
||||
.comment-preview {
|
||||
font-size: 0.9em;
|
||||
@include themeable(color, theme-secondary-color, $medium-gray);
|
||||
}
|
||||
@media screen and ( min-width: 430px ){
|
||||
padding:5px 0px;
|
||||
font-size:18.5px;
|
||||
@media screen and (min-width: 430px) {
|
||||
padding: 5px 0px;
|
||||
font-size: 18.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
.ltag__user__link {
|
||||
color: #111111 !important;
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
&.profile-image-link{
|
||||
&.profile-image-link {
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
&:active {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ltag__user {
|
||||
font-family: $helvetica;
|
||||
border:1px solid $light-medium-gray;
|
||||
box-shadow: $bold-shadow;
|
||||
box-shadow: var(--theme-container-box-shadow, $bold-shadow);
|
||||
border-radius:3px;
|
||||
border: 1px solid $light-medium-gray;
|
||||
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
margin: 0.95em 0 1.2em;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@media screen and (min-width: 760px) {
|
||||
margin: 0.95em auto;
|
||||
width:620px;
|
||||
width: 620px;
|
||||
}
|
||||
.ltag__user__pic {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
body {
|
||||
background: $lightest-gray;
|
||||
background: var(--theme-background, $lightest-gray);
|
||||
color: $black;
|
||||
color: var(--theme-color, $black);
|
||||
@include themeable(background, theme-background, $lightest-gray);
|
||||
@include themeable(color, theme-color, $black);
|
||||
font-family: $helvetica;
|
||||
font-size: 18px;
|
||||
padding:0 !important;
|
||||
margin:0 !important;
|
||||
margin-top:-20px !important;
|
||||
overflow-y:scroll;
|
||||
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
margin-top: -20px !important;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
|
|
@ -20,26 +18,30 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.ptr--ptr{
|
||||
margin-top:70px;
|
||||
.ptr--ptr {
|
||||
margin-top: 70px;
|
||||
margin-bottom: -70px;
|
||||
}
|
||||
|
||||
.modal-open{
|
||||
.modal-open {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
|
||||
.universal-page-content-wrapper{
|
||||
overflow:hidden;
|
||||
min-height:88vh;
|
||||
.universal-page-content-wrapper {
|
||||
overflow: hidden;
|
||||
min-height: 88vh;
|
||||
visibility: visible;
|
||||
&.stories-index,&.notifications-index,&.stories-search,&.podcast_episodes-index,&.reading_list_items-index,.tags-index,&.twitch_live_streams-show{
|
||||
margin-top:68px;
|
||||
&.stories-index,
|
||||
&.notifications-index,
|
||||
&.stories-search,
|
||||
&.podcast_episodes-index,
|
||||
&.reading_list_items-index,
|
||||
.tags-index,
|
||||
&.twitch_live_streams-show {
|
||||
margin-top: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,16 +52,16 @@ pre {
|
|||
}
|
||||
|
||||
a {
|
||||
color: $sky-blue;
|
||||
color: var(--theme-anchor-color, $sky-blue);
|
||||
text-decoration:none;
|
||||
&:hover{
|
||||
opacity:0.9;
|
||||
@include themeable(color, theme-anchor-color, $sky-blue);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&.field, &.actions {
|
||||
&.field,
|
||||
&.actions {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,24 +70,23 @@ div {
|
|||
display: none;
|
||||
}
|
||||
|
||||
pre{
|
||||
background:#29292e;
|
||||
border-radius:2px;
|
||||
overflow-x:scroll;
|
||||
font-size:11px;
|
||||
color:#eff0f9;
|
||||
line-height:1.42em;
|
||||
font-size:13px;
|
||||
width:calc(100% - 25px);
|
||||
@media screen and ( min-width: 380px ){
|
||||
font-size:15px;
|
||||
pre {
|
||||
background: #29292e;
|
||||
border-radius: 2px;
|
||||
overflow-x: scroll;
|
||||
font-size: 11px;
|
||||
color: #eff0f9;
|
||||
line-height: 1.42em;
|
||||
font-size: 13px;
|
||||
width: calc(100% - 25px);
|
||||
@media screen and (min-width: 380px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
code{
|
||||
background:#29292e;
|
||||
color:#eff0f9;
|
||||
code {
|
||||
background: #29292e;
|
||||
color: #eff0f9;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cta {
|
||||
|
|
@ -97,14 +98,17 @@ pre{
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
button{
|
||||
cursor:pointer;
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="submit"]{
|
||||
cursor:pointer;
|
||||
};
|
||||
input[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="text"],textarea, input[type="url"], input[type="email"]{
|
||||
input[type='text'],
|
||||
textarea,
|
||||
input[type='url'],
|
||||
input[type='email'] {
|
||||
outline: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue