diff --git a/css/style.css b/css/style.css index f988c33..e7e21c9 100644 --- a/css/style.css +++ b/css/style.css @@ -31,6 +31,7 @@ body { padding: 0px; margin: 0px; } + .cont { color: white; } @@ -57,8 +58,6 @@ body { top: 97px; left: 0px; width: 370px; - /* min-width: 370px; */ - /* width: 20%; */ } .right { @@ -69,8 +68,6 @@ body { top: 97px; right: 0px; width: 370px; - /* min-width: 370px; */ - /* width: 20%; */ } .toggle2 { @@ -121,8 +118,6 @@ body { color: white; } - - .times { position: absolute; /* opacity: 0; */ @@ -396,7 +391,7 @@ body { .select-selected:after { content: "▼"; - font-size: 0.75rem; + font-size: 0.75rem;; color: #6c757d; } @@ -477,17 +472,17 @@ body { } .carmsg p{ font-size: 0.875rem; - color: #666; - margin-bottom: 4px; + line-height: 35px; background: linear-gradient(to bottom, #fff, rgb(6 244 255)); -webkit-background-clip: text; background-clip: text; + color: transparent; } .cartitle{ padding-top: 20px; height:85px; text-align: center; - font-size: 1rem; + font-size: 1.0625rem; font-weight: bold; background: linear-gradient(to bottom, #fff, rgb(6 244 255)); -webkit-background-clip: text; @@ -495,8 +490,6 @@ body { color: transparent; } - - .toggle-btn { font-size: 0.875rem; display: inline-block; @@ -558,6 +551,7 @@ body { align-items: center; font-size: 0.75rem; padding: 5px 5px; + background: linear-gradient(to bottom, #1487ea, #0a43bc); color: #fff; border: none; border-radius: 4px; @@ -619,13 +613,16 @@ body { } .modal-title { + flex: 1; + text-align: center; font-size: 1.25rem; font-weight: bold; - color: #333; - margin: 0; + /* background: linear-gradient(to bottom, #fff, rgb(6 244 255)); */ + /* -webkit-background-clip: text; */ + /* background-clip: text; */ + /* color: transparent; */ } - .modal-tabs { display: flex; gap: 10px; @@ -693,7 +690,6 @@ body { width: 100%; border-collapse: collapse; font-size: 0.875rem; - /* font-size: clamp(10px, 1vw, 26px); */ } .modal-table thead { @@ -762,10 +758,12 @@ body { } .ship-header h3 { - font-size: 1.125rem; - font-weight: bold; margin: 0; - color: #333; + font-size: 1.125rem; + background: linear-gradient(to bottom, #fff, rgb(6 244 255)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; } .ship-status { @@ -777,9 +775,9 @@ body { } .ship-details { + font-size: clamp(0.75rem, 1vw, 1.875rem); display: grid; gap: 10px; - font-size: clamp(0.75rem, 1vw, 1.875rem); } .detail-item { @@ -791,12 +789,12 @@ body { .detail-item .label { font-size: 0.875rem; - color: #666; + color: rgba(255, 255, 255, 0.7); } .detail-item .value { font-size: 0.875rem; - color: #333; + color: #fff; font-weight: 500; } @@ -865,9 +863,14 @@ body { } .route-time { - font-size: 0.75rem; - color: #666; - margin-bottom: 4px; + font-size: 0.875rem; + width: 120px; + padding-right: 20px; + text-align: right; + color: #06f4ff; + font-weight: 500; + text-shadow: 0 0 10px rgba(6, 244, 255, 0.3); + transition: all 0.3s ease; } .route-item:hover .route-time { @@ -914,21 +917,33 @@ body { } .route-title { - font-size: 0.875rem; - font-weight: 500; - color: #333; - margin-bottom: 4px; + font-size: 1.125rem; + font-weight: bold; + margin-bottom: 10px; + background: linear-gradient(to bottom, #fff, rgb(6 244 255)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + transition: all 0.3s ease; } .route-desc { - font-size: 0.75rem; - color: #666; - margin-bottom: 4px; + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 12px; + line-height: 1.5; } .route-status { font-size: 0.75rem; - color: #666; + display: inline-block; + padding: 6px 12px; + background: linear-gradient(45deg, #06f4ff, #00c6ff); + color: #142c64; + border-radius: 20px; + font-weight: 500; + box-shadow: 0 2px 8px rgba(6, 244, 255, 0.3); + transition: all 0.3s ease; } .route-item:hover .route-status { @@ -1125,7 +1140,7 @@ body { } .infotimes{ display: flex; - margin-top: 25px; + margin-top: 10px; } .infotimes div{ width: 49%;