|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- [data-target="upload-images.input"] {
- width: 0.1px;
- height: 0.1px;
- opacity: 0;
- overflow: hidden;
- position: absolute;
- z-index: -1;
- }
- [data-target="upload-images.input"] + label {
- font-size: 1.25em;
- font-weight: 700;
- color: white;
- background-color: black;
- display: inline-block;
- padding: 1rem;
- }
- [data-target="upload-images.input"]:focus + label,
- [data-target="upload-images.input"] + label:hover {
- background-color: red;
- }
- [data-target="upload-images.input"] + label {
- cursor: pointer; /* "hand" cursor */
- }
- [data-target="upload-images.input"]:focus + label {
- outline: thin dotted;
- outline: -webkit-focus-ring-color auto 5px;
- }
- [data-target="upload-images.input"]:focus-within + label {
- outline: thin dotted;
- outline: -webkit-focus-ring-color auto 5px;
- }
- [data-target="upload-images.input"] + label * {
- pointer-events: none;
- }
-
- [data-target="upload-images.output"] img {
- max-width: 30rem;
- }
- [data-target="upload-images.output"].oversized {
- background: red;
- height: 4rem;
- padding: 1rem 2rem;
- }
-
- [data-target="upload-images.dropzone"] {
- border: 5px solid black;
- margin: 2rem auto;
- min-width: 30rem;
- }
- [data-target="upload-images.dropzone"].hidden {
- display: none;
- }
- [data-target="upload-images.dropzone"]:hover,
- [data-target="upload-images.dropzone"].active {
- border-color: red;
- cursor: pointer; /* "hand" cursor */
- }
-
- [data-target="upload-images.submit"] {
- width: 30rem;
- font-size: 2rem;
- }
|