File: public_html/webdoors/gemini-browser/css/gemini.css

/* ?? Variables ??????????????????????????????????????????????????????????????? */
:root {
    --bg:          #080e08;
    --bg2:         #0c140c;
    --bg3:         #101a10;
    --fg:          #00bb44;
    --fg-dim:      #005522;
    --fg-bright:   #00ff77;
    --accent:      #00ff55;
    --link:        #44ffaa;
    --link-ext:    #88ffcc;
    --border:      #163016;
    --toolbar-bg:  #060a06;
    --input-bg:    #0a120a;
    --error-bg:    #190000;
    --error-fg:    #ff5555;
    --warn-bg:     #131000;
    --warn-fg:     #ffcc00;
    --h1:          #00ff88;
    --h2:          #00dd66;
    --h3:          #00bb44;
    --quote:       #559955;
    --pre-fg:      #88ffaa;
    --font:        'Courier New', 'Courier', monospace;
    --font-size:   16px;
    --radius:      2px;
}

/* ?? Reset ??????????????????????????????????????????????????????????????????? */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--font-size);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ?? Toolbar ????????????????????????????????????????????????????????????????? */
#toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--border);
    height: 36px;
    flex-shrink: 0;
}

#toolbar button {
    background: var(--bg2);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 1px 8px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    height: 26px;
    min-width: 28px;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: color 0.1s, border-color 0.1s;
}
#toolbar button:hover:not(:disabled) {
    color: var(--fg-bright);
    border-color: var(--fg-dim);
    background: var(--bg3);
}
#toolbar button:disabled { opacity: 0.3; cursor: default; }
#toolbar button.active   { color: var(--accent); border-color: var(--accent); }

#url-bar {
    flex: 1;
    background: var(--input-bg);
    color: var(--fg-bright);
    border: 1px solid var(--border);
    padding: 2px 8px;
    font-family: var(--font);
    font-size: 13px;
    height: 26px;
    border-radius: var(--radius);
    outline: none;
}
#url-bar:focus { border-color: var(--fg-dim); }

/* ?? Main layout ????????????????????????????????????????????????????????????? */
#main {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

#content-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

/* ?? Loading indicator ??????????????????????????????????????????????????????? */
#loading {
    color: var(--fg-dim);
    padding: 16px 0;
    animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ?? Gemtext content ????????????????????????????????????????????????????????? */
.gmi-meta {
    color: var(--fg-dim);
    font-size: 11px;
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    word-break: break-all;
}

.gmi-h1 {
    color: var(--h1);
    font-size: 1.45em;
    margin: 1em 0 0.5em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.gmi-h2 { color: var(--h2); font-size: 1.2em;  margin: 0.85em 0 0.4em; }
.gmi-h3 { color: var(--h3); font-size: 1.05em; margin: 0.65em 0 0.3em; }

.gmi-p   { margin: 0.2em 0; line-height: 1.55; }
.gmi-blank { height: 0.55em; }

.gmi-link { margin: 0.2em 0; }
.gmi-a {
    color: var(--link);
    text-decoration: none;
    word-break: break-all;
}
.gmi-a::before { content: '=> '; color: var(--fg-dim); }
.gmi-a:hover   { color: var(--fg-bright); text-decoration: underline; }

.gmi-a.gmi-external { color: var(--link-ext); }
.gmi-a.gmi-external::after {
    content: ' \2197'; /* ? */
    font-size: 0.8em;
    color: var(--fg-dim);
}

.gmi-li {
    margin: 0.15em 0;
    padding-left: 1.2em;
    position: relative;
}
.gmi-li::before {
    content: '\2022'; /* ? */
    position: absolute;
    left: 0.3em;
    color: var(--accent);
}

.gmi-quote {
    margin: 0.4em 0 0.4em 0.5em;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--fg-dim);
    color: var(--quote);
    font-style: italic;
}

.gmi-pre {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 10px 14px;
    margin: 0.6em 0;
    overflow-x: auto;
    color: var(--pre-fg);
    white-space: pre;
    line-height: 1.4;
    border-radius: var(--radius);
}

/* ?? Status / error boxes ???????????????????????????????????????????????????? */
.gmi-error {
    color: var(--error-fg);
    background: var(--error-bg);
    border: 1px solid var(--error-fg);
    padding: 10px 14px;
    margin: 1em 0;
    border-radius: var(--radius);
}
.gmi-warn {
    color: var(--warn-fg);
    background: var(--warn-bg);
    border: 1px solid var(--warn-fg);
    padding: 10px 14px;
    margin: 1em 0;
    border-radius: var(--radius);
}
.gmi-info {
    color: var(--fg);
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 10px 14px;
    margin: 1em 0;
    border-radius: var(--radius);
}

/* ?? Status bar ?????????????????????????????????????????????????????????????? */
#status-bar {
    height: 20px;
    padding: 2px 10px;
    background: var(--toolbar-bg);
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--fg-dim);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* ?? Bookmarks panel ????????????????????????????????????????????????????????? */
#bookmarks-panel {
    width: 250px;
    background: var(--bg2);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
#bookmarks-panel.hidden { display: none; }

#bookmarks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--fg-bright);
    font-size: 12px;
    flex-shrink: 0;
}
#bookmarks-header button {
    background: none;
    border: none;
    color: var(--fg-dim);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
}
#bookmarks-header button:hover { color: var(--error-fg); }

#bookmarks-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.bookmark-item {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    cursor: pointer;
    gap: 6px;
    border-bottom: 1px solid var(--border);
}
.bookmark-item:hover { background: var(--bg3); }

.bookmark-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--link);
    font-size: 12px;
}
.bookmark-remove {
    background: none;
    border: none;
    color: var(--fg-dim);
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    flex-shrink: 0;
    line-height: 1;
}
.bookmark-remove:hover { color: var(--error-fg); }

.bookmarks-empty {
    color: var(--fg-dim);
    font-size: 12px;
    padding: 16px 10px;
    text-align: center;
}

/* ?? Input modal ????????????????????????????????????????????????????????????? */
#input-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
#input-modal.hidden { display: none; }

#input-modal-inner {
    background: var(--bg2);
    border: 1px solid var(--fg-dim);
    padding: 20px 22px;
    width: 420px;
    max-width: 92vw;
    border-radius: var(--radius);
}
#input-prompt-label {
    color: var(--fg-bright);
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
#input-field {
    width: 100%;
    background: var(--input-bg);
    color: var(--fg-bright);
    border: 1px solid var(--border);
    padding: 6px 8px;
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    margin-bottom: 14px;
    border-radius: var(--radius);
}
#input-field:focus { border-color: var(--fg-dim); }

#input-modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
#input-modal-buttons button {
    background: var(--bg3);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 4px 18px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    border-radius: var(--radius);
}
#input-modal-buttons button:hover {
    color: var(--fg-bright);
    border-color: var(--fg-dim);
}

/* ?? Scrollbars ?????????????????????????????????????????????????????????????? */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }