CSS for new theming

[DustinBracy]

The CSS no longer matches the Directus admin interface after the new custom theming release. I was able to paste the following into the Custom CSS box to make the styling match. I'm not the best with .css, but this may help someone else, so I thought I'd post it here.

.masked-interface {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--theme--form--field--input--height);
    color: var(--v-input-color, var(--theme--form--field--input--foreground));
    font-family: var(--v-input-font-family, var(--theme--fonts--sans--font-family));
    background-color: var(--v-input-background-color, var(--theme--form--field--input--background));
    border: var(--theme--border-width) solid var(--v-input-border-color, var(--theme--form--field--input--border-color));
    border-color: var(--v-input-border-color, var(--theme--form--field--input--border-color));
    border-radius: var(--v-input-border-radius, var(--theme--border-radius));
    transition: var(--fast) var(--transition);
    transition-property: border-color,box-shadow;
    box-shadow: var(--theme--form--field--input--box-shadow);
    &:hover {
        background-color: var(--theme--form--field--input--background);
    	border-color: var(--v-input-border-color-hover, var(--theme--form--field--input--border-color-hover));
    	box-shadow: var(--theme--form--field--input--box-shadow-hover);
	}

    &:focus-within{
        background-color: var(--theme--form--field--input--background);
    	border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
    	box-shadow: var(--theme--form--field--input--box-shadow-focus);
    }
    
    .input{
        height: 100% !important;
        padding: var(--theme--form--field--input--padding) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
        &:focus-within{
            --arrow-color: var(--v-input-border-color-hover, var(--theme--form--field--input--border-color-hover));
            color: var(--v-input-color);
            background-color: var(--theme--form--field--input--background);
            border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
            box-shadow: var(--theme--form--field--input--box-shadow);
		}

    }
    input{
        padding: var(--theme--form--field--input--padding) !important;
        font-family: var(--v-input-font-family, var(--theme--fonts--sans--font-family)) !important;
        background-color: transparent !important;
        border: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        &:focus-within{
            --arrow-color: var(--v-input-border-color-hover, var(--theme--form--field--input--border-color-hover));
            color: var(--v-input-color);
            background-color: var(--theme--form--field--input--background);
            border-color: var(--v-input-border-color-focus, var(--theme--form--field--input--border-color-focus));
            box-shadow: var(--theme--form--field--input--box-shadow);
		}
    }
}

[ImaCrea]

Thanks @DustinBracy I refined it as I found out some things were not fully working on my side.

Here it is:

/* Fix masked extension input with new theming
---------------------------*/
.masked-interface {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--theme--form--field--input--height);
    color: var(--theme--form--field--input--foreground);
    font-family: var(--theme--fonts--sans--font-family);
    background-color: var(--theme--form--field--input--background);
    border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
    border-color: var(--theme--form--field--input--border-color);
    border-radius: var(--theme--border-radius);
    transition: var(--fast) var(--transition);
    transition-property: border-color,box-shadow;
    box-shadow: var(--theme--form--field--input--box-shadow);
    &:hover {
        background-color: var(--theme--form--field--input--background);
    	border-color: var(--v-input-border-color-hover, var(--theme--form--field--input--border-color-hover));
    	box-shadow: var(--theme--form--field--input--box-shadow-hover);
	}

    &:focus-within{
        background-color: var(--theme--form--field--input--background-focus);
    	border-color: var(--theme--form--field--input--border-color-focus);
  		box-shadow: var(--theme--form--field--input--box-shadow-focus);
    }
    .input input::placeholder {
        color: var(--theme--foreground-subdued) !important;
    }
    .input{
        height: 100% !important;
        padding: var(--theme--form--field--input--padding) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
        &:focus-within{
            --arrow-color: var(--theme--form--field--input--border-color-hover);
            color: var(--v-input-color);
            background-color: var(--theme--form--field--input--background);
            border-color: var(--theme--form--field--input--border-color-focus);
            box-shadow: var(--theme--form--field--input--box-shadow);
		}

    }
    input{
        padding: var(--theme--form--field--input--padding) !important;
        font-family: var(--v-input-font-family), var(--theme--fonts--sans--font-family) !important;
        background-color: transparent !important;
        border: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        &:focus-within{
            --arrow-color: var(--v-input-border-color-hover), var(--theme--form--field--input--border-color-hover);
            color: var(--v-input-color);
            background-color: var(--theme--form--field--input--background);
            border-color: var(--v-input-border-color-focus), var(--theme--form--field--input--border-color-focus);
            box-shadow: var(--theme--form--field--input--box-shadow);
		}
    }
}

Not a css expert neither, hope it helps. thanks!

[ImaCrea]

I wonder if @dimitrov-adrian would accept a PR in order to update directly the component 🤔