Spaces:
Running
Running
File size: 3,373 Bytes
ede319b 6698e77 ede319b 399ed0b 314207d edbcb1b c5b0138 6698e77 314207d c5b0138 399ed0b 314207d c5b0138 314207d c5b0138 399ed0b c5b0138 314207d 3e952bc c5b0138 314207d c5b0138 399ed0b c5b0138 399ed0b c5b0138 314207d c5b0138 314207d c5b0138 399ed0b c5b0138 4258406 c5b0138 399ed0b 3e952bc 399ed0b c5b0138 ede319b 399ed0b 4258406 c5b0138 399ed0b c5b0138 4258406 c5b0138 314207d c5b0138 4589db1 c5b0138 4589db1 c5b0138 4589db1 71654ae 028b203 71654ae |
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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Basic Resets & Body */
html, body {
margin: 0;
padding: 0;
font-family: 'Lora', 'Roboto', sans-serif;
background-color: #fefdf6; /* Off-white background */
color: #333;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
/* Header spanning full width */
header {
width: 100%;
background-color: #fff;
padding: 1rem 2rem;
border-bottom: 1px solid #ddd;
}
header h1 {
margin: 0;
font-size: 1.8rem;
font-weight: 100;
}
/*
Container that splits the page:
left (main) ~75%, right (aside) ~25%
*/
.container {
display: flex;
flex-direction: row;
min-height: calc(100vh - 60px); /* Keep some height below header */
}
/* Main content on the left */
.container main {
width: 75%;
padding: 2rem;
box-sizing: border-box;
}
/* The aside on the right can be used or left empty */
.container aside {
width: 25%;
padding: 2rem;
box-sizing: border-box;
background-color: #fffff8;
}
/* ABOUT / DEEP GAZE SECTIONS */
.about-section {
margin-bottom: 2rem;
}
.about-section h2 {
font-size: 1.4rem;
margin-bottom: 1rem;
font-weight: 100;
font-style: italic;
}
.about-section p {
line-height: 1.6;
margin-bottom: 1rem;
}
.deep-gaze-section h2 {
font-size: 1.4rem;
margin-bottom: 0.5rem;
font-weight: 100;
font-style: italic;
}
.deep-gaze-section p {
margin-bottom: 1rem;
line-height: 1.6;
}
/* Selection & Text Form Styles */
.selection-form,
.text-form {
margin-bottom: 1.5rem;
}
.selection-form label {
margin-right: 0.5rem;
}
.selection-form select {
margin-right: 1rem;
}
.text-form {
display: flex;
flex-direction: column;
align-items: flex-start;
border: none;
}
textarea {
width: 100%;
max-width: 100%;
font-size: 2rem;
font-weight: 700;
margin-bottom: 2rem;
border: none;
resize: none;
font-family: 'Roboto', sans-serif;
background-color: #fffff8;
color: #3a3939;
border-radius: 8px;
padding: 20px;
filter: drop-shadow(0 0 0.75rem #ddd);
}
textarea::placeholder {
color: #888;
font-family: 'Roboto', sans-serif;
font-size:2rem;
font-weight: 700;
}
button {
background-color: #4b80f9;
color: white;
border: none;
border-radius: 4px;
padding: 0.6rem 1rem;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #3f6ddb;
}
/* Output Area */
#output {
background-color: #fff;
border: 1px solid #ddd;
padding: 1rem;
margin-bottom: 1rem;
max-height: 300px;
overflow-y: auto;
}
#output h2 {
margin-top: 0;
font-size: 1.2rem;
}
/* Token Container */
#tokenContainer {
margin-top: 1rem;
}
/* Token highlighting styles */
#tokenContainer span {
cursor: default;
transition: font-size 0.9s ease;
color: #555;
display: inline-block;
transition: font-size 0.9s ease;
margin-right: 4px;
padding: 2px 4px;
}
.text-form button {
background-color: #800000; /* Bordo red */
color: #fff; /* Optional: set text color to white for contrast */
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#credits {
font-size: 0.8rem;
color: #888;
margin-top: 1rem;
font-style: italic;
} |