1

ruoyi-admin/src/main/resources/static/css/theme-modern.css

@@ -0,0 +1,598 @@
+:root {
+    --theme-bg: #f5f7fb;
+    --theme-surface: #ffffff;
+    --theme-surface-muted: #f8f9fd;
+    --theme-primary: #6f5df6;
+    --theme-primary-soft: rgba(111, 93, 246, 0.12);
+    --theme-primary-border: rgba(111, 93, 246, 0.18);
+    --theme-text: #1f2937;
+    --theme-text-muted: #6b7280;
+    --theme-border: #e7eaf3;
+    --theme-shadow: 0 16px 40px rgba(31, 41, 55, 0.08);
+    --theme-shadow-soft: 0 8px 24px rgba(31, 41, 55, 0.06);
+    --theme-radius: 18px;
+}
+
+body {
+    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+    color: var(--theme-text);
+}
+
+body.gray-bg,
+.gray-bg {
+    background: var(--theme-bg) !important;
+}
+
+.wrapper-content,
+.container-div {
+    padding: 20px;
+}
+
+.search-collapse,
+.select-table,
+.wrapper-content > .row > .col-sm-12,
+.wrapper-content > .ibox,
+.wrapper-content > .ibox-content,
+.wrapper-content .panel,
+.wrapper-content .ibox-title,
+.wrapper-content .ibox-content,
+.modal-content {
+    border-radius: var(--theme-radius);
+}
+
+.search-collapse,
+.select-table,
+.ibox,
+.modal-content,
+.wrapper-content > .row > .col-sm-12 > .ibox-content,
+.wrapper-content > .row > .col-sm-12 > .panel {
+    background: var(--theme-surface);
+    box-shadow: var(--theme-shadow-soft);
+    border: 1px solid var(--theme-border);
+}
+
+.skin-blue,
+.skin-green,
+.skin-purple,
+.skin-red,
+.skin-yellow {
+    --theme-primary: #6f5df6;
+    --theme-primary-soft: rgba(111, 93, 246, 0.12);
+    --theme-primary-border: rgba(111, 93, 246, 0.18);
+}
+
+.search-collapse {
+    margin-bottom: 16px;
+    padding: 10px 12px 2px;
+}
+
+.search-collapse .select-list ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px 16px;
+}
+
+.search-collapse .select-list ul li {
+    margin-bottom: 10px;
+}
+
+.select-table {
+    padding: 10px 14px 14px;
+}
+
+.fixed-sidebar .navbar-static-side,
+.mini-navbar .navbar-static-side,
+.navbar-default.navbar-static-side {
+    background: #ffffff !important;
+    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.06);
+    border-right: 1px solid var(--theme-border);
+}
+
+.fixed-sidebar .logo,
+.navbar-default .logo {
+    background: transparent !important;
+    color: var(--theme-text) !important;
+    height: 68px;
+    line-height:  68px;
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+
+}
+
+.fixed-sidebar .logo:before,
+.navbar-default .logo:before {
+    content: "\f0e7";
+    font-family: FontAwesome;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    margin-right: 10px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, #7c6cf8, #5a7df8);
+    color: #fff;
+    font-size: 16px;
+    vertical-align: middle;
+}
+
+.user-panel {
+    margin: 16px 14px 12px;
+    padding: 16px 14px;
+    border-radius: 16px;
+    background: linear-gradient(180deg, #fafbff, #f4f7ff);
+    border: 1px solid var(--theme-border);
+}
+
+.user-panel .info p,
+.user-panel .info a,
+.nav-header a,
+.nav > li > a,
+.navbar-default .nav > li > a {
+    color: var(--theme-text) !important;
+}
+
+.nav > li > a {
+    margin: 4px 12px;
+    padding: 12px 16px 12px 18px;
+    border-radius: 14px;
+    font-weight: 600;
+    color: #4b5563 !important;
+    transition: all 0.2s ease;
+}
+
+.navbar-default .nav > li > a:hover,
+.navbar-default .nav > li > a:focus,
+.nav > li.selected > a,
+.nav > li.active > a {
+    background: var(--theme-primary-soft) !important;
+    color: var(--theme-primary) !important;
+}
+
+.nav > li.active,
+.nav:not(.navbar-toolbar) > li.active {
+    background: transparent !important;
+    border-left: none !important;
+}
+
+.nav-second-level,
+.nav-third-level,
+.nav-four-level {
+    background: transparent;
+}
+
+.nav-second-level li a,
+.nav-third-level li a,
+.nav-four-level li a {
+    margin-left: 18px;
+    margin-right: 12px;
+    border-radius: 12px;
+    color: var(--theme-text-muted) !important;
+}
+
+#page-wrapper {
+    background: var(--theme-bg) !important;
+    min-height: 100vh;
+}
+
+.border-bottom {
+    border-bottom: none !important;
+}
+
+.navbar.navbar-static-top {
+    margin: 0;
+    padding: 0 18px;
+    min-height: 64px;
+    border-radius: 0;
+    background: var(--theme-surface) !important;
+    box-shadow: none;
+    border: none;
+    border-bottom: 1px solid var(--theme-border);
+}
+
+.navbar-header .minimalize-styl-2 {
+    margin: 12px 0 0;
+    border-radius: 12px;
+    background: var(--theme-primary);
+    color: #fff !important;
+}
+
+.nav.navbar-top-links li a,
+.nav.navbar-right > li > a {
+    color: var(--theme-text) !important;
+    border-radius: 12px;
+}
+
+.nav.navbar-top-links li a:hover,
+.nav.navbar-right > li > a:hover {
+    background: var(--theme-surface-muted) !important;
+    color: var(--theme-primary) !important;
+}
+
+.skin-blue .navbar-default .nav > li.selected > a,
+.skin-blue .navbar-default .nav > li.selected > a:focus,
+.skin-green .navbar-default .nav > li.selected > a,
+.skin-green .navbar-default .nav > li.selected > a:focus,
+.skin-purple .navbar-default .nav > li.selected > a,
+.skin-purple .navbar-default .nav > li.selected > a:focus,
+.skin-red .navbar-default .nav > li.selected > a,
+.skin-red .navbar-default .nav > li.selected > a:focus,
+.skin-yellow .navbar-default .nav > li.selected > a,
+.skin-yellow .navbar-default .nav > li.selected > a:focus,
+.skin-blue .dropdown-menu > .active > a,
+.skin-blue .dropdown-menu > .active > a:hover,
+.skin-blue .dropdown-menu > .active > a:focus,
+.skin-green .dropdown-menu > .active > a,
+.skin-green .dropdown-menu > .active > a:hover,
+.skin-green .dropdown-menu > .active > a:focus,
+.skin-purple .dropdown-menu > .active > a,
+.skin-purple .dropdown-menu > .active > a:hover,
+.skin-purple .dropdown-menu > .active > a:focus,
+.skin-red .dropdown-menu > .active > a,
+.skin-red .dropdown-menu > .active > a:hover,
+.skin-red .dropdown-menu > .active > a:focus,
+.skin-yellow .dropdown-menu > .active > a,
+.skin-yellow .dropdown-menu > .active > a:hover,
+.skin-yellow .dropdown-menu > .active > a:focus {
+    background-color: var(--theme-primary) !important;
+    color: #fff !important;
+}
+
+.content-tabs {
+
+    background: var(--theme-surface);
+    box-shadow: var(--theme-shadow-soft);
+    border: 1px solid var(--theme-border);
+}
+
+.content-tabs .roll-nav,
+.page-tabs a {
+    color: var(--theme-text-muted);
+}
+
+.page-tabs a.active {
+    color: var(--theme-primary);
+    background: linear-gradient(180deg, #fff, #faf9ff);
+}
+
+.mainContent {
+
+    overflow: hidden;
+
+}
+
+.RuoYi_iframe {
+    background: var(--theme-bg);
+}
+
+.footer {
+    margin: 0 16px 16px;
+    padding: 14px 18px;
+
+}
+
+.btn,
+.form-control,
+.select2-selection,
+.bootstrap-select .dropdown-toggle,
+.dropdown-menu,
+.popover,
+.layui-layer,
+.modal-content {
+    border-radius: 12px !important;
+}
+
+.btn-primary,
+.btn-success {
+    border-color: var(--theme-primary) !important;
+    background: var(--theme-primary) !important;
+}
+
+.btn-primary:hover,
+.btn-success:hover {
+    filter: brightness(0.96);
+}
+
+.form-control,
+.bootstrap-select .dropdown-toggle,
+.select2-container--bootstrap .select2-selection {
+    min-height: 40px;
+    border-color: var(--theme-border) !important;
+    background: #fff;
+    box-shadow: none !important;
+}
+
+.form-control:focus,
+.bootstrap-select .dropdown-toggle:focus,
+.select2-container--bootstrap .select2-selection:focus {
+    border-color: var(--theme-primary) !important;
+    box-shadow: 0 0 0 3px rgba(111, 93, 246, 0.12) !important;
+}
+
+.bootstrap-table {
+    border-radius: 16px;
+    overflow: hidden;
+}
+
+.fixed-table-container {
+    border: none !important;
+}
+
+.fixed-table-toolbar,
+.fixed-table-pagination,
+.fixed-table-container tbody td,
+.fixed-table-container thead th {
+    border-color: var(--theme-border) !important;
+}
+
+.fixed-table-container thead th {
+    background: #fafbff;
+    color: #374151;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #fcfcff;
+}
+
+.pagination > li > a,
+.pagination > li > span {
+    color: var(--theme-text-muted);
+    border-color: var(--theme-border);
+}
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover {
+    background: var(--theme-primary);
+    border-color: var(--theme-primary);
+}
+
+body.signin {
+    min-height: 100vh;
+    background:
+        radial-gradient(circle at 18% 20%, rgba(94, 114, 228, 0.22), transparent 32%),
+        radial-gradient(circle at 78% 82%, rgba(111, 93, 246, 0.28), transparent 28%),
+        linear-gradient(135deg, #102a58 0%, #163c72 48%, #1d477d 100%) !important;
+}
+
+.language-selector {
+    top: 24px !important;
+    right: 28px !important;
+    z-index: 3;
+}
+
+.lang-option {
+    padding: 8px 14px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.92) !important;
+    backdrop-filter: blur(8px);
+}
+
+.lang-option:hover {
+    text-decoration: none !important;
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.signinpanel {
+    width: min(1120px, calc(100vw - 48px));
+    margin: 0 auto;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    color: #fff;
+}
+
+.signinpanel .row {
+    width: 100%;
+    display: flex;
+    align-items: stretch;
+    margin: 0;
+    overflow: hidden;
+    border-radius: 28px;
+    box-shadow: 0 28px 70px rgba(9, 19, 37, 0.3);
+    background: rgba(255, 255, 255, 0.06);
+    backdrop-filter: blur(8px);
+}
+
+.signinpanel .col-sm-7,
+.signinpanel .col-sm-5 {
+    float: none;
+    padding: 0;
+}
+
+.signinpanel .col-sm-7 {
+    width: 58.33333333%;
+    background:
+        radial-gradient(circle at 18% 20%, rgba(120, 153, 255, 0.22), transparent 28%),
+        radial-gradient(circle at 85% 90%, rgba(127, 92, 255, 0.28), transparent 24%),
+        linear-gradient(150deg, rgba(14, 40, 82, 0.96) 0%, rgba(20, 50, 95, 0.96) 60%, rgba(23, 61, 105, 0.96) 100%);
+}
+
+.signinpanel .col-sm-5 {
+    width: 41.66666667%;
+    background: #f7f8fc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 42px;
+}
+
+.signinpanel .signin-info {
+    min-height: 640px;
+    padding: 88px 72px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.signinpanel .signin-info:before {
+    content: "AI";
+    width: 56px;
+    height: 56px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 18px;
+    margin-bottom: 26px;
+    background: linear-gradient(135deg, #7c6cf8, #5a7df8);
+    color: #fff;
+    font-weight: 700;
+    font-size: 20px;
+    letter-spacing: 1px;
+    box-shadow: 0 18px 32px rgba(90, 125, 248, 0.28);
+}
+
+.signinpanel .signin-info h2 {
+    margin: 0 0 18px;
+    font-size: 42px;
+    line-height: 1.24;
+    font-weight: 700;
+    color: #fff;
+}
+
+.signinpanel .signin-info p {
+    max-width: 460px;
+    font-size: 16px;
+    line-height: 1.8;
+    color: rgba(255, 255, 255, 0.78);
+}
+
+.signinpanel .signin-info ul {
+    margin-top: 30px;
+}
+
+.signinpanel .signin-info ul li {
+    position: relative;
+    padding-left: 28px;
+    margin-bottom: 16px;
+    color: rgba(255, 255, 255, 0.86);
+    font-size: 15px;
+}
+
+.signinpanel .signin-info ul li:before {
+    content: "\f00c";
+    position: absolute;
+    left: 0;
+    top: 2px;
+    font-family: FontAwesome;
+    width: 18px;
+    height: 18px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(124, 108, 248, 0.28);
+    color: #dfe3ff;
+    font-size: 10px;
+}
+
+.signinpanel form {
+    width: 100%;
+    max-width: 390px;
+    padding: 40px 34px 28px;
+    border: 1px solid rgba(17, 24, 39, 0.06);
+    border-radius: 24px;
+    background: #ffffff;
+    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
+}
+
+.signinpanel form h4 {
+    margin: 0 0 24px;
+    color: #111827;
+    font-size: 31px;
+    font-weight: 700;
+}
+
+.signinpanel .form-control {
+    height: 46px !important;
+    margin-top: 14px;
+    padding-left: 16px !important;
+    border: 1px solid #dbe1ee;
+    background-position: calc(100% - 16px) center;
+}
+
+.signinpanel .btn {
+    margin-top: 20px;
+    height: 46px;
+    border: none;
+    font-size: 15px;
+    font-weight: 600;
+    background: linear-gradient(135deg, #1d6fe8, #1264d1) !important;
+}
+
+.signinpanel .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 14px 28px rgba(29, 111, 232, 0.22);
+}
+
+.signinpanel .checkbox-custom,
+.signinpanel .checkbox-custom label {
+    color: #6b7280;
+}
+
+.signup-footer {
+    display: none;
+}
+
+body.signin .imgcode {
+    border-radius: 12px;
+    border: 1px solid #dbe1ee;
+    background: #fff;
+    padding: 2px;
+}
+
+#groupId {
+    height: 46px !important;
+    border-radius: 12px !important;
+    border-color: #dbe1ee !important;
+}
+
+@media (max-width: 991px) {
+    .signinpanel {
+        width: min(720px, calc(100vw - 32px));
+    }
+
+    .signinpanel .row {
+        display: block;
+    }
+
+    .signinpanel .col-sm-7,
+    .signinpanel .col-sm-5 {
+        width: 100%;
+    }
+
+    .signinpanel .signin-info {
+        min-height: auto;
+        padding: 56px 40px 32px;
+    }
+
+    .signinpanel .col-sm-5 {
+        padding: 28px;
+    }
+}
+
+@media (max-width: 768px) {
+    .signinpanel {
+        width: calc(100vw - 24px);
+    }
+
+    .signinpanel .signin-info h2 {
+        font-size: 30px;
+    }
+
+    .signinpanel form {
+        max-width: none;
+        padding: 28px 22px 24px;
+    }
+
+    .navbar.navbar-static-top,
+    .content-tabs,
+    .mainContent,
+    .footer {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}