project_screen_guangyuan.css 12 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. .gy-screen{--gy-bg:#2c3237;--gy-card:#343a40;--gy-line:#48515a;--gy-muted:#aab6c3;box-sizing:border-box;background:var(--gy-bg);color:#edf3fa;padding:16px;font-family:Arial,"Microsoft YaHei",sans-serif;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:auto}
  2. .gy-screen *{box-sizing:border-box}.gy-header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:0 6px 16px}.gy-brand{display:flex;align-items:center;gap:12px}.gy-mark{font-size:30px;color:#58b4ff}.gy-brand strong{font-size:19px;letter-spacing:1px}.gy-brand small{display:block;color:var(--gy-muted);margin-top:8px;font-size:12px}.gy-demo{margin-left:10px;color:#d9b878;border:1px solid #766342;padding:2px 7px;border-radius:3px}.gy-nav{display:flex;gap:12px}.gy-screen button{font:inherit;cursor:pointer}.gy-nav button,.gy-fullscreen{background:transparent;color:#c9d4df;border:1px solid #58616a;padding:9px 18px;border-radius:4px;white-space:nowrap;font-size:13px}.gy-nav button.active{background:#1977cf;border-color:#278bf0;color:white}.gy-nav button:disabled{opacity:.5;cursor:not-allowed}.gy-fullscreen:hover{border-color:#58b4ff;color:#58b4ff}.gy-screen button:focus-visible{outline:2px solid #73c6ff;outline-offset:3px}
  3. .gy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(230px,25vh) minmax(290px,31vh) minmax(260px,28vh);gap:12px}.gy-card{background:var(--gy-card);padding:18px;min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid #424a52;border-radius:4px}.gy-summary,.gy-investment,.gy-building{grid-column:span 2}.gy-progress{grid-column:span 3}.gy-title{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:25px;margin-bottom:14px}.gy-title h2{font-size:16px;font-weight:600;margin:0;padding-left:10px;border-left:3px solid #469eff;white-space:nowrap}.gy-title>span{font-size:11px;color:var(--gy-muted);white-space:nowrap}.gy-chart{flex:1;min-height:140px;width:100%}.gy-scroll{overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#626e7a transparent}.gy-scroll::-webkit-scrollbar{width:5px;height:5px}.gy-scroll::-webkit-scrollbar-thumb{background:#626e7a;border-radius:5px}.gy-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:1}.gy-stat{border-top:3px solid var(--accent);background:linear-gradient(160deg,var(--tint),#39424a);padding:20px 16px;border-radius:4px;display:flex;flex-direction:column;justify-content:center}.gy-stat span{font-size:15px}.gy-stat strong{font-size:38px;margin-top:14px;font-weight:500}.gy-stat small{font-size:12px;margin-left:7px;color:#c8d2dc}.gy-caption{font-size:11px;color:var(--gy-muted);margin-top:12px}.gy-rank{display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #46505a;font-size:12px}.gy-rank:last-child{border:0}.gy-rank-no{display:grid;place-items:center;background:#4b5660;width:23px;height:23px;border-radius:50%;font-size:11px}.gy-rank:nth-child(1) .gy-rank-no{background:#bf933d;color:#fff5d5}.gy-rank:nth-child(2) .gy-rank-no{background:#7e91a5}.gy-rank:nth-child(3) .gy-rank-no{background:#aa7955}.gy-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.gy-rank-value{font-variant-numeric:tabular-nums;color:#92caff}.gy-table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}.gy-table th{background:#3a536a;font-weight:400;color:#deebf8;padding:11px 9px;position:sticky;top:0;z-index:1;text-align:center}.gy-table td{padding:12px 9px;border-bottom:1px solid #48515a;text-align:right;font-variant-numeric:tabular-nums}.gy-table tbody tr:nth-child(even){background:#38414a}.gy-table th:nth-child(2),.gy-table td:nth-child(2){text-align:left}.gy-building .gy-table{table-layout:fixed;min-width:610px}.gy-building th:first-child{width:7%}.gy-building th:nth-child(2){width:34%}.gy-building th:nth-child(3),.gy-building th:nth-child(4){width:18%}.gy-building th:last-child{width:23%}.gy-meter-wrap{display:flex;align-items:center;gap:8px}.gy-meter{height:8px;background:#4b555f;flex:1;border-radius:10px;overflow:hidden}.gy-meter i{display:block;height:100%;border-radius:10px;background:#38bf82}.gy-meter-wrap span{width:42px;color:#75d8aa;font-size:11px}.gy-tabs{display:flex;gap:24px}.gy-tabs button{color:#b9c7d5;border:0;background:none;padding:0 0 7px;font-size:16px;border-bottom:2px solid transparent}.gy-tabs button.active{color:#67b7ff;border-bottom-color:#67b7ff}.gy-preview-table{min-width:1080px}.gy-preview-table th,.gy-preview-table td{border:1px solid #4a545e;text-align:center!important}.gy-preview-table thead tr:nth-child(2) th{top:35px}.gy-preview-table th:first-child{min-width:300px}.gy-preview-table td:first-child{text-align:left!important;max-width:300px}.gy-preview-table .gy-year td{background:#3b4650;color:#c6d6e6;padding:7px 12px}.gy-date{color:#67d6a2}.gy-event{display:flex;gap:16px;padding:13px 4px;border-bottom:1px solid #48515a;font-size:12px;line-height:1.7}.gy-event time{color:#8abbdf;flex-shrink:0}.gy-event strong{font-weight:400;color:#e6eff7}.gy-event small{display:block;color:#aebdcb}.gy-event-dot{color:#4dc894}.gy-message{font-size:12px;color:#edc785;text-align:right}.gy-screen:fullscreen,.gy-screen:-webkit-full-screen{width:100%;height:100vh;overflow:auto}.gy-screen:fullscreen .gy-grid{grid-template-rows:minmax(230px,25vh) minmax(290px,32vh) minmax(260px,29vh)}[hidden]{display:none!important}
  4. @media(min-width:1650px){.gy-title h2{font-size:18px}.gy-rank,.gy-table{font-size:13px}.gy-stat strong{font-size:44px}}
  5. @media(max-width:1200px){.gy-header{flex-wrap:wrap}.gy-nav{order:3;width:100%;justify-content:center}.gy-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.gy-card{min-height:270px}.gy-summary,.gy-progress,.gy-investment,.gy-building{grid-column:span 2}.gy-planned,.gy-finished{height:300px}.gy-ratio{height:300px}.gy-progress{height:330px}.gy-screen:fullscreen .gy-grid{grid-template-rows:auto}}
  6. @media(max-width:650px){.gy-screen{padding:10px}.gy-brand strong{font-size:15px}.gy-mark{display:none}.gy-nav{gap:5px}.gy-nav button{padding:8px 12px}.gy-grid{display:flex;flex-direction:column}.gy-card{padding:12px}.gy-stats{grid-template-columns:repeat(2,1fr)}.gy-stat{padding:14px}.gy-stat strong{font-size:30px}.gy-fullscreen{padding:8px}.gy-title h2{font-size:15px}}
  7. /* Fill the available screen; short windows scroll inside the dark container. */
  8. /* Keep both header rows together, without collapsed-border gaps during scrolling. */
  9. .gy-preview-table{border-collapse:separate;border-spacing:0;table-layout:fixed}
  10. .gy-preview-table th:first-child{min-width:0}
  11. .gy-preview-table thead tr:first-child th[rowspan]{width:300px}
  12. .gy-preview-table thead th{white-space:normal;overflow-wrap:break-word}
  13. .gy-preview-table thead{position:sticky;top:0;z-index:2;background:#3a536a}
  14. .gy-preview-table thead th{position:static}
  15. .gy-preview-table th,.gy-preview-table td{border:0;border-right:1px solid #4a545e;border-bottom:1px solid #4a545e}
  16. .gy-preview-table tr>*:first-child{border-left:1px solid #4a545e}
  17. .gy-preview-table thead tr:first-child th{border-top:1px solid #4a545e}
  18. .gy-header,.gy-message{flex-shrink:0}
  19. .gy-finished-page{display:grid;grid-template-rows:minmax(230px,1fr) minmax(550px,2.4fr);gap:12px;flex:1;min-height:804px}
  20. .gy-finished-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:12px;min-height:0}
  21. .gy-finished-detail{display:grid;grid-template-rows:minmax(230px,1fr) minmax(270px,1.2fr);gap:12px;min-width:0;min-height:0}
  22. @media(max-width:1000px){.gy-finished-page{flex:none;grid-template-rows:260px auto}.gy-finished-layout{grid-template-columns:1fr}.gy-finished-detail{grid-template-rows:auto 300px}}
  23. .gy-header-actions{display:flex;align-items:center;gap:12px}
  24. .gy-header-actions .project-screen-switcher>button{color:#c9d4df;border-color:#58616a;padding:9px 14px;font-size:13px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  25. .gy-header-actions .dropdown-menu{background:#343a40;border-color:#58616a;max-height:60vh;overflow:auto;min-width:180px;max-width:320px}
  26. .gy-header-actions .dropdown-item{color:#c9d4df;white-space:normal;overflow-wrap:anywhere}
  27. .gy-header-actions .dropdown-item:hover,.gy-header-actions .dropdown-item:focus{background:#40566b;color:#fff}
  28. .gy-header-actions .dropdown-item.active{background:#1977cf;color:#fff}
  29. .gy-change-table{min-width:760px;table-layout:fixed}
  30. .gy-change-table th{white-space:normal;text-align:center!important}
  31. .gy-change-table th:first-child{width:17%}
  32. .gy-change-table td{text-align:right!important}
  33. .gy-change-table td:first-child{text-align:left!important;white-space:normal}
  34. .gy-change-negative{color:#ffc16b}
  35. #gy-building-page .gy-planned-detail{grid-template-rows:minmax(210px,1fr) minmax(270px,1.2fr) minmax(260px,1fr)}
  36. @media(max-width:1000px){#gy-building-page .gy-planned-detail{grid-template-rows:auto 300px 300px}}
  37. .gy-stage-dialog .gy-table thead th{text-align:center!important}
  38. .gy-stage-dialog .gy-table tbody td{text-align:left!important}
  39. .gy-stage-dialog .gy-table tbody td:nth-child(2){text-align:center!important}
  40. .gy-planned-page{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:12px;flex:1;min-height:804px}
  41. .gy-planned-detail{display:grid;grid-template-rows:minmax(210px,1fr) minmax(270px,1.2fr) minmax(max-content,1fr);gap:12px;min-width:0;min-height:0}
  42. .gy-detail-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px;min-height:0}
  43. .gy-detail-text{font-size:14px;line-height:2;background:#303b47;padding:16px;overflow:auto;overflow-wrap:anywhere}
  44. .gy-detail-text strong{display:block;color:#84c4ff;margin-bottom:12px}
  45. .gy-list-heading{background:#3a536a;padding:12px;text-align:center;font-size:13px}
  46. .gy-folder-row{display:flex;align-items:center;gap:6px;padding:12px;color:#c4d4e5;background:#394550;border-bottom:1px solid #48515a}
  47. .gy-folder-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:inherit;padding:0;width:18px;height:20px;flex-shrink:0}
  48. .gy-project-row{display:flex;align-items:flex-start;gap:10px;width:100%;border:0;border-bottom:1px solid #48515a;border-left:3px solid transparent;text-align:left;background:transparent;color:#a1cfff;padding:15px 12px 15px 24px;line-height:1.7;font-size:14px!important}
  49. .gy-project-row:hover{background:#3a4856}.gy-project-row.active{background:#334e68;border-left-color:#3698ff;color:#fff}.gy-tree-branch{color:#7893aa}
  50. .gy-detail-button{background:transparent;border:1px solid #56718b;border-radius:4px;color:#8ac8ff;padding:5px 10px;font-size:12px!important}
  51. .gy-stage-table{table-layout:fixed}.gy-stage-table td,.gy-stage-table th{text-align:center!important}.gy-stage-table button{border:0;background:none;color:inherit;padding:4px 12px;text-decoration:underline;text-underline-offset:4px}.gy-status-0{color:#67d6a2}.gy-status-1{color:#ffc16b}.gy-status-2{color:#73baff}
  52. .gy-stage-dialog{width:min(900px,90vw);max-height:80vh;background:#343a40;color:#edf3fa;border:1px solid #627589;border-radius:6px;padding:22px}.gy-stage-dialog[open]{display:flex;flex-direction:column}.gy-stage-dialog::backdrop{background:#101820b8}.gy-stage-dialog p{color:#aab6c3}.gy-stage-dialog table{min-width:600px}.gy-empty{padding:24px;text-align:center;color:#aab6c3}
  53. @media(max-width:1000px){.gy-planned-page{grid-template-columns:1fr;flex:none}.gy-project-list{height:350px}.gy-planned-detail{grid-template-rows:auto 300px auto}.gy-detail-top{min-height:250px}}
  54. @media(max-width:650px){.gy-detail-top{grid-template-columns:1fr}.gy-detail-text{max-height:240px}}
  55. .gy-grid{flex:1 0 auto}
  56. .gy-screen button:focus:not(:focus-visible){outline:none;box-shadow:none}
  57. .gy-screen .gy-tabs button:focus-visible{outline:none;box-shadow:none;color:#9bd2ff;border-bottom-color:#9bd2ff;text-decoration:underline;text-underline-offset:4px}
  58. @media(min-width:1201px){
  59. .gy-screen .gy-grid{flex:1 0 804px;grid-template-rows:minmax(230px,25fr) minmax(290px,31fr) minmax(260px,28fr);min-height:804px}
  60. }