Models PLUS
by Vivek-k3
index.css•10.1 kB
/* CSS Reset/Normalize */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--icon-opacity: 0.85;
--header-height: 56px;
--font-mono: 'IBM Plex Mono', monospace;
}
:root {
--color-brand: #FD9527;
--color-background: #FFF;
--color-border: #DDD;
--color-surface: #EEE;
--color-alpha-background: rgba(255, 255, 255, 0.75);
--color-text: #333;
--color-text-invert: #FFF;
--color-text-secondary: #666;
--color-text-tertiary: #999;
}
@media (prefers-color-scheme: dark) {
:root {
--color-brand: #FD9527;
--color-background: #1E1E1E;
--color-border: #333;
--color-surface: #111;
--color-alpha-background: rgba(30, 30, 30, 0.75);
--color-text: #FFF;
--color-text-invert: #333;
--color-text-secondary: #AAA;
--color-text-tertiary: #666;
}
}
html,
body {
font-family: 'Rubik', sans-serif;
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-background);
}
body:has(dialog[open]) {
overscroll-behavior: none;
}
input,
button {
font-family: inherit;
}
a {
color: var(--color-text);
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: var(--color-text-tertiary);
text-underline-offset: 0.1875rem;
&:hover {
color: var(--color-text);
}
}
header {
top: 0;
display: flex;
gap: 0.5rem;
justify-content: space-between;
align-items: center;
height: var(--header-height);
padding: 0 0.75rem;
background-color: var(--color-background);
position: fixed;
width: 100%;
z-index: 10;
&>div {
display: flex;
align-items: center;
&.left {
flex: 1 1 auto;
min-width: 0;
position: relative;
align-items: baseline;
}
&.right {
flex: 0 0 auto;
gap: 0.75rem;
}
}
h1 {
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: -0.5px;
}
p {
font-size: 0.875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-text-tertiary);
}
.slash {
margin-left: 0.625rem;
margin-right: 0.25rem;
display: block;
position: relative;
top: 1px;
width: 0;
line-height: 1;
height: 0.75rem;
border-right: 2px solid var(--color-border);
transform: translateX(-50%) rotate(20deg);
transform-origin: top center;
}
a.github {
flex: 0 0 auto;
height: 24px;
color: var(--color-text-secondary);
svg {
opacity: var(--icon-opacity);
}
}
.search-container {
position: relative;
flex: 1 1 auto;
min-width: 12.5rem;
}
input {
width: 100%;
font-size: 0.8125rem;
line-height: 1.1;
padding: 0.5rem 2.5rem 0.5rem 0.625rem;
border-radius: 0.25rem;
border: 1px solid var(--color-border);
height: 2rem;
background: none;
color: var(--color-text);
&:focus {
border-color: var(--color-brand);
outline: none;
}
}
.search-shortcut {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
color: var(--color-text-tertiary);
pointer-events: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
button {
flex: 0 0 auto;
cursor: pointer;
border: none;
background-color: var(--color-brand);
color: var(--color-text-invert);
font-size: 0.8125rem;
line-height: 1.1;
height: 2rem;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
}
@media (max-width: 32rem) {
div.left {
p,
span.slash {
display: none;
}
}
}
@media (max-width: 45rem) {
div.right {
.github,
.search-container {
display: none;
}
}
}
}
table {
border-collapse: separate;
border-spacing: 0;
font-size: 0.875rem;
width: 100%;
margin-top: var(--header-height);
}
thead,
tbody {}
table thead th {
position: sticky;
top: var(--header-height);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
font-size: 0.75rem;
padding: 0.75rem 0.75rem calc(0.75rem - 2px);
line-height: 1;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
backdrop-filter: blur(6px);
background-color: var(--color-alpha-background);
z-index: 10;
}
table thead th .header-container {
display: flex;
align-items: center;
gap: 0.125rem;
}
th.sortable {
cursor: pointer;
user-select: none;
}
.sort-indicator {
display: inline-block;
width: 1rem;
text-align: center;
}
table thead th .desc {
color: var(--color-text-tertiary);
margin-top: 0.5em;
display: block;
font-size: 0.625rem;
font-weight: normal;
}
th,
td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
tbody {
td {
color: var(--color-text-tertiary);
}
td:nth-child(1) {
font-weight: 500;
}
td:nth-child(1),
td:nth-child(2),
td:nth-child(5),
td:nth-child(6),
td:nth-child(9),
td:nth-child(10),
td:nth-child(11),
td:nth-child(12),
td:nth-child(13),
td:nth-child(14),
td:nth-child(15),
td:nth-child(16) {
color: var(--color-text);
}
td:nth-child(5),
td:nth-child(6),
td:nth-child(18) {
font-size: 0.8125rem;
font-family: var(--font-mono);
text-transform: uppercase;
}
td:nth-child(3),
td:nth-child(4),
td:nth-child(9),
td:nth-child(10),
td:nth-child(11),
td:nth-child(12),
td:nth-child(13),
td:nth-child(14),
td:nth-child(15),
td:nth-child(16),
td:nth-child(17) {
font-size: 0.8125rem;
font-family: var(--font-mono);
}
.provider-cell {
display: flex;
align-items: center;
gap: 0.375rem;
}
.provider-cell span:first-child {
flex: 0 0 auto;
}
.provider-cell svg {
display: block;
width: 1rem;
height: 1rem;
color: var(--color-text-secondary);
}
.model-id-cell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.375rem;
}
.model-id-text {}
.copy-button {
flex: 0 0 auto;
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
border-radius: 0.25rem;
color: var(--color-text-tertiary);
opacity: 0;
transition: opacity 0.2s ease, color 0.2s ease;
}
.model-id-cell:hover .copy-button {
opacity: 1;
}
.model-id-cell .copy-button svg {
display: block;
}
.copy-button:hover {
color: var(--color-text);
background-color: var(--color-surface);
}
.copy-button:active {
transform: scale(0.95);
}
.copy-button.copied {
color: var(--color-brand) !important;
}
.modalities {
display: flex;
gap: 0.25rem;
align-items: center;
}
.modality-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1px solid var(--color-border);
border-radius: 2px;
background-color: var(--color-background);
color: var(--color-text-secondary);
position: relative;
}
.modality-icon::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1;
padding: 0.375rem 0.375rem;
background-color: var(--color-text);
color: var(--color-background);
font-size: 0.625rem;
border-radius: 3px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 100;
}
.modality-icon:hover::after {
opacity: 1;
}
}
dialog::backdrop {
backdrop-filter: blur(8px);
background-color: rgba(0, 0, 0, 0.03);
}
dialog {
margin: auto;
background-color: var(--color-background);
color: var(--color-text);
border: none;
border-radius: 0.5rem;
width: calc(100vw - 2rem);
max-width: 40rem;
max-height: calc(100svh - 2rem);
box-shadow:
0 2px 4px rgba(0, 0, 0, .05),
0 4px 8px rgba(0, 0, 0, .05),
0 8px 16px rgba(0, 0, 0, .07),
0 16px 32px rgba(0, 0, 0, .07),
0 32px 64px rgba(0, 0, 0, .07),
0 48px 96px rgba(0, 0, 0, .07);
flex-direction: column;
overflow: hidden;
&[open] {
display: flex;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.875rem calc(1rem - 0.5rem) calc(0.875rem - 4px) 1rem;
border-bottom: 1px solid var(--color-border);
flex: 0 0 auto;
h2 {
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: -0.5px;
line-height: 1;
}
button {
background: transparent;
color: var(--color-text);
opacity: var(--icon-opacity);
border: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
outline: none;
svg {
display: block;
width: 1.5rem;
height: 1.5rem;
}
}
}
.body {
padding: 1rem;
overflow-y: auto;
flex: 1 1 auto;
overscroll-behavior: contain;
font-size: 0.875rem;
h2,
p,
.code-block {
margin-bottom: 0.625rem;
&:has(+ h2) {
margin-bottom: 1.5rem;
}
&:last-child {
margin-bottom: 0;
}
}
h2 {
font-size: 1rem;
font-weight: 500;
}
p {
b {
font-weight: 500;
}
}
.code-block {
padding: 0.875rem 1rem;
border-radius: 0.25rem;
background-color: var(--color-surface);
}
code {
font-size: 0.8125rem;
font-family: var(--font-mono);
}
}
.footer {
flex: 0 0 auto;
text-align: center;
border-top: 1px solid var(--color-border);
padding: 0.875rem 1rem 0.875rem;
display: flex;
justify-content: space-between;
align-items: center;
a {
font-size: 0.75rem;
color: var(--color-text-tertiary);
text-decoration: none;
&:hover,
&:visited {
color: var(--color-text-tertiary);
}
}
}
}
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Vivek-k3/modelsplus'
If you have feedback or need assistance with the MCP directory API, please join our Discord server