You've already forked mattlution
'初始化提交'
This commit is contained in:
94
www/css/atom-one-light.css
Normal file
94
www/css/atom-one-light.css
Normal file
@@ -0,0 +1,94 @@
|
||||
/*
|
||||
|
||||
Atom One Light by Daniel Gamage
|
||||
Original One Light Syntax theme from https://github.com/atom/one-light-syntax
|
||||
|
||||
base: #fafafa
|
||||
mono-1: #383a42
|
||||
mono-2: #686b77
|
||||
mono-3: #a0a1a7
|
||||
hue-1: #0184bb
|
||||
hue-2: #4078f2
|
||||
hue-3: #a626a4
|
||||
hue-4: #50a14f
|
||||
hue-5: #e45649
|
||||
hue-5-2: #c91243
|
||||
hue-6: #986801
|
||||
hue-6-2: #c18401
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
color: #383a42;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #a0a1a7;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-formula {
|
||||
color: #a626a4;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name,
|
||||
.hljs-selector-tag,
|
||||
.hljs-deletion,
|
||||
.hljs-subst {
|
||||
color: #e45649;
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #0184bb;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta .hljs-string {
|
||||
color: #50a14f;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-number {
|
||||
color: #986801;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-title {
|
||||
color: #4078f2;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-title.class_,
|
||||
.hljs-class .hljs-title {
|
||||
color: #c18401;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
361
www/css/style.css
Normal file
361
www/css/style.css
Normal file
@@ -0,0 +1,361 @@
|
||||
:root {
|
||||
--alertFontSize: 0.15rem;
|
||||
--alertTheme: #fff6dc;
|
||||
--alertBg: transparent;
|
||||
--alertColor: #9b6e44;
|
||||
--confirmFontSize: 0.15rem;
|
||||
--confirmBg: rgba(0, 0, 0, 0);
|
||||
}
|
||||
#Pd_loader {
|
||||
font-size: 0.15rem !important;
|
||||
}
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
label {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
outline: none;
|
||||
background: none;
|
||||
border: none;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
html {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background: #fff;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
/* 自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #aaa;
|
||||
}
|
||||
/* 复制按钮 */
|
||||
.btn-copy {
|
||||
background-image: url(../icon/icon-copy.svg);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translate(150%, 0);
|
||||
}
|
||||
/* 菜单按钮 */
|
||||
.btn-menu {
|
||||
background-image: url(../icon/icon-menu.svg);
|
||||
background-size: 1.5em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right bottom;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 侧边栏 */
|
||||
menu {
|
||||
width: 40vw;
|
||||
height: 100vh;
|
||||
background: #f6f6f6;
|
||||
position: absolute;
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.15);
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
padding: 5%;
|
||||
font-size: 0.85em;
|
||||
color: #828282;
|
||||
transform: translateX(calc(-1 * 100% - 20px));
|
||||
transition: transform 0.2s ease-out;
|
||||
font-weight: bold;
|
||||
}
|
||||
menu[open] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
menu li {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
}
|
||||
menu li a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1em;
|
||||
}
|
||||
menu li a::before {
|
||||
content: "";
|
||||
width: 1.1em;
|
||||
height: 1.1em;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
.menu_favo::before {
|
||||
background-image: url(../icon/icon-favo.svg);
|
||||
}
|
||||
section {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 0.18rem;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
section .content {
|
||||
width: calc(100% + 20px);
|
||||
height: calc(100% - 10em - 5vh - 20px);
|
||||
flex-shrink: 0;
|
||||
font-size: 0.85em;
|
||||
position: relative;
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
section article {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 10px 10px 40px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
section article .left,
|
||||
section article .right {
|
||||
margin: 10px 0;
|
||||
line-height: 1.5;
|
||||
max-width: 90%;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
border-radius: 10px;
|
||||
font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35);
|
||||
position: relative;
|
||||
}
|
||||
section article .left {
|
||||
float: left;
|
||||
background: linear-gradient(to bottom, #fdfdfd, #f9f9f9);
|
||||
border-top-left-radius: 0;
|
||||
color: #656565;
|
||||
}
|
||||
section article .left.pending::before {
|
||||
content: "...";
|
||||
animation: pending 0.6s infinite linear;
|
||||
}
|
||||
@keyframes pending {
|
||||
0% {
|
||||
content: ".";
|
||||
}
|
||||
33% {
|
||||
content: "..";
|
||||
}
|
||||
66% {
|
||||
content: "...";
|
||||
}
|
||||
100% {
|
||||
content: ".";
|
||||
}
|
||||
}
|
||||
section article .right {
|
||||
float: right;
|
||||
background: linear-gradient(to bottom, #ebf1ff, #e8efff);
|
||||
color: #455d8a;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
section textarea {
|
||||
font-size: 0.8em;
|
||||
width: 95%;
|
||||
height: 6em;
|
||||
resize: none;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto 2vh auto;
|
||||
font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background: #f6f6f6;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
section textarea::placeholder {
|
||||
color: #d1d1d1;
|
||||
}
|
||||
section textarea:focus {
|
||||
outline: #40a9ff solid 1px;
|
||||
}
|
||||
section .buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
section .buttons button {
|
||||
font-size: 0.8em;
|
||||
border-radius: 10px;
|
||||
margin: 0 0.5em;
|
||||
padding: 10px 30px;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
color: #828282;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.5s ease-in-out;
|
||||
border: 1px solid #e6e6e6;
|
||||
}
|
||||
section .buttons button:active {
|
||||
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.08);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
section .buttons #reload {
|
||||
background: #d06968;
|
||||
color: white;
|
||||
}
|
||||
section .buttons #reload:disabled {
|
||||
background: #f6d1d0;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
section .buttons #submit {
|
||||
background: #eff4e6;
|
||||
color: #7bb234;
|
||||
font-weight: bold;
|
||||
}
|
||||
section .buttons #submit:disabled {
|
||||
background: #fafcf7;
|
||||
color: #dae9c0;
|
||||
pointer-events: none;
|
||||
}
|
||||
section article > pre,
|
||||
section article p {
|
||||
margin: 0;
|
||||
white-space: break-spaces;
|
||||
word-break: break-all;
|
||||
}
|
||||
section article p > * {
|
||||
margin: inherit;
|
||||
white-space: inherit;
|
||||
word-break: inherit;
|
||||
}
|
||||
section article > pre {
|
||||
background: #fafafa;
|
||||
padding: 1em;
|
||||
border-radius: 15px;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
section article a {
|
||||
color: #f6bd60;
|
||||
}
|
||||
section .toolbar {
|
||||
width: 90%;
|
||||
font-size: 0.6em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1.5vh 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
section .toolbar span {
|
||||
color: #828282;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
section .toolbar span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.toolbar .checkbox {
|
||||
font-size: 0.5em;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 5.5em;
|
||||
height: 3em;
|
||||
border-radius: 1.5em;
|
||||
transition: 350ms;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
|
||||
box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.toolbar .checkbox::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
border-radius: 50%;
|
||||
transition: 250ms ease-in-out;
|
||||
background: linear-gradient(#f5f5f5 10%, #eeeeee);
|
||||
box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.5em 0.3em -0.1em rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.toolbar .checkbox::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
top: 1em;
|
||||
left: 6em;
|
||||
border-radius: 50%;
|
||||
transition: 250ms ease-in;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ddd;
|
||||
box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.toolbar input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
.toolbar input[type="checkbox"].active + .checkbox::after {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #4c6;
|
||||
box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.toolbar input[type="checkbox"].active + .checkbox::before {
|
||||
left: 3em;
|
||||
}
|
||||
section .toolbar dfn {
|
||||
margin-left: 1em;
|
||||
font-style: normal;
|
||||
}
|
||||
.toolbar .creativity {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.toolbar .creativity input {
|
||||
width: 4em;
|
||||
margin: 0 0.5em;
|
||||
background: #ededed;
|
||||
height: 0.3em;
|
||||
}
|
||||
/* 修改滑块样式 */
|
||||
.toolbar .creativity input::-webkit-slider-thumb {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(#f5f5f5 10%, #eeeeee);
|
||||
box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.5em 0.3em -0.1em rgba(0, 0, 0, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
.toolbar .creativity dfn {
|
||||
margin-left: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user