237 lines
4.4 KiB
SCSS
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 #####
|