index.css (2658B)
1 /* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */ 2 3 /* Font fallback that closely matches Inter metrics */ 4 @font-face { 5 font-family: "Inter Fallback"; 6 size-adjust: 107%; 7 ascent-override: 90%; 8 src: local("Arial"); 9 } 10 11 :root { 12 font-family: 13 Inter, 14 "Inter Fallback", 15 system-ui, 16 -apple-system, 17 BlinkMacSystemFont, 18 "Segoe UI", 19 Roboto, 20 Oxygen, 21 Ubuntu, 22 Cantarell, 23 "Open Sans", 24 "Helvetica Neue", 25 sans-serif; 26 font-synthesis: none; 27 text-rendering: optimizeLegibility; 28 -webkit-font-smoothing: antialiased; 29 -moz-osx-font-smoothing: grayscale; 30 } 31 32 * { 33 margin: 0; 34 padding: 0; 35 box-sizing: border-box; 36 } 37 38 html, 39 body { 40 height: 100%; 41 width: 100%; 42 } 43 44 body { 45 line-height: 1.5; 46 font-weight: 400; 47 font-size: 16px; 48 color: #1a1a1a; 49 } 50 51 h1, 52 h2, 53 h3, 54 h4, 55 h5, 56 h6 { 57 font-weight: 600; 58 line-height: 1.2; 59 } 60 61 a { 62 color: #444444; 63 } 64 65 a:hover { 66 color: #888888; 67 } 68 69 button { 70 font: inherit; 71 border: none; 72 background: none; 73 cursor: pointer; 74 } 75 76 input, 77 textarea { 78 font: inherit; 79 } 80 81 /* Add these new styles */ 82 .url-container { 83 display: flex; 84 align-items: center; 85 gap: 8px; 86 margin-top: 16px; 87 } 88 89 /* Add this new style */ 90 .content-container { 91 max-width: 36rem; 92 text-align: center; 93 padding: 0 8px; 94 } 95 96 /* Update url-input width to be 100% since container will control max width */ 97 .url-input { 98 padding: 8px 12px; 99 border: 1px solid #ddd; 100 border-radius: 4px; 101 width: 100%; 102 background: #f5f5f5; 103 } 104 105 .copy-button { 106 padding: 8px; 107 color: #666; 108 border-radius: 4px; 109 transition: all 0.2s; 110 display: flex; 111 align-items: center; 112 justify-content: center; 113 } 114 115 .copy-button:hover { 116 background: #f0f0f0; 117 } 118 119 .copy-button:active { 120 background: #e5e5e5; 121 } 122 123 .copy-button img { 124 width: 20px; 125 height: 20px; 126 } 127 128 .copy-button.copied { 129 background: #28a745; 130 } 131 132 /* Add footer styles */ 133 .footer { 134 position: fixed; 135 bottom: 16px; 136 left: 0; 137 right: 0; 138 text-align: center; 139 font-size: 14px; 140 color: #666; 141 } 142 143 .footer a { 144 color: #666; 145 text-decoration: none; 146 font-weight: 500; 147 } 148 149 .footer a:hover { 150 color: #333; 151 } 152 153 @media (prefers-color-scheme: dark) { 154 body { 155 color: #ddd; 156 } 157 158 #app { 159 background-color: #131313; 160 } 161 162 a { 163 color: #a9a9a9; 164 } 165 166 a:hover { 167 color: #888; 168 } 169 170 .footer, 171 .footer a { 172 color: #999; 173 } 174 175 .footer a:hover { 176 color: #ccc; 177 } 178 179 .url-input { 180 border-color: #3d3d3d; 181 background-color: #191919; 182 color: #fff; 183 } 184 185 .copy-button img { 186 filter: invert(1); 187 } 188 189 .copy-button:hover { 190 background: #222; 191 } 192 193 .copy-button:active { 194 background: #333; 195 } 196 }