mirror of
https://github.com/LBRYFoundation/lbry.com.git
synced 2025-08-23 17:47:26 +00:00
202 lines
No EOL
4.4 KiB
SCSS
202 lines
No EOL
4.4 KiB
SCSS
@charset "UTF-8";
|
|
|
|
$spacing-vertical: 24px;
|
|
|
|
$color-primary: #155B4A;
|
|
$color-light-alt: hsl(hue($color-primary), 15, 85);
|
|
$color-text-dark: #000;
|
|
$color-money: #216C2A;
|
|
$color-meta-light: #505050;
|
|
$color-meta-lighter: #999999;
|
|
$color-meta-dark: #dddddd;
|
|
$color-content-light: #333333;
|
|
$color-content-dark: #e8e8e8;
|
|
$color-info-bg: #3a779d;
|
|
|
|
$font-size: 16px;
|
|
$line-height: $font-size * 1.5;
|
|
|
|
$width-mobile-max: 799px;
|
|
$width-laptop-min: 800px;
|
|
$width-laptop-max: 1599px;
|
|
$width-desktop-min: 1600px;
|
|
|
|
$max-content-width: 1000px;
|
|
$max-text-width: 660px;
|
|
$max-post-content-width: 800px;
|
|
|
|
$font-header: 'Raleway', sans-serif;
|
|
$font-body: 'Raleway', sans-serif;
|
|
$font-mono: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif;
|
|
|
|
$font-size-h1: 2.4em;
|
|
$font-size-h2: 2.0em;
|
|
$font-size-h3: 1.75em;
|
|
$font-size-h4: 1.4em;
|
|
|
|
$content-side-padding: 15px;
|
|
|
|
$success_bg: #dff0d8;
|
|
$success_border: #d6e9c6;
|
|
$success_text: #468847;
|
|
|
|
$warning_bg: #fff6bf;
|
|
$warning_border: #f89406;
|
|
$warning_text: #514721;
|
|
|
|
$error_bg: #f2dede;
|
|
$error_border: #eed3d7;
|
|
$error_text: #b94a48;
|
|
|
|
$info_bg: #d9edf7;
|
|
$info_border: #bce8f1;
|
|
$info_text: #3a87ad;
|
|
|
|
@mixin anchor($color)
|
|
{
|
|
color: $color;
|
|
text-decoration: underline;
|
|
[class*="icon-"]:first-child
|
|
{
|
|
padding-right: 8px;
|
|
}
|
|
[class*="icon-"]:last-child
|
|
{
|
|
padding-left: 8px;
|
|
}
|
|
}
|
|
|
|
@mixin clearfix()
|
|
{
|
|
&:before, &:after
|
|
{
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
&:after
|
|
{
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@mixin border-radius($radius)
|
|
{
|
|
-webkit-border-radius: $radius;
|
|
-moz-border-radius: $radius;
|
|
-ms-border-radius: $radius;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
@mixin display-flex()
|
|
{
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
@mixin flex($columns)
|
|
{
|
|
-webkit-flex: $columns;
|
|
-moz-flex: $columns;
|
|
-ms-flex: $columns;
|
|
flex: $columns;
|
|
}
|
|
|
|
@mixin flex-flow($flow) {
|
|
-webkit-flex-flow: $flow;
|
|
-moz-flex-flow: $flow;
|
|
-ms-flex-flow: $flow;
|
|
flex-flow: $flow;
|
|
}
|
|
|
|
@mixin flex-direction($direction) {
|
|
-webkit-flex-direction: $direction;
|
|
-moz-flex-direction: $direction;
|
|
-ms-flex-direction: $direction;
|
|
flex-direction: $direction;
|
|
}
|
|
|
|
@mixin flex-wrap($wrap) {
|
|
-webkit-flex-wrap: $wrap;
|
|
flex-wrap: $wrap;
|
|
}
|
|
|
|
|
|
@mixin justify-content($location) {
|
|
-webkit-justify-content: $location;
|
|
justify-content: $location;
|
|
}
|
|
|
|
@mixin absolute-center()
|
|
{
|
|
@include display-flex();
|
|
-webkit-box-align: center;
|
|
-moz-box-align: center;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-moz-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
@include justify-content(center);
|
|
}
|
|
|
|
@mixin linear-gradient($from-color, $to-color) {
|
|
background-color: $to-color; /* Fallback Color */
|
|
background-image: -webkit-linear-gradient(top, $from-color, $to-color); /* Chrome 10+, Saf5.1+, iOS 5+ */
|
|
background-image: -moz-linear-gradient(top, $from-color, $to-color); /* FF3.6 */
|
|
background-image: -ms-linear-gradient(top, $from-color, $to-color); /* IE10 */
|
|
background-image: linear-gradient(top, $from-color, $to-color);
|
|
}
|
|
|
|
@mixin box-sizing( $type: border-box ) {
|
|
-webkit-box-sizing: $type;
|
|
-moz-box-sizing: $type;
|
|
-o-box-sizing: $type;
|
|
-ms-box-sizing: $type;
|
|
box-sizing: $type;
|
|
}
|
|
|
|
@mixin background-size ($size) {
|
|
-webkit-background-size: $size;
|
|
-moz-background-size: $size;
|
|
-o-background-size: $size;
|
|
background-size: $size;
|
|
}
|
|
|
|
@mixin offscreen() {
|
|
position: absolute;
|
|
left: -9999px;
|
|
top:auto;
|
|
width:1px;
|
|
height:1px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
|
|
@mixin user-select ($value) {
|
|
-webkit-user-select: $value;
|
|
-moz-user-select: $value;
|
|
-ms-user-select: $value;
|
|
user-select: $value;
|
|
}
|
|
|
|
@mixin transition($transition-property, $transition-time, $method) {
|
|
-webkit-transition: $transition-property $transition-time $method;
|
|
-moz-transition: $transition-property $transition-time $method;
|
|
-ms-transition: $transition-property $transition-time $method;
|
|
-o-transition: $transition-property $transition-time $method;
|
|
transition: $transition-property $transition-time $method;
|
|
}
|
|
|
|
@mixin jumpingScrollbarFix() {
|
|
/*
|
|
// Fix for jumping scrollbar: https://aykevl.nl/2014/09/fix-jumping-scrollbar
|
|
//@media screen and (min-width: 35em) {
|
|
// margin-left: calc(100vw - 100%);
|
|
// margin-right: 0;
|
|
}
|
|
*/
|
|
} |