rax-medical/src/assets/css/global.scss

306 lines
5.8 KiB
SCSS
Raw Normal View History

2023-11-10 17:45:10 +08:00
$main-color: #006080;
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
span,
p {
word-wrap: break-word;
}
p,
h3 {
margin: 0;
}
ul,
li {
margin: 0;
list-style: none;
}
#app {
width: 100%;
height: 100%;
}
* {
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
background: transparent;
border-radius: 0;
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border: 0;
background-color: rgba($main-color, .5);
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
border: 0;
background-color: $main-color;
}
// 震动
.shake_1 {
animation: shake_1 .2s ease-out;
}
@keyframes shake_1 {
2% {
transform: translate(-.5px, .5px) rotate(-.5deg);
}
4% {
transform: translate(2.5px, .5px) rotate(-.5deg);
}
6% {
transform: translate(-.5px, 1.5px) rotate(1.5deg);
}
8% {
transform: translate(.5px, .5px) rotate(-.5deg);
}
10% {
transform: translate(-.5px, -1.5px) rotate(-.5deg);
}
12% {
transform: translate(.5px, -.5px) rotate(1.5deg);
}
14% {
transform: translate(1.5px, 2.5px) rotate(-.5deg);
}
16% {
transform: translate(-.5px, -.5px) rotate(.5deg);
}
18% {
transform: translate(2.5px, .5px) rotate(.5deg);
}
20% {
transform: translate(.5px, -1.5px) rotate(-.5deg);
}
22% {
transform: translate(2.5px, 2.5px) rotate(-.5deg);
}
24% {
transform: translate(2.5px, 1.5px) rotate(1.5deg);
}
26% {
transform: translate(.5px, 1.5px) rotate(-.5deg);
}
28% {
transform: translate(1.5px, .5px) rotate(.5deg);
}
30% {
transform: translate(-1.5px, 2.5px) rotate(1.5deg);
}
32% {
transform: translate(.5px, .5px) rotate(.5deg);
}
34% {
transform: translate(.5px, 1.5px) rotate(1.5deg);
}
36% {
transform: translate(2.5px, -.5px) rotate(1.5deg);
}
38% {
transform: translate(.5px, 1.5px) rotate(1.5deg);
}
40% {
transform: translate(2.5px, 1.5px) rotate(1.5deg);
}
42% {
transform: translate(2.5px, -1.5px) rotate(.5deg);
}
44% {
transform: translate(.5px, -.5px) rotate(.5deg);
}
46% {
transform: translate(1.5px, -1.5px) rotate(.5deg);
}
48% {
transform: translate(-1.5px, -.5px) rotate(.5deg);
}
50% {
transform: translate(2.5px, -1.5px) rotate(1.5deg);
}
52% {
transform: translate(.5px, 1.5px) rotate(.5deg);
}
54% {
transform: translate(2.5px, -.5px) rotate(.5deg);
}
56% {
transform: translate(2.5px, 2.5px) rotate(.5deg);
}
58% {
transform: translate(2.5px, 1.5px) rotate(-.5deg);
}
60% {
transform: translate(1.5px, 1.5px) rotate(-.5deg);
}
62% {
transform: translate(-.5px, .5px) rotate(-.5deg);
}
64% {
transform: translate(2.5px, 1.5px) rotate(-.5deg);
}
66% {
transform: translate(-1.5px, .5px) rotate(1.5deg);
}
68% {
transform: translate(1.5px, -1.5px) rotate(.5deg);
}
70% {
transform: translate(.5px, .5px) rotate(-.5deg);
}
72% {
transform: translate(-.5px, 1.5px) rotate(1.5deg);
}
74% {
transform: translate(-1.5px, 1.5px) rotate(1.5deg);
}
76% {
transform: translate(2.5px, -.5px) rotate(.5deg);
}
78% {
transform: translate(2.5px, 2.5px) rotate(.5deg);
}
80% {
transform: translate(-1.5px, 2.5px) rotate(.5deg);
}
82% {
transform: translate(-1.5px, -.5px) rotate(.5deg);
}
84% {
transform: translate(.5px, 1.5px) rotate(-.5deg);
}
86% {
transform: translate(-.5px, 2.5px) rotate(.5deg);
}
88% {
transform: translate(2.5px, 2.5px) rotate(1.5deg);
}
90% {
transform: translate(-.5px, -1.5px) rotate(-.5deg);
}
92% {
transform: translate(1.5px, .5px) rotate(.5deg);
}
94% {
transform: translate(-.5px, -.5px) rotate(.5deg);
}
96% {
transform: translate(1.5px, .5px) rotate(1.5deg);
}
98% {
transform: translate(.5px, -.5px) rotate(1.5deg);
}
0%,
100% {
transform: translate(0, 0) rotate(0);
}
}
.el-select-dropdown__item.selected {
color: #006080;
}
.el-select {
--el-select-input-focus-border-color: #006080;
}
.el-dialog {
.el-dialog__header {
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
color: #006080;
}
}
.el-dialog__body {
padding: 10px 20px;
}
.el-button {
--el-button-hover-text-color: #006080;
--el-button-hover-bg-color: rgba(0, 96, 128, .1);
--el-button-hover-border-color: rgba(0, 96, 128, .8);
--el-button-active-text-color: #006080;
--el-button-active-border-color: rgba(0, 96, 128, .8);
--el-button-active-bg-color: rgba(0, 96, 128, .1);
}
.el-button--primary {
--el-button-text-color: white;
--el-button-bg-color: #006080;
--el-button-border-color: #006080;
--el-button-outline-color: rgba(0, 96, 128, .5);
--el-button-active-color: rgba(0, 96, 128, .8);
--el-button-hover-text-color: white;
--el-button-hover-link-text-color: rgba(0, 96, 128, .5);
--el-button-hover-bg-color: rgba(0, 96, 128, .7);
--el-button-hover-border-color: rgba(0, 96, 128, .7);
--el-button-active-bg-color: rgba(0, 96, 128, .8);
--el-button-active-border-color: rgba(0, 96, 128, .8);
}
}