diff options
Diffstat (limited to 'styles.css')
| -rw-r--r-- | styles.css | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..994c882 --- /dev/null +++ b/styles.css @@ -0,0 +1,329 @@ +body { + background-color: #333; + font-family: sans-serif; +} + +.title { + color: #ddd; + font-size: 38px; + user-select: none; + text-align: center; + margin-bottom: 20px; + min-height: 38px; + cursor: pointer; +} + +.title label { + cursor: pointer; +} + +.title input { + display: none; + background: transparent; + border: 0px; + color: #ddd; + font-size: 38px; +} + +.title input:focus { + background: #666; +} + +.main-content { + display: flex; + flex-flow: column; +} + +.main-content.vertical { + flex-flow: row !important; +} + +.vertical .tierlist { + width: 80%; +} + +.toggleable-container { + display: flex; + flex-flow: column; + flex-grow: 1; +} + +.tierlist span { + min-width: 100px; + min-height: 100px; + display: flex; + align-items: center; + flex-flow: row; + font-size: 30px; + font-family: sans-serif; + border: 0; + padding: 0; +} + +.tierlist div.row { + border: 0px solid #666; + border-top-width: 1px; + border-right-width: 1px; + display: flex; + user-select: none; +} + +.tierlist div:last-child { + border-bottom-width: 1px !important; +} + +.tierlist div.row:hover { + background-color: #666; +} + +.tierlist div.row.drag-entered { + background-color: #888; +} + +span.header { + justify-content: center; + align-self: stretch; + cursor: pointer; +} + +span.header label { + cursor: pointer; +} + +span.header input[type=text] { + display: none; + height: 50px; + font-size: 30px; + text-align: center; +} + +span.items { + display: flex; + flex-wrap: wrap; + flex-grow: 1; + justify-content: left; + pointer-events: none; + height: fit-content; +} + +span.item { + pointer-events: auto; +} + +.images { + display: flex; + border: 1px solid #666; + height: 200px; + overflow-y: auto; + flex-wrap: wrap; + flex-grow: 1; + width: 100%; + align-content: flex-start; +} + +.images.drag-entered { + background-color: #888; +} + +img.draggable { + cursor: grab; + max-height: 100px; + width: auto; + height: auto; + object-fit: contain; +} + +img.draggable:hover, .button:hover { + filter: brightness(0.6); +} + +img.draggable.dragged, .button:active { + filter: brightness(0.4); +} + +.button img { + user-select: none; + width: 100px; +} + +.bottom-container { + display: flex; + flex-flow: row; + align-items: center; + margin-top: 15px; + flex-grow: 1; +} + +.vertical .bottom-container { + flex-flow: column !important; + margin-left: 15px; + margin-top: 0px !important; +} + +.bottom-container input { + border: 0; + padding: 0; + display: none; +} + +.bottom-container > div { + margin: 0; +} + +.button { + border: 1px solid #666; + height: 100px; +} + +.row-buttons { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: space-evenly; + opacity: 0.2; + transition: 200ms linear; +} + +.row-buttons:hover { + opacity: 1; + transition: 200ms linear; +} + +.buttons-container { + display: flex; + flex-wrap: wrap; + width: 270px; +} + +.vertical .buttons-container { + justify-content: center; +} + +.gh-link { + position: absolute; + top: 5px; + color: #ccc; + text-decoration: none; +} + +.top-container { + position: absolute; + top: 5px; + right: 5px; + height: 60px; + display: flex; + flex-flow: row; +} + +.top-container * { + height: 100%; + overflow: hidden; + margin: 0; + padding-left: 5px; + padding-right: 5px; + border: 0; +} + +.top-container input { + border: 0; + padding: 0; + display: none; +} + +#trash { + opacity: 0.4; +} + +#trash:hover { + opacity: 1; +} + +.hint { + font-style: italic; + font-size: small; + color: #ccc; + padding: 0px 10px; +} + +.modal { + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + display: none; + align-items: center; + justify-content: center; +} + + +.modal-content { + background-color: #444; + padding: 30px; + border-radius: 10px; + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7); + width: 90%; + max-width: 800px; + max-height: 90vh; + text-align: center; + color: #ddd; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; +} + +#modal-img { + max-width: 100%; + max-height: 40vh; + object-fit: contain; + border-radius: 5px; + margin-bottom: 10px; +} + +#modal-title { + width: 80%; + padding: 8px 15px; + margin: 10px auto; + border: 1px solid #666; + border-radius: 5px; + font-size: 16px; + background-color: #333; + color: #ddd; + text-align: center; +} + +#modal-description { + width: 80%; + height: 25vh; + padding: 12px 15px; + margin: 10px auto; + border: 1px solid #666; + border-radius: 5px; + font-size: 14px; + background-color: #333; + color: #ddd; + resize: vertical; +} + +#modal-title:focus { + outline: none; + border-color: #4a4a4a; + background-color: #3a3a3a; +} + +#modal-save { + background: #2c662f; + color: #ddd; + border: none; + padding: 12px 25px; + cursor: pointer; + margin-top: 15px; + border-radius: 5px; + font-size: 16px; + transition: background-color 0.2s ease; + align-self: center; + min-width: 120px; +}
\ No newline at end of file |