styled forms and imput fields

This commit is contained in:
Jorge vitrubio.net 2024-04-02 19:15:43 +02:00
parent 1140149ac9
commit 2a7d702e6f
7 changed files with 82 additions and 13 deletions

View File

@ -1385,30 +1385,64 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"],
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea {
color: #111;
background-color: #eee;
border: none;
background-color: transparent;
border: 0.05rem solid #000;
border-radius: 0;
width: 100%;
padding: 0.3rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="text"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="text"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="text"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="email"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="email"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="email"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="url"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="url"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="url"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="password"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="password"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="password"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="search"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="search"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="search"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="number"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="number"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="number"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="tel"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="tel"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="tel"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="range"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="range"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="range"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="date"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="date"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="date"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="month"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="month"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="month"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="week"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="week"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="week"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="time"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="time"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="time"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime-local"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime-local"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="datetime-local"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"]:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea:focus {
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"]:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="color"]:focus-visible,
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea:focus,
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea:focus-within,
.edit-post-visual-editor__content-area .editor-styles-wrapper textarea:focus-visible {
color: #000;
box-shadow: none;
outline: unset;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper select {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -33,7 +33,7 @@ $color__background-hr: $color__black;
$color__background-button: $color__black;
$color__background-pre: $color__grey-lighter;
$color__background-ins: $color__white-dark;
$color__background-input: $color__grey-lighter;
$color__background-input: transparent;
$color__text-screen: $color__black;
$color__text-input: $color__black-grey;

View File

@ -16,13 +16,14 @@ input[type="color"],
textarea {
color: $color__text-input;
background-color: $color__background-input;
border: none;
border: $border__line;
border-radius: 0;
width: 100%;
padding: 0.3rem;
&:focus {
&:focus,&:focus-within,&:focus-visible {
color: $color__text-input-focus;
box-shadow: none;
outline: unset;
}
}

View File

@ -1246,30 +1246,64 @@ input[type="datetime-local"],
input[type="color"],
textarea {
color: #111;
background-color: #eee;
border: none;
background-color: transparent;
border: 0.05rem solid #000;
border-radius: 0;
width: 100%;
padding: 0.3rem;
}
input[type="text"]:focus,
input[type="text"]:focus-within,
input[type="text"]:focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-within,
input[type="email"]:focus-visible,
input[type="url"]:focus,
input[type="url"]:focus-within,
input[type="url"]:focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-within,
input[type="password"]:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-within,
input[type="search"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-within,
input[type="number"]:focus-visible,
input[type="tel"]:focus,
input[type="tel"]:focus-within,
input[type="tel"]:focus-visible,
input[type="range"]:focus,
input[type="range"]:focus-within,
input[type="range"]:focus-visible,
input[type="date"]:focus,
input[type="date"]:focus-within,
input[type="date"]:focus-visible,
input[type="month"]:focus,
input[type="month"]:focus-within,
input[type="month"]:focus-visible,
input[type="week"]:focus,
input[type="week"]:focus-within,
input[type="week"]:focus-visible,
input[type="time"]:focus,
input[type="time"]:focus-within,
input[type="time"]:focus-visible,
input[type="datetime"]:focus,
input[type="datetime"]:focus-within,
input[type="datetime"]:focus-visible,
input[type="datetime-local"]:focus,
input[type="datetime-local"]:focus-within,
input[type="datetime-local"]:focus-visible,
input[type="color"]:focus,
textarea:focus {
input[type="color"]:focus-within,
input[type="color"]:focus-visible,
textarea:focus,
textarea:focus-within,
textarea:focus-visible {
color: #000;
box-shadow: none;
outline: unset;
}
select {

File diff suppressed because one or more lines are too long