| @@ -6,21 +6,42 @@ | ||
| 6 | 6 | * @author Tobias Bäthge |
| 7 | 7 | * @since 1.0.0 |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | +/* Red border for form fields that have invalid values */ | |
| 11 | +#tablepress-page form .postbox:not(.no-validation-highlighting) :invalid { | |
| 12 | + border-color: #d63638 !important; | |
| 13 | + box-shadow: 0 0 0 1px #d63638; | |
| 14 | +} | |
| 15 | + | |
| 16 | +#tablepress_import-import-form { | |
| 17 | + /* Show RadioButtons next to each other (by default the component uses VStack). */ | |
| 18 | + .components-radio-control__group-wrapper { | |
| 19 | + flex-direction: row; | |
| 20 | + justify-content: flex-start; | |
| 21 | + gap: 20px; | |
| 22 | + } | |
| 23 | + | |
| 24 | + /* ComboboxControl can only be disabled artificially. */ | |
| 25 | + .components-disabled .components-combobox-control { | |
| 26 | + opacity: 0.7; | |
| 27 | + } | |
| 28 | +} | |
| 29 | + | |
| 10 | 30 | .file-upload-area { |
| 11 | 31 | width: 100%; |
| 12 | 32 | position: relative; |
| 33 | + margin-bottom: -8px; | |
| 13 | 34 | |
| 14 | 35 | .dropzone { |
| 15 | 36 | background-color: #f5f5f5; |
| 16 | 37 | border: 2px dashed #ddd; |
| 17 | - border-radius: 4px; | |
| 38 | + border-radius: 2px; | |
| 18 | 39 | font-size: 18px; |
| 19 | 40 | box-sizing: border-box; |
| 20 | 41 | padding: 20px; |
| 21 | 42 | margin-bottom: 10px; |
| 22 | - transition: background 0.3s ease-in-out; | |
| 43 | + transition: background-color 0.3s ease-in-out; | |
| 23 | 44 | width: 100%; |
| 24 | 45 | min-height: 180px; |
| 25 | 46 | display: flex; |
| 26 | 47 | flex-direction: column; |
| @@ -38,9 +59,9 @@ | ||
| 38 | 59 | border: 2px dashed #cccccc; |
| 39 | 60 | background: #ffffff; |
| 40 | 61 | } |
| 41 | 62 | |
| 42 | - .js & #tables-import-file-upload { | |
| 63 | + #tables-import-file-upload { | |
| 43 | 64 | position: absolute; |
| 44 | 65 | width: 100%; |
| 45 | 66 | height: 100%; |
| 46 | 67 | top: 0; |
| @@ -48,8 +69,10 @@ | ||
| 48 | 69 | right: 0; |
| 49 | 70 | bottom: 0; |
| 50 | 71 | opacity: 0; |
| 51 | 72 | cursor: pointer; |
| 73 | + border: 1px solid transparent; | |
| 74 | + border-radius: 2px; | |
| 52 | 75 | |
| 53 | 76 | &:valid + .dropzone, |
| 54 | 77 | + .dropzone.dragover { |
| 55 | 78 | border-color: rgba(0, 255, 0, 0.4); |
| @@ -57,73 +80,13 @@ | ||
| 57 | 80 | } |
| 58 | 81 | |
| 59 | 82 | /* :focus style after :valid style to allow for both. */ |
| 60 | 83 | &:focus + .dropzone { |
| 61 | - border-color: #2271b1; | |
| 84 | + border-color: var(--wp-admin-theme-color); | |
| 85 | + outline: 2px solid #00000000; | |
| 62 | 86 | } |
| 63 | 87 | } |
| 64 | 88 | |
| 65 | 89 | .postbox:not(.no-validation-highlighting) & #tables-import-file-upload:invalid + .dropzone { |
| 66 | - border-color: #cc0000; | |
| 67 | - } | |
| 68 | -} | |
| 69 | - | |
| 70 | -/* Style the artificial dropdown like a WP Core select field. */ | |
| 71 | -.jdropdown { | |
| 72 | - width: 100%; | |
| 73 | - | |
| 74 | - .jdropdown-header { | |
| 75 | - /* stylelint-disable-next-line function-url-quotes */ | |
| 76 | - background: #ffffff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") no-repeat right 5px top 55%; | |
| 77 | - background-size: 16px 16px; | |
| 78 | - padding: 0 24px 0 8px; | |
| 79 | - border-color: #8c8f94; | |
| 80 | - border-radius: 3px; | |
| 81 | - | |
| 82 | - &:hover, | |
| 83 | - &:hover::placeholder { | |
| 84 | - color: #2271b1; | |
| 85 | - } | |
| 86 | - | |
| 87 | - &:focus { | |
| 88 | - border-color: #2271b1; | |
| 89 | - color: #0a4b78; | |
| 90 | - box-shadow: 0 0 0 1px #2271b1; | |
| 91 | - } | |
| 92 | - | |
| 93 | - &:focus::placeholder { | |
| 94 | - color: #0a4b78; | |
| 95 | - } | |
| 96 | - | |
| 97 | - &:active { | |
| 98 | - border-color: #8c8f94; | |
| 99 | - box-shadow: none; | |
| 100 | - } | |
| 101 | - } | |
| 102 | - | |
| 103 | - /* Prevent overflowing of the expanded list of options. */ | |
| 104 | - .jdropdown-container { | |
| 105 | - max-width: 100%; | |
| 106 | - } | |
| 107 | - | |
| 108 | - /* Style the disabled state via a class, as the artificial dropdown can not use :disabled. */ | |
| 109 | - &.disabled { | |
| 110 | - pointer-events: none; | |
| 111 | - | |
| 112 | - .jdropdown-header { | |
| 113 | - color: #a7aaad; | |
| 114 | - border-color: #dcdcde; | |
| 115 | - background-color: #f6f7f7; | |
| 116 | - /* The SVG is arrow-down-alt2 from Dashicons. */ | |
| 117 | - /* stylelint-disable-next-line function-url-quotes */ | |
| 118 | - background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E"); | |
| 119 | - box-shadow: none; | |
| 120 | - text-shadow: 0 1px 0 #ffffff; | |
| 121 | - cursor: default; | |
| 122 | - transform: none; | |
| 123 | - | |
| 124 | - &::placeholder { | |
| 125 | - color: #a7aaad; | |
| 126 | - } | |
| 127 | - } | |
| 90 | + border-color: #d63638; | |
| 128 | 91 | } |
| 129 | 92 | } |
