Files

237 lines
4.4 KiB
SCSS

/*
* Container style
*/
.ps {
overflow: hidden !important;
overflow-anchor: none;
-ms-overflow-style: none;
touch-action: auto;
-ms-touch-action: auto;
}
/*
* Scrollbar rail styles
*/
.ps__rail-x {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
height: 15px;
/* there must be 'bottom' or 'top' for ps__rail-x */
bottom: 0px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-y {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
width: 15px;
/* there must be 'right' or 'left' for ps__rail-y */
right: 0;
/* please don't change 'position' */
position: absolute;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
display: block;
background-color: transparent;
}
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
opacity: 0.6;
}
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
background-color: #eee;
opacity: 0.9;
}
/*
* Scrollbar thumb styles
*/
.ps__thumb-x {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, height .2s ease-in-out;
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px;
/* there must be 'bottom' for ps__thumb-x */
bottom: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__thumb-y {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px;
/* there must be 'right' for ps__thumb-y */
right: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
background-color: #999;
height: 11px;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
background-color: #999;
width: 11px;
}
/* MS supports */
@supports (-ms-overflow-style: none) {
.ps {
overflow: auto !important;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps {
overflow: auto !important;
}
}
// ##############################
// Author : Crazychicken - Tuds
// Name : Convert Languages
// Version : 1.0.8
// Github : https://github.com/crazychicken/converthtml
// ##############################
// ### variable default colors ###
$bg_pre : #f7f7f9;
// $abbr : darken($bg_pre, 10%);
$blue-light: #4f9fcf;
// $attibute : $blue-light;
// $selector : $blue-light;
// $function : $blue-light;
$tag : #65849a;
$property : #afafaf;
$value : #e83e8c;
$variable : #fd7e14;
$quote : #20c997;
$comment : #ddd;
// ### GLOBAL ###
.amp_pre_default {
font-size: 0.9rem;
line-height: 1.4em;
position: relative;
overflow: hidden;
border-radius: 4px;
padding: 15px;
background: $bg_pre;
color: lighten($tag, 10%);
}
.amp_pre_wrap {
margin: 0;
overflow-x: auto;
padding-right: 40px;
}
.amp_tag_abbr {
top: 5px;
right: 10px;
padding: 5px;
position: absolute;
font-size: 0.85em;
color: darken($bg_pre, 10%);
background: $bg_pre;
}
.amp_fn { // funciton @
font-weight: bold;
}
.amp_cm {
.amp_fn {
font-weight: normal;
}
}
// ### END GLOBAL ###
// ##### DEFAULT #####
.amp_tag { // tab html
color: $tag;
}
.amp_pr { // property:
&,
.amp_tag {
color: $property;
}
}
.amp_vl { // value
&,
.amp_tag,
.amp_df {
color: $value;
}
}
.amp_attr, // attibute
.amp_fn, // funciton @
.amp_sl { // selector :hover, :focus ..
color: $blue-light;
}
.amp_var { // variable
color: $variable;
}
.amp_df {
&,
.amp_attr {
color: lighten($tag, 10%);
}
}
.amp_q { // comment + quote
&,
.amp_var,
.amp_attr,
.amp_cn,
.amp_tag,
.amp_q,
.amp_fn,
.amp_vl,
.amp_df {
color: $quote;
}
}
.amp_cm { // comment
&,
.amp_var,
.amp_attr,
.amp_cn,
.amp_tag,
.amp_q,
.amp_fn,
.amp_vl,
.amp_df {
color: $comment;
}
}
// ##### END DEFAULT #####