| @@ -8,25 +8,36 @@ | ||
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | 10 | /* Red border for form fields that have invalid values */ |
| 11 | 11 | #tablepress-page form .postbox:not(.no-validation-highlighting) :invalid { |
| 12 | - border-color: #cc0000 !important; | |
| 13 | - box-shadow: 0 0 0 1px #cc0000; | |
| 12 | + border-color: #d63638 !important; | |
| 13 | + box-shadow: 0 0 0 1px #d63638; | |
| 14 | 14 | } |
| 15 | 15 | |
| 16 | -/* Adjust positioning of labels in relation to checkboxes/radio buttons */ | |
| 17 | -#tablepress_import-import-form .column-2 label { | |
| 18 | - margin-right: 24px; /* some margin on radio buttons */ | |
| 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 | + .components-radio-control > div > .components-v-stack { /* WP < 6.7 */ | |
| 20 | + flex-direction: row; | |
| 21 | + justify-content: flex-start; | |
| 22 | + gap: 20px; | |
| 23 | + } | |
| 24 | + | |
| 25 | + /* ComboboxControl can only be disabled artificially. */ | |
| 26 | + .components-disabled .components-combobox-control { | |
| 27 | + opacity: 0.7; | |
| 28 | + } | |
| 19 | 29 | } |
| 20 | 30 | |
| 21 | 31 | .file-upload-area { |
| 22 | 32 | width: 100%; |
| 23 | 33 | position: relative; |
| 34 | + margin-bottom: -8px; | |
| 24 | 35 | |
| 25 | 36 | .dropzone { |
| 26 | 37 | background-color: #f5f5f5; |
| 27 | 38 | border: 2px dashed #ddd; |
| 28 | - border-radius: 4px; | |
| 39 | + border-radius: 2px; | |
| 29 | 40 | font-size: 18px; |
| 30 | 41 | box-sizing: border-box; |
| 31 | 42 | padding: 20px; |
| 32 | 43 | margin-bottom: 10px; |
| @@ -60,9 +71,9 @@ | ||
| 60 | 71 | bottom: 0; |
| 61 | 72 | opacity: 0; |
| 62 | 73 | cursor: pointer; |
| 63 | 74 | border: 1px solid transparent; |
| 64 | - border-radius: 4px; | |
| 75 | + border-radius: 2px; | |
| 65 | 76 | |
| 66 | 77 | &:valid + .dropzone, |
| 67 | 78 | + .dropzone.dragover { |
| 68 | 79 | border-color: rgba(0, 255, 0, 0.4); |
| @@ -70,78 +81,13 @@ | ||
| 70 | 81 | } |
| 71 | 82 | |
| 72 | 83 | /* :focus style after :valid style to allow for both. */ |
| 73 | 84 | &:focus + .dropzone { |
| 74 | - border-color: #2271b1; | |
| 85 | + border-color: var(--wp-admin-theme-color); | |
| 86 | + outline: 2px solid #00000000; | |
| 75 | 87 | } |
| 76 | 88 | } |
| 77 | 89 | |
| 78 | 90 | .postbox:not(.no-validation-highlighting) & #tables-import-file-upload:invalid + .dropzone { |
| 79 | - border-color: #cc0000; | |
| 80 | - } | |
| 81 | -} | |
| 82 | - | |
| 83 | -/* Style the artificial dropdown like a WP Core select field. */ | |
| 84 | -.jdropdown { | |
| 85 | - width: 100%; | |
| 86 | - | |
| 87 | - /* Show the dropdown above WP Core UI elements on small screens (< 800px width). */ | |
| 88 | - &.jdropdown-searchbar.jdropdown-focus { | |
| 89 | - z-index: 100000; | |
| 90 | - } | |
| 91 | - | |
| 92 | - .jdropdown-header { | |
| 93 | - /* stylelint-disable-next-line function-url-quotes */ | |
| 94 | - 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%; | |
| 95 | - background-size: 16px 16px; | |
| 96 | - padding: 0 24px 0 8px; | |
| 97 | - border-color: #8c8f94; | |
| 98 | - border-radius: 3px; | |
| 99 | - | |
| 100 | - &:hover, | |
| 101 | - &:hover::placeholder { | |
| 102 | - color: #2271b1; | |
| 103 | - } | |
| 104 | - | |
| 105 | - &:focus { | |
| 106 | - border-color: #2271b1; | |
| 107 | - color: #0a4b78; | |
| 108 | - box-shadow: 0 0 0 1px #2271b1; | |
| 109 | - } | |
| 110 | - | |
| 111 | - &:focus::placeholder { | |
| 112 | - color: #0a4b78; | |
| 113 | - } | |
| 114 | - | |
| 115 | - &:active { | |
| 116 | - border-color: #8c8f94; | |
| 117 | - box-shadow: none; | |
| 118 | - } | |
| 119 | - } | |
| 120 | - | |
| 121 | - /* Prevent overflowing of the expanded list of options. */ | |
| 122 | - .jdropdown-container { | |
| 123 | - max-width: 100%; | |
| 124 | - } | |
| 125 | - | |
| 126 | - /* Style the disabled state via a class, as the artificial dropdown can not use :disabled. */ | |
| 127 | - &.disabled { | |
| 128 | - pointer-events: none; | |
| 129 | - | |
| 130 | - .jdropdown-header { | |
| 131 | - color: #a7aaad; | |
| 132 | - border-color: #dcdcde; | |
| 133 | - background-color: #f6f7f7; | |
| 134 | - /* The SVG is arrow-down-alt2 from Dashicons. */ | |
| 135 | - /* stylelint-disable-next-line function-url-quotes */ | |
| 136 | - 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"); | |
| 137 | - box-shadow: none; | |
| 138 | - text-shadow: 0 1px 0 #ffffff; | |
| 139 | - cursor: default; | |
| 140 | - transform: none; | |
| 141 | - | |
| 142 | - &::placeholder { | |
| 143 | - color: #a7aaad; | |
| 144 | - } | |
| 145 | - } | |
| 91 | + border-color: #d63638; | |
| 146 | 92 | } |
| 147 | 93 | } |
