AnalysisSystemForRadionucli.../src/style.less

1052 lines
19 KiB
Plaintext

// 重置样式
@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@modalBg: #022024;
@formInputBgColor: #03353f;
@formInputBorderColor: #0b8c82;
@primary-color: #1397a3;
@link-color: #1397a3;
@border-radius-base: 4px;
@text-color: #fff;
@btn-default-bg: #b98326;
@btn-default-border: #b98326;
@radio-button-bg: transparent;
@radio-button-checked-bg: transparent;
@radio-button-color: @btn-default-color;
@modal-footer-border-color-split: @formInputBorderColor;
@disabled-color: rgba(255, 255, 255, 0.25);
@background-color-base: darken(@primary-color, 20);
@border-color-base: darken(@primary-color, 20);
@text-color: #fff;
@component-background: @modalBg;
@heading-color: #fff;
@input-bg: @formInputBgColor;
@input-border-color: @formInputBorderColor;
@font-face {
font-family: MicrogrammaD-MediExte;
src: url(~@/assets/fonts/MicrogrammaDMedExt.ttf);
}
@font-face {
font-family: BookmanOldStyle;
src: url(~@/assets/fonts/BOOKOS.ttf);
}
body {
color: #fff;
font-family: Arial;
}
.ant-layout {
background: url(~@/assets/images/content/bg.jpg) center center no-repeat;
background-size: cover;
height: 100vh;
}
// 卡片样式
.ant-card {
background-color: transparent;
&-head {
padding: 0;
color: #fff;
}
&-body {
padding: 0;
}
}
// 表格样式
@table-border-radius-base: 0;
@table-padding-vertical-sm: 2px;
@table-padding-vertical: 6px;
@table-padding-horizontal: 8px;
@table-row-hover-bg: #0e505f;
.ant-table {
color: #ade6ee;
font-size: 16px;
border: 1px solid rgba(65, 111, 127, 0.5);
&-thead {
> tr {
th {
background-color: #126b82 !important;
color: #fff;
border-bottom: none;
}
}
}
&-tbody {
tr {
background-color: #06282a;
&:nth-child(2n) {
background-color: #08373a;
}
td {
padding: 10px 8px !important;
border-bottom: none;
}
&.ant-table-row-selected {
td {
background-color: #0d4e5c !important;
}
}
}
}
&-placeholder {
background-color: @modalBg;
border-top: none;
border-bottom: none;
}
&-selected {
background-color: 0d4e5c;
}
&-row-expand-icon {
background-color: transparent;
border-color: @formInputBorderColor;
color: @formInputBorderColor;
}
&-small {
font-size: 14px;
.ant-table {
&-tbody {
tr td {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
}
&-placeholder {
.ant-empty-image {
height: 60px;
}
.ant-empty-description {
font-size: 14px;
}
}
}
}
}
// 表格下的分页器
.ant-table-pagination {
float: none !important;
text-align: center;
}
// 表单样式
@antFormSelector: .ant-form;
@{antFormSelector} {
&-item {
&-label {
> label {
color: #5b9cba;
}
}
&-children {
display: inline-block;
width: 100%;
}
&-required::before {
display: none !important;
}
}
&-horizontal {
@{antFormSelector} {
&-item {
display: flex;
}
}
}
}
// 日期选择
.ant-calendar {
border-color: @formInputBorderColor;
border-radius: 0;
&,
&-time-picker-inner {
background-color: @modalBg;
}
&-picker {
width: 100%;
&-container {
padding-top: 2px;
}
&-clear {
background-color: @formInputBgColor;
color: #00e9fe !important;
}
}
&-input {
background-color: transparent;
&-wrap {
border-color: @formInputBorderColor;
height: 32px;
}
}
&-header,
&-footer {
border-color: @formInputBgColor;
}
&-year-select,
&-month-select,
&-day-select {
color: #fff !important;
}
&-time-picker {
&-select {
li {
&:hover {
background-color: @primary-color !important;
}
}
&-option-selected {
background-color: @primary-color !important;
color: #fff !important;
}
}
}
&-month {
&-panel {
background-color: @modalBg;
&-header {
border-bottom: 1px solid @formInputBorderColor;
}
&-year-select-content {
color: #fff;
}
&-month {
&:hover {
color: #fff !important;
background-color: @primary-color;
}
}
}
}
&-date {
&:hover {
background-color: @primary-color;
color: #fff;
}
}
&-selected-day {
.ant-calendar-date {
background-color: @primary-color;
}
}
&-today {
.ant-calendar-date {
color: #fff;
}
}
}
// 日历
.ant-fullcalendar {
border-spacing: 0;
&-column-header {
background-color: #126b82;
border-left: 1px solid #126b82 !important;
padding: 0 !important;
line-height: 34px;
&-inner {
text-align: center;
}
}
&-content {
margin-top: 10px;
height: 98px !important;
&::-webkit-scrollbar {
width: 4px !important;
}
}
&-date {
margin: 0 !important;
height: 159px !important;
border-top: none !important;
}
&-value {
font-size: 24px;
font-family: Arial;
color: #ade6ee !important;
}
&-last-month-cell,
&-next-month-btn-day {
.ant-fullcalendar-value {
color: rgba(173, 230, 238, 0.1) !important;
}
}
&-calendar-body {
padding: 0 !important;
}
&-cell {
border-top: 1px solid #25454e !important;
border-left: 1px solid #25454e !important;
&:last-child {
border-right: 1px solid #25454e !important;
}
}
&-table {
background-color: #06282a !important;
}
&-tbody {
border-bottom: 1px solid #25454e;
}
&-selected-day &-date,
&-date:hover {
background-color: #072f32 !important;
}
}
// 时间选择器
@time-picker-selected-bg: @primary-color;
@item-hover-bg: @primary-color;
.ant-time-picker {
width: 100%;
&-input {
border-radius: 0;
&::placeholder {
color: #fff;
}
}
&-clear,
&-clock-icon {
color: #01b6e3 !important;
}
&-panel {
&-input {
background-color: transparent;
}
&-inner {
background-color: @modalBg;
border: 1px solid @formInputBorderColor;
border-radius: 0;
}
&-select li:focus {
color: #fff;
}
}
}
// 输入框样式
.ant-input {
border-radius: 0;
color: #fff;
&::placeholder {
color: #fff;
}
&:focus {
box-shadow: none;
}
&-number {
background-color: transparent;
}
&-group {
&-addon {
background-color: transparent;
}
}
&-clear-icon {
color: #00e9fe !important;
}
&:focus {
box-shadow: none !important;
}
&:disabled {
color: #fff;
}
&-search-icon {
color: #fff;
}
}
// 数字输入框
@input-number-handler-active-bg: #06404c;
@input-number-handler-hover-bg: #06404c;
@input-number-handler-bg: #06404c;
@input-number-handler-border-color: transparent;
.ant-input-number {
border-radius: 0;
border: 1px solid #0b8c82;
&-handler {
height: 50% !important;
&:hover {
height: 50% !important;
}
.anticon {
display: none !important;
}
// 数组输入框右侧的上下箭头
&::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-width: 4px;
border-right-width: 4px;
border-bottom-color: #4b859e;
position: absolute;
bottom: 2px;
right: 50%;
transform: translateX(4px);
}
&-down {
border-top: none;
&::after {
transform: translateX(4px) rotate(180deg);
top: 2px;
}
}
}
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
// 单选样式
.ant-radio {
&-wrapper {
color: #fff;
}
&-button-wrapper {
color: @primary-color;
}
}
.ant-upload {
&-select-picture-card {
background-color: transparent !important;
}
}
@checkboxSelector: .ant-checkbox;
@{checkboxSelector} {
&-inner {
background-color: #03353f;
border-radius: 0;
border-color: #0a544e;
}
&-checked {
@{checkboxSelector} {
&-inner {
background-color: #00e9fe;
&::after {
border-color: #000 !important;
}
}
}
}
}
// 下拉框样式
@select-dropdown-bg: #03353f;
.ant-select {
color: #fff !important;
&-selection {
background-color: @formInputBgColor !important;
border-color: @formInputBorderColor !important;
border-radius: 0;
box-shadow: none !important;
&__placeholder {
color: #fff !important;
}
&--multiple {
.ant-select-selection__choice {
background: transparent;
color: #fff;
border: 1px solid #0b8c82;
&__remove {
color: #fff !important;
}
}
}
}
&-dropdown {
padding-top: 7px;
background-color: transparent;
@borderColor: #0da397;
&:not(.ant-select-tree-dropdown) {
.ant-select-dropdown-content {
border: 1px solid @borderColor;
overflow: visible !important;
&::before {
position: absolute;
top: -6px;
left: 20px;
content: '';
width: 12px;
height: 12px;
border: 1px solid #0da397;
background: #03353f;
transform: rotate(45deg) skew(14deg, 14deg);
}
}
&.ant-select-dropdown-placement-topLeft {
padding-top: 0;
padding-bottom: 7px;
.ant-select-dropdown-content {
&::before {
top: auto;
bottom: -6px;
}
}
}
}
&-menu {
background: #03353f;
padding: 0;
position: relative;
&-item {
color: #fff;
font-family: Arial;
border: 0;
background-color: transparent !important;
padding: 4px 14px;
&:hover {
background-color: #055565 !important;
}
&-selected {
color: #0cebc9;
font-weight: normal;
}
&-disabled {
color: #476d74 !important;
&:hover {
background-color: transparent !important;
}
}
}
}
&--multiple {
// 多选
color: #000;
.ant-select-dropdown {
&-menu-item {
padding-left: 35px;
.anticon-check {
width: 16px;
height: 16px;
line-height: 18px;
left: 13px;
border: 1px solid #0a544e !important;
color: transparent !important;
background-color: #03353f;
}
&-selected {
.anticon-check {
background: #00e9fe;
border-color: #00e9fe;
color: #000 !important;
}
}
}
}
}
}
// 下拉框打开时的样式
&-open {
.ant-select {
&-selection {
background-color: #055565 !important;
}
}
}
&-clear-icon {
color: #00e9fe !important;
background-color: #03353f !important;
}
&-open {
.ant-select-clear-icon {
background-color: #055565 !important;
}
}
}
// 下拉菜单
.ant-dropdown {
&-menu {
background: #03353f;
padding: 0;
position: relative;
&-item {
color: #fff;
font-family: Arial;
border: 0;
background-color: transparent !important;
padding: 4px 14px;
&:hover {
background-color: #055565 !important;
}
&-selected {
color: #0cebc9;
font-weight: normal;
}
&-disabled {
color: #476d74 !important;
&:hover {
background-color: transparent !important;
}
}
}
}
}
// 树形下拉样式
.ant-select-tree {
color: #fff !important;
.ant-select-tree-node-content-wrapper {
color: #fff !important;
background-color: transparent !important;
&:hover {
background-color: #055565 !important;
}
&-selected {
color: #0cebc9;
font-weight: normal;
}
&-disabled {
color: #476d74 !important;
&:hover {
background-color: transparent !important;
}
}
}
}
// 树形结构
.ant-tree {
&-checkbox {
&-checked {
.ant-tree-checkbox-inner {
background-color: #00e9fe !important;
border-color: #00e9fe !important;
}
}
}
&-checkbox-inner {
background-color: #03353f !important;
border-color: #0a544e !important;
border-radius: 0;
&::after {
border-color: #000 !important;
}
}
&-node-content-wrapper {
background-color: transparent !important;
}
&-treenode-disabled {
.ant-tree-checkbox-inner {
border-color: #0a544e !important;
}
.ant-tree-checkbox-disabled {
.ant-tree-checkbox-inner {
&::after {
border-color: rgba(0, 0, 0, 0.3) !important;
}
}
}
}
&-node-selected {
.ant-tree-title {
color: #0cebc9 !important;
}
}
&-title {
user-select: none;
color: #ade6ee !important;
}
}
// 按钮
.ant-btn {
border-radius: 0;
font-family: Arial;
span {
text-shadow: 0px 1px 0px #000;
font-size: 16px;
}
&-success {
// 自定义warn样式
background-color: #08a7cf !important;
color: #fff !important;
border-color: #08a7cf !important;
&:hover {
background-color: #08a7cf !important;
}
}
&-warn {
// 自定义warn样式
background-color: #b98326 !important;
color: #fff !important;
border-color: #b98326 !important;
&:hover {
background-color: #b98326 !important;
}
}
&-grey {
// 自定义warn样式
background-color: #406979 !important;
color: #fff !important;
border-color: #406979 !important;
&:hover {
background-color: #406979 !important;
}
}
}
// 空状态
.ant-empty {
background-color: transparent;
color: #145b5c;
}
// 分页器样式
.ant-pagination {
&,
&-item a {
color: #ade6ee;
}
&-item {
min-width: 26px;
height: 26px !important;
line-height: 26px !important;
border-radius: 13px;
&-active {
background-color: #00bded;
a {
color: #fff !important;
}
}
&-ellipsis {
color: #ade6ee !important;
}
}
.ant-pagination-item-link {
color: #00bded;
}
&-disabled {
.ant-pagination-item-link {
color: #9ca2a6 !important;
}
}
.ant-select {
&-selection {
border: none;
box-shadow: none;
background-color: transparent !important;
color: #ade6ee;
&-selected-value {
height: 26px;
line-height: 26px;
}
.ant-select-arrow {
display: none;
}
}
.ant-select-selection__rendered::after {
content: '';
margin-left: 18px;
border: 6px solid transparent;
border-top-width: 8px;
border-bottom-width: 8px;
border-top-color: #00bded;
visibility: visible;
transform: translateY(8px);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-origin: 50% 25%;
}
&-open {
.ant-select-selection__rendered::after {
transform: translateY(6px) rotate(180deg);
}
}
}
&-options {
&-quick-jumper {
input {
background-color: #011927;
border: 1px solid #00cbfe;
width: 70px !important;
border-radius: 0;
color: #ade6ee;
text-align: center;
}
}
}
}
// 弹窗样式
.ant-modal {
&-content {
border-radius: 0;
border: 1px solid #0c6a66;
background-color: @modalBg;
}
&-header {
background-color: #0c817b;
padding: 0 20px;
border-radius: 0;
border-bottom: none;
}
&-title {
font-family: MicrogrammaD-MediExte;
font-weight: bold;
color: #fff;
height: 40px;
line-height: 40px;
}
&-close {
color: #fff !important;
&-x {
width: 40px;
height: 40px;
line-height: 40px;
}
}
&-body {
padding-bottom: 22px;
}
}
// 确认弹窗样式
.ant-modal-confirm {
&-title,
&-content {
color: #fff !important;
}
}
// 通知样式
.ant-message {
&-notice {
&-content {
border: 1px solid @formInputBorderColor;
background-color: @modalBg;
border-radius: 0;
}
}
}
.ant-notification {
&-notice {
background-color: @modalBg;
&-message {
color: #fff;
}
&-close {
color: #fff !important;
}
}
}
// 抽屉
.ant-drawer {
&-header {
background-color: @modalBg;
border-bottom-color: @formInputBorderColor;
}
&-title,
&-close {
color: #fff !important;
}
&-content {
background-color: @modalBg;
}
&-body {
> div {
background-color: @modalBg !important;
border: none !important;
}
.drawer-bootom-button {
border-top: 1px solid #0b8c82 !important;
}
}
}
// 警告提示
.ant-alert {
&-info {
background-color: @modalBg;
}
}
.ant-popover {
&-inner {
background-color: #03353f;
}
&-arrow {
border-left-color: #03353f !important;
border-top-color: #03353f !important;
z-index: -1;
}
}
// 滚动条
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #15494c !important;
}
// 穿梭框样式
.ant-transfer {
&-list {
border-radius: 0;
border-color: #224852;
&-header {
background-color: #08363c;
border-radius: 0;
border-bottom-color: #224852;
}
&-body {
overflow: auto;
}
}
&-operation {
.ant-btn {
background-color: #1397a3;
border: none;
border-radius: 0;
color: #fff;
&:disabled {
background-color: #4f7578;
color: #fff;
}
}
}
}
.ant-divider {
background-color: @formInputBorderColor;
}
.ant-spin {
&-blur::after {
opacity: 0.1;
}
}
.ant-popover {
&-arrow {
border-right-color: @formInputBgColor !important;
border-bottom-color: @formInputBgColor !important;
}
}
// collapse
@collapse-panel-border-radius: 0;
@collapse-header-padding: 0;
@collapse-header-bg: transparent;
@collapse-header-padding-extra: 20px;
@collapse-content-padding: 0;
@collapse-content-bg: transparent;
.ant-collapse {
border: none;
> .ant-collapse-item {
border-bottom: none;
}
&-content {
border-top: none;
}
}
#userLayout {
.container {
background-color: @modalBg !important;
.title {
color: #fff !important;
}
}
}
::-webkit-scrollbar-track {
background-color: #15494c !important;
}
::-webkit-scrollbar-thumb {
background-color: #007f9a !important;
}
::-webkit-scrollbar-button {
background-color: #15494c !important;
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #15494c !important;
}
::-webkit-scrollbar-corner {
background-color: #15494c;
}