Files
crmPRO/layout/style.scss
Jacek Pyziak 7c2a42a66f feat: Add wiki integration to task management
- Implemented a multi-select dropdown for associating tasks with wiki entries in the task edit form.
- Enhanced task popup to display related wiki entries with visibility controls based on user permissions.
- Updated the wiki main view to support bulk actions for categories, including deletion and search functionality.
- Created a new database migration for establishing many-to-many relationships between tasks and wiki entries.
- Improved styling for wiki components to enhance user experience.
- Added a new AGENTS.md file to outline communication and change management protocols.
2026-03-03 11:52:04 +01:00

2099 lines
37 KiB
SCSS

$cBlue: #6690F4;
$cRed: #cc563d;
$cGreen: #099885;
$cBlack: #4e5e6a;
.default-btn {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
border-radius: 6px;
padding: 0 15px;
transition: all .3s ease;
&:hover {
text-decoration: none;
}
}
.animate {
animation: mymove 3s infinite;
}
.text-right {
text-align: right;
}
.nowrap {
white-space: nowrap;
}
table {
border-collapse: collapse;
font-size: 13px;
}
small {
font-size: .75em;
}
@keyframes mymove {
50% {
opacity: .33;
}
}
/* motion */
@keyframes gradient-animation {
0% {
background-position: 15% 0%;
}
50% {
background-position: 85% 100%;
}
100% {
background-position: 15% 0%;
}
}
@keyframes frame-enter {
0% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
}
}
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
font-size: 15px;
color: #4e5e6a;
}
.btn {
padding: 9px 25px;
transition: all 0.3s ease;
color: #FFF;
border: 0;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
text-decoration: none;
gap: 5px;
justify-content: center;
align-items: center;
&.btn_small,
&.btn-xs,
&.btn-sm {
padding: 5px 7px;
font-size: 13px;
i {
font-size: 12px;
}
}
&.btn-success {
background: $cGreen;
&:hover {
background: #4a9c3b;
}
}
&.btn-primary {
background: $cBlue;
&:hover {
background: #3164db;
}
}
&.btn-danger {
background: $cRed;
&:hover {
background: #b30000;
}
}
}
.hide {
display: none;
}
.form-error {
color: $cRed;
font-size: 13px;
}
.input-group {
margin-bottom: 10px;
}
.form-field {
margin-bottom: 15px;
label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
color: #4e5e6a;
}
}
.password-wrap {
position: relative;
.form-control {
padding-right: 40px;
}
.password-eye {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
text-decoration: none;
z-index: 2;
&:hover {
color: #333;
}
}
}
input[type="checkbox"] {
border: 1px solid #cdcdcd;
}
.form-control {
border: 1px solid #cdcdcd;
border-radius: 6px;
height: 35px;
width: 100%;
padding: 5px;
font-family: "Open Sans", sans-serif;
option {
padding: 5px;
}
&:focus {
border: 1px solid $cBlue;
outline: none;
}
}
.unlogged {
background: #EEF1F9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.box-login {
background: #FFF;
padding: 25px;
border-radius: 6px;
width: 400px;
.title {
text-align: center;
padding: 10px 10px 25px;
border-bottom: 1px solid #cdcdcd;
font-size: 20px;
margin-bottom: 25px;
}
}
}
$sidebar-width: 220px;
$sidebar-collapsed-width: 60px;
$sidebar-bg: #1e2a3a;
$sidebar-text: #c2c7d0;
$sidebar-active: #fff;
$sidebar-hover-bg: rgba(255, 255, 255, 0.08);
.sidebar {
position: fixed;
top: 0;
left: 0;
width: $sidebar-width;
height: 100vh;
background: $sidebar-bg;
display: flex;
flex-direction: column;
z-index: 1000;
transition: width 0.3s ease;
overflow: hidden;
&.collapsed {
width: $sidebar-collapsed-width;
.sidebar-header .sidebar-logo span,
.sidebar-nav ul li a span,
.sidebar-footer span,
.sidebar-footer .sidebar-user span {
display: none;
}
.sidebar-header .sidebar-logo {
font-size: 0;
&::first-letter {
font-size: 16px;
}
}
.sidebar-nav ul li a {
justify-content: center;
padding: 10px;
i {
margin-right: 0;
}
}
.sidebar-nav ul li.has-submenu {
.submenu-arrow {
display: none;
}
.sidebar-submenu {
display: none;
}
}
.sidebar-footer .sidebar-footer-link,
.sidebar-footer .sidebar-user {
justify-content: center;
padding: 8px 10px;
i {
margin-right: 0;
}
}
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
.sidebar-logo {
color: $cBlue;
text-decoration: none;
font-size: 16px;
white-space: nowrap;
span {
font-weight: 700;
}
}
.sidebar-toggle {
cursor: pointer;
color: $sidebar-text;
font-size: 16px;
transition: color 0.2s ease;
&:hover {
color: #fff;
}
}
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 10px 0;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
a {
display: flex;
align-items: center;
padding: 10px 15px;
color: $sidebar-text;
text-decoration: none;
font-size: 14px;
transition: all 0.2s ease;
white-space: nowrap;
i {
width: 20px;
text-align: center;
margin-right: 10px;
font-size: 15px;
}
&:hover {
background: $sidebar-hover-bg;
color: $sidebar-active;
}
}
&.active a {
background: $sidebar-hover-bg;
color: $sidebar-active;
font-weight: 600;
}
&.has-submenu {
>a .submenu-arrow {
margin-left: auto;
font-size: 12px;
transition: transform 0.2s ease;
width: auto;
}
&.open>a .submenu-arrow {
transform: rotate(180deg);
}
.sidebar-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
background: rgba(0, 0, 0, 0.15);
li a {
padding: 8px 15px 8px 45px;
font-size: 13px;
i {
font-size: 13px;
width: 16px;
}
}
}
&.open .sidebar-submenu {
max-height: 200px;
}
}
}
}
}
.sidebar-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px 0;
.sidebar-user {
display: flex;
align-items: center;
padding: 8px 15px;
color: $sidebar-text;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
i {
margin-right: 10px;
color: $cBlue;
}
}
.sidebar-footer-link {
display: flex;
align-items: center;
padding: 8px 15px;
color: $sidebar-text;
text-decoration: none;
font-size: 13px;
transition: all 0.2s ease;
white-space: nowrap;
i {
width: 20px;
text-align: center;
margin-right: 10px;
}
&:hover {
background: $sidebar-hover-bg;
color: $sidebar-active;
}
&.logout {
color: $cRed;
&:hover {
color: #e07a66;
}
}
}
}
}
.content-wrapper {
margin-left: $sidebar-width;
min-height: 100vh;
transition: margin-left 0.3s ease;
&.expanded {
margin-left: $sidebar-collapsed-width;
}
}
.top-bar {
background: #fff;
border-bottom: 1px solid #e8e8e8;
padding: 10px 20px;
display: flex;
align-items: center;
.top-bar-left {
display: flex;
align-items: center;
gap: 15px;
i {
cursor: pointer;
font-size: 18px;
color: #4e5e6a;
&:hover {
color: #000;
}
}
}
}
.main {
padding: 25px;
background: #D9DEE2;
min-height: calc(100vh - 45px);
}
.tasks_container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
.column {
width: 100%;
h2 {
display: flex;
padding: 10px;
background: #FFF;
margin-bottom: 10px;
font-size: 15px;
font-weight: 300;
border-radius: 3px 3px 0 0;
justify-content: space-between;
align-items: center;
i {
cursor: pointer;
}
}
&.tasks_suspended {
h2 {
border-bottom: 5px solid $cRed;
}
}
&.tasks_fvat {
h2 {
border-bottom: 5px solid #a900fc;
}
}
&.tasks_new {
h2 {
border-bottom: 5px solid #ccc;
}
}
&.tasks_bulk {
h2 {
border-bottom: 5px solid #ff8c00;
}
}
&.tasks_to_do {
h2 {
border-bottom: 5px solid #2aaf47;
}
}
&.tasks_to_review {
h2 {
border-bottom: 5px solid #2535c9;
}
}
&.tasks_closed {
h2 {
border-bottom: 5px solid #000;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
.task {
margin-bottom: 5px;
background: #FFF;
padding: 10px;
border-radius: 0;
display: flex;
position: relative;
border-radius: 6px;
flex-wrap: wrap;
&.notopened {
border: 2px solid $cRed;
}
.top {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
width: 100%;
._users {
display: flex;
gap: 5px;
flex-wrap: wrap;
.user {
display: flex;
width: 25px;
height: 25px;
border-radius: 6px;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 12px;
}
}
._timer {
display: flex;
gap: 5px;
.recursively {
color: #FFF;
background: #405189;
border-radius: 3px;
cursor: pointer;
margin-bottom: 5px;
width: 25px;
height: 25px;
text-align: center;
display: block;
i {
font-size: 12px;
}
}
.task_start {
display: block;
background: $cGreen;
color: #FFF;
border-radius: 6px;
cursor: pointer;
margin-bottom: 5px;
width: 25px;
height: 25px;
text-align: center;
&.hidden {
display: none;
}
i {
font-size: 12px;
}
}
.task_end {
background: $cRed;
display: block;
color: #FFF;
border-radius: 6px;
cursor: pointer;
margin-bottom: 5px;
width: 25px;
height: 25px;
text-align: center;
&.hidden {
display: none;
}
i {
font-size: 12px;
}
}
}
}
.middle {
width: 100%;
}
.name {
font-size: 14px;
color: #333;
text-decoration: none;
display: block;
margin-bottom: 5px;
}
.bottom {
display: flex;
justify-content: space-between;
}
.client_info,
.current_status {
font-size: 12px;
font-weight: 400;
strong {
font-weight: 600;
}
}
.current_status {
position: relative;
cursor: pointer;
.status_change {
position: absolute;
left: 0;
top: 20px;
background: #fff;
padding: 15px;
border: 1px solid #dfdfdf;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
z-index: 99;
display: none;
select {
width: 250px;
padding: 10px;
border: 1px solid #cdcdcd;
border-radius: 3px;
option {
font-size: 15px;
padding: 3px;
}
}
}
}
.dates {
margin-bottom: 5px;
display: flex;
justify-content: space-between;
font-size: 12px;
.danger {
color: $cRed;
font-weight: 600;
}
.warning {
color: #ff8c00;
}
i {
font-size: 12px;
color: #C9CED4;
margin-right: 5px;
}
}
}
}
}
}
/* page header */
.block-header {
margin-bottom: 20px;
h2 {
font-size: 20px;
font-weight: 400;
color: $cBlack;
margin: 0;
padding-bottom: 12px;
border-bottom: 2px solid #e2e6ec;
strong {
font-weight: 700;
}
}
}
/* filters bar — reusable across modules */
.filters-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 24px;
padding: 12px 16px;
background: #f5f7fa;
border-radius: 8px;
border: 1px solid #e2e6ec;
select,
input[type="text"],
input[type="date"],
input[type="number"] {
height: 36px;
min-width: 170px;
padding: 0 10px;
border: 1px solid #d0d5dd;
border-radius: 6px;
background: #fff;
font-size: 13px;
color: $cBlack;
font-family: "Open Sans", sans-serif;
transition: border-color 0.2s;
&:focus {
border-color: $cBlue;
outline: none;
}
}
.btn {
height: 36px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
border: none;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
text-decoration: none;
color: #fff;
&.btn-primary {
background: $cBlue;
&:hover {
background: #4a74d4;
}
}
&.btn-success {
background: $cGreen;
&:hover {
background: #077a6b;
}
}
}
}
/* section title — reusable */
.section-title {
font-size: 14px;
font-weight: 600;
color: $cBlack;
margin: 28px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e2e6ec;
}
.action_menu {
display: flex;
margin-bottom: 25px;
gap: 20px;
.btn {
display: inline-flex;
padding: 7px 15px;
color: #FFF;
text-decoration: none;
align-items: center;
justify-content: center;
gap: 5px;
&.btn_add {
background: $cGreen;
&:hover {
background: #4a9c3b;
}
}
&.btn_cancel {
background: $cRed;
&:hover {
background: #b30000;
}
}
&.disabled {
opacity: .5;
}
}
}
.form_container {
background: #FFF;
padding: 25px;
max-width: 1300px;
&.full {
max-width: 100%;
}
.form_group {
margin-bottom: 10px;
display: flex;
>.label {
width: 300px;
display: inline-flex;
align-items: flex-start;
justify-content: right;
padding-right: 10px;
}
.input {
width: calc(100% - 300px);
}
}
}
.fullscreen_description {
position: fixed !important;
top: 25px;
left: 25px;
right: 25px;
bottom: 25px;
z-index: 9999;
background: white;
padding: 20px;
overflow: auto;
border-radius: 0.25rem;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.fullscreen {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #FFF;
background: $cRed;
display: inline-flex;
height: 40px;
width: 40px;
border-radius: 6px;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&:hover {
transform: scale(1.05);
text-decoration: none;
}
}
.task_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 9999;
.task_details {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #FFF;
padding: 25px;
border-radius: 6px;
max-width: 1140px;
width: 100%;
transition: all 0.3s ease;
height: 90vh;
.content {
height: calc(100% - 50px);
}
&.open_works_time {
max-width: 1540px;
.content {
grid-template-columns: 1fr 300px 350px;
.task_work_details {
display: block;
}
}
}
.title {
font-size: 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
a {
border: 1px solid $cGreen;
display: inline-flex;
height: 30px;
width: 30px;
border-radius: 6px;
align-items: center;
justify-content: center;
&:hover {
text-decoration: none;
}
i {
color: $cGreen;
}
&.task-delete {
border: 1px solid $cRed;
i {
color: $cRed;
}
}
i {
font-size: 14px;
}
}
.task-title-edit-box {
align-items: center;
gap: 6px;
.task-title-input {
height: 30px;
font-size: 14px;
padding: 2px 8px;
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
}
a.task-title-save,
a.task-title-cancel {
height: 30px;
width: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
i {
font-size: 13px;
}
}
a.task-title-save {
background: $cGreen;
border-color: $cGreen;
i {
color: #fff;
}
}
a.task-title-cancel {
background: $cRed;
border-color: $cRed;
i {
color: #fff;
}
}
}
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.content {
display: grid;
font-size: 14px;
grid-template-columns: 1fr 300px;
gap: 30px;
transition: all 0.3s ease;
h3 {
width: 100%;
margin-top: 0;
margin-bottom: 5px;
font-weight: 500;
color: #000;
font-size: 17px;
}
.left {
height: 100%;
overflow: hidden;
.users {
display: flex;
gap: 20px;
.user {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
.avatar {
height: 30px;
width: 30px;
border-radius: 6px;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 12px;
}
}
}
.comments {
border-radius: 3px;
max-height: 406px;
overflow-y: auto;
.new_comment {
margin-bottom: 10px;
textarea {
height: 75px;
margin-bottom: 10px;
border-radius: 6px;
}
.add_comment {
background: $cGreen;
color: #FFF;
padding: 10px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
text-decoration: none;
&:hover {
background: #4a9c3b;
}
}
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
background: #ced4da;
margin-bottom: 5px;
padding: 15px;
border-radius: 6px;
position: relative;
.delete_comment {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: $cRed;
}
.author {
font-weight: 600;
margin-bottom: 5px;
display: inline-flex;
margin-right: 10px;
}
.date {
font-size: 12px;
margin-bottom: 5px;
display: inline-flex;
}
.text {
margin-bottom: 15px;
font-size: 13px;
}
}
}
}
.checklist {
border-radius: 3px;
margin-bottom: 10px;
.new_element {
display: flex;
margin-bottom: 10px;
input {
border-radius: 6px 0 0 6px;
}
a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 0 6px 6px 0;
text-decoration: none;
width: 35px;
background: $cGreen;
color: #FFF;
}
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow-y: auto;
max-height: calc(90vh - 400px);
li {
display: flex;
gap: 10px;
margin-bottom: 5px;
background: #FFF;
border-radius: 3px;
padding: 10px;
border: 1px solid #cdcdcd;
font-size: 13px;
align-items: flex-start;
a {
margin-left: auto;
margin-right: 0;
cursor: pointer;
background: $cRed;
display: flex;
height: 25px;
width: 25px;
min-width: 25px;
justify-content: center;
align-items: center;
border: 0;
border-radius: 3px;
transition: all 0.3s ease;
&:hover {
text-decoration: none;
background: #b30000;
}
i {
color: #FFF;
font-size: 12px;
}
}
}
}
}
.attachments {
margin-top: 10px;
border: 1px solid #e6e9ed;
border-radius: 8px;
padding: 12px;
background: #f9fbfd;
h3 {
margin-bottom: 10px;
font-size: 16px;
font-weight: 600;
}
.attachments_upload {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
.attachment_file_input {
flex: 1;
margin-bottom: 0;
border-radius: 6px;
background: #fff;
}
.attachment-upload-btn {
white-space: nowrap;
border-radius: 6px;
min-width: 150px;
&.is-loading {
pointer-events: none;
opacity: 0.85;
i {
margin-right: 6px;
}
}
}
}
.attachments_list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
max-height: 180px;
overflow-y: auto;
li {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #e4e8ee;
border-radius: 6px;
padding: 8px 10px;
.attachment-link {
color: #1f3d72;
text-decoration: none;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: calc(100% - 140px);
&:hover {
text-decoration: underline;
}
}
small {
color: #6b7280;
margin-right: auto;
}
.attachment-rename,
.attachment-delete {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
width: 28px;
border-radius: 4px;
text-decoration: none;
transition: all 0.2s ease;
}
.attachment-rename {
border: 1px solid #d8e2f6;
color: $cBlue;
background: #f4f8ff;
&:hover {
background: #e7f0ff;
}
}
.attachment-delete {
border: 1px solid #f1d3d1;
color: $cRed;
background: #fff6f6;
&:hover {
background: #ffeaea;
}
}
}
.attachments-empty {
color: #6b7280;
border-style: dashed;
justify-content: center;
font-size: 13px;
}
}
}
.description {
padding: 15px;
border-radius: 0.25rem;
border: 1px solid #cdcdcd;
margin-bottom: 15px;
max-height: 202px;
overflow-x: hidden;
position: relative;
}
}
.right {
.box {
margin-bottom: 15px;
}
.time {
a.time_worked_toggle {
@extend .default-btn;
color: #299cdb;
display: inline-flex;
border: 1px solid #299cdb;
&:hover {
background: #dff0fa;
text-decoration: none;
}
&:active,
&:focus {
text-decoration: none;
}
}
a:not(.time_worked_toggle) {
@extend .default-btn;
margin-top: 10px;
text-decoration: none;
gap: 10px;
&.task_start {
background: #0ab39c;
color: #FFF;
&:hover {
background: #099885;
}
}
&.task_end {
background: $cRed;
color: #FFF;
}
&.hidden {
display: none;
}
}
}
.dates {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.danger {
color: $cRed;
font-weight: 600;
}
.warning {
color: #ff8c00;
}
i {
color: #C9CED4;
margin-right: 5px;
}
}
}
.task_work_details {
display: none;
overflow-y: auto;
max-height: 508px;
width: 100%;
padding-right: 10px;
padding-top: 4px;
._line {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
._user {
width: 100%;
font-size: 13px;
}
input {
width: calc(50% - 25px);
text-align: center;
margin-left: 2px;
margin-right: 2px;
}
}
._work_delete {
display: inline-flex;
height: 35px;
width: 35px;
border-radius: 6px;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid $cRed;
margin-left: 2px;
transition: all 0.3s ease;
&:hover {
background: $cRed;
i {
color: #FFF;
}
}
i {
transition: all 0.3s ease;
color: $cRed;
}
}
}
}
}
}
.table {
width: 100%;
border: none;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
background: #fff;
th,
td {
padding: 10px 14px;
border: none;
border-bottom: 1px solid #eef0f3;
text-align: left;
vertical-align: middle;
}
thead th {
background: #f5f7fa;
color: #4e5e6a;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
border-bottom: 2px solid #e2e6ec;
}
tbody tr {
transition: background 0.15s ease;
&:last-child td {
border-bottom: none;
}
&:hover {
background: #f8fafd;
}
}
td.center,
th.center {
text-align: center;
}
td.left,
th.left {
text-align: left;
}
td.right,
th.right {
text-align: right;
}
// empty state
td[colspan] {
text-align: center;
color: #8896a4;
padding: 24px 14px;
font-style: italic;
}
}
.projects_container {
background: #FFF;
padding: 15px;
border-radius: 6px;
display: flex;
gap: 20px;
.left {
width: calc(100% - 250px);
._projects,
._users {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
}
.right {
width: 250px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 20px;
border-left: 1px solid #cdcdcd;
padding-left: 15px;
select {
width: 200px;
}
}
}
.default_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
.popup_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #FFF;
padding: 25px;
border-radius: 0;
max-width: 1140px;
width: 100%;
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
}
}
#fg-cron {
margin: 10px 0;
.countdown {
background: $cGreen;
color: #FFF;
padding: 10px;
}
#cron-container {
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
.msg {
font-size: 13px;
padding: 5px;
border-bottom: 1px solid #e8e8e8;
}
}
}
.card {
background: #FFF;
padding: 25px;
border-radius: 6px;
color: #000;
font-size: 15px;
max-width: 1280px;
&.mb25 {
margin-bottom: 25px;
}
.card-header {
font-weight: 600;
}
.card-body {
padding-top: 10px;
table {
border-collapse: collapse;
th,
td {
font-size: 14px;
&.bold {
font-weight: 600;
}
&.text-right {
text-align: right;
}
&.text-center {
text-align: center;
}
.close-task {
text-decoration: none;
color: $cBlue;
&:hover {
color: $cRed;
}
}
}
}
}
}
.finance-summary {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
.panel {
background: #FFF;
border-radius: 6px;
padding: 15px;
h1 {
font-size: 20px;
margin: 0;
}
span {
font-size: 0.85em;
}
}
}
.finance-manager {
display: grid;
gap: 10px;
grid-template-columns: 200px 1fr 500px;
padding-top: 25px;
.manage-menu {
display: inline-block;
margin-right: 10px;
a {
color: #333333;
text-decoration: none;
font-weight: 300;
display: block;
}
}
.actions {
width: 100px;
text-align: center;
a {
display: inline-flex;
margin: 0 2px;
height: 25px;
width: 25px;
align-items: center;
justify-content: center;
text-decoration: none;
color: #000;
border: 1px solid #e7e7e7;
font-size: 11px;
border-radius: 3px;
transition: all 0.3s ease;
&:hover {
border: 1px solid $cBlue;
}
}
}
}
.bootstrap-tagsinput {
.tag {
background: $cBlue;
font-size: 13px;
padding: 5px 10px;
border-radius: 12px;
[data-role="remove"] {
color: #FFF !important;
&:hover {
box-shadow: none !important;
color: #000 !important
}
}
}
}
.finance-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
a:not(.btn) {
display: flex;
width: 100%;
text-decoration: none;
color: $cBlack;
&.zoom-100 {
font-size: 1.2em;
}
&.zoom-90 {
font-size: 1.15em;
}
&.zoom-80 {
font-size: 1.1em;
}
&.zoom-70 {
font-size: 1.05em;
}
&.zoom-60 {
font-size: 1em;
}
&.zoom-50 {
font-size: 0.95em;
}
&.zoom-40 {
font-size: 0.9em;
}
&.zoom-30 {
font-size: 0.85em;
}
&.zoom-20 {
font-size: 0.8em;
}
&.zoom-10 {
font-size: 0.75em;
}
&.zoom-0 {
font-size: 0.7em;
}
}
}
.manage-menu {
position: relative;
.context-menu {
border-left: 4px dotted #000;
width: 1px;
height: 100%;
}
.context-menu-container {
position: absolute;
display: none;
background: #FFF;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
top: 2px;
left: 2px;
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
a {
display: block;
padding: 7px 15px;
white-space: nowrap;
&:hover {
background: #f8f8f8;
}
}
}
}
}
&:hover {
.context-menu-container {
display: block;
}
}
}
.wiki-categories {
display: grid;
gap: 10px;
margin-top: 25px;
grid-template-columns: 1fr 1fr 1fr 1fr;
.category {
background: #FFF;
padding: 10px;
.users {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 5px;
.user {
display: flex;
height: 25px;
width: 25px;
border-radius: 50%;
background: #ccc;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 12px;
}
}
.actions {
display: grid;
grid-template-columns: 1fr 1fr;
a {
display: block;
color: $cBlack;
font-size: 13px;
text-align: center;
}
}
.title {
margin-bottom: 5px;
a {
display: block;
color: $cBlack;
font-size: 13px;
font-weight: 600;
}
}
}
}
.bootstrap-datetimepicker-widget .picker-switch {
a {
display: block;
color: #000;
}
}
.gantt_users {
display: flex;
gap: 20px;
}
#g-results {
background: #FFF;
padding: 25px;
}
.g-menu-container {
margin-bottom: 15px;
.right-menu {
display: none;
}
}
.g-center {
text-align: center;
}
.alert {
background: $cGreen;
border: 0;
color: #FFF;
}
.tasks_main_view {
display: flex;
gap: 20px;
._left_column {
padding: 25px;
background: #fcfcfc;
border-right: 1px solid #e8e8e8;
width: 350px;
label {
font-weight: 400;
font-size: 14px;
}
select[name="filtr"] {
margin-bottom: 10px;
}
._buttons {
display: flex;
gap: 10px;
justify-content: space-between;
.btn {
flex: 1;
}
}
}
._right_column {
flex: 1;
max-width: calc(100% - 350px);
}
}
#billing-summary {
.card-header {
padding: 10px;
}
.billing-kpi {
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 10px 12px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.billing-kpi-label {
font-size: 12px;
color: #6c757d;
margin-bottom: 3px;
}
.billing-kpi-value {
font-size: 21px;
font-weight: 700;
line-height: 1.1;
}
.billing-details-row {
display: none;
}
.billing-client-name {
font-weight: 600;
}
.billing-table>thead>tr>th {
background: #f8f9fa;
}
.billing-details-wrap {
background: #f8fbff;
}
}
/* sidebar submenu */
/* vacations module */
.vacation-type-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
background: #e3f0ff;
color: #2563eb;
&.type-chorobowe {
background: #fff3e0;
color: #e65100;
}
&.type-inna_nieobecnosc {
background: #f3e5f5;
color: #7b1fa2;
}
}