360 lines
8.9 KiB
CSS
360 lines
8.9 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--glm-blue: #4F758B;
|
|
--glm-blue-mid: #5B7F95;
|
|
--glm-steel: #6B8FA3;
|
|
--glm-green: #6CC24A;
|
|
--glm-green-soft: #EEF6E8;
|
|
--glm-blue-soft: #D6E8F4;
|
|
--glm-text: #4A4A4A;
|
|
--glm-border: #D0D0D0;
|
|
--glm-page: #F7FAF8;
|
|
}
|
|
|
|
html {
|
|
min-height: 100%;
|
|
overflow-y: scroll;
|
|
background: var(--glm-page);
|
|
}
|
|
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--glm-page);
|
|
font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
/* GLM light skin: keeps all behavior intact and only remaps the previous dark UI colors. */
|
|
.glm-app .border-white\/10,
|
|
.glm-app .border-white\/5,
|
|
.glm-app .border-indigo-400\/20,
|
|
.glm-app .border-indigo-400\/25,
|
|
.glm-app .border-indigo-400\/30,
|
|
.glm-app .border-indigo-300\/25 {
|
|
border-color: rgba(208, 208, 208, 0.72) !important;
|
|
}
|
|
|
|
.glm-app .bg-black\/10,
|
|
.glm-app .bg-black\/20,
|
|
.glm-app .bg-black\/25,
|
|
.glm-app .bg-white\/5,
|
|
.glm-app .bg-white\/10,
|
|
.glm-app .bg-white\/\[0\.03\],
|
|
.glm-app .bg-white\/\[0\.04\] {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.glm-app .bg-black\/30,
|
|
.glm-app .bg-black\/35,
|
|
.glm-app .bg-black\/40,
|
|
.glm-app .bg-black\/50 {
|
|
background-color: #F9FBFC !important;
|
|
}
|
|
|
|
.glm-app .text-zinc-100,
|
|
.glm-app .text-zinc-200,
|
|
.glm-app .text-zinc-300 {
|
|
color: var(--glm-text) !important;
|
|
}
|
|
|
|
.glm-app .text-zinc-400,
|
|
.glm-app .text-zinc-500,
|
|
.glm-app .text-zinc-600 {
|
|
color: var(--glm-steel) !important;
|
|
}
|
|
|
|
.glm-app .text-white,
|
|
.glm-app .text-white\/80,
|
|
.glm-app .text-white\/90,
|
|
.glm-app .text-indigo-100,
|
|
.glm-app .text-indigo-100\/80,
|
|
.glm-app .text-indigo-200 {
|
|
color: var(--glm-blue) !important;
|
|
}
|
|
|
|
.glm-app .text-indigo-300,
|
|
.glm-app .text-indigo-400,
|
|
.glm-app .text-emerald-300,
|
|
.glm-app .text-emerald-400 {
|
|
color: var(--glm-green) !important;
|
|
}
|
|
|
|
.glm-app .text-amber-300 {
|
|
color: #FF8C00 !important;
|
|
}
|
|
|
|
.glm-app [class*="bg-[linear-gradient(135deg,#6366f1"],
|
|
.glm-app [class*="bg-[linear-gradient(135deg,rgba(79,70,229"],
|
|
.glm-app [class*="bg-[linear-gradient(135deg,#6366f1_0%,#2563eb_50%,#06b6d4"],
|
|
.glm-app [class*="bg-[linear-gradient(135deg,#6366f1_0%,#2563eb_100%"] {
|
|
background: var(--glm-blue) !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 16px 34px rgba(79, 117, 139, 0.2) !important;
|
|
}
|
|
|
|
.glm-app [class*="bg-[linear-gradient(135deg,#6366f1"] *,
|
|
.glm-app [class*="bg-[linear-gradient(135deg,rgba(79,70,229"] *,
|
|
.glm-app [class*="bg-[linear-gradient(135deg,#6366f1_0%,#2563eb_50%,#06b6d4"] *,
|
|
.glm-app [class*="bg-[linear-gradient(135deg,#6366f1_0%,#2563eb_100%"] * {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.glm-app [class*="bg-[linear-gradient(90deg,#6366f1"] {
|
|
background: linear-gradient(90deg, var(--glm-green) 0%, var(--glm-blue) 100%) !important;
|
|
}
|
|
|
|
.glm-app [class*="bg-[linear-gradient(180deg,rgba(99,102,241"],
|
|
.glm-app [class*="bg-[linear-gradient(145deg,rgba(99,102,241"] {
|
|
background: #F8FBF6 !important;
|
|
border-color: rgba(108, 194, 74, 0.38) !important;
|
|
box-shadow: 0 14px 34px rgba(108, 194, 74, 0.12) !important;
|
|
}
|
|
|
|
.glm-app [class*="bg-indigo-500/10"],
|
|
.glm-app .bg-indigo-500\/10,
|
|
.glm-app .bg-emerald-500\/10,
|
|
.glm-app .bg-emerald-500\/15 {
|
|
background-color: var(--glm-green-soft) !important;
|
|
}
|
|
|
|
.glm-app .bg-indigo-300,
|
|
.glm-app .bg-indigo-400,
|
|
.glm-app .bg-emerald-400 {
|
|
background-color: var(--glm-green) !important;
|
|
}
|
|
|
|
.glm-app .bg-zinc-600 {
|
|
background-color: var(--glm-border) !important;
|
|
}
|
|
|
|
.glm-app [class*="min-h-[178px]"] {
|
|
min-height: 132px !important;
|
|
}
|
|
|
|
.glm-app [class*="shadow-[0_28px_80px"],
|
|
.glm-app [class*="shadow-[0_24px_60px"],
|
|
.glm-app [class*="shadow-[0_30px_80px"],
|
|
.glm-app [class*="shadow-[0_16px_40px"] {
|
|
box-shadow: 0 18px 50px rgba(79, 117, 139, 0.11) !important;
|
|
}
|
|
|
|
.glm-app .prose-invert {
|
|
--tw-prose-body: var(--glm-text);
|
|
--tw-prose-headings: var(--glm-blue);
|
|
--tw-prose-lead: var(--glm-text);
|
|
--tw-prose-links: var(--glm-blue);
|
|
--tw-prose-bold: var(--glm-blue);
|
|
--tw-prose-counters: var(--glm-steel);
|
|
--tw-prose-bullets: var(--glm-green);
|
|
--tw-prose-hr: var(--glm-border);
|
|
--tw-prose-quotes: var(--glm-blue);
|
|
--tw-prose-quote-borders: var(--glm-green);
|
|
--tw-prose-captions: var(--glm-steel);
|
|
--tw-prose-code: var(--glm-blue);
|
|
--tw-prose-pre-code: var(--glm-text);
|
|
--tw-prose-pre-bg: #F9FBFC;
|
|
--tw-prose-th-borders: var(--glm-border);
|
|
--tw-prose-td-borders: var(--glm-border);
|
|
}
|
|
|
|
.glm-app .prose pre {
|
|
border: 1px solid rgba(208, 208, 208, 0.7) !important;
|
|
background: #F9FBFC !important;
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: rgba(79, 117, 139, 0.22);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(79, 117, 139, 0.36);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.audio-preview-range,
|
|
.message-audio-range {
|
|
height: 20px;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.audio-preview-range::-webkit-slider-runnable-track,
|
|
.message-audio-range::-webkit-slider-runnable-track {
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: rgba(108, 194, 74, 0.18);
|
|
}
|
|
|
|
.audio-preview-range::-webkit-slider-thumb,
|
|
.message-audio-range::-webkit-slider-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: -5px;
|
|
border: 3px solid #ffffff;
|
|
border-radius: 999px;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: var(--glm-green);
|
|
box-shadow: 0 0 0 5px rgba(108, 194, 74, 0.16), 0 8px 18px rgba(79, 117, 139, 0.18);
|
|
}
|
|
|
|
.audio-preview-range::-moz-range-track,
|
|
.message-audio-range::-moz-range-track {
|
|
height: 6px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: rgba(108, 194, 74, 0.18);
|
|
}
|
|
|
|
.audio-preview-range::-moz-range-thumb,
|
|
.message-audio-range::-moz-range-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 3px solid #ffffff;
|
|
border-radius: 999px;
|
|
background: var(--glm-green);
|
|
box-shadow: 0 0 0 5px rgba(108, 194, 74, 0.16), 0 8px 18px rgba(79, 117, 139, 0.18);
|
|
}
|
|
}
|
|
|
|
.glm-app [class*="bg-[linear-gradient(135deg,rgba(99,102,241"] {
|
|
background: var(--glm-green-soft) !important;
|
|
border-color: rgba(108, 194, 74, 0.36) !important;
|
|
box-shadow: 0 16px 38px rgba(108, 194, 74, 0.12) !important;
|
|
}
|
|
|
|
/* Redesign Premium Utilities */
|
|
.premium-grid-bg {
|
|
background-image:
|
|
linear-gradient(to right, rgba(108, 194, 74, 0.06) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(108, 194, 74, 0.06) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
|
|
-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.shimmer-btn {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shimmer-btn::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
transform: translateX(-100%);
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 0.22) 30%,
|
|
rgba(255, 255, 255, 0.35) 50%,
|
|
rgba(255, 255, 255, 0.22) 70%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
animation: shimmer 3s infinite ease-in-out;
|
|
content: '';
|
|
}
|
|
|
|
/* Keep the audio preview play/pause glyph visible after the GLM light-skin color remap. */
|
|
.glm-app .glm-audio-preview-toggle svg {
|
|
color: #ffffff !important;
|
|
stroke: #ffffff !important;
|
|
}
|
|
|
|
.glm-app .glm-audio-preview-toggle svg.fill-current {
|
|
fill: #ffffff !important;
|
|
}
|
|
/* Keep the final review submit button readable against the GLM blue background. */
|
|
.glm-app .glm-submit-final,
|
|
.glm-app .glm-submit-final * {
|
|
color: #ffffff !important;
|
|
stroke: #ffffff !important;
|
|
}
|
|
|
|
.glm-app .glm-submit-final svg.fill-current {
|
|
fill: #ffffff !important;
|
|
}
|
|
|
|
|
|
/* Response portal attachment polish: keep uploaded files compact and readable inside the GLM message bubble. */
|
|
.glm-app .glm-message-attachment,
|
|
.glm-app .glm-message-attachment * {
|
|
color: #4A4A4A !important;
|
|
}
|
|
|
|
.glm-app .glm-message-attachment p:first-of-type {
|
|
color: #2E4052 !important;
|
|
}
|
|
|
|
.glm-app .glm-message-attachment p:not(:first-of-type) {
|
|
color: #6B8FA3 !important;
|
|
}
|
|
|
|
.glm-app .glm-message-attachment svg {
|
|
color: #4F758B !important;
|
|
stroke: #4F758B !important;
|
|
}
|
|
|
|
.glm-app .glm-message-audio span:first-of-type {
|
|
color: #4F758B !important;
|
|
}
|
|
|
|
.glm-app .glm-message-audio span:last-of-type {
|
|
color: #6B8FA3 !important;
|
|
}
|
|
|
|
.glm-app .glm-message-audio-toggle,
|
|
.glm-app .glm-message-audio-toggle * {
|
|
color: #ffffff !important;
|
|
fill: #ffffff !important;
|
|
stroke: #ffffff !important;
|
|
}
|