Remove unnecessary imports from css (#3743)
* Remove unnecessary imports * Remove unneeded shared.scss code and mixins * Add kbd to top
This commit is contained in:
Ben Halpern
GitHub
parent
40559a0457
commit
9dd474d12e
6 changed files with 79 additions and 214 deletions
|
|
@ -1,7 +1,20 @@
|
|||
@import 'variables';
|
||||
@import 'shared';
|
||||
@import 'mixins';
|
||||
|
||||
%kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #959da5;
|
||||
}
|
||||
|
||||
.stories-show {
|
||||
@include themeable(
|
||||
background,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,19 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'shared';
|
||||
|
||||
%kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #959da5;
|
||||
}
|
||||
|
||||
$indent-distance: calc(1.1vw + 13px);
|
||||
|
||||
|
|
|
|||
|
|
@ -172,3 +172,52 @@ input[type='email'] {
|
|||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.partner-image-dark-mode {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.night-theme {
|
||||
.on-page-nav-butt img, .icon-img, .dropdown-icon, .reaction-button:not(.reacted) img, .image-upload-button button, .icon-image,
|
||||
.dev-badge, .chatchannels__config img, .external-link-img, .group-img {
|
||||
-webkit-filter: invert(95%);
|
||||
filter: invert(95%);
|
||||
}
|
||||
.ltag__tag {
|
||||
border-color: white !important;
|
||||
box-shadow: 3px 3px 0px #fff !important;
|
||||
}
|
||||
.partner-image-dark-mode {
|
||||
display: block !important;
|
||||
}
|
||||
.partner-image-light-mode {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.sans-serif-article-body {
|
||||
.body {
|
||||
font-family: $helvetica;
|
||||
}
|
||||
.body p {
|
||||
font-family: $helvetica;
|
||||
font-size: 0.98em;
|
||||
}
|
||||
}
|
||||
body.comic-sans-article-body {
|
||||
.body {
|
||||
font-family: "Comic Sans MS", cursive, sans-serif;
|
||||
}
|
||||
.body p {
|
||||
font-family: "Comic Sans MS", cursive, sans-serif;
|
||||
font-size: 0.98em;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-visible-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.pro-status-true .pro-visible-block {
|
||||
display: block !important;;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -194,97 +194,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.live-link {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.live-article-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
.live-article-indicator-inner {
|
||||
padding: 10px 20px;
|
||||
background: white;
|
||||
border: 2px solid $dark-purple;
|
||||
box-shadow: 5px 5px 0px $dark-purple;
|
||||
border-radius: 3px;
|
||||
max-width: calc(22vw + 96px);
|
||||
min-width: 200px;
|
||||
display: none;
|
||||
@media screen and (min-width: 1410px) {
|
||||
display: block;
|
||||
}
|
||||
&:hover {
|
||||
background: darkend($light-green, 3%);
|
||||
}
|
||||
.live-pre-header {
|
||||
font-size: 1em;
|
||||
margin-top: 2px;
|
||||
margin-left: 25px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 800;
|
||||
font-family: $helvetica-condensed;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
.live-article-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 600;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.live-user {
|
||||
font-weight: bold;
|
||||
color: $dark-medium-gray;
|
||||
img {
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
border-radius: 100px;
|
||||
margin-right: 6px;
|
||||
vertical-align: -6px;
|
||||
}
|
||||
}
|
||||
.live-tags {
|
||||
margin: 8px 0px;
|
||||
color: $medium-gray;
|
||||
font-size: 0.8em;
|
||||
.live-tag {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.live-exit-button {
|
||||
border: 0px;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 8px;
|
||||
padding: 5px 10px 1px;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
background: lighten($red, 28%);
|
||||
}
|
||||
img {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
%kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #959da5;
|
||||
}
|
||||
|
||||
@keyframes grow-width {
|
||||
0% {
|
||||
width: 0%;
|
||||
|
|
@ -292,75 +201,4 @@
|
|||
100% {
|
||||
width: 140%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
.pulsating-circle {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 25px;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
box-sizing: border-box;
|
||||
margin-left: -25%;
|
||||
margin-top: -25%;
|
||||
border-radius: 45px;
|
||||
background-color: $dark-purple;
|
||||
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $dark-purple;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(0.33);
|
||||
}
|
||||
80%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -34,52 +34,3 @@ $bold-shadow: 1px 1px 0px darken($light-medium-gray, 10%);
|
|||
|
||||
$ease-in-cubic : cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
$ease-out-cubic : cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
.partner-image-dark-mode {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.night-theme {
|
||||
.on-page-nav-butt img, .icon-img, .dropdown-icon, .reaction-button:not(.reacted) img, .image-upload-button button, .icon-image,
|
||||
.dev-badge, .chatchannels__config img, .external-link-img, .group-img {
|
||||
-webkit-filter: invert(95%);
|
||||
filter: invert(95%);
|
||||
}
|
||||
.ltag__tag {
|
||||
border-color: white !important;
|
||||
box-shadow: 3px 3px 0px #fff !important;
|
||||
}
|
||||
.partner-image-dark-mode {
|
||||
display: block !important;
|
||||
}
|
||||
.partner-image-light-mode {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.sans-serif-article-body {
|
||||
.body {
|
||||
font-family: $helvetica;
|
||||
}
|
||||
.body p {
|
||||
font-family: $helvetica;
|
||||
font-size: 0.98em;
|
||||
}
|
||||
}
|
||||
body.comic-sans-article-body {
|
||||
.body {
|
||||
font-family: "Comic Sans MS", cursive, sans-serif;
|
||||
}
|
||||
.body p {
|
||||
font-family: "Comic Sans MS", cursive, sans-serif;
|
||||
font-size: 0.98em;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-visible-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.pro-status-true .pro-visible-block {
|
||||
display: block !important;;
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<meta itemprop="contentUrl" content="<%= article.video_source_url %>" />
|
||||
<% minutes, seconds = article.video_duration_in_minutes.split(":") %>
|
||||
<meta itemprop="duration" content="<%= format("PT%<minutes>sM%<seconds>sS", minutes: minutes, seconds: seconds) %>" />
|
||||
<div id="video-player-source" data-source="<%= article.video_source_url %>"></div>
|
||||
<% end %>
|
||||
<script src="//content.jwplatform.com/libraries/b1zWy2iv.js" async></script>
|
||||
<div id="video-player-<%= article.id %>" class="video-player"></div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue