/* =========================================================
BASIS
========================================================= */
.cql-container {
width: 100%;
box-sizing: border-box;
padding: 25px;
background: #ffffff;
color: #222222;
font-family:
Arial,
Helvetica,
sans-serif;
}
.cql-container *,
.cql-container *::before,
.cql-container *::after {
box-sizing: border-box;
}
/* =========================================================
HEADER
========================================================= */
.cql-header {
margin-bottom: 20px;
}
.cql-header h2 {
margin: 0 0 6px 0;
font-size: 27px;
line-height: 1.2;
}
.cql-header p {
margin: 0;
color: #777777;
font-size: 14px;
}
/* =========================================================
LOADING
========================================================= */
.cql-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 100px;
font-size: 15px;
}
.cql-spinner {
width: 22px;
height: 22px;
border: 3px solid #dddddd;
border-top-color: #333333;
border-radius: 50%;
animation:
cql-spin
0.8s
linear
infinite;
}
@keyframes cql-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
RESULTATEN
========================================================= */
.cql-results {
width: 100%;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch;
gap: 15px;
}
.cql-results[hidden] {
display: none !important;
}
/* =========================================================
A B C
========================================================= */
.cql-category {
display: flex !important;
flex-direction: column;
flex: 1 1 0 !important;
min-width: 0;
width: auto !important;
padding: 18px;
border: 1px solid #e1e1e1;
border-radius: 10px;
background: #ffffff;
}
/* =========================================================
LETTER
========================================================= */
.cql-category-header {
display: flex;
align-items: center;
gap: 12px;
}
.cql-letter {
width: 45px;
height: 45px;
min-width: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ffffff;
font-size: 22px;
font-weight: 700;
}
.cql-category-a .cql-letter {
background: #2e7d32;
}
.cql-category-b .cql-letter {
background: #1565c0;
}
.cql-category-c .cql-letter {
background: #ef6c00;
}
/* =========================================================
TITEL
========================================================= */
.cql-category-header h3 {
margin: 0;
font-size: 16px;
line-height: 1.25;
}
.cql-category-header span {
display: block;
margin-top: 4px;
color: #777777;
font-size: 12px;
}
/* =========================================================
SCORE
========================================================= */
.cql-score {
margin-top: 20px;
}
.cql-score strong {
font-size: 32px;
line-height: 1;
}
.cql-score span {
color: #777777;
font-size: 13px;
}
/* =========================================================
PROGRESS BAR
========================================================= */
.cql-progress {
width: 100%;
height: 8px;
margin-top: 10px;
overflow: hidden;
border-radius: 10px;
background: #eeeeee;
}
.cql-progress > div {
width: 0;
height: 100%;
border-radius: 10px;
transition:
width
0.9s
ease;
}
.cql-category-a .cql-progress > div {
background: #2e7d32;
}
.cql-category-b .cql-progress > div {
background: #1565c0;
}
.cql-category-c .cql-progress > div {
background: #ef6c00;
}
/* =========================================================
NIVEAU
========================================================= */
.cql-level {
display: inline-block;
width: fit-content;
margin-top: 12px;
padding: 5px 9px;
border-radius: 5px;
background: #f2f2f2;
font-size: 12px;
font-weight: 700;
}
/* =========================================================
TEKST
========================================================= */
.cql-category > p {
margin: 12px 0 18px 0;
color: #555555;
font-size: 13px;
line-height: 1.55;
}
/* =========================================================
CRITERIA
========================================================= */
.cql-criteria {
margin-top: auto;
border-top: 1px solid #eeeeee;
}
.cql-criteria > div {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 12px;
}
.cql-criteria span {
color: #666666;
}
.cql-criteria strong {
font-size: 12px;
}
/* =========================================================
TOTAALSCORE
========================================================= */
.cql-overall {
flex: 0 0 100% !important;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
margin-top: 2px;
padding: 20px;
border-radius: 10px;
background: #f5f5f5;
text-align: center;
}
.cql-overall-main span {
display: block;
margin-bottom: 4px;
color: #666666;
font-size: 13px;
}
.cql-overall-main strong {
font-size: 34px;
}
.cql-overall-main small {
color: #777777;
font-size: 13px;
}
.cql-overall-level {
font-size: 18px;
font-weight: 700;
}
/* =========================================================
BESTE ARTIKEL
========================================================= */
.cql-best-article {
flex: 0 0 100% !important;
width: 100%;
display: flex;
align-items: center;
gap: 15px;
padding: 18px;
border: 1px solid #e5e5e5;
border-radius: 10px;
background: #fffdf5;
}
.cql-best-icon {
width: 45px;
height: 45px;
min-width: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f4c542;
color: #ffffff;
font-size: 24px;
}
.cql-best-content {
min-width: 0;
}
.cql-best-heading {
display: block;
margin-bottom: 4px;
color: #777777;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cql-best-content > strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
}
.cql-best-score {
display: block;
margin-top: 5px;
color: #666666;
font-size: 13px;
}
.cql-best-score strong {
color: #222222;
}
/* =========================================================
METHODE
========================================================= */
.cql-method {
flex: 0 0 100% !important;
width: 100%;
margin-top: 5px;
padding: 15px;
border-left: 4px solid #999999;
background: #fafafa;
}
.cql-method strong {
display: block;
margin-bottom: 5px;
font-size: 13px;
}
.cql-method p {
margin: 0;
color: #666666;
font-size: 12px;
line-height: 1.5;
}
/* =========================================================
FOUT
========================================================= */
.cql-error {
padding: 15px;
border: 1px solid #e0a0a0;
border-radius: 7px;
background: #fff5f5;
color: #9b0000;
font-size: 14px;
line-height: 1.5;
}
.cql-error[hidden] {
display: none !important;
}
/* =========================================================
OPEN-KNOP
========================================================= */
.cql-popup-open {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border: 0;
border-radius: 6px;
background: #333333;
color: #ffffff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
}
.cql-popup-open:hover {
opacity: 0.9;
}
/* =========================================================
POPUP
========================================================= */
.cql-popup {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
padding: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 2147483000 !important;
}
.cql-popup[hidden] {
display: none !important;
}
/* =========================================================
OVERLAY
========================================================= */
.cql-popup-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.72);
cursor: pointer;
}
/* =========================================================
POPUP BOX
========================================================= */
.cql-popup-box {
position: relative;
z-index: 2;
width: min(1100px, 96vw);
max-height: 92vh;
overflow-x: hidden;
overflow-y: auto;
border-radius: 14px;
background: #ffffff;
box-shadow:
0 25px 80px rgba(0, 0, 0, 0.35);
}
/* =========================================================
SLUITKNOP
========================================================= */
.cql-popup-close {
position: absolute;
top: 7px;
right: 9px;
z-index: 10;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #333333;
font-family: Arial, sans-serif;
font-size: 34px;
line-height: 42px;
text-align: center;
cursor: pointer;
}
.cql-popup-close:hover {
color: #000000;
}
/* =========================================================
BODY BLOKKEREN
========================================================= */
body.cql-popup-is-open {
overflow: hidden !important;
}
/* =========================================================
DESKTOP
========================================================= */
@media (min-width: 901px) {
.cql-results {
flex-direction: row !important;
}
.cql-category {
flex: 1 1 0 !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (
min-width: 651px
) and (
max-width: 900px
) {
.cql-results {
flex-direction: row !important;
}
.cql-category {
flex: 1 1 0 !important;
}
}
/* =========================================================
MOBIEL
========================================================= */
@media (max-width: 650px) {
.cql-popup {
padding: 10px !important;
}
.cql-popup-box {
width: 100%;
max-width: 100%;
max-height: 95vh;
}
.cql-container {
padding: 20px 15px;
}
.cql-results {
flex-direction: column !important;
}
.cql-category {
width: 100% !important;
flex: 0 0 auto !important;
}
.cql-overall {
flex-direction: column;
gap: 5px;
}
.cql-best-article {
align-items: flex-start;
}
}
De vuistbijlen van Amiens en St. Acheul in Noord Frankrijk. – Steentijdvondsten
Ga naar de inhoud
wpDiscuz
wpDiscuz
