body { font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; box-sizing: border-box; margin: 0; text-align: center; } #fixed-top { position: fixed; top: 4px; /* <5px to supersede on iOS and macOS*/ left: 0; margin: 0; padding: 0; width: 90%; /* >79% to superced on macOS; >88% to superced on macOS; */ min-height: 15px; /* >2px for dynamic color on macOS */ z-index: 1000; } #fixed-bottom { position: fixed; bottom: 3px; /* <4px to supersede on iOS*/ left: 0; margin: 0; padding: 0; width: 90%; /* >88% to superced on iOS*/ min-height: 15px; /* >2px for dynamic color iOS */ z-index: 1000; } body.dark-theme { color: #fff; } body.light-theme { color: #000; } .initial-background { background-color: #0044ff; } .cards-flex-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 1.25rem auto; max-width: 920px; width: 90%; } .card-container { display: flex; flex-direction: column; align-items: center; padding: 0; margin: 0; border-radius: 8px; } .cards-flex-wrapper .card-container { width: 280px; flex-shrink: 0; } .card-container h4 { text-align: left; align-self: flex-start; width: 100%; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; margin-top: 1.25rem; font-size: 1.125rem; margin-bottom: 1em; font-weight: normal; border: none; } /* Ensure all 3 cards fit on one line OR all stack vertically */ /* 3 cards * 280px + 2 gaps * 1.25rem (20px) = 880px minimum to fit all 3 */ /* 880px / 0.9 (90% width) = ~978px */ @media screen and (max-width: 977px) { .cards-flex-wrapper .card-container { width: 100%; max-width: 400px; } .card-container h4 { text-align: center; align-self: center; width: auto; } } .card-container:not(.cards-flex-wrapper .card-container) { margin: 1.25rem auto; width: calc(840px + 2.5rem); max-width: 90%; } .card-container.safari-settings { align-items: flex-start; text-align: left; } .card-container.safari-settings p { font-size: 1.125rem; } .card-content { padding: 1.25rem; border-radius: 8px; } .card-background, .card-theme, .card-fixed { box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px -4px; } .card-container.not-set h4 { color: #000000 !important; } .code-gen { width: 100%; max-width: 100%; resize: none; border-radius: 8px; font-size: 0.875rem; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; } .light-theme .code-gen { background-color: #FFF; color: #000; } .dark-theme input.code-gen { background-color: #333; color: #FFF; } .dark-theme code.code-gen { background-color: #333; color: #FFF; } code.code-gen { padding: 1rem; display: block; margin-bottom: 0.5rem; border-radius: 8px; white-space: pre-wrap !important; text-align: left; word-wrap: break-word; overflow-wrap: break-word; } span.learn-more { display: block; align-self: flex-start; text-align: left; width: 100%; font-size: 0.875rem; margin-bottom: 1.5rem; opacity: 0.65; } span.learn-more a { color: inherit; text-decoration: none; } input.code-gen { margin: 1em 0 1em 0; border: none; /* Ensure no border */ outline: none; /* Remove outline on focus */ -webkit-appearance: none; /* Remove default Safari/Chrome styling */ -moz-appearance: none; /* Remove default Firefox styling */ appearance: none; /* Remove default styling */ width: 18ch; /* Fit 18 monospaced characters */ text-align: center; /* Center the text */ align-self: center; /* Center the input itself within flex container */ border-radius: 8px; padding: 0.5rem 1rem; } .light-theme input.code-gen { background-color: #FFF; color: #000; } .dark-theme input.code-gen { background-color: #333; color: #FFF; } .color-picker-wrapper { display: flex; align-items: center; gap: 0.5rem; } .color-checkbox { width: 2.5rem; height: 2.5rem; cursor: pointer; flex-shrink: 0; transition: opacity 0.2s ease, transform 0.2s ease; } .xlight-theme .color-checkbox:not(:checked) { filter: grayscale(1) invert(0) brightness(1) contrast(1); } .xdark-theme .color-checkbox:not(:checked) { filter: grayscale(1) invert(1) brightness(1) contrast(1); } .dark-theme .color-checkbox:checked, .light-theme .color-checkbox:checked { filter: grayscale(1) invert(1) brightness(2) contrast(1); } input.color-preview { font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; font-weight: 500; letter-spacing: 0.05em; } #not-safari-notice { margin: 0 auto 0.625rem auto; display: inline-block; line-height: 1.2; text-align: center; font-weight: 600; padding: 0.3125rem 0.625rem; background-color: transparent; } h1 { text-align: center; font-weight: 700; font-size: 1.875rem; padding-top: 1.875rem; } h1 a { text-decoration: none; color: inherit; } h2 { font-size: 1.25em; } h3 { font-size: 1.25em; } #shareButton svg { transform: scale(1.0); } .action-button { border: none; /* padding: 0.5em 1.00em; */ border-radius: 4px; font-size: 1em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5em; position: relative; /* Needed for absolute positioning of ::after */ } .light-theme .action-button { /*background-color: rgba(0, 0, 0, 0.3);*/ background-color: inherit; color: #000000; } .dark-theme .action-button { /* background-color: rgba(255, 255, 255, 0.33);*/ background-color: inherit; color: #FFFFFF; */ } .action-button::after { content: ''; display: inline-block; width: 1em; height: 1em; background-color: currentColor; /* sets color the mask */ mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .button-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 1.25rem auto; max-width: 920px; width: 90%; } .button-container .action-button { flex: 1; min-width: 0; max-width: 7.5rem; } #shareButton::after { mask-image: url('./images/share.svg'); width: 1.25em; height: 1.25em; transform: scale(1.20); } #copyButton::after { mask-image: url('./images/copy.svg'); width: 1.25em; height: 1.25em; transform: scale(1.00); } footer { display: flex; align-items: center; justify-content: center; font-size: 1em; padding: 0; margin-bottom: 3rem; } footer a { text-decoration: none; color: inherit; } /* Color picker dropdown menu styling */ .color-dropdown .color-option, .color-dropdown .menu { font-size: 1.125rem !important; } .color-dropdown .menu > li { font-size: 1.125rem !important; } @media screen and (max-width: 512px) { body { margin-top: 0; } .cards-flex-wrapper { margin-top: 0; } .card-container { margin-top: 0px; padding: 0; } #not-safari-notice { font-size: 0.75rem; } #site-title { font-size: 1.5rem; margin-bottom: 0.625rem; } .code-gen { width: 86%; } }