@charset "UTF-8"; legend, fieldset { border: var(--border-width) solid var(--color-border); border-radius: var(--border-radius); } legend { padding: 6px 12px; } fieldset { margin-bottom: 16px; padding: 16px; } /* Styling for input boxes */ input[type="text"], input[type="number"], input[type="password"], input[type="file"], textarea, select { width: 100%; padding: 10px 12px; border: var(--border-width-thin) solid var(--color-border); border-radius: var(--border-radius); font-family: inherit; font-size: 1em; resize: none; box-sizing: border-box; } input[type="checkbox"] { width: auto; height: 2rem; aspect-ratio: 1; margin: 0; cursor: pointer; justify-self: start; align-self: center; } /* A bit of custom styling for the file input */ input[type="file"] { border-style: dashed; cursor: pointer; } button { padding: 10px 20px; border: var(--border-width-thin) solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-primary); color: var(--color-text); font-size: 14px; font-weight: 600; cursor: pointer; box-sizing: border-box; } label { font-weight: 600; color: var(--color-text); text-align: left; padding-top: 0; margin-bottom: 3px; line-height: 1.2; } label.css-description { font-weight: 300; } /* Grid layout for emoji fieldsets */ fieldset.emoji-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(2em, 1fr)); gap: 0.3em; } .delete-emoji-fieldset .fieldset-items { display: block; grid-template-columns: none; } .delete-emoji-fieldset button { margin-top: 16px; width: auto; } .change-mood { font-size: 0.9em; white-space: nowrap; } .profile-tick-form { display: flex; flex-direction: column; width: 100%; gap: 0.5em; } .flash-messages { margin-top: 10px; padding: 10px; border-radius: var(--border-radius); } .flash-message { padding: 12px 16px; margin: 5px 0; border-radius: var(--border-radius); border-left: 4px solid; font-weight: 500; } .flash-success { background-color: var(--color-flash-success-bg); border-left-color: var(--color-flash-success-border-left); color: var(--color-flash-success); } .flash-error { background-color: var(--color-flash-error-bg); border-left-color: var(--color-flash-error-border-left); color: var(--color-flash-error); } .fieldset-items { margin-bottom: 14px; display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; } .file-input-wrapper { position: relative; width: 100%; } .file-info { border-radius: var(--border-radius); padding: 8px; margin-top: 8px; font-size: 13px; color: var(--color-text); grid-column: 1; } .delete-btn { background-color: var(--color-delete-btn-bg); border: var(--border-width-thin) solid var(--color-delete-btn-border); color: var(--color-delete-btn); } .required { color: var(--color-required); } /* Mood selection page */ .mood-option input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .mood-option span { font-size: 1.4em; display: inline-block; padding: 0.2em; border-radius: var(--border-radius); } .mood-option:hover span { background-color: var(--color-mood-hover); } .mood-option input:focus + span { background-color: var(--color-mood-hover); outline: 2px solid var(--color-focus); outline-offset: 2px; } .mood-option input:checked + span { background-color: var(--color-mood-selected); outline: var(--border-width) solid var(--color-mood-border); } /* emoji management page */ .delete-emoji-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); margin-bottom: 6px; } .delete-emoji-item input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; } .delete-emoji-item label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-weight: 400; cursor: pointer; flex-grow: 1; text-align: left; } .delete-emoji-display { font-size: 1.8em; min-width: 2em; text-align: center; } /* Add and delete emoji settings */ .emoji-description { flex-grow: 1; color: var(--color-text); font-size: 1em; } /* Responsive layout - adjusts from 1 to 2 columns based on screen width - min-width makes the mobile (stacked) view the default - 600px covers most mobile devices in portrait mode - Once the width exceeds that (e.g. desktops), it will convert to horizontal alignment */ @media (min-width: 600px) { input[type="checkbox"] { height: 100%; /*grid-column: 2;*/ justify-self: start; align-self: center; } label { text-align: right; padding-top: 10px; margin-bottom: 0; } label.css-description { text-align: left; padding-top: 10px; margin-bottom: 0; } .fieldset-items { margin-bottom: 16px; display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; } .file-info { grid-column: 2; } }