src/Infrastructure/Resources/views/_styles.html.twig
<style>
:root {
--terms-module-black: #000000;
--terms-module-white: #FFFFFF;
--terms-module-dark: #333333;
--terms-module-gray: #BBBBBB;
--terms-module-error: #DF4551;
--terms-module-success: #A1C225;
--terms-module-form-field-placeholder: #999999;
--terms-module-form-field-color: var(--terms-module-dark);
--terms-module-form-field-border-radius: 4px;
--terms-module-button-border-radius: 4px;
--terms-module-version-tag-background: #999999;
--terms-module-version-tag-active-background: var(--terms-module-secondary);
--terms-module-background: #EEEEEE;
--terms-module-primary: #E6007E;
--terms-module-secondary: #FF645B;
--terms-module-tertiary: #2B2468;
--terms-module-icon-not-published: #AAAAAA;
--terms-module-icon-published: var(--terms-module-success);
--terms-module-loader-overlay: rgba(236, 241, 248, 0.7);
--terms-module-loader-color: #E6007E;
--terms-module-required-star-color: var(--terms-module-secondary);
--terms-module-font-family: Arial, sans-serif;
--terms-module-admin-font-family: Arial, sans-serif;
}
#terms-module-icon-published {
color: var(--terms-module-icon-published);
}
#terms-module-icon-not-published {
color: var(--terms-module-icon-not-published);
}
.terms-module-body {
background: var(--terms-module-background);
margin: 0;
}
.terms-module-container {
margin: auto;
max-width: 1170px;
padding: 0 15px;
}
.terms-module-button-primary {
background: var(--terms-module-primary);
border-radius: var(--terms-module-button-border-radius);
border: 1px solid var(--terms-module-primary);
color: var(--terms-module-white);
display: inline-block;
font-family: var(--terms-module-font-family);
font-size: 16px;
letter-spacing: normal;
line-height: 16px;
padding: 11px 16px;
text-decoration: none !important;
}
.terms-module-button-primary:disabled,
.terms-module-button-primary:hover:disabled {
color: var(--terms-module-white);
background: var(--terms-module-primary);
cursor: not-allowed;
opacity: 0.25;
}
.terms-module-button-primary:hover {
color: var(--terms-module-white);
background: var(--terms-module-primary);
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
cursor: pointer;
}
.terms-module-button-secondary {
background: var(--terms-module-white);
border-radius: var(--terms-module-button-border-radius);
border: 1px solid var(--terms-module-primary);
color: var(--terms-module-primary);
display: inline-block;
font-family: var(--terms-module-font-family);
font-size: 16px;
letter-spacing: normal;
line-height: 16px;
padding: 11px 16px;
text-decoration: none !important;
}
.terms-module-button-secondary.terms-module-button-secondary-small {
padding: 7px 8px;
height: 32px;
}
.terms-module-button-secondary:disabled,
.terms-module-button-secondary:hover:disabled {
background: var(--terms-module-white);
color: var(--terms-module-primary);
cursor: not-allowed;
opacity: 0.25;
}
.terms-module-button-secondary:hover {
background: var(--terms-module-primary);
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
border: 1px solid var(--terms-module-primary);
color: var(--terms-module-white);
cursor: pointer;
}
.terms-module-button-secondary i {
vertical-align: -1px;
padding-right: 3px;
}
.terms-module-button-remove {
background: var(--terms-module-white);
border-radius: var(--terms-module-button-border-radius);
border: 1px solid var(--terms-module-error);
color: var(--terms-module-error);
font-family: var(--terms-module-font-family);
font-size: 16px;
height: 32px;
letter-spacing: normal;
line-height: 16px;
padding: 7px 8px;
}
.terms-module-button-remove i {
color: var(--terms-module-error);
}
.terms-module-button-remove:hover {
background: var(--terms-module-error);
border: 1px solid var(--terms-module-error);
color: var(--terms-module-white);
cursor: pointer;
}
.terms-module-button-remove:hover i {
color: var(--terms-module-white);
}
.terms-module-link {
color: var(--terms-module-primary);
font-family: var(--terms-module-font-family);
text-decoration: underline;
}
.terms-module-link:hover {
color: var(--terms-module-primary);
cursor: pointer;
text-decoration: none;
}
.terms-module-button-picto {
align-items: center;
display: flex;
height: 32px;
justify-content: center;
padding: 0;
text-align: center;
width: 32px;
}
.terms-module-button-picto i {
font-size: 13px;
margin: 0;
padding: 0;
}
.terms-module-action-space {
margin: 7px;
}
.terms-module-center {
text-align: center;
}
/* Admin */
.terms-module-admin-header {
align-items: center;
background: var(--terms-module-dark);
color: var(--terms-module-white);
display: flex;
font-family: var(--terms-module-admin-font-family);
font-size: 32px;
font-weight: 300;
height: 88px;
justify-content: center;
letter-spacing: normal;
padding: 0 15px;
text-align: center;
}
.terms-module-admin-body-container {
padding: 15px;
}
.terms-module-admin-body {
background: var(--terms-module-white);
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
padding: 30px;
}
@media(min-width: 1024px) {
.terms-module-admin-body-form {
padding: 30px 100px;
}
}
/* Form */
.terms-module-form-field {
font-family: var(--terms-module-font-family);
padding-bottom: 18px;
}
.terms-module-form-field-container {
display: flex;
flex-direction: column-reverse;
}
.terms-module-form-field label {
display: block;
}
.terms-module-form-field-label {
color: var(--terms-module-form-field-color);
font-family: var(--terms-module-font-family);
font-size: 16px;
font-weight: normal;
letter-spacing: normal;
line-height: 30px;
white-space: nowrap;
}
.terms-module-form-field-label.required:after {
color: var(--terms-module-secondary);
content: '*';
padding-left: 6px;
}
.form-fields-40 .terms-module-form-field-input {
height: 40px;
}
.terms-module-form-field-input {
border-radius: var(--terms-module-form-field-border-radius);
border: 1px solid var(--terms-module-form-field-placeholder);
box-sizing: border-box;
color: var(--terms-module-form-field-color);
font-size: 13px;
font-family: var(--terms-module-font-family);
height: 32px;
padding: 5px 14px;
}
.terms-module-form-field-input:disabled,
.terms-module-form-field-input:not(select):read-only,
.terms-module-form-field-input:not(select):-moz-read-only,
.terms-module-form-field-input:read-only + #cke_terms_version_form_content,
.terms-module-form-field-input:-moz-read-only + #cke_terms_version_form_content {
opacity: 0.3;
pointer-events: none;
}
.terms-module-form-field #cke_terms_version_form_content {
border: 1px solid var(--terms-module-form-field-placeholder);
border-radius: var(--terms-module-form-field-border-radius);
}
.terms-module-form-field #cke_terms_version_form_content .cke_inner {
border-radius: var(--terms-module-form-field-border-radius);
}
.terms-module-form-field #cke_terms_version_form_content #cke_1_top {
border-top-left-radius: var(--terms-module-form-field-border-radius);
border-top-right-radius: var(--terms-module-form-field-border-radius);
}
.terms-module-form-field #cke_terms_version_form_content #cke_1_bottom {
border-bottom-left-radius: var(--terms-module-form-field-border-radius);
border-bottom-right-radius: var(--terms-module-form-field-border-radius);
}
.terms-module-form-field-input.terms-module-form-field-full {
width: 100%;
}
.terms-module-form-field-input.terms-module-form-field-small {
width: 164px;
}
.terms-module-form-field select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23333333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
padding-right: 30px;
vertical-align: middle;
}
.terms-module-form-errors {
list-style: none;
margin: 6px 0;
padding-left: 0;
}
.terms-module-form-error {
color: var(--terms-module-error);
font-size: 12px;
}
/* Loader */
#terms-module-loader-overlay {
background-color: var(--terms-module-loader-overlay);
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 10000;
}
.terms-module-loader {
animation: rotatePreloader 2s infinite ease-in;
}
.terms-module-loader-position {
height: 100px;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100px;
}
.terms-pagination {
display: flex;
padding-left: 0;
list-style: none;
}
.terms-pagination li {
color: var(--terms-module-primary);
display: block;
position: relative;
text-decoration: none;
}
.terms-pagination li:not(:first-child) .page-link {
margin-left: -1px;
}
.terms-pagination li .page-link, .terms-pagination li .pagination-counter {
align-items: center;
background: #ffffff;
border: 1px solid var(--terms-module-form-field-placeholder);
display: flex;
font-size: 11px;
font-weight: 600;
height: 32px;
justify-content: center;
line-height: 16px;
padding: 0;
width: 32px;
}
.terms-pagination li.disabled,
.terms-pagination li.disabled i.picto {
color: #b9b9b9;
}
.terms-pagination li.current .page-link {
background: var(--terms-module-primary);
border-color: var(--terms-module-primary);
color: #ffffff;
}
.terms-pagination li:not(.disabled):not(.current) .page-link:hover {
cursor: pointer;
}
@keyframes rotatePreloader {
0% {
transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
}
100% {
transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
}
}
.terms-module-loader div {
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
}
.terms-module-loader div:before {
background-color: var(--terms-module-loader-color);
border-radius: 50%;
content: "";
height: 10%;
left: 50%;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 10%;
}
.terms-module-loader div:nth-child(1) {
animation: rotateCircle1 2s infinite linear;
transform: rotateZ(0deg);
z-index: 9;
}
@keyframes rotateCircle1 {
0% {
opacity: 0;
}
0% {
opacity: 1;
transform: rotateZ(36deg);
}
7% {
transform: rotateZ(0deg);
}
57% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(2) {
animation: rotateCircle2 2s infinite linear;
transform: rotateZ(36deg);
z-index: 8;
}
@keyframes rotateCircle2 {
5% {
opacity: 0;
}
5.0001% {
opacity: 1;
transform: rotateZ(0deg);
}
12% {
transform: rotateZ(-36deg);
}
62% {
transform: rotateZ(-36deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(3) {
animation: rotateCircle3 2s infinite linear;
transform: rotateZ(72deg);
z-index: 7;
}
@keyframes rotateCircle3 {
10% {
opacity: 0;
}
10.0002% {
opacity: 1;
transform: rotateZ(-36deg);
}
17% {
transform: rotateZ(-72deg);
}
67% {
transform: rotateZ(-72deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(4) {
animation: rotateCircle4 2s infinite linear;
transform: rotateZ(108deg);
z-index: 6;
}
@keyframes rotateCircle4 {
15% {
opacity: 0;
}
15.0003% {
opacity: 1;
transform: rotateZ(-72deg);
}
22% {
transform: rotateZ(-108deg);
}
72% {
transform: rotateZ(-108deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(5) {
animation: rotateCircle5 2s infinite linear;
transform: rotateZ(144deg);
z-index: 5;
}
@keyframes rotateCircle5 {
20% {
opacity: 0;
}
20.0004% {
opacity: 1;
transform: rotateZ(-108deg);
}
27% {
transform: rotateZ(-144deg);
}
77% {
transform: rotateZ(-144deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(6) {
animation: rotateCircle6 2s infinite linear;
transform: rotateZ(180deg);
z-index: 4;
}
@keyframes rotateCircle6 {
25% {
opacity: 0;
}
25.0005% {
opacity: 1;
transform: rotateZ(-144deg);
}
32% {
transform: rotateZ(-180deg);
}
82% {
transform: rotateZ(-180deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(7) {
animation: rotateCircle7 2s infinite linear;
transform: rotateZ(216deg);
z-index: 3;
}
@keyframes rotateCircle7 {
30% {
opacity: 0;
}
30.0006% {
opacity: 1;
transform: rotateZ(-180deg);
}
37% {
transform: rotateZ(-216deg);
}
87% {
transform: rotateZ(-216deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(8) {
animation: rotateCircle8 2s infinite linear;
transform: rotateZ(252deg);
z-index: 2;
}
@keyframes rotateCircle8 {
35% {
opacity: 0;
}
35.0007% {
opacity: 1;
transform: rotateZ(-216deg);
}
42% {
transform: rotateZ(-252deg);
}
92% {
transform: rotateZ(-252deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(9) {
animation: rotateCircle9 2s infinite linear;
transform: rotateZ(288deg);
z-index: 1;
}
@keyframes rotateCircle9 {
40% {
opacity: 0;
}
40.0008% {
opacity: 1;
transform: rotateZ(-252deg);
}
47% {
transform: rotateZ(-288deg);
}
97% {
transform: rotateZ(-288deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
.terms-module-loader div:nth-child(10) {
animation: rotateCircle10 2s infinite linear;
transform: rotateZ(324deg);
z-index: 0;
}
@keyframes rotateCircle10 {
45% {
opacity: 0;
}
45.0009% {
opacity: 1;
transform: rotateZ(-288deg);
}
52% {
transform: rotateZ(-324deg);
}
102% {
transform: rotateZ(-324deg);
}
100% {
transform: rotateZ(-324deg);
opacity: 1;
}
}
</style>
{% block custom_style %}{% endblock %}