pebble/devsite/source/_sass/elements/highlight.scss
2025-02-24 18:58:29 -08:00

297 lines
4 KiB
SCSS

/**
* Copyright 2025 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.highlight {
background-color: $gray-07;
border-radius: $base-border-radius;
color: #f8f8f2;
font: 13px/1.3em $monospace;
margin: 0 0 0.75em;
padding: 10px;
position: relative;
@include bp-max (xs) {
font-size: 12px;
}
&.squished {
border-radius: 0;
margin: 0;
}
pre {
margin: 0;
overflow-x: auto;
}
.code-copy-link {
background-color: $turquoise;
border-radius: $base-border-radius;
color: $white;
opacity: 0.1;
padding: 0.3em 0.3em 0.3em 0.35em;
position: absolute;
right: 0.4em;
top: 0.4em;
transition: opacity 0.2s;
&.zeroclipboard-is-hover {
opacity: 1;
}
span {
display: inline-block;
margin-right: 0.5em;
}
}
&:hover {
.code-copy-link {
opacity: 1;
}
}
// Error
.err {
background-color: #1e0010;
color: #960050;
}
// Keyword
.k {
color: #66d9ef;
}
// Literal
.l {
color: #ae81ff;
}
// Name
.n {
color: #f8f8f2;
}
// Operator
.o {
color: #f92672;
}
// Punctuation
.p {
color: #f8f8f2;
}
// Comment.Multiline
// Comment.Preproc
// Comment.Single
// Comment.Special
// Comment
.c,
.cm,
.cp,
.c1,
.cs {
color: #e4b21f;
font-weight: 600;
}
// Generic.Emph
.ge {
font-style: italic;
}
// Generic.Strong
.gs {
font-weight: bold;
}
// Keyword.Constant
// Keyword.Declaration
.kc,
.kd {
color: #66d9ef;
}
// Keyword.Namespace
.kn {
color: #f92672;
}
// Keyword.Pseudo
// Keyword.Reserved
// Keyword.Type
.kp,
.kr,
.kt {
color: #66d9ef;
}
// Literal.Date
.ld {
color: #e6db74;
}
// Literal.Number
.m {
color: #ae81ff;
}
// Literal.String
.s {
color: #e6db74;
}
// Name.Attribute
.na {
color: #a6e22e;
}
// Name.Builtin
.nb {
color: #f8f8f2;
}
// Name.Class
.nc {
color: #a6e22e;
}
// Name.Constant
.no {
color: #66d9ef;
}
// Name.Decorator
.nd {
color: #a6e22e;
}
// Name.Entity
.ni {
color: #f8f8f2;
}
// Name.Exception
// Name.Function
.ne,
.nf {
color: #a6e22e;
}
// Name.Label
// Name.Namespace
.nl,
.nn {
color: #f8f8f2;
}
// Name.Other
.nx {
color: #a6e22e;
}
// Name.Property
.py {
color: #f8f8f2;
}
// Name.Tag
.nt {
color: #f92672;
}
// Name.Variable
.nv {
color: #f8f8f2;
}
// Operator.Word
.ow {
color: #f92672;
}
// Text.Whitespace
.w {
color: #f8f8f2;
}
// Literal.Number.Float
// Literal.Number.Hex
// Literal.Number.Integer
// Literal.Number.Oct
.mf,
.mh,
.mi,
.mo {
color: #ae81ff;
}
// Literal.String.Backtick
// Literal.String.Char
// Literal.String.Doc
// Literal.String.Double
.sb,
.sc,
.sd,
.s2 {
color: #e6db74;
}
// Literal.String.Escape
.se {
color: #ae81ff;
}
// Literal.String.Heredoc
// Literal.String.Interpol
// Literal.String.Other
// Literal.String.Regex
// Literal.String.Single
// Literal.String.Symbol
.sh,
.si,
.sx,
.sr,
.s1,
.ss {
color: #e6db74;
}
// Name.Builtin.Pseudo
// Name.Variable.Class
// Name.Variable.Global
// Name.Variable.Instance
.bp,
.vc,
.vg,
.vi {
color: #f8f8f2;
}
// Literal.Number.Integer.Long
.il {
color: #ae81ff;
}
}
.modal-content .highlight {
position: relative;
}
.highlight--large {
font: 15px/1.3em $monospace;
}