File size: 2,262 Bytes
03aff21 38a1140 03aff21 38a1140 03aff21 38a1140 03aff21 38a1140 03aff21 38a1140 03aff21 38a1140 03aff21 f7e22f0 03aff21 f7e22f0 03aff21 f7e22f0 03aff21 f7e22f0 03aff21 f7e22f0 03aff21 f7e22f0 03aff21 f7e22f0 03aff21 f7e22f0 03aff21 f7e22f0 03aff21 f7e22f0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
/* Base Styles */
:root {
--primary-color: #3572A5;
--secondary-color: #FFD43B;
--background-color: #f5f5f5;
--text-color: #282c34;
}
[data-theme="dark"] {
--primary-color: #FFD43B;
--secondary-color: #3572A5;
--background-color: #282c34;
--text-color: #f5f5f5;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: var(--background-color);
color: var(--text-color);
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
transition: background-color 0.3s, color 0.3s;
}
#container {
width: 100%;
max-width: 640px;
margin: 1rem;
border: 2px dashed var(--primary-color);
border-radius: 0.75rem;
padding: 16px;
background-color: var(--secondary-color);
color: var(--text-color);
text-align: center;
transition: background-color 0.3s, border-color 0.3s;
}
textarea {
width: 100%;
height: 180px;
padding: 10px;
margin: 10px 0;
border: 1px solid var(--primary-color);
border-radius: 5px;
background-color: #ffffff;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
resize: vertical;
}
button {
padding: 10px 20px;
background-color: var(--primary-color);
color: var(--text-color);
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}
#results {
width: 100%;
max-width: 640px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
margin-top: 10px;
overflow: auto;
color: #333;
}
/* Toggle for Light/Dark Mode */
#toggle-theme {
margin: 10px;
cursor: pointer;
color: var(--primary-color);
}
/* Responsive Design */
@media (max-width: 768px) {
body {
padding: 8px;
}
#container, #results {
width: 100%;
padding: 12px;
font-size: 16px;
}
textarea {
height: 120px;
}
button {
width: 100%;
}
}
|