This commit is contained in:
2025-12-05 09:15:15 +01:00
commit 8837c20d66
1752 changed files with 1123339 additions and 0 deletions

View File

@@ -0,0 +1,71 @@
/* Button style */
.btn {
font-size: 16px;
font-family: $font-secondary;
padding: 13px 30px;
border-radius: 6px;
border: 1px solid;
position: relative;
z-index: 1;
transition: .2s ease;
font-weight: 500;
&:hover,
&:active,
&:focus {
outline: 0;
box-shadow: none !important;
}
&-sm{
font-size: 14px;
padding: 10px 25px;
}
}
.btn-primary {
background: $color-primary;
color: $white;
border-color: $color-primary;
&:active,
&:hover,
&:focus,
&.focus,
&.active {
background: darken($color: $color-primary, $amount: 10) !important;
border-color: darken($color: $color-primary, $amount: 10) !important;
}
}
.btn-white {
margin-top:16px;
background: $white;
color: $color-primary;
border-color: $white;
&:active,
&:hover,
&:focus,
&.focus,
&.active {
background: #fafafa;
border-color: $color-primary;
color: $color-primary;
}
}
.btn-outline-primary {
background: transparent;
color: $color-primary;
border-color: $color-primary;
&:active,
&:hover,
&:focus,
&.focus,
&.active {
background: $color-primary !important;
border-color: $color-primary !important;
color: $white;
}
}

View File

@@ -0,0 +1,411 @@
body {
background-color: $body-bg;
overflow-x: hidden;
}
::selection {
background: lighten($color: $color-primary, $amount: 10);
color: $white;
}
/* preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.section-title {
font-weight: 700;
}
img {
vertical-align: middle;
border: 0;
max-width: 100%;
height: auto;
}
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: underline;
font-weight: bold;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a,
button,
select {
cursor: pointer;
transition: .2s ease;
&:focus {
outline: 0;
}
}
a:hover {
color: $color-primary;
}
.slick-slide {
outline: 0;
}
.section {
padding-top: 80px;
padding-bottom: 80px;
&-sm {
padding-top: 50px;
padding-bottom: 50px;
}
&-title {
margin-bottom: 40px;
}
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.border-default {
border-color: $border-color !important;
}
/* overlay */
.overlay {
position: relative;
&::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background: $black;
opacity: .5;
}
}
.outline-0 {
outline: 0 !important;
}
.rounded {
border-radius: 12px !important;
}
.shadow {
box-shadow: 0px 15px 60px rgba(62, 62, 62, 0.102) !important;
}
.d-unset {
display: unset !important;
}
.bg-primary {
background: $color-primary !important;
}
.text-primary {
color: $color-primary !important;
}
.text-light {
color: $text-light !important;
}
.fw-medium {
font-weight: 500;
}
// Arrow Icon
.nav-next,
.nav-prev {
span {
font-size: 18px;
@include desktop {
font-size:16px;
}
}
i {
font-size: 14px;
line-height: 28px !important;
transition: transform 0.4s;
}
}
.nav-prev {
&:hover i {
transform: translateX(-3px);
}
i {
margin-left: 3px;
}
}
.nav-next {
&:hover i {
transform: translateX(3px);
}
i {
margin-right: 3px;
}
}
.glightbox:hover {
cursor: pointer;
opacity: .9;
transition: 0.3s;
}
.glightbox-clean .gslide-title {
text-align: center;
margin-bottom: 0 !important;
font-style: italic;
opacity: 0.6;
}
.glightbox-clean .gdesc-inner {
padding: 14px 20px !important;
}
// Tooltip
.tooltip-word {
position: relative;
cursor: help;
border-bottom: 1px dotted currentColor;
}
.tooltip-word::after {
content: attr(data-tooltip);
position: absolute;
z-index: 50;
bottom: calc(100% + 0.4rem);
left: 50%;
transform: translate(-50%, 4px);
display: inline-block;
padding: 0.45rem 0.6rem;
background: #207495;
color: #fff;
border-radius: 4px;
font-size: 0.75rem;
line-height: 1.4;
text-align: left;
font-weight: normal;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
width: max-content;
max-width: 260px;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.tooltip-word:hover::after,
.tooltip-word:focus::after {
opacity: 1;
transform: translate(-50%, 0);
}
@media (max-width: 575px) {
.tooltip-word::after {
position: fixed;
bottom: 1.5rem;
top: auto;
padding:20px;
left: 0;
right: 0;
margin: 0 .75rem;
width: auto;
max-width: none;
transform: none;
box-sizing: border-box;
text-align: left;
white-space: normal;
font-size: 14px;
font-weight: normal;
}
.tooltip-word:hover::after,
.tooltip-word:focus::after {
transform: none; // animatie alleen in Y is nu niet meer nodig
}
}
$note-color: #293df2;
$abstract-color: #0ca68c;
$info-color: #759E4C;
$todo-color: #8d05a8;
$tip-color: #19cfb0;
$success-color: #04d904;
$question-color: #e38902;
$warning-color: #e38902;
$danger-color: #e31a00;
$failure-color: #e31a00;
$bug-color: #e31a00;
$example-color: #b83acf;
$quote-color: #918e91;
.notice {
margin-bottom: 1.5rem;
border: 2px solid;
padding: 1.5rem;
border-color: currentColor;
border-radius: 12px;;
}
.notice-head {
display: flex;
align-items: center;
}
.notice-head svg {
margin-right: 0.75rem;
}
.notice-head p {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
margin: 0;
line-height: 1;
}
.notice-body {
margin-top: 0.75rem;
}
.notice-body p {
margin: 0;
}
.notice.note {
color: $note-color;
background-color: rgba($note-color, 0.15);
}
.notice.abstract {
color: $abstract-color;
background-color: rgba($abstract-color, 0.15);
}
.notice.info {
color: $color-primary;
background-color: rgba($info-color, 0.05);
}
.notice.todo {
color: $todo-color;
background-color: rgba($todo-color, 0.15);
}
.notice.tip {
color: $tip-color;
background-color: rgba($tip-color, 0.15);
}
.notice.success {
color: $success-color;
background-color: rgba($success-color, 0.15);
}
.notice.question {
color: $question-color;
background-color: rgba($question-color, 0.15);
}
.notice.warning {
color: $warning-color;
background-color: rgba($warning-color, 0.05);
}
.notice.failure {
color: $failure-color;
background-color: rgba($failure-color, 0.15);
}
.notice.danger {
color: $danger-color;
background-color: rgba($danger-color, 0.15);
}
.notice.bug {
color: $bug-color;
background-color: rgba($bug-color, 0.15);
}
.notice.example {
color: $example-color;
background-color: rgba($example-color, 0.15);
}
.notice.quote {
color: $quote-color;
background-color: rgba($quote-color, 0.15);
}
// darkmode
.dark .notice-head p {
color: #d1d5db;
}
.color-positive {
color:#759E4C;
}
.color-warning {
color: $warning-color;
}
.header-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.img-flag {
max-height: 48px;
vertical-align: top;
display: inline-flex;
border-radius: 4px;
border: 1px solid $white;
box-shadow: 2px 2px 12px rgba(62,62,62,.3) !important;
}

View File

@@ -0,0 +1,29 @@
@mixin mobile-xs{
@media(max-width:400px){
@content;
}
}
@mixin mobile{
@media(max-width:575px){
@content;
}
}
@mixin tablet{
@media(max-width:767px){
@content;
}
}
@mixin desktop{
@media(max-width:991px){
@content;
}
}
@mixin desktop-lg{
@media(max-width:1200px){
@content;
}
}
@mixin size($size){
width: $size; height: $size;
}

View File

@@ -0,0 +1,89 @@
/* typography */
body {
font-family: $font-primary;
-webkit-font-smoothing: antialiased;
font-size: $font-size;
line-height: 1.6;
color: $text-color;
}
p,
.paragraph {
font-weight: 400;
color: $text-color;
line-height: 26px;
font-family: $font-primary;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $text-dark;
font-family: $font-secondary;
line-height: 1.2;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
font-weight: 600;
}
h1,
.h1 {
font-size: 40px;
@include mobile {
font-size: 32px;
}
}
h2,
.h2 {
font-size: 32px;
@include mobile {
font-size: 28px;
}
}
h3,
.h3 {
font-size: 28px;
@include mobile {
font-size: 24px;
}
}
h4,
.h4 {
font-size: 24px;
}
h5,
.h5 {
font-size: 20px;
}
h6,
.h6 {
font-size: 18px;
}
.fa-xs {
font-size: 0.8em !important;
padding-right: 6px;
}
.font-small {
font-size: 0.8em;
font-style: italic;
color: lighten($color: $text-color, $amount: 30);
}

View File

@@ -0,0 +1,31 @@
{{ with site.Params.variables }}
// Color variables
$color-primary: {{.color_primary}};
$text-color: {{.text_color}};
$text-dark: {{.text_dark}};
$text-light: {{.text_light}};
$body-bg: {{.body_color}};
$border-color: {{.border_color}};
$black: {{.black}};
$white: {{.white}};
$light: {{.light}};
// Font Variables
$font-size: {{.font_size}};
$font-primary: '{{ replaceRE ":wght@[0-9;]+" "" .font_primary }}', {{.font_primary_type}};
$font-secondary: '{{ replaceRE ":wght@[0-9;]+" "" .font_secondary }}', {{.font_secondary_type}};
$icon-font: '{{.font_icon}}';
{{ end }}
@import 'templates/bootstrap';
@import 'mixins';
@import 'typography';
@import 'buttons';
@import 'common';
@import 'templates/navigation.scss';
@import 'templates/main.scss';
@import 'templates/search-modal';
@import 'gallery';
@import 'tabs';
//@import 'notice';
@import 'collapse';

View File

@@ -0,0 +1,53 @@
// Bootstrap 5.3.0
@import "../bootstrap/mixins/banner";
@include bsBanner("");
// scss-docs-start import-stack
// Configuration
@import "../bootstrap/functions";
@import "../bootstrap/variables";
@import "../bootstrap/variables-dark";
@import "../bootstrap/maps";
@import "../bootstrap/mixins";
@import "../bootstrap/utilities";
// Layout & components
@import "../bootstrap/root";
@import "../bootstrap/reboot";
@import "../bootstrap/type";
@import "../bootstrap/images";
@import "../bootstrap/containers";
@import "../bootstrap/grid";
@import "../bootstrap/tables";
@import "../bootstrap/forms";
@import "../bootstrap/buttons";
@import "../bootstrap/transitions";
@import "../bootstrap/dropdown";
// @import "../bootstrap/button-group";
@import "../bootstrap/nav";
@import "../bootstrap/navbar";
@import "../bootstrap/card";
@import "../bootstrap/accordion";
@import "../bootstrap/breadcrumb";
@import "../bootstrap/pagination";
@import "../bootstrap/badge";
// @import "../bootstrap/alert";
// @import "../bootstrap/progress";
@import "../bootstrap/list-group";
// @import "../bootstrap/close";
// @import "../bootstrap/toasts";
@import "../bootstrap/modal";
// @import "../bootstrap/tooltip";
// @import "../bootstrap/popover";
// @import "../bootstrap/carousel";
// @import "../bootstrap/spinners";
// @import "../bootstrap/offcanvas";
// @import "../bootstrap/placeholders";
// Helpers
@import "../bootstrap/helpers";
// Utilities
@import "../bootstrap/utilities/api";
// scss-docs-end import-stack

View File

@@ -0,0 +1,569 @@
.search-wrapper {
position: relative;
cursor: text;
.search-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px;
}
.form-control {
height: 54px;
border: 1px solid $border-color;
padding-left: 40px !important;
border-radius: 5px;
width: 320px;
@extend .shadow;
@include mobile {
width: 250px;
}
&-sm {
height: 45px;
width: 220px;
}
&::placeholder {
color: $text-light;
font-size: 15px;
}
}
.search-button {
border: 1px solid $border-color;
color: $text-light;
background-color: transparent;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
cursor: text;
}
}
.card {
@extend .shadow;
@extend .rounded;
transition: .2s ease;
border: 0;
&-lg {
.card-body {
padding: 35px;
}
}
i {
color: $color-primary;
display: inline-block;
text-align: center;
font-size: 22px;
@extend .rounded;
}
&-text {
margin-bottom: 0;
}
&-title {
font-weight: 700;
}
&-body {
padding: 25px;
}
&:hover {
box-shadow: 0px 15px 60px rgba(62, 62, 62, 0.2) !important;
}
}
.social-icons {
margin-bottom: 0;
a {
display: block;
height: 42px;
width: 42px;
line-height: 42px;
text-align: center;
color: $white;
background: $color-primary;
border-radius: 6px;
&:hover {
background: darken($color: $color-primary, $amount: 10) !important;
}
}
}
.footer-menu {
margin-bottom: 0;
a {
display: block;
padding: 10px;
color: $text-color;
transition: .2s ease;
font-weight: 500;
&:hover {
color: $color-primary;
}
}
}
/* sidenav */
.sidenav {
border-right: 1px solid $border-color;
padding-right: 20px;
@include mobile {
border: none;
border-top: 1px solid $border-color;
margin-top: 20px;
padding: 10px;
}
ul {
padding-left: 10px;
}
&>li {
a {
padding: 20px 0;
color: $text-dark;
display: block;
font-size: 18px;
font-weight: 500;
}
&:not(:last-child) {
border-bottom: 1px solid $border-color;
}
}
.sidelist {
ul {
display: none;
}
}
.parent {
&>a {
color: $color-primary !important;
position: relative;
margin-left: 10px;
&::before {
position: absolute;
content: "";
left: -10px;
top: 25%;
height: 50%;
width: 1px;
background: $color-primary;
}
}
ul {
display: block;
margin-bottom: 10px;
a {
padding: 5px 0;
font-size: 14px;
font-weight: 400;
color: $text-dark;
}
li.active>a {
margin-left: 10px;
&::before {
height: 5px;
width: 5px;
border-radius: 50%;
display: block;
top: 13px;
}
}
}
}
}
/* /sidenav */
.page-list {
list-style-type: none;
a {
display: none;
}
ul {
padding: 0;
a {
display: inline-block;
padding: 7px 0;
font-size: 20px;
color: $text-dark;
}
}
}
.pagination {
margin-top: 50px;
justify-content: space-between;
a {
color: $color-primary;
font-size: 16px;
font-weight: 500;
}
i {
line-height: 1.7;
font-size: 15px;
}
}
// copy to clipboard
.highlight {
position: relative;
.copy-to-clipboard {
background: $color-primary;
color: $white;
cursor: pointer;
padding: 4px 5px;
line-height: 1;
font-size: 12px;
font-weight: 500;
border-radius: 4px;
position: absolute;
right: 10px;
top: 10px;
}
}
:not(pre)>code+span.copy-to-clipboard {
display: none;
}
// autocomplete
.autocomplete-suggestions {
border: 0;
border-radius: 0 0 6px 6px;
box-shadow: 0px 50px 60px rgba(62, 62, 62, 0.102) !important;
background: $white;
&::-webkit-scrollbar {
width: 5px;
&-track {
background: $light;
}
&-thumb {
background: $border-color;
}
}
.autocomplete-suggestion {
transition: .2s ease;
padding: 10px;
font-weight: 500;
&.selected {
background: $color-primary;
}
}
}
.search-item {
a {
color: $text-dark;
display: block;
&:hover {
color: $color-primary;
}
}
&:not(:last-child) {
border-bottom: 1px solid $border-color;
}
}
.form-group {
label {
font-size: 15px;
font-weight: 500;
}
.form-control {
font-size: 16px;
height: 40px;
background: transparent;
border: 0;
border-bottom: 1px solid $border-color;
border-radius: 0;
padding: 10px 0;
color: $text-dark;
&::placeholder {
font-size: 16px;
color: $text-light;
}
&:focus {
outline: 0;
border-color: $color-primary;
box-shadow: none;
}
}
.form-select {
font-size: 16px;
color: rgba($text-dark, .8);
border-top: 0;
border-left: 0;
border-right: 0;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(34,34,34,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-position: right center;
&:focus {
outline: 0;
border-color: $color-primary;
box-shadow: none;
}
option:checked {
font-size: 36px !important;
}
}
textarea.form-control {
height: 100px;
resize: none;
}
}
.badge {
margin-bottom: 20px;
font-weight: 500;
font-size: 15px;
padding: 5px 10px;
border-radius: 4px;
display: block;
width: fit-content;
&.added {
background: #3778FF;
color: $white;
}
&.fixed {
background: #F54773;
color: $white;
}
&.changed {
background: #3AAA55;
color: $white;
}
&.depricated {
background: #343434;
color: $white;
}
&.removed {
background: #3bbfe4;
color: $white;
}
&.security {
background: #F53535;
color: $white;
}
&.unreleased {
background: #A037FF;
color: $white;
}
}
:not(.highlight) pre {
background: $light;
}
// content style
.content {
span[style="color:#585b70;font-style:italic"] {
color: #7f818c !important;
}
&>img {
border-radius: 5px;
}
* {
word-break: break-word;
overflow-wrap: break-word;
}
strong {
font-weight: 600;
}
a {
text-decoration: underline;
color: $color-primary;
}
ol,
ul {
padding-left: 20px;
margin-left:20px;
li {
margin-bottom: 6px;
}
}
ul {
padding-left: 0;
margin-bottom: 20px;
li {
padding-left: 20px;
position: relative;
&::before {
position: absolute;
content: '';
height: 8px;
width: 8px;
border-radius: 50%;
background: lighten($color: $text-color, $amount: 20);
left: 3px;
top: 8px;
}
}
}
table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
border: 1px solid #EEEEEE;
border-radius: 5px;
border-spacing: 0;
border-collapse: separate;
overflow: hidden;
}
table td,
table th {
padding: .75rem;
vertical-align: top;
margin-bottom: 0;
}
tr:not(:last-child) {
border-bottom: 1px solid #EEEEEE;
}
th {
font-weight: 500;
}
thead {
background: $light;
margin-bottom: 0;
tr {
border-bottom: 1px solid #EEEEEE;
}
}
tbody {
background: #fff;
margin-bottom: 0;
}
blockquote {
font-size: 20px !important;
color: $text-dark;
padding: 20px 30px;
border-left: 2px solid $color-primary;
margin: 40px 0;
font-weight: bold;
background: $light;
p {
color: rgba($text-dark, 0.8);
font-size: 18px !important;
margin-bottom: 0 !important;
line-height: 1.7;
}
}
pre {
display: block;
padding: 15px 20px !important;
margin: 10px 0 30px 0 !important;
border-radius: 6px;
}
code {
margin-bottom: 0 !important;
font-size: 100%;
}
iframe {
display: block;
border-radius: 5px;
margin-bottom: 30px;
}
}
.accordion-body {
color: $black;
*:last-child {
margin-bottom: 0;
}
}
.tab-nav-button {
border-radius: 6px;
}
.content .tab-nav-button {
background-color: #fff;
}
[data-tab-item] {
padding-top: 10px;
}
blockquote,
.notices {
border-radius: 4px;
}
code {
color:$color-primary;
font-weight: 500;
}

View File

@@ -0,0 +1,115 @@
.navigation {
transition: .2s ease;
&.nav-bg {
background: $white;
@extend .shadow;
@include desktop {
top: -50px;
}
}
.form-inline button {
transition: 0s;
}
@include desktop {
.form-inline {
cursor: pointer;
margin: 0 10px 0 auto !important;
button {
padding: 10px;
position: static;
transform: none;
}
}
.navbar-toggler {
width: 30px;
margin: 0px;
padding: 0px;
&:focus {
outline: none;
box-shadow: none;
}
i {
color: $text-dark;
font-size: 20px;
}
.fa-xmark {
display: none;
}
.fa-bars {
display: block;
}
&[aria-expanded="true"] {
i {
display: none;
}
.fa-xmark {
display: block;
}
}
}
}
}
.nav-item {
margin: 0;
.nav-link {
}
}
.navbar-light .navbar-nav .nav-link {
color: $text-dark;
&:hover {
color: $color-primary;
}
}
.navbar-expand-lg .navbar-nav .nav-link {
padding: 20px;
font-size: 15px;
font-weight: 500;
@include desktop {
padding: 10px;
display: block;
}
}
#select-language {
border: 1px solid $border-color;
background: transparent;
}
.nav-tabs,
.nav-tabs > li {
list-style: none !important;
}
.nav.nav-tabs .nav-item::before,
.nav.nav-pills .nav-item::before {
content: none !important;
}
.nav-link,
.nav-link:hover {
color:#484848;
}
.nav-pills-custom {
--bs-nav-tabs-link-active-color: #ffffff;
--bs-nav-tabs-link-active-bg: #759E4C;
}

View File

@@ -0,0 +1,106 @@
// search-modal
.search-modal-dialog {
margin-top: 150px;
max-width: 600px;
@include desktop {
margin-top: 80px;
}
}
.search-modal {
.input-group-text,
.search-form-control {
border: 2px solid rgba($color-primary, 0.5);
}
.search-form-control {
padding-right: 15px;
padding-top: 12px;
padding-bottom: 12px;
}
.modal-body {
max-height: calc(100vh - 350px);
padding: 1rem;
overflow-y: auto;
background-color: #f5f6f7;
box-shadow: inset 0px 2px 18px #ddd;
border-bottom-left-radius: calc(0.3rem - 1px);
border-bottom-right-radius: calc(0.3rem - 1px);
&::-webkit-scrollbar {
width: 5px;
&-track {
background: $white;
}
&-thumb {
background: #c7c7c7;
}
}
}
}
.search-result-item {
&:first-child {
.section:not(:empty) {
margin-top: -15px;
}
}
&:not(:last-child) a {
margin-bottom: -1px;
}
> .section {
padding: 0 0.75rem;
display: inline-block;
margin-bottom: 10px;
margin-top: 25px;
font-size: 20px;
font-weight: 600;
&:empty {
display: none;
}
}
.block {
display: block;
padding: 0.65rem 1rem;
border-radius: 4px;
border: 1px solid #eee;
background-color: #fff;
transition: 0.1s;
p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
font-weight: 500;
mark:not(:first-child) {
background-color: transparent;
}
mark {
color: $color-primary;
background-color: rgba($color-primary, 0.05);
}
&:empty {
display: none;
}
}
&:focus,
&:hover {
background-color: rgba($color-primary, 0.8);
* {
color: white !important;
}
mark {
color: $color-primary !important;
background-color: $white;
}
}
}
}
#search-result-body {
&:empty {
&::after {
content: "No result to show!";
display: block;
text-align: center;
margin: 1.5rem 0;
opacity: 0.5;
}
}
}