lollms-webui/web/src/themes/sober_gray.css

/* Flat Gray Theme */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --lollms-title: "LoLLMS";
  --falling-object: "";
  --activate-dropping-animation: 0;
  --lollms-welcome-short-message: "Welcome to LoLLMS";
  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
}

@layer base {
  html {
    @apply scroll-smooth;
  }
  body {
    font-family: 'Roboto', sans-serif;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.display-none {
  @apply hidden;
}

h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }
h2 { @apply text-3xl font-semibold text-gray-700 dark:text-gray-200 mb-4; }
h3 { @apply text-2xl font-medium text-gray-600 dark:text-gray-300 mb-3; }
h4 { @apply text-xl font-medium text-gray-500 dark:text-gray-400 mb-2; }

h1, h2 { @apply border-b border-gray-300 dark:border-gray-600 pb-2; }

p { @apply text-base text-gray-600 dark:text-gray-300 break-words; }
/* Base list styling */
ul, ol {
  @apply 
      my-4          /* Margin top and bottom */
      px-4          /* Horizontal padding */
      leading-7     /* Line height */
      text-base;    /* Text size */
}

/* Unordered lists */
ul {
  @apply 
      list-disc     /* Disc style bullets */
      ml-2          /* Left margin */
      space-y-2;    /* Vertical spacing */
}

/* List items */
li {
  @apply 
      pl-2         /* Padding left */
      relative;    /* Positioning */
}

/* Ordered lists */
ol {
  @apply 
      list-decimal  /* Numbered style */
      ml-2          /* Left margin */
      space-y-2;    /* Vertical spacing */
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
  @apply 
      mt-2         /* Top margin */
      mb-0         /* Bottom margin */
      ml-6;        /* Indentation */
}

/* For custom properties that aren't available in Tailwind, use regular CSS */
li::marker {
  color: #4B5563; /* gray-600 equivalent */
}


:root {
  --color-primary: #4a4a4a;
  --color-primary-light: #6a6a6a;
  --color-secondary: #8a8a8a;
  --color-accent: #3a3a3a;
  --color-light-text-panel: #ffffff;
  --color-dark-text-panel: #e0e0e0;
  --color-bg-light-panel: #f0f0f0;
  --color-bg-light: #ffffff;
  --color-bg-light-tone: #e0e0e0;
  --color-bg-light-code-block: #f5f5f5;
  --color-bg-light-tone-panel: #d0d0d0;
  --color-bg-light-discussion: #f8f8f8;
  --color-bg-light-discussion-odd: #f0f0f0;
  --color-bg-dark: #2a2a2a;
  --color-bg-dark-tone: #3a3a3a;
  --color-bg-dark-tone-panel: #4a4a4a;
  --color-bg-dark-code-block: #3a3a3a;
  --color-bg-dark-discussion: #333333;
  --color-bg-dark-discussion-odd: #2d2d2d;
}

textarea, input, select {
  @apply bg-gray-100 dark:bg-gray-800;
}

.background-color {
  @apply bg-gray-100 dark:bg-gray-900 min-h-screen;
}

.toolbar-color {
  @apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md;
}

.panels-color {
  @apply text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md;
}

.unicolor-panels-color {
  @apply bg-gray-200 dark:bg-gray-700;
}

.chatbox-color {
  @apply bg-gray-50 dark:bg-gray-800;
}

.message {
  @apply relative w-full rounded-lg m-2 shadow-md border border-gray-300 dark:border-gray-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
}

.message:hover {
  @apply border-gray-400 dark:border-gray-500;
}

.message {
  @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}

.message:nth-child(even) {
  @apply bg-gray-50 dark:bg-gray-800;
}

.message:nth-child(odd) {
  @apply bg-gray-100 dark:bg-gray-700;
}

.message-header {
  @apply text-xl font-semibold mb-2;
}

.message-content {
  @apply text-lg leading-relaxed;
}

body {
  @apply bg-gray-100 dark:bg-gray-900 min-h-screen text-base;
}

.discussion {
  @apply mr-2 bg-gray-200 dark:bg-gray-500 text-xs;
}

.discussion-hilighted {
  @apply bg-gray-300 dark:bg-gray-600 text-xs;
}

.bg-gradient-welcome {
  @apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
}

.bg-gradient-progress {
  @apply bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600;
}

.text-gradient-title {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-gray-700 to-gray-500 dark:from-gray-300 dark:to-gray-500;
}

.text-subtitle {
  @apply text-gray-600 dark:text-gray-400;
}

.text-author {
  @apply text-gray-500 dark:text-gray-400;
}

.text-loading {
  @apply text-gray-700 dark:text-gray-300;
}

.text-progress {
  @apply text-gray-600 dark:text-gray-400;
}

.btn-primary {
  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
}

.btn-secondary {
  @apply bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded;
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
}

.input {
  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400;
}

.label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

.link {
  @apply text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
}

.navbar-container {
  @apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded shadow-lg;
}

.game-menu {
  @apply flex justify-center items-center relative;
}

.text-shadow-custom {
  text-shadow: 1px 1px 0px #e0e0e0, -1px -1px 0px #e0e0e0, 1px -1px 0px #e0e0e0, -1px 1px 0px #e0e0e0;
}

.menu-item {
  @apply mb-2 px-4 py-2 text-gray-600 dark:text-gray-300 font-bold text-lg transition-all duration-300 ease-in-out;
  @apply hover:text-gray-800 hover:dark:text-gray-100 hover:transform hover:-translate-y-1;
}

.menu-item.active-link {
  @apply rounded-t-md border-gray-500 text-shadow-custom text-gray-800 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
  @apply hover:text-gray-900 hover:dark:text-gray-50 hover:transform hover:-translate-y-1;
  text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
}

.menu-item.active-link::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #4a4a4a, #8a8a8a, #4a4a4a);
  border-radius: 10px;
  animation: shimmer 2s infinite;
}

.dark .menu-item.active-link::before {
  background: linear-gradient(to right, #6a6a6a, #aaaaaa, #6a6a6a);
}

@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.feather-emoji {
  display: inline-block;
  margin-left: 5px;
  animation: bounce 2s infinite;
}

.app-card {
  @apply transition-all duration-300 ease-in-out bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 border rounded-xl shadow-lg p-6 hover:shadow-xl;
}

.app-card:hover {
  @apply transform -translate-y-1;
}

button {
  @apply transition-all duration-300 ease-in-out;
}

button:hover {
  @apply transform -translate-y-0.5;
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.gray.400') theme('colors.gray.200');
}

.dark .scrollbar-thin {
  scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
}

.scrollbar-thin::-webkit-scrollbar {
  @apply w-2;
}

.scrollbar-thin::-webkit-scrollbar-track {
  @apply bg-gray-200 dark:bg-gray-800 rounded-full;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-gray-500;
}

.btn {
  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
}

.btn-primary {
  @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-gray-600;
}

.search-input {
  @apply w-full border-b-2 border-gray-300 dark:border-gray-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 bg-transparent text-gray-800 dark:text-gray-100;
}

.scrollbar {
  @apply scrollbar-thin scrollbar-track-gray-200 scrollbar-thumb-gray-400 hover:scrollbar-thumb-gray-500 dark:scrollbar-track-gray-700 dark:scrollbar-thumb-gray-600 dark:hover:scrollbar-thumb-gray-500;
}

.card-title {
  @apply text-xl font-bold text-gray-800 dark:text-gray-100 mb-2;
}

.card-content {
  @apply text-gray-600 dark:text-gray-300;
}

.card-footer {
  @apply mt-4 flex justify-between items-center;
}

.card-footer-button {
  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
}

.subcard {
  @apply bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-4;
}

.subcard-title {
  @apply text-lg font-bold text-gray-800 dark:text-gray-100 mb-2;
}

.subcard-content {
  @apply text-gray-600 dark:text-gray-300;
}

.subcard-footer {
  @apply mt-4 flex justify-between items-center;
}

.subcard-footer-button {
  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
}

.interesting-facts{
  @apply mt-6 mb-6 p-4 bg-gray-200 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105 
}

.animated-progressbar-bg {
  @apply w-full h-12 relative overflow-hidden bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-full shadow-lg
}

.animated-progressbar-fg {
  @apply absolute top-0 left-0 h-full bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 transition-all duration-300
}


.discussion-toolbox{
  @apply flex gap-2 items-center bg-white dark:bg-gray-800 p-2 rounded-l-md shadow-md transform translate-x-full group-hover:translate-x-0 transition-transform duration-300
}


.lollms-title-style {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2), 
               2px 2px 0px #f3f4f6, 
               -2px -2px 0px #f3f4f6, 
               2px -2px 0px #f3f4f6, 
               -2px 2px 0px #f3f4f6;
  background: linear-gradient(45deg, #4b5563, #6b7280);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chat-bar {
  @apply relative text-gray-700 dark:text-gray-300 grow flex cursor-pointer select-none items-center gap-2 bg-gray-100 dark:bg-gray-800 p-1 shadow-sm hover:shadow-none dark:border-gray-700;
  height: 50px;
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, #f0f0f0, #e0e0e0);
}

.chat-bar:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.chat-bar-button{
  @apply text-gray-600 dark:text-gray-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500
}

.chat-bar-button:hover{
  @apply bg-gray-200/50 dark:bg-gray-700/50;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chat-bar-button:active{
  @apply bg-gray-300/70 dark:bg-gray-600/70;
}

.nav-button{
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-200/40 hover:text-gray-800 dark:hover:bg-gray-700/40 text-gray-600 dark:text-gray-400
}

.nav-button-active{
  @apply bg-gray-300 text-gray-900 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.svg-button{
  @apply text-gray-500 dark:text-gray-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
}

.svg-button:hover{
  @apply bg-gray-200/40 dark:bg-gray-700/40;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
}

.svg-button:active{
  @apply bg-gray-300/60 dark:bg-gray-600/60;
}

.nav-button{
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-200/40 dark:hover:bg-gray-700/40 text-gray-600 dark:text-gray-400
}

.nav-button-active{
  @apply bg-gray-300 text-gray-900 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.btn-on{
  @apply text-blue-600 dark:text-blue-400;
  text-shadow: 0 0 5px rgba(0, 0, 255, 0.2);
}

.btn-off{
  @apply text-gray-400 dark:text-gray-500;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.interesting-facts{
  @apply mt-6 mb-6 p-4 bg-gray-100/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105 border border-gray-300/30;
  background-image: linear-gradient(45deg, #f5f5f5, #e0e0e0);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.toolbar-button {
  @apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
}
  
.toolbar-button:hover {
  @apply text-blue-600;
  text-shadow: 0 0 5px rgba(0, 0, 255, 0.2);
}