User:11LAM11/common.css:修订间差异
小无编辑摘要 |
小无编辑摘要 |
||
(未显示同一用户的2个中间版本) | |||
第1行: | 第1行: | ||
/* General styles for the code viewer container */ | /* General styles for the code viewer container */ | ||
.code-viewer-container { | .code-viewer-container { | ||
font-family: 'consolas', Menlo, sans-serif; | font-family: 'consolas', 'Menlo', sans-serif; | ||
margin: 5px; | margin: 5px; | ||
border-radius: 5px; | border-radius: 5px; | ||
background: # | background: #40404b; | ||
border: #aaaaaf 1px solid; | border: #aaaaaf 1px solid; | ||
user-select: none; | user-select: none; | ||
-webkit-user-select: none; | -webkit-user-select: none; | ||
box-shadow: 0 0 10px #000000aa; | box-shadow: 0 0 10px #000000aa; | ||
min-width: | min-width: 310px; | ||
max-width: | max-width: 450px; | ||
width: | width: 450px; | ||
overflow: hidden; | |||
animation: fadeIn .2s cubic-bezier(0.215, 0.610, 0.355, 1) .2s 1 both running; | |||
-webkit-animation: fadeIn .2s cubic-bezier(0.215, 0.610, 0.355, 1) .2s 1 both running; | |||
} | } | ||
span { | |||
font-family: 'Consolas', 'Menlo', sans-serif; | font-family: 'Consolas', 'Menlo', sans-serif; | ||
outline: none; | outline: none; | ||
border: none; | border: none; | ||
appearance: none; | |||
background: none; | |||
-webkit-appearance: none; | |||
font-size: 15px; | font-size: 15px; | ||
white-space: nowrap; | |||
font-style: normal; | |||
z-index: 1; | |||
} | } | ||
第62行: | 第71行: | ||
.code-content { | .code-content { | ||
font-family: 'Consolas', 'Menlo', sans-serif; | font-family: 'Consolas', 'Menlo', sans-serif; | ||
padding: | padding: 8px 15px 10px 15px; | ||
border-radius: 0px 0px 5px 5px; | border-radius: 0px 0px 5px 5px; | ||
background: # | background: #1f1f25; | ||
overflow: hidden; | |||
} | |||
.line { | |||
color: #ffffff99; | |||
z-index: 1; | |||
line-height: 25px; | |||
} | |||
/* Indents */ | |||
.pre-space-1 { | |||
background: #202531; | |||
padding: 0.3em 0 0.3em 0; | |||
color: #ffffff33; | |||
} | |||
.pre-space-2 { | |||
background: #292127; | |||
padding: 0.3em 0 0.3em 0; | |||
color: #ffffff33; | |||
} | } | ||
第132行: | 第160行: | ||
white-space: pre; | white-space: pre; | ||
border: none; | border: none; | ||
} | |||
/* Mobile */ | |||
@media only screen and (max-width: 600px) { | |||
.code-viewer-container { | |||
max-width: 380px; | |||
width: 380px; | |||
} | |||
.window-controls { | |||
top: 2.5%; | |||
} | |||
span { | |||
font-size: 13px; | |||
} | |||
.line { | |||
line-height: 20px; | |||
} | |||
} | |||
@media screen and (max-width: 450px) { | |||
.code-content { | |||
padding: 5px 10px; | |||
} | |||
.code-viewer-container { | |||
max-width: 320px; | |||
width: 320px; | |||
} | |||
span { | |||
font-size: 11px; | |||
font-weight: bold; | |||
} | |||
.line { | |||
line-height: 16px; | |||
} | |||
} | |||
/* Animation */ | |||
@keyframes fadeIn { | |||
from { | |||
opacity: 0; | |||
scale: 0.9; | |||
} | |||
to { | |||
opacity: 1; | |||
scale: 1; | |||
} | |||
} | } |
2024年3月24日 (日) 16:51的最新版本
/* General styles for the code viewer container */
.code-viewer-container {
font-family: 'consolas', 'Menlo', sans-serif;
margin: 5px;
border-radius: 5px;
background: #40404b;
border: #aaaaaf 1px solid;
user-select: none;
-webkit-user-select: none;
box-shadow: 0 0 10px #000000aa;
min-width: 310px;
max-width: 450px;
width: 450px;
overflow: hidden;
animation: fadeIn .2s cubic-bezier(0.215, 0.610, 0.355, 1) .2s 1 both running;
-webkit-animation: fadeIn .2s cubic-bezier(0.215, 0.610, 0.355, 1) .2s 1 both running;
}
span {
font-family: 'Consolas', 'Menlo', sans-serif;
outline: none;
border: none;
appearance: none;
background: none;
-webkit-appearance: none;
font-size: 15px;
white-space: nowrap;
font-style: normal;
z-index: 1;
}
/* Style for the window controls (red, yellow, green circles) */
.window-controls {
position: relative;
top: 7px;
}
.window-controls div {
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
border: 2px solid #00000033;
}
.red-circle {
background: #f04545;
left: 10px;
}
.yellow-circle {
background: #ffba00;
left: 35px;
}
.green-circle {
background: #0faa58;
left: 60px;
}
/* Style for the file name */
.file-name {
font-size: 13px;
font-family: sans-serif;
text-align: center;
margin: 5px;
color: #fafaff;
}
/* Styles for the code content */
.code-content {
font-family: 'Consolas', 'Menlo', sans-serif;
padding: 8px 15px 10px 15px;
border-radius: 0px 0px 5px 5px;
background: #1f1f25;
overflow: hidden;
}
.line {
color: #ffffff99;
z-index: 1;
line-height: 25px;
}
/* Indents */
.pre-space-1 {
background: #202531;
padding: 0.3em 0 0.3em 0;
color: #ffffff33;
}
.pre-space-2 {
background: #292127;
padding: 0.3em 0 0.3em 0;
color: #ffffff33;
}
/* Styles for XML comments */
.xml-comment {
font-style: italic;
color: #439970;
border: none;
}
.xml-tag {
font-style: italic;
color: #64cd9a;
border: none;
}
/* Styles for C# keywords */
.cs-keyword {
color: #ec5aec;
border: none;
}
/* Styles for C# types and method names */
.cs-type {
color: #48ffff;
border: none;
}
.cs-method {
color: #e6c56b;
border: none;
}
/* Styles for C# literals and miscellaneous */
.cs-literal {
color: #62f0ba;
border: none;
}
.cs-comment {
color: #439970;
border: none;
}
.cs-punctuation {
color: #45caff;
border: none;
}
.cs-switch {
color: #ffc94b;
border: none;
}
.cs-brace {
color: #ff6695;
border: none;
}
.cs-normal {
color: #6fccca;
border: none;
}
/* Styles for preformatted text spaces */
.pre-space {
white-space: pre;
border: none;
}
/* Mobile */
@media only screen and (max-width: 600px) {
.code-viewer-container {
max-width: 380px;
width: 380px;
}
.window-controls {
top: 2.5%;
}
span {
font-size: 13px;
}
.line {
line-height: 20px;
}
}
@media screen and (max-width: 450px) {
.code-content {
padding: 5px 10px;
}
.code-viewer-container {
max-width: 320px;
width: 320px;
}
span {
font-size: 11px;
font-weight: bold;
}
.line {
line-height: 16px;
}
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
scale: 0.9;
}
to {
opacity: 1;
scale: 1;
}
}