[Client] Display JavaScript requirement alert dialog on admin pages which require it and change yellow color
- Display JavaScript requirement alert dialog as a fixed element centered horizontally and vertically; - Use light gold color as the yellow color of admin pages.
This commit is contained in:
parent
bec8f87620
commit
b2c9268168
@ -13,7 +13,8 @@
|
|||||||
--admin-grey-color: #5A5656;
|
--admin-grey-color: #5A5656;
|
||||||
--admin-red-color: #FF0000;
|
--admin-red-color: #FF0000;
|
||||||
--admin-white-color: #FFFFFF;
|
--admin-white-color: #FFFFFF;
|
||||||
--adming-yellow-color: #FFC800;
|
--adming-yellow-color: #D6A851;
|
||||||
|
--alert-dialog-background-color: #000000DF;
|
||||||
--body-margin: 0.375em;
|
--body-margin: 0.375em;
|
||||||
font-family: "Roboto Mono", sans-serif;
|
font-family: "Roboto Mono", sans-serif;
|
||||||
}
|
}
|
||||||
@ -26,6 +27,15 @@ a, body {
|
|||||||
color: var(--admin-white-color);
|
color: var(--admin-white-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a:focus, a:hover {
|
||||||
|
background-color: var(--admin-white-color);
|
||||||
|
color: var(--admin-grey-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus > .action_icon, .action_button:focus > .action_icon, a:hover > .action_icon, .action_button:hover > .action_icon {
|
||||||
|
fill: var(--admin-grey-color);
|
||||||
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: unset;
|
color: unset;
|
||||||
}
|
}
|
||||||
@ -72,20 +82,30 @@ header a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus, a:hover {
|
|
||||||
background-color: var(--admin-white-color);
|
|
||||||
color: var(--admin-grey-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:focus > .action_icon, .action_button:focus > .action_icon, a:hover > .action_icon, .action_button:hover > .action_icon {
|
|
||||||
fill: var(--admin-grey-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: var(--admin-grey-color);
|
background-color: var(--admin-grey-color);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
noscript dialog {
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--admin-grey-color);
|
||||||
|
border-color: var(--admin-white-color);
|
||||||
|
border-radius: 1em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
left: 50%;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 2em;
|
||||||
|
position: fixed;
|
||||||
|
text-align: center;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: var(--admin-white-color);
|
fill: var(--admin-white-color);
|
||||||
}
|
}
|
||||||
@ -101,6 +121,29 @@ svg {
|
|||||||
width: 2em;
|
width: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alert_dialog_background {
|
||||||
|
background-color: var(--alert-dialog-background-color);
|
||||||
|
display: block;
|
||||||
|
height: 100vh;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert_dialog_msg {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert_dialog_msg, .alert_dialog_title {
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert_dialog_title {
|
||||||
|
font-size: 1.75em;
|
||||||
|
}
|
||||||
|
|
||||||
.page_category {
|
.page_category {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
@ -133,13 +176,3 @@ svg {
|
|||||||
transition-duration: 0.25s;
|
transition-duration: 0.25s;
|
||||||
transition-timing-function: linear;
|
transition-timing-function: linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
#places>section {
|
|
||||||
border: thin solid red;
|
|
||||||
padding: 5px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#section>input{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user