初始提交
This commit is contained in:
lyswhut
+689
@@ -0,0 +1,689 @@
|
||||
|
||||
@keyframes flipInX {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
@keyframes flipOutX {
|
||||
from {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes flipInY {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
@keyframes flipOutY {
|
||||
from {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes bounceIn {
|
||||
from,
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale3d(0.97, 0.97, 0.97);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes bounceOut {
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
50%,
|
||||
55% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
}
|
||||
@keyframes lightSpeedIn {
|
||||
from {
|
||||
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: skewX(20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: skewX(-5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes lightSpeedOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(100%, 0, 0) skewX(30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rotateIn {
|
||||
from {
|
||||
transform-origin: center;
|
||||
transform: rotate3d(0, 0, 1, -200deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: center;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rotateInDownLeft {
|
||||
from {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: left bottom;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rotateInDownRight {
|
||||
from {
|
||||
transform-origin: right bottom;
|
||||
transform: rotate3d(0, 0, 1, 45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: right bottom;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rotateInUpLeft {
|
||||
from {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate3d(0, 0, 1, 45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: left bottom;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rotateInUpRight {
|
||||
from {
|
||||
transform-origin: right bottom;
|
||||
transform: rotate3d(0, 0, 1, -90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: right bottom;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rotateOut {
|
||||
from {
|
||||
transform-origin: center;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: center;
|
||||
transform: rotate3d(0, 0, 1, 200deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rotateOutDownLeft {
|
||||
from {
|
||||
transform-origin: left bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate3d(0, 0, 1, 45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rotateOutDownRight {
|
||||
from {
|
||||
transform-origin: right bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: right bottom;
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rotateOutUpLeft {
|
||||
from {
|
||||
transform-origin: left bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rotateOutUpRight {
|
||||
from {
|
||||
transform-origin: right bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: right bottom;
|
||||
transform: rotate3d(0, 0, 1, 90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rollIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes rollOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||||
}
|
||||
}
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes zoomInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
@keyframes zoomInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
@keyframes zoomInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
@keyframes zoomInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
@keyframes zoomOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes zoomOutDown {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
|
||||
transform-origin: center bottom;
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
@keyframes zoomOutLeft {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.1) translate3d(-2000px, 0, 0);
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
@keyframes zoomOutRight {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.1) translate3d(2000px, 0, 0);
|
||||
transform-origin: right center;
|
||||
}
|
||||
}
|
||||
@keyframes zoomOutUp {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
|
||||
transform-origin: center bottom;
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideOutDown {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideOutUp {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flipInX {
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipInX;
|
||||
}
|
||||
.flipInY {
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipInY;
|
||||
}
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
.bounceIn {
|
||||
animation-duration: 0.75s;
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
.lightSpeedIn {
|
||||
animation-name: lightSpeedIn;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
.rotateIn {
|
||||
animation-name: rotateIn;
|
||||
}
|
||||
.rotateInDownLeft {
|
||||
animation-name: rotateInDownLeft;
|
||||
}
|
||||
.rotateInDownRight {
|
||||
animation-name: rotateInDownRight;
|
||||
}
|
||||
.rotateInUpLeft {
|
||||
animation-name: rotateInUpLeft;
|
||||
}
|
||||
.rotateInUpRight {
|
||||
animation-name: rotateInUpRight;
|
||||
}
|
||||
.rollIn {
|
||||
animation-name: rollIn;
|
||||
}
|
||||
.zoomIn {
|
||||
animation-name: zoomIn;
|
||||
}
|
||||
.zoomInDown {
|
||||
animation-name: zoomInDown;
|
||||
}
|
||||
.zoomInLeft {
|
||||
animation-name: zoomInLeft;
|
||||
}
|
||||
.zoomInRight {
|
||||
animation-name: zoomInRight;
|
||||
}
|
||||
.zoomInUp {
|
||||
animation-name: zoomInUp;
|
||||
}
|
||||
.slideInDown {
|
||||
animation-name: slideInDown;
|
||||
}
|
||||
.slideInLeft {
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
.slideInRight {
|
||||
animation-name: slideInRight;
|
||||
}
|
||||
.slideInUp {
|
||||
animation-name: slideInUp;
|
||||
}
|
||||
|
||||
|
||||
.flipOutX {
|
||||
animation-duration: 0.75s;
|
||||
animation-name: flipOutX;
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
.flipOutY {
|
||||
animation-duration: 0.75s;
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipOutY;
|
||||
}
|
||||
.fadeOut {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
.bounceOut {
|
||||
animation-duration: 0.75s;
|
||||
animation-name: bounceOut;
|
||||
}
|
||||
.lightSpeedOut {
|
||||
animation-name: lightSpeedOut;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
.rotateOut {
|
||||
animation-name: rotateOut;
|
||||
}
|
||||
.rotateOutDownLeft {
|
||||
animation-name: rotateOutDownLeft;
|
||||
}
|
||||
.rotateOutDownRight {
|
||||
animation-name: rotateOutDownRight;
|
||||
}
|
||||
.rotateOutUpLeft {
|
||||
animation-name: rotateOutUpLeft;
|
||||
}
|
||||
.rotateOutUpRight {
|
||||
animation-name: rotateOutUpRight;
|
||||
}
|
||||
.hinge {
|
||||
animation-duration: 2s;
|
||||
animation-name: hinge;
|
||||
}
|
||||
.rollOut {
|
||||
animation-name: rollOut;
|
||||
}
|
||||
.zoomOut {
|
||||
animation-name: zoomOut;
|
||||
}
|
||||
.zoomOutDown {
|
||||
animation-name: zoomOutDown;
|
||||
}
|
||||
.zoomOutLeft {
|
||||
animation-name: zoomOutLeft;
|
||||
}
|
||||
.zoomOutRight {
|
||||
animation-name: zoomOutRight;
|
||||
}
|
||||
.zoomOutUp {
|
||||
animation-name: zoomOutUp;
|
||||
}
|
||||
.slideOutDown {
|
||||
animation-name: slideOutDown;
|
||||
}
|
||||
.slideOutLeft {
|
||||
animation-name: slideOutLeft;
|
||||
}
|
||||
.slideOutRight {
|
||||
animation-name: slideOutRight;
|
||||
}
|
||||
.slideOutUp {
|
||||
animation-name: slideOutUp;
|
||||
}
|
||||
|
||||
.animated {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated-slow {
|
||||
animation-duration: 0.8s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated-fast {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
@@ -0,0 +1,325 @@
|
||||
@red-50: #ffebee;
|
||||
@red-100: #ffcdd2;
|
||||
@red-200: #ef9a9a;
|
||||
@red-300: #e57373;
|
||||
@red-400: #ef5350;
|
||||
@red-500: #f44336;
|
||||
@red-600: #e53935;
|
||||
@red-700: #d32f2f;
|
||||
@red-800: #c62828;
|
||||
@red-900: #b71c1c;
|
||||
@red-A100: #ff8a80;
|
||||
@red-A200: #ff5252;
|
||||
@red-A400: #ff1744;
|
||||
@red-A700: #d50000;
|
||||
@red: @red-500;
|
||||
|
||||
|
||||
@pink-50: #fce4ec;
|
||||
@pink-100: #f8bbd0;
|
||||
@pink-200: #f48fb1;
|
||||
@pink-300: #f06292;
|
||||
@pink-400: #ec407a;
|
||||
@pink-500: #e91e63;
|
||||
@pink-600: #d81b60;
|
||||
@pink-700: #c2185b;
|
||||
@pink-800: #ad1457;
|
||||
@pink-900: #880e4f;
|
||||
@pink-A100: #ff80ab;
|
||||
@pink-A200: #ff4081;
|
||||
@pink-A400: #f50057;
|
||||
@pink-A700: #c51162;
|
||||
@pink: @pink-500;
|
||||
|
||||
|
||||
@purple-50: #f3e5f5;
|
||||
@purple-100: #e1bee7;
|
||||
@purple-200: #ce93d8;
|
||||
@purple-300: #ba68c8;
|
||||
@purple-400: #ab47bc;
|
||||
@purple-500: #9c27b0;
|
||||
@purple-600: #8e24aa;
|
||||
@purple-700: #7b1fa2;
|
||||
@purple-800: #6a1b9a;
|
||||
@purple-900: #4a148c;
|
||||
@purple-A100: #ea80fc;
|
||||
@purple-A200: #e040fb;
|
||||
@purple-A400: #d500f9;
|
||||
@purple-A700: #aa00ff;
|
||||
@purple: @purple-500;
|
||||
|
||||
|
||||
@deep-purple-50: #ede7f6;
|
||||
@deep-purple-100: #d1c4e9;
|
||||
@deep-purple-200: #b39ddb;
|
||||
@deep-purple-300: #9575cd;
|
||||
@deep-purple-400: #7e57c2;
|
||||
@deep-purple-500: #673ab7;
|
||||
@deep-purple-600: #5e35b1;
|
||||
@deep-purple-700: #512da8;
|
||||
@deep-purple-800: #4527a0;
|
||||
@deep-purple-900: #311b92;
|
||||
@deep-purple-A100: #b388ff;
|
||||
@deep-purple-A200: #7c4dff;
|
||||
@deep-purple-A400: #651fff;
|
||||
@deep-purple-A700: #6200ea;
|
||||
@deep-purple: @deep-purple-500;
|
||||
|
||||
|
||||
@indigo-50: #e8eaf6;
|
||||
@indigo-100: #c5cae9;
|
||||
@indigo-200: #9fa8da;
|
||||
@indigo-300: #7986cb;
|
||||
@indigo-400: #5c6bc0;
|
||||
@indigo-500: #3f51b5;
|
||||
@indigo-600: #3949ab;
|
||||
@indigo-700: #303f9f;
|
||||
@indigo-800: #283593;
|
||||
@indigo-900: #1a237e;
|
||||
@indigo-A100: #8c9eff;
|
||||
@indigo-A200: #536dfe;
|
||||
@indigo-A400: #3d5afe;
|
||||
@indigo-A700: #304ffe;
|
||||
@indigo: @indigo-500;
|
||||
|
||||
|
||||
@blue-50: #e3f2fd;
|
||||
@blue-100: #bbdefb;
|
||||
@blue-200: #90caf9;
|
||||
@blue-300: #64b5f6;
|
||||
@blue-400: #42a5f5;
|
||||
@blue-500: #2196f3;
|
||||
@blue-600: #1e88e5;
|
||||
@blue-700: #1976d2;
|
||||
@blue-800: #1565c0;
|
||||
@blue-900: #0d47a1;
|
||||
@blue-A100: #82b1ff;
|
||||
@blue-A200: #448aff;
|
||||
@blue-A400: #2979ff;
|
||||
@blue-A700: #2962ff;
|
||||
@blue: @blue-500;
|
||||
|
||||
|
||||
@light-blue-50: #e1f5fe;
|
||||
@light-blue-100: #b3e5fc;
|
||||
@light-blue-200: #81d4fa;
|
||||
@light-blue-300: #4fc3f7;
|
||||
@light-blue-400: #29b6f6;
|
||||
@light-blue-500: #03a9f4;
|
||||
@light-blue-600: #039be5;
|
||||
@light-blue-700: #0288d1;
|
||||
@light-blue-800: #0277bd;
|
||||
@light-blue-900: #01579b;
|
||||
@light-blue-A100: #80d8ff;
|
||||
@light-blue-A200: #40c4ff;
|
||||
@light-blue-A400: #00b0ff;
|
||||
@light-blue-A700: #0091ea;
|
||||
@light-blue: @light-blue-500;
|
||||
|
||||
|
||||
@cyan-50: #e0f7fa;
|
||||
@cyan-100: #b2ebf2;
|
||||
@cyan-200: #80deea;
|
||||
@cyan-300: #4dd0e1;
|
||||
@cyan-400: #26c6da;
|
||||
@cyan-500: #00bcd4;
|
||||
@cyan-600: #00acc1;
|
||||
@cyan-700: #0097a7;
|
||||
@cyan-800: #00838f;
|
||||
@cyan-900: #006064;
|
||||
@cyan-A100: #84ffff;
|
||||
@cyan-A200: #18ffff;
|
||||
@cyan-A400: #00e5ff;
|
||||
@cyan-A700: #00b8d4;
|
||||
@cyan: @cyan-500;
|
||||
|
||||
|
||||
@teal-50: #e0f2f1;
|
||||
@teal-100: #b2dfdb;
|
||||
@teal-200: #80cbc4;
|
||||
@teal-300: #4db6ac;
|
||||
@teal-400: #26a69a;
|
||||
@teal-500: #009688;
|
||||
@teal-600: #00897b;
|
||||
@teal-700: #00796b;
|
||||
@teal-800: #00695c;
|
||||
@teal-900: #004d40;
|
||||
@teal-A100: #a7ffeb;
|
||||
@teal-A200: #64ffda;
|
||||
@teal-A400: #1de9b6;
|
||||
@teal-A700: #00bfa5;
|
||||
@teal: @teal-500;
|
||||
|
||||
|
||||
@green-50: #e8f5e9;
|
||||
@green-100: #c8e6c9;
|
||||
@green-200: #a5d6a7;
|
||||
@green-300: #81c784;
|
||||
@green-400: #66bb6a;
|
||||
@green-500: #4caf50;
|
||||
@green-600: #43a047;
|
||||
@green-700: #388e3c;
|
||||
@green-800: #2e7d32;
|
||||
@green-900: #1b5e20;
|
||||
@green-A100: #b9f6ca;
|
||||
@green-A200: #69f0ae;
|
||||
@green-A400: #00e676;
|
||||
@green-A700: #00c853;
|
||||
@green: @green-500;
|
||||
|
||||
|
||||
@light-green-50: #f1f8e9;
|
||||
@light-green-100: #dcedc8;
|
||||
@light-green-200: #c5e1a5;
|
||||
@light-green-300: #aed581;
|
||||
@light-green-400: #9ccc65;
|
||||
@light-green-500: #8bc34a;
|
||||
@light-green-600: #7cb342;
|
||||
@light-green-700: #689f38;
|
||||
@light-green-800: #558b2f;
|
||||
@light-green-900: #33691e;
|
||||
@light-green-A100: #ccff90;
|
||||
@light-green-A200: #b2ff59;
|
||||
@light-green-A400: #76ff03;
|
||||
@light-green-A700: #64dd17;
|
||||
@light-green: @light-green-500;
|
||||
|
||||
|
||||
@lime-50: #f9fbe7;
|
||||
@lime-100: #f0f4c3;
|
||||
@lime-200: #e6ee9c;
|
||||
@lime-300: #dce775;
|
||||
@lime-400: #d4e157;
|
||||
@lime-500: #cddc39;
|
||||
@lime-600: #c0ca33;
|
||||
@lime-700: #afb42b;
|
||||
@lime-800: #9e9d24;
|
||||
@lime-900: #827717;
|
||||
@lime-A100: #f4ff81;
|
||||
@lime-A200: #eeff41;
|
||||
@lime-A400: #c6ff00;
|
||||
@lime-A700: #aeea00;
|
||||
@lime: @lime-500;
|
||||
|
||||
|
||||
@yellow-50: #fffde7;
|
||||
@yellow-100: #fff9c4;
|
||||
@yellow-200: #fff59d;
|
||||
@yellow-300: #fff176;
|
||||
@yellow-400: #ffee58;
|
||||
@yellow-500: #fec60a;
|
||||
@yellow-600: #fdd835;
|
||||
@yellow-700: #fbc02d;
|
||||
@yellow-800: #f9a825;
|
||||
@yellow-900: #f57f17;
|
||||
@yellow-A100: #ffff8d;
|
||||
@yellow-A200: #ffff00;
|
||||
@yellow-A400: #ffea00;
|
||||
@yellow-A700: #ffd600;
|
||||
@yellow: @yellow-700;
|
||||
|
||||
|
||||
@amber-50: #fff8e1;
|
||||
@amber-100: #ffecb3;
|
||||
@amber-200: #ffe082;
|
||||
@amber-300: #ffd54f;
|
||||
@amber-400: #ffca28;
|
||||
@amber-500: #ffc107;
|
||||
@amber-600: #ffb300;
|
||||
@amber-700: #ffa000;
|
||||
@amber-800: #ff8f00;
|
||||
@amber-900: #ff6f00;
|
||||
@amber-A100: #ffe57f;
|
||||
@amber-A200: #ffd740;
|
||||
@amber-A400: #ffc400;
|
||||
@amber-A700: #ffab00;
|
||||
@amber: @amber-500;
|
||||
|
||||
|
||||
@orange-50: #fff3e0;
|
||||
@orange-100: #ffe0b2;
|
||||
@orange-200: #ffcc80;
|
||||
@orange-300: #ffb74d;
|
||||
@orange-400: #ffa726;
|
||||
@orange-500: #ff9800;
|
||||
@orange-600: #fb8c00;
|
||||
@orange-700: #f57c00;
|
||||
@orange-800: #ef6c00;
|
||||
@orange-900: #e65100;
|
||||
@orange-A100: #ffd180;
|
||||
@orange-A200: #ffab40;
|
||||
@orange-A400: #ff9100;
|
||||
@orange-A700: #ff6d00;
|
||||
@orange: @orange-500;
|
||||
|
||||
|
||||
@deep-orange-50: #fbe9e7;
|
||||
@deep-orange-100: #ffccbc;
|
||||
@deep-orange-200: #ffab91;
|
||||
@deep-orange-300: #ff8a65;
|
||||
@deep-orange-400: #ff7043;
|
||||
@deep-orange-500: #ff5722;
|
||||
@deep-orange-600: #f4511e;
|
||||
@deep-orange-700: #e64a19;
|
||||
@deep-orange-800: #d84315;
|
||||
@deep-orange-900: #bf360c;
|
||||
@deep-orange-A100: #ff9e80;
|
||||
@deep-orange-A200: #ff6e40;
|
||||
@deep-orange-A400: #ff3d00;
|
||||
@deep-orange-A700: #dd2c00;
|
||||
@deep-orange: @deep-orange-500;
|
||||
|
||||
|
||||
@brown-50: #efebe9;
|
||||
@brown-100: #d7ccc8;
|
||||
@brown-200: #bcaaa4;
|
||||
@brown-300: #a1887f;
|
||||
@brown-400: #8d6e63;
|
||||
@brown-500: #795548;
|
||||
@brown-600: #6d4c41;
|
||||
@brown-700: #5d4037;
|
||||
@brown-800: #4e342e;
|
||||
@brown-900: #3e2723;
|
||||
@brown-A100: #d7ccc8;
|
||||
@brown-A200: #bcaaa4;
|
||||
@brown-A400: #8d6e63;
|
||||
@brown-A700: #5d4037;
|
||||
@brown: @brown-500;
|
||||
|
||||
|
||||
@grey-50: #fafafa;
|
||||
@grey-100: #f5f5f5;
|
||||
@grey-200: #eeeeee;
|
||||
@grey-300: #e0e0e0;
|
||||
@grey-400: #bdbdbd;
|
||||
@grey-500: #9e9e9e; @rgb-grey-500: "158, 158, 158";
|
||||
@grey-600: #757575;
|
||||
@grey-700: #616161;
|
||||
@grey-800: #424242;
|
||||
@grey-900: #212121;
|
||||
@grey-A100: #f5f5f5;
|
||||
@grey-A200: #eeeeee;
|
||||
@grey-A400: #bdbdbd;
|
||||
@grey-A700: #616161;
|
||||
@grey: @grey-500;
|
||||
|
||||
|
||||
@blue-grey-50: #eceff1;
|
||||
@blue-grey-100: #cfd8dc;
|
||||
@blue-grey-200: #b0bec5;
|
||||
@blue-grey-300: #90a4ae;
|
||||
@blue-grey-400: #78909c;
|
||||
@blue-grey-500: #607d8b;
|
||||
@blue-grey-600: #546e7a;
|
||||
@blue-grey-700: #455a64;
|
||||
@blue-grey-800: #37474f;
|
||||
@blue-grey-900: #263238;
|
||||
@blue-grey-A100: #cfd8dc;
|
||||
@blue-grey-A200: #b0bec5;
|
||||
@blue-grey-A400: #78909c;
|
||||
@blue-grey-A700: #455a64;
|
||||
@blue-grey: @blue-grey-500;
|
||||
|
||||
|
||||
@black: #000000; @rgb-black: "0,0,0";
|
||||
@white: #ffffff; @rgb-white: "255,255,255";
|
||||
@@ -0,0 +1,165 @@
|
||||
@import './reset.less';
|
||||
@import './animate.less';
|
||||
*, *::after, *::before {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.nobreak {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.auto-hidden {
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
|
||||
.break {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
th {
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
// border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
transition: background-color 0.2s ease;
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.4em;
|
||||
font-size: .7em;
|
||||
// font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: 2px;
|
||||
|
||||
&.badge-light {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
&.badge-secondary {
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
}
|
||||
&.badge-info {
|
||||
color: #fff;
|
||||
background-color: #4baed5;
|
||||
}
|
||||
&.badge-warning {
|
||||
color: #fff;
|
||||
background-color: #ffa45a;
|
||||
}
|
||||
&.badge-danger {
|
||||
color: #fff;
|
||||
background-color: #ff705a;
|
||||
}
|
||||
&.badge-success {
|
||||
color: #fff;
|
||||
background-color: #32bc63;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .8em;
|
||||
}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
svg {
|
||||
transition: @transition-theme;
|
||||
transition-property: fill;
|
||||
}
|
||||
|
||||
.hover {
|
||||
cursor: pointer;
|
||||
transition: color .2s ease;
|
||||
&:hover {
|
||||
color: @color-theme;
|
||||
}
|
||||
&:active {
|
||||
color: @color-theme-active;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: @color-scrollbar-track;
|
||||
border-radius: 3px;
|
||||
// background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background-color: @color-scrollbar-thumb;
|
||||
// background-color: rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 3px;
|
||||
background-color: @color-scrollbar-thumb-hover;
|
||||
// background-color: rgba(0, 0, 0, 0.4);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
#container.@{value} {
|
||||
.hover {
|
||||
&:hover {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
&:active {
|
||||
color: ~'@{color-@{value}-theme-active}';
|
||||
}
|
||||
}
|
||||
.scroll {
|
||||
&::-webkit-scrollbar {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: ~'@{color-@{value}-scrollbar-track}';
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: ~'@{color-@{value}-scrollbar-thumb}';
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: ~'@{color-@{value}-scrollbar-thumb-hover}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,30 @@
|
||||
@import './variables.less';
|
||||
|
||||
|
||||
/*自动隐藏文字*/
|
||||
.mixin-ellipsis-1() {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mixin-ellipsis() {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal !important;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.mixin-ellipsis-2() {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal !important;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
@import './colors.less';
|
||||
|
||||
@themes: green, yellow, blue, red, purple, orange, grey;
|
||||
|
||||
|
||||
// Colors
|
||||
// @color-theme: #03a678;
|
||||
@color-theme: #4daf7c;
|
||||
@color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
|
||||
@color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
|
||||
@color-theme-font: #fff;
|
||||
@color-theme-font-label: lighten(@color-theme, 35%);
|
||||
|
||||
@color-theme_2: #fff;
|
||||
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%);
|
||||
@color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%);
|
||||
@color-theme_2-font: darken(@color-theme_2, 70%);
|
||||
@color-theme_2-font-label: lighten(@color-theme, 40%);
|
||||
@color-btn: fadeout(darken(@color-theme, 5%), 15%);
|
||||
@color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
|
||||
|
||||
@color-pagination-background: fadeout(lighten(@color-theme, 45%), 30%);
|
||||
@color-pagination-hover: fadeout(lighten(@color-theme, 10%), 70%);
|
||||
@color-pagination-active: fadeout(darken(@color-theme, 10%), 70%);
|
||||
@color-pagination-select: fadeout(lighten(@color-theme, 10%), 50%);
|
||||
|
||||
@color-search-form-background: fadeout(lighten(@color-theme, 35%), 10%);
|
||||
// @color-search-list-background: fadeout(lighten(@color-theme, 35%), 10%);
|
||||
@color-search-list-hover: fadeout(darken(@color-theme, 10%), 70%);
|
||||
|
||||
@color-scrollbar-track: fadeout(@color-theme, 80%);
|
||||
@color-scrollbar-thumb: fadeout(@color-theme, 60%);
|
||||
@color-scrollbar-thumb-hover: fadeout(@color-theme, 40%);
|
||||
|
||||
|
||||
@color-player-pic-c1: fadeout(@color-theme_2, 50%);
|
||||
@color-player-pic-c2: darken(@color-theme_2, 30%);
|
||||
@color-player-progress: darken(@color-theme_2, 6%);
|
||||
@color-player-progress-bar1: darken(@color-theme_2, 12%);
|
||||
@color-player-progress-bar2: lighten(@color-theme, 12%);
|
||||
@color-player-status-text: lighten(@color-theme_2-font, 10%);
|
||||
|
||||
@color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
|
||||
@color-tab-border-top: fadeout(lighten(@color-theme, 5%), 50%);
|
||||
@color-tab-border-bottom: lighten(@color-theme, 5%);
|
||||
|
||||
@color-minBtn: #85c43b;
|
||||
@color-maxBtn: #e7aa36;
|
||||
@color-closeBtn: #ea6e4d;
|
||||
|
||||
|
||||
@color-green-theme: #4daf7c;
|
||||
@color-green-theme-hover: fadeout(lighten(@color-green-theme, 10%), 30%);
|
||||
@color-green-theme-active: fadeout(darken(@color-green-theme, 20%), 60%);
|
||||
@color-green-theme-font: #fff;
|
||||
@color-green-theme-font-label: lighten(@color-green-theme, 35%);
|
||||
@color-green-theme_2: #fff;
|
||||
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
|
||||
@color-green-theme_2-active: fadeout(darken(@color-green-theme, 5%), 70%);
|
||||
@color-green-theme_2-font: darken(@color-green-theme_2, 70%);
|
||||
@color-green-theme_2-font-label: lighten(@color-green-theme, 40%);
|
||||
@color-green-btn: fadeout(darken(@color-green-theme, 5%), 15%);
|
||||
@color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
|
||||
@color-green-pagination-background: fadeout(lighten(@color-green-theme, 45%), 30%);
|
||||
@color-green-pagination-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
|
||||
@color-green-pagination-active: fadeout(darken(@color-green-theme, 10%), 70%);
|
||||
@color-green-pagination-select: fadeout(lighten(@color-green-theme, 10%), 50%);
|
||||
@color-green-search-form-background: fadeout(lighten(@color-green-theme, 35%), 10%);
|
||||
@color-green-search-list-hover: fadeout(darken(@color-green-theme, 10%), 70%);
|
||||
@color-green-scrollbar-track: fadeout(@color-green-theme, 80%);
|
||||
@color-green-scrollbar-thumb: fadeout(@color-green-theme, 60%);
|
||||
@color-green-scrollbar-thumb-hover: fadeout(@color-green-theme, 40%);
|
||||
@color-green-player-pic-c1: fadeout(@color-green-theme_2, 50%);
|
||||
@color-green-player-pic-c2: darken(@color-green-theme_2, 30%);
|
||||
@color-green-player-progress: darken(@color-green-theme_2, 6%);
|
||||
@color-green-player-progress-bar1: darken(@color-green-theme_2, 12%);
|
||||
@color-green-player-progress-bar2: lighten(@color-green-theme, 12%);
|
||||
@color-green-player-status-text: lighten(@color-green-theme_2-font, 10%);
|
||||
@color-green-tab-btn-background: fadeout(lighten(@color-green-theme, 10%), 80%);
|
||||
@color-green-tab-border-top: fadeout(lighten(@color-green-theme, 5%), 50%);
|
||||
@color-green-tab-border-bottom: lighten(@color-green-theme, 5%);
|
||||
|
||||
|
||||
@color-yellow-theme: #f2d35b;
|
||||
@color-yellow-theme-hover: fadeout(lighten(@color-yellow-theme, 10%), 30%);
|
||||
@color-yellow-theme-active: fadeout(darken(@color-yellow-theme, 20%), 60%);
|
||||
@color-yellow-theme-font: #fff;
|
||||
@color-yellow-theme-font-label: lighten(@color-yellow-theme, 35%);
|
||||
@color-yellow-theme_2: #fff;
|
||||
@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
|
||||
@color-yellow-theme_2-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
|
||||
@color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%);
|
||||
@color-yellow-theme_2-font-label: lighten(@color-yellow-theme, 40%);
|
||||
@color-yellow-btn: fadeout(darken(@color-yellow-theme, 5%), 15%);
|
||||
@color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 70%);
|
||||
@color-yellow-pagination-background: fadeout(lighten(@color-yellow-theme, 30%), 30%);
|
||||
@color-yellow-pagination-hover: fadeout(lighten(@color-yellow-theme, 5%), 70%);
|
||||
@color-yellow-pagination-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
|
||||
@color-yellow-pagination-select: fadeout(lighten(@color-yellow-theme, 5%), 50%);
|
||||
@color-yellow-search-form-background: fadeout(lighten(@color-yellow-theme, 35%), 10%);
|
||||
@color-yellow-search-list-hover: fadeout(darken(@color-yellow-theme, 10%), 70%);
|
||||
@color-yellow-scrollbar-track: fadeout(@color-yellow-theme, 80%);
|
||||
@color-yellow-scrollbar-thumb: fadeout(@color-yellow-theme, 60%);
|
||||
@color-yellow-scrollbar-thumb-hover: fadeout(@color-yellow-theme, 40%);
|
||||
@color-yellow-player-pic-c1: fadeout(@color-yellow-theme_2, 50%);
|
||||
@color-yellow-player-pic-c2: darken(@color-yellow-theme_2, 30%);
|
||||
@color-yellow-player-progress: darken(@color-yellow-theme_2, 6%);
|
||||
@color-yellow-player-progress-bar1: darken(@color-yellow-theme_2, 12%);
|
||||
@color-yellow-player-progress-bar2: lighten(@color-yellow-theme, 12%);
|
||||
@color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 10%);
|
||||
@color-yellow-tab-btn-background: fadeout(lighten(@color-yellow-theme, 10%), 80%);
|
||||
@color-yellow-tab-border-top: fadeout(lighten(@color-yellow-theme, 5%), 50%);
|
||||
@color-yellow-tab-border-bottom: lighten(@color-yellow-theme, 5%);
|
||||
|
||||
@color-orange-theme: #f5ab35;
|
||||
@color-orange-theme-hover: fadeout(lighten(@color-orange-theme, 10%), 30%);
|
||||
@color-orange-theme-active: fadeout(darken(@color-orange-theme, 20%), 60%);
|
||||
@color-orange-theme-font: #fff;
|
||||
@color-orange-theme-font-label: lighten(@color-orange-theme, 35%);
|
||||
@color-orange-theme_2: #fff;
|
||||
@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
|
||||
@color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
|
||||
@color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
|
||||
@color-orange-theme_2-font-label: lighten(@color-orange-theme, 40%);
|
||||
@color-orange-btn: fadeout(darken(@color-orange-theme, 5%), 15%);
|
||||
@color-orange-btn-background: fadeout(lighten(@color-orange-theme, 35%), 70%);
|
||||
@color-orange-pagination-background: fadeout(lighten(@color-orange-theme, 35%), 30%);
|
||||
@color-orange-pagination-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
|
||||
@color-orange-pagination-active: fadeout(darken(@color-orange-theme, 10%), 70%);
|
||||
@color-orange-pagination-select: fadeout(lighten(@color-orange-theme, 10%), 50%);
|
||||
@color-orange-search-form-background: fadeout(lighten(@color-orange-theme, 35%), 10%);
|
||||
@color-orange-search-list-hover: fadeout(darken(@color-orange-theme, 10%), 70%);
|
||||
@color-orange-scrollbar-track: fadeout(@color-orange-theme, 80%);
|
||||
@color-orange-scrollbar-thumb: fadeout(@color-orange-theme, 60%);
|
||||
@color-orange-scrollbar-thumb-hover: fadeout(@color-orange-theme, 40%);
|
||||
@color-orange-player-pic-c1: fadeout(@color-orange-theme_2, 50%);
|
||||
@color-orange-player-pic-c2: darken(@color-orange-theme_2, 30%);
|
||||
@color-orange-player-progress: darken(@color-orange-theme_2, 6%);
|
||||
@color-orange-player-progress-bar1: darken(@color-orange-theme_2, 12%);
|
||||
@color-orange-player-progress-bar2: lighten(@color-orange-theme, 12%);
|
||||
@color-orange-player-status-text: lighten(@color-orange-theme_2-font, 10%);
|
||||
@color-orange-tab-btn-background: fadeout(lighten(@color-orange-theme, 10%), 80%);
|
||||
@color-orange-tab-border-top: fadeout(lighten(@color-orange-theme, 5%), 50%);
|
||||
@color-orange-tab-border-bottom: lighten(@color-orange-theme, 5%);
|
||||
|
||||
@color-blue-theme: #3498db;
|
||||
@color-blue-theme-hover: fadeout(lighten(@color-blue-theme, 10%), 30%);
|
||||
@color-blue-theme-active: fadeout(darken(@color-blue-theme, 20%), 60%);
|
||||
@color-blue-theme-font: #fff;
|
||||
@color-blue-theme-font-label: lighten(@color-blue-theme, 35%);
|
||||
@color-blue-theme_2: #fff;
|
||||
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 70%);
|
||||
@color-blue-theme_2-active: fadeout(darken(@color-blue-theme, 5%), 70%);
|
||||
@color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
|
||||
@color-blue-theme_2-font-label: lighten(@color-blue-theme, 40%);
|
||||
@color-blue-btn: fadeout(darken(@color-blue-theme, 5%), 15%);
|
||||
@color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 70%);
|
||||
@color-blue-pagination-background: fadeout(lighten(@color-blue-theme, 40%), 30%);
|
||||
@color-blue-pagination-hover: fadeout(lighten(@color-blue-theme, 15%), 70%);
|
||||
@color-blue-pagination-active: fadeout(darken(@color-blue-theme, 15%), 70%);
|
||||
@color-blue-pagination-select: fadeout(lighten(@color-blue-theme, 15%), 50%);
|
||||
@color-blue-search-form-background: fadeout(lighten(@color-blue-theme, 35%), 10%);
|
||||
@color-blue-search-list-hover: fadeout(darken(@color-blue-theme, 10%), 70%);
|
||||
@color-blue-scrollbar-track: fadeout(@color-blue-theme, 80%);
|
||||
@color-blue-scrollbar-thumb: fadeout(@color-blue-theme, 60%);
|
||||
@color-blue-scrollbar-thumb-hover: fadeout(@color-blue-theme, 40%);
|
||||
@color-blue-player-pic-c1: fadeout(@color-blue-theme_2, 50%);
|
||||
@color-blue-player-pic-c2: darken(@color-blue-theme_2, 30%);
|
||||
@color-blue-player-progress: darken(@color-blue-theme_2, 6%);
|
||||
@color-blue-player-progress-bar1: darken(@color-blue-theme_2, 12%);
|
||||
@color-blue-player-progress-bar2: lighten(@color-blue-theme, 12%);
|
||||
@color-blue-player-status-text: lighten(@color-blue-theme_2-font, 10%);
|
||||
@color-blue-tab-btn-background: fadeout(lighten(@color-blue-theme, 10%), 80%);
|
||||
@color-blue-tab-border-top: fadeout(lighten(@color-blue-theme, 5%), 50%);
|
||||
@color-blue-tab-border-bottom: lighten(@color-blue-theme, 5%);
|
||||
|
||||
@color-red-theme: #d64541;
|
||||
@color-red-theme-hover: fadeout(lighten(@color-red-theme, 10%), 30%);
|
||||
@color-red-theme-active: fadeout(darken(@color-red-theme, 20%), 60%);
|
||||
@color-red-theme-font: #fff;
|
||||
@color-red-theme-font-label: lighten(@color-red-theme, 35%);
|
||||
@color-red-theme_2: #fff;
|
||||
@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 70%);
|
||||
@color-red-theme_2-active: fadeout(darken(@color-red-theme, 5%), 70%);
|
||||
@color-red-theme_2-font: darken(@color-red-theme_2, 70%);
|
||||
@color-red-theme_2-font-label: lighten(@color-red-theme, 40%);
|
||||
@color-red-btn: fadeout(darken(@color-red-theme, 5%), 15%);
|
||||
@color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
|
||||
@color-red-pagination-background: fadeout(lighten(@color-red-theme, 40%), 30%);
|
||||
@color-red-pagination-hover: fadeout(lighten(@color-red-theme, 15%), 70%);
|
||||
@color-red-pagination-active: fadeout(darken(@color-red-theme, 15%), 70%);
|
||||
@color-red-pagination-select: fadeout(lighten(@color-red-theme, 15%), 50%);
|
||||
@color-red-search-form-background: fadeout(lighten(@color-red-theme, 35%), 10%);
|
||||
@color-red-search-list-hover: fadeout(darken(@color-red-theme, 10%), 70%);
|
||||
@color-red-scrollbar-track: fadeout(@color-red-theme, 80%);
|
||||
@color-red-scrollbar-thumb: fadeout(@color-red-theme, 60%);
|
||||
@color-red-scrollbar-thumb-hover: fadeout(@color-red-theme, 40%);
|
||||
@color-red-player-pic-c1: fadeout(@color-red-theme_2, 50%);
|
||||
@color-red-player-pic-c2: darken(@color-red-theme_2, 30%);
|
||||
@color-red-player-progress: darken(@color-red-theme_2, 6%);
|
||||
@color-red-player-progress-bar1: darken(@color-red-theme_2, 12%);
|
||||
@color-red-player-progress-bar2: lighten(@color-red-theme, 12%);
|
||||
@color-red-player-status-text: lighten(@color-red-theme_2-font, 10%);
|
||||
@color-red-tab-border-top: fadeout(lighten(@color-red-theme, 25%), 70%);
|
||||
@color-red-tab-border-bottom: lighten(@color-red-theme, 35%);
|
||||
@color-red-tab-btn-background: fadeout(lighten(@color-red-theme, 10%), 80%);
|
||||
@color-red-tab-border-top: fadeout(lighten(@color-red-theme, 5%), 50%);
|
||||
@color-red-tab-border-bottom: lighten(@color-red-theme, 5%);
|
||||
|
||||
@color-purple-theme: #9b59b6;
|
||||
@color-purple-theme-hover: fadeout(lighten(@color-purple-theme, 10%), 30%);
|
||||
@color-purple-theme-active: fadeout(darken(@color-purple-theme, 20%), 60%);
|
||||
@color-purple-theme-font: #fff;
|
||||
@color-purple-theme-font-label: lighten(@color-purple-theme, 35%);
|
||||
@color-purple-theme_2: #fff;
|
||||
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 70%);
|
||||
@color-purple-theme_2-active: fadeout(darken(@color-purple-theme, 5%), 70%);
|
||||
@color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
|
||||
@color-purple-theme_2-font-label: lighten(@color-purple-theme, 40%);
|
||||
@color-purple-btn: fadeout(darken(@color-purple-theme, 5%), 15%);
|
||||
@color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
|
||||
@color-purple-pagination-background: fadeout(lighten(@color-purple-theme, 40%), 30%);
|
||||
@color-purple-pagination-hover: fadeout(lighten(@color-purple-theme, 15%), 70%);
|
||||
@color-purple-pagination-active: fadeout(darken(@color-purple-theme, 15%), 70%);
|
||||
@color-purple-pagination-select: fadeout(lighten(@color-purple-theme, 15%), 50%);
|
||||
@color-purple-search-form-background: fadeout(lighten(@color-purple-theme, 35%), 10%);
|
||||
@color-purple-search-list-hover: fadeout(darken(@color-purple-theme, 10%), 70%);
|
||||
@color-purple-scrollbar-track: fadeout(@color-purple-theme, 80%);
|
||||
@color-purple-scrollbar-thumb: fadeout(@color-purple-theme, 60%);
|
||||
@color-purple-scrollbar-thumb-hover: fadeout(@color-purple-theme, 40%);
|
||||
@color-purple-player-pic-c1: fadeout(@color-purple-theme_2, 50%);
|
||||
@color-purple-player-pic-c2: darken(@color-purple-theme_2, 30%);
|
||||
@color-purple-player-progress: darken(@color-purple-theme_2, 6%);
|
||||
@color-purple-player-progress-bar1: darken(@color-purple-theme_2, 12%);
|
||||
@color-purple-player-progress-bar2: lighten(@color-purple-theme, 12%);
|
||||
@color-purple-player-status-text: lighten(@color-purple-theme_2-font, 10%);
|
||||
@color-purple-tab-btn-background: fadeout(lighten(@color-purple-theme, 10%), 80%);
|
||||
@color-purple-tab-border-top: fadeout(lighten(@color-purple-theme, 5%), 50%);
|
||||
@color-purple-tab-border-bottom: lighten(@color-purple-theme, 5%);
|
||||
|
||||
@color-grey-theme: #6c7a89;
|
||||
@color-grey-theme-hover: fadeout(lighten(@color-grey-theme, 10%), 30%);
|
||||
@color-grey-theme-active: fadeout(darken(@color-grey-theme, 20%), 60%);
|
||||
@color-grey-theme-font: #fff;
|
||||
@color-grey-theme-font-label: lighten(@color-grey-theme, 35%);
|
||||
@color-grey-theme_2: #fff;
|
||||
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
|
||||
@color-grey-theme_2-active: fadeout(darken(@color-grey-theme, 5%), 70%);
|
||||
@color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
|
||||
@color-grey-theme_2-font-label: lighten(@color-grey-theme, 40%);
|
||||
@color-grey-btn: fadeout(darken(@color-grey-theme, 5%), 15%);
|
||||
@color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
|
||||
@color-grey-pagination-background: fadeout(lighten(@color-grey-theme, 45%), 30%);
|
||||
@color-grey-pagination-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
|
||||
@color-grey-pagination-active: fadeout(darken(@color-grey-theme, 10%), 70%);
|
||||
@color-grey-pagination-select: fadeout(lighten(@color-grey-theme, 10%), 50%);
|
||||
@color-grey-search-form-background: fadeout(lighten(@color-grey-theme, 35%), 10%);
|
||||
@color-grey-search-list-hover: fadeout(darken(@color-grey-theme, 10%), 70%);
|
||||
@color-grey-scrollbar-track: fadeout(@color-grey-theme, 80%);
|
||||
@color-grey-scrollbar-thumb: fadeout(@color-grey-theme, 60%);
|
||||
@color-grey-scrollbar-thumb-hover: fadeout(@color-grey-theme, 40%);
|
||||
@color-grey-player-pic-c1: fadeout(@color-grey-theme_2, 50%);
|
||||
@color-grey-player-pic-c2: darken(@color-grey-theme_2, 30%);
|
||||
@color-grey-player-progress: darken(@color-grey-theme_2, 6%);
|
||||
@color-grey-player-progress-bar1: darken(@color-grey-theme_2, 12%);
|
||||
@color-grey-player-progress-bar2: lighten(@color-grey-theme, 12%);
|
||||
@color-grey-player-status-text: lighten(@color-grey-theme_2-font, 10%);
|
||||
@color-grey-tab-btn-background: fadeout(lighten(@color-grey-theme, 10%), 80%);
|
||||
@color-grey-tab-border-top: fadeout(lighten(@color-grey-theme, 5%), 50%);
|
||||
@color-grey-tab-border-bottom: lighten(@color-grey-theme, 5%);
|
||||
|
||||
|
||||
// Width
|
||||
@width-app-left: 180px;
|
||||
|
||||
// Height
|
||||
@height-toolbar: 50px;
|
||||
@height-player: 55px;
|
||||
|
||||
|
||||
// Shadow
|
||||
@shadow-app: 8px;
|
||||
|
||||
|
||||
// Radius
|
||||
@radius-progress-border: 5px;
|
||||
|
||||
@transition-theme: .4s ease;
|
||||
Reference in New Issue
Block a user