Text sizing correction.

9b3552631a045342390d9435346b8ce0a3a8ee83

DarokCx <77368869+DarokCx@users.noreply.github.com>

Parents: 09035a71dc16b3d503fde448fd9cb954e99f2db5

public/style.css+38 -49 Viewed

 #user_avatar_block {
     display: flex;
-    flex-wrap: wrap;  /* Ensures cards go to the next row if there's not enough space */
+    flex-wrap: wrap;
-    gap: 10px;  /* Adds space between cards */
+    gap: 10px;
+}
 /* Main structure for the model cards */
 .model-card {
     display: flex;
-    justify-content: space-between;  /* Align the title and details across the card */
+    justify-content: space-between;
-    align-items: center;  /* Center align the items vertically */
+    align-items: center;
-    padding: 15px;  /* Padding around the content */
+    padding: 15px;
-    border: 1px solid #333;  /* Border for the card */
+    border: 1px solid #333;
-    border-radius: 8px;  /* Rounded corners for the card */
+    border-radius: 8px;
-    background-color: #222;  /* Card background color */
+    background-color: #222;
-    color: #fff;  /* Text color */
+    color: #fff;
-    margin: 7px;  /* Space between cards */
+    margin: 7px;
-    width: calc(100% - 7px);  /* Full width minus margin */
+    width: calc(100% - 7px);
-    box-sizing: border-box;  /* Include padding and border in the width */
+    box-sizing: border-box;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
+}
 .model-card:hover {
-    transform: scale(1.02);  /* Grow the card slightly on hover */
+    transform: scale(1.02);
-    background-color: #444;  /* Highlight background on hover */
+    background-color: #444;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;  /* Smooth transition */
+}
-/* Highlight the selected model card */
 .model-card.selected {
-    border: 2px solid var(--okGreen70a);  /* Add a blue border to indicate selection */
+    border: 2px solid var(--okGreen70a);
-    background-color: var(--okGreen70a);  /* Slightly darker background for selected state */
+    background-color: var(--okGreen70a);
+}
-/* Model title information */
 .model-info {
-    flex: 1;  /* Take up the remaining space */
+    flex: 1;
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;  /* Ellipsis for overflow text */
+    text-overflow: ellipsis;
+}
 .model-title {
-    font-size: 16px;
+    font-size: --mainFontSize;
-    font-weight: bold;  /* Bold text for the model title */
+    font-weight: bold;
     overflow: hidden;
+}
-/* Model details section */
 .model-details {
     display: flex;
-    flex-direction: column;  /* Stack class and context length vertically */
+    flex-direction: column;
-    align-items: flex-end;  /* Align details to the end (right) */
+    align-items: flex-end;
-    text-align: right;  /* Right-aligned text for class and context length */
+    text-align: right;
-    min-width: 120px;  /* Minimum width to prevent excessive squeezing */
+    min-width: 120px;
+}
 .model-class, .model-context-length {
-    font-size: 14px;  /* Smaller font size for details */
+    font-size: calc(--mainFontSize - 3);
+}
 .model-class {
-    margin-bottom: 5px;  /* Space between class and context length */
+    margin-bottom: 5px;
+}
-/* Grid-view layout for the card container */
 #model_card_block.grid-view {
-    /* grid-row: 1 / span 2;  Span two rows */
     grid-template-columns: repeat(2, 1fr);
     display: flex;
-    flex-wrap: wrap;  /* Cards wrap onto new lines when necessary */
+    flex-wrap: wrap;
-    gap: 5px;  /* Space between grid items */
+    gap: 5px;
-    justify-content: flex-start;  /* Align cards to the left */
+    justify-content: flex-start;
+}
 /* Grid-view card */
 #model_card_block.grid-view .model-card {
-    flex-direction: column; /* Stack title, class, and context length vertically for grid */
+    flex-direction: column;
-    flex: 1 1 calc(50% - 30px); /* 3 cards per row with spacing */
+    flex: 1 1 calc(50% - 30px);
-    /* margin-bottom: 10px; */
+}
-/* Ensure the search bar takes most of the width */
 #model_search_bar {
     width: 15ch;
     flex-grow: 0;
-    /* min-width: 10ch; */
     align-self: center;
+}
-/* Sort dropdown should be auto-sized based on its content */
 #model_sort_order {
     width: auto;
     flex-shrink: 0;
     align-self: center;
+}
-/* Grid toggle button */
 #model_grid_toggle {
     flex-shrink: 0;
-    width: auto;  /* Keep default button size */
+    width: auto;
     cursor: pointer;
+}

@@ -5590,23 +5580,22 @@ body:not(.movingUI) .drawer-content.maximized {
5590	align-self: center;	5580	align-self: center;
5591	}	5581	}
5592		5582
5593	/* Media query for mobile devices */
5594	@media (max-width: 768px) {	5583	@media (max-width: 768px) {
5595	.model-card {	5584	.model-card {
5596	flex-direction: column; /* Stack content vertically on small screens */	5585	flex-direction: column;
5597	align-items: stretch; /* Stretch items to take full width */	5586	align-items: stretch;
5598	}	5587	}
5599		5588
5600	.model-info, .model-details {	5589	.model-info, .model-details {
5601	width: 100%; /* Take full width */	5590	width: 100%;
5602	text-align: left; /* Left-align text */	5591	text-align: left;
5603	}	5592	}
5604		5593
5605	#model_search_bar {	5594	#model_search_bar {
5606	width: 100%; /* Take full width on small screens */	5595	width: 100%;
5607	}	5596	}
5608		5597
5609	#model_sort_order, #model_grid_toggle {	5598	#model_sort_order, #model_grid_toggle {
5610	margin-top: 10px; /* Add some space above these elements */	5599	margin-top: 10px;
5611	}	5600	}
5612	}	5601	}