151 lines
3.4 KiB
SCSS
151 lines
3.4 KiB
SCSS
/////////////////////// Styles for Telegraf plugin cards ///////////////////////
|
|
|
|
.plugin-card {
|
|
position: relative;
|
|
padding: 1rem 1.5rem;
|
|
margin-bottom: .5rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba($body-bg, .4);
|
|
border-radius: $radius;
|
|
|
|
h3 {
|
|
padding: 0;
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
&.new h3:after {
|
|
content: "New";
|
|
margin-left: .3rem;
|
|
padding: .25rem .5rem;
|
|
font-style: italic;
|
|
color: $nav-active;
|
|
font-size: 1.2rem;
|
|
opacity: 1;
|
|
}
|
|
|
|
p {
|
|
&.meta {
|
|
margin: .75rem 0;
|
|
font-weight: $medium;
|
|
line-height: 1.75rem;
|
|
|
|
.deprecated {
|
|
margin-left: .5rem;
|
|
font-style: italic;
|
|
color: $article-code-accent7;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.external {
|
|
position: relative;
|
|
margin: 0 0 0 -.25rem;
|
|
display: inline-block;
|
|
padding: .4rem .85rem;
|
|
background-color: rgba($article-text, .1);
|
|
border-radius: 1rem;
|
|
font-size: .9rem;
|
|
font-weight: $medium;
|
|
color: $article-text;
|
|
|
|
&:after {
|
|
content: "?";
|
|
position: absolute;
|
|
display: block;
|
|
top: -3px;
|
|
right: -3px;
|
|
padding: 0.1rem 0.3rem .04rem;
|
|
color: $g20-white;
|
|
@include gradient($article-btn-gradient);
|
|
border-radius: 50%;
|
|
font-weight: bold;
|
|
line-height: .8rem;
|
|
font-size: .7rem;
|
|
box-shadow: 1px 1px 4px $sidebar-search-shadow;
|
|
opacity: 0;
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
&:hover {
|
|
color: $article-text;
|
|
&:after {opacity: 1;}
|
|
}
|
|
}
|
|
|
|
& .info {
|
|
& > p:last-child { margin-bottom: .5rem; }
|
|
& > ul:last-child { margin-bottom: .5rem; }
|
|
& > ol:last-child { margin-bottom: .5rem; }
|
|
}
|
|
|
|
.github-link {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0.5rem;
|
|
opacity: 0.25;
|
|
transition: opacity .2s, background .2s, color .2s;
|
|
@include gradient($article-btn-gradient);
|
|
|
|
.icon-github {
|
|
font-size: 1.2rem;
|
|
margin: 0 .25rem 0 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.github-link {
|
|
opacity: 1;
|
|
@include gradient($article-btn-gradient);
|
|
}
|
|
}
|
|
|
|
// Special use-case for using block quotes in the yaml provided by the data file
|
|
blockquote {
|
|
border-color: $article-note-base;
|
|
background: rgba($article-note-base, .12);
|
|
h3,h4,h5,h6 { color: $article-note-heading; }
|
|
p, li {
|
|
color: $article-note-text;
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
}
|
|
strong { color: inherit; }
|
|
a {
|
|
color: $article-note-link;
|
|
code:after {
|
|
border-color: transparent rgba($article-note-code, .35) transparent transparent;
|
|
}
|
|
&:hover {
|
|
color: $article-note-link-hover;
|
|
code:after {
|
|
border-color: transparent $article-note-link-hover transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
ol li:before { color: $article-note-text; }
|
|
code, pre{
|
|
color: $article-note-code;
|
|
background: $article-note-code-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(small) {
|
|
|
|
.plugin-card {
|
|
.github-link {
|
|
opacity: 1;
|
|
@include gradient($article-btn-gradient)
|
|
padding: .25rem .35rem .35rem;
|
|
line-height: 0;
|
|
.icon-github { margin: 0; }
|
|
.hide { display: none; }
|
|
}
|
|
}
|
|
}
|