/**
* Template Name: Anyar - v2.0.0
* Template URL: https://bootstrapmade.com/anyar-free-multipurpose-one-page-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
:root {
--header-height: 74px; /* 15px padding + 44px logo + 15px padding */
--phenotype-table-elevation-shadow: 0 2px 8px #ced4da;
--chip-shadow-hover: 0 2px 8px #ced4da;
--chip-shadow-active: 0 4px 10px #ced4da;
}
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #233047; /* 你喜欢的主色，比如深灰 */
background: #fff;
font-size: 18px; /* 统一基础字号，推荐16-18px */
}
a {
color: #364fc7;
font-size: inherit; /* 继承body字号 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a:hover {
color: #123aff;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #233047;
font-weight: bold;
/* 统一字号或分级设置 */
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
h5, h6 { font-size: 1em; }
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
display: none;
right: 15px;
bottom: 15px;
z-index: 99999;
}
.back-to-top i {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
width: 40px;
height: 40px;
border-radius: 50px;
background: #3e4463;
color: #fff;
transition: all 0.4s;
}
.back-to-top i:hover {
background: #7b84b7;
color: #fff;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #fff;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #5c7cfa;
border-top-color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
height: 60px;
font-size: 20px;
transition: all 0.5s;
overflow: hidden;
color: rgba(255, 255, 255, 0.8);
background-color: #3c3c3c;
}
#topbar.topbar-scrolled {
top: -60px;
}
#topbar .full-title i {
color: #fff;
padding-right: 4px;
}
#topbar .full-title i span{
color: #ffcc00;
font-weight: bolder;
}
#topbar .cta {
background: transparent;
}
#topbar .cta a {
color: #fff;
background: #f6b024;
padding: 6px 24px 8px 24px;
display: inline-block;
transition: 0.3s;
border-radius: 50px;
}
#topbar .cta a:hover {
background: #f1a40a;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
background: #fff;
transition: all 0.5s;
z-index: 10010;
padding: 15px 0;
top: 0px;
box-shadow: 0 4px 6px rgba(89, 105, 163, 0.663);
}
#header.header-scrolled {
top: 0;
background: #e5e8eb;;
box-shadow: 0 4px 6px rgb(89, 105, 163, 0.663);
}
#header .logo {
font-size: 32px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
}
#header .logo a {
color: #fff;
}
#header .logo img {
max-height: 44px;
}
@media (max-width: 992px) {
#header {
top: 0;
padding: 15px 0;
/*background: transparent;*/
}
#header .logo {
font-size: 28px;
}
}
.header-inner-pages {
background: rgba(5, 87, 158, 0.9) !important;
}
.topbar-inner-pages {
background: rgba(6, 98, 178, 0.9) !important;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu > ul {
display: flex;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
padding: 10px 0 10px 40px; /* 最后一个参数是字两侧间距 */
}
.nav-menu a {
display: block;
position: relative;
color: #1a2330;
transition: 0.3s;
font-size: 18px;
font-weight: bolder;
padding: 0 3px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.nav-menu > ul > li > a:before {
content: "";
position: absolute;
width: 120%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #5c7cfa;
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.nav-menu a:hover:before, .nav-menu li:hover > a:before, .nav-menu .active > a:before {
visibility: visible;
width: 100%;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
color: #364fc7;
}
.nav-menu .drop-down ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 8px;
}
.nav-menu .drop-down:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.nav-menu .drop-down li {
min-width: 100px;
position: relative;
}
.nav-menu .drop-down ul a {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #032e54;
}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
color: #9775fa;
}
.nav-menu .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {
top: 0;
left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {
opacity: 1;
top: 0;
left: 100%;
}
.nav-menu .drop-down .drop-down > a {
padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\eaa0";
font-family: IcoFont;
position: absolute;
right: 15px;
}
@media (max-width: 1366px) {
.nav-menu .drop-down .drop-down ul {
left: -90%;
}
.nav-menu .drop-down .drop-down:hover > ul {
left: -100%;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\ea9d";
}
}
/*page bar*/
.pagination .active > span{
background-color:#3e4463 !important; /*分页栏色块的颜色*/
border: #9294c4;
}
.pagination a:hover:not(.active) {
height: 40px;
background-color: #9294c4; /*悬停时色块的颜色*/
color: #3c3c3c; /*悬停时字体的颜色*/
border-color: #9294c4; /*分页栏边框的颜色*/
}
.pagination a, .pagination span {
height: 40px; /*统一高度*/
line-height: 20px; /* 与height值一致，确保单行文本垂直居中 */
place-items: center; /* 同时实现垂直和水平居中 */
color: #3c3c3c; /*分页栏字体的颜色*/
border-color: none /*分页栏边框的颜色，这时为默认的灰色边框*/
}
/* Mobile Navigation */
.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 15px;
z-index: 10000;
border: 0;
background: none;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #364fc7;
}
.mobile-nav {
position: fixed;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
z-index: 9999;
overflow-y: auto;
background: #fff;
transition: ease-in-out 0.2s;
opacity: 0;
visibility: hidden;
border-radius: 10px;
padding: 10px 0;
}
.mobile-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav a {
display: block;
position: relative;
color: #8e8ee9;
padding: 10px 20px;
font-weight: 500;
outline: none;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
color: #8e8ee9;
text-decoration: none;
}
.mobile-nav .drop-down > a:after {
content: "\ea99";
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding-left: 10px;
position: absolute;
right: 15px;
}
.mobile-nav .active.drop-down > a:after {
content: "\eaa1";
}
.mobile-nav .drop-down > a {
padding-right: 35px;
}
.mobile-nav .drop-down ul {
display: none;
overflow: hidden;
}
.mobile-nav .drop-down li {
padding-left: 20px;
}
.mobile-nav-overly {
width: 100%;
height: 100%;
z-index: 9997;
top: 0;
left: 0;
position: fixed;
background: rgba(5, 74, 133, 0.6);
overflow: hidden;
display: none;
transition: ease-in-out 0.2s;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav {
opacity: 1;
visibility: visible;
}
.mobile-nav-active .mobile-nav-toggle i {
color: #364fc7;
}
/*--------------------------------------------------------------
# Main Section
--------------------------------------------------------------*/
#main {
width: 100%;
min-height: 100vh;
position: relative;
background: radial-gradient(circle, #eef2fb 0%, #a7b3d8 100%);
background-size: cover;
background-position: center;
margin-top: 0;
padding: calc(var(--header-height) + 2rem) 0 2rem 0;
overflow: hidden;
}
#main.home-main #home {
position: relative;
z-index: 2;
}
#home .home-logo {
width: 340px;
max-width: 80vw;
height: auto;
margin-bottom: 24px;
}
#word-cloud {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.word-cloud-tag {
position: absolute;
transform: translate(-50%, -50%);
color: #727ba8;
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
user-select: none;
letter-spacing: 0.01em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.word-cloud-tag.word-cloud-vertical {
transform: translate(-50%, -50%) rotate(-90deg);
}
.word-cloud-tag.word-cloud-strong {
font-weight: 700;
}
.word-cloud-gene {
color: #727ba8;
}
.word-cloud-location {
color: #727ba8;
}
.word-cloud-disease {
color: #727ba8;
font-style: italic;
}
.word-cloud-effect {
color: #727ba8;
}
#main .carousel-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#main h2 {
color: #000;
margin-bottom: 30px;
font-size: 48px;
font-weight: 700;
}
#main p {
width: 100%;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
margin: 0 auto 30px auto;
color: #000;
}
#main .carousel-control-prev, #main .carousel-control-next {
width: 10%;
}
#main .carousel-control-next-icon, #main .carousel-control-prev-icon {
background: none;
font-size: 48px;
line-height: 1;
width: auto;
height: auto;
}
#main .btn-get-started {
font-family: Arial, "Gill Sans", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 32px;
border-radius: 50px;
transition: 0.5s;
line-height: 1;
margin: 10px;
color: #fff;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
border: 2px solid #b197fc;
}
#main .btn-get-started:hover {
background: #b197fc;
color: #fff;
text-decoration: none;
}
@media (min-width: 1024px) {
#main .carousel-control-prev, #main .carousel-control-next {
width: 5%;
}
}
@media (max-width: 768px) {
#main {
min-height: 100vh;
/*margin-bottom: 60px;*/
}
#main h2{
font-size: 28px;
}
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
padding: 140px 0;
/*overflow: hidden;*/
}
.result-section{
margin-top: 0;
}
#main.detail-page-section {
align-items: flex-start;
padding-top: 88px;
padding-bottom: 60px;
min-height: auto;
overflow-x: hidden;
overflow-y: visible;
}
#main.about-page-section {
align-items: flex-start;
min-height: auto;
overflow: visible;
}
.about-page-section .help-nav {
background: #fff;
}
#detail > .title {
margin-left: 0;
margin-bottom: 16px;
}
#detail.detail-nav-active > .title {
display: none;
}
#detail-snapshot {
background: #fff;
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px 12px;
box-shadow: 2px 2px 6px rgba(89, 105, 163, 0.663);
position: relative;
z-index: 3;
overflow: visible;
}
.detail-content {
position: relative;
z-index: 2;
}
.detail-content > .section-container.card {
overflow: visible;
}
.section-subtitle {
font-size: 1.05rem;
color: #1a2330;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e8eb;
}
.section-bg {
background-color: #f1f8ff;
}
.section-title {
text-align: center;
padding-bottom: 10px;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
background: #e5e8eb;
padding: 0 0 10px 0;
color: #3e4463;
font-size: 16px;
}
#footer .footer-top {
background: #e5e8eb; /* 底部背景颜色 */
padding: 20px 0 0 0; /* 底部距离 */
}
#footer .footer-top .footer-info {
margin-bottom: 0px;
padding: 20px 0;
}
#footer .footer-top .footer-info h4 {
font-size: 16px;
margin: 0 0 10px 0;
line-height: 1;
font-weight: 700;
}
#footer .footer-top .footer-info p {
font-size: 16px;
line-height: 24px;
margin-bottom: 8px;
padding: 10px 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #3e4463;
}
#footer .footer-top .social-links a {
font-size: 16px;
display: inline-block;
background: rgba(255, 255, 255, 0.1);
color: #3e4463;
line-height: 1;
padding: 10px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
background: #f6b024;
color: #fff;
text-decoration: none;
}
#footer .footer-top h4 {
font-size: 16px;
font-weight: bold;
color: #1a2330; /* 底部标题字体颜色 */
position: relative;
padding-bottom: 12px;
}
#footer .footer-top .footer-links {
margin-bottom: 15px; /* 底部距离 */
}
#footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
#footer .footer-top .footer-links ul i {
padding-right: 2px;
color: #1a2330; /* 底部箭头颜色 */
font-size: 18px;
line-height: 1;
}
#footer .footer-top .footer-links ul li {
padding: 8px 0;
display: flex;
align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
}
#footer .footer-top .footer-links ul a {
color: #1a2330; /* 底部字体颜色 */
font-size: 15px;
transition: 0.3s;
display: inline-block;
line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {
color: #3e4463; /* 悬停字体颜色 */
}
#footer .footer-top .footer-contact {
margin-bottom: 30px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#footer .footer-top .footer-contact p {
line-height: 30px;
font-size: 16px;
}
#footer .footer-top .footer-contact a {
font-size: 16px;
}
#footer .copyright {
font-size: 16px;
color: #050505;
text-align: center;
padding-top: 10px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #1a2330; /* 你喜欢的主色，比如深灰 */
}
#footer .copyright a {
font-size: 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #364fc7;
}
#footer .copyright a:hover {
font-size: 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #0f32e1;
}
#footer .credits {
padding-top: 5px;
text-align: center;
font-size: 13px;
color: #3e4463;
}
#footer .credits a {
color: #f6b024;
}
/*------------my style----------------*/
.table tr th {
font-size: 16px !important;
}
.ri-information-line{
color: #364fc7;
}
.arrow{
color:#364fc7;
}
.download-div{
text-align: right;
font-size: 18px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.download-div .ri-download-2-line{
color: #364fc7;
cursor: pointer;
}
.download-div .ri-download-2-line:hover{
color: #0f32e1;
}
#simple_search_form {
width:100%;
}
#simple_search_form .search-input-wrap {
position: relative;
flex: 1 1 auto;
width: 1%;
}
#simple_search_form .simple-search-input {
padding-right: 95px;
}
#simple_search_form .advanced-search-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
z-index: 11;
cursor: pointer;
color: #7579ee;
font-weight: bold;
font-size: 14px;
line-height: 1;
user-select: none;
background: transparent;
border: none;
padding: 6px 4px;
}
#simple_search_form .advanced-search-btn:hover,
#simple_search_form .advanced-search-btn:focus {
color: #364fc7;
outline: none;
box-shadow: none;
}
.form-control {
height: 50px; /* 设置固定高度 */
line-height: 25px;
vertical-align: middle; /* 针对行内元素的垂直对齐 */
align-items: center; /* 垂直居中 */
margin-bottom: 5px;
}
.btn-mine{
background-color: #3f497a;
border-top: 1px solid #3f497a; /* 上边框：1px宽，紫色 */
border-right: 1px solid #4f5a93; /* 右边框：1px宽，紫色 */
border-bottom: 1px solid #4f5a93; /* 下边框：1px宽，紫色 */
border-left: none;
color:#fff;
border-radius: 0 10px 10px 0;
padding: 8px 16px 8px 16px;
cursor: pointer;
line-height: 1;
font-size: 18px;
}
.btn-mine:hover{
background-color: #4f5a93;
}
.btn-mine:hover:not(.active){
background-color: #4f5a93; /* 按下时的背景颜色为紫色 */
color: #fff; /* 按下时的文字颜色为白色 */
}
.page-title{
text-align: center;
}
.page-info-container {
font-size: 16px;
}
/*选择框*/
.my-select-tag {
background-color: #3f497a;
border: 1px solid #4f5a93;
color: #fff;
border-radius: 10px;
padding: 8px 32px 8px 16px;
appearance: none;
outline: none;
cursor: pointer;
width: 160px;
min-width: 160px;
max-width: 160px;
flex: 0 0 160px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px 18px;
font-size: 18px;
}
.my-select-tag:focus, .my-select-tag:hover {
background-color: #4f5a93;
color: #fff;
border: 1px solid #3f497a;
}
.my-select-link {
background-color: #fff;
border: 1px solid #ccc;
color: #000;
border-radius: 10px;
padding: 8px 32px 8px 16px;
appearance: none;
outline: none;
cursor: pointer;
min-width: 95px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px 18px;
font-size: 18px;
}
.my-select-link:focus,
.my-select-link:hover {
background-color: #fff;
color: #000;
border: 1px solid #ccc;
}
.btn-outline-secondary {
background-color: transparent;
border: 1px solid #a39af7;
color: #1a2330;
border-radius: 10px;
padding: 8px 16px 8px 16px;
cursor: pointer;
line-height: 1;
display: inline-block;
}
.btn-outline-secondary:hover {
background-color: #edf2ff;
color: #1a2330;
}
/* Sidebar Styles */
.sidenav {
height: calc(100% - var(--header-height));
width: 0;
position: fixed;
z-index: 10005;
top: var(--header-height);
left: 0;
background-color: #f8faff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 20px;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
border-right: 1px solid #ddd;
}
.sidenav-content {
padding: 30px;
width: 750px;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.sidenav.open {
width: 750px;
}
.sidenav.open .sidenav-content {
opacity: 1;
transition-delay: 0.2s;
}
.sidenav .closebtn {
transition: 0.3s;
}
.sidenav .closebtn:hover {
color: #4d4d4d !important;
transform: rotate(90deg);
}
#sidenav-overlay {
position: fixed;
display: none;
width: 100%;
height: calc(100% - var(--header-height));
top: var(--header-height);
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10004;
cursor: pointer;
backdrop-filter: blur(2px);
}
.input-example{
display: inline-block;
color:#364fc7;
}
.input-example>span {
cursor: pointer;
text-align: left;
font-size: 18px;
}
.input-example .exam-1 {
color: #1a2330;
}
.input-example .exam-2 {
color: #1a2330;
}
.input-example .exam-3 {
color: #1a2330;
}
.input-example .exam-4 {
color: #1a2330;
}
.input-example>span:hover{
color:#364fc7;
text-decoration:none;
}
.title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bolder;
font-size: 36px;
margin-bottom: 30px;
margin-left: 30px;
text-align: center;
color: #233047;
}
#main p.title {
color: #233047;
}
.title i {
font-weight: normal !important;
color: #233047;
}
.me-2 {
font-weight: bolder;
font-size: 24px;
}
.sub-title {
color: #233047;
font-weight: bolder;
font-size: 24px;
text-align: left;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.body-title {
display: flex;
align-items: center;
gap: 2px;
margin-bottom: 12px;
color: #364fc7;
font-weight: bolder;
font-size: 20px;
line-height: 1.2;
text-align: left;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.body-title i {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
color: #364fc7;
flex-shrink: 0;
}
#detail .body-title-collapsible,
#help .body-title-collapsible {
cursor: pointer;
user-select: none;
transition: color 0.15s ease;
}
#detail .body-title-collapsible:hover,
#detail .body-title-collapsible:hover i,
#help .body-title-collapsible:hover,
#help .body-title-collapsible:hover i {
color: #3a58eb;
}
#detail .body-title-collapsible.is-collapsed + .body-title-panel,
#help .body-title-collapsible.is-collapsed + .body-title-panel {
display: none;
}
#detail .body-title-panel,
#help .body-title-panel {
margin-bottom: 4px;
}
#help .body-title-panel + .body-title {
margin-top: 1rem;
}
.section-container {
color: #233047;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
scroll-margin-top: 210px;
}
.section-container.card {
background-color: #fff;
background-clip: border-box;
border: none;
border-radius: 4px;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 18px;
line-height: 1.5;
color: #1a2330;
box-shadow: none;
}
.detail-content-wrapper > .section-container.card {
margin: 20px;
}
.section-container .card-header {
background: linear-gradient(90deg, #dbe4ff 0%, #ffffff 100%);
color: #1a2330;
border: none;
border-left: 5px solid #364fc7;
box-shadow: 0 2px 6px rgba(89, 105, 163, 0.663);
border-radius: 2px;
padding: 12px 15px;
min-height: 24px;
margin: 0;
display: flex;
align-items: center;
font-size: 24px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.section-container .card-body {
padding: 20px;
flex: 1 1 auto;
font-size: 18px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-shadow: 0 6px 6px rgba(89, 105, 163, 0.663);
}
.card-header h3, .card-header h5, .card-header h4 {
margin: 0;
}
/*---------home page style-------------*/
.des-webname{
color: orange;
font-weight: bolder;
}
.des-toolname{
color: #3aadb3;
font-weight: bolder;
}
.des-num{
color:red;
font-weight:bolder;
}
.text-des{
text-align: justify;
text-indent:0em;
margin-bottom: 0;
}
#carouselCaptions{
background-color: #000;
}
/*---------webserver page style-------------*/
.task-time{
color:#f44336;
}
.task-ing{
color:#03a9f4;
}
.task-end{
color:#8bc34a;
}
.copy{
color:#03a9f4;
cursor: pointer;
}
.copy:hover{
color:red;
}
/*---------Download page style-------------*/
.download-intro {
margin-bottom: 1.25rem;
color: #5c6778;
font-size: 14px;
line-height: 1.6;
}
.download-toolbar {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.download-toolbar .result-download-btn {
background: linear-gradient(180deg, #4c6ef5 0%, #364fc7 100%);
color: #fff;
cursor: pointer;
}
.download-toolbar .result-download-btn:hover,
.download-toolbar .result-download-btn:active {
color: #fff;
background: linear-gradient(180deg, #4263eb 0%, #2f44ad 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 4px 14px rgba(54, 79, 199, 0.36);
}
.download-toolbar .result-download-btn.is-inactive {
opacity: 0.55;
}
.download-selected-count.is-hint {
color: #c92a2a;
font-weight: 600;
}
.download-selected-count {
color: #5c6778;
font-size: 14px;
}
.download-select-col {
width: 48px;
text-align: center;
vertical-align: middle !important;
}
.download-select-col input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.download-table > tbody > tr > td:nth-child(2) {
font-weight: 600;
white-space: nowrap;
}
.download-action-col {
width: 56px;
text-align: center;
vertical-align: middle !important;
}
.download-table .result-download-btn {
width: auto;
min-width: 0;
height: auto;
padding: 4px;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #4263eb;
font-size: 20px;
line-height: 1;
}
.download-table .result-download-btn:hover,
.download-table .result-download-btn:active {
color: #3451d1;
background: transparent;
box-shadow: none;
transform: none;
}
.download-table .result-download-btn i {
width: auto;
height: auto;
border-radius: 0;
background: transparent;
font-size: 20px;
}
#download-email-modal {
z-index: 10050;
}
body.modal-open .modal-backdrop.show {
z-index: 10040;
}
.download-email-modal-dialog {
max-width: 520px;
margin: 1.75rem auto;
}
.download-email-modal-content {
max-height: calc(100vh - 3.5rem);
overflow: hidden;
}
.download-email-modal-content .modal-body {
overflow-y: auto;
}
#download-email-form label {
font-size: 14px;
font-weight: 600;
color: #2f3b52;
margin-bottom: 0.35rem;
}
#download-email-form .form-control {
font-size: 14px;
height: auto;
min-height: 42px;
padding: 0.5rem 0.75rem;
line-height: 1.5;
}
.download-email-modal-content .modal-title {
font-weight: 700;
color: #2f3b52;
}
.download-email-modal-intro {
margin-bottom: 0.75rem;
color: #5c6778;
font-size: 14px;
line-height: 1.6;
}
.download-email-modal-dataset {
margin-bottom: 1rem;
color: #364fc7;
font-size: 14px;
}
.download-email-dataset-list {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
color: #334155;
}
.download-email-dataset-list li + li {
margin-top: 0.25rem;
}
.download-email-feedback {
margin-top: 1rem;
padding: 0.75rem 0.9rem;
border-radius: 6px;
font-size: 14px;
line-height: 1.5;
}
.download-email-feedback.is-success {
background: #ebfbee;
color: #2b8a3e;
border: 1px solid #b2f2bb;
}
.download-email-feedback.is-error {
background: #fff5f5;
color: #c92a2a;
border: 1px solid #ffc9c9;
}
#download-email-submit[disabled] {
opacity: 0.75;
cursor: wait;
}
#download-email-modal .result-download-btn {
background: linear-gradient(180deg, #4c6ef5 0%, #364fc7 100%);
color: #fff;
}
#download-email-modal .result-download-btn:hover:not(:disabled),
#download-email-modal .result-download-btn:active:not(:disabled) {
color: #fff;
background: linear-gradient(180deg, #4263eb 0%, #2f44ad 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 4px 14px rgba(54, 79, 199, 0.36);
}
#captcha canvas, #captcha .refreshIcon {
display: none;
}
#captcha canvas:first-child{
position: absolute;
bottom: 40px
}
#captcha canvas:nth-child(3){
position: absolute;
top: -155px;
}
#captcha .refreshIcon{
top:-155px;
}
#captcha{
position: absolute;
top:-13px;
margin: 0px !important;
}
#captcha:hover canvas, #captcha:hover .refreshIcon {
display: block;
}
#msg{
display: none
}
/*---------result page style-------------*/
.viewRes{
color:#03a9f4;
cursor: pointer;
}
.viewRes:hover{
color:red;
}
/*--result页面表格的样式（非 TCGA 皮肤）---*/
#searchResShow:not(.phenotype-tcga-table) tr td,
#evidenceSummaryShow:not(.phenotype-tcga-table) tr td,
#protgpsSearchResShow:not(.protgps-dt-table):not(.phenotype-tcga-table) tr td,
#expSearchResShow:not(.phenotype-tcga-table) tr.exp-data-row td {
vertical-align: middle;
font-size: 16px;
line-height: 1.5;
padding: 8px 10px;
text-align: left;
}
#expSearchResShow:not(.phenotype-tcga-table) tr.exp-data-row td {
text-align: left;
}
#searchResShow:not(.phenotype-tcga-table) th,
#evidenceSummaryShow:not(.phenotype-tcga-table) th,
#expSearchResShow:not(.phenotype-tcga-table) th {
font-size: 16px !important;
line-height: 1.35;
padding: 10px 10px;
vertical-align: middle;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
text-align: left;
}
#protgpsSearchResShow:not(.protgps-dt-table):not(.phenotype-tcga-table) th {
font-size: 16px !important;
line-height: 1.35;
padding: 10px 10px;
vertical-align: middle;
white-space: nowrap;
text-align: left;
}
#protgpsSearchResShow:not(.protgps-dt-table) th.protgps-arrange {
min-width: 0;
}
#searchResShow .map-pin-col,
#evidenceSummaryShow .map-pin-col,
#protgpsSearchResShow:not(.protgps-dt-table) .map-pin-col,
#expSearchResShow .map-pin-col {
width: auto;
min-width: 72px;
max-width: none;
padding-left: 10px;
padding-right: 10px;
}
#searchResShow tr td.map-pin-col,
#evidenceSummaryShow tr td.map-pin-col,
#protgpsSearchResShow:not(.protgps-dt-table) tr td.map-pin-col,
#expSearchResShow tr.exp-data-row td.map-pin-col {
text-align: center;
}
.map-pin-col .map-pin-active,
.protgps-dt-cell-sam .map-pin-active {
color: #364fc7;
}
.map-pin-col .map-pin-inactive,
.protgps-dt-cell-sam .map-pin-inactive {
color: #ccc
}
#searchResShow:not(.phenotype-tcga-table) th,
#protgpsSearchResShow:not(.protgps-dt-table):not(.phenotype-tcga-table) th {
background: #fff;
}
#evidenceSummaryShow:not(.phenotype-tcga-table) th {
background: #dbe4ff;
}
#searchResShow:not(.phenotype-tcga-table).table-bordered th,
#searchResShow:not(.phenotype-tcga-table).table-bordered td,
#evidenceSummaryShow:not(.phenotype-tcga-table).table-bordered th,
#evidenceSummaryShow:not(.phenotype-tcga-table).table-bordered td,
#protgpsSearchResShow:not(.protgps-dt-table):not(.phenotype-tcga-table).table-bordered th,
#protgpsSearchResShow:not(.protgps-dt-table):not(.phenotype-tcga-table).table-bordered td {
border-left: none !important;
border-right: none !important;
}
#searchResShow:not(.phenotype-tcga-table).table-bordered tr,
#evidenceSummaryShow:not(.phenotype-tcga-table).table-bordered tr,
#protgpsSearchResShow:not(.protgps-dt-table):not(.phenotype-tcga-table).table-bordered tr {
border-left: none !important;
border-right: none !important;
}
#searchResShow:not(.phenotype-tcga-table).table-bordered,
#evidenceSummaryShow:not(.phenotype-tcga-table).table-bordered,
#protgpsSearchResShow:not(.protgps-dt-table):not(.phenotype-tcga-table).table-bordered {
border: 1px solid #dee2e6;
border-radius: 2px;
box-shadow: 0 2px 8px #ced4da;
border-color: #dee2e6;
margin-bottom: 10px;
}
.result-data-table:not(.phenotype-tcga-table) {
table-layout: fixed;
width: 100%;
}
#expSearchResShow:not(.phenotype-tcga-table) {
min-width: 1100px;
}
#searchResShow:not(.prediction-detail-table),
#evidenceSummaryShow {
min-width: 1100px;
}
#protgpsSearchResShow:not(.protgps-dt-table) {
min-width: 1980px;
width: max-content;
border-collapse: separate;
border-spacing: 0;
}
.protgps-score {
display: inline-block;
font-variant-numeric: tabular-nums;
}
#protgpsSearchResShow:not(.protgps-dt-table) .protgps-score {
min-width: 0;
}
.protgps-score-positive {
color: #c0392b;
}
.protgps-score-negative {
color: #2471a3;
}
.protgps-score-neutral {
color: #5f6b7a;
}
/* Experimentally identified — column widths */
#expSearchResShow col.result-col-sam { width: 4.5rem; }
#expSearchResShow col.result-col-uniprot { width: 6rem; }
#expSearchResShow col.result-col-gene { width: 6.5rem; }
#expSearchResShow col.result-col-mutation { width: 7rem; }
#expSearchResShow col.result-col-cell-line { width: 6rem; }
#expSearchResShow col.result-col-wt-loc { width: 8rem; }
#expSearchResShow col.result-col-mut-loc { width: 9.5rem; }
#expSearchResShow col.result-col-degree { width: 8.5rem; }
#expSearchResShow col.result-col-confidence { width: 7rem; }
#expSearchResShow col.result-col-details { width: 4rem; }
/* Predicted by pSAM — column widths */
#searchResShow col.result-col-sam { width: 4.5rem; }
#searchResShow col.result-col-uniprot { width: 6.5rem; }
#searchResShow col.result-col-gene { width: 6.5rem; }
#searchResShow col.result-col-mutation { width: 7rem; }
#searchResShow col.result-col-psam-nucleus { width: 6rem; }
#searchResShow col.result-col-psam-mito { width: 8.5rem; }
#searchResShow col.result-col-psam-cyto { width: 6.5rem; }
#searchResShow col.result-col-psam-membrane { width: 6.5rem; }
#searchResShow col.result-col-psam-secreted { width: 6.5rem; }
#searchResShow col.result-col-details { width: 4rem; }
#searchResShow:not(.phenotype-tcga-table) th.arrange.psam-score-header,
#searchResShow:not(.phenotype-tcga-table) th.psam-score-header,
#searchResShow:not(.phenotype-tcga-table) td.psam-score-col {
text-align: left;
padding-left: 6px;
padding-right: 6px;
white-space: nowrap;
}
#protgpsSearchResShow:not(.protgps-dt-table) thead th:nth-child(n+5):nth-child(-n+16),
#protgpsSearchResShow:not(.protgps-dt-table) thead th.protgps-score-header,
#protgpsSearchResShow:not(.protgps-dt-table) tbody td.protgps-score-col {
text-align: left;
padding-left: 10px;
padding-right: 10px;
white-space: nowrap;
}
#searchResShow:not(.phenotype-tcga-table) th.arrange.psam-score-header,
#searchResShow:not(.phenotype-tcga-table) th.psam-score-header {
font-size: 16px
}
/* Predicted by ProtGPS — column widths */
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-sam { width: 5.5rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-uniprot { width: 9rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-gene { width: 9rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-mutation { width: 9.5rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-nucleolus { width: 7rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-ns { width: 9rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-pbody { width: 6rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-npc { width: 10rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-pml { width: 6.5rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-chr { width: 8rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-psd { width: 10rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-sg { width: 8rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-cb { width: 7rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-rg { width: 8rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-cj { width: 7rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-protgps-tx { width: 8rem; }
#protgpsSearchResShow:not(.protgps-dt-table) col.result-col-details { width: 4rem; }
#protgpsSearchResShow:not(.protgps-dt-table).table-striped tbody tr:nth-of-type(odd) td {
background-color: #f2f2f2;
}
#protgpsSearchResShow:not(.protgps-dt-table).table-striped tbody tr:nth-of-type(even) td {
background-color: #fff;
}
#protgpsSearchResShow:not(.protgps-dt-table).table-hover tbody tr:hover td {
background-color: #ececec;
}
#protgpsSearchResShow:not(.protgps-dt-table):not(.prediction-detail-table) thead th:nth-child(n+5),
#protgpsSearchResShow:not(.protgps-dt-table):not(.prediction-detail-table) tbody td:nth-child(n+5),
#protgpsSearchResShow:not(.protgps-dt-table).prediction-detail-table thead th:nth-child(n+2),
#protgpsSearchResShow:not(.protgps-dt-table).prediction-detail-table tbody td:nth-child(n+2) {
overflow: hidden;
}
#expSearchResShow:not(.phenotype-tcga-table) tr.exp-data-row td,
#searchResShow:not(.phenotype-tcga-table) tr td,
#evidenceSummaryShow:not(.phenotype-tcga-table) tr td,
#protgpsSearchResShow:not(.protgps-dt-table):not(.phenotype-tcga-table) tr td {
overflow-wrap: anywhere;
word-break: break-word;
}
#expSearchResShow tr.exp-data-row td.result-col-details,
#expSearchResShow th.result-col-details,
#searchResShow td.result-col-details,
#searchResShow th.result-col-details,
#evidenceSummaryShow td.result-col-details,
#evidenceSummaryShow th.result-col-details,
#protgpsSearchResShow:not(.protgps-dt-table) td.result-col-details,
#protgpsSearchResShow:not(.protgps-dt-table) th.result-col-details,
#expSearchResShow td.result-col-sam,
#expSearchResShow th.result-col-sam,
#searchResShow td.result-col-sam,
#searchResShow th.result-col-sam,
#evidenceSummaryShow td.result-col-sam,
#evidenceSummaryShow th.result-col-sam,
#protgpsSearchResShow:not(.protgps-dt-table) td.result-col-sam,
#protgpsSearchResShow:not(.protgps-dt-table) th.result-col-sam,
#expSearchResShow tr.exp-data-row td:last-child,
#expSearchResShow th:last-child,
#evidenceSummaryShow tr td:last-child,
#evidenceSummaryShow th:last-child {
text-align: center;
white-space: nowrap;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
}
#expSearchResShow tr.exp-data-row td.map-pin-col,
#expSearchResShow th.map-pin-col,
#searchResShow td.map-pin-col,
#searchResShow th.map-pin-col,
#evidenceSummaryShow td.map-pin-col,
#evidenceSummaryShow th.map-pin-col,
#protgpsSearchResShow:not(.protgps-dt-table) td.map-pin-col,
#protgpsSearchResShow:not(.protgps-dt-table) th.map-pin-col {
white-space: nowrap;
text-align: center;
}
#expSearchResShow:not(.phenotype-tcga-table) th {
background: #fff
}
.exp-table-scroll-wrap {
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
margin-bottom: 15px;
border-radius: 2px;
scrollbar-width: thin;
}
.exp-table-scroll-wrap::-webkit-scrollbar {
height: 5px;
}
.exp-table-scroll-wrap::-webkit-scrollbar-track {
background: #eef2fb;
border-radius: 5px;
}
.exp-table-scroll-wrap::-webkit-scrollbar-thumb {
background: #a7b3d8;
border-radius: 5px;
}
.exp-table-scroll-wrap::-webkit-scrollbar-thumb:hover {
background: #364fc7;
}
#expSearchResShow:not(.phenotype-tcga-table).table-bordered th,
#expSearchResShow:not(.phenotype-tcga-table).table-bordered td {
border-left: none !important;
border-right: none !important;
}
#expSearchResShow:not(.phenotype-tcga-table).table-bordered tr {
border-left: none !important;
border-right: none !important;
}
#expSearchResShow:not(.phenotype-tcga-table).table-bordered {
border: 1px solid #dee2e6;
border-radius: 2px;
box-shadow: 0 2px 8px #ced4da;
border-color: #dee2e6;
}
#variation-section-inner .phenotype-table-block {
margin-bottom: 24px;
}
#variation-section-inner .phenotype-table-block:last-child {
margin-bottom: 0;
}
#variation-section-inner .phenotype-table-summary,
.phenotype-table-empty {
font-size: 16px;
line-height: 1.5;
margin-left: 20px;
color: #495057;
margin-bottom: 0;
}
#main p.phenotype-table-empty {
width: auto;
margin-left: 10px;
margin-bottom: 20px;
color: #495057;
}
#variation-section-inner .phenotype-data-table {
table-layout: fixed;
width: 100%;
}
#variation-section-inner .phenotype-data-table th {
font-size: 16px !important;
line-height: 1.35;
padding: 10px 10px;
vertical-align: middle;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
text-align: left;
background: #fff;
}
#variation-section-inner .phenotype-data-table th.phenotype-group-header {
text-align: center;
vertical-align: middle;
}
#variation-section-inner .phenotype-data-table td {
vertical-align: middle;
font-size: 16px;
line-height: 1.5;
padding: 8px 10px;
text-align: left;
}
#variation-section-inner .phenotype-data-table.table-bordered th,
#variation-section-inner .phenotype-data-table.table-bordered td {
border-left: none !important;
border-right: none !important;
}
#variation-section-inner .phenotype-data-table.table-bordered tr {
border-left: none !important;
border-right: none !important;
}
#variation-section-inner .phenotype-data-table.table-bordered {
border: 1px solid #dee2e6;
border-radius: 2px;
box-shadow: var(--phenotype-table-elevation-shadow);
border-color: #dee2e6;
margin: 0 8px 8px 8px;
}
#variation-section-inner .phenotype-disease-block {
margin-bottom: 20px;
}
#variation-section-inner .phenotype-disease-block .phenotype-table-scroll {
box-sizing: border-box;
width: 100%;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
overflow-x: visible;
overflow-y: visible;
}
#variation-section-inner .phenotype-disease-table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border: 1px solid #dee2e6;
border-radius: 2px;
box-shadow: var(--phenotype-table-elevation-shadow);
margin: 0 0 8px 0;
}
#variation-section-inner .phenotype-disease-table.table-bordered {
margin: 0 0 8px 0;
}
#variation-section-inner .phenotype-disease-table .phenotype-disease-col-dbsnp {
width: 12%;
}
#variation-section-inner .phenotype-disease-table .phenotype-disease-col-mutation-effect {
width: 13%;
}
#variation-section-inner .phenotype-disease-table .phenotype-disease-col-oncokb {
width: 14%;
}
#variation-section-inner .phenotype-disease-table .phenotype-disease-col-disease {
width: 28%;
}
#variation-section-inner .phenotype-disease-table .phenotype-disease-col-tissue {
width: 19%;
}
#variation-section-inner .phenotype-disease-table .phenotype-disease-col-source {
width: 14%;
}
#variation-section-inner .phenotype-disease-table thead th {
background: #edf2ff;
font-size: 16px !important;
font-weight: 600;
color: #364fc7;
padding: 8px 14px;
border-bottom: 1px solid #dbe4ff;
white-space: normal;
overflow-wrap: anywhere;
}
#variation-section-inner .phenotype-disease-table tbody td {
padding: 8px 14px;
font-size: 16px;
line-height: 1.45;
border-bottom: 1px solid #eef1f5;
vertical-align: top;
text-align: left;
background: #fff;
word-break: break-word;
}
#variation-section-inner .phenotype-disease-table .disease-cell--single-line,
#variation-section-inner .phenotype-disease-table .disease-cell--clamp .disease-clamp-text,
#variation-section-inner .phenotype-disease-table .disease-visible {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#variation-section-inner .phenotype-disease-table .disease-more {
display: none;
}
#variation-section-inner .phenotype-disease-table .disease-cell.is-expanded .disease-visible,
#variation-section-inner .phenotype-disease-table .disease-cell--clamp.is-expanded .disease-clamp-text {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
#variation-section-inner .phenotype-disease-table .disease-cell.is-expanded .disease-more {
display: block;
margin-top: 0.25em;
}
#variation-section-inner .phenotype-disease-table .disease-toggle {
white-space: nowrap;
}
#variation-section-inner .phenotype-disease-table tbody tr:last-child td {
border-bottom: none;
}
#variation-section-inner .phenotype-disease-table tbody tr:hover td {
background: #f8f9fa;
}
#variation-section-inner .phenotype-disease-table a {
color: #364fc7;
text-decoration: none;
}
#variation-section-inner .phenotype-disease-table a:hover {
color: #123aff;
}
#variation-section-inner .phenotype-deleterious-block {
margin-bottom: 20px;
}
#variation-section-inner .phenotype-source-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-left: 10px;
margin-right: 10px;
}
#variation-section-inner .phenotype-tool-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-left: 10px;
margin-right: 10px;
}
#variation-section-inner .phenotype-tool-card {
flex: 1 1 160px;
max-width: 220px;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 2px 8px #ced4da;
padding: 12px 14px;
}
#variation-section-inner .phenotype-tool-grid > .phenotype-source-card {
flex: 1 1 160px;
max-width: 220px;
}
#variation-section-inner .phenotype-tool-name {
font-size: 16px;
font-weight: 700;
color: #364fc7;
line-height: 1.3;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid #edf2ff;
}
#variation-section-inner .phenotype-tool-metrics {
display: flex;
flex-direction: column;
gap: 8px;
}
#variation-section-inner .phenotype-tool-metric {
display: flex;
flex-direction: column;
gap: 2px;
}
#variation-section-inner .phenotype-tool-metric-label {
font-size: 14px;
font-weight: 600;
color: #868e96;
line-height: 1.3;
}
#variation-section-inner .phenotype-tool-metric-value {
font-size: 16px;
line-height: 1.45;
color: #1a2330;
}
#variation-section-inner .phenotype-tcga-block {
margin-bottom: 0;
}
#variation-section-inner .phenotype-tcga-block .phenotype-table-summary {
margin-bottom: 12px;
}
#variation-section-inner .phenotype-tcga-wrap {
margin-left: 10px;
max-width: 100%;
overflow-x: auto;
padding: 0px;
}
#variation-section-inner .phenotype-tcga-meta {
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
margin-bottom: 12px;
padding: 8px 14px;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
max-width: fit-content;
margin-left: 10px;
}
#variation-section-inner .phenotype-tcga-meta-item {
display: inline-flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
#variation-section-inner .phenotype-tcga-meta-label {
font-size: 14px;
font-weight: 600;
color: #868e96;
white-space: nowrap;
}
#variation-section-inner .phenotype-tcga-meta-value {
font-size: 16px;
color: #1a2330;
word-break: break-word;
}
#variation-section-inner .phenotype-tcga-meta-value a {
color: #364fc7;
text-decoration: none;
}
#variation-section-inner .phenotype-tcga-meta-value a:hover {
color: #123aff;
}
#variation-section-inner .phenotype-tcga-table {
width: auto;
max-width: 100%;
table-layout: auto;
border: 1px solid #dee2e6;
border-radius: 2px;
box-shadow: var(--phenotype-table-elevation-shadow);
margin: 0 8px 8px 8px;
}
#variation-section-inner .phenotype-tcga-table.phenotype-data-table th.phenotype-tcga-group-start,
#variation-section-inner .phenotype-tcga-table.phenotype-data-table td.phenotype-tcga-group-start {
border-left: 2px solid #dbe4ff !important;
}
#variation-section-inner .phenotype-tcga-table thead th {
background: #edf2ff;
font-size: 16px !important;
font-weight: 600;
color: #364fc7;
padding: 8px 14px;
border-bottom: 1px solid #dbe4ff;
white-space: nowrap;
}
#variation-section-inner .phenotype-tcga-table tbody td {
padding: 8px 14px;
font-size: 16px;
line-height: 1.45;
border-bottom: 1px solid #eef1f5;
vertical-align: top;
text-align: left;
background: #fff;
}
#variation-section-inner .phenotype-tcga-table tbody tr:last-child td {
border-bottom: none;
}
#variation-section-inner .phenotype-tcga-table tbody tr:hover td {
background: #f8f9fa;
}
#variation-section-inner .phenotype-tcga-table th.text-right,
#variation-section-inner .phenotype-tcga-table td.text-right {
text-align: right;
white-space: nowrap;
}
#variation-section-inner .phenotype-tcga-cancer-abbr {
display: block;
font-weight: 600;
color: #1a2330;
}
#variation-section-inner .phenotype-tcga-cancer-full {
display: block;
font-size: 13px;
color: #868e96;
margin-top: 2px;
line-height: 1.35;
}
#variation-section-inner .phenotype-tcga-table a {
color: #364fc7;
text-decoration: none;
}
#variation-section-inner .phenotype-tcga-table a:hover {
color: #123aff;
}
@media (max-width: 1199px) {
#variation-section-inner .phenotype-source-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
#variation-section-inner .phenotype-source-grid {
grid-template-columns: 1fr;
}
}
#variation-section-inner .phenotype-source-card {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 2px 8px #ced4da;
padding: 12px 14px;
min-height: 100%;
}
#variation-section-inner .phenotype-source-title {
font-size: 16px;
font-weight: 700;
color: #364fc7;
line-height: 1.3;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid #edf2ff;
}
#variation-section-inner .phenotype-source-title a {
color: #364fc7;
text-decoration: none;
}
#variation-section-inner .phenotype-source-title a:hover {
color: #123aff;
}
#variation-section-inner .phenotype-source-field {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 10px;
}
#variation-section-inner .phenotype-source-field:last-child {
margin-bottom: 0;
}
#variation-section-inner .phenotype-source-field-label {
font-size: 14px;
font-weight: 600;
color: #868e96;
line-height: 1.3;
}
#variation-section-inner .phenotype-source-field-value {
font-size: 16px;
line-height: 1.45;
color: #1a2330;
word-break: break-word;
}
#expSearchResShow tr.exp-detail-row {
background: transparent !important;
}
#expSearchResShow tr.exp-detail-row td {
background: transparent;
padding: 0 !important;
border-top: none !important;
border-bottom: none !important;
white-space: normal;
overflow: hidden;
}
#expSearchResShow tr.exp-detail-row.exp-detail-open td {
background: #f8faff;
border-top: 1px solid #dbe4ff !important;
border-bottom: 1px solid #dee2e6 !important;
box-shadow: inset 0 4px 8px rgba(54, 79, 199, 0.06);
}
.exp-detail-collapse {
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: max-height 0.25s ease, opacity 0.2s ease;
}
.exp-detail-row.exp-detail-open .exp-detail-collapse {
max-height: 1600px;
opacity: 1;
pointer-events: auto;
}
#searchResShow tr.psam-pnuloc-detail-row {
background: transparent !important;
}
#searchResShow tr.psam-pnuloc-detail-row td {
background: transparent;
padding: 0 !important;
border-top: none !important;
border-bottom: none !important;
white-space: normal;
overflow: hidden;
}
#searchResShow tr.psam-pnuloc-detail-row.psam-pnuloc-open td {
background: #f8faff;
border-top: 1px solid #dbe4ff !important;
border-bottom: 1px solid #dee2e6 !important;
box-shadow: inset 0 4px 8px rgba(54, 79, 199, 0.06);
}
.psam-pnuloc-collapse {
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: max-height 0.25s ease, opacity 0.2s ease;
}
.psam-pnuloc-detail-row.psam-pnuloc-open .psam-pnuloc-collapse {
max-height: 1600px;
opacity: 1;
pointer-events: auto;
}
.psam-pnuloc-collapse-inner {
position: relative;
}
.psam-pnuloc-arrow-track {
position: relative;
height: 2px;
margin: 0 20px;
}
.psam-pnuloc-panel-arrow {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
transition: left 0.2s ease;
}
.psam-pnuloc-panel-arrow::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 14px solid #dbe4ff;
}
.psam-pnuloc-panel-arrow::after {
content: '';
position: absolute;
left: 2px;
top: 3px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 12px solid #fff;
}
.psam-pnuloc-panel {
margin: 10px 10px 10px 10px;
padding: 10px 20px 20px 20px;
border: 2px solid #dbe4ff;
background: #fff;
border-radius: 8px;
}
.psam-pnuloc-panel-title {
display: block;
width: 100%;
color: #364fc7;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
text-align: center;
margin: 0 0 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#searchResShow tr.psam-pnuloc-detail-row .psam-pnuloc-panel-title,
.psam-pnuloc-panel .psam-pnuloc-panel-title {
color: #364fc7;
font-size: 18px;
font-weight: 700;
text-align: center;
}
.psam-pnuloc-compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
margin-left: 10px;
}
.psam-pnuloc-compare-grid .region-info-card {
overflow: visible;
margin-right: 10px;
}
.psam-pnuloc-card-body {
padding: 8px 6px 12px;
min-height: auto;
}
.psam-pnuloc-card-body .visualization-container {
width: 100%;
}
.psam-pnuloc-card-body [id$="-domain"],
.psam-pnuloc-card-body [id$="-scores"],
.psam-pnuloc-card-body [id$="-mutation-domain"],
.psam-pnuloc-card-body [id$="-mutation-scores"] {
width: 100%;
}
#searchResShow .psam-score-trigger-cell {
cursor: pointer;
}
#searchResShow .psam-score-toggle {
transition: color 0.15s ease;
}
#searchResShow .psam-score-trigger-cell:hover .psam-score-toggle,
#searchResShow .psam-data-row.psam-row-open .psam-score-trigger-cell.psam-score-active .psam-score-toggle {
color: #364fc7;
}
#detail #searchResShow .psam-score-toggle {
color: #364fc7;
}
#detail #searchResShow .psam-score-trigger-cell.psam-score-active .psam-score-toggle {
color: #123aff;
}
#detail #searchResShow:not(.prediction-detail-table) td.psam-score-col,
#detail #searchResShow:not(.prediction-detail-table) th.arrange.psam-score-header {
text-align: left;
}
#detail #searchResShow td.psam-score-col .protgps-score,
#detail #searchResShow td.psam-score-col .protgps-score-positive,
#detail #searchResShow td.psam-score-col .protgps-score-negative,
#detail #searchResShow td.psam-score-col .protgps-score-neutral {
color: #364fc7;
}
#detail #searchResShow td.psam-score-col:hover .protgps-score,
#detail #searchResShow tr:hover td.psam-score-col .protgps-score,
#detail #searchResShow .psam-score-trigger-cell:hover .psam-score-toggle .protgps-score,
#detail #searchResShow .psam-score-trigger-cell.psam-score-active .psam-score-toggle .protgps-score {
color: #123aff;
}
.exp-detail-panel {
margin: 20px;
padding: 20px 24px;
min-width: 0;
box-sizing: border-box;
background: #fff;
border: none;
border-top: 2px solid #dbe4ff;
border-bottom: 2px solid #dbe4ff;
border-radius: 8px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 28px;
}
.exp-detail-item {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.exp-detail-item-span-2 {
grid-column: 1 / -1;
}
.exp-detail-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: bolder;
color: #364fc7;
letter-spacing: 0.02em;
}
.exp-detail-label i {
font-size: 16px;
line-height: 1;
}
.exp-detail-icon-img {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.exp-detail-value {
font-size: 16px;
color: #1a2330;
line-height: 1.6;
padding: 10px 14px;
background: #fff;
border-radius: 6px;
border: 1px solid #e9ecef;
word-break: break-word;
}
.exp-detail-value a {
color: #364fc7;
}
.exp-detail-value a:hover {
color: #123aff;
}
@media (max-width: 992px) {
.exp-detail-panel {
grid-template-columns: 1fr;
}
}
.exp-detail-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #dbe4ff;
border: 1px solid #dbe4ff;
color: #3b5bdb;
font-weight: bolder;
font-size: 16px;
line-height: 1;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 2px 4px rgba(0, 0, 0, 0.22),
0 4px 10px rgba(0, 0, 0, 0.18);
}
.exp-detail-toggle:hover {
background: #dbe4ff;
color: #3b5bdb;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 2px 4px rgba(0, 0, 0, 0.22),
0 4px 10px rgba(0, 0, 0, 0.18);
}
.exp-detail-toggle .ri-subtract-line {
color: #3b5bdb;
}
.exp-data-row.exp-row-open .exp-detail-toggle,
.exp-data-row:has(+ .exp-detail-row.exp-detail-open) .exp-detail-toggle {
background: #dbe4ff;
border-color: #364fc7;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 2px 4px rgba(0, 0, 0, 0.22),
0 4px 10px rgba(0, 0, 0, 0.18);
}
#expSearchResShow .confidence-cell {
text-align: center;
}
#expSearchResShow .change-degree-cell {
text-align: center;
white-space: nowrap;
}
#expSearchResShow .change-degree-cell.exp-detail-toggle-trigger {
cursor: pointer;
}
.change-degree-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 4.75rem;
padding: 0 6px;
border-radius: 999px;
font-size: 12px;
height: 26px;
font-weight: 600;
line-height: 1;
cursor: default;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 2px 4px rgba(0, 0, 0, 0.22),
0 4px 10px rgba(0, 0, 0, 0.18);
}
.change-degree-badge.degree-complete {
background: #3b5bdb;
color: #fff;
}
.change-degree-badge.degree-partial {
background: #f08c00;
color: #fff;
}
.change-degree-badge.degree-none {
background: #dee2e6;
color: #495057;
}
.change-degree-badge.degree-unknown {
background: #f1f3f5;
color: #495057;
min-width: 0;
max-width: 100%;
}
.confidence-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: 50%;
background: #3b5bdb;
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 2px 4px rgba(0, 0, 0, 0.22),
0 4px 10px rgba(0, 0, 0, 0.18);
}
a.confidence-search-link {
text-decoration: none !important;
color: #fff !important;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
a.confidence-search-link:hover {
background: #364fc7;
color: #fff !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 3px 8px rgba(54, 79, 199, 0.35);
transform: translateY(-1px);
}
#helpShow tr td{
vertical-align: middle;
font-size: 16px;
}
#helpShow th {
background: #dbe4ff;
}
#helpShow .table-bordered th,
#helpShow .table-bordered td {
border-left: none !important;
border-right: none !important;
}
#helpShow .table-bordered {
border: 1px solid #dee2e6;
border-radius: 2px;
box-shadow: 0 2px 8px #ced4da;
}
#helpShow .table-bordered {
border-color: #dee2e6;
}
#predResShow tr td{
vertical-align: middle;
}
.pro-plot{
position: relative;
width:50px;
height: 10px;
background-color: #dddddd;
}
.nls-plot{
display: block;
position: absolute;
height: 10px;
background-color: #dc3545;
}
#proInfoShow tr td:first-child{
font-weight: bolder;
width:20%;
}
.title1{
font-weight: bolder;
width:40%;
}
.title2{
font-weight: bolder;
width:10%;
vertical-align: middle !important;
}
.title3{
font-weight: bolder;
width:30%;
}
.pmid-link{
cursor: pointer;
color: #364fc7;
font-weight:bolder;
}
.pmid-link:hover{
color: #123aff;
}
.hidden{
display: none;
}
/*---------Browse page style-------------*/
#rawNucleusStat, #NLSNucleusStat{
width: 100%;
height:400px;
}
/*---------Help page style-------------*/
#help-navigation {
width: 100%;
}
.navigation-fixed {
position: fixed;
top: calc(var(--header-height) + 1rem);
z-index: 100;
}
.navigation-bottom {
position: absolute;
bottom: 0;
top: auto;
}
#help-navigation .hidden {
display: none;
}
#navigation-body h5:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
/*--亚细胞定位图--*/
sib-swissbiopics-sl {
width: 100% !important;
height: auto !important;
display: block;
}
.subcellular-localization-wrap {
margin-top: 8px;
}
.subcellular-localization-grid {
margin-top: 0;
}
.subcellular-known-body,
.subcellular-predicted-body {
min-height: 0;
}
.subcellular-predicted-body {
padding-top: 4px;
}
.subcellular-known-visual {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
}
.subcellular-predict-tabs {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 10px;
margin-top: 10px;
padding: 2px 8px 10px 8px;
overflow: visible;
}
.subcellular-predict-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 6px 16px;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
color: #495057;
background: #e8ecf6;
border: 1px solid transparent;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
white-space: nowrap;
box-shadow: none;
}
.subcellular-predict-tab:hover:not(.active) {
color: #364fc7;
background: #dbe4ff;
box-shadow: var(--chip-shadow-hover);
}
.subcellular-predict-tab.active {
background: linear-gradient(135deg, #364fc7 0%, #5a6fd8 100%);
color: #fff;
box-shadow: var(--chip-shadow-active);
}
.subcellular-predict-tab:focus {
outline: none;
}
.subcellular-predict-tab:focus-visible:not(.active) {
box-shadow: var(--chip-shadow-hover);
}
.subcellular-predict-tab.active:focus-visible {
box-shadow: var(--chip-shadow-active), 0 0 0 3px rgba(54, 79, 199, 0.18);
}
.subcellular-predicted-content {
min-height: 120px;
}
.subcellular-predict-pane {
display: none;
}
.subcellular-predict-pane.active {
display: block;
}
.subcellular-db-slot {
min-width: 0;
min-height: 0;
}
.subcellular-db-empty {
font-size: 15px;
color: #868e96;
font-style: italic;
margin: 0;
padding: 12px 0;
text-align: center;
}
.subcellular-predicted-panel .phenotype-tcga-wrap {
margin-left: 0;
max-width: 100%;
overflow-x: auto;
max-height: 280px;
overflow-y: auto;
padding: 2px 8px 8px 8px;
}
.subcellular-predicted-panel .phenotype-tcga-table {
width: calc(100% - 16px);
max-width: calc(100% - 16px);
table-layout: auto;
border: 1px solid #dee2e6;
border-radius: 2px;
box-shadow: var(--phenotype-table-elevation-shadow);
margin: 0 8px 8px 8px;
}
.subcellular-predicted-panel .phenotype-tcga-table thead th {
background: #edf2ff;
font-size: 16px !important;
font-weight: 600;
color: #364fc7;
padding: 8px 14px;
border-bottom: 1px solid #dbe4ff;
white-space: nowrap;
}
.subcellular-predicted-panel .phenotype-tcga-table tbody td {
padding: 8px 14px;
font-size: 16px;
line-height: 1.45;
border-bottom: 1px solid #eef1f5;
vertical-align: top;
text-align: left;
background: #fff;
}
.subcellular-predicted-panel .phenotype-tcga-table tbody tr:last-child td {
border-bottom: none;
}
.subcellular-predicted-panel .phenotype-tcga-table tbody tr:hover td {
background: #f8f9fa;
}
.subcellular-predicted-panel .phenotype-tcga-table th.text-right,
.subcellular-predicted-panel .phenotype-tcga-table td.text-right {
text-align: right;
white-space: nowrap;
}
/* TCGA-style tables (experimental, prediction, result summary) — match #variation-section-inner .phenotype-tcga-table */
.phenotype-tcga-wrap {
margin-left: 0;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
padding: 0px;
}
.phenotype-tcga-wrap .phenotype-tcga-table#expSearchResShow,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow,
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow {
width: auto;
max-width: 100%;
table-layout: auto;
border: 1px solid #dee2e6;
border-radius: 2px;
margin: 0px;
border-color: #dee2e6;
box-shadow: none;
vertical-align:middle;
}
.phenotype-tcga-wrap .phenotype-tcga-table.table-bordered th,
.phenotype-tcga-wrap .phenotype-tcga-table.table-bordered td {
border-left: none !important;
border-right: none !important;
}
.phenotype-tcga-wrap .phenotype-tcga-table.table-bordered tr {
border-left: none !important;
border-right: none !important;
}
.phenotype-tcga-wrap .phenotype-tcga-table#expSearchResShow thead th,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow thead th,
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow thead th {
background: #edf2ff;
font-size: 16px !important;
font-weight: 600;
color: #364fc7;
padding: 8px 14px;
border-bottom: 1px solid #dbe4ff;
white-space: nowrap;
text-align: left;
vertical-align: middle;
}
.phenotype-tcga-wrap .phenotype-tcga-table#expSearchResShow tbody tr.exp-data-row td,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow tbody tr:not(.psam-pnuloc-detail-row) td,
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow tbody tr td {
padding: 8px 14px;
font-size: 16px;
line-height: 1.45;
border-bottom: 1px solid #eef1f5;
vertical-align: top;
text-align: left;
background: #fff;
}
.phenotype-tcga-wrap .phenotype-tcga-table.table-striped tbody tr:nth-of-type(odd) td,
.phenotype-tcga-wrap .phenotype-tcga-table.table-striped tbody tr:nth-of-type(even) td {
background: #fff;
}
.phenotype-tcga-wrap .phenotype-tcga-table#expSearchResShow tbody tr.exp-data-row:hover td,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow tbody tr:not(.psam-pnuloc-detail-row):hover td,
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow tbody tr:hover td {
background: #f8f9fa;
}
.phenotype-tcga-wrap .phenotype-tcga-table#expSearchResShow a,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow a,
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow a {
color: #364fc7;
text-decoration: none;
}
.phenotype-tcga-wrap .phenotype-tcga-table#expSearchResShow a:hover,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow a:hover,
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow a:hover {
color: #123aff;
}
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow thead th.result-col-details,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow thead th.arrange.psam-score-header,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow thead th.psam-score-header,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow thead th.result-col-details,
.phenotype-tcga-wrap .phenotype-tcga-table#expSearchResShow thead th.result-col-details {
text-align: left;
white-space: normal;
}
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow thead th.evidence-col-header,
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow tbody tr td.evidence-col {
text-align: center;
white-space: normal;
}
.phenotype-tcga-wrap .phenotype-tcga-table#evidenceSummaryShow tbody tr td.result-col-details,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow tbody tr:not(.psam-pnuloc-detail-row) td.psam-score-col,
.phenotype-tcga-wrap .phenotype-tcga-table#searchResShow tbody tr:not(.psam-pnuloc-detail-row) td.result-col-details,
.phenotype-tcga-wrap .phenotype-tcga-table#expSearchResShow tbody tr.exp-data-row td.result-col-details {
text-align: left;
}
/* Experimental validation + pSAM — full-width without horizontal scroll */
#section-experimental #exp-table-show .exp-table-scroll-wrap.phenotype-tcga-wrap,
#section-prediction #table-show .exp-table-scroll-wrap.phenotype-tcga-wrap,
#section-experimental #exp-table-show .table-responsive,
#section-prediction #table-show .table-responsive {
width: 100%;
max-width: 100%;
overflow-x: visible;
}
#section-experimental #exp-table-show #expSearchResShow.phenotype-tcga-table,
#section-prediction #table-show #searchResShow.prediction-detail-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: auto;
}
/* Result evidence summary — full-width table (preserve pre–TCGA-skin layout) */
#summary-table-show .exp-table-scroll-wrap.phenotype-tcga-wrap,
#summary-table-show .table-responsive {
width: 100%;
max-width: 100%;
overflow-x: visible;
}
#summary-table-show #evidenceSummaryShow.phenotype-tcga-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
}
#section-experimental #exp-table-show #expSearchResShow.phenotype-tcga-table col,
#section-prediction #table-show #searchResShow.prediction-detail-table col {
width: auto;
}
#section-experimental #exp-table-show #expSearchResShow.phenotype-tcga-table thead th,
#section-prediction #table-show #searchResShow.prediction-detail-table thead th {
white-space: normal;
}
#section-experimental #exp-table-show #expSearchResShow.phenotype-tcga-table thead th {
padding-right: 14px;
padding-bottom: 8px;
cursor: default;
}
#section-experimental #exp-table-show #expSearchResShow.phenotype-tcga-table thead th .sort-corner {
display: none;
}
#section-prediction .prediction-detail-table thead th {
padding-right: 14px;
padding-bottom: 8px;
cursor: default;
}
#section-prediction .prediction-detail-table thead th .sort-corner {
display: none;
}
/* ===== Detail page — Predicted by ProtGPS (protgps-dt) ===== */
#section-prediction .card-body {
min-width: 0;
}
#section-prediction #protgps-table-show {
min-width: 0;
max-width: 100%;
}
#section-prediction #protgps-table-show .protgps-dt {
display: flex;
flex-direction: column;
gap: 6px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin-bottom: 15px;
}
#section-prediction #protgps-table-show .protgps-dt-viewport {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
max-width: 100%;
min-width: 0;
flex: 0 0 auto;
border-radius: 2px 2px 0 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
#section-prediction #protgps-table-show .protgps-dt-viewport::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
#section-prediction #protgps-table-show .protgps-dt-scrollbar {
display: none;
position: relative;
flex: 0 0 10px;
width: 100%;
max-width: 100%;
min-width: 0;
height: 10px;
background: #eef2fb;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
user-select: none;
}
#section-prediction #protgps-table-show .protgps-dt.is-scrollable .protgps-dt-scrollbar {
display: block;
}
#section-prediction #protgps-table-show .protgps-dt-scrollbar-thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
min-width: 40px;
background: #d3d7e4;
border-radius: 5px;
cursor: grab;
will-change: transform, width;
}
#section-prediction #protgps-table-show .protgps-dt-scrollbar-thumb:hover,
#section-prediction #protgps-table-show .protgps-dt-scrollbar-thumb.is-dragging {
background: #a7b3d8;
}
#section-prediction #protgps-table-show .protgps-dt-scrollbar-thumb.is-dragging {
cursor: grabbing;
}
#section-prediction #protgps-table-show .protgps-dt-table {
width: max-content;
min-width: 99rem;
max-width: none;
margin: 0;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #dee2e6;
border-radius: 2px 2px 0 0;
}
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-sam { width: 4.5rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-nucleolus { width: 7rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-ns { width: 9rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-pbody { width: 6rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-npc { width: 10rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-pml { width: 6.5rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-chr { width: 8rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-psd { width: 10rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-sg { width: 8rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-cb { width: 7rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-rg { width: 8rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-cj { width: 7rem; }
#section-prediction #protgps-table-show .protgps-dt-table col.protgps-dt-col-tx { width: 8rem; }
#section-prediction #protgps-table-show .protgps-dt-table thead th {
background: #edf2ff;
color: #364fc7;
font-size: 16px;
font-weight: 600;
padding: 8px 14px;
border-bottom: 1px solid #dbe4ff;
white-space: nowrap;
text-align: left;
vertical-align: middle;
}
#section-prediction #protgps-table-show .protgps-dt-table tbody td {
padding: 8px 14px;
font-size: 16px;
line-height: 1.45;
border-bottom: 1px solid #eef1f5;
vertical-align: middle;
text-align: left;
background: #fff;
}
#section-prediction #protgps-table-show .protgps-dt-table tbody tr:hover td {
background: #f8f9fa;
}
#section-prediction #protgps-table-show .protgps-dt-table th,
#section-prediction #protgps-table-show .protgps-dt-table td {
border-left: none;
border-right: none;
}
#section-prediction #protgps-table-show .protgps-dt-table .protgps-dt-th-sam,
#section-prediction #protgps-table-show .protgps-dt-table .protgps-dt-cell-sam {
width: auto;
min-width: 72px;
max-width: none;
white-space: nowrap;
vertical-align: middle;
}
#section-prediction #protgps-table-show .protgps-dt-table .protgps-dt-th-sam {
text-align: left;
}
#section-prediction #protgps-table-show .protgps-dt-table .protgps-dt-cell-sam {
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#section-prediction #protgps-table-show .protgps-dt-table .protgps-dt-cell-score {
white-space: nowrap;
}
#section-prediction #protgps-table-show .protgps-dt-table .protgps-prob-trigger {
cursor: pointer;
}
.subcellular-map-container {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 0;
}
.subcellular-known-visual .cell-figure {
flex: 1 1 62%;
min-width: 0;
max-width: 100%;
margin: 0;
z-index: 1;
}
.subcellular-known-visual .cell-location-list {
flex: 0 1 34%;
min-width: 130px;
max-width: 42%;
position: static;
z-index: 1;
background: transparent;
padding-top: 8px;
display: block;
}
.cell-location-list .location-item {
margin-right: 0;
cursor: pointer;
line-height: 1.7;
padding: 4px 0;
}
.cell-location-list .location-item:hover .location-item-label {
color: #364fc7;
}
.cell-location-list .location-item-icon {
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
.cell-location-list .location-item-label {
font-size: 16px;
color: #1a2330;
line-height: 1.7;
vertical-align: middle;
}
.cell-figure {
min-width: 0;
max-width: 100%;
margin: 0;
z-index: 20;
}
.cell-location-list {
position: static;
background: transparent;
}
/*--card的动画效果---*/
.animated-container {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1.3s ease-out forwards; /*--动画滑入时间---*/
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/*--窗口大小---*/
@media (min-width: 1200px) {
.custom-container {
max-width: 1400px;
}
}
@media (max-width: 1199px) {
.custom-container {
max-width: 98vw;
}
}
.custom-container {
width: 98vw;
margin: 0 auto;
}
.custom2-container {
width: 92vw;
margin: 0 auto;
}
/*--footer的动画效果---*/
.footer-logo {
opacity: 0;
transform: translateY(40px);
animation: footerLogoFadeInUp 1.5s ease-out 0.3s forwards;
}
@keyframes footerLogoFadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/*--result页面的alert样式---*/
#search-message-group,
#protgps-search-message-group,
#exp-search-message-group,
#summary-search-message-group {
margin-bottom: 12px;
}
#detail #search-message-group,
#detail #exp-search-message-group,
#detail #protgps-search-message-group {
display: none;
}
#detail #search-message-group:has(#search-alert .phenotype-table-empty),
#detail #search-message-group:has(#search-alert.alert-warning),
#detail #exp-search-message-group:has(#exp-search-alert .phenotype-table-empty),
#detail #exp-search-message-group:has(#exp-search-alert.alert-warning),
#detail #protgps-search-message-group:has(#protgps-search-alert .phenotype-table-empty),
#detail #protgps-search-message-group:has(#protgps-search-alert.alert-warning) {
display: block;
}
.tier-label {
display: block;
font-size: 12px;
font-weight: normal;
color: #5c677d;
margin-top: 4px;
}
.tier-label-exp { color: #2b8a3e; }
.tier-label-pred { color: #364fc7; }
.tier-label-info { color: #495057; }
#evidenceSummaryShow col.result-col-sam { width: 4rem; }
#evidenceSummaryShow col.result-col-uniprot { width: 6rem; }
#evidenceSummaryShow col.result-col-gene { width: 6.5rem; }
#evidenceSummaryShow col.result-col-mutation { width: 6.5rem; }
#evidenceSummaryShow col.result-col-evidence-exp { width: 7rem; }
#evidenceSummaryShow col.result-col-evidence-pred { width: 7.5rem; }
#evidenceSummaryShow col.result-col-evidence-motif { width: 5.5rem; }
#evidenceSummaryShow col.result-col-evidence-ptm { width: 5.5rem; }
#evidenceSummaryShow col.result-col-evidence-pheno { width: 7rem; }
#evidenceSummaryShow col.result-col-details { width: 4rem; }
#evidenceSummaryShow tbody tr td.evidence-col {
text-align: center;
padding-left: 6px;
padding-right: 6px;
white-space: nowrap;
}
#evidenceSummaryShow thead th.evidence-col-header {
font-size: 16px !important;
line-height: 1.25;
white-space: normal;
text-align: center;
}
#evidenceSummaryShow .evidence-cell-link {
display: inline-flex;
text-decoration: none;
color: inherit;
border-radius: 4px;
transition: background-color 0.15s ease, transform 0.15s ease;
}
#evidenceSummaryShow tbody tr td.evidence-col .evidence-cell-link:hover {
background-color: rgba(54, 79, 199, 0.08);
}
#evidenceSummaryShow thead th.result-col-details {
font-size: 16px !important;
line-height: 1.25;
white-space: normal;
text-align: center;
}
#evidenceSummaryShow tbody tr td.result-col-details {
text-align: center;
padding-left: 6px;
padding-right: 6px;
white-space: nowrap;
}
#evidenceSummaryShow td.result-col-details .details-cell-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #364fc7;
font-size: 18px;
line-height: 1;
border-radius: 4px;
padding: 2px 4px;
transition: background-color 0.15s ease, transform 0.15s ease;
}
#evidenceSummaryShow td.result-col-details .details-cell-link:hover {
background-color: rgba(54, 79, 199, 0.08);
color: #364fc7;
}
#evidenceSummaryShow th.summary-arrange,
#detail th.arrange,
#detail th.exp-arrange,
#detail th.protgps-arrange,
#browse-exp th.summary-arrange {
position: relative;
cursor: pointer;
padding-right: 12px;
padding-bottom: 12px;
}
#detail th.map-pin-col,
#browse-exp th.map-pin-col.summary-arrange {
position: relative;
padding-right: 12px;
padding-bottom: 12px;
}
#evidenceSummaryShow th.summary-arrange .sort-corner,
#detail th .sort-corner,
#browse-exp th.summary-arrange .sort-corner {
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent #c5d0f5 transparent;
pointer-events: none;
display: block;
}
#browse-exp #section-prediction {
margin-top: 0;
}
#browse-exp #section-prediction #table-show #searchResShow.browse-psam-table.prediction-detail-table thead th .sort-corner {
display: block;
}
#browse-exp #section-prediction #table-show #searchResShow.browse-psam-table.prediction-detail-table thead th.summary-arrange {
cursor: pointer;
}
#browse-exp #section-prediction #protgps-table-show .browse-protgps-table col.result-col-uniprot { width: 7rem; }
#browse-exp #section-prediction #protgps-table-show .browse-protgps-table col.result-col-gene { width: 7rem; }
#browse-exp #section-prediction #protgps-table-show .browse-protgps-table col.result-col-mutation { width: 7rem; }
#browse-exp #section-prediction #protgps-table-show .browse-protgps-table col.result-col-details { width: 4rem; }
#browse-exp #section-prediction #protgps-table-show .protgps-dt-th-sam.summary-arrange {
position: relative;
padding-right: 12px;
padding-bottom: 12px;
cursor: pointer;
}
#browse-exp #section-prediction #protgps-table-show .protgps-dt-th-score.summary-arrange {
position: relative;
padding-right: 12px;
padding-bottom: 12px;
cursor: pointer;
}
#browse-exp #section-prediction #protgps-table-show .protgps-dt-table thead th.summary-arrange .sort-corner {
display: block;
}
#evidenceSummaryShow th.summary-arrange.sort-active-desc .sort-corner,
#evidenceSummaryShow th.summary-arrange.sort-active-asc .sort-corner,
#evidenceSummaryShow th.map-pin-col.summary-arrange.sort-active-desc .sort-corner,
#evidenceSummaryShow th.map-pin-col.summary-arrange.sort-active-asc .sort-corner,
#detail th.arrange.sort-active-desc .sort-corner,
#detail th.arrange.sort-active-asc .sort-corner,
#detail th.exp-arrange.sort-active-desc .sort-corner,
#detail th.exp-arrange.sort-active-asc .sort-corner,
#detail th.protgps-arrange.sort-active-desc .sort-corner,
#detail th.protgps-arrange.sort-active-asc .sort-corner,
#browse-exp th.summary-arrange.sort-active-desc .sort-corner,
#browse-exp th.summary-arrange.sort-active-asc .sort-corner,
#browse-exp th.map-pin-col.summary-arrange.sort-active-desc .sort-corner,
#browse-exp th.map-pin-col.summary-arrange.sort-active-asc .sort-corner {
border-bottom-color: #364fc7;
}
.browse-table-panel {
position: relative;
}
.browse-table-panel.is-loading {
pointer-events: none;
}
.browse-table-loading {
display: none;
position: absolute;
inset: 0;
z-index: 20;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: rgba(255, 255, 255, 0.78);
border-radius: 0 0 0.25rem 0.25rem;
}
.browse-table-panel.is-loading .browse-table-loading {
display: flex;
}
.browse-table-loading-spinner {
width: 60px;
height: 60px;
border: 6px solid #5c7cfa;
border-top-color: #fff;
border-radius: 50%;
-webkit-animation: animate-result-preloader 1s linear infinite;
animation: animate-result-preloader 1s linear infinite;
}
.browse-table-loading-text {
color: #495057;
font-size: 0.95rem;
}
#browse-exp #exp-table-show > .card-body.browse-table-panel.is-loading,
#browse-exp #section-prediction #table-show.browse-table-panel.is-loading,
#browse-exp #section-prediction #protgps-table-show.browse-table-panel.is-loading {
min-height: 220px;
}
#browse-exp #section-prediction #protgps-table-show.browse-table-panel.is-loading .browse-table-loading {
z-index: 30;
}
/* Browse — Potential SAM table (styles copied from Experimental evidence table on browse page) */
#browse-exp #section-potential-sam .browse-potential-sam-scroll-wrap {
margin-left: 0;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
padding: 0;
width: 100%;
}
/* Browse — Disease system / tissue */
#browse-exp #section-system-tissue {
overflow: hidden;
}
#browse-exp #section-system-tissue .browse-system-tissue-body {
display: flex;
flex-direction: column;
min-height: min(460px, 56vh);
padding: 16px 20px;
}
#browse-exp #section-system-tissue .browse-body-map-panel {
flex: 1 1 auto;
display: flex;
flex-direction: column;
width: 100%;
min-height: 0;
}
#browse-exp #section-system-tissue .browse-bodymap-main {
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(200px, 0.44fr) minmax(0, 0.56fr);
gap: 16px;
align-items: stretch;
min-height: min(400px, 50vh);
height: min(400px, 50vh);
}
#browse-exp #section-system-tissue .browse-bodymap-stage {
position: relative;
min-height: 0;
height: 100%;
padding: 10px 8px;
border-radius: 12px;
background:
radial-gradient(circle at 50% 18%, rgba(54, 79, 199, 0.1), transparent 48%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 242, 255, 0.94));
border: 1px solid rgba(54, 79, 199, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
#browse-exp #section-system-tissue .browse-bodymap-stage::after {
content: '';
position: absolute;
inset: 6px;
border-radius: 10px;
pointer-events: none;
background-image: radial-gradient(rgba(54, 79, 199, 0.08) 1px, transparent 1px);
background-size: 12px 12px;
opacity: 0.3;
}
#browse-exp #section-system-tissue .browse-bodymap-figure {
position: relative;
z-index: 1;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: 4px 0;
min-height: 0;
}
#browse-exp #section-system-tissue .browse-bodymap-svg {
display: block;
width: auto;
height: min(100%, 480px, 52vh);
max-width: min(100%, 260px);
margin: 0 auto;
filter: drop-shadow(0 6px 16px rgba(54, 79, 199, 0.1));
}
#browse-exp #section-system-tissue .browse-bodymap-legend-card {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
min-height: 0;
height: 100%;
padding: 10px 12px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
border: 1px solid rgba(54, 79, 199, 0.1);
box-shadow: 0 4px 14px rgba(35, 48, 71, 0.04);
overflow: hidden;
}
#browse-exp #section-system-tissue .browse-bodymap-svg-body {
overflow: visible;
}
#browse-exp #section-system-tissue .browse-bodymap-svg-body .body-part {
cursor: pointer;
opacity: 0.34;
transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;
transform-origin: center;
transform-box: fill-box;
}
#browse-exp #section-system-tissue .browse-bodymap-svg-body .body-part:focus,
#browse-exp #section-system-tissue .browse-bodymap-svg-body .body-part.is-hovered,
#browse-exp #section-system-tissue .browse-bodymap-svg-body .body-part.is-active {
opacity: 1;
filter: saturate(1.08) brightness(1.02) drop-shadow(0 8px 18px rgba(54, 79, 199, 0.18));
}
#browse-exp #section-system-tissue .browse-bodymap-svg-body .body-part.is-empty {
opacity: 0.12;
filter: grayscale(0.2) saturate(0.5);
cursor: default;
pointer-events: none;
}
#browse-exp #section-system-tissue .browse-organ-legend-wrap {
margin-top: 0;
min-height: 0;
flex: 1 1 auto;
overflow: hidden;
display: flex;
flex-direction: column;
}
#browse-exp #section-system-tissue .browse-organ-legend-title {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
color: #5c637a;
}
#browse-exp #section-system-tissue .browse-organ-legend {
display: flex;
flex-direction: column;
gap: 4px;
max-height: none;
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
padding-right: 2px;
}
#browse-exp #section-system-tissue .browse-organ-legend-other {
margin-top: 0;
padding-top: 8px;
border-top: 1px dashed rgba(54, 79, 199, 0.18);
flex: 0 0 auto;
max-height: 88px;
overflow-y: auto;
}
#browse-exp #section-system-tissue .browse-organ-legend-other-title {
width: 100%;
margin: 0 0 2px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
color: #5c637a;
}
#browse-exp #section-system-tissue .browse-organ-chip {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 100%;
min-height: 28px;
padding: 4px 8px;
border-radius: 8px;
border: 1px solid rgba(54, 79, 199, 0.08);
background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
color: #233047;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
#browse-exp #section-system-tissue .browse-organ-chip span {
min-width: 0;
line-height: 1.3;
}
#browse-exp #section-system-tissue .browse-organ-chip strong {
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 999px;
background: rgba(54, 79, 199, 0.12);
color: #364fc7;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
#browse-exp #section-system-tissue .browse-organ-chip:hover,
#browse-exp #section-system-tissue .browse-organ-chip:focus {
background: #edf2ff;
border-color: rgba(54, 79, 199, 0.28);
box-shadow: 0 6px 14px rgba(54, 79, 199, 0.12);
transform: translateY(-1px);
}
@media (max-width: 991px) {
#browse-exp #section-system-tissue .browse-system-tissue-body {
min-height: min(420px, 52vh);
}
#browse-exp #section-system-tissue .browse-bodymap-main {
grid-template-columns: minmax(160px, 0.4fr) minmax(0, 0.6fr);
min-height: min(360px, 46vh);
height: min(360px, 46vh);
}
#browse-exp #section-system-tissue .browse-bodymap-svg {
height: min(100%, 400px, 46vh);
max-width: min(100%, 200px);
}
}
@media (max-width: 575px) {
#browse-exp #section-system-tissue .browse-bodymap-main {
grid-template-columns: 1fr;
min-height: 0;
height: auto;
}
#browse-exp #section-system-tissue .browse-bodymap-stage {
min-height: min(240px, 34vh);
height: min(240px, 34vh);
}
#browse-exp #section-system-tissue .browse-bodymap-svg {
height: min(100%, 220px, 32vh);
max-width: min(100%, 180px);
}
#browse-exp #section-system-tissue .browse-bodymap-legend-card {
height: min(240px, 34vh);
}
}
#browse-exp #system-tissue-panel.browse-table-panel.is-loading {
min-height: 220px;
}
#browse-exp #section-potential-sam .browse-potential-sam-scroll-wrap.table-responsive {
overflow-x: visible;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: auto;
border: 1px solid #dee2e6;
border-radius: 2px;
margin: 0;
border-color: #dee2e6;
box-shadow: none;
vertical-align: middle;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table.table-bordered th,
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table.table-bordered td {
border-left: none !important;
border-right: none !important;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table.table-bordered tr {
border-left: none !important;
border-right: none !important;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table thead th {
background: #edf2ff;
font-size: 16px !important;
font-weight: 600;
color: #364fc7;
padding: 8px 14px;
padding-right: 14px;
padding-bottom: 8px;
border-bottom: 1px solid #dbe4ff;
white-space: normal;
text-align: left;
vertical-align: middle;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table tbody tr td {
padding: 8px 14px;
font-size: 16px;
line-height: 1.45;
border-bottom: 1px solid #eef1f5;
vertical-align: top;
text-align: left;
background: #fff;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table.table-striped tbody tr:nth-of-type(odd) td,
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table.table-striped tbody tr:nth-of-type(even) td {
background: #fff;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table tbody tr:hover td {
background: #f8f9fa;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table a {
color: #364fc7;
text-decoration: none;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table a:hover {
color: #123aff;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-sam { width: 4.5rem; }
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-uniprot { width: 6rem; }
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-gene { width: 6.5rem; }
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-mutation { width: 7rem; }
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-evidence-pred,
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-evidence-motif,
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-evidence-ptm,
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-evidence-pheno { width: auto; }
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table col.potential-sam-col-details { width: 4rem; }
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table .map-pin-col,
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table .potential-sam-pin-col {
width: auto;
min-width: 72px;
max-width: none;
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table thead th.potential-sam-col-details,
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table tbody tr td.result-col-details {
text-align: left;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table tbody tr td.evidence-col {
text-align: left;
white-space: normal;
}
#browse-exp #section-potential-sam #browseEvidenceSummaryShow.browse-potential-sam-table thead th.potential-sam-evidence-header {
text-align: center;
white-space: normal;
}
#browse-exp #section-potential-sam th.potential-sam-arrange {
position: relative;
cursor: pointer;
padding-right: 12px;
padding-bottom: 12px;
}
#browse-exp #section-potential-sam th.potential-sam-pin-col.potential-sam-arrange {
position: relative;
padding-right: 12px;
padding-bottom: 12px;
}
#browse-exp #section-potential-sam th.potential-sam-arrange .potential-sam-sort-corner {
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent #c5d0f5 transparent;
pointer-events: none;
display: block;
}
#browse-exp #section-potential-sam th.potential-sam-arrange.sort-active-desc .potential-sam-sort-corner,
#browse-exp #section-potential-sam th.potential-sam-arrange.sort-active-asc .potential-sam-sort-corner,
#browse-exp #section-potential-sam th.potential-sam-pin-col.potential-sam-arrange.sort-active-desc .potential-sam-sort-corner,
#browse-exp #section-potential-sam th.potential-sam-pin-col.potential-sam-arrange.sort-active-asc .potential-sam-sort-corner {
border-bottom-color: #364fc7;
}
#browse-exp #section-potential-sam > .card-body.browse-table-panel.is-loading {
min-height: 220px;
}
#evidenceSummaryShow th.evidence-col-header .evidence-header-icon {
display: block;
font-size: 22px;
line-height: 1;
color: #364fc7;
margin-bottom: 4px;
text-align: center;
}
.evidence-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
}
.evidence-badge.evidence-hit { color: #364fc7; }
.evidence-badge.evidence-miss { color: #ced4da; }
.evidence-badge.evidence-partial { color: #f08c00; }
.evidence-tooltip.tooltip.show {
opacity: 1;
}
.evidence-tooltip .tooltip-inner {
max-width: 320px;
padding: 10px 14px;
font-size: 16px;
line-height: 1.55;
color: #1f2735;
text-align: left;
background-color: #f8faff;
border: 1px solid #d0daf5;
border-radius: 8px;
}
.evidence-tooltip.bs-tooltip-top .arrow::before {
border-top-color: #d0daf5;
}
.evidence-tooltip.bs-tooltip-bottom .arrow::before {
border-bottom-color: #d0daf5;
}
.evidence-tooltip.bs-tooltip-left .arrow::before {
border-left-color: #d0daf5;
}
.evidence-tooltip.bs-tooltip-right .arrow::before {
border-right-color: #d0daf5;
}
.evidence-popover {
max-width: 300px;
border: 1px solid #d0daf5;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(54, 79, 199, 0.14), 0 2px 8px rgba(26, 35, 48, 0.06);
}
.evidence-popover .popover-header {
padding: 10px 14px 8px;
font-size: 16px;
font-weight: bold;
color: #364fc7;
background: #f0f3ff;
border-bottom: 2px solid #e4e9f7;
border-radius: 9px 9px 0 0;
}
.evidence-popover .popover-body {
padding: 10px 14px 12px;
font-size: 16px;
color: #1f2735;
background: #fff;
border-radius: 0 0 9px 9px;
}
.evidence-popover.bs-popover-top > .arrow::before,
.evidence-popover.bs-popover-auto[x-placement^="top"] > .arrow::before {
border-top-color: #d0daf5;
}
.evidence-popover.bs-popover-bottom > .arrow::before,
.evidence-popover.bs-popover-auto[x-placement^="bottom"] > .arrow::before {
border-bottom-color: #d0daf5;
}
.evidence-popover.bs-popover-left > .arrow::before,
.evidence-popover.bs-popover-auto[x-placement^="left"] > .arrow::before {
border-left-color: #d0daf5;
}
.evidence-popover.bs-popover-right > .arrow::before,
.evidence-popover.bs-popover-auto[x-placement^="right"] > .arrow::before {
border-right-color: #d0daf5;
}
.exp-detail-cta {
grid-column: 1 / -1;
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid #e9ecef;
}
.exp-detail-cta a {
color: #364fc7;
font-weight: 600;
}
#detail-snapshot .snapshot-title {
flex: 0 0 auto;
margin: 0;
padding-right: 8px;
font-size: 18px;
font-weight: bold;
color: #1a2330;
letter-spacing: 0.01em;
white-space: nowrap;
line-height: 1.5;
border-right: 2px solid rgba(132, 156, 228, 0.9);
}
#detail-snapshot .detail-section-nav {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 6px;
min-width: 0;
padding: 5px 6px 5px 6px;
background: none;
border: none;
border-radius: 0;
overflow: visible;
}
.detail-section-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 7px 16px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
color: #495057;
background: #e8ecf6;
border: 1px solid transparent;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
white-space: nowrap;
box-shadow: none;
}
.detail-section-btn:hover:not(.active) {
color: #364fc7;
background: #dbe4ff;
box-shadow: var(--chip-shadow-hover);
}
.detail-section-btn.active {
background: linear-gradient(135deg, #364fc7 0%, #5a6fd8 100%);
color: white;
box-shadow: var(--chip-shadow-active);
}
.detail-section-btn:focus {
outline: none;
}
.detail-section-btn:focus-visible:not(.active) {
outline: none;
box-shadow: var(--chip-shadow-hover);
}
.detail-section-btn.active:focus-visible {
box-shadow: var(--chip-shadow-active), 0 0 0 3px rgba(54, 79, 199, 0.18);
}
@media (max-width: 768px) {
#detail-snapshot {
padding: 10px 12px;
border-radius: 10px;
gap: 8px 6px;
}
#detail-snapshot .snapshot-title {
flex: 1 1 100%;
padding-right: 0;
padding-bottom: 8px;
border-right: none;
border-bottom: 1px solid rgba(208, 218, 245, 0.9);
font-size: 15px;
}
#detail-snapshot .detail-section-nav {
flex: 1 1 100%;
gap: 5px;
}
.detail-section-btn {
min-height: 32px;
font-size: 11px;
padding: 6px 11px;
border-radius: 7px;
}
}
.evidence-matrix {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
}
#phenotype-evidence-matrix:not(:empty) {
margin-bottom: 24px;
}
.evidence-matrix-card {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 12px;
text-align: center;
box-shadow: 0 2px 8px #ced4da;
}
.evidence-matrix-card .matrix-label {
font-size: 18px;
font-weight: bold;
color: #364fc7;
border-bottom: 2px solid #edf2ff;
padding-bottom: 8px;
}
.evidence-matrix-card .matrix-summary {
font-size: 14px;
color: #495057;
margin-top: 6px;
min-height: 36px;
text-align: left;
}
.evidence-matrix-card .matrix-summary.matrix-summary-empty {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.pathway-box {
background: #f8f9fa;
border-left: 4px solid #364fc7;
padding: 14px 18px;
border-radius: 4px;
margin-top: 12px;
}
.pathway-box .pathway-line {
font-size: 14px;
color: #1a2330;
margin: 4px 0;
}
.consistency-note {
background: #fff9db;
border: 1px solid #ffe066;
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 16px;
font-size: 14px;
color: #495057;
}
.pred-delta-bars { margin: 16px 0; }
.pred-delta-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
font-size: 13px;
}
.pred-delta-row .pred-label {
width: 140px;
flex-shrink: 0;
text-align: right;
}
.pred-delta-row .pred-bar-wrap {
flex: 1;
height: 18px;
background: #e9ecef;
border-radius: 3px;
position: relative;
}
.pred-delta-row .pred-bar {
position: absolute;
top: 0;
height: 100%;
border-radius: 3px;
}
.pred-delta-row .pred-bar.positive { background: #ff6b6b; left: 50%; }
.pred-delta-row .pred-bar.negative { background: #4dabf7; right: 50%; }
.pred-delta-row .pred-val {
width: 70px;
font-variant-numeric: tabular-nums;
}
.motif-conclusion {
color: #1a2330;
border: none;
margin-bottom: 12px;
padding: 8px 10px;
border-radius: 2px;
}
.ptm-conclusion {
color: #1a2330;
border: none;
margin-bottom: 10px;
padding: 8px 10px;
border-radius: 2px;
}
.motif-v2-placeholder {
color: #868e96;
font-style: italic;
padding: 12px;
border: 1px dashed #dee2e6;
border-radius: 6px;
margin-top: 16px;
}
.ptm-impact-list {
margin-bottom: 16px;
padding-left: 0;
list-style: none;
}
.ptm-impact-list li {
display: flex;
align-items: flex-start;
gap: 2px;
margin-bottom: 6px;
}
.ptm-impact-list li i.ri-arrow-drop-right-line {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
color: #233047;
flex-shrink: 0;
}
.sequence-motif-track-wrap { margin-bottom: 0; }
.motif-region-chart {
min-height: 60px;
width: 100%;
box-sizing: border-box;
}
.detail-content > .section-container + br {
display: none;
}
.detail-content > .section-container:not(#section-overview) {
display: none;
}
.result-card {
margin-bottom: 0;
}
.result-card + .result-card {
margin-top: 20px;
}
#result .result-card.section-container > .card-header .sub-title {
margin-left: 0;
}
#search-alert.alert-primary,
#protgps-search-alert.alert-primary,
#exp-search-alert.alert-primary,
#summary-search-alert.alert-primary {
background: linear-gradient(90deg, #dbe4ff 0%, #ffffff 100%);
color: #1a2330;
border: none;
border-left: 5px solid #364fc7;
box-shadow: 0 2px 8px #ced4da;
margin-bottom: 0;
padding: 8px 10px;
border-radius: 2px;
}
#search-alert.alert-danger,
#protgps-search-alert.alert-danger,
#summary-search-alert.alert-danger,
#summary-search-alert.alert-warning {
background: linear-gradient(90deg, #ffeaea 0%, #fff 100%);
color: #b71c1c;
border: none;
border-left: 5px solid #e74c3c;
box-shadow: 0 2px 8px #ced4da;
margin-bottom: 0;
padding: 8px 10px;
border-radius: 2px;
}
.result-table-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
position: relative;
z-index: 3;
}
.result-table-filter-group {
display: flex;
align-items: center;
gap: 8px;
flex: 0 1 auto;
min-width: 0;
}
.result-table-filter-group .ri-filter-3-line {
color: #4263eb;
font-size: 18px;
font-weight: bold;
flex-shrink: 0;
}
ri-external-link-fill {
color: #4263eb;
font-size: 20px;
font-weight: 400;
}
.result-filter-input {
flex: 0 0 320px;
width: 320px;
max-width: 100%;
height: 38px;
border: 1px solid #e9ecef;
border-radius: 6px;
padding: 7px 12px;
font-size: 13px;
color: #1a2330;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.result-filter-input::placeholder {
color: #adb5bd;
}
.result-filter-input:focus {
outline: none;
border-color: #4263eb;
box-shadow: 0 0 0 3px rgba(66, 99, 235, 0.12);
}
.result-filter-clear {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 38px;
padding: 0 12px;
border: 1px solid #dbe4ff;
border-radius: 6px;
background: linear-gradient(180deg, #f8faff 0%, #eef2fb 100%);
color: #4263eb;
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(66, 99, 235, 0.1);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.result-filter-clear i {
font-size: 15px;
line-height: 1;
}
.result-filter-clear:hover {
color: #364fc7;
border-color: #4263eb;
background: linear-gradient(180deg, #eef2fb 0%, #dbe4ff 100%);
box-shadow: 0 2px 6px rgba(66, 99, 235, 0.18);
}
.result-filter-clear:active {
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(66, 99, 235, 0.12);
}
.result-filter-clear.is-downloading,
.result-filter-clear:disabled {
opacity: 0.75;
cursor: wait;
}
.result-download-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 38px;
padding: 0 16px;
border: none;
border-radius: 6px;
background: transparent;
color: #4263eb;
font-size: 13px;
line-height: 1;
text-decoration: none !important;
cursor: pointer;
flex-shrink: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 2px 8px rgba(54, 79, 199, 0.28);
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.result-download-btn:hover {
color: #fff;
background: transparent;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 4px 14px rgba(54, 79, 199, 0.36);
}
.result-download-btn:active {
transform: translateY(1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 1px 4px rgba(54, 79, 199, 0.22);
}
.result-download-btn i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
font-size: 14px;
line-height: 1;
}
#search-alert,
#exp-search-alert,
#protgps-search-alert {
display: flex;
align-items: center;
min-height: 22px;
padding: 8px 10px;
}
#search-alert:has(.phenotype-table-empty),
#exp-search-alert:has(.phenotype-table-empty),
#protgps-search-alert:has(.phenotype-table-empty) {
display: block;
padding: 0;
min-height: 0;
background: none;
border: none;
box-shadow: none;
}
/*--detail页面的alert样式---*/
#result-show {
margin-top: 0;
padding-top: 0;
padding-left: 20px;
padding-right: 20px;
}
#pro-message-group {
margin-bottom: 0;
}
#pro-alert.alert-success {
background: #fff;
color: #1a2330;
border: none;
border-left: 5px solid #364fc7;
border-radius: 2px;
box-shadow: 0 2px 8px #ced4da;
}
#pro-alert.alert-danger {
background: linear-gradient(90deg, #ffeaea 0%, #fff 100%);
border: none;
color: #b71c1c;
border-left: 5px solid #e74c3c;
border-radius: 2px;
box-shadow: 0 2px 8px #ced4da;
}
#pro-alert.alert-warning {
background: linear-gradient(90deg, #ffeaea 0%, #fff 100%);
border: none;
color: #b71c1c;
border-left: 5px solid #e74c3c;
border-radius: 2px;
box-shadow: 0 2px 8px #ced4da;
}
#pro-alert{
display: flex;
align-items: center;
min-height: 22px;
padding: 8px 10px;
}
/*--card标题的样式---*/
.card-header {
background: linear-gradient(90deg, #dbe4ff 0%, #ffffff 100%);
color: #1a2330;
border: none;
border-left: 5px solid #364fc7;
box-shadow: 0 2px 8px #ced4da;
border-radius: 2px;
padding: 12px 15px;
min-height: 24px;
margin-bottom: 0;
display: flex;
align-items: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.card-header h3, .card-header h5, .card-header h4 {
margin: 0;
}
.detail-content-wrapper > .section-container:first-of-type {
margin-top: 0;
}
.detail-content-wrapper > .section-container {
margin-top: 0; /* 去掉所有section的顶部间距 */
}
/*--detail页面table的样式---*/
#proInfoShow tr td:first-child{
font-weight: bolder;
width:20%;
}
.proInfoTable {
padding-left: 15px;
padding-right: 15px;
margin-left: -55px;
margin-right: 25px;
width: 100%;
color:#1a2330;
}
.proInfoTable td:first-child{
text-align: right;
padding-right: 15px;
width:18%;
border-right: solid 2px #364fc7;
font-weight: bolder;
font-size: 16px;
}
.proInfoTable tr{
border-bottom: solid 15px transparent;
}
.proInfoTable td:nth-child(2){
text-align: justify;
padding-left: 15px;
color:#1a2330;
}
.pro-info-toggle {
margin-left: 6px;
color: #364fc7;
text-decoration: none;
white-space: nowrap;
}
.pro-info-toggle:hover {
color: #243ab8;
}
.function-cell .function-text-collapsed {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.function-cell .pro-info-toggle {
display: inline-block;
margin-left: 0;
margin-top: 6px;
}
.cross-links-wrap {
padding-right: 15px;
padding-left: 50px;
margin-right: 10px;
width: 100%;
}
.cross-links-group {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: #1a2330;
}
.cross-links-group:last-child {
margin-bottom: 0;
}
.cross-links-label {
flex: 0 0 260px;
min-width: 260px;
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
padding-right: 15px;
border-right: solid 2px #364fc7;
font-weight: bolder;
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: nowrap;
}
.cross-links-items {
flex: 1;
padding-left: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.cross-links-items a.cross-link-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 12px;
border: 1px solid #dbe4ff;
border-radius: 6px;
background: linear-gradient(180deg, #f8faff 0%, #eef2fb 100%);
color: #4263eb;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(66, 99, 235, 0.1);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.cross-links-items a.cross-link-btn:hover {
color: #364fc7;
border-color: #4263eb;
background: linear-gradient(180deg, #eef2fb 0%, #dbe4ff 100%);
box-shadow: 0 2px 6px rgba(66, 99, 235, 0.18);
text-decoration: none;
}
.cross-links-items a.cross-link-btn:active {
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(66, 99, 235, 0.12);
}
.regionInfoTable {
padding-left: 10px;
padding-right: 10px;
margin-left: -30px;
margin-right: 40px;
width: 80%; /*--调间距---*/
}
.regionInfoTable tr {
border-bottom: 15px solid transparent;
}
.regionInfoTable td {
padding-left: 15px;
color: #1a2330; /*--最右边的字体颜色---*/
font-size: 18px;
padding-right: 15px;
}
.regionInfoTable .title2 {
font-weight: bolder;
color: #1a2330; /*--最左边的字体颜色---*/
text-align: right;
width: 30%; /*--调间距---*/
border-bottom: none;
position: relative;
padding-right: 30px; /*--最左边的线离右侧字的距离，越大越近---*/
}
.regionInfoTable .title2::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 2px;
background-color: #364fc7;
}
.regionInfoTable .title2 td:first-child{
text-align: right;
padding-right: 15px;
}
.regionInfoTable .title3 {
font-weight: bolder;
color: #1a2330;
text-align: left;
border-right: 2px solid #364fc7;
width:180px;
max-width: 200px;
padding-right: 15px;
padding-left: 30px;
}
.mol-container {
width: 40%;
height: 300px;
position: relative;
margin: 0 auto;
border: none;
}
.protein-structure-panel {
margin-top: 24px;
margin-left: 40px;
margin-right: 40px;
}
.protein-structure-wrap {
display: flex;
align-items: stretch;
margin-top: 12px;
border: 1px solid #dbe4ff;
border-radius: 10px;
overflow: hidden;
background: #edf2ff;
}
.protein-structure-label {
flex: 0 0 150px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 16px 12px;
background: #dbe4ff;
color: #364fc7;
font-weight: 600;
font-size: 0.92em;
text-align: right;
}
.protein-structure-combine {
display: flex;
flex: 1 1 auto;
min-width: 0;
gap: 10px;
background: #f8faff;
}
.protein-sequence-box,
.protein-structure-viewer-box {
flex: 1 1 0;
width: calc(50% - 5px);
min-width: 0;
}
.protein-sequence-box {
max-height: 420px;
overflow: auto;
padding: 16px 18px;
font-size: 16px;
color: #1a2330;
background: #f8faff;
}
.structure-sequence-length {
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
color: #1a2330;
}
.structure-sequence-tracks {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
line-height: 1;
min-width: min-content;
}
.structure-sequence-row {
display: flex;
flex-wrap: nowrap;
column-gap: 0.55em;
}
.structure-sequence-row + .structure-sequence-row {
margin-top: 12px;
}
.structure-seq-chunk {
flex: 0 0 auto;
}
.structure-seq-chunk-grid {
display: grid;
grid-template-columns: repeat(10, 1ch);
grid-template-rows: auto auto;
column-gap: 0;
row-gap: 2px;
font-family: inherit;
font-size: inherit;
}
.structure-seq-cell {
display: flex;
align-items: center;
justify-content: center;
width: 1ch;
height: 1.1em;
box-sizing: border-box;
overflow: hidden;
}
.structure-seq-pos {
font-size: 0.72em;
color: #6c757d;
}
.structure-seq-pos-marker {
overflow: visible;
position: relative;
z-index: 1;
}
.structure-seq-aa {
font-size: 1em;
letter-spacing: -0.02em;
}
.protein-structure-viewer-box {
position: relative;
display: flex;
flex-direction: column;
min-height: 420px;
background: #edf2ff;
}
.protein-structure-viewer-stage {
position: relative;
flex: 1 1 auto;
width: 100%;
height: 420px;
min-height: 420px;
}
#structure-box-plot {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.structure-viewer-status {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
background: #edf2ff;
pointer-events: auto;
}
.structure-viewer-status[hidden] {
display: none !important;
pointer-events: none;
}
.structure-viewer-error,
.structure-viewer-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 100%;
padding: 24px;
color: #6c757d;
font-size: 15px;
font-style: italic;
text-align: center;
}
.structure-viewer-loading {
font-style: normal;
}
.structure-viewer-error i,
.structure-viewer-loading .spinner-border {
font-size: 18px;
flex-shrink: 0;
}
.protein-pdb-choose {
position: relative;
align-self: flex-end;
display: flex;
align-items: center;
gap: 8px;
margin: 8px 12px 12px;
padding: 6px 10px;
border-radius: 8px;
background: rgba(26, 35, 48, 0.78);
color: #fff;
font-size: 0.88em;
z-index: 10;
pointer-events: auto;
}
.protein-pdb-select {
min-width: 110px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 6px;
background: rgba(255, 255, 255, 0.95);
color: #1a2330;
font-size: 0.95em;
padding: 2px 8px;
pointer-events: auto;
cursor: pointer;
}
.protein-pdb-label {
white-space: nowrap;
}
.structure-seq-mutation {
color: #fff;
background: #e03131;
font-weight: 700;
border-radius: 1px;
}
@media (max-width: 991px) {
.protein-structure-wrap {
flex-direction: column;
}
.protein-structure-label {
flex: none;
justify-content: flex-start;
text-align: left;
}
.protein-structure-combine {
flex-direction: column;
}
.protein-sequence-box,
.protein-structure-viewer-box {
width: 100%;
}
.protein-sequence-box {
max-height: 220px;
}
.protein-structure-viewer-stage {
min-height: 320px;
height: 320px;
}
}
.anchor-title {
padding-top: 210px;
margin-top: -210px;
}
.detail-content-wrapper {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
padding: 0 0 30px 0;
margin-top: 30px;
}
.section-container:first-of-type {
margin-top: 0;
}
.section-container {
margin-bottom: 24px;
scroll-margin-top: 210px;
}
.region-info-compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 16px;
align-items: stretch;
margin-left: 10px;
margin-right: 10px;
}
.region-info-card {
display: flex;
flex-direction: column;
min-width: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px #ced4da;
overflow: hidden;
}
.region-info-card-header {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
background: #edf2ff;
border-bottom: 1px solid #dbe4ff;
text-align: center;
}
.region-info-card-title {
font-size: 18px;
font-weight: 700;
color: #1a2330;
letter-spacing: 0.01em;
}
.region-info-card-body {
flex: 1 1 auto;
padding: 12px 8px 16px;
min-height: 120px;
}
.region-info-loading,
.region-info-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 160px;
padding: 24px 16px;
color: #6c757d;
font-style: italic;
font-size: 16px;
text-align: center;
}
.region-info-loading i,
.region-info-empty i {
color: #6c757d;
}
#regionInfoShow .regionInfoTable {
width: 100%;
margin: 0;
padding: 0 8px;
border-collapse: separate;
border-spacing: 0 12px;
}
#regionInfoShow .regionInfoTable tr {
border-bottom: none;
}
#regionInfoShow .regionInfoTable td {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 15px;
font-size: 16px;
line-height: 1.45;
color: #343a40;
vertical-align: top;
}
#regionInfoShow .regionInfoTable .title2 {
width: 55%;
min-width: 40px;
padding-right: 15px;
padding-left: 0px;
font-size: 16px;
font-weight: bolder;
color: #364fc7;
letter-spacing: 0.04em;
}
#regionInfoShow .regionInfoTable .title2::after {
width: 2px;
background-color: #364fc7;
}
#regionInfoShow .regionInfoTable .title3 {
width: 38%;
max-width: none;
padding-left: 12px;
padding-right: 12px;
font-size: 16px;
font-weight: 600;
color: #1a2330;
border-right: 2px solid #bac8ff;
white-space: nowrap;
}
#regionInfoShow .regionInfoTable td:last-child {
color: #1a2330;
word-break: break-word;
}
#regionInfoShow .regionInfoTable td:last-child span {
display: inline;
}
.lcs-mid-track-empty {
margin: 4px 0 16px;
font-size: 15px;
font-style: italic;
}
@media (max-width: 991px) {
.region-info-compare-grid {
grid-template-columns: 1fr;
}
}
/* Result page专属preloader */
#result-preloader {
position: fixed;
inset: 0;
z-index: 9999;
overflow: hidden;
background: rgba(255, 255, 255, 0.5);
pointer-events: all;
}
#result-preloader:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;
margin-left: -30px;
border: 6px solid #5c7cfa;
border-top-color: #fff;
border-radius: 50%;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-result-preloader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes animate-result-preloader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.variation-table {
width: 100%;
padding-left: 20px;
}
.variation-table tr {
border-bottom: 15px solid transparent;
}
.variation-table tr td {
border-bottom: 15px solid transparent;
}
/* 左边列 */
.variation-table td.db {
font-weight: bold;
text-align: right;
width: 130px;
max-width: 200px;
white-space: nowrap;
position: relative;
padding-left: 30px;
padding-right: 30px;
}
.variation-table td.db::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 2px;
background-color: #364fc7;
}
/* 中间列 */
.variation-table td.field {
font-weight: bold;
text-align: left;
width: 280px;
max-width: 300px;
position: relative;
padding-left: 30px;
padding-right: 15px;
color: #1a2330;
}
.variation-table tr td.field {
border-bottom: 15px solid transparent;
}
.variation-table td.field::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
/* 右边列 */
.variation-table td.value {
text-align: left;
padding-left: 15px;
font-weight: normal;
border-left: #364fc7 solid 2px;
}
.variation-table tr.last-db-row td {
border-bottom: 15px solid transparent;
}
.variation-table tr.last-db-row td.field::after {
border-bottom: 15px solid transparent;
}
@media (max-width: 768px) {
.subcellular-known-visual {
flex-direction: column;
}
.subcellular-known-visual .cell-figure,
.subcellular-known-visual .cell-location-list {
flex: none;
width: 100%;
max-width: 100%;
}
.subcellular-known-visual .cell-location-list {
padding-top: 0;
}
}
/* 主容器布局 */
.help-container {
display: flex !important;
gap: 0;
align-items: stretch;
width: 100%;
--help-nav-sidebar-width: 240px;
--help-nav-gap: 1rem;
--help-scroll-offset: calc(var(--header-height) + 1rem);
}
.help-nav-sidebar {
width: var(--help-nav-sidebar-width);
flex-shrink: 0;
margin-right: var(--help-nav-gap);
}
/* 导航栏样式更新 */
.help-nav {
width: 100%;
background: #fff;
border-radius: 5px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 2rem 0;
overflow: hidden;
z-index: 10;
}
.help-nav.navigation-fixed {
position: fixed;
}
.help-nav-sidebar {
position: relative;
}
.help-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
.help-nav .nav-link {
color: #495057;
font-weight: 500;
font-size: 18px;
border-left: 3px solid transparent;
padding: 0.75rem 1.5rem;
margin: 0.25rem 0;
border-radius: 0;
transition: all 0.3s ease;
display: flex;
align-items: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.help-nav .nav-link i {
margin-right: 0.75rem;
font-size: 1.1rem;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.help-nav .nav-link:hover,
.help-nav .nav-link.active {
background: linear-gradient(90deg, #dbe4ff 0%, #ffffff 100%);
color: #364fc7;
border-left-color: #364fc7;
transform: translateX(5px);
}
/* 内容区域样式 */
.help-content {
flex: 1;
min-width: 0;
max-width: calc(100% - var(--help-nav-sidebar-width) - var(--help-nav-gap));
}
.help-section {
margin-bottom: 1rem;
scroll-margin-top: var(--help-scroll-offset);
}
.help-section:last-child {
margin-bottom: 0;
}
.section-card {
background: white;
border-radius: 5px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section-card .card-header {
gap: 0.5em;
}
.section-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.section-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
border-bottom: 1px solid #e9ecef;
}
.section-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #364fc7 0%, #5a6fd8 100%);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
.section-title h3 {
margin: 0 0 0.5rem 0;
font-size: 1.3em; /* 与body中h3定义一致 */
font-weight: bold;
color: #233047; /* 与body中h3颜色一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.section-title p {
margin: 0;
color: #6c757d;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.section-body {
padding: 20px;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #1a2330; /* 与body颜色一致 */
}
.about-intro-block {
margin: 0;
}
#main .about-intro-text {
color: #3f4660;
font-size: 18px;
line-height: 1.5;
text-align: justify;
margin: 0 0 10px;
width: 100%;
}
.about-intro-num {
color: #364fc7;
font-weight: 600;
}
.about-intro-figure {
margin: 0;
padding: 0;
text-align: center;
}
.about-intro-img {
display: inline-block;
width: 70%;
max-width: 800px;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 18px rgba(54, 79, 199, 0.12), 0 1px 4px rgba(63, 70, 96, 0.08);
}
.tutorial-search-figure {
margin: 0;
padding: 0;
text-align: center;
}
.tutorial-search-img {
display: inline-block;
width: 60%;
max-width: 650px;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 18px rgba(54, 79, 199, 0.12), 0 1px 4px rgba(63, 70, 96, 0.08);
}
/* Data Sources 表格（与 protgps-table-show 一致） */
.help-data-sources-body {
padding-top: 1.25rem;
}
.help-data-table-block {
margin-bottom: 1.75rem;
}
.help-data-table-block:last-child {
margin-bottom: 0;
}
.help-data-table-block .body-title {
margin-top: 0;
}
.help-data-table-wrap {
overflow: hidden;
}
.help-data-table {
width: 100%;
margin-bottom: 0;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #dee2e6;
border-radius: 2px;
box-shadow: 0 2px 8px #ced4da;
}
.help-data-table thead th {
background: #edf2ff;
color: #364fc7;
font-size: 16px;
font-weight: 600;
padding: 8px 14px;
border-bottom: 1px solid #dbe4ff;
white-space: nowrap;
text-align: left;
vertical-align: middle;
}
.help-data-table tbody td {
padding: 8px 14px;
font-size: 16px;
line-height: 1.45;
border-bottom: 1px solid #eef1f5;
vertical-align: middle;
text-align: left;
background: #fff;
}
.help-data-table tbody tr:hover td {
background: #f8f9fa;
}
.help-data-table th,
.help-data-table td {
border-left: none;
border-right: none;
}
.help-data-table a {
word-break: break-all;
}
@media (max-width: 768px) {
.help-data-table thead th,
.help-data-table tbody td {
padding: 8px 10px;
font-size: 15px;
}
}
/* 特性网格 */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 0;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 12px;
transition: all 0.3s ease;
}
.feature-item:hover {
background: #e7eafc;
transform: translateY(-2px);
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #364fc7 0%, #5a6fd8 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
}
.feature-content h5 {
margin: 0 0 0.5rem 0;
font-weight: 600;
color: #1a2330;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.feature-content p {
margin: 0 !important;
margin-bottom: 0 !important;
color: #6c757d;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* 信息框 */
.info-box {
background: linear-gradient(135deg, #e7eafc 0%, #f8f9ff 100%);
border-left: 4px solid #364fc7;
padding: 1rem;
border-radius: 8px;
margin-top: 30px;
}
.info-box p {
color: #1a2330;
line-height: 1.6;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* 数据源网格 */
.data-sources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.source-card {
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.source-card:hover {
border-color: #364fc7;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(54, 79, 199, 0.15);
}
.source-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #364fc7 0%, #5a6fd8 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin: 0 auto 1rem;
}
.source-card h5 {
margin: 0 0 0.5rem 0;
font-weight: 600;
color: #1a2330;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.source-card p {
margin: 0;
color: #6c757d;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* 流程步骤 */
.pipeline-steps {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0;
}
.step-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 12px;
position: relative;
}
.step-item::before {
content: '';
position: absolute;
left: 1rem;
top: 100%;
width: 2px;
height: 1rem;
background: #dee2e6;
}
.step-item:last-child::before {
display: none;
}
.step-number {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #364fc7 0%, #5a6fd8 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1rem;
flex-shrink: 0;
}
.step-content h5 {
margin: 0 0 0.5rem 0;
font-weight: 600;
color: #1a2330;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.step-content p {
margin: 0;
margin-bottom: 0 !important;
color: #6c757d;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* 使用指南标签 */
.usage-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
border-bottom: 2px solid #e9ecef;
padding-bottom: 1rem;
}
#browse-exp .section-card .tab-pane .section-container .card-body {
padding: 0;
box-shadow: none;
}
.tab-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
color: #6c757d;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.tab-item:hover {
color: #364fc7;
background: #fff;
border-color: #c5cff5;
box-shadow: 0 2px 8px rgba(54, 79, 199, 0.12);
}
.tab-item.active {
background: linear-gradient(135deg, #364fc7 0%, #5a6fd8 100%);
color: white;
}
.tab-content {
min-height: 200px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.tab-pane h5 {
color: #1a2330;
margin-bottom: 1rem;
font-weight: 600;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.tab-pane p {
color: #6c757d;
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.example-box {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
border-left: 4px solid #364fc7;
margin-top: 30px;
}
.example-box h6 {
color: #1a2330;
margin-bottom: 1rem;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.example-box ul {
margin: 0;
padding-left: 1rem;
}
.example-box li {
margin-bottom: 0.5rem;
color: #6c757d;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.example-box code {
background: #e7eafc;
color: #364fc7;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-weight: 600;
font-size: 18px; /* 与body字体一致 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* About 页导航响应式 */
@media (max-width: 1400px) and (min-width: 1201px) {
.help-container {
--help-nav-sidebar-width: 210px;
}
.help-nav .nav-link {
font-size: 17px;
padding: 0.65rem 1.1rem;
}
}
@media (max-width: 1200px) {
.help-container {
flex-direction: column;
--help-scroll-offset: calc(var(--header-height) + 4.5rem);
}
.help-nav-sidebar {
width: 100%;
margin-right: 0;
margin-bottom: 0.75rem;
position: sticky;
top: calc(var(--header-height) + 0.5rem);
z-index: 100;
}
.help-nav {
padding: 0.5rem 0;
overflow: visible;
}
.help-nav ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
}
.help-nav .nav-item {
flex: 0 1 auto;
}
.help-nav .nav-link {
border-left: none;
border-bottom: 3px solid transparent;
border-radius: 8px;
margin: 0;
padding: 0.55rem 0.9rem;
font-size: 16px;
}
.help-nav .nav-link:hover,
.help-nav .nav-link.active {
border-left: none;
border-bottom-color: #364fc7;
transform: none;
}
.help-content {
max-width: 100%;
padding: 0;
}
}
@media (max-width: 768px) {
.help-container {
--help-scroll-offset: calc(var(--header-height) + 3.75rem);
}
.help-nav-sidebar {
margin-bottom: 0.5rem;
}
.help-nav {
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.help-nav ul {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
gap: 0.35rem;
padding: 0.4rem;
}
.help-nav ul::-webkit-scrollbar {
height: 4px;
}
.help-nav ul::-webkit-scrollbar-thumb {
background: #c5cee0;
border-radius: 4px;
}
.help-nav .nav-link {
font-size: 14px;
padding: 0.45rem 0.75rem;
white-space: nowrap;
}
.help-nav .nav-link i {
font-size: 1rem;
margin-right: 0.35rem;
width: auto;
}
}
@media (max-width: 480px) {
.help-container {
--help-scroll-offset: calc(var(--header-height) + 3.25rem);
}
.help-nav .nav-link {
font-size: 13px;
padding: 0.4rem 0.6rem;
}
}
@media (max-width: 768px) {
.help-title {
font-size: 2rem;
}
.help-subtitle {
font-size: 1rem;
}
.section-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.feature-grid {
grid-template-columns: 1fr;
}
.data-sources-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.usage-tabs {
flex-direction: column;
}
.step-item {
flex-direction: column;
text-align: center;
}
.step-item::before {
display: none;
}
}
/* 动画效果 */
.help-section {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.help-section:nth-child(1) { animation-delay: 0.1s; }
.help-section:nth-child(2) { animation-delay: 0.2s; }
.help-section:nth-child(3) { animation-delay: 0.3s; }
.help-section:nth-child(4) { animation-delay: 0.4s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 图片预览样式 */
.venobox {
display: inline-block;
transition: all 0.3s ease;
}
.venobox:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(54, 79, 199, 0.2);
}
.venobox img {
transition: all 0.3s ease;
}
.venobox:hover img {
border-color: #364fc7 !important;
}
/* Venobox自定义样式 */
.vbox-overlay {
background: rgba(0, 0, 0, 0.9) !important;
}
.vbox-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.vbox-title {
color: #fff !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}
.vbox-close {
background: #5a5ff5 !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
line-height: 40px !important;
font-size: 18px !important;
}
.vbox-close:hover {
background: #7579ee !important;
transform: scale(1.1);
}
/* 确保图片背景透明 */
.vbox-container img {
background: transparent !important;
}
/* 移除可能的白色背景 */
.venobox {
background: transparent !important;
}
.venobox img {
background: transparent !important;
}
/* Tab-pane中的图片样式 */
.tab-pane img {
width: 80% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
background: transparent !important;
background-color: transparent !important;
}
.tab-pane img:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(54, 79, 199, 0.2);
}
/* 强制移除所有白色背景 */
.tab-pane .venobox,
.tab-pane .venobox img,
.vbox-container,
.vbox-container img,
.venobox,
.venobox img {
background: transparent !important;
background-color: transparent !important;
}
/* 确保模态框中的图片也没有背景 */
.vbox-content img {
background: transparent !important;
background-color: transparent !important;
}
/* 最高优先级移除白色背景 */
.tab-pane img[src*="search.png"],
.tab-pane .venobox img,
.vbox-container img,
.venobox img {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
.card-text {
color: #364fc7;
}
#browse-preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: rgba(255, 255, 255, 0.6);
display: none;
}
#browse-preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #364fc7;
border-top-color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-result-preloader 0.8s linear infinite;
animation: animate-result-preloader 0.8s linear infinite;
}
/*--------------------------------------------------------------
# Index Fullpage + Radar Charts
--------------------------------------------------------------*/
html.index-fullpage-root,
body.index-fullpage {
height: 100%;
overflow: hidden;
}
body.index-fullpage #footer {
display: none;
}
#fp-wrapper {
position: relative;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
#fp-wrapper::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.fp-section {
min-height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--header-height) + 1.5rem) 0 2rem;
box-sizing: border-box;
}
.fp-section-home {
background: radial-gradient(circle, #eef2fb 0%, #a7b3d8 100%);
background-size: cover;
background-position: center;
}
.fp-section-chart {
background: linear-gradient(180deg, #f8f9fc 0%, #e8ecf5 100%);
}
.fp-section-welcome {
background: linear-gradient(180deg, #f4f6fb 0%, #e8ecf5 100%);
align-items: center;
justify-content: center;
padding: calc(var(--header-height) + 2rem) 0 2rem;
scroll-snap-stop: normal;
}
.welcome-page-inner {
max-width: 1280px;
text-align: left;
}
.welcome-page-row {
margin: 0;
}
.welcome-page-text {
margin-bottom: 10px;
padding: 0;
}
.welcome-page-title {
color: #364fc7;
font-size: 32px;
font-weight: 700;
margin-bottom: 1rem;
}
.welcome-page-intro {
color: #3f4660;
font-size: 20px;
line-height: 1.5;
margin-bottom: 0.5rem;
}
.welcome-page-list {
color: #3f4660;
font-size: 20px;
line-height: 1.5;
margin-bottom: 0;
}
.welcome-page-list li {
margin-bottom: 0.5rem;
text-align: left;
}
.welcome-page-list li:last-child {
margin-bottom: 0;
}
.welcome-page-num {
color: #364fc7;
font-weight: 600;
}
.welcome-page-image {
text-align: center;
margin-top: 10px;
}
.welcome-pipeline-img {
width: 100%;
max-width: 800px;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 18px rgba(54, 79, 199, 0.12), 0 1px 4px rgba(63, 70, 96, 0.08);
}
.fp-section-features {
background: linear-gradient(180deg, #f4f6fb 0%, #e8ecf5 100%);
align-items: center;
justify-content: center;
padding: calc(var(--header-height) + 2rem) 0 2rem;
scroll-snap-stop: normal;
}
.features-page-inner {
max-width: 1280px;
text-align: left;
}
.features-page-row {
margin: 0;
align-items: center;
}
.features-page-text {
padding: 0;
margin-bottom: 0;
}
.features-visual-modules {
padding: 0 0 0 1rem;
}
.features-modules-card {
display: flex;
flex-direction: column;
min-width: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px #ced4da;
overflow: hidden;
}
.features-modules-card-header {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 16px;
background: #edf2ff;
border-bottom: 1px solid #dbe4ff;
text-align: center;
}
.features-modules-card-title {
font-size: 20px;
font-weight: 600;
color: #1a2330;
letter-spacing: 0.01em;
line-height: 1.3;
}
.features-modules-card-body {
flex: 1 1 auto;
padding: 10px 20px 12px;
min-height: 0;
}
.features-page-title {
color: #364fc7;
font-size: 32px;
font-weight: 700;
margin-bottom: 1rem;
}
.features-page-lead {
color: #3f4660;
font-size: 20px;
line-height: 1.5;
margin-bottom: 0.5rem;
text-align: left;
}
.features-page-list {
color: #3f4660;
font-size: 20px;
line-height: 1.5;
margin: 0;
text-align: left;
}
.features-page-list > li {
margin-bottom: 0.5rem;
}
.features-page-list > li:last-child {
margin-bottom: 0;
}
.features-page-sublist {
margin: 0.4rem 0 0;
padding-left: 1.25rem;
list-style-type: decimal;
}
.features-page-sublist li {
margin-bottom: 0.35rem;
}
.features-page-sublist li:last-child {
margin-bottom: 0;
}
.features-module-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
}
.features-module-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid #dde3f0;
border-radius: 8px;
padding: 0.65rem 0.85rem;
display: flex;
align-items: center;
gap: 0.65rem;
text-align: left;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 18px rgba(54, 79, 199, 0.12), 0 1px 4px rgba(63, 70, 96, 0.08);
}
.features-module-card:hover {
border-color: #b8c4e8;
box-shadow: 0 4px 18px rgba(54, 79, 199, 0.12), 0 1px 4px rgba(63, 70, 96, 0.08);
}
.features-module-icon {
display: block;
color: #364fc7;
font-size: 22px;
flex-shrink: 0;
}
.features-module-name {
display: block;
color: #2b3a55;
font-size: 18px;
line-height: 1.3;
}
.features-module-desc {
display: block;
color: #7b83a8;
font-size: 10px;
line-height: 1.25;
margin-top: 0.1rem;
}
.features-chart-wrap {
margin-top: 0.5rem;
max-width: 720px;
margin-left: auto;
margin-right: auto;
width: 100%;
background: rgba(244, 246, 251);
border: 1px solid #dde3f0;
border-radius: 10px;
padding: 0.5rem 0.6rem 0.25rem;
box-shadow: 0 2px 10px rgba(54, 79, 199, 0.14);
}
.features-chart-title {
color: #5c637a;
font-size: 18px;
font-weight: 600;
margin: 0 0 0.25rem;
text-align: center;
}
.features-scale-chart {
width: 100%;
height: 200px;
min-height: 180px;
}
.features-illus-row {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
opacity: 0.55;
margin-top: 0.15rem;
}
.features-illus-img {
width: 42px;
height: 42px;
object-fit: contain;
}
.fp-section-overview {
align-items: center;
justify-content: center;
padding: calc(var(--header-height) + 2rem) 0 2rem;
scroll-snap-stop: normal;
background: linear-gradient(180deg, #f4f6fb 0%, #e8ecf5 100%);
}
.fp-section-inner {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.fp-chart-title {
color: #364fc7;
font-size: 28px;
font-weight: 600;
line-height: 1;
margin-bottom: 10px;
text-align: center;
}
.fp-chart-title-overview {
margin-bottom: 10px;
}
.index-chart-row {
margin-top: 30px;
align-items: stretch;
}
.index-chart-block {
margin-bottom: 1.5rem;
}
.index-chart-block:last-child {
margin-bottom: 0;
}
.index-radar-chart {
width: 100%;
height: 420px;
min-height: 300px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.55);
border-radius: 12px;
border: 1px solid #dde3f0;
box-shadow: 0 4px 18px rgba(54, 79, 199, 0.12), 0 1px 4px rgba(63, 70, 96, 0.08);
position: relative;
overflow: visible;
}
.index-radar-tip {
display: none;
position: absolute;
z-index: 6;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid #dde3f0;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(54, 79, 199, 0.14);
color: #3f4660;
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
pointer-events: none;
}
.fp-scroll-hint {
position: absolute;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
color: #364fc7;
font-size: 2rem;
line-height: 1;
opacity: 0.75;
animation: fp-bounce 2s infinite;
text-decoration: none;
z-index: 3;
}
.fp-scroll-hint:hover {
color: #2b3eb0;
opacity: 1;
text-decoration: none;
}
@keyframes fp-bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-8px); }
60% { transform: translateX(-50%) translateY(-4px); }
}
.fp-nav {
position: fixed;
right: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 10020;
pointer-events: none;
}
.fp-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.fp-nav li {
margin: 0;
line-height: 0;
}
.fp-nav a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
text-decoration: none;
pointer-events: auto;
color: #7b83a8;
transition: color 0.2s ease;
}
.fp-nav a:hover,
.fp-nav li.active a {
color: #364fc7;
}
.fp-nav-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid currentColor;
background: transparent;
box-sizing: border-box;
flex-shrink: 0;
transition: background 0.2s ease, transform 0.2s ease;
}
.fp-nav li.active .fp-nav-dot {
background: currentColor;
transform: scale(1.1);
}
.fp-nav-label {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: 600;
opacity: 0;
white-space: nowrap;
line-height: 1;
pointer-events: none;
transition: opacity 0.2s ease;
}
.fp-nav:hover .fp-nav-label,
.fp-nav li.active .fp-nav-label {
opacity: 1;
}
#fp-home #home {
position: relative;
z-index: 2;
}
@media (max-width: 991px) {
.fp-nav {
right: 10px;
}
.fp-nav-label {
display: none;
}
.fp-chart-title {
font-size: 20px;
font-weight: bold;
color: #364fc7;
margin-bottom: 1rem;
text-align: center;
}
.index-radar-chart {
height: 360px;
min-height: 280px;
}
.welcome-page-title {
font-size: 32px;
}
.features-page-text {
margin-bottom: 1.25rem;
}
.features-visual-modules {
padding-left: 0;
}
}
@media (max-width: 767px) {
.fp-section {
padding: calc(var(--header-height) + 1rem) 0 1.5rem;
}
#fp-home .col-md-8[style*="margin-left"] {
margin-left: 0 !important;
text-align: center !important;
}
}