585 lines
11 KiB
CSS
585 lines
11 KiB
CSS
:root {
|
|
--paddingSite: 40px;
|
|
--card-radius: 24px;
|
|
--card-bg: #ffffff;
|
|
--bg: #F4F3EF;
|
|
--card-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
|
|
--accent: #FF5A5F;
|
|
/* Soft energetic pink/red from Dribbble */
|
|
--accent-secondary: #FF8A65;
|
|
--bg-top: rgb(54, 137, 13);
|
|
--bg-top-raw: 54 137 13;
|
|
--accent-soft: #f0f5ff;
|
|
--border-subtle: #eaeaea;
|
|
--text-main: #1b1b1b;
|
|
--text-muted: #8A8A8A;
|
|
--disabled-bg: #f3f4f6;
|
|
--disabled-border: #cbd5f5;
|
|
--ui-border: #dfe4ea;
|
|
--main-button: #36454F;
|
|
}
|
|
|
|
/* Base */
|
|
|
|
*,
|
|
*::after,
|
|
*::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
section {
|
|
margin: 0;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
width: 100vw;
|
|
background: var(--bg);
|
|
}
|
|
|
|
::selection {
|
|
background: #0000003d;
|
|
color: #ffffffff;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: #a4bf4a99;
|
|
color: #000;
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
}
|
|
|
|
/* General numeric inputs in scoring area */
|
|
.bgSection input[type="number"] {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.nopadding {
|
|
height: 40px;
|
|
}
|
|
|
|
/* Layout */
|
|
|
|
.bgSection {
|
|
position: relative;
|
|
margin-left: auto;
|
|
/*margin: var(--paddingSite);
|
|
width: calc(100vw - 2 * var(--paddingSite));*/
|
|
width: 100vw;
|
|
box-sizing: border-box !important;
|
|
background: none;
|
|
}
|
|
|
|
@media (min-width: 1081px) {
|
|
.bgSection.open {
|
|
width: calc(100vw - 380px);
|
|
/* - 2 * var(--paddingSite) */
|
|
}
|
|
}
|
|
|
|
/* Cards */
|
|
|
|
.headerDivTrainer {
|
|
padding: var(--paddingSite);
|
|
padding-bottom: 10px;
|
|
background: transparent;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.dashboardGrid {
|
|
padding: 0 var(--paddingSite) var(--paddingSite);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 30px;
|
|
align-items: start;
|
|
width: 100%;
|
|
}
|
|
|
|
.twoColumDiv {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
align-items: start;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1080px) {
|
|
.twoColumDiv {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* headings */
|
|
|
|
.containerHeading {
|
|
margin-top: 0;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
margin-bottom: 24px;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.subSettingsRowGroup .settingsRow span {
|
|
color: #36454f;
|
|
}
|
|
|
|
.subSettingsRowGroup {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
align-items: end;
|
|
gap: 16px 22px;
|
|
padding: 20px;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
.customSelectSubGroupHeader {
|
|
border-bottom: 1px solid #1c2d34;
|
|
font-weight: 600;
|
|
border-radius: 0 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.customSelectAddOption {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.headerThRankLiveConfig > span {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
padding: 20px;
|
|
border: 1px solid #00000046;
|
|
}
|
|
|
|
#bodyRowRankLiveConfig > td > span {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 15px;
|
|
position: relative;
|
|
padding: 10px 20px;
|
|
border: 1px solid #00000046;
|
|
position: relative;
|
|
min-height: 54.5px;
|
|
align-items: center;
|
|
}
|
|
|
|
.headerThRankLiveConfig .addColumnBtn {
|
|
font-size: 24px;
|
|
height: 30px;
|
|
width: 30px;
|
|
line-height: 0;
|
|
position: absolute;
|
|
top: 0px;
|
|
background-color: #5d9ab9;
|
|
border: 1px solid #3a6b83;
|
|
color: #fff;
|
|
border-radius: 15px;
|
|
align-content: center;
|
|
cursor: pointer;
|
|
z-index: 3;
|
|
}
|
|
|
|
.headerThRankLiveConfig .addColumnBtn.addColumnBtnAfter {
|
|
right: 0;
|
|
transform: translateX(50%) translateY(-50%);
|
|
}
|
|
|
|
.headerThRankLiveConfig .addColumnBtn.addColumnBtnBefore {
|
|
left: 0;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
.headerThRankLiveConfig .addColumnBtn {
|
|
display: none;
|
|
}
|
|
|
|
.headerThRankLiveConfig:not(.ui-sortable-helper) > span:hover .addColumnBtn.addColumnBtnAfter {
|
|
display: block;
|
|
}
|
|
|
|
.headerThRankLiveConfig:not(.ui-sortable-helper):first-child > span:hover .addColumnBtn.addColumnBtnBefore {
|
|
display: block;
|
|
}
|
|
|
|
.headerThRankLiveConfig:not(.ui-sortable-helper) > span:hover {
|
|
border-right: 1px solid #3a6b83;
|
|
}
|
|
|
|
.headerThRankLiveConfig:not(.ui-sortable-helper):first-child > span:hover {
|
|
border-left: 1px solid #3a6b83;
|
|
}
|
|
|
|
|
|
.deleteColumnBtn {
|
|
color: #6a2a2a;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.customSelectAddOption {
|
|
max-width: min(100vw, 600px);
|
|
border: 1px solid #777;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.rankLiveFieldContainerEmty {
|
|
display: block;
|
|
min-height: 30px;
|
|
width: 100%;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
#eeeeee50,
|
|
#eeeeee50 5px,
|
|
#dddddd50 5px,
|
|
#dddddd50 10px
|
|
);
|
|
}
|
|
|
|
.singleValueSpan {
|
|
position: relative;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
border: 1px solid #777;
|
|
cursor: grab;
|
|
}
|
|
|
|
.staticText {
|
|
border-color: #00f;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.staticText .textSingleValueSpan {
|
|
white-space: pre;
|
|
}
|
|
|
|
.settingSpan {
|
|
display: none;
|
|
padding: 2px;
|
|
border-radius: 3px;
|
|
background-color: #09d1ce;
|
|
position: absolute;
|
|
top: 0px;
|
|
transform: translateX(50%) translateY(-50%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.headerThRankLiveConfig .settingSpan {
|
|
right: 50%;
|
|
}
|
|
|
|
.singleValueSpan .settingSpan {
|
|
right: 0px;
|
|
}
|
|
|
|
.mainTable:not(.selectCondEl) .singleValueSpan:hover .settingSpan,
|
|
.mainTable:not(.selectCondEl) .headerThRankLiveConfig:hover .settingSpan,
|
|
.settingsDivSingleValueSpan:not(.hidden) + .settingSpan {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.settingSpan > svg {
|
|
display: block;
|
|
height: 16px;
|
|
width: 16px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.settingsDivSingleValueSpan {
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateY(100%);
|
|
min-width: 100%;
|
|
width: fit-content;
|
|
gap: 12px;
|
|
z-index: 10;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.settingsInputGroup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.singleValueSpan[data-bold="true"] .textSingleValueSpan, .singleValueSpan[data-bold="true"] .statischerTextInput {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.addFieldBtn {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #36e049;
|
|
display: flex;
|
|
height: 30px;
|
|
width: 30px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
border-radius: 0 0 10px 0;
|
|
filter: grayscale(1);
|
|
transform: translateY(-37.5%) translateX(-37.5%) scale(0.25);
|
|
transition: transform 0.3s ease, scale 0.3s ease;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
}
|
|
|
|
.mainTable.selectCondEl .addFieldBtn {
|
|
transform: scale(0) translateY(-50%) translateX(-50%);
|
|
scale: 1;
|
|
}
|
|
|
|
.mainTable:not(.selectCondEl) .rankLiveFieldContainer:hover:not(:has(.singleValueSpan:hover)) .addFieldBtn {
|
|
filter: grayscale(0);
|
|
transform: scale(1) translateY(0) translateX(0);
|
|
scale: 1;
|
|
}
|
|
|
|
.headerThRankLiveConfig > span .deleteColumnBtn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #e03669;
|
|
display: flex;
|
|
height: 30px;
|
|
width: 30px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
border-radius: 0 0 0 10px;
|
|
filter: grayscale(1);
|
|
transform: translateY(-37.5%) translateX(37.5%) scale(0.25);
|
|
transition: transform 0.3s ease, scale 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.headerThRankLiveConfig:not(.ui-sortable-helper) > span:hover .deleteColumnBtn {
|
|
filter: grayscale(0);
|
|
transform: scale(1) translateY(0) translateX(0);
|
|
scale: 1;
|
|
}
|
|
|
|
.checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: max-content;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.checkbox input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.checkbox-ui {
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: 42px;
|
|
height: 24px;
|
|
flex: 0 0 auto;
|
|
background: var(--ui-border);
|
|
border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
|
|
border-radius: 999px;
|
|
transition:
|
|
background-color 180ms ease,
|
|
border-color 180ms ease,
|
|
box-shadow 180ms ease;
|
|
}
|
|
|
|
.checkbox-ui::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 3px;
|
|
width: 18px;
|
|
height: 18px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 7px rgba(15, 23, 42, 0.22);
|
|
transform: translateY(-50%);
|
|
transition: transform 180ms ease;
|
|
}
|
|
|
|
.checkbox input:checked + .checkbox-ui {
|
|
background: var(--bg-top);
|
|
border-color: var(--bg-top);
|
|
}
|
|
|
|
.checkbox input:checked + .checkbox-ui::after {
|
|
transform: translate(18px, -50%);
|
|
}
|
|
|
|
.checkbox input:focus-visible + .checkbox-ui {
|
|
box-shadow: 0 0 0 4px var(--ui-focus);
|
|
}
|
|
|
|
.dropPlaceholder {
|
|
border: 2px dashed #ccc;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dropPlaceholderColumn {
|
|
border: 2px dashed #ddd;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.statischerTextInput {
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
.statischerTextInput:focus {
|
|
border-color: var(--bg-top);
|
|
outline: none;
|
|
}
|
|
|
|
.columnTitleInput, .inputFontSize, .gebutsdatumFormatInput, .inputDisplayOnDisplayWidth {
|
|
background: none;
|
|
padding: 2px;
|
|
margin-right: 10px;
|
|
height: auto;
|
|
width: 100%;
|
|
max-width: 20vw;
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
.columnTitleInput:focus {
|
|
border-color: var(--bg-top);
|
|
}
|
|
|
|
.customSelectAddOption .selectOptions {
|
|
width: fit-content;
|
|
}
|
|
|
|
.customSelectAddOption {
|
|
position: absolute !important;
|
|
background: #fff;
|
|
}
|
|
|
|
.inputFontSize {
|
|
max-width: 60px;
|
|
}
|
|
|
|
.inputDisplayOnDisplayWidth {
|
|
width: 90px;
|
|
}
|
|
|
|
.autocomplete-container {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.dropdown-list {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border: 1px solid #ccc;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.verticalLayoutEl {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.verticalLayoutEl > span.dragableDropArea {
|
|
min-height: 20px;
|
|
min-width: max(50px, 100%);
|
|
padding: 12px;
|
|
display: flex;
|
|
width: fit-content;
|
|
justify-content: center;
|
|
}
|
|
|
|
.verticalLayoutEl > span.dragableDropArea:not(:last-child) {
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
.inputLabelWrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.selectSlugType {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.customSelectSlugType {
|
|
border: 1px solid #000;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.selectCondEl.mainTable .singleValueSpan:not(.condEl) {
|
|
border-color: #a5a5a5;
|
|
color: #a5a5a5;
|
|
background-color: #ececec;
|
|
}
|
|
|
|
.selectCondEl.mainTable .singleValueSpan:not(.condEl):hover {
|
|
border-color: #0fab91;
|
|
color: #0fab91;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.selectCondEl.mainTable .singleValueSpan.selectedCondEl {
|
|
border-color: #ab4b0f;
|
|
color: #ab4b0f;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.blackBtn {
|
|
background: var(--main-button);
|
|
border: 1px solid #fff;
|
|
color: #ffffff;
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
transition: transform 0.3s ease;
|
|
letter-spacing: 1px;
|
|
display: inline-flex;
|
|
align-self: flex-start;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.blackBtn:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.blackBtn:active {
|
|
transform: scale(0.98);
|
|
} |