SAE-A2-TruthInquiry/truthinquiry/static/css/admin_ui.css
AudricV 186e66a103
[Client] Improve NPC admin page + move and fix its JavaScript into a separate file
- Style all button and inputs on admin pages with Roboto Mono font (and
sans-serif as a fallback) with 1em font size;
- Remove unneeded transition effect property declaration on text hover, as the
regular declaration is applied when switching from hover state to regular
state.
- Add NPC dedicated stylesheet in which specific NPC style has been added;
- Use an icon where the picture of a NPC is not available (like when adding a
new one) and provide the NPC picture as the picture instead of the edition page
itself;
- Move NPC's JavaScript in a dedicated file, improve its code and fix its
access to DOM elements.
2023-04-01 15:05:19 +02:00

132 lines
2.4 KiB
CSS

/* Custom fonts */
@font-face {
font-display: swap;
font-family: "Roboto Mono";
font-style: normal;
font-weight: 400;
src: url("../fonts/roboto_mono_v22/roboto_mono_v22.woff2") format('woff2'), url("../fonts/roboto_mono_v22/roboto_mono_v22.woff") format('woff'), url("../fonts/roboto_mono_v22/roboto_mono_v22.ttf") format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--admin-grey-color: #5A5656;
--admin-red-color: #FF0000;
--admin-white-color: #FFFFFF;
--adming-yellow-color: #FFC800;
--body-margin: 0.375em;
font-family: "Roboto Mono", sans-serif;
}
a {
text-decoration: none;
}
a, body {
color: var(--admin-white-color);
}
a:visited {
color: unset;
}
body {
margin: var(--body-margin);
}
button, input {
font-family: "Roboto Mono", sans-serif;
font-size: 1em;
}
header {
align-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
header a {
border-radius: 1em;
border-style: solid;
border-width: 0.125em;
font-size: 1.25em;
margin: 1em;
padding: 0.5em;
text-decoration: none;
}
header a:hover {
background-color: var(--admin-white-color);
color: var(--admin-grey-color);
}
html {
background-color: var(--admin-grey-color);
margin: 0;
}
svg {
fill: var(--admin-white-color);
}
.page_category {
font-size: 2em;
}
.page_category, .page_title {
font-weight: bold;
}
.page_category, .page_description, .page_title {
margin: 1em;
text-align: center;
}
.page_description {
font-size: 1.25em;
}
.page_title {
font-size: 3em;
overflow-wrap: anywhere;
}
.short_color_transition {
transition-property: background-color, color;
transition-duration: 0.25s;
transition-timing-function: linear;
}
.short_color_transition:hover {
transition-duration: 0.25s;
transition-timing-function: linear;
}
#places>section {
border: thin solid red;
padding: 5px;
margin-top: 20px;
}
#section>input{
width: 100%;
}
.questionTypeTag{
border: thin solid red;
margin-top: 20px;
}
.questionTypeTag input{
width: 100%;
}
.questionType{
border: thin solid red;
margin-top: 20px;
}
.question input{
width: 100%;
margin: 10px;
}