@charset "UTF-8";
/***
The new CSS reset - version 1.9 (last updated 19.6.2023)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
*/
@import url("https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400;500;600;700&display=swap");
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: initial;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
* {
box-sizing: inherit;
cursor: inherit;
transition-duration: 0.2s;
transition-property: none;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
label.field {
border-radius: 2px;
color: #666;
display: block;
margin: 16px;
max-width: 300px;
padding: 8px;
opacity: 0;
position: relative;
transition-property: opacity;
z-index: 1;
}
label.field span {
color: inherit;
display: block;
font-size: 16px;
height: 20px;
line-height: 20px;
left: 9px;
pointer-events: none;
position: absolute;
top: 32px;
transform: scale(1) translateY(0);
transition-property: color, font-size, top;
z-index: 1;
}
label.field span.required::after {
color: inherit;
content: "*";
display: block;
height: 20px;
left: -20px;
line-height: 20px;
position: absolute;
text-align: center;
top: 0;
width: 20px;
}
.error label.field span {
color: #F02318;
}
label.field .psuedo_select {
background: rgba(255, 255, 255, 0);
position: relative;
border-color: #666;
border-style: solid;
border-width: 0 0 2px 0;
color: #666;
cursor: pointer;
font-size: 20px;
height: 24px;
line-height: 24px;
margin: 24px 32px 0 0;
min-width: 250px;
/*padding-top: 24px;*/
outline: 0;
z-index: 1;
}
label.field .psuedo_select::after {
background: url("data:image/svg+xml;utf8,"), no-repeat;
content: "";
height: 24px;
width: 24px;
position: absolute;
top: 0;
right: 0;
transition-property: background;
}
label.field .psuedo_select .selected {
height: 24px;
left: 1px;
line-height: 24px;
opacity: 0;
position: absolute;
top: 0;
transform: translateY(24px);
transition-property: opacity, transform;
will-change: transform;
}
label.field .psuedo_select ul {
background: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
display: block;
height: 0;
list-style: none;
margin-top: 2px;
opacity: 0;
overflow: hidden;
padding: 0 1px;
pointer-events: none;
transition-property: height, opacity;
width: 100%;
z-index: 2;
position: absolute;
bottom: -2px;
transform: translateY(100%);
}
label.field .psuedo_select ul li {
height: 32px;
padding: 8px 4px;
}
label.field .deselect {
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: -1;
}
label.field.focused {
color: #007BED;
}
label.field.focused .psuedo_select {
border-color: #007BED;
}
label.field.focused .psuedo_select::after {
background: url("data:image/svg+xml;utf8,"), no-repeat;
}
label.field.focused .psuedo_select ul {
opacity: 1;
pointer-events: all;
}
.modern-form {
width: 500px;
margin: 30px auto;
background-color: #fff;
border: solid 1px #ccc;
padding: 20px 10px;
}
.modern-form h3 {
text-align: center;
}
.float-label-field {
border: none;
outline: none;
position: relative;
margin: 0 0 0 0;
padding: 0;
box-sizing: border-box;
}
.float-label-field input {
border: none;
outline: none;
padding: 5px 5px 8px 0px;
width: 100%;
font-size: 18px;
border-bottom: solid 1px #efefef;
}
.float-label-field label {
opacity: 0.5;
position: absolute;
top: 10px;
left: 0px;
transition: all 0.2s ease;
font-size: 18px;
}
.float-label-field.focus label {
color: orange;
}
.float-label-field.focus input {
border-bottom: solid 1px orange;
}
.float-label-field.float label {
opacity: 1;
top: -8px;
font-size: 60%;
transition: all 0.2s ease;
font-weight: bold;
}
.multiple-images-wrap {
min-width: 500px;
max-width: min-content;
margin: 0;
/*position: absolute;*/
/*top: 50%;*/
/*left: 50%;*/
position: relative;
/*transform: translate(-50%,-50%);*/
border-radius: 4px;
border: 2px solid var(--delimiter-color);
box-shadow: 0 1px 2px 0 #c9ced1;
padding: 20px;
margin-bottom: 20px;
}
.multiple-images-file {
position: relative;
max-width: 100%;
font-size: 17px;
font-weight: 600;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.multiple-images-file__input, .multiple-images-file__value {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 3px;
margin-bottom: 14px;
color: var(--admin-text-color);
border: 2px solid var(--delimiter-color);
width: 100%;
}
.multiple-images-file__input--file {
position: absolute;
opacity: 0;
pointer-events: none;
}
.multiple-images-file__input--label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
cursor: pointer;
padding: 15px 17px;
}
.multiple-images-file__input--label:after {
content: attr(data-text-btn);
border-radius: 0;
border-left: 2px solid var(--delimiter-color);
padding: 15px 17px;
margin: -15px -17px;
color: var(--admin-text-color);
cursor: pointer;
transition: 0.2s background-color ease-in-out;
}
.multiple-images-file__input--label:hover:after {
background-color: var(--delimiter-color);
}
.multiple-images-file__value {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--admin-text-color);
padding: 5px 7px;
column-gap: 5px;
}
.multiple-images-file__value--image img {
width: 70px;
}
.multiple-images-file__value:hover:after {
color: var(--admin-text-color);
}
.multiple-images-file__value--remove:hover:after {
color: var(--focus-color);
}
.multiple-images-file__value--remove:after {
content: "\f1f8";
font-family: "Font Awesome 6 Free";
cursor: pointer;
transition: 0.2s all ease-in-out;
}
.multiple-images-file__remove {
display: block;
width: 20px;
height: 20px;
border: 1px solid #000;
}
/*
---------------
---- Fonts ----
---------------
*/
@font-face {
font-family: "Star Trek";
font-style: normal;
font-weight: normal;
src: url("/assets/fonts/star-trek/font-normal.ttf") format("opentype");
}
/*
-------------------
---- Variables ----
-------------------
*/
/* #163e9e - blue */
/* #750f24 - red */
/* #b57305 - yellow */
html {
/* CSS variable storage - START */
--admin-text-color: #000000;
--admin-bg-color: #ffffff;
--delimiter-color: #d5d5d5;
--focus-color: #ffa500;
--site-font: Signika Negative, sans-serif;
--base-size: 10px;
/* oeuf de paques */
/* CSS variable storage - END */
/* Parameters */
font-size: var(--base-size);
}
html.you-a-king {
--admin-text-color: #b57305;
--admin-bg-color: #000000;
--delimiter-color: #750f24;
--focus-color: #163e9e;
--site-font: Star Trek, sans-serif;
}
html body {
font-family: var(--site-font);
background-color: var(--admin-bg-color);
color: var(--admin-text-color);
/*
-----------------------------
---- Base page structure ----
-----------------------------
*/
}
html body * {
font-size: 1.8rem;
}
html body .general-data {
opacity: 0;
visibility: hidden;
height: 0;
width: 0;
position: absolute;
}
html body .general-data > div {
opacity: 0;
}
html body .container {
display: grid;
grid-template-rows: 100px auto 30px;
min-height: 100vh;
/*
------------------------------
---- Base styling classes ----
------------------------------
*/
/*
-----------------------
---- Block styling ----
-----------------------
*/
/*
----------------------
---- Random style ----
----------------------
*/
/*
---------------------------
---- Overwriting style ----
---------------------------
*/
}
html body .container .content {
display: flex;
}
html body .container .content .content-sidebar {
width: 200px;
padding: 20px;
border-right: 1px solid var(--delimiter-color);
}
html body .container .content .content-sidebar .content-sidebar-menu p {
position: relative;
padding: 4px 0;
}
html body .container .content .content-sidebar .content-sidebar-menu p.actif:after {
content: "";
position: absolute;
background-color: var(--admin-text-color);
}
html body .container .content .content-page {
width: 100%;
padding: 20px;
}
html body .container .header {
height: 100px;
display: grid;
align-items: center;
justify-content: center;
flex-wrap: wrap;
border-bottom: 1px solid var(--delimiter-color);
}
html body .container .header .header-intprop p {
margin: 0;
text-align: center;
}
html body .container .header .header-menu .menu {
display: flex;
justify-content: center;
}
html body .container .header .header-menu .menu p {
display: inline-block;
padding: 5px;
}
html body .container footer {
display: flex;
border-top: 1px solid var(--delimiter-color);
align-items: center;
justify-content: center;
}
html body .container h1 {
font-size: 3rem;
}
html body .container h2 {
font-size: 2.8rem;
}
html body .container h3 {
font-size: 2.6rem;
}
html body .container h4 {
font-size: 2.4rem;
}
html body .container h5 {
font-size: 2.2rem;
}
html body .container h6 {
font-size: 2rem;
}
html body .container .sentence-mode:first-letter {
text-transform: capitalize;
}
html body .container .btn {
display: inline-block;
padding: 5px 8px;
border: 1px solid var(--admin-text-color);
margin-top: 3px;
}
html body .container .btn svg {
height: 0.8em;
}
html body .container .btn:hover {
cursor: pointer;
background: var(--delimiter-color);
transition: all 0.13s ease-in-out;
}
html body .container .btn.style1 {
border: 1px solid var(--admin-text-color);
background: var(--admin-bg-color);
}
html body .container .btn.style1:hover {
background: var(--delimiter-color);
}
html body .container .btn.style2 {
border: 1px solid var(--admin-text-color);
background-color: var(--admin-text-color);
color: var(--admin-bg-color);
}
html body .container .btn.style2:hover {
background-color: var(--admin-bg-color);
color: var(--admin-text-color);
}
html body .container .admin-listing-container {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 20px;
margin-top: 20px;
}
html body .container .admin-listing-container .admin-listing-entry {
display: flex;
flex-wrap: nowrap;
border-bottom: 2px solid var(--delimiter-color);
align-items: center;
}
html body .container .admin-listing-container .admin-listing-entry .admin-listing-box {
padding: 10px;
}
html body .container .admin-listing-container .admin-listing-entry .admin-listing-box p {
margin: 0 !important;
}
html body .container .admin-form {
margin-top: 20px;
}
html body .container .admin-form div[class$=-admin]:not(.change-on-change):not(:first-of-type) {
padding: 20px 0 0;
}
html body .container .admin-form textarea {
border: 2px solid var(--delimiter-color);
}
html body .container .login-box {
margin: 60px auto;
max-width: 500px;
width: 100%;
}
html body .container .listing-container .listing-product {
display: flex;
flex-wrap: nowrap;
height: 200px;
align-content: stretch;
justify-content: stretch;
align-items: stretch;
justify-items: stretch;
-webkit-box-shadow: 0px 0px 11px -3px #9C9C9C;
box-shadow: 0px 0px 11px -3px #9C9C9C;
}
html body .container .listing-container .listing-product:not(:first-of-type) {
margin-top: 50px;
}
html body .container .listing-container .listing-product .listing-product-image-container {
width: 25%;
max-width: 250px;
padding: 20px;
}
html body .container .listing-container .listing-product .listing-product-image-container .listing-product-image-image {
height: 100%;
width: 100%;
}
html body .container .listing-container .listing-product .listing-product-info-container {
padding: 20px;
width: 100%;
}
html body .container .file-input-container {
display: flex;
align-items: center;
justify-content: left;
}
html body .container .file-input-container .file-input-image {
width: 55px;
padding: 0 10px 0 0;
}
html body .container .file-input-container .file-input-image .preview {
display: none;
}
html body .container .file-input-container .file-input-image .placeholder {
display: block;
}
html body .container .file-input-container .file-input-field label {
display: inline-block;
cursor: pointer;
margin-top: 0;
}
html body .container .file-input-container .file-input-field label input[type=file] {
display: none;
}
html body .container .file-input-container .file-input-field label .name {
display: none;
}
html body .container .file-input-container .file-input-field label .default {
display: inline;
}
html body .container .file-input-container .file-input-empty:hover {
cursor: pointer;
cursor: hand;
}
html body .container .file-input-container.active .file-input-image .preview {
display: block;
}
html body .container .file-input-container.active .file-input-image .placeholder {
display: none;
}
html body .container .file-input-container.active .file-input-field label .name {
display: inline;
}
html body .container .file-input-container.active .file-input-field label .default {
display: none;
}
html body .container .for-active {
display: none;
}
html body .container .for-inactive {
display: inline;
}
html body .container .active > .for-active {
display: inline;
}
html body .container .active > .for-inactive {
display: none;
}
html body .container .select2.select2-container {
min-width: 240px;
}
html body .container .no-space-left {
margin-left: 0 !important;
padding-left: 0 !important;
}
html body .container label.field {
margin-left: 0;
padding-left: 0;
color: var(--admin-text-color);
}
html body .container label.field span {
left: 0;
}
html body .container label.field.focused {
position: relative;
z-index: 100000000;
}
html body .container label.field.focused .psuedo_select {
border-color: var(--focus-color);
}
html body .container label.field.focused .sentence-mode {
color: var(--focus-color);
}
html body .container label.field .psuedo_select {
color: var(--admin-text-color);
border-color: var(--delimiter-color);
}
html body .container label.field .psuedo_select ul {
max-height: 360px;
overflow: auto;
}
html body .container label.field .psuedo_select ul li {
padding: 2px 4px;
}
html body .container fieldset.float-label-field {
margin-top: 17px;
position: relative;
}
html body .container fieldset.float-label-field input {
border-bottom-color: var(--delimiter-color);
border-bottom-width: 2px;
}
html body .container fieldset.float-label-field input:disabled {
background-color: #ededed;
}
html body .container fieldset.float-label-field label {
font-size: 1.8rem;
}
html body .container fieldset.float-label-field.float label {
font-size: 1.08rem;
}
html body .container fieldset.float-label-field.focus label {
color: var(--focus-color);
}
html body .container fieldset.float-label-field.focus input {
border-bottom-color: var(--focus-color);
}
html body .container fieldset.float-label-field .toggle-password {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
html body .container input:is([type=checkbox], [type=radio]) {
display: flex;
appearance: none;
background: linear-gradient(#777, #888);
height: 2rem;
width: 2rem;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.2) inset, 0 1px 1px 1px rgba(255, 255, 255, 0.2);
}
html body .container input:is([type=checkbox], [type=radio])::after {
color: transparent;
text-shadow: 0 0 0 transparent;
margin: auto;
}
html body .container input:is([type=checkbox], [type=radio])::after:hover {
box-shadow: 0 0 2px 0 #0C0, 0 0 2px 1px rgba(0, 0, 0, 0.25), 0 0 1px 0 #0C0 inset, 0 0 2px 1px rgba(0, 0, 0, 0.35) inset;
transition: all 200ms ease-in;
}
html body .container input:is([type=checkbox], [type=radio]):checked::after {
color: #00C880;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.2);
transition: all 200ms ease-in;
}
html body .container [type=checkbox] {
border-radius: 20%;
}
html body .container [type=checkbox]::after {
content: "✔";
font-size: 1.5rem;
}
html body .container [type=radio] {
border-radius: 50%;
}
html body .container [type=radio]::after {
content: "";
border-radius: 50%;
background: transparent;
font-size: 1.5rem;
flex-basis: 50%;
height: 50%;
background: rgba(0, 0, 0, 0.05);
}
html body .container [type=radio]:checked {
box-shadow: 0 0 2px 0 #0C0, 0 0 2px 1px rgba(0, 0, 0, 0.25), 0 0 1px 0 #0C0 inset, 0 0 2px 1px rgba(0, 0, 0, 0.35) inset;
}
html body .container [type=radio]:checked::after {
background: #0A0;
transition: all 200ms ease-in;
}
html body .container input[type=file].custom {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute !important;
white-space: nowrap;
width: 1px;
}
html body .container .error {
color: #555555;
font-style: italic;
}
html body .container .hide-not-mod {
display: none;
}
/*# sourceMappingURL=css.css.map */