diff --git a/Tmt.SaqaTravel/Components/Layout/MainLayout.razor b/Tmt.SaqaTravel/Components/Layout/MainLayout.razor index 6d6fa02..45d5cc5 100644 --- a/Tmt.SaqaTravel/Components/Layout/MainLayout.razor +++ b/Tmt.SaqaTravel/Components/Layout/MainLayout.razor @@ -1,17 +1,78 @@ @inherits LayoutComponentBase -
- -
+
+ +
+
-
- About -
+ +
-
+ + + + +
+ + + + + + + + + + + + +
+ + + +
+
+ +
@Body
diff --git a/Tmt.SaqaTravel/Components/Layout/NavMenu.razor b/Tmt.SaqaTravel/Components/Layout/NavMenu.razor index bbba459..20249c7 100644 --- a/Tmt.SaqaTravel/Components/Layout/NavMenu.razor +++ b/Tmt.SaqaTravel/Components/Layout/NavMenu.razor @@ -66,14 +66,6 @@ Booking - - - - - - Trip Reports - - @@ -98,14 +90,6 @@ Visa - - - - - - Mobile - - @@ -122,13 +106,5 @@ VAS - - - - - - GDS Sync - -
\ No newline at end of file diff --git a/Tmt.SaqaTravel/wwwroot/app.min.css b/Tmt.SaqaTravel/wwwroot/app.min.css index 06266e4..e23d7f4 100644 --- a/Tmt.SaqaTravel/wwwroot/app.min.css +++ b/Tmt.SaqaTravel/wwwroot/app.min.css @@ -8,6 +8,8 @@ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-600: oklch(57.7% 0.245 27.325); + --color-green-600: oklch(62.7% 0.194 149.214); + --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); @@ -26,6 +28,8 @@ --color-black: #000; --color-white: #fff; --spacing: 0.25rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-lg: 1.125rem; @@ -245,6 +249,9 @@ .m-0 { margin: 0; } + .mx-1 { + margin-inline: var(--spacing); + } .mx-auto { margin-inline: auto; } @@ -269,12 +276,18 @@ .mb-6 { margin-bottom: calc(var(--spacing) * 6); } + .ml-auto { + margin-left: auto; + } .flex { display: flex; } .hidden { display: none; } + .h-3 { + height: calc(var(--spacing) * 3); + } .h-5 { height: calc(var(--spacing) * 5); } @@ -287,18 +300,12 @@ .h-10 { height: calc(var(--spacing) * 10); } - .h-12 { - height: calc(var(--spacing) * 12); - } - .h-14 { - height: calc(var(--spacing) * 14); + .h-16 { + height: calc(var(--spacing) * 16); } .h-20 { height: calc(var(--spacing) * 20); } - .min-h-\[3\.5rem\] { - min-height: 3.5rem; - } .min-h-\[4\.5rem\] { min-height: 4.5rem; } @@ -308,9 +315,6 @@ .w-5 { width: calc(var(--spacing) * 5); } - .w-6 { - width: calc(var(--spacing) * 6); - } .w-8 { width: calc(var(--spacing) * 8); } @@ -326,6 +330,9 @@ .w-full { width: 100%; } + .w-px { + width: 1px; + } .min-w-full { min-width: 100%; } @@ -359,6 +366,12 @@ .justify-between { justify-content: space-between; } + .justify-center { + justify-content: center; + } + .gap-0\.5 { + gap: calc(var(--spacing) * 0.5); + } .gap-2 { gap: calc(var(--spacing) * 2); } @@ -368,6 +381,9 @@ .gap-4 { gap: calc(var(--spacing) * 4); } + .gap-6 { + gap: calc(var(--spacing) * 6); + } .space-y-1 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -389,9 +405,6 @@ border-color: var(--color-gray-200); } } - .overflow-hidden { - overflow: hidden; - } .overflow-x-auto { overflow-x: auto; } @@ -427,8 +440,11 @@ .border-\[\#0087ff\] { border-color: #0087ff; } - .border-\[\#d6d5d5\] { - border-color: #d6d5d5; + .border-gray-100 { + border-color: var(--color-gray-100); + } + .border-gray-200 { + border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); @@ -445,9 +461,6 @@ .bg-\[\#6b9ed2\] { background-color: #6b9ed2; } - .bg-\[\#f7f7f7\] { - background-color: #f7f7f7; - } .bg-\[\#ffffe0\] { background-color: #ffffe0; } @@ -457,21 +470,24 @@ background-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } - .bg-black\/40 { - background-color: color-mix(in srgb, #000 40%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-black) 40%, transparent); - } - } .bg-blue-600 { background-color: var(--color-blue-600); } .bg-gray-50 { background-color: var(--color-gray-50); } + .bg-gray-50\/50 { + background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent); + } + } .bg-gray-100 { background-color: var(--color-gray-100); } + .bg-gray-300 { + background-color: var(--color-gray-300); + } .bg-white { background-color: var(--color-white); } @@ -494,10 +510,6 @@ --tw-gradient-from: var(--color-blue-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .to-\[\#3a0647\] { - --tw-gradient-to: #3a0647; - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } .to-\[\#020f26\] { --tw-gradient-to: #020f26; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -518,6 +530,9 @@ .bg-no-repeat { background-repeat: no-repeat; } + .p-2 { + padding: calc(var(--spacing) * 2); + } .p-3 { padding: calc(var(--spacing) * 3); } @@ -557,14 +572,14 @@ .py-5 { padding-block: calc(var(--spacing) * 5); } - .pt-4 { - padding-top: calc(var(--spacing) * 4); + .py-6 { + padding-block: calc(var(--spacing) * 6); } - .pb-2 { - padding-bottom: calc(var(--spacing) * 2); + .pr-1 { + padding-right: var(--spacing); } - .pb-4 { - padding-bottom: calc(var(--spacing) * 4); + .pl-2 { + padding-left: calc(var(--spacing) * 2); } .text-center { text-align: center; @@ -588,18 +603,13 @@ font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } - .text-\[0\.9rem\] { - font-size: 0.9rem; + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[0\.65rem\] { font-size: 0.65rem; } - .text-\[1\.1rem\] { - font-size: 1.1rem; - } - .text-\[1\.15rem\] { - font-size: 1.15rem; - } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); @@ -632,15 +642,9 @@ --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } - .text-ellipsis { - text-overflow: ellipsis; - } .whitespace-nowrap { white-space: nowrap; } - .text-\[\#d7d7d7\] { - color: #d7d7d7; - } .text-blue-300 { color: var(--color-blue-300); } @@ -671,6 +675,9 @@ .text-gray-900 { color: var(--color-gray-900); } + .text-green-600 { + color: var(--color-green-600); + } .text-red-600 { color: var(--color-red-600); } @@ -699,6 +706,10 @@ --tw-shadow: 0 -1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-inner { + --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -817,14 +828,6 @@ } } } - .checked\:bg-white\/50 { - &:checked { - background-color: color-mix(in srgb, #fff 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-white) 50%, transparent); - } - } - } .hover\:bg-\[\#3b6ea2\] { &:hover { @media (hover: hover) { @@ -832,6 +835,13 @@ } } } + .hover\:bg-blue-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-50); + } + } + } .hover\:bg-blue-700 { &:hover { @media (hover: hover) { @@ -846,6 +856,13 @@ } } } + .hover\:bg-gray-100 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-100); + } + } + } .hover\:bg-white\/10 { &:hover { @media (hover: hover) { @@ -856,6 +873,13 @@ } } } + .hover\:text-blue-600 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-600); + } + } + } .hover\:text-white { &:hover { @media (hover: hover) { @@ -863,13 +887,6 @@ } } } - .hover\:underline { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - } .active\:bg-\[\#6b9ed2\] { &:active { background-color: #6b9ed2; @@ -885,9 +902,9 @@ top: 0; } } - .sm\:ml-6 { + .sm\:mx-2 { @media (width >= 40rem) { - margin-left: calc(var(--spacing) * 6); + margin-inline: calc(var(--spacing) * 2); } } .sm\:block { @@ -900,11 +917,6 @@ display: none; } } - .sm\:h-\[calc\(100vh-3\.5rem\)\] { - @media (width >= 40rem) { - height: calc(100vh - 3.5rem); - } - } .sm\:h-\[calc\(100vh-4\.5rem\)\] { @media (width >= 40rem) { height: calc(100vh - 4.5rem); @@ -925,9 +937,9 @@ flex-direction: row; } } - .sm\:justify-end { + .sm\:gap-4 { @media (width >= 40rem) { - justify-content: flex-end; + gap: calc(var(--spacing) * 4); } } .sm\:overflow-y-auto { @@ -935,11 +947,21 @@ overflow-y: auto; } } + .sm\:px-6 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 6); + } + } .sm\:px-8 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 8); } } + .lg\:flex { + @media (width >= 64rem) { + display: flex; + } + } .\[\&\.active\]\:border-blue-400 { &.active { border-color: var(--color-blue-400); @@ -953,14 +975,6 @@ } } } - .\[\&\.active\]\:bg-white\/\[0\.37\] { - &.active { - background-color: color-mix(in srgb, #fff 37%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-white) 37%, transparent); - } - } - } .\[\&\.active\]\:text-white { &.active { color: var(--color-white);