changes
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
$o-webclient-color-scheme: bright !default;
|
||||
|
||||
$_fclk-planner-page: #f3f4f6;
|
||||
$_fclk-planner-panel: #eef1f4;
|
||||
$_fclk-planner-card: #ffffff;
|
||||
$_fclk-planner-text: #1f2937;
|
||||
$_fclk-planner-muted: #6b7280;
|
||||
$_fclk-planner-border: #d8dadd;
|
||||
$_fclk-planner-border-strong: #9ca3af;
|
||||
$_fclk-planner-day: #b7dff5;
|
||||
$_fclk-planner-subhead: #d8e9bd;
|
||||
$_fclk-planner-hours: #f5d39b;
|
||||
$_fclk-planner-fallback: #fff8e5;
|
||||
$_fclk-planner-row-hover: #f9fafb;
|
||||
$_fclk-planner-error: #dc2626;
|
||||
$_fclk-planner-focus: #2563eb;
|
||||
$_fclk-planner-shadow: rgba(15, 23, 42, 0.08);
|
||||
$_fclk-planner-editor: #111827;
|
||||
$_fclk-planner-editor-text: #f9fafb;
|
||||
$_fclk-planner-editor-muted: #cbd5e1;
|
||||
$_fclk-planner-editor-border: #374151;
|
||||
$_fclk-planner-editor-control: #ffffff;
|
||||
$_fclk-planner-editor-control-text: #111827;
|
||||
$_fclk-planner-editor-chip: #1f2937;
|
||||
$_fclk-planner-editor-chip-hover: #334155;
|
||||
|
||||
@if $o-webclient-color-scheme == dark {
|
||||
$_fclk-planner-page: #171a1f !global;
|
||||
$_fclk-planner-panel: #20242b !global;
|
||||
$_fclk-planner-card: #262b33 !global;
|
||||
$_fclk-planner-text: #f3f4f6 !global;
|
||||
$_fclk-planner-muted: #a3aab8 !global;
|
||||
$_fclk-planner-border: #3b424c !global;
|
||||
$_fclk-planner-border-strong: #647082 !global;
|
||||
$_fclk-planner-day: #21465f !global;
|
||||
$_fclk-planner-subhead: #394b2d !global;
|
||||
$_fclk-planner-hours: #6f4f22 !global;
|
||||
$_fclk-planner-fallback: #393326 !global;
|
||||
$_fclk-planner-row-hover: #2b313a !global;
|
||||
$_fclk-planner-error: #f87171 !global;
|
||||
$_fclk-planner-focus: #60a5fa !global;
|
||||
$_fclk-planner-shadow: rgba(0, 0, 0, 0.32) !global;
|
||||
$_fclk-planner-editor: #0f172a !global;
|
||||
$_fclk-planner-editor-text: #f9fafb !global;
|
||||
$_fclk-planner-editor-muted: #cbd5e1 !global;
|
||||
$_fclk-planner-editor-border: #475569 !global;
|
||||
$_fclk-planner-editor-control: #1f2937 !global;
|
||||
$_fclk-planner-editor-control-text: #f9fafb !global;
|
||||
$_fclk-planner-editor-chip: #1e293b !global;
|
||||
$_fclk-planner-editor-chip-hover: #334155 !global;
|
||||
}
|
||||
|
||||
:root {
|
||||
--fclk-planner-page: #{$_fclk-planner-page};
|
||||
--fclk-planner-panel: #{$_fclk-planner-panel};
|
||||
--fclk-planner-card: #{$_fclk-planner-card};
|
||||
--fclk-planner-text: #{$_fclk-planner-text};
|
||||
--fclk-planner-muted: #{$_fclk-planner-muted};
|
||||
--fclk-planner-border: #{$_fclk-planner-border};
|
||||
--fclk-planner-border-strong: #{$_fclk-planner-border-strong};
|
||||
--fclk-planner-day: #{$_fclk-planner-day};
|
||||
--fclk-planner-subhead: #{$_fclk-planner-subhead};
|
||||
--fclk-planner-hours: #{$_fclk-planner-hours};
|
||||
--fclk-planner-fallback: #{$_fclk-planner-fallback};
|
||||
--fclk-planner-row-hover: #{$_fclk-planner-row-hover};
|
||||
--fclk-planner-error: #{$_fclk-planner-error};
|
||||
--fclk-planner-focus: #{$_fclk-planner-focus};
|
||||
--fclk-planner-shadow: #{$_fclk-planner-shadow};
|
||||
--fclk-planner-editor: #{$_fclk-planner-editor};
|
||||
--fclk-planner-editor-text: #{$_fclk-planner-editor-text};
|
||||
--fclk-planner-editor-muted: #{$_fclk-planner-editor-muted};
|
||||
--fclk-planner-editor-border: #{$_fclk-planner-editor-border};
|
||||
--fclk-planner-editor-control: #{$_fclk-planner-editor-control};
|
||||
--fclk-planner-editor-control-text: #{$_fclk-planner-editor-control-text};
|
||||
--fclk-planner-editor-chip: #{$_fclk-planner-editor-chip};
|
||||
--fclk-planner-editor-chip-hover: #{$_fclk-planner-editor-chip-hover};
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
:root {
|
||||
--fclk-planner-page: #171a1f;
|
||||
--fclk-planner-panel: #20242b;
|
||||
--fclk-planner-card: #262b33;
|
||||
--fclk-planner-text: #f3f4f6;
|
||||
--fclk-planner-muted: #a3aab8;
|
||||
--fclk-planner-border: #3b424c;
|
||||
--fclk-planner-border-strong: #647082;
|
||||
--fclk-planner-day: #21465f;
|
||||
--fclk-planner-subhead: #394b2d;
|
||||
--fclk-planner-hours: #6f4f22;
|
||||
--fclk-planner-fallback: #393326;
|
||||
--fclk-planner-row-hover: #2b313a;
|
||||
--fclk-planner-error: #f87171;
|
||||
--fclk-planner-focus: #60a5fa;
|
||||
--fclk-planner-shadow: rgba(0, 0, 0, 0.32);
|
||||
--fclk-planner-editor: #0f172a;
|
||||
--fclk-planner-editor-text: #f9fafb;
|
||||
--fclk-planner-editor-muted: #cbd5e1;
|
||||
--fclk-planner-editor-border: #475569;
|
||||
--fclk-planner-editor-control: #1f2937;
|
||||
--fclk-planner-editor-control-text: #f9fafb;
|
||||
--fclk-planner-editor-chip: #1e293b;
|
||||
--fclk-planner-editor-chip-hover: #334155;
|
||||
}
|
||||
447
fusion_clock/static/src/scss/fusion_clock_shift_planner.scss
Normal file
447
fusion_clock/static/src/scss/fusion_clock_shift_planner.scss
Normal file
@@ -0,0 +1,447 @@
|
||||
.fclk-planner {
|
||||
min-height: 100%;
|
||||
background: var(--fclk-planner-page, #f3f4f6);
|
||||
color: var(--fclk-planner-text, #1f2937);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fclk-planner__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
background: var(--fclk-planner-card, #ffffff);
|
||||
border-bottom: 1px solid var(--fclk-planner-border, #d8dadd);
|
||||
box-shadow: 0 1px 3px var(--fclk-planner-shadow, rgba(15, 23, 42, 0.08));
|
||||
}
|
||||
|
||||
.fclk-planner__title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 650;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.fclk-planner__subtitle {
|
||||
color: var(--fclk-planner-muted, #6b7280);
|
||||
font-size: 13px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.fclk-planner__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fclk-planner__warning {
|
||||
margin: 12px 16px 0;
|
||||
padding: 10px 12px;
|
||||
background: #fff7ed;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 6px;
|
||||
color: #9a3412;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fclk-planner__loading {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
min-height: 340px;
|
||||
color: var(--fclk-planner-muted, #6b7280);
|
||||
}
|
||||
|
||||
.fclk-planner__table-wrap {
|
||||
flex: 1;
|
||||
margin: 16px;
|
||||
overflow: auto;
|
||||
background: var(--fclk-planner-panel, #eef1f4);
|
||||
border: 1px solid var(--fclk-planner-border, #d8dadd);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 6px 20px var(--fclk-planner-shadow, rgba(15, 23, 42, 0.08));
|
||||
}
|
||||
|
||||
.fclk-planner__table {
|
||||
--fclk-planner-shift-width: 135px;
|
||||
--fclk-planner-hours-width: 55px;
|
||||
--fclk-planner-days-width: 1330px;
|
||||
width: 100%;
|
||||
min-width: 1600px;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
background: var(--fclk-planner-card, #ffffff);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fclk-planner__employee-col {
|
||||
width: calc(100% - var(--fclk-planner-days-width));
|
||||
}
|
||||
|
||||
.fclk-planner__shift-col {
|
||||
width: var(--fclk-planner-shift-width);
|
||||
}
|
||||
|
||||
.fclk-planner__hours-col {
|
||||
width: var(--fclk-planner-hours-width);
|
||||
}
|
||||
|
||||
.fclk-planner__table th,
|
||||
.fclk-planner__table td {
|
||||
border-right: 1px solid var(--fclk-planner-border-strong, #9ca3af);
|
||||
border-bottom: 1px solid var(--fclk-planner-border-strong, #9ca3af);
|
||||
}
|
||||
|
||||
.fclk-planner__employee-head,
|
||||
.fclk-planner__day-head,
|
||||
.fclk-planner__sub-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 6;
|
||||
color: var(--fclk-planner-text, #1f2937);
|
||||
}
|
||||
|
||||
.fclk-planner__employee-head {
|
||||
left: 0;
|
||||
z-index: 8;
|
||||
width: calc(100% - var(--fclk-planner-days-width));
|
||||
background: var(--fclk-planner-day, #b7dff5);
|
||||
text-align: left;
|
||||
padding: 10px 12px;
|
||||
border-left: 1px solid var(--fclk-planner-border-strong, #9ca3af);
|
||||
}
|
||||
|
||||
.fclk-planner__day-head {
|
||||
background: var(--fclk-planner-day, #b7dff5);
|
||||
text-align: center;
|
||||
padding: 6px 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fclk-planner__sub-head {
|
||||
top: 47px;
|
||||
background: var(--fclk-planner-subhead, #d8e9bd);
|
||||
text-align: left;
|
||||
padding: 5px 8px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.fclk-planner__hours-head {
|
||||
width: var(--fclk-planner-hours-width);
|
||||
text-align: center;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.fclk-planner__weekday {
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.fclk-planner__date {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.fclk-planner__department-row td {
|
||||
background: var(--fclk-planner-panel, #eef1f4);
|
||||
padding: 0;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.fclk-planner__department-toggle {
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--fclk-planner-text, #1f2937);
|
||||
font-weight: 650;
|
||||
padding: 7px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fclk-planner__department-count {
|
||||
color: var(--fclk-planner-muted, #6b7280);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fclk-planner__employee-row {
|
||||
background: var(--fclk-planner-card, #ffffff);
|
||||
}
|
||||
|
||||
.fclk-planner__employee-row:hover {
|
||||
background: var(--fclk-planner-row-hover, #f9fafb);
|
||||
}
|
||||
|
||||
.fclk-planner__employee-cell {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
width: calc(100% - var(--fclk-planner-days-width));
|
||||
background: inherit;
|
||||
padding: 8px 12px;
|
||||
border-left: 1px solid var(--fclk-planner-border-strong, #9ca3af);
|
||||
}
|
||||
|
||||
.fclk-planner__employee-name {
|
||||
font-weight: 650;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.fclk-planner__employee-role {
|
||||
margin-top: 2px;
|
||||
color: var(--fclk-planner-muted, #6b7280);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fclk-planner__shift-cell {
|
||||
width: var(--fclk-planner-shift-width);
|
||||
min-height: 42px;
|
||||
padding: 4px;
|
||||
vertical-align: top;
|
||||
background: var(--fclk-planner-card, #ffffff);
|
||||
}
|
||||
|
||||
.fclk-planner__shift-cell--fallback {
|
||||
background: var(--fclk-planner-fallback, #fff8e5);
|
||||
}
|
||||
|
||||
.fclk-planner__shift-cell--error {
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.fclk-planner__shift-cell--active {
|
||||
box-shadow: inset 0 0 0 2px var(--fclk-planner-focus, #2563eb);
|
||||
}
|
||||
|
||||
.fclk-planner__shift-input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--fclk-planner-text, #1f2937);
|
||||
padding: 4px 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
outline: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fclk-planner__shift-input:focus {
|
||||
background: var(--fclk-planner-card, #ffffff);
|
||||
border-color: var(--fclk-planner-focus, #2563eb);
|
||||
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
|
||||
}
|
||||
|
||||
.fclk-planner__cell-error {
|
||||
color: var(--fclk-planner-error, #dc2626);
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
padding: 3px 5px 0;
|
||||
}
|
||||
|
||||
.fclk-planner__hours-cell {
|
||||
width: var(--fclk-planner-hours-width);
|
||||
background: var(--fclk-planner-hours, #f5d39b);
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 650;
|
||||
vertical-align: middle;
|
||||
padding: 6px 2px;
|
||||
}
|
||||
|
||||
.fclk-planner__cell-editor {
|
||||
position: fixed;
|
||||
z-index: 1080;
|
||||
width: calc(100vw - 16px);
|
||||
max-width: 380px;
|
||||
padding: 14px;
|
||||
color: var(--fclk-planner-editor-text, #f9fafb);
|
||||
background: var(--fclk-planner-editor, #111827);
|
||||
border: 1px solid var(--fclk-planner-editor-border, #374151);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.fclk-planner__cell-editor::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 28px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--fclk-planner-editor, #111827);
|
||||
border-left: 1px solid var(--fclk-planner-editor-border, #374151);
|
||||
border-top: 1px solid var(--fclk-planner-editor-border, #374151);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.fclk-planner__editor-head {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.fclk-planner__editor-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.fclk-planner__editor-day {
|
||||
margin-top: 2px;
|
||||
color: var(--fclk-planner-editor-muted, #cbd5e1);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fclk-planner__editor-hours {
|
||||
min-width: 56px;
|
||||
padding: 5px 8px;
|
||||
text-align: center;
|
||||
color: #111827;
|
||||
background: var(--fclk-planner-hours, #f5d39b);
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.fclk-planner__quick-grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fclk-planner__quick-chip {
|
||||
min-height: 46px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 7px 9px;
|
||||
color: var(--fclk-planner-editor-text, #f9fafb);
|
||||
background: var(--fclk-planner-editor-chip, #1f2937);
|
||||
border: 1px solid var(--fclk-planner-editor-border, #374151);
|
||||
border-radius: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fclk-planner__quick-chip:hover,
|
||||
.fclk-planner__quick-chip:focus {
|
||||
background: var(--fclk-planner-editor-chip-hover, #334155);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fclk-planner__quick-label {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.fclk-planner__quick-detail {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--fclk-planner-editor-muted, #cbd5e1);
|
||||
font-size: 11px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.fclk-planner__time-row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.fclk-planner__time-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
margin: 0;
|
||||
color: var(--fclk-planner-editor-muted, #cbd5e1);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.fclk-planner__time-field select {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
color: var(--fclk-planner-editor-control-text, #111827);
|
||||
background: var(--fclk-planner-editor-control, #ffffff);
|
||||
border: 1px solid var(--fclk-planner-editor-border, #374151);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fclk-planner__editor-error {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 10px;
|
||||
padding: 7px 8px;
|
||||
color: #991b1b;
|
||||
background: #fee2e2;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.fclk-planner__editor-actions {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.fclk-planner__toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fclk-planner__actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.fclk-planner__table-wrap {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.fclk-planner__cell-editor {
|
||||
width: calc(100vw - 16px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user