/* ############################################################################################################################################################################ */ /* ############################################################################################################################################################################ */ /* Glyh Entertainment Public Website */ /* • Page: Forms (forms.css) */ /* • Description: Dark/gold themed markdown tables – opt-in only using
wrapper */ /* • Location: /css/forms.css */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Version: v0.0.01 α */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Project Start Date: 2026-04-07 */ /* • α Release Date: 2026-04-XX */ /* • β Release Date: 2026-04-XX */ /* • Last updated: 2026-06-05 @ 1325 EDT */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Author: by Conner Rhoads */ /* • Official Site: www.glyphchronicles.com */ /* ############################################################################################################################################################################ */ /* == AI ASSISTANT MANDATED LOGIC == */ /* • I.) FORMATING: */ /* • 01.) NEVER change or deviate from the commeting and seperation format. */ /* • 02.) ALWAYS Use "Indented Allman" Code Formating Style. */ /* • 03.) Tabs are always FOUR characters long. */ /* • 04.) The comment ending segment on each comment block should always end at 178 spaces from the left. */ /* • 05.) All comment lines should be exactly 178 spaces from the left. */ /* • 06.) NEVER remove code that appears to be placeholders. */ /* • 07.) Primary sections always use "#" as the basis for the line and always start with [START] and end with [END] */ /* • A.) EXAMPLES: */ /* • i.) Header */ /* • ii.) Body */ /* • iii.) Footer */ /* • iv.) Stylesheets */ /* • v.) Scripts */ /* • 08.) Major sections always use "=" as the basis for lines. These sections are always with in the Primary sections. */ /* • 09.) Minor sections always use "-" as the basis for lines. These are usually a small module within a Major Section. */ /* • II.) COMMENTING: */ /* • 01.) NEVER remove comments. */ /* • 02.) ALWAYS Update "Last Updated" with the current data and time stamp of the most recent edits. */ /* • 03.) ALWAYS Update anything inside "<",">" brackets. */ /* • 04.) Comments spanning over 175 spaces from the left should overflow to the next line and be spaced out to match the start of the comment fromt he previous line. */ /* • 05.) DO NOT update the Change Log. That is for the end user to update after they are done with the current edits and are satisifed with them. */ /* • 06.) DO NOT update the Version. That is for the end user to update after they are done with the current edits and are satisifed with them. */ /* • III.) EDITS: */ /* • 01.) If adding new variables or arrays, ALWAYS confirm the names and naming convention before building/creating them. */ /* • 02.) Always reproduce the full file OR the section for updates. */ /* • A.) Headers must ALWAYS be full length of the header comment block. */ /* • B.) If producinga seciton for updates, ALWAYS go from the START of the header being updated to the line before the next header. */ /* • C.) Default to updating sections instead of the whole document unless more than 30% of the document needs to be changed. */ /* • 03.) A successful build must always be either the same amount of lines or additional lines of code. Less lines of code are to be immediately qualified as a failed */ /* build. */ /* • A.) If Lines or Sections are to be removed: */ /* • i.) The end user needs to specifically ask for them to be removed. */ /* • ii.) The AI agent must suggest the sections be elimiated AND the end user must confirm that those sections are being elimated */ /* • IV.) OTHER: */ /* • 01.) When the end user asks you to check this file, only give feedback on the problems with it, never rewrite it unless the end user asks to. */ /* ############################################################################################################################################################################ */ /* CHANGE LOG */ /* • 2026-05-25: Created. */ /* ############################################################################################################################################################################ */ /* ############################################################################################################################################################################ */ /* ============================================================================================================================================================================ */ /* [START] FORMS STYLESHEET */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* FORM CONTAINERS & LABELS */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ form { color: #ddd; } label { display: inline-block; margin-bottom: 6px; font-weight: 500; color: #ddd; } .form-group { margin-bottom: 18px; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* TEXT INPUTS, TEXTAREA, SELECT */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, select { width: 100%; padding: 10px 14px; background-color: #1f1f1f; border: 1px solid #444; border-radius: 6px; color: #ddd; font-size: 15px; line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, textarea:focus, select:focus { outline: none; border-color: #FFA000; box-shadow: 0 0 0 3px rgba(255, 160, 0, 0.15); } textarea { min-height: 100px; resize: vertical; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23FFA000' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* CHECKBOXES & RADIO BUTTONS */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ input[type="checkbox"], input[type="radio"] { accent-color: #FFA000; width: 18px; height: 18px; cursor: pointer; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* BUTTONS */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ button, input[type="button"], input[type="submit"], .filter-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background-color: #2a2a2a; color: #ddd; border: 1px solid #555; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, .filter-btn:hover { background-color: #333; border-color: #FFA000; color: #fff; } .filter-btn.apply-btn { background-color: #FFA000; color: #1a1a1a; border-color: #FFA000; font-weight: 600; } .filter-btn.apply-btn:hover { background-color: #FFB300; border-color: #FFB300; color: #1a1a1a; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* DISABLED STATES */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ input:disabled, textarea:disabled, select:disabled, button:disabled { opacity: 0.6; cursor: not-allowed; background-color: #252525; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* FOCUS VISIBLE (Accessibility) */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ input:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid #FFA000; outline-offset: 2px; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* AUTH / LOGIN-REGISTER FORMS (used in usertools dropdown / bar) */ /* Compact, dark theme, side-by-side buttons (Register left, Login right per spec), error banner */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .auth-section, .usertools-auth, #login-register-form { background-color: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 12px; margin: 4px 0; font-size: 14px; } .auth-section form, .usertools-auth form { display: flex; flex-direction: column; gap: 8px; } .auth-section input[type="text"], .auth-section input[type="email"], .auth-section input[type="password"], .usertools-auth input[type="text"], .usertools-auth input[type="email"], .usertools-auth input[type="password"] { padding: 8px 10px; font-size: 13px; background-color: #111; border-color: #444; } .auth-section .form-actions, .usertools-auth .form-actions, .auth-section form > div:last-child { display: flex; gap: 8px; margin-top: 4px; } /* Register LEFT, Login RIGHT */ .auth-section button[name="register_submit"], .auth-section input[name="register_submit"], .usertools-auth button[name="register_submit"] { flex: 1; background-color: #2a2a2a; border-color: #555; font-size: 13px; padding: 8px 12px; } .auth-section button[name="login_submit"], .auth-section input[name="login_submit"], .usertools-auth button[name="login_submit"] { flex: 1; background-color: #FFA000; color: #1a1a1a; border-color: #FFA000; font-weight: 600; font-size: 13px; padding: 8px 12px; } .auth-section button[name="login_submit"]:hover, .usertools-auth button[name="login_submit"]:hover { background-color: #FFB300; color: #000; } /* Error / status messages */ .auth-error, .auth-message.error, .registration-failed { background-color: #4a1a1a; color: #ffcccc; border: 1px solid #a33; padding: 6px 10px; font-size: 12px; border-radius: 4px; margin-top: 6px; } /* Search input in bar */ input[type="search"].search-input { max-width: 140px; font-size: 13px; padding: 4px 8px; } /* ============================================================================================================================================================================ */ /* [END] FORMS STYLESHEET */ /* ============================================================================================================================================================================ */