Problems with progress and draggable elements

[vhanadium]

Hi,

Your method render draggable true element not draggable and progress bar impossible to modify with css.

Had to fix by modifying the first line like this for the moment: :where(:not(iframe,canvas,img,svg,video,progress):not(svg ,symbol *)){all:unset;display:revert}

I'm on Safari but the problems was tested with Firefox and Chrome too

For Safari you have to revert -webkit-user-drag so let's assume you have to revert user-drag too. using [draggable=true] {-webkit-user-drag: element;} not sure on the user-drag usage at the moment (not tested on chrome and firefox and every element I want to be draggable are draggable="true" of course)

sorry for my poor English.

[elad2412]

The main idea of this new CSS reset is to reset the basic style of the browser. From my perspective, the reset of progress is fOK; you need to define its size styles.

For example: if you add: progress {width:100px; height:20px;} And then, you will see the progress bar.

For the draggable part, I add this fix in the new version :-) (1.4.4)

[vhanadium]

The problem on resetting the progress render css such as this not functional on my project will dig it more if I have the time:

    input[type="file"] ~ ul li progress {
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
    }
    input[type="file"] ~ ul li progress::-webkit-progress-bar {
        background-color: var(--gris);
        border-radius: var(--radius);
    }

    input[type="file"] ~ ul li progress::-moz-progress-bar {
        border-radius: var(--radius);
        background-color: var(--couleur);
    }
    input[type="file"] ~ ul li progress::-webkit-progress-value {
        border-radius: var(--radius);
        background-color: var(--couleur);
    }

    input[type="file"] ~ ul li.fin span {
        color: var(--vert);
    }
    input[type="file"] ~ ul li.fin progress::-moz-progress-bar {
        background-color: var(--vert);
    }
    input[type="file"] ~ ul li.fin progress::-webkit-progress-value {
        background-color: var(--vert);
    }
    input[type="file"] ~ ul li.erreur span {
        color: var(--rouge);
    }
    input[type="file"] ~ ul li.erreur progress::-moz-progress-bar {
        background-color: var(--rouge);
    }
    input[type="file"] ~ ul li.erreur progress::-webkit-progress-value {
        background-color: var(--rouge);
    }

[elad2412]

@vhanadium can you please add codepen.io example, that I will understand what you mean by that :-)

[vhanadium]

Well https://codepen.io/vhanadium/pen/MWEEWBX

it seems to work but wasn't before Monterey. like I said will have more test to do on my part.