Update style.css

style.css

@@ -1,28 +1,587 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+
+    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,200;0,400;0,800;1,200;1,400;1,800&display=swap');
+
+    @import url('https://fonts.googleapis.com/css2?family=Product+Sans&family=Google+Sans+Display:ital@0;1&family=Google+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Google+Sans+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Material+Symbols+Outlined&family=Space+Mono&display=swap');
+
+    @font-face {
+        font-family: 'Material Symbols Outlined';
+        font-style: normal;
+        font-weight: 400;
+        src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v154/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
+    }
+
+    .material-symbols-outlined {
+        font-family: 'Material Symbols Outlined';
+        font-weight: normal;
+        font-style: normal;
+        font-size: 1.5rem;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        display: inline-block;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        -webkit-font-feature-settings: 'liga';
+        font-feature-settings: "liga";
+        -webkit-font-smoothing: antialiased;
+
+    }
+
+    body {
+        font-family: 'Noto Sans', sans-serif;
+
+        margin: 0;
+    }
+
+    p {
+        margin: 0;
+        margin-bottom: 0.5rem;
+        padding: 0;
+        font-size: 1rem;
+    }
+
+    h1,
+    h2,
+    h3,
+    ol,
+    ul {
+        margin: 0;
+    }
+
+    h1 {
+        margin-bottom: 0.5rem;
+    }
+
+    a {
+        color: #3b82f6;
+    }
+
+    input,
+    textarea,
+    select {
+        border: 1px solid;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: none;
+        font-family: noto sans, sans-serif;
+        font-size: 1rem;
+    }
+
+    button:focus {
+        outline: none;
+    }
+
+    .form {
+        display: none;
+        opacity: 0;
+        flex-direction: column;
+        width: 32rem;
+        gap: 0.5rem;
+        flex-grow: 1;
+        justify-content: center;
+    }
+
+    .overlay {
+        flex-direction: column;
+        display: none;
+        position: fixed;
+        opacity: 0;
+        top: 0;
+        left: 0;
+        width: 100dvw;
+        height: 100dvh;
+        backdrop-filter: blur(2rem);
+        z-index: 2;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .backButton {
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+        border: none;
+        background-color: transparent;
+        font-size: 1.5rem;
+        font-weight: 600;
+        transition: all 0.2s;
+
+    }
+
+    #btn-hide-sidebar {
+        display: none;
+    }
+
+    .message-container {
+        display: flex;
+        flex-direction: column-reverse;
+        overflow-y: auto;
+        gap: 1rem;
+        padding-bottom: 2rem;
+        flex-grow: 1;
+    }
+
+    .message-box {
+        display: flex;
+        position: relative;
+    }
+
+    .message {
+
+        padding: 1rem;
+    }
+
+    .message-model {
+        border-radius: 1rem;
+    }
+
+    #messageInput {
+        height: 2.5rem;
+        box-sizing: border-box;
+        text-wrap: wrap;
+        resize: none;
+        width: 100%;
+        padding-right: 2rem;
+    }
+
+    #messageInput::-webkit-scrollbar {
+        height: 1rem;
+        width: 0.5rem;
+    }
+
+    .btn-textual {
+        background: transparent !important;
+        margin: 0;
+        padding: 0;
+        border: none;
+        transition: all 0.2s;
+        cursor: pointer;
+        font-size: inherit;
+    }
+
+
+
+    #btn-send {
+        position: absolute;
+        right: 0.5rem;
+        bottom: 0.5rem;
+        font-size: 1.5rem;
+    }
+
+    .btn-array {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        margin-top: 0.5rem;
+    }
+
+    .btn-array button {
+        flex-grow: 1;
+    }
+
+    .personality-prompt {
+        display: none;
+    }
+
+    .prompt-field {
+        resize: vertical;
+        height: 7rem;
+    }
+
+    .container {
+        box-sizing: border-box;
+        display: flex;
+        gap: 0.5rem;
+        padding: 1rem;
+
+
+        width: 100dvw;
+        height: 100dvh;
+
+    }
+
+    .sidebar {
+        position: sticky;
+        top: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        gap: 0.5rem;
+        padding: 1rem;
+        width: 25rem;
+        border-radius: 1rem;
+        scrollbar-width: thin;
+        height: calc(100dvh - 4rem);
+        z-index: 1;
+    }
+
+    .sidebar-section {
+        margin-bottom: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    #btn-show-sidebar {
+        display: none;
+    }
+
+    .header {
+        display: flex;
+
+        box-sizing: border-box;
+        align-items: center;
+        font-size: 2rem;
+        font-weight: 800;
+        gap: 0.5rem;
+        width: 100%;
+    }
+
+    .navbar {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        border-radius: 0.5rem;
+        justify-content: space-evenly;
+        margin-bottom: 1rem;
+        z-index: 0;
+    }
+
+    .navbar-tab {
+        width: 100%;
+        padding: 0.5rem;
+        text-align: center;
+
+        z-index: 2;
+        -webkit-tap-highlight-color: transparent;
+        cursor: pointer;
+
+    }
+
+
+
+    .navbar-tab-highlight {
+        padding: 0;
+        margin: 0;
+        position: absolute;
+        border-radius: 0.5rem;
+        transition: all 0.2s;
+        height: 100%;
+        z-index: 1;
+        /* glow */
+        box-shadow: 0 0 1rem 0.05rem #29292a3f;
+    }
+
+    #gemini-pro-branding {
+        font-family: Google Sans Display, sans-serif;
+        color: #7c8a9c;
+        font-size: 1rem;
+        font-weight: 400;
+    }
+
+    #gemin-pro-logo {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    .credits {
+        margin-top: auto;
+        display: flex;
+        padding: 0rem 1rem 0 1rem;
+
+        font-size: 0.75rem;
+        color: #7c8a9c;
+
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    button {
+        border: none;
+        background-color: #3b82f6;
+        color: white;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        transition: all 0.2s;
+    }
+
+    #mainContent {
+        display: flex;
+        flex-direction: column;
+        padding: 2rem;
+        margin-left: auto;
+        margin-right: auto;
+        width: 32rem;
+        text-align: justify;
+    }
+
+    .card-personality {
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        color: #e4e4e4;
+        background-color: black;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: end;
+        padding: 1rem;
+        border-radius: 1rem;
+        height: 10rem;
+        -webkit-tap-highlight-color: transparent;
+        cursor: pointer;
+        text-shadow: 0 0 10px #000000, 0 0 5px #181818;
+    }
+
+    .edit:hover {
+        text-shadow: 0 0 10px #e4e4e4, 0 0 5px #dfdfdf;
+    }
+
+
+    .card-personality * {
+        /* unselectable */
+        -webkit-user-select: none;
+        /* Safari */
+        -moz-user-select: none;
+        /* Firefox */
+        -ms-user-select: none;
+        /* IE10+/Edge */
+        user-select: none;
+        /* Standard */
+
+    }
+
+    .card-personality input {
+        display: none;
+    }
+
+    .btn-edit-card {
+        /* top right corner */
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        color: #e4e4e4;
+    }
+
+    .btn-share-card {
+        /* bottom right corner */
+        position: absolute;
+        top: 1rem;
+        right: 2.5rem;
+        font-size: 1rem;
+        color: #e4e4e4;
+    }
+
+    #btn-hide-overlay {
+        padding: 2rem;
+    }
+
+
+
+
+    @media (max-width: 768px) {
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+
+        .container {
+            padding: 0;
+
+        }
+
+        .message-container {
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+
+        .sidebar {
+            top: 0;
+            height: calc(100dvh - 2rem);
+            margin: 0;
+            width: calc(100dvw - 2rem);
+            position: fixed;
+            border-radius: 0;
+            display: none;
+        }
+
+        .navbar {
+            position: relative;
+        }
+
+
+        #btn-hide-sidebar {
+            display: block;
+        }
+
+        #mainContent {
+            padding: 0;
+            margin: 0;
+            width: 100%;
+        }
+
+        #mainContent .header {
+            padding: 2rem;
+        }
+
+        #messageInput {
+            border-radius: 0;
+        }
+
+        #btn-show-sidebar {
+            display: block;
+        }
+    }
+
+
+    /* Light theme styles */
+    @media (prefers-color-scheme: light) {
+        :focus {
+            outline: 1px solid #8f9eb3;
+        }
+
+        body {
+            background-color: #f0f6ff;
+            color: #0a0a0a;
+        }
+
+        a {
+            color: #444ed6;
+        }
+
+        .sidebar {
+            background-color: #d2e2f7;
+        }
+
+        .navbar {
+            background-color: rgb(176 205 246);
+        }
+
+        .navbar-tab {
+            color: #0a0a0a;
+        }
+
+        .navbar-tab-highlight {
+            background-color: #87b0ed;
+        }
+
+        .btn-textual:hover {
+            text-shadow: 0 0 10px #000000;
+        }
+
+        button {
+            background-color: #83b5f7;
+
+            color: #2b3d59;
+        }
+
+        button:hover {
+            background-color: rgb(63, 191, 255);
+        }
+
+
+        input,
+        textarea,
+        select {
+            background-color: #f0f6ff;
+            outline: 1px solid #8f9eb3;
+        }
+
+        input::placeholder,
+        textarea::placeholder {
+            color: #7c8a9c;
+        }
+
+        .message-model {
+            background-color: #d2e2f7;
+        }
+    }
+
+    /* Dark theme styles */
+    @media (prefers-color-scheme: dark) {
+        :root {
+            color-scheme: dark;
+        }
+
+        :focus {
+            outline: 1px solid #73859e;
+        }
+
+
+
+        body {
+            background-color: #151e24;
+            color: #e4e4e4;
+        }
+
+        a {
+            color: #92d9eb;
+        }
+
+
+
+        .sidebar {
+            background-color: #1a2733;
+        }
+
+        .navbar {
+            background-color: #00000047;
+        }
+
+        .navbar-tab {
+            color: #e4e4e4;
+        }
+
+        .navbar-tab-highlight {
+            background-color: #22486b;
+
+            box-shadow: 0 0 1rem 0.05rem #29292aac;
+        }
+
+        button {
+            background-color: #22486b;
+            color: #c9d3ee;
+        }
+
+        button:hover {
+            background-color: #31689c;
+        }
+
+        .btn-textual {
+            color: #e4e4e4;
+        }
+
+        .btn-textual:hover {
+            text-shadow: 0 0 10px #ffffff, 0 0 5px #dfdfdf;
+        }
+
+        .edit:hover {
+            text-shadow: 0 0 10px #ffffff, 0 0 5px #dfdfdf;
+            /* Change #00ff00 to the color you want */
+        }
+
+        input,
+        textarea,
+        select {
+            background-color: #283542;
+
+            color: #e4e4e4;
+            border: none;
+        }
+
+        input::placeholder,
+        textarea::placeholder {
+            color: #849caf;
+        }
+
+
+        .message-model {
+            background-color: #1a2733;
+        }
+    }