[code] used css var
This commit is contained in:
parent
4065f18b17
commit
914250526f
92
public/proton-color.css
Normal file
92
public/proton-color.css
Normal file
@ -0,0 +1,92 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/* Photon Colors CSS Variables v3.2.0 */
|
||||
|
||||
:root {
|
||||
--magenta-50: #ff1ad9;
|
||||
--magenta-60: #ed00b5;
|
||||
--magenta-70: #b5007f;
|
||||
--magenta-80: #7d004f;
|
||||
--magenta-90: #440027;
|
||||
|
||||
--purple-30: #c069ff;
|
||||
--purple-40: #ad3bff;
|
||||
--purple-50: #9400ff;
|
||||
--purple-60: #8000d7;
|
||||
--purple-70: #6200a4;
|
||||
--purple-80: #440071;
|
||||
--purple-90: #25003e;
|
||||
|
||||
--blue-40: #45a1ff;
|
||||
--blue-50: #0a84ff;
|
||||
--blue-50-a30: rgba(10, 132, 255, 0.3);
|
||||
--blue-60: #0060df;
|
||||
--blue-70: #003eaa;
|
||||
--blue-80: #002275;
|
||||
--blue-90: #000f40;
|
||||
|
||||
--teal-50: #00feff;
|
||||
--teal-60: #00c8d7;
|
||||
--teal-70: #008ea4;
|
||||
--teal-80: #005a71;
|
||||
--teal-90: #002d3e;
|
||||
|
||||
--green-50: #30e60b;
|
||||
--green-60: #12bc00;
|
||||
--green-70: #058b00;
|
||||
--green-80: #006504;
|
||||
--green-90: #003706;
|
||||
|
||||
--yellow-50: #ffe900;
|
||||
--yellow-60: #d7b600;
|
||||
--yellow-70: #a47f00;
|
||||
--yellow-80: #715100;
|
||||
--yellow-90: #3e2800;
|
||||
|
||||
--red-50: #ff0039;
|
||||
--red-60: #d70022;
|
||||
--red-70: #a4000f;
|
||||
--red-80: #5a0002;
|
||||
--red-90: #3e0200;
|
||||
|
||||
--orange-50: #ff9400;
|
||||
--orange-60: #d76e00;
|
||||
--orange-70: #a44900;
|
||||
--orange-80: #712b00;
|
||||
--orange-90: #3e1300;
|
||||
|
||||
--grey-10: #f9f9fa;
|
||||
--grey-10-a10: rgba(249, 249, 250, 0.1);
|
||||
--grey-10-a20: rgba(249, 249, 250, 0.2);
|
||||
--grey-10-a40: rgba(249, 249, 250, 0.4);
|
||||
--grey-10-a60: rgba(249, 249, 250, 0.6);
|
||||
--grey-10-a80: rgba(249, 249, 250, 0.8);
|
||||
--grey-20: #ededf0;
|
||||
--grey-30: #d7d7db;
|
||||
--grey-40: #b1b1b3;
|
||||
--grey-50: #737373;
|
||||
--grey-60: #4a4a4f;
|
||||
--grey-70: #38383d;
|
||||
--grey-80: #2a2a2e;
|
||||
--grey-90: #0c0c0d;
|
||||
--grey-90-a05: rgba(12, 12, 13, 0.05);
|
||||
--grey-90-a10: rgba(12, 12, 13, 0.1);
|
||||
--grey-90-a20: rgba(12, 12, 13, 0.2);
|
||||
--grey-90-a30: rgba(12, 12, 13, 0.3);
|
||||
--grey-90-a40: rgba(12, 12, 13, 0.4);
|
||||
--grey-90-a50: rgba(12, 12, 13, 0.5);
|
||||
--grey-90-a60: rgba(12, 12, 13, 0.6);
|
||||
--grey-90-a70: rgba(12, 12, 13, 0.7);
|
||||
--grey-90-a80: rgba(12, 12, 13, 0.8);
|
||||
--grey-90-a90: rgba(12, 12, 13, 0.9);
|
||||
|
||||
--ink-70: #363959;
|
||||
--ink-80: #202340;
|
||||
--ink-90: #0f1126;
|
||||
|
||||
--white-100: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import 'proton-color.css';
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
@ -9,7 +11,7 @@ textarea {
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
background-color: #fcd363;
|
||||
background-color: var(--yellow-50);
|
||||
}
|
||||
|
||||
button,
|
||||
@ -17,45 +19,45 @@ input[type=button] {
|
||||
border: none;
|
||||
padding: 10px 8px 10px 8px;
|
||||
min-width: 132px;
|
||||
background-color: #0060df;
|
||||
background-color: var(--blue-60);
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type=button]:hover {
|
||||
background-color: #003eaa;
|
||||
background-color: var(--blue-70);
|
||||
}
|
||||
|
||||
button:active,
|
||||
input[type=button]:active {
|
||||
background-color: #002275;
|
||||
background-color: var(--blue-80);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
input[type=button]:focus,
|
||||
button:focus-visible,
|
||||
input[type=button]:focus-visible {
|
||||
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
|
||||
box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0060df;
|
||||
color: var(--blue-60);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #0060df;
|
||||
text-decoration-color: var(--blue-60);
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #003eaa;
|
||||
color: var(--blue-70);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #003eaa;
|
||||
text-decoration-color: var(--blue-70);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
|
||||
box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
|
||||
}
|
||||
|
||||
pre {
|
||||
@ -64,7 +66,7 @@ pre {
|
||||
|
||||
.note {
|
||||
margin-right: 5px;
|
||||
color: #737373;
|
||||
color: var(--grey-50);
|
||||
}
|
||||
|
||||
#message {
|
||||
@ -74,7 +76,7 @@ pre {
|
||||
padding: 20px;
|
||||
height: 70vh;
|
||||
width: calc(100vw - 20px);
|
||||
color: #38383d;
|
||||
color: var(--grey-70);
|
||||
font-family: 'Fira Code', Consolas, monospace;
|
||||
overflow-y: scroll;
|
||||
word-wrap: break-word;
|
||||
@ -113,7 +115,7 @@ pre {
|
||||
|
||||
.msg-content {
|
||||
font-weight: 400;
|
||||
color: #737373;
|
||||
color: var(--grey-50);
|
||||
}
|
||||
|
||||
.msg-content > *:first-child {
|
||||
@ -126,17 +128,17 @@ pre {
|
||||
|
||||
.msg-private::after {
|
||||
content: " PRIVATE";
|
||||
color: #ff9400;
|
||||
color: var(--orange-50);
|
||||
}
|
||||
|
||||
.msg-from {
|
||||
font-weight: 600;
|
||||
color: #0c0c0d;
|
||||
color: var(--grey-90);
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-weight: 400;
|
||||
color: #b1b1b3;
|
||||
color: var(--grey-40);
|
||||
}
|
||||
|
||||
.msg-from::before {
|
||||
@ -144,11 +146,11 @@ pre {
|
||||
}
|
||||
|
||||
.msg-from-info {
|
||||
color: #0a84ff;
|
||||
color: var(--blue-50);
|
||||
}
|
||||
|
||||
.msg-from-cb {
|
||||
color: #0c0c0d;
|
||||
color: var(--grey-90);
|
||||
}
|
||||
|
||||
#prompt-box {
|
||||
@ -184,16 +186,16 @@ pre {
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
color: #0c0c0d;
|
||||
color: var(--grey-90);
|
||||
border: none;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
border: rgba(12, 12, 13, 0.2) 1px solid;
|
||||
border: var(--grey-90-a20) 1px solid;
|
||||
}
|
||||
|
||||
#prompt-data:focus {
|
||||
border: #0a84ff 2px solid;
|
||||
box-shadow: 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
|
||||
border: var(--blue-50) 2px solid;
|
||||
box-shadow: 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
|
||||
}
|
||||
|
||||
#prompt-background {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user