Scribd
Upload
7 views4 pages

Desktop

The document contains CSS media queries for styling various UI components at a minimum width of 768px. It includes styles for containers, buttons, modals, and settings, defining properties like padding, font sizes, and layout arrangements. The styles aim to enhance the visual presentation and usability of the interface across different screen sizes.

Uploaded by

WeahWeah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views4 pages

Desktop

The document contains CSS media queries for styling various UI components at a minimum width of 768px. It includes styles for containers, buttons, modals, and settings, defining properties like padding, font sizes, and layout arrangements. The styles aim to enhance the visual presentation and usability of the interface across different screen sizes.

Uploaded by

WeahWeah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

@media (min-width: 768px) {

#${UI_IDS.CONTAINER} {
bottom: var(--space-lg);
right: var(--space-lg);
max-width: 15.625rem;
padding: var(--space-sm);
filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.2));
flex-direction: column;
align-items: flex-end;
gap: 0.3125rem;
background: rgba(245, 245, 245, 0.55);
}
#${UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN} {
order: -2;
align-self: flex-end;
font-size: 1.2em;
padding: var(--space-xs);
}

#${UI_IDS.STATUS_INDICATOR} {
display: block;
text-align: right; font-size: 0.6875rem;
padding: 0.1875rem 0.375rem;
margin-bottom: 0.1875rem;
order: -1;
}
.${SCRIPT_PREFIX}button-group {
flex-direction: row;
gap: 0.3125rem;
flex-wrap: wrap; justify-content: flex-end;
width: 100%;
flex-grow: 0;
}
.${SCRIPT_PREFIX}button {
font-size: 0.75rem;
padding: 0.3125rem 0.625rem;
width: auto; display: inline-block;
flex-grow: 0;
white-space: nowrap;
}
.${SCRIPT_PREFIX}button-group > .${SCRIPT_PREFIX}button:not(.$
{SCRIPT_PREFIX}icon-button) {
flex-grow: 0;
}
.${SCRIPT_PREFIX}icon-button {
font-size: 0.875rem;
padding: 0.25rem 0.5rem;
}
#${UI_IDS.RESTORE_RESULT_ICON} {
font-size: 1.125rem;
padding: 0.3125rem 0.5rem;
margin-bottom: 0.3125rem;
}

#${UI_IDS.SETTINGS_MODAL}, #${UI_IDS.RESULT_MODAL}, #$
{UI_IDS.HISTORY_MODAL} {
padding: var(--space-xl);
align-items: center;
}
#${UI_IDS.SETTINGS_CONTENT}, #${UI_IDS.RESULT_MODAL_CONTENT}, #$
{UI_IDS.HISTORY_MODAL_CONTENT} {

width: auto;
height: auto;
max-height: 85vh;
border-radius: var(--border-radius-large);
filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.2));
border: 1px solid rgba(0,0,0,0.15);
}

#${UI_IDS.SETTINGS_CONTENT} { max-width: 85%; width: 34.375rem;


padding: 0; }

#${UI_IDS.RESULT_MODAL_CONTENT} { max-width: 50rem; width: 90%; }


#${UI_IDS.HISTORY_MODAL_CONTENT} { max-width: 56.25rem; width: 95%;
padding:0; }

.${SCRIPT_PREFIX}modal-header { padding: var(--space-md) 1.125rem; }


.${SCRIPT_PREFIX}modal-header h2 { font-size: 1.35em; }

#${UI_IDS.SETTINGS_GRID} { padding: 1.25rem; gap: var(--space-lg); }


.${SCRIPT_PREFIX}settings-group-container { padding: var(--space-lg); }
.${SCRIPT_PREFIX}settings-section { padding: var(--space-lg); }
.${SCRIPT_PREFIX}settings-section h3 { font-size: 1.1em; }
.${SCRIPT_PREFIX}settings-form-row {
flex-direction: row; align-items: center; gap: var(--space-sm);
flex-wrap: nowrap;
}
.${SCRIPT_PREFIX}settings-form-row label {
min-width: 6.25rem; flex-shrink: 0; text-align: left; margin-
bottom: 0;
}
#${UI_IDS.SETTINGS_MODAL} select, #${UI_IDS.SETTINGS_MODAL}
input[type="text"],
#${UI_IDS.SETTINGS_MODAL} input[type="number"], #$
{UI_IDS.SETTINGS_MODAL} textarea,
#${UI_IDS.CUSTOM_PROMPT_SELECT}, #${UI_IDS.CUSTOM_PROMPT_TEXTAREA} {
padding: 0.375rem 0.5rem; font-size: 0.8125rem; flex-grow: 1;
}
#${UI_IDS.SETTINGS_MODAL} input[type="color"] { height: 1.875rem; min-
width: 3.125rem; }
#${UI_IDS.SETTINGS_MODAL} input[type="checkbox"] { transform: scale(1);
margin-right: var(--space-sm); }
#${UI_IDS.SETTINGS_MODAL} textarea { min-height: 5rem; }
.${SCRIPT_PREFIX}settings-grid-inputs { grid-template-columns: auto
1fr; gap: 0.5rem 0.625rem; }
.${SCRIPT_PREFIX}settings-grid-inputs label { font-size: 0.75rem; }
.${SCRIPT_PREFIX}settings-grid-inputs input[type="number"] { width:
5rem; flex-grow: 0; }
#${UI_IDS.SAFETY_CONTROLS_DIV} { margin: 0.3125rem 0 0 1.25rem; }
#${UI_IDS.DISPLAY_FONT_SIZE_INPUT} { width: 4.375rem !important; flex-
grow: 0; }
.${SCRIPT_PREFIX}template-buttons .${SCRIPT_PREFIX}button {
flex-grow: 0; font-size: 0.6875rem; padding: 0.1875rem 0.375rem;
}

#${UI_IDS.RESULT_MODAL_INTERNAL_STATUS} { font-size: 0.75rem; padding:


0.5rem 0.9375rem; }
#${UI_IDS.RESULT_MODAL_PANELS_CONTAINER} { padding: 0 0.9375rem
0.625rem; }
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} { padding: 0.5rem 0.75rem; }
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} h4 { font-size: 1em; }
.${SCRIPT_PREFIX}custom-prompt-controls-inner { padding: 0.625rem
0.75rem; }
#${UI_IDS.CUSTOM_PROMPT_TEXTAREA} { font-size: 0.8125rem; min-height:
3.75rem; }
#${UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN}, #$
{UI_IDS.CUSTOM_PROMPT_UPDATE_BTN} {
font-size: 0.6875rem; padding: 0.25rem 0.5rem; flex-grow: 0;
}

.${SCRIPT_PREFIX}toc-panel { padding: 0.625rem; }


.${SCRIPT_PREFIX}toc-panel h4 { font-size: 1.1em; }
#${UI_IDS.TOC_LIST} { max-height: 25vh; }
.${SCRIPT_PREFIX}toc-item { font-size: 0.8125rem; padding: 0.375rem
0.625rem; }

#${UI_IDS.RESULT_MODAL_BODY} {
padding: 0.9375rem 1.25rem;
font-size: 0.9375em;
touch-action: auto;
}

#${UI_IDS.RESULT_MODAL_FOOTER} {
padding: 0.625rem 0.9375rem;
flex-direction: row; justify-content: space-between;
align-items: center; flex-wrap: nowrap;
}
.${SCRIPT_PREFIX}footer-row-top, .${SCRIPT_PREFIX}footer-row-bottom {
flex-direction: row; flex-wrap: nowrap; gap: var(--space-sm);
width: auto;
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}button {
font-size: 0.75rem; padding: 0.3125rem 0.625rem;
}
.${SCRIPT_PREFIX}mode-switcher button { font-size: 0.6875rem; padding:
0.3125rem 0.5rem; }

.${SCRIPT_PREFIX}history-body { padding: 1.25rem; gap: 1.25rem; flex-


direction: row; }
.${SCRIPT_PREFIX}history-panel { padding: 0.9375rem; max-height: 75vh;
min-width: 15.625rem; }
.${SCRIPT_PREFIX}history-panel h3 { font-size: 1.1em; }
.${SCRIPT_PREFIX}history-item { padding: 0.5rem 0.625rem; font-size:
0.75rem; flex-wrap:nowrap; }
.${SCRIPT_PREFIX}history-item span[role="button"] { flex-basis: auto; }
.${SCRIPT_PREFIX}history-item .${SCRIPT_PREFIX}set-active-button {
font-size: 0.8125em !important;
padding: 0.1875rem var(--space-sm) !important;
white-space: nowrap; line-height: 1.5; flex-grow: 0; min-width:
auto;
}
.${SCRIPT_PREFIX}history-item-actions { gap: var(--space-sm); }
.${SCRIPT_PREFIX}history-action-button { font-size: 0.75rem; padding:
0.125rem 0.3125rem; }
#${UI_IDS.HISTORY_DOWNLOAD_PROJECT_BTN} {
width: auto; margin-top:0; font-size: 0.75rem; padding: 0.25rem
0.5rem;
}
}

You might also like