OneBot: Leantime 改造版源码（BOM/Univer 表格/AI 接管/品牌替换等）
This commit is contained in:
wangruiguo
63
public/assets/css/components/accessibility.css
Normal file
63
public/assets/css/components/accessibility.css
Normal file
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Accessibility Enhancement Styles
|
||||
* Provides support for user preferences and assistive technologies
|
||||
*/
|
||||
|
||||
/* High contrast mode support for Windows High Contrast users */
|
||||
@media (prefers-contrast: high) {
|
||||
a {
|
||||
text-decoration: underline;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline-width: 3px;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.latest-todos a,
|
||||
.sortableTicketList a {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
button,
|
||||
.btn {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion for users with vestibular disorders */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors mode - respects user's color overrides (Windows High Contrast) */
|
||||
@media (forced-colors: active) {
|
||||
a:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Increased line height for dyslexic users using specific fonts */
|
||||
.font-atkinson,
|
||||
.font-shantell,
|
||||
[style*="font-family: 'Atkinson"],
|
||||
[style*="font-family: 'Shantell"] {
|
||||
line-height: var(--line-height-relaxed);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
457
public/assets/css/components/calendar.css
Normal file
457
public/assets/css/components/calendar.css
Normal file
@@ -0,0 +1,457 @@
|
||||
.day-selector {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.day-button {
|
||||
border:none;
|
||||
background:var(--secondary-background);
|
||||
box-shadow: var(--min-shadow);
|
||||
}
|
||||
|
||||
.day-button.today {
|
||||
background-color: var(--interactive-icon-color);
|
||||
}
|
||||
|
||||
.day-button:hover {
|
||||
background-color: var(--interactive-icon-color);
|
||||
}
|
||||
|
||||
.day-button.active {
|
||||
background-color: var(--main-action-bg);
|
||||
color: var(--main-action-hover-color);
|
||||
}
|
||||
|
||||
/*#calendar {*/
|
||||
/* padding-top: 10px;*/
|
||||
/* position: relative;*/
|
||||
/* z-index: 5;*/
|
||||
/* flex: 1;*/
|
||||
/* min-height: 0;*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/* height: calc(100% - 40px);*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc {*/
|
||||
/* height: calc(100% - 40px);*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-view > .fc-scrollgrid > tbody {*/
|
||||
/* height:100%;*/
|
||||
/* display:flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/* overflow-y: auto;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-view > .fc-scrollgrid > tbody .fc-scrollgrid-section-body:last-child {*/
|
||||
/* height:100%;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-view-harness {*/
|
||||
/* flex: 1 1 auto !important;*/
|
||||
/* min-height: 0 !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-scrollgrid {*/
|
||||
/* display: flex !important;*/
|
||||
/* flex-direction: column !important;*/
|
||||
/* height: 100% !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-toolbar-title {*/
|
||||
/* font-size: var(--font-size-xl);*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-multimonth {*/
|
||||
/* height:100%;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-multimonth,*/
|
||||
/*.fc-theme-standard td, .fc-theme-standard th{*/
|
||||
/* border:none;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-daygrid-day-top {*/
|
||||
/* flex-direction: column;*/
|
||||
/* text-align:center;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-daygrid-day-bottom {*/
|
||||
/* text-align:center;*/
|
||||
/* margin-top:-10px !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-daygrid-more-link {*/
|
||||
/* font-size:0px;*/
|
||||
/* float:none;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-daygrid-more-link:after {*/
|
||||
/* content: "•";*/
|
||||
/* font-size:30px;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-multimonth-title {*/
|
||||
/* padding:0px 0px 10px 0px;*/
|
||||
/* text-align:left;*/
|
||||
/* font-size: var(--font-size-xl);*/
|
||||
/* font-weight:normal;*/
|
||||
/* display:none;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-multimonth-singlecol .fc-multimonth-header {*/
|
||||
/* background:none;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-theme-standard th.fc-col-header-cell:first-child {*/
|
||||
/* border-radius:10px 0px 0px 0px;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-theme-standard th.fc-col-header-cell:last-child {*/
|
||||
/* border-radius:0px 10px 0px 0px;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-theme-standard .fc-popover {*/
|
||||
/* border-radius:var(--box-radius);*/
|
||||
/* max-width: 60%;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-popover-body .fc-h-event .fc-event-title-container {*/
|
||||
/* padding-left:5px;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-popover-body .fc-event {*/
|
||||
/* margin-bottom:2px;*/
|
||||
/* margin-left:0px !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-popover-body .fc-daygrid-event {*/
|
||||
/* border-radius:0px !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-daygrid-day.fc-day-today {*/
|
||||
/* border-radius:var(--element-radius);*/
|
||||
/*}*/
|
||||
|
||||
/*.fc .fc-multimonth-daygrid {*/
|
||||
/* background:var(--layered-background);*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-multimonth-daygrid-table .fc-daygrid-day-events .fc-daygrid-event-harness {*/
|
||||
|
||||
/*}*/
|
||||
|
||||
/*.fc-scrollgrid-section-body > td {*/
|
||||
/* height: 100% !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-scroller {*/
|
||||
/* height: auto !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-scrollgrid-section-header {*/
|
||||
/* position: sticky;*/
|
||||
/* top: 0;*/
|
||||
/* z-index: 2;*/
|
||||
/* box-shadow:0px 2px 2px var(--neutral);*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc .fc-timegrid-col.fc-day-today,*/
|
||||
/*.maincontent .fc .fc-daygrid-day.fc-day-today,*/
|
||||
/*.maincontent .fc .fc-button-primary {*/
|
||||
/* background-color: var(--col-title-bg);*/
|
||||
/* color:var(--primary-font-color);*/
|
||||
/* border-radius: var(--element-radius) !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc .fc-day-today .fc-daygrid-day-number {*/
|
||||
/* color:var(--main-action-color);*/
|
||||
/* background:var(--accent1);*/
|
||||
/* border-radius: var(--element-radius) !important;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.maincontent .fc .fc-button-primary:focus,*/
|
||||
/*.maincontent .fc .fc-button-primary:active {*/
|
||||
/* box-shadow: none;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc .fc-button-primary:not(:disabled).fc-button-active,*/
|
||||
/*.maincontent .fc .fc-button-primary:not(:disabled):active,*/
|
||||
/*.maincontent .fc .fc-button-primary:not(:disabled):hover {*/
|
||||
/* background:var(--secondary-action-hover-bg);*/
|
||||
/* color:var(--secondary-action-hover-color);*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-multimonth-header-table .fc-col-header-cell {*/
|
||||
/* padding:5px;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-list-event {*/
|
||||
/* background:var(--secondary-background);*/
|
||||
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-list-event td {*/
|
||||
/* padding:5px;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-list-event td.fc-list-event-time {*/
|
||||
/* padding-left:15px;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-v-event {*/
|
||||
/* border:none;*/
|
||||
/* border-left:5px solid var(--fc-event-border-color);*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-v-event .fc-event-main-frame {*/
|
||||
/* padding-left:5px;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-v-event .fc-event-main-frame {*/
|
||||
|
||||
/*}*/
|
||||
|
||||
|
||||
|
||||
/*.maincontent .fc-timegrid-event {*/
|
||||
/* border-radius: 8px;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-timegrid-event-harness-inset .fc-timegrid-event,*/
|
||||
/*.maincontent .fc-timegrid-event.fc-event-mirror,*/
|
||||
/*.fc-h-event .fc-event-main {*/
|
||||
/* font-weight:normal;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-timegrid-event .fc-event-main {*/
|
||||
/* padding: 3px 1px 0px;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent .fc-event.locked:after {*/
|
||||
/* content: "🔒";*/
|
||||
/* background:var(--layered-background);*/
|
||||
/* padding: 1px 4px;*/
|
||||
/* top: 2px;*/
|
||||
/* border-radius: 50%;*/
|
||||
/* position: absolute;*/
|
||||
/* right: 2px;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontent tr.fc-event {*/
|
||||
/* position:relative;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.fc-list-event,*/
|
||||
/*.fc .fc-multimonth-daygrid,*/
|
||||
/*.fc-view,*/
|
||||
/*.fc .fc-scrollgrid-section-sticky > *,*/
|
||||
/*.fc-timegrid-slot-label,*/
|
||||
/*.fc .fc-timegrid-col.fc-day-today,*/
|
||||
/*.fc .fc-daygrid-day.fc-day-today,*/
|
||||
/*.fc .fc-button-primary,*/
|
||||
/*table.fc-col-header th {*/
|
||||
/* background:transparent !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-view,*/
|
||||
/*.fc .fc-scrollgrid {*/
|
||||
/* border:none;*/
|
||||
/* height:100%*/
|
||||
/*}*/
|
||||
|
||||
/*.fc-col-header {*/
|
||||
/* border-top-right-radius: var(--element-radius);*/
|
||||
/* border-top-left-radius: var(--element-radius);*/
|
||||
/* background:var(--secondary-background);*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontentinner .fc .fc-scrollgrid {*/
|
||||
/* border:none;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontentinner table.fc-scrollgrid td,*/
|
||||
/*.maincontentinner table.fc-scrollgrid th{*/
|
||||
/* padding:0px;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontentinner table.fc-scrollgrid th.fc-col-header-cell {*/
|
||||
/* background: var(--col-title-bg);*/
|
||||
/* overflow:hidden;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontentinner table.fc-scrollgrid th.fc-col-header-cell:first-child {*/
|
||||
/* border-top-left-radius:var(--box-radius);*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontentinner table.fc-scrollgrid th.fc-col-header-cell:last-child {*/
|
||||
/* border-top-right-radius:var(--box-radius);*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.maincontentinner table.fc-scrollgrid th {*/
|
||||
/* padding:0px;*/
|
||||
/* border-radius: 5px 5px 0px 0px;*/
|
||||
/*}*/
|
||||
|
||||
/*.maincontentinner table.fc-scrollgrid th .fc-scrollgrid-sync-inner {*/
|
||||
/* padding:5px 0px;*/
|
||||
/*}*/
|
||||
|
||||
:root {
|
||||
--fc-small-font-size: .85em;
|
||||
--fc-page-bg-color: var(--secondary-background);
|
||||
--fc-neutral-bg-color: var(--layered-background);
|
||||
--fc-neutral-text-color: var(--neutral);
|
||||
--fc-border-color: var(--main-border-color);
|
||||
--fc-button-text-color: var(--secondary-background);
|
||||
--fc-button-bg-color: #2c3e50;
|
||||
--fc-button-border-color: #2c3e50;
|
||||
--fc-button-hover-bg-color: #1e2b37;
|
||||
--fc-button-hover-border-color: #1a252f;
|
||||
--fc-button-active-bg-color: #1a252f;
|
||||
--fc-button-active-border-color: #151e27;
|
||||
--fc-event-bg-color: var(--accent1);
|
||||
--fc-event-border-color: var(--accent1);
|
||||
--fc-event-text-color:var(--main-action-color);
|
||||
--fc-event-selected-overlay-color: rgba(0, 0, 0, .25);
|
||||
--fc-more-link-bg-color: #d0d0d0;
|
||||
--fc-more-link-text-color: inherit;
|
||||
--fc-event-resizer-thickness: 8px;
|
||||
--fc-event-resizer-dot-total-width: 8px;
|
||||
--fc-event-resizer-dot-border-width: 1px;
|
||||
--fc-non-business-color: hsla(0, 0%, 84%, .3);
|
||||
--fc-bg-event-color: var(--accent2);
|
||||
--fc-bg-event-opacity: 0.3;
|
||||
--fc-highlight-color: rgba(188, 232, 241, .3);
|
||||
--fc-today-bg-color: var(--dropdown-link-hover-bg);
|
||||
--fc-now-indicator-color: var(--dark-red);
|
||||
}
|
||||
|
||||
/* Resetting styles from tables */
|
||||
.maincontentinner .fc td,
|
||||
.maincontentinner .fc th {
|
||||
padding: 0px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.maincontentinner .fc-theme-standard td {
|
||||
border-color:var(--fc-border-color);
|
||||
|
||||
}
|
||||
|
||||
.maincontentinner .fc-theme-standard td,
|
||||
.maincontentinner .fc-theme-standard th {
|
||||
|
||||
}
|
||||
|
||||
.maincontentinner .fc th .fc-scroller {
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
.fc .fc-col-header-cell-cushion {
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
.maincontentinner .fc-theme-standard .fc-scrollgrid {
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.fc .fc-view-harness {
|
||||
overflow:hidden;
|
||||
border-radius:var(--box-radius);
|
||||
}
|
||||
|
||||
.fc-timegrid-event,
|
||||
.fc-timegrid-more-link {
|
||||
border-radius: 5px;
|
||||
font-size: var(--fc-small-font-size);
|
||||
}
|
||||
|
||||
.fc-timegrid-event .fc-event-main {
|
||||
padding:2px 4px 0px;
|
||||
}
|
||||
|
||||
.fc-v-event {
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
|
||||
box-shadow:var(--regular-shadow);
|
||||
}
|
||||
|
||||
.fc .fc-timegrid-now-indicator-line {
|
||||
border:2px 0px 0px;
|
||||
}
|
||||
|
||||
.fc .fc-timegrid-now-indicator-line::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
/* bottom: -2px; */
|
||||
left: -5px;
|
||||
right: 0;
|
||||
background: var(--fc-now-indicator-color);
|
||||
width: 10px;
|
||||
border-radius: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.fc .fc-timegrid-slot-minor {
|
||||
border:none;
|
||||
}
|
||||
|
||||
.maincontentinner .fc-list-event td {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.maincontentinner .fc-theme-standard .fc-list {
|
||||
border:none;
|
||||
}
|
||||
|
||||
.maincontentinner .fc-theme-standard .fc-list-day-cushion {
|
||||
background-color: var(--fc-neutral-bg-color);
|
||||
box-shadow: var(--regular-shadow);
|
||||
}
|
||||
|
||||
.maincontentinner .fc-theme-standard .fc-list-day-cushion a {
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
|
||||
.maincontentinner .widgetContent .fc .fc-timegrid-col.fc-day-today,
|
||||
.maincontentinner .widgetContent .fc .fc-scrollgrid-section-sticky > *,
|
||||
.maincontentinner .widgetContent .fc td, .maincontentinner .widgetContent .fc th{
|
||||
background:none;
|
||||
}
|
||||
|
||||
.maincontentinner .widgetContent .fc-scroller table {
|
||||
}
|
||||
|
||||
.maincontentinner .fc-theme-standard td,
|
||||
.maincontentinner .fc-theme-standard th {
|
||||
border-left: 0px;
|
||||
}
|
||||
|
||||
.maincontentinner .fc-theme-standard th {
|
||||
border-top:0px;
|
||||
}
|
||||
|
||||
.maincontentinner .fc-daygrid-body table td {
|
||||
border-bottom:0px;
|
||||
}
|
||||
|
||||
.maincontentinner .fc-timegrid-divider {
|
||||
border-bottom:0px;
|
||||
}
|
||||
|
||||
.fc-scrollgrid .fc-scrollgrid-section:first-child .fc-scroller-harness {
|
||||
box-shadow: var(--regular-shadow);
|
||||
}
|
||||
706
public/assets/css/components/dropdowns.css
Normal file
706
public/assets/css/components/dropdowns.css
Normal file
@@ -0,0 +1,706 @@
|
||||
/* Ticket Labelled dropdowns */
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
border-radius: var(--box-radius);
|
||||
border:0px;
|
||||
padding: 8px 0;
|
||||
box-shadow: var(--regular-shadow);
|
||||
background:var(--secondary-background);
|
||||
}
|
||||
|
||||
.bigMenu ul li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a,
|
||||
.bigMenu ul li a,
|
||||
.dropdown-menu > li > .dropdown-item-wrapper {
|
||||
font-size: var(--base-font-size);
|
||||
color:var(--primary-font-color);
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
.pagetitle .dropdown-menu > li > a {
|
||||
color:var(--primary-font-color);
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu>.active>a,
|
||||
.dropdown-menu>.active>a:hover,
|
||||
.dropdown-menu>.active>a:focus {
|
||||
color: var(--dropdown-link-hover-color);
|
||||
background:var(--dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
.dropdownTabs {
|
||||
padding:5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-content: space-between;
|
||||
border-bottom:1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
.dropdownTabs a {
|
||||
|
||||
}
|
||||
|
||||
.dropdownTabs a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.maincontentinner .viewDropDown .dropdown-menu > li > a:hover .muted,
|
||||
body .maincontentinner .viewDropDown .dropdown-menu li a.active,
|
||||
.dropdown-menu > li > a.active,
|
||||
.dropdown ul li.active a{
|
||||
color: var(--dropdown-link-hover-color);
|
||||
background:var(--dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus,
|
||||
.dropdown-submenu:hover > a,
|
||||
.dropdown-submenu:focus > a,
|
||||
.bigMenu ul li a,
|
||||
.bigMenu ul li a:hover,
|
||||
.bigMenu ul li a:focus {
|
||||
color: var(--dropdown-link-hover-color) !important;
|
||||
background:var(--dropdown-link-hover-bg) !important;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a:hover small,
|
||||
.dropdown-menu > li > a:focus small,
|
||||
.dropdown-submenu:hover > a small,
|
||||
.dropdown-submenu:focus > a small,
|
||||
.bigMenu ul li a small,
|
||||
.bigMenu ul li a:hover small,
|
||||
.bigMenu ul li a:focus small {
|
||||
color: var(--dropdown-link-hover-color) !important;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu .nav-header {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top:10px;
|
||||
padding-bottom:5px;
|
||||
font-size:var(--font-size-m);
|
||||
color:var(--interactive-icon-color);
|
||||
text-transform:none;
|
||||
}
|
||||
|
||||
.ticketDropdown.show {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.ticketDropdown {
|
||||
font-size:var(--font-size-m);
|
||||
|
||||
}
|
||||
|
||||
.ticketDropdown ul,
|
||||
.ticketDropdown ul li a{
|
||||
top: 22px;
|
||||
font-size:var(--font-size-m);
|
||||
}
|
||||
|
||||
.ticketDropdown.userDropdown {
|
||||
margin-top:-2px;
|
||||
}
|
||||
|
||||
.ticketDropdown.userDropdown ul {
|
||||
top: 33px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.dropRight ul,
|
||||
.ticketDropdown.userDropdown.dropRight ul{
|
||||
right:0px;
|
||||
left:auto;
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown > a,
|
||||
.maincontent .ticketDropdown > a:link,
|
||||
.nyroModalCont .ticketDropdown > a,
|
||||
.nyroModalCont .ticketDropdown > a:link{
|
||||
color:#fff;
|
||||
padding:0px 10px;
|
||||
white-space: nowrap;
|
||||
border-radius:var(--box-radius-large);
|
||||
margin-left:0px;
|
||||
box-shadow:var(--min-shadow);
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown.userDropdown > a,
|
||||
.maincontent .ticketDropdown.userDropdown > a:link,
|
||||
.nyroModalCont .ticketDropdown.userDropdown > a,
|
||||
.nyroModalCont .ticketDropdown.userDropdown > a:link {
|
||||
padding-left:0px;
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown.firstDropdown > a {
|
||||
margin-left:0px;
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown.lastDropdown > a {
|
||||
padding-right:0px;
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown > a:hover,
|
||||
.maincontent .ticketDropdown > a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.maincontent .ticketDropdown.colorized li a,
|
||||
.nyroModalCont .ticketDropdown.colorized li a{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown.noBg {
|
||||
background:transparent;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown.noBg a {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown.noBg >a img {
|
||||
margin-top:-1px;
|
||||
}
|
||||
|
||||
.maincontent .dropdown img {
|
||||
width:23px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--neutral);
|
||||
margin-top:1px;
|
||||
padding:1px;
|
||||
}
|
||||
|
||||
|
||||
.maincontent .ticketDropdown.noBg >a:hover {
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown.noBg >a:hover img {
|
||||
border-color:var(--dropdown-link-hover-bg) !important
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown ul li a[class*="label-"],
|
||||
.nyroModalCont .ticketDropdown ul li a[class*="label-"] {
|
||||
padding: 5px 10px;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.chosen-results li[class*=" label-"] {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.chosen-results li[class*=" label-"]:hover {
|
||||
color:#555;
|
||||
}
|
||||
|
||||
.chosen-results li.label-warning,
|
||||
.maincontent .ticketDropdown a.label-warning,
|
||||
.nyroModalCont .ticketDropdown a.label-warning,
|
||||
.label-warning,
|
||||
.label-yellow{
|
||||
background:var(--yellow);
|
||||
color:var(--yellow-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-info,
|
||||
.maincontent .ticketDropdown a.label-info,
|
||||
.nyroModalCont .ticketDropdown a.label-info{
|
||||
background:var(--dark-blue);
|
||||
color:var(--dark-blue-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-important,
|
||||
.maincontent .ticketDropdown a.label-important,
|
||||
.nyroModalCont .ticketDropdown a.label-important,
|
||||
.label-important{
|
||||
background:var(--red);
|
||||
color:var(--red-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-danger,
|
||||
.maincontent .ticketDropdown a.label-danger,
|
||||
.nyroModalCont .ticketDropdown a.label-danger,
|
||||
.label-danger,
|
||||
.label-red{
|
||||
background:var(--dark-red);
|
||||
color:var(--dark-red-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-success,
|
||||
.maincontent .ticketDropdown a.label-success,
|
||||
.nyroModalCont .ticketDropdown a.label-success,
|
||||
.label-success,
|
||||
.label-green {
|
||||
background:var(--green);
|
||||
color:var(--green-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-default,
|
||||
.maincontent .ticketDropdown a.label-default,
|
||||
.nyroModalCont .ticketDropdown a.label-default,
|
||||
.label-default{
|
||||
background: var(--grey);
|
||||
color:var(--grey-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-default.milestone,
|
||||
.maincontent .ticketDropdown a.label-default.milestone,
|
||||
.nyroModalCont .ticketDropdown a.label-default.milestone {
|
||||
color:var(--blue-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-purple,
|
||||
.maincontent .ticketDropdown a.label-purple,
|
||||
.nyroModalCont .ticketDropdown a.label-purple{
|
||||
background:var(--purple);
|
||||
color:var(--purple-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-pink,
|
||||
.maincontent .ticketDropdown a.label-pink,
|
||||
.nyroModalCont .ticketDropdown a.label-pink{
|
||||
background:var(--pink);
|
||||
color:var(--pink-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-brown,
|
||||
.maincontent .ticketDropdown a.label-brown,
|
||||
.nyroModalCont .ticketDropdown a.label-brown{
|
||||
background:var(--brown);
|
||||
color:var(--brown-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-blue,
|
||||
.maincontent .ticketDropdown a.label-blue,
|
||||
.nyroModalCont .ticketDropdown a.label-blue{
|
||||
background:var(--blue);
|
||||
color:var(--blue-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-dark-blue,
|
||||
.maincontent .ticketDropdown a.label-dark-blue,
|
||||
.nyroModalCont .ticketDropdown a.label-dark-blue{
|
||||
background:var(--dark-blue);
|
||||
color:var(--dark-blue-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-darker-blue,
|
||||
.maincontent .ticketDropdown a.label-darker-blue,
|
||||
.nyroModalCont .ticketDropdown a.label-darker-blue{
|
||||
background:var(--darker-blue);
|
||||
color:var(--darker-blue-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-green,
|
||||
.maincontent .ticketDropdown a.label-green,
|
||||
.nyroModalCont .ticketDropdown a.label-green{
|
||||
background:var(--green);
|
||||
color:var(--green-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-dark-green,
|
||||
.maincontent .ticketDropdown a.label-dark-green,
|
||||
.nyroModalCont .ticketDropdown a.label-dark-green{
|
||||
background:var(--dark-green);
|
||||
color:var(--dark-green-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-red,
|
||||
.maincontent .ticketDropdown a.label-red,
|
||||
.nyroModalCont .ticketDropdown a.label-red{
|
||||
background:var(--red);
|
||||
color:var(--red-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-dark-red,
|
||||
.maincontent .ticketDropdown a.label-dark-red,
|
||||
.nyroModalCont .ticketDropdown a.label-dark-red{
|
||||
background:var(--dark-red);
|
||||
color:var(--dark-red-text-color);
|
||||
}
|
||||
|
||||
.chosen-results li.label-grey,
|
||||
.maincontent .ticketDropdown a.label-grey,
|
||||
.nyroModalCont .ticketDropdown a.label-grey{
|
||||
background:var(--grey);
|
||||
color:var(--grey-text-color);
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown a.label-default.effort,
|
||||
.nyroModalCont .ticketDropdown a.label-default.effort{
|
||||
background:var(--secondary-background);
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown ul li,
|
||||
.nyroModalCont .ticketDropdown ul li {
|
||||
margin-bottom:1px;
|
||||
padding:0px 10px;
|
||||
}
|
||||
|
||||
.maincontent .ticketDropdown.milestoneDropdown li a:hover{
|
||||
background: var(--dropdown-link-hover-bg) !important;
|
||||
color: var(--dropdown-link-hover-color) !important;
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle {
|
||||
font-size: var(--font-size-l);
|
||||
color: var(--primary-font-color);
|
||||
margin-bottom: 10px;
|
||||
font-weight:bold;
|
||||
margin-left:0px;
|
||||
border-radius: var(--accordion-header-radius);
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
.maincontent .noBackground .accordionTitle {
|
||||
color: var(--main-titles-color);
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle i {
|
||||
display:inline-block;
|
||||
width:15px;
|
||||
text-align:center;
|
||||
margin-right:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle:hover i,
|
||||
.maincontent .accordionTitle i:hover {
|
||||
background:var(--col-hover-bg);
|
||||
color:var(--interactive-icon-color);
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle[class*="label-"] {
|
||||
margin-left:0px;
|
||||
border-radius: var(--accordion-header-radius);
|
||||
padding: 5px 0px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle.label-warning a{
|
||||
background:none;
|
||||
color:var(--yellow);
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle.label-important a {
|
||||
background:none;
|
||||
color:var(--red);
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle.label-info a {
|
||||
background:none;
|
||||
color:var(--dark-blue);
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle.label-danger a {
|
||||
background:none;
|
||||
color:var(--dark-red);
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle.label-success a {
|
||||
background:none;
|
||||
color:var(--green);
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle.label-default a {
|
||||
background:none;
|
||||
color:var(--grey);
|
||||
}
|
||||
|
||||
.simpleAccordionContainer {
|
||||
margin-bottom:15px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.simpleAccordionContainer.kanban {
|
||||
padding-left:0px;
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle .accordion-toggle i.fa:first-child {
|
||||
width: 15px;
|
||||
margin-top: 0px;
|
||||
margin-right: 5px;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
border-radius: var(--element-radius);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
.maincontent .accordionTitle .accordion-toggle i.fa:first-child:hover {
|
||||
background: var(--main-menu-link-active-bg);
|
||||
}
|
||||
|
||||
|
||||
.ticketDropdown ul::after {
|
||||
position: absolute;
|
||||
top:-6px;
|
||||
left: 10px;
|
||||
transform: rotate(0deg);
|
||||
display: inline-block;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid white;
|
||||
border-left: 7px solid transparent;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.dropdown-menu.pull-right::after {
|
||||
right: 10px;
|
||||
left:auto;
|
||||
}
|
||||
|
||||
.tabbedwidget .dropdown-menu.pull-left,
|
||||
.mainwrapper .dropdown-menu.pull-left {
|
||||
left: 10px;
|
||||
right:auto;
|
||||
}
|
||||
|
||||
.viewDropDown .dropdown-menu {
|
||||
right:0px;
|
||||
left:auto;
|
||||
}
|
||||
|
||||
.viewDropDown .dropdown-menu li a.active{
|
||||
|
||||
}
|
||||
|
||||
.viewDropDown .dropdown-menu li a.active:hover {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.dropdown-menu span.radio input[type="radio"] {
|
||||
float:left;
|
||||
vertical-align: middle;
|
||||
margin-top: 9px;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.dropdown-menu span.radio {
|
||||
display:block;
|
||||
font-size: 12px;
|
||||
color: var(--main-menu-link-color);
|
||||
margin: 0px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu span.radio:hover {
|
||||
color: var(--dropdown-link-hover-color);
|
||||
background:var(--dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
.dropdown-menu span.radio label {
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.wikiSelect {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
.dropdown-menu.iconpicker-container,
|
||||
.iconpicker-popover.popover {
|
||||
width:215px;
|
||||
min-width:215px;
|
||||
}
|
||||
|
||||
.iconpicker-popover .popover-title {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.btn-group .btn.titleIconPicker {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: 21px;
|
||||
padding: 5px 6px;
|
||||
color: var(--primary-font-color);
|
||||
background-color: var(--secondary-background);
|
||||
border: 1px solid var(--secondary-background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-group .btn.titleIconPicker:hover {
|
||||
border: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
.btn-group .btn.titleIconPicker .caret,
|
||||
.btn-group .btn.titleIconPicker .caret,
|
||||
.btn-group .btn.titleIconPicker:last-child .caret,
|
||||
.btn-group >.btn.titleIconPicker.dropdown-toggle .caret {
|
||||
border-top-color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
.btn-group .btn.titleIconPicker:hover .caret,
|
||||
.btn-group .btn.titleIconPicker:hover .caret,
|
||||
.btn-group .btn.titleIconPicker:last-child:hover .caret,
|
||||
.btn-group >.btn.titleIconPicker.dropdown-toggle:hover .caret {
|
||||
border-top-color: var(--secondary-action-hover-color);
|
||||
}
|
||||
|
||||
.inlineDropDownContainerLeft {
|
||||
float:left;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
/* Subject switcher toggle — a subtle pill on the white header card (was
|
||||
underlined white text, which is near-invisible since the header became a
|
||||
light card). Dark text, soft pill background, caret. */
|
||||
.pagetitle .header-title-dropdown {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:6px;
|
||||
width:auto;
|
||||
color: var(--primary-font-color);
|
||||
text-decoration:none;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid transparent;
|
||||
padding: 3px 12px;
|
||||
border-radius: 100px;
|
||||
transition: background .12s, border-color .12s;
|
||||
}
|
||||
|
||||
.pagetitle .header-title-dropdown .fa {
|
||||
padding-left:4px;
|
||||
font-size:.8em;
|
||||
opacity:.55;
|
||||
}
|
||||
|
||||
.pagetitle .header-title-dropdown:hover {
|
||||
background: rgba(0, 0, 0, 0.09);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Meta/metrics line under the title (subjectSwitcher subline slot). */
|
||||
.pagetitle .subjectSwitcher-subline {
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--main-titles-color-subtle, var(--primary-font-color));
|
||||
opacity: .6;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dropdownWrapper {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.dropdownWrapper .border {
|
||||
border-top:1px solid var(--neutral);
|
||||
}
|
||||
|
||||
.headerEditDropdown {
|
||||
float:right;
|
||||
padding-top:20px;
|
||||
}
|
||||
|
||||
/* Header action ⋮ — plain dark icon on the white header card (no circle,
|
||||
was a bordered white button that read as an empty circle on the light box). */
|
||||
.pagetitle .btn-transparent {
|
||||
background:transparent;
|
||||
color:var(--primary-font-color);
|
||||
border:none;
|
||||
font-size:var(--font-size-l);
|
||||
}
|
||||
.pagetitle .btn-transparent:hover {
|
||||
color:var(--accent1);
|
||||
background:rgba(0, 0, 0, 0.05);
|
||||
border-radius:6px;
|
||||
}
|
||||
|
||||
.headerEditDropdown .dropdown-toggle {
|
||||
padding:4px 13px;
|
||||
}
|
||||
|
||||
.editCanvasDropdown {
|
||||
right:0px;
|
||||
left:auto;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu>.active>a,
|
||||
.dropdown-menu>.active>a:hover,
|
||||
.dropdown-menu>.active>a:focus {
|
||||
background:var(--main-menu-link-active-bg);
|
||||
color:var(--main-menu-link-active-color);
|
||||
}
|
||||
|
||||
.dropdown-menu .scroll-wrapper {
|
||||
height:700px;
|
||||
overflow:scroll;
|
||||
}
|
||||
|
||||
.inlineDropDownContainer {
|
||||
float:right;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.inlineDropDownContainer > a {
|
||||
color: #aaa;
|
||||
width: 24px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.inlineDropDownContainer > a.btn {
|
||||
width:auto;
|
||||
}
|
||||
|
||||
.inlineDropDownContainer > a:last-child {
|
||||
margin-right:-5px;
|
||||
}
|
||||
|
||||
.inlineDropDownContainer > a:hover {
|
||||
color: var(--accent1);
|
||||
background: var(--col-hover-bg);
|
||||
}
|
||||
|
||||
.inlineDropDownContainer .ticketDropDown {
|
||||
float:right;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--interactive-icon-color);
|
||||
margin-right:-5px;
|
||||
}
|
||||
|
||||
.inlineDropDownContainer .dropdown-menu {
|
||||
right:0px;
|
||||
left:auto;
|
||||
}
|
||||
|
||||
.inlineDropDownContainer.dropright .dropdown-menu {
|
||||
|
||||
left:-5px;
|
||||
}
|
||||
|
||||
.inlineDropDownContainer .dropdown-menu .border {
|
||||
border-top:1px solid var(--neutral);
|
||||
}
|
||||
|
||||
.inlineDropDownContainer .dropdown-menu li>span {
|
||||
padding-left:15px;
|
||||
}
|
||||
|
||||
.grid-stack-item-content .inlineDropDownContainer .ticketDropDown,
|
||||
.grid-stack-item-content .grid-handler-top{
|
||||
color:var(--main-action-color);
|
||||
}
|
||||
|
||||
.grid-stack-item-content.maincontentinner .inlineDropDownContainer .ticketDropDown,
|
||||
.grid-stack-item-content.maincontentinner .grid-handler-top {
|
||||
color: var(--interactive-icon-color);
|
||||
}
|
||||
2129
public/assets/css/components/forms.css
Normal file
2129
public/assets/css/components/forms.css
Normal file
File diff suppressed because it is too large
Load Diff
116
public/assets/css/components/gantt-overwrites.css
Normal file
116
public/assets/css/components/gantt-overwrites.css
Normal file
@@ -0,0 +1,116 @@
|
||||
body .gantt-container {
|
||||
font-size: var(--base-font-size);
|
||||
overflow-x:visible;
|
||||
height:calc(100vh - 375px);
|
||||
height:calc(100dvh - 375px);
|
||||
}
|
||||
|
||||
.gantt-wrapper {
|
||||
margin-top:10px;
|
||||
border-radius: var(--box-radius);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.gantt .bar-label {
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
body .gantt .bar-label,
|
||||
body .gantt .lower-text,
|
||||
body .gantt .upper-text {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
body .gantt .upper-text {
|
||||
fill:var(--kanban-col-title-color);
|
||||
opacity:var(--opacity-subdued);
|
||||
}
|
||||
|
||||
body .gantt .lower-text,
|
||||
body .gantt .upper-text {
|
||||
font-weight:var(--font-weight-bold);
|
||||
}
|
||||
|
||||
body .gantt #details .details-container p {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
|
||||
body .gantt #details .details-container {
|
||||
border-radius:var(--box-radius);
|
||||
}
|
||||
|
||||
.gantt-container .popup-wrapper {
|
||||
background-color:var(--secondary-background);
|
||||
padding:16px;
|
||||
box-shadow:var(--regular-shadow);
|
||||
margin-left: -10px;
|
||||
opacity:0;
|
||||
min-width:100px;
|
||||
max-width:300px;
|
||||
border-radius:var(--box-radius);
|
||||
}
|
||||
|
||||
.gantt-container .bar-wrapper {
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.gantt .bar-wrapper.active .bar {
|
||||
fill:var(--main-action-hover-bg);
|
||||
}
|
||||
|
||||
.gantt .bar-wrapper.active .bar-label {
|
||||
fill:var(--main-action-hover-color);
|
||||
}
|
||||
|
||||
.gantt-container .popup-wrapper .pointer {
|
||||
margin:10px 0 0 -12px;
|
||||
height:10px;
|
||||
border: 10px solid transparent;
|
||||
border-top-color:var(--secondary-background);
|
||||
}
|
||||
|
||||
.gantt .grid-header {
|
||||
fill:var(--col-title-bg) !important;
|
||||
stroke:none;
|
||||
filter: drop-shadow(var(--regular-shadow));
|
||||
}
|
||||
|
||||
.gantt .grid-header-line {
|
||||
fill:var(--neutral) !important;
|
||||
filter: drop-shadow(var(--regular-shadow));
|
||||
}
|
||||
|
||||
.gantt .grid-row:nth-child(even) {
|
||||
fill:var(--col-row-striped);
|
||||
}
|
||||
|
||||
.gantt .handle {
|
||||
fill:var(--col-title-bg);
|
||||
width:10px;
|
||||
}
|
||||
|
||||
.gantt .handle.progress {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.gantt .today-highlight {
|
||||
fill:var(--accent1);
|
||||
}
|
||||
|
||||
.today-highlight-label-bg {
|
||||
fill:var(--main-action-bg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.today-highlight-label {
|
||||
fill:var(--main-action-color);
|
||||
font-size:var(--font-size-s);
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.gantt .grid-row {
|
||||
fill: transparent;
|
||||
}
|
||||
32
public/assets/css/components/glass.css
Normal file
32
public/assets/css/components/glass.css
Normal file
@@ -0,0 +1,32 @@
|
||||
/* ── Glass Utility Classes ────────────────────────────────────────────
|
||||
Frosted-glass surfaces for the Leantime design system. All values
|
||||
come from CSS custom properties defined in the theme files
|
||||
(default/minimal × light/dark).
|
||||
──────────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Full glass surface */
|
||||
.lt-glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-inset), var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Subtle glass surface (less blur, more opaque) */
|
||||
.lt-glass-subtle {
|
||||
background: var(--glass-bg-subtle);
|
||||
backdrop-filter: var(--glass-blur-subtle);
|
||||
-webkit-backdrop-filter: var(--glass-blur-subtle);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
/* Fallback for browsers without backdrop-filter (prefixed or unprefixed) */
|
||||
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||
.lt-glass,
|
||||
.lt-glass-subtle {
|
||||
background: var(--color-bg-card);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
1
public/assets/css/components/index.html
Normal file
1
public/assets/css/components/index.html
Normal file
@@ -0,0 +1 @@
|
||||
<html><body></body></html>
|
||||
1460
public/assets/css/components/kanban.css
Normal file
1460
public/assets/css/components/kanban.css
Normal file
File diff suppressed because it is too large
Load Diff
33
public/assets/css/components/masonwall.css
Normal file
33
public/assets/css/components/masonwall.css
Normal file
@@ -0,0 +1,33 @@
|
||||
#ideaMason .ticketBox {
|
||||
width: 250px;
|
||||
cursor:move;
|
||||
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
#ideaMason .ticketBox .ticketBox {
|
||||
position:relative;
|
||||
width:auto;
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
#ideaMason .ticketBox:hover {
|
||||
background:var(--kanban-card-hover);
|
||||
}
|
||||
|
||||
.packery-drop-placeholder {
|
||||
background: var(--main-border-color);
|
||||
opacity:var(--opacity-faint);
|
||||
border: 2px dotted var(--main-border-color);
|
||||
visibility:visible;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#ideaMason .sortableTicketList .ticketBox {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mainIdeaContent {
|
||||
padding-top:10px;
|
||||
}
|
||||
150
public/assets/css/components/mediamanager.css
Normal file
150
public/assets/css/components/mediamanager.css
Normal file
@@ -0,0 +1,150 @@
|
||||
|
||||
.mediamgr {
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.mediamgr .mediamgr_right {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
top: 62px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mediamgr .mediamgr_rightinner {
|
||||
margin: 20px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.mediamgr .mediamgr_rightinner h4 {
|
||||
font-size: var(--base-font-size);
|
||||
text-transform: uppercase;
|
||||
padding: 10px;
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-background);
|
||||
}
|
||||
|
||||
.mediamgr_head {
|
||||
padding: 10px;
|
||||
background: var(--secondary-background);
|
||||
border: 1px solid var(--main-border-color);
|
||||
overflow: visible;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mediamgr_menu {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mediamgr_menu li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mediamgr_menu li.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mediamgr_menu li a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mediamgr_menu li a:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mediamgr_menu li a.prev {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.mediamgr_menu li a.prev_disabled {
|
||||
opacity: var(--opacity-muted);
|
||||
}
|
||||
|
||||
.mediamgr_menu li a.preview_disabled {
|
||||
opacity: var(--opacity-muted);
|
||||
}
|
||||
|
||||
.mediamgr_menu form input.filekeyword {
|
||||
padding: 4px 8px;
|
||||
width: 200px;
|
||||
background: var(--primary-background);
|
||||
color: var(--secondary-font-color);
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.mediamgr_content {
|
||||
padding: 20px 0;
|
||||
margin-right: 250px;
|
||||
}
|
||||
|
||||
.mediamgr_category {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed var(--main-border-color);
|
||||
}
|
||||
|
||||
.mediamgr_category ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mediamgr_category ul li {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.mediamgr_category ul li.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mediamgr_category ul li a {
|
||||
display: block;
|
||||
padding: 4px 10px;
|
||||
color: var(--secondary-font-color);
|
||||
}
|
||||
|
||||
.mediamgr_category ul li a:hover, .mediamgr_category ul li.current a {
|
||||
background: var(--primary-font-color);
|
||||
color: var(--primary-background);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mediamgr_category ul li .pagenuminfo {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mediamgr_menu li a.newfilebutton {
|
||||
display: block;
|
||||
padding: 4px 10px 4px 10px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--accent1);
|
||||
background: var(--accent1);
|
||||
color: var(--primary-background);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--base-font-size);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.3);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.3);
|
||||
box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.3);
|
||||
}
|
||||
|
||||
.mediamgr_menu li a.newfilebutton:hover {
|
||||
background: var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.mediamgr_category {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#mediafilter {
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.mediamgr_category ul li {
|
||||
display: block !important;
|
||||
}
|
||||
39
public/assets/css/components/mermaid.css
Normal file
39
public/assets/css/components/mermaid.css
Normal file
@@ -0,0 +1,39 @@
|
||||
/* Mermaid diagram styling for Copilot */
|
||||
.mermaid-diagram {
|
||||
margin: 16px 0;
|
||||
padding: 10px;
|
||||
background-color: var(--color-bg-muted);
|
||||
border-radius: var(--box-radius-large);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mermaid {
|
||||
font-family: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Make sure SVG diagrams are responsive */
|
||||
.mermaid svg {
|
||||
max-width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Improve visibility of diagram elements */
|
||||
.mermaid .node rect,
|
||||
.mermaid .node circle,
|
||||
.mermaid .node ellipse,
|
||||
.mermaid .node polygon,
|
||||
.mermaid .node path {
|
||||
fill: var(--primary-background);
|
||||
stroke: var(--accent1);
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.mermaid .edgePath .path {
|
||||
stroke: var(--primary-font-color);
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.mermaid .label {
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
2885
public/assets/css/components/mobile.css
Normal file
2885
public/assets/css/components/mobile.css
Normal file
File diff suppressed because it is too large
Load Diff
1389
public/assets/css/components/nav.css
Normal file
1389
public/assets/css/components/nav.css
Normal file
File diff suppressed because it is too large
Load Diff
177
public/assets/css/components/nyroModal.css
Normal file
177
public/assets/css/components/nyroModal.css
Normal file
@@ -0,0 +1,177 @@
|
||||
|
||||
.nyroModalCont, .nyroModalBg {
|
||||
z-index: 100;
|
||||
overflow-x: hidden !important;
|
||||
padding: 34px 40px 20px 35px
|
||||
}
|
||||
|
||||
.nyroModalBg {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.nmReposition {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.nyroModalCloseButton:hover {
|
||||
|
||||
}
|
||||
|
||||
.nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nyroModalTitle {
|
||||
top: -26px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
font-size: 1.1em;
|
||||
color: #ddd;
|
||||
}
|
||||
.nyroModalCont {
|
||||
position: relative;
|
||||
/*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);*/
|
||||
background: var(--secondary-background);
|
||||
border-radius:20px;
|
||||
margin-bottom:50px;
|
||||
}
|
||||
.nyroModalCont iframe {
|
||||
}
|
||||
.nyroModalError {
|
||||
border: 4px solid var(--red);
|
||||
color: var(--red);
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.nyroModalError div {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
.nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile {
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
min-width: 250px;
|
||||
}
|
||||
.nyroModalImage, .nyroModalSwf, .nyroModalIframe, .nyroModalIframeForm {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nyroModalImage img {
|
||||
vertical-align: top;
|
||||
}
|
||||
.nyroModalHidden {
|
||||
left: -9999em;
|
||||
top: -9999em;
|
||||
}
|
||||
.nyroModalLoad {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: transparent url(../../images/svg/loading-animation.svg) no-repeat center;
|
||||
padding: 0;
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
.nyroModalPrev, .nyroModalNext {
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 60%;
|
||||
width: 150px;
|
||||
min-height: 50px;
|
||||
max-height: 300px;
|
||||
cursor: pointer;
|
||||
text-indent: -9999em;
|
||||
background: transparent url('data:image/gif;base64,AAAA') left 20% no-repeat;
|
||||
}
|
||||
.nyroModalImage .nyroModalPrev, .nyroModalImage .nyroModalNext {
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
max-height: none;
|
||||
}
|
||||
.nyroModalPrev {
|
||||
left: 0;
|
||||
}
|
||||
.nyroModalPrev:hover {
|
||||
}
|
||||
.nyroModalNext {
|
||||
right: 0;
|
||||
}
|
||||
.nyroModalNext:hover {
|
||||
}
|
||||
|
||||
.nyroModalCont textarea,
|
||||
.nyroModalCont input[type="text"],
|
||||
.nyroModalCont select {
|
||||
/*width:100%;*/
|
||||
}
|
||||
|
||||
.nyroModalCont select {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile {
|
||||
|
||||
}
|
||||
|
||||
.nyroModalCont h1 {
|
||||
font-size:var(--font-size-xxl);
|
||||
color:var(--primary-font-color);
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.nyroModalCont .row .regLeft {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.nyroModalCont .row .regRight {
|
||||
min-width:500px;
|
||||
}
|
||||
|
||||
.modal-icons {
|
||||
float:right;
|
||||
margin-top:1px;
|
||||
margin-right:30px;
|
||||
|
||||
}
|
||||
|
||||
.nyroModalCont .modal-icons a {
|
||||
display:inline-block;
|
||||
line-height:23px;
|
||||
border:0px solid var(--main-border-color);
|
||||
border-radius:var(--box-radius-small);
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
color:var(--primary-font-color);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
.nyroModalCloseButton {
|
||||
border:0px solid var(--main-border-color);
|
||||
font-size: var(--font-size-xl);
|
||||
text-indent: 0;
|
||||
color: var(--primary-font-color) !important;
|
||||
border-radius:var(--box-radius-small);
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
right: 40px;
|
||||
text-align: center;
|
||||
top: 35px;
|
||||
width: 25px;
|
||||
z-index: 1000010;
|
||||
}
|
||||
|
||||
.nyroModalCloseButton:hover,
|
||||
.modal-icons a:hover {
|
||||
text-decoration: none;
|
||||
background:var(--main-border-color-hover) !important;
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
412
public/assets/css/components/overwrites.css
Normal file
412
public/assets/css/components/overwrites.css
Normal file
@@ -0,0 +1,412 @@
|
||||
|
||||
/* login */
|
||||
.inputwrapper button { background: var(--main-action-bg); border-color: var(--main-border-color) }
|
||||
.inputwrapper button:hover { background: var(--main-action-hover-bg); border-color: var(--main-border-color) }
|
||||
|
||||
/* background */
|
||||
.leftmenu .nav-tabs.nav-stacked > li.active > a,
|
||||
.leftmenu .nav-tabs.nav-stacked > li.active > a:hover,
|
||||
.shortcuts li a,
|
||||
.widgettitle,
|
||||
.mediamgr .mediamgr_rightinner h4,
|
||||
.messagemenu, .msglist li.selected,
|
||||
.wizard .hormenu li a.done,
|
||||
.wizard .hormenu li a.selected,
|
||||
.actionBar a:hover, .actionBar a:hover,
|
||||
.wizard .tabbedmenu, .nav-tabs > .active > a:focus,
|
||||
.tabbable > .nav-tabs,
|
||||
.nav-tabs > li > a:hover,
|
||||
.nav-tabs > li > a:focus,
|
||||
.nav-pills > .active > a,
|
||||
.nav-pills > .active > a:hover,
|
||||
.nav-pills > .active > a:focus,
|
||||
.tabs-right .nav-tabs,
|
||||
.tabs-right > .nav-tabs > li > a,
|
||||
.tabs-left .nav-tabs,
|
||||
.tabs-left > .nav-tabs > li > a,
|
||||
.progress-primary .bar,
|
||||
.ui-datepicker-calendar td.ui-datepicker-today a,
|
||||
.nav-tabs > .active > a,
|
||||
.nav-tabs > .active > a:hover,
|
||||
.nav-tabs > .active > a:focus,
|
||||
.nav-list > .active > a,
|
||||
.nav-list > .active > a:hover,
|
||||
.nav-list > .active > a:focus,
|
||||
.fc-widget-header, .fc-widget-header.fc-agenda-gutter.fc-last, .chosen-container-multi .chosen-choices .search-choice,
|
||||
div.tagsinput span.tag, .chosen-container .chosen-results .highlighted
|
||||
{ background-color: var(--primary-color) }
|
||||
|
||||
|
||||
|
||||
.loginpanelinner,
|
||||
.leftpanel .leftmenu .nav-tabs ul.projectselector li.active a{
|
||||
background-color: var(--primary-color) !important;
|
||||
color:var(--main-action-color);
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
|
||||
}
|
||||
|
||||
.boxedHighlight{
|
||||
background:var(--accent1);
|
||||
}
|
||||
|
||||
/* color */
|
||||
|
||||
a,a:hover,a:link,a:active,a:focus,
|
||||
.userlist li .uinfo h5,
|
||||
.messagemenu ul li.active a,
|
||||
.msglist li h4,
|
||||
.actionBar a,
|
||||
.actionBar a.buttonDisabled,
|
||||
.wizard .tabbedmenu li a.selected,
|
||||
.wizard .tabbedmenu li a.done,
|
||||
.tabbable > .nav-tabs > li.active > a,
|
||||
.btn-circle.btn-primary, .btn-circle.btn-primary:hover, .btn-circle.btn-primary:focus,
|
||||
.btn-circle.btn-primary:active, .btn-circle.btn-primary.active,
|
||||
.btn-circle.btn-primary.disabled, .btn-circle.btn-primary[disabled],
|
||||
.tabs-right > .nav-tabs .active > a,
|
||||
.tabs-right > .nav-tabs .active > a:hover,
|
||||
.tabs-right > .nav-tabs .active > a:focus,
|
||||
.tabs-left > .nav-tabs .active > a,
|
||||
.tabs-left > .nav-tabs .active > a:hover,
|
||||
.tabs-left > .nav-tabs .active > a:focus,
|
||||
.ticketBox a.userPopover:hover,
|
||||
.primaryColor,
|
||||
.optionLink,
|
||||
.inlineDropDownContainer .ticketDropDown:hover,
|
||||
.leftpanel .leftmenu .nav-tabs ul.projectselector li.intro a,
|
||||
.maincontentinner .ticketDropdown.noBg >a,
|
||||
.maincontentinner .ticketDropdown.noBg >a:link,
|
||||
.viewDropDown .dropdown-menu li a.active
|
||||
{ color: var(--primary-color); }
|
||||
|
||||
|
||||
input[type='submit'],
|
||||
button
|
||||
{ background-color: var(--main-action-bg); }
|
||||
|
||||
input[type='submit']:hover,
|
||||
button:hover {
|
||||
background-color: var(--main-action-hover-bg);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.chosen-container-multi .chosen-choices .search-choice {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.btn-white {
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
span.btn-white:hover{
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
|
||||
/* border color */
|
||||
.widgetcontent,
|
||||
.messagemenu ul li.active,
|
||||
.messageleft,
|
||||
.messageright,
|
||||
.messagesearch,
|
||||
.msgreply,
|
||||
.wizard .hormenu li a,
|
||||
.wizard .hormenu li:first-child a,
|
||||
.stepContainer,
|
||||
.actionBar,
|
||||
.actionBar a,
|
||||
.actionBar a.buttonDisabled,
|
||||
.tabbable > .nav-tabs,
|
||||
.tabbable > .tab-content,
|
||||
.nav-tabs.nav-stacked > li > a:focus,
|
||||
.btn-circle.btn-primary, .btn-circle.btn-primary:hover, .btn-circle.btn-primary:focus,
|
||||
.btn-circle.btn-primary:active, .btn-circle.btn-primary.active,
|
||||
.btn-circle.btn-primary.disabled, .btn-circle.btn-primary[disabled],
|
||||
.nav-tabs,
|
||||
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus,
|
||||
.tabs-below .tab-content,
|
||||
.tabs-below > .nav-tabs > li.active > a,
|
||||
.tabs-right,
|
||||
.tabs-left,
|
||||
.tab-primary.ui-tabs,
|
||||
.nav-tabs.nav-stacked > li > a,
|
||||
.nav-tabs.nav-stacked > li > a:hover,
|
||||
.nav-tabs.nav-stacked > li > a:hover,
|
||||
.nav-tabs.nav-stacked > li > a:focus,
|
||||
.nav-tabs > .active > a,
|
||||
.nav-tabs > .active > a:hover,
|
||||
.nav-tabs > .active > a:focus,
|
||||
div.tagsinput span.tag
|
||||
{ border-color: var(--main-border-color) }
|
||||
|
||||
|
||||
.ui-datepicker-header { background-color: var(--primary-color) !important; }
|
||||
.ui-datepicker { border-color: var(--main-border-color) !important; }
|
||||
|
||||
|
||||
/* extras */
|
||||
|
||||
.tabs-below > .nav-tabs > li.active > a { border-bottom: 1px solid var(--main-border-color) !important; }
|
||||
.nav-list > li > a { color: #666; }
|
||||
.tabs-left > .nav-tabs > li,
|
||||
.tabs-right > .nav-tabs > li { border-color: var(--main-border-color); }
|
||||
.leftmenu .nav-tabs.nav-stacked > li > a { border-color: var(--main-border-color) !important; }
|
||||
.leftmenu .nav-tabs.nav-stacked > li.active > a { border-color: var(--main-border-color) !important; }
|
||||
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
.userloggedinfo ul li a:hover { background-color: var(--primary-color); }
|
||||
|
||||
.userloggedinfo .userinfo,
|
||||
.wizard .hormenu li,
|
||||
.messageright { border-color: var(--main-border-color); }
|
||||
|
||||
}
|
||||
|
||||
.timesheetTable {
|
||||
|
||||
}
|
||||
|
||||
.timesheetTable input {
|
||||
width:70%;
|
||||
}
|
||||
|
||||
.week-picker {
|
||||
width:100px;
|
||||
}
|
||||
|
||||
.timesheetTable select {
|
||||
width:90%;
|
||||
}
|
||||
|
||||
|
||||
.ui-weekpicker td a.ui-state-hover{
|
||||
background:#eee;
|
||||
}
|
||||
|
||||
.ui-weekpicker td a.ui-state-highlight {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
||||
.ui-state-highlight {
|
||||
background:#eee;
|
||||
}
|
||||
|
||||
.companyProject,
|
||||
.companyProject a{
|
||||
color:#999;
|
||||
font-weight:normal
|
||||
}
|
||||
|
||||
.filterBar {
|
||||
|
||||
border:0px solid var(--main-border-color);
|
||||
padding:10px;
|
||||
margin-bottom:5px;
|
||||
padding-top:5px;
|
||||
margin-top: 10px;
|
||||
background:var(--secondary-background);
|
||||
border-radius:var(--box-radius);
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
box-shadow: var(--large-shadow);
|
||||
}
|
||||
|
||||
.filterBar label {
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
.headtitle {
|
||||
background:var(--kanban-col-bg);
|
||||
border:0px solid var(--main-border-color);
|
||||
border-radius:var(--box-radius);
|
||||
}
|
||||
|
||||
.filterBar .filterBoxLeft {
|
||||
float:left;
|
||||
margin-right:15px;
|
||||
min-width:50px;
|
||||
}
|
||||
|
||||
.filterBar .filterBoxLeft input,
|
||||
.filterBar .filterBoxLeft select {
|
||||
float:left;
|
||||
}
|
||||
|
||||
label.inline {
|
||||
float:left;
|
||||
margin-right:5px;
|
||||
padding-top:6px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:40px;
|
||||
}
|
||||
|
||||
body .widgettitle.title-light {
|
||||
color:var(--primary-color);
|
||||
padding-left:0px;
|
||||
background-color: transparent !important;
|
||||
border-left:0px !important;
|
||||
border-top:0px !important;
|
||||
border-right:0px !important;
|
||||
border-bottom:0px solid #ccc;
|
||||
margin-bottom:15px;
|
||||
font-size:var(--font-size-l);
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
|
||||
.nyroModalCont .widgettitle.title-light {
|
||||
padding-top: 5px;
|
||||
font-size:var(--font-size-l);
|
||||
}
|
||||
|
||||
div.tagsinput {
|
||||
border:1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
|
||||
body .tox .tox-edit-area__iframe,
|
||||
body .tox .tox-toolbar-overlord{
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
|
||||
.ui-datepicker-next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 5px;
|
||||
background: url(~images/calarrow.png) no-repeat 3px 1px;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 5px;
|
||||
background: url(~images/calarrow.png) no-repeat 3px -39px;
|
||||
}
|
||||
|
||||
.ui-datepicker-header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: var(--primary-color);
|
||||
text-transform: uppercase;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.ui-datepicker {
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
|
||||
div.growl,
|
||||
div.growl.growl-default,
|
||||
div.growl div.growl-closer {
|
||||
background:var(--secondary-background);
|
||||
color:var(--primary-font-color);
|
||||
padding:20px;
|
||||
font-size:var(--base-font-size);
|
||||
width:250px;
|
||||
opacity:1;
|
||||
border-radius:var(--box-radius);
|
||||
box-shadow: var(--regular-shadow);
|
||||
border:0px;
|
||||
|
||||
}
|
||||
|
||||
div.growl growl-close {
|
||||
color:var(--primary-font-color);
|
||||
font-size:var(--base-font-size);
|
||||
}
|
||||
|
||||
div.growl.growl-default,
|
||||
div.growl.growl-success{
|
||||
border-left:5px solid var(--green);
|
||||
}
|
||||
|
||||
div.growl.growl-notice {
|
||||
border-left:5px solid var(--blue);
|
||||
}
|
||||
|
||||
div.growl.growl-error {
|
||||
border-left:5px solid var(--dark-red);
|
||||
}
|
||||
|
||||
div.growl .growl-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
display:none;
|
||||
}
|
||||
|
||||
div.growl .growl-message {
|
||||
font-size: var(--base-font-size);
|
||||
line-height: 18px;
|
||||
font-family: var(--primary-font-family);
|
||||
}
|
||||
|
||||
div.growl.growl-medium {
|
||||
width: 250px;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* Playing with header */
|
||||
|
||||
|
||||
:not(pre)>code[class*=language-], pre[class*=language-] {
|
||||
}
|
||||
|
||||
code[class*=language-], pre[class*=language-] {
|
||||
text-shadow:0px 1px var(--secondary-background);
|
||||
}
|
||||
|
||||
|
||||
element.style {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
body hr {
|
||||
margin: 20px 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
/* tippy overrides
|
||||
*/
|
||||
|
||||
.tippy-content {
|
||||
font-size:var(--font-size-s);
|
||||
color: var(--secondary-action-hover-color);
|
||||
}
|
||||
|
||||
.tippy-box {
|
||||
background: var(--secondary-action-hover-bg);
|
||||
}
|
||||
|
||||
.tippy-arrow {
|
||||
color:var(--secondary-action-hover-bg);
|
||||
}
|
||||
|
||||
|
||||
.ui-resizable-se {
|
||||
opaciy:0.5
|
||||
}
|
||||
|
||||
#freshworks-container,
|
||||
#freshworks-container #launcher-frame{
|
||||
z-index:90 !important;
|
||||
}
|
||||
159
public/assets/css/components/print.css
Normal file
159
public/assets/css/components/print.css
Normal file
@@ -0,0 +1,159 @@
|
||||
@media print {
|
||||
|
||||
@page {
|
||||
size:landscape;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-print-color-adjust:exact;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width:100%;
|
||||
mso-page-orientation: landscape;
|
||||
}
|
||||
.mainwrapper.menuopen .rightpanel {
|
||||
margin-left:0px;
|
||||
padding-top:0px;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown .fa-caret-down {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.dropdown a {
|
||||
text-decoration:none !important;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display:none;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: '' !important;
|
||||
}
|
||||
|
||||
.maincontent {
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
.maincontentinner {
|
||||
padding-top:0px;
|
||||
}
|
||||
|
||||
.sortableTicketList .row-fluid {
|
||||
overflow:hidden !important;
|
||||
}
|
||||
|
||||
.column {
|
||||
min-width:auto !important;
|
||||
}
|
||||
|
||||
.header-title-dropdown {
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
padding: 0px !important;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* When a modal (e.g. a single to-do) is open, print only the modal's
|
||||
* content instead of the underlying page. nyroModal appends .nyroModalBg
|
||||
* (overlay) and .nyroModalCont (content) to the body, so we can hide the
|
||||
* rest of the app and let the modal flow onto the page.
|
||||
*/
|
||||
body:has(.nyroModalCont) .mainwrapper,
|
||||
body:has(.nyroModalCont) .nyroModalBg,
|
||||
.nyroModalCont .nyroModalClose,
|
||||
.nyroModalCont .modalCloseButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body:has(.nyroModalCont) .nyroModalCont {
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
box-shadow: none !important;
|
||||
overflow: visible !important;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
body:has(.nyroModalCont) .nyroModalCont * {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Report screens (project / plan / strategy): keep board-packet output clean.
|
||||
*/
|
||||
@media print {
|
||||
|
||||
.periodPicker .btn-group,
|
||||
.periodPicker .periodPickerCustom,
|
||||
.hideOnPrint {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.reportMilestone,
|
||||
.reportStatusUpdate,
|
||||
.reportGoalTable tr,
|
||||
.reportNeedsAttention,
|
||||
.reportSlippage,
|
||||
.programMatrixTable tr {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Expand drill-down task lists so the packet is complete on paper. */
|
||||
.reportKeyTasks {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reportKeyTasks[open] summary,
|
||||
.reportKeyTasks summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.reportKeyTasks > ul {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Status colors must survive printer color handling. */
|
||||
.reportStatusPill span,
|
||||
.reportStatusNarrative .reportStatusUpdate,
|
||||
.reportNeedsAttention {
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
/* Milestone links read as text in the packet. */
|
||||
.hideLinkOnPrint {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
/* Chromium hides closed <details> content via content-visibility. */
|
||||
.reportKeyTasks::details-content {
|
||||
content-visibility: visible !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
698
public/assets/css/components/progressbars.css
Normal file
698
public/assets/css/components/progressbars.css
Normal file
@@ -0,0 +1,698 @@
|
||||
.progress {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.progress .bar {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.progress-primary .bar {
|
||||
background: var(--element-gradient);
|
||||
}
|
||||
|
||||
.progress-info .bar {
|
||||
background: var(--element-gradient);
|
||||
}
|
||||
|
||||
.progress-success .bar {
|
||||
background: var(--element-gradient);
|
||||
}
|
||||
|
||||
.progress-warnng .bar {
|
||||
background: var(--element-gradient);
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 16px;
|
||||
margin-bottom: 0px;
|
||||
border-radius: var(--element-radius);
|
||||
overflow: hidden;
|
||||
background-color: var(--layered-background);
|
||||
box-shadow: var(--input-shadow);
|
||||
}
|
||||
|
||||
.progress-wrapper .percent-label {
|
||||
font-size:var(--font-size-s);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
font-size: var(--base-font-size);
|
||||
color: var(--accent1-color);
|
||||
text-align: center;
|
||||
background-color: var(--accent1);
|
||||
-webkit-box-shadow: var(--min-shadow);
|
||||
box-shadow: var(--min-shadow);
|
||||
-webkit-transition: width 0.6s ease;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
|
||||
.progress-striped .progress-bar {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
.progress.active .progress-bar {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-moz-animation: progress-bar-stripes 2s linear infinite;
|
||||
-ms-animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
.progress-bar-success {
|
||||
background: var(--element-gradient);
|
||||
}
|
||||
|
||||
.progress-striped .progress-bar-success {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
.progress-bar-info {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.progress-striped .progress-bar-info {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
.progress-bar-warning {
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.progress-striped .progress-bar-warning {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
.progress-bar-danger {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.progress-striped .progress-bar-danger {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
|
||||
.progressWrapper {
|
||||
position:relative;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.progressWrapper .step {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -10px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
.progressWrapper .step .innerCircle {
|
||||
display:block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 5px solid var(--layered-background);
|
||||
border-radius: 20px;
|
||||
background: var(--solid-neutral);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.progressWrapper .step .title {
|
||||
margin-left:calc(-50% + 36px);
|
||||
padding-top: 4px;
|
||||
display: inline-block;
|
||||
color:var(--primary-font-color);
|
||||
opacity:var(--opacity-disabled);
|
||||
font-size:var(--font-size-m);
|
||||
}
|
||||
|
||||
.progressWrapper .step .title:hover {
|
||||
color:var(--primary-font-color) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes breathing {
|
||||
0% {
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
25% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes breathing {
|
||||
0% {
|
||||
-webkit-transform: scale(0.9);
|
||||
-ms-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
25% {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2);
|
||||
-ms-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(0.9);
|
||||
-ms-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.progressWrapper .step.complete .innerCircle {
|
||||
background:var(--accent1);
|
||||
color:var(--accent1);
|
||||
|
||||
}
|
||||
|
||||
.progressWrapper .step.complete .title{
|
||||
color:var(--accent1);
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.progressWrapper .step.current .innerCircle {
|
||||
-webkit-animation: breathing 2s ease-out infinite normal;
|
||||
animation: breathing 2s ease-out infinite normal;
|
||||
background:var(--accent2);
|
||||
}
|
||||
|
||||
.progressWrapper .step.current .title{
|
||||
color:var(--accent1);
|
||||
font-weight:var(--font-weight-bold);
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.progressWrapper .step .dropdown-menu {
|
||||
padding:10px;
|
||||
min-width:360px;
|
||||
}
|
||||
|
||||
.progressWrapper .step .dropdown-menu li {
|
||||
display:block;
|
||||
clear:both;
|
||||
padding:0px 10px 4px 10px;
|
||||
border-color:var(--accent1);
|
||||
border:1px solid var(--accent1);
|
||||
border-radius:var(--box-radius);
|
||||
margin-bottom:4px;
|
||||
}
|
||||
|
||||
.progressWrapper .step .dropdown-menu li label {
|
||||
color:var(--accent1);
|
||||
}
|
||||
|
||||
.progressWrapper .step .dropdown-menu li.done {
|
||||
opacity:var(--opacity-muted);
|
||||
}
|
||||
|
||||
.progressWrapper .step .dropdown-menu li:hover {
|
||||
background:var(--main-menu-link-hover-bg);
|
||||
}
|
||||
|
||||
.progressWrapper .step .dropdown-menu li.done label{
|
||||
text-decoration: line-through;
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
.progressWrapper .step .dropdown-menu li input {
|
||||
float:left;
|
||||
margin-right:4px;
|
||||
}
|
||||
|
||||
.progressWrapper .step li.checklistDescription {
|
||||
padding:4px;
|
||||
font-style:italic;
|
||||
border:none;
|
||||
}
|
||||
|
||||
|
||||
.progressWrapper .step li .taskDescription {
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
|
||||
.full-width-loader {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
z-index: var(--zlayer-7);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.full-width-loader .indeterminate {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.full-width-loader .indeterminate::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: var(--element-gradient);
|
||||
animation: indeterminate 1.5s infinite ease-in-out;
|
||||
width: 70%;
|
||||
left: -70%;
|
||||
box-shadow: var(--regular-shadow);
|
||||
}
|
||||
|
||||
@keyframes indeterminate {
|
||||
0% {
|
||||
left: -70%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.full-width-loader.htmx-request {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Singleton top-of-page HTMX progress bar (driven by leantime.htmxProgress in app.js).
|
||||
One fixed element for the whole app; position:fixed means it never affects layout. */
|
||||
#lt-htmx-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
z-index: var(--zlayer-9, 9999);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#lt-htmx-progress.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#lt-htmx-progress .bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 40%;
|
||||
left: -40%;
|
||||
background: var(--element-gradient, var(--accent1, #006d9f));
|
||||
animation: lt-htmx-progress-slide 1.1s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes lt-htmx-progress-slide {
|
||||
0% { left: -40%; width: 40%; }
|
||||
50% { left: 30%; width: 55%; }
|
||||
100% { left: 100%; width: 40%; }
|
||||
}
|
||||
|
||||
/* ----------------------------------------------
|
||||
* Generated by Animista on 2025-3-4 12:23:18
|
||||
* Licensed under FreeBSD License.
|
||||
* See http://animista.net/license for more info.
|
||||
* w: http://animista.net, t: @cssanimista
|
||||
* ---------------------------------------------- */
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation color-change-2x
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes color-change-2x {
|
||||
0% {
|
||||
color: var(--accent1);
|
||||
}
|
||||
50% {
|
||||
color: var(--accent2);
|
||||
}
|
||||
100% {
|
||||
color: var(--accent1);
|
||||
}
|
||||
}
|
||||
@keyframes color-change-2x {
|
||||
0% {
|
||||
color: var(--accent1);
|
||||
}
|
||||
50% {
|
||||
color: var(--accent2);
|
||||
}
|
||||
100% {
|
||||
color: var(--accent1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes circle-pulse {
|
||||
0%{
|
||||
transform: rotate(0deg);
|
||||
border-color: var(--accent1);
|
||||
} 100% {
|
||||
transform: rotate(360deg);
|
||||
border-color: var(--accent2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Animations */
|
||||
@keyframes startPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(0.95); }
|
||||
75% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes rippleOut {
|
||||
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
|
||||
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes glowIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes completePulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
|
||||
50% { opacity: 0.6; }
|
||||
100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fadeInCheck {
|
||||
0% { opacity: 0; transform: scale(0.8); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes circleAppear {
|
||||
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
|
||||
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Particle animations - each one goes in a different direction */
|
||||
@keyframes particleAnimation1 {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(-30px, -30px); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes particleAnimation2 {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(30px, -30px); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes particleAnimation3 {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(40px, 0); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes particleAnimation4 {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(30px, 30px); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes particleAnimation5 {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(-30px, 30px); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes particleAnimation6 {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(-40px, 0); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes particleAnimation7 {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(-20px, -40px); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes particleAnimation8 {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(20px, 40px); opacity: 0; }
|
||||
}
|
||||
|
||||
.pulse {
|
||||
-webkit-animation: pulse 1s infinite linear both;
|
||||
animation: pulse 1s infinite linear both;
|
||||
}
|
||||
|
||||
.color-change-2x {
|
||||
-webkit-animation: color-change-2x 1s infinite linear both;
|
||||
animation: color-change-2x 1s infinite linear both;
|
||||
}
|
||||
|
||||
.pulse-click.starting {
|
||||
animation: startPulse 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
}
|
||||
|
||||
.pulse-click.starting::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(82, 113, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
animation: rippleOut 0.5s ease-out;
|
||||
}
|
||||
|
||||
.pulse-click.starting::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
opacity: 0;
|
||||
animation: glowIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.circle-pulse {
|
||||
-webkit-animation: circle-pulse 1s infinite linear both;
|
||||
animation: circle-pulse 1s infinite linear both;
|
||||
}
|
||||
|
||||
.timerContainer.stopped {
|
||||
animation: pulse 0.4s ease-out;
|
||||
}
|
||||
|
||||
.timerContainer .stopped::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 70%);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: burst 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Stopped state with celebrations */
|
||||
.timerContainer .stopped {
|
||||
animation: completePulse 0.4s ease-out;
|
||||
}
|
||||
|
||||
/* Glow effect behind the button */
|
||||
.timerContainer .stopped::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 70%);
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
animation: glowPulse 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Checkmark that appears */
|
||||
.timerContainer .stopped::after {
|
||||
content: '✓';
|
||||
color: white;
|
||||
font-size: var(--font-size-xxl);
|
||||
position: absolute;
|
||||
z-index: var(--zlayer-2);
|
||||
opacity: 0;
|
||||
animation: fadeInCheck 0.3s 0.2s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Success circle that appears */
|
||||
.timerContainer .success-circle {
|
||||
position: absolute;
|
||||
display:none;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-color: var(--grey);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
z-index: var(--zlayer-1);
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
|
||||
.timerContainer .stopped .success-circle {
|
||||
display:block;
|
||||
animation: circleAppear 0.3s 0.1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Container for all the particles */
|
||||
.particles-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Individual particles with different colors */
|
||||
.particle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.timerContainer .stopped .particle-1 {
|
||||
background-color: var(--accent1);
|
||||
animation: particleAnimation1 0.8s ease-out;
|
||||
}
|
||||
|
||||
.timerContainer .stopped .particle-2 {
|
||||
background-color: var(--accent2);
|
||||
animation: particleAnimation2 0.8s ease-out;
|
||||
}
|
||||
|
||||
.timerContainer .stopped .particle-3 {
|
||||
background-color: var(--accent4);
|
||||
animation: particleAnimation3 0.8s ease-out;
|
||||
}
|
||||
|
||||
.timerContainer .stopped .particle-4 {
|
||||
background-color: var(--accent1);
|
||||
animation: particleAnimation4 0.8s ease-out;
|
||||
}
|
||||
|
||||
.timerContainer .stopped .particle-5 {
|
||||
background-color: var(--accent2);
|
||||
animation: particleAnimation5 0.8s ease-out;
|
||||
}
|
||||
|
||||
.timerContainer .stopped .particle-6 {
|
||||
background-color: var(--accent4);
|
||||
animation: particleAnimation6 0.8s ease-out;
|
||||
}
|
||||
|
||||
.timerContainer .stopped .particle-7 {
|
||||
background-color: var(--accent1);
|
||||
animation: particleAnimation7 0.8s ease-out;
|
||||
}
|
||||
|
||||
.timerContainer .stopped .particle-8 {
|
||||
background-color: var(--accent2);
|
||||
animation: particleAnimation8 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
196
public/assets/css/components/quickadd.less
Normal file
196
public/assets/css/components/quickadd.less
Normal file
@@ -0,0 +1,196 @@
|
||||
/* Quick-add form styles */
|
||||
|
||||
.quickaddContainer {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.quickaddContainer--empty {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.quickAddLink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--main-action-color);
|
||||
text-decoration: none;
|
||||
padding: 8px;
|
||||
border-radius: var(--box-radius);
|
||||
transition: color 0.2s ease;
|
||||
font-size: var(--font-size-s);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent1);
|
||||
}
|
||||
|
||||
&.empty-state {
|
||||
justify-content: flex-start;
|
||||
padding: 10px;
|
||||
color: var(--primary-font-color);
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
form.quickAddForm {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
||||
&.active {
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.quickaddContainer--empty & {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.quickAddForm .form-group {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Help icon positioned in top-right corner of form */
|
||||
.quickAddHelp {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--primary-font-color);
|
||||
opacity: 0.4;
|
||||
cursor: help;
|
||||
transition: opacity 0.2s ease, color 0.2s ease;
|
||||
padding: 4px;
|
||||
z-index: 5;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
color: var(--accent1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent1);
|
||||
outline-offset: 2px;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.quickAddInput {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-radius: var(--box-radius);
|
||||
padding: 8px 12px;
|
||||
font-family: var(--primary-font-family);
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--primary-font-color);
|
||||
background: var(--main-bg);
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--accent1);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent1) 15%, transparent);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--primary-font-color);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--red);
|
||||
font-size: var(--font-size-s);
|
||||
margin-top: 4px;
|
||||
padding: 4px 8px;
|
||||
background: color-mix(in srgb, var(--red) 10%, transparent);
|
||||
border-radius: var(--box-radius);
|
||||
}
|
||||
|
||||
.formButtonContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
|
||||
.btn {
|
||||
padding: 6px 14px;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.quickAddForm {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
1057
public/assets/css/components/report-deck.css
Normal file
1057
public/assets/css/components/report-deck.css
Normal file
File diff suppressed because it is too large
Load Diff
242
public/assets/css/components/reports.css
Normal file
242
public/assets/css/components/reports.css
Normal file
@@ -0,0 +1,242 @@
|
||||
/*
|
||||
* Report screens (project / plan / strategy).
|
||||
* Quiet, packet-like: card surfaces, muted labels, tabular numbers. The only loud
|
||||
* elements are the status dots and the needs-attention accent border.
|
||||
*/
|
||||
|
||||
/* ── stat tiles ─────────────────────────────────────────────────────── */
|
||||
|
||||
.reportStatTiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.reportStatTile {
|
||||
background: var(--card-bg, var(--secondary-background));
|
||||
border: 1px solid var(--card-border, var(--main-border-color));
|
||||
border-radius: var(--card-radius, var(--box-radius));
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.reportStatTile .tileLabel {
|
||||
display: block;
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--secondary-font-color);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.reportStatTile .tileValue {
|
||||
display: block;
|
||||
font-size: var(--font-size-xxxl);
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
.reportStatTile .tileValue.tileValueDanger {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.reportStatTile .tileDelta {
|
||||
display: block;
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--secondary-font-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.reportStatTile .tileDelta.deltaGood { color: var(--green); }
|
||||
.reportStatTile .tileDelta.deltaBad { color: var(--red); }
|
||||
|
||||
/* ── sections ───────────────────────────────────────────────────────── */
|
||||
|
||||
.reportSection {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.reportSection h5.subtitle {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
.reportSection h5.subtitle .sectionCount {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: normal;
|
||||
color: var(--secondary-font-color);
|
||||
}
|
||||
|
||||
/* ── needs attention ────────────────────────────────────────────────── */
|
||||
|
||||
.reportNeedsAttention {
|
||||
background: var(--card-bg, var(--secondary-background));
|
||||
border: 1px solid var(--card-border, var(--main-border-color));
|
||||
border-left: 3px solid var(--red);
|
||||
border-radius: var(--card-radius, var(--box-radius));
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.reportNeedsAttention h5.subtitle {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reportNeedsAttention ul li {
|
||||
padding: 3px 0;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
/* ── milestone list ─────────────────────────────────────────────────── */
|
||||
|
||||
.reportMilestoneList {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.reportMilestoneList .reportMilestone {
|
||||
background: var(--card-bg, var(--secondary-background));
|
||||
border: 1px solid var(--card-border, var(--main-border-color));
|
||||
border-radius: var(--card-radius, var(--box-radius));
|
||||
padding: 10px 14px;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.reportMilestone .milestoneTitleRow {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.reportMilestone .milestoneProject {
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--secondary-font-color);
|
||||
}
|
||||
|
||||
.reportMilestone .milestoneMeta {
|
||||
margin-left: auto;
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--secondary-font-color);
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.reportMilestone .milestoneOutcome .outcomeText {
|
||||
margin-top: 4px;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
.reportMilestone .reportKeyTasks summary {
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--secondary-font-color);
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.reportMilestone .progress {
|
||||
height: 6px;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── tables ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.reportTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.reportTable thead th {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 600;
|
||||
color: var(--secondary-font-color);
|
||||
text-align: left;
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reportTable tbody td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
vertical-align: top;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
.reportTable tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.reportTable th.numCol,
|
||||
.reportTable td.numCol {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.reportTable td .cellNote {
|
||||
display: block;
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--secondary-font-color);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.reportTable .table-group-row td {
|
||||
font-weight: 600;
|
||||
color: var(--secondary-font-color);
|
||||
font-size: var(--font-size-s);
|
||||
padding-top: 14px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/* ── narrative & slippage ───────────────────────────────────────────── */
|
||||
|
||||
.reportStatusUpdate {
|
||||
padding: 6px 0 6px 12px;
|
||||
}
|
||||
|
||||
.reportSlippage {
|
||||
border: 1px dashed var(--main-border-color);
|
||||
border-radius: var(--card-radius, var(--box-radius));
|
||||
padding: 10px 14px;
|
||||
margin-top: 12px;
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--secondary-font-color);
|
||||
}
|
||||
|
||||
.reportSlippage strong {
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
/* ── period picker & header band ────────────────────────────────────── */
|
||||
|
||||
.reportHeaderBand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
.reportStatusPill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.statusDot {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
flex: none;
|
||||
}
|
||||
0
public/assets/css/components/reset.css
Normal file
0
public/assets/css/components/reset.css
Normal file
2542
public/assets/css/components/resource-allocation.css
Normal file
2542
public/assets/css/components/resource-allocation.css
Normal file
File diff suppressed because it is too large
Load Diff
956
public/assets/css/components/reverse-wizard.css
Normal file
956
public/assets/css/components/reverse-wizard.css
Normal file
@@ -0,0 +1,956 @@
|
||||
/*
|
||||
* Reverse wizard + intercept modal + review + source-chip styles.
|
||||
*
|
||||
* Consumed by the StrategyPro plugin's reverse-engineering flow, but loaded
|
||||
* from the CORE bundle (imported via main.less, like report-deck.css) because
|
||||
* the wizard never renders on "its own page": the intercept modal is echoed by
|
||||
* a register.php hook onto arbitrary pages, the stage screens arrive as HTMX
|
||||
* swaps, and the source-chip is procedurally rendered by the board hook —
|
||||
* so the styles must already be in the head everywhere.
|
||||
*
|
||||
* Extracted from per-template <style> blocks (plugins PR #79 cleanup); CSS
|
||||
* lives in CSS files, never in blade templates.
|
||||
*
|
||||
* Scopes: .reverse-modal (intercept), .rev-wiz (stages; .rev-wiz--outcomes /
|
||||
* .rev-wiz--step carry the four per-stage divergences), .rev-review (review),
|
||||
* .sp-source-chip (colors computed per program stay inline).
|
||||
*/
|
||||
|
||||
/* Scoped design tokens — derived from the global theme tokens so the
|
||||
* light/dark CSS swap re-skins the wizard automatically (nyroModal pattern).
|
||||
* Literals below have no global equivalent; the [data-theme="dark"]/.dark
|
||||
* block (tiptap pattern) retunes them when a theme attribute is stamped.
|
||||
* The source-chip's computed per-program colors are self-contained tinted
|
||||
* pills (AA inside the pill) and deliberately theme-independent. */
|
||||
.reverse-modal, .rev-wiz, .rev-review {
|
||||
--rw-panel: var(--secondary-background);
|
||||
--rw-text: var(--primary-font-color);
|
||||
--rw-text-2: #5a6a72;
|
||||
--rw-muted: #8996a0;
|
||||
--rw-faint: #b3bdc4;
|
||||
--rw-border: var(--main-border-color);
|
||||
--rw-border-soft: #f0f3f4;
|
||||
--rw-accent: var(--accent2);
|
||||
--rw-accent-deep: #008062;
|
||||
--rw-primary: var(--primary-color);
|
||||
--rw-tgt: #8E6AAD;
|
||||
}
|
||||
[data-theme="dark"] .reverse-modal, .dark .reverse-modal,
|
||||
[data-theme="dark"] .rev-wiz, .dark .rev-wiz,
|
||||
[data-theme="dark"] .rev-review, .dark .rev-review {
|
||||
--rw-text-2: #b6bec4;
|
||||
--rw-muted: #97a1a8;
|
||||
--rw-faint: #6a747c;
|
||||
--rw-border-soft: #3a3f44;
|
||||
--rw-accent-deep: #57b598;
|
||||
--rw-tgt: #b79ad1;
|
||||
}
|
||||
|
||||
/* ── Intercept modal ─────────────────────────────────────────────── */
|
||||
|
||||
/* Scoped to the intercept modal — reverse-* prefix so nothing collides
|
||||
with the canvas view CSS underneath. */
|
||||
|
||||
.reverse-modal-backdrop {
|
||||
position:fixed;
|
||||
inset:0;
|
||||
background:rgba(24,40,49,0.45);
|
||||
backdrop-filter:blur(3px);
|
||||
z-index:var(--zlayer-9, 9999);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:28px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* Modal itself scrolls internally when the step content is taller than
|
||||
the viewport. Without this, long steps (Activities with two altitudes
|
||||
+ textarea + helper hint) push the Continue/Cancel foot below the
|
||||
viewport with no way to reach it. */
|
||||
|
||||
.reverse-modal {
|
||||
width:100%;
|
||||
max-width:720px;
|
||||
max-height:calc(100vh - 56px);
|
||||
background:var(--rw-panel);
|
||||
border-radius:18px;
|
||||
box-shadow:0 20px 56px rgba(20,40,50,.18);
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
font-family:'Hanken Grotesk',sans-serif;
|
||||
color:var(--rw-text);
|
||||
-webkit-overflow-scrolling:touch;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-hd {
|
||||
padding:24px 28px 6px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-hd .ic {
|
||||
width:52px;
|
||||
height:52px;
|
||||
border-radius:14px;
|
||||
background:#eef4f3;
|
||||
color:var(--rw-primary);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:22px;
|
||||
margin:0 auto 14px;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-hd h1 {
|
||||
font-size:22px;
|
||||
font-weight:600;
|
||||
letter-spacing:-.3px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-hd p {
|
||||
font-size:13.5px;
|
||||
color:#7a8791;
|
||||
margin-top:6px;
|
||||
max-width:440px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-found {
|
||||
margin:0 28px 20px;
|
||||
padding:11px 15px;
|
||||
background:#f6f8f7;
|
||||
border-radius:11px;
|
||||
font-size:12.5px;
|
||||
color:#4a5a63;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:9px;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-found i {
|
||||
color:var(--rw-accent);
|
||||
}
|
||||
|
||||
.reverse-modal .rm-found b {
|
||||
color:var(--rw-text);
|
||||
}
|
||||
|
||||
.reverse-modal .rm-body {
|
||||
padding:16px 28px 26px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:11px;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:15px;
|
||||
padding:16px 18px;
|
||||
border:1.5px solid #e3e8ea;
|
||||
border-radius:14px;
|
||||
cursor:pointer;
|
||||
transition:all .15s;
|
||||
text-decoration:none;
|
||||
color:inherit;
|
||||
background:var(--rw-panel);
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt:hover {
|
||||
border-color:var(--rw-accent);
|
||||
background:#f8fbfa;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt.primary {
|
||||
border-color:#bfe0d4;
|
||||
background:#f4fbf8;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt .oic {
|
||||
width:42px;
|
||||
height:42px;
|
||||
border-radius:11px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:17px;
|
||||
color:#fff;
|
||||
flex:none;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt .ot {
|
||||
font-size:15px;
|
||||
font-weight:600;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:9px;
|
||||
line-height:1.3;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt .obadge {
|
||||
font-size:10px;
|
||||
font-weight:600;
|
||||
background:#e7f5ee;
|
||||
color:#1a7d52;
|
||||
border-radius:20px;
|
||||
padding:2px 9px;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt .od {
|
||||
font-size:12.5px;
|
||||
color:#7a8791;
|
||||
margin-top:2px;
|
||||
line-height:1.45;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt .arr {
|
||||
margin-left:auto;
|
||||
color:#aab4bb;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
.reverse-modal .rm-opt.is-loading {
|
||||
opacity:.6;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
.reverse-modal .htmx-indicator {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.reverse-modal .htmx-request .htmx-indicator {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
/* When the intercept is up, hide the underlying stage flow so the modal
|
||||
reads as a takeover, not an overlay on active work. */
|
||||
|
||||
body.reverse-intercept-open .lmCanvas-stages, body.reverse-intercept-open .lm-stages, body.reverse-intercept-open [data-lm-stages] {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
/* ── Wizard stages: shared chrome (outcomes + step) ─────────────── */
|
||||
|
||||
.rev-wiz {
|
||||
font-family:'Hanken Grotesk',sans-serif;
|
||||
color:var(--rw-text);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-hd {
|
||||
padding:26px 30px 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-hd .ey {
|
||||
font-size:11px;
|
||||
font-weight:600;
|
||||
letter-spacing:1.4px;
|
||||
text-transform:uppercase;
|
||||
color:var(--rw-accent);
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-hd h1 {
|
||||
font-size:21px;
|
||||
font-weight:600;
|
||||
letter-spacing:-.3px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-hd p {
|
||||
font-size:13.5px;
|
||||
color:var(--rw-muted);
|
||||
margin-top:7px;
|
||||
max-width:470px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-rail {
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
justify-content:center;
|
||||
padding:20px 30px 30px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-node {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-dot {
|
||||
width:9px;
|
||||
height:9px;
|
||||
border-radius:50%;
|
||||
background:var(--rw-border);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-node.done .rw-dot {
|
||||
background:var(--rw-accent);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-node.on .rw-dot {
|
||||
background:var(--rw-tgt);
|
||||
box-shadow:0 0 0 4px #f2edf8;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-seg {
|
||||
width:36px;
|
||||
height:2px;
|
||||
background:var(--rw-border);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-seg.done {
|
||||
background:var(--rw-accent);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-lab {
|
||||
position:absolute;
|
||||
top:15px;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
font-size:10.5px;
|
||||
white-space:nowrap;
|
||||
color:var(--rw-tgt);
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-scope {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:9px;
|
||||
margin:0 30px 18px;
|
||||
padding:11px 15px;
|
||||
background:#f7f9f9;
|
||||
border-radius:12px;
|
||||
font-size:12.5px;
|
||||
color:var(--rw-text-2);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-scope i.si {
|
||||
color:var(--rw-primary);
|
||||
opacity:.7;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-scope b {
|
||||
color:var(--rw-text);
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-body {
|
||||
padding:0 30px 6px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-row {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:14px;
|
||||
padding:15px 16px;
|
||||
border:1px solid var(--rw-border-soft);
|
||||
border-radius:14px;
|
||||
margin-bottom:9px;
|
||||
cursor:pointer;
|
||||
transition:border-color .15s,background .15s;
|
||||
background:var(--rw-panel);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-row:hover {
|
||||
border-color:#d6e3de;
|
||||
background:#fbfdfc;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-row.is-sel {
|
||||
border-color:#bfe3d6;
|
||||
background:#f5fbf9;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-ck {
|
||||
width:20px;
|
||||
height:20px;
|
||||
border-radius:6px;
|
||||
border:1.5px solid var(--rw-border);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex:none;
|
||||
color:#fff;
|
||||
font-size:10px;
|
||||
transition:.15s;
|
||||
background:var(--rw-panel);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-row.is-sel .rw-ck {
|
||||
background:var(--rw-accent);
|
||||
border-color:var(--rw-accent);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-main {
|
||||
min-width:0;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-name {
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
line-height:1.3;
|
||||
color:var(--rw-text);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-meta .dot {
|
||||
margin:0 6px;
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-reveal {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
width:100%;
|
||||
padding:13px 16px;
|
||||
margin-top:4px;
|
||||
background:none;
|
||||
border:1px dashed var(--rw-border);
|
||||
border-radius:14px;
|
||||
cursor:pointer;
|
||||
font-family:inherit;
|
||||
font-size:12.5px;
|
||||
color:var(--rw-text-2);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-reveal:hover {
|
||||
border-color:#cdd6db;
|
||||
background:#fafbfb;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-reveal i.lead {
|
||||
color:var(--rw-faint);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-reveal .rc {
|
||||
margin-left:auto;
|
||||
color:var(--rw-faint);
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-hidden.open {
|
||||
display:block;
|
||||
margin-top:9px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-prov {
|
||||
font-size:11.5px;
|
||||
color:var(--rw-faint);
|
||||
margin:14px 2px 4px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:7px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-foot {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
padding:18px 30px 22px;
|
||||
border-top:1px solid var(--rw-border-soft);
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-foot .cnt {
|
||||
font-size:12.5px;
|
||||
color:var(--rw-muted);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-foot .cnt b {
|
||||
color:var(--rw-text);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-foot .sp {
|
||||
margin-left:auto;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-btn-skip {
|
||||
border:none;
|
||||
background:none;
|
||||
color:var(--rw-muted);
|
||||
}
|
||||
|
||||
/* ── Outcomes-stage specifics ────────────────────────────────────── */
|
||||
|
||||
.rev-wiz.rev-wiz--outcomes .rw-seclab {
|
||||
font-size:12px;
|
||||
color:var(--rw-muted);
|
||||
margin:0 2px 11px;
|
||||
}
|
||||
|
||||
.rev-wiz.rev-wiz--outcomes .rw-meta {
|
||||
font-size:11.5px;
|
||||
color:var(--rw-muted);
|
||||
margin-top:5px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex-wrap:wrap;
|
||||
gap:2px;
|
||||
}
|
||||
|
||||
.rev-wiz.rev-wiz--outcomes .rw-btn {
|
||||
font-family:inherit;
|
||||
font-size:13px;
|
||||
font-weight:500;
|
||||
border-radius:22px;
|
||||
padding:10px 17px;
|
||||
cursor:pointer;
|
||||
border:1px solid var(--rw-border);
|
||||
background:var(--rw-panel);
|
||||
color:var(--rw-text-2);
|
||||
}
|
||||
|
||||
.rev-wiz.rev-wiz--outcomes .rw-btn-next {
|
||||
background:var(--rw-primary);
|
||||
color:#fff;
|
||||
border-color:var(--rw-primary);
|
||||
font-weight:600;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-meta .tgt {
|
||||
color:var(--rw-tgt);
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-source-note {
|
||||
font-size:12px;
|
||||
color:#54636b;
|
||||
margin:16px 2px 2px;
|
||||
padding-top:13px;
|
||||
border-top:1px dashed var(--rw-border-soft);
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
gap:8px;
|
||||
line-height:1.55;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-source-note i {
|
||||
color:var(--rw-accent-deep);
|
||||
margin-top:2px;
|
||||
flex:none;
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-btn-next[disabled] {
|
||||
opacity:.5;
|
||||
cursor:not-allowed;
|
||||
}
|
||||
|
||||
/* ── Step-stage specifics ────────────────────────────────────────── */
|
||||
|
||||
.rev-wiz.rev-wiz--step .rw-seclab {
|
||||
font-size:12px;
|
||||
color:var(--rw-muted);
|
||||
margin:14px 2px 11px;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:.5px;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.rev-wiz.rev-wiz--step .rw-meta {
|
||||
font-size:11.5px;
|
||||
color:var(--rw-muted);
|
||||
margin-top:3px;
|
||||
}
|
||||
|
||||
.rev-wiz.rev-wiz--step .rw-btn {
|
||||
font-family:inherit;
|
||||
font-size:13px;
|
||||
font-weight:500;
|
||||
border-radius:22px;
|
||||
padding:10px 17px;
|
||||
cursor:pointer;
|
||||
border:1px solid var(--rw-border);
|
||||
background:var(--rw-panel);
|
||||
color:var(--rw-text-2);
|
||||
text-decoration:none;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
}
|
||||
|
||||
.rev-wiz.rev-wiz--step .rw-btn-next {
|
||||
background:var(--rw-primary);
|
||||
color:#fff;
|
||||
border-color:var(--rw-primary);
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-seclab:first-child {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-grouplab {
|
||||
font-size:12.5px;
|
||||
color:var(--rw-text-2);
|
||||
margin:12px 2px 8px;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-groupmeta {
|
||||
font-size:11.5px;
|
||||
color:var(--rw-muted);
|
||||
font-weight:400;
|
||||
margin-left:6px;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-tail {
|
||||
font-size:11.5px;
|
||||
color:var(--rw-muted);
|
||||
margin:6px 2px;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-guide {
|
||||
padding:0 4px 8px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-guide h2 {
|
||||
font-size:16px;
|
||||
font-weight:600;
|
||||
color:var(--rw-text);
|
||||
margin:0 0 6px;
|
||||
letter-spacing:-.1px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-guide p {
|
||||
font-size:14px;
|
||||
color:var(--rw-text-2);
|
||||
line-height:1.55;
|
||||
margin:0 0 14px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-guide .rw-guide-sub {
|
||||
margin-top:8px;
|
||||
color:var(--rw-muted);
|
||||
font-size:12.5px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-guide .rw-guide-lbl {
|
||||
display:block;
|
||||
font-size:11px;
|
||||
font-weight:600;
|
||||
letter-spacing:.5px;
|
||||
text-transform:uppercase;
|
||||
color:var(--rw-muted);
|
||||
margin:16px 2px 8px;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-guide textarea {
|
||||
width:100%;
|
||||
padding:14px 16px;
|
||||
border:1.5px solid var(--rw-border);
|
||||
border-radius:14px;
|
||||
font-family:inherit;
|
||||
font-size:14.5px;
|
||||
line-height:1.6;
|
||||
color:var(--rw-text);
|
||||
resize:vertical;
|
||||
min-height:140px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.rev-wiz .rw-guide textarea:focus {
|
||||
outline:none;
|
||||
border-color:var(--rw-accent);
|
||||
box-shadow:0 0 0 3px rgba(0,184,147,.08);
|
||||
}
|
||||
|
||||
.rev-wiz .rw-guide textarea::placeholder {
|
||||
color:var(--rw-faint);
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
/* ── Review screen ───────────────────────────────────────────────── */
|
||||
|
||||
.rev-review {
|
||||
font-family:'Hanken Grotesk',sans-serif;
|
||||
color:var(--rw-text);
|
||||
}
|
||||
|
||||
.rev-review .rr-hd {
|
||||
padding:26px 30px 6px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.rev-review .rr-hd .ey {
|
||||
font-size:11px;
|
||||
font-weight:600;
|
||||
letter-spacing:1.4px;
|
||||
text-transform:uppercase;
|
||||
color:var(--rw-accent);
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
.rev-review .rr-hd h1 {
|
||||
font-size:21px;
|
||||
font-weight:600;
|
||||
letter-spacing:-.3px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.rev-review .rr-hd p {
|
||||
font-size:13.5px;
|
||||
color:var(--rw-muted);
|
||||
margin-top:7px;
|
||||
max-width:470px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.rev-review .rr-body {
|
||||
padding:14px 30px 6px;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage {
|
||||
border:1px solid var(--rw-border-soft);
|
||||
border-radius:14px;
|
||||
margin-bottom:9px;
|
||||
background:var(--rw-panel);
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage.is-empty {
|
||||
background:#fafbfc;
|
||||
border-color:#f4f6f7;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage summary {
|
||||
padding:13px 16px;
|
||||
cursor:pointer;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:14px;
|
||||
list-style:none;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage summary::-webkit-details-marker {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage summary:hover {
|
||||
background:#fbfdfc;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage .rr-icon {
|
||||
width:28px;
|
||||
height:28px;
|
||||
border-radius:8px;
|
||||
background:#f3f5f6;
|
||||
color:var(--rw-text-2);
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:13px;
|
||||
flex:none;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage[data-count="0"] .rr-icon {
|
||||
background:#f7f9f9;
|
||||
color:var(--rw-faint);
|
||||
}
|
||||
|
||||
.rev-review .rr-stage .rr-title {
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
color:var(--rw-text);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage .rr-count {
|
||||
font-size:12px;
|
||||
font-weight:500;
|
||||
color:var(--rw-text-2);
|
||||
background:var(--rw-border-soft);
|
||||
border-radius:20px;
|
||||
padding:3px 10px;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage[data-count="0"] .rr-count {
|
||||
background:#f7f9f9;
|
||||
color:var(--rw-faint);
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage .rr-badge {
|
||||
font-size:10px;
|
||||
font-weight:600;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:.5px;
|
||||
padding:2px 8px;
|
||||
border-radius:20px;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage .rr-badge.seeded {
|
||||
background:#e7f5ee;
|
||||
color:#1a7d52;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage .rr-badge.authored {
|
||||
background:#fdf2e6;
|
||||
color:#9A6A11;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage .rr-badge.mixed {
|
||||
background:#eef2f8;
|
||||
color:#3F5D80;
|
||||
}
|
||||
|
||||
.rev-review .rr-details .rr-source {
|
||||
color:var(--rw-faint);
|
||||
font-size:11px;
|
||||
font-weight:500;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:.4px;
|
||||
margin-left:6px;
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage summary .arr {
|
||||
margin-left:8px;
|
||||
color:var(--rw-faint);
|
||||
font-size:12px;
|
||||
transition:transform .15s;
|
||||
}
|
||||
|
||||
.rev-review .rr-stage[open] summary .arr {
|
||||
transform:rotate(90deg);
|
||||
}
|
||||
|
||||
.rev-review .rr-details {
|
||||
padding:2px 16px 14px 60px;
|
||||
}
|
||||
|
||||
.rev-review .rr-details ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
font-size:13px;
|
||||
color:var(--rw-text);
|
||||
line-height:1.65;
|
||||
}
|
||||
|
||||
.rev-review .rr-details li {
|
||||
padding:2px 0;
|
||||
}
|
||||
|
||||
.rev-review .rr-details li::before {
|
||||
content:"·";
|
||||
color:var(--rw-faint);
|
||||
margin-right:8px;
|
||||
}
|
||||
|
||||
.rev-review .rr-details .empty {
|
||||
font-style:italic;
|
||||
color:var(--rw-muted);
|
||||
font-size:12.5px;
|
||||
}
|
||||
|
||||
.rev-review .rr-details .impact-text {
|
||||
background:#fdf9f2;
|
||||
border-left:2px solid #d4a44c;
|
||||
padding:10px 12px;
|
||||
border-radius:8px;
|
||||
font-size:14px;
|
||||
color:var(--rw-text);
|
||||
line-height:1.55;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.rev-review .rr-emptyall {
|
||||
background:#fdf6e3;
|
||||
border:1px solid #f2e5b5;
|
||||
color:#5a4a10;
|
||||
padding:14px 18px;
|
||||
border-radius:12px;
|
||||
font-size:13px;
|
||||
margin:14px 0;
|
||||
}
|
||||
|
||||
.rev-review .rr-foot {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
padding:18px 30px 22px;
|
||||
border-top:1px solid var(--rw-border-soft);
|
||||
margin-top:14px;
|
||||
}
|
||||
|
||||
.rev-review .rr-note {
|
||||
font-size:12.5px;
|
||||
color:var(--rw-muted);
|
||||
line-height:1.5;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.rev-review .rr-note b {
|
||||
color:var(--rw-text);
|
||||
}
|
||||
|
||||
.rev-review .rr-btn {
|
||||
font-family:inherit;
|
||||
font-size:13px;
|
||||
font-weight:500;
|
||||
border-radius:22px;
|
||||
padding:10px 17px;
|
||||
cursor:pointer;
|
||||
border:1px solid var(--rw-border);
|
||||
background:var(--rw-panel);
|
||||
color:var(--rw-text-2);
|
||||
text-decoration:none;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
}
|
||||
|
||||
.rev-review .rr-btn-primary {
|
||||
background:var(--rw-primary);
|
||||
color:#fff;
|
||||
border-color:var(--rw-primary);
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.rev-review .rr-btn-primary[disabled] {
|
||||
opacity:.5;
|
||||
cursor:not-allowed;
|
||||
}
|
||||
|
||||
/* ── Source/altitude chip (colors are computed per program inline) ── */
|
||||
|
||||
.sp-source-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
border-radius: 20px;
|
||||
padding: 2px 9px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.sp-source-chip i {
|
||||
font-size: 9px;
|
||||
opacity: .85;
|
||||
}
|
||||
261
public/assets/css/components/sortableList.css
Normal file
261
public/assets/css/components/sortableList.css
Normal file
@@ -0,0 +1,261 @@
|
||||
/* Sortable list styles */
|
||||
.sortable-list {
|
||||
border: 0px solid transparent;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
.sortable-item {
|
||||
cursor: grab;
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sortable-item .sortable-list {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.sortable-list .sortable-item:last-child {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sortable-list .sortable-item .sortable-list {
|
||||
margin-left: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sortable-list .sortable-item .sortable-list:has(.sortable-list) {
|
||||
padding-bottom:0px;
|
||||
}
|
||||
|
||||
.sortable-list .sortable-item .sortable-list .sortable-item:first-child {
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
.sortable-item .ticketBox {
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
/* Connection lines for hierarchy */
|
||||
.sortable-list .sortable-list::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 0px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background-color: var(--interactive-icon-color);
|
||||
height: calc(100% - 45px);
|
||||
}
|
||||
|
||||
.sortable-item:has(.accordion-toggle .fa-angle-right) {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.sortable-list .sortable-list .sortable-list::before {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
/* Horizontal connector line from vertical line to each item */
|
||||
.sortable-list .sortable-list > .sortable-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 30px;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background-color: var(--interactive-icon-color);
|
||||
}
|
||||
|
||||
/* Rounded corner for the connection */
|
||||
.sortable-list .sortable-list > .sortable-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 32px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border: 0 solid transparent;
|
||||
border-bottom: 2px solid var(--interactive-icon-color);
|
||||
border-left: 2px solid var(--interactive-icon-color);
|
||||
background-color: transparent;
|
||||
transform: translate(0, -10px);
|
||||
}
|
||||
|
||||
|
||||
/* Highlight styles for drop targets */
|
||||
.highlight-drop {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: hsla(var(--accent2-hsl), 0.1);
|
||||
border: 2px dashed hsla(var(--accent2-hsl), 0.3);
|
||||
pointer-events: none;
|
||||
border-radius: var(--box-radius-small);
|
||||
}
|
||||
min-height: 62px !important;
|
||||
}
|
||||
|
||||
.highlight-drop-error {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: hsla(0, 100%, 50%, 0.1);
|
||||
border: 2px dashed hsla(0, 100%, 50%, 0.3);
|
||||
pointer-events: none;
|
||||
border-radius: var(--box-radius-small);
|
||||
}
|
||||
min-height: 62px !important;
|
||||
}
|
||||
|
||||
.sortable-ghost {
|
||||
opacity: var(--opacity-subdued);
|
||||
box-shadow: 0 0 8px hsla(var(--accent2-hsl), 0.3);
|
||||
}
|
||||
|
||||
.sortable-ghost .sortable-list:empty {
|
||||
background: transparent;
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sortable-item.sortable-chosen {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.ui-sortable-helper {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
/* Placeholder styling */
|
||||
.sortable-placeholder {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px dashed rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--box-radius-small);
|
||||
margin-bottom: 4px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Task collapse toggle styles */
|
||||
|
||||
.task-collapse-toggle {
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
top: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
z-index: var(--zlayer-4);
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
|
||||
.milestone-box .task-collapse-toggle {
|
||||
top:24px;
|
||||
}
|
||||
|
||||
.sortable-list .sortable-list .task-collapse-toggle {
|
||||
left: -32px;
|
||||
top: 18px;
|
||||
|
||||
}
|
||||
|
||||
.task-collapse-toggle:hover {
|
||||
background-color: var(--neutral);
|
||||
}
|
||||
|
||||
.task-collapse-toggle i {
|
||||
}
|
||||
|
||||
.ticketBox.has-children {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Collapsed children styles */
|
||||
.task-children.closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.task-children.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.task-collapse-toggle i.fa-chevron-right {
|
||||
color: var(--neutral);
|
||||
}
|
||||
|
||||
/* Quick Add Form Styles */
|
||||
.add-task-button {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
.add-task-button:hover {
|
||||
opacity: 1;
|
||||
color: var(--accent1);
|
||||
}
|
||||
|
||||
.quickAddForm {
|
||||
background: var(--secondary-background);
|
||||
border-radius: var(--box-radius);
|
||||
padding: 16px;
|
||||
margin-top: 10px;
|
||||
box-shadow: var(--regular-shadow);
|
||||
}
|
||||
|
||||
.main-title-input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: var(--element-radius);
|
||||
border: 1px solid var(--main-border-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Milestone box styling for My Work dashboard */
|
||||
.milestone-box {
|
||||
background-color: var(--secondary-background);
|
||||
border-left: 0px;
|
||||
border-right:0px;
|
||||
border-radius: var(--box-radius);
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: var(--regular-shadow);
|
||||
}
|
||||
|
||||
.milestone-box .tw-flex {
|
||||
/*color: var(--main-titles-color);*/
|
||||
}
|
||||
|
||||
.milestone-box .progress-wrapper .percent-label {
|
||||
font-size: var(--base-font-size);
|
||||
/*color: var(--main-titles-color);*/
|
||||
}
|
||||
|
||||
.milestone-box h4 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--primary-font-color);
|
||||
margin-top: 0;
|
||||
}
|
||||
630
public/assets/css/components/structure.css
Normal file
630
public/assets/css/components/structure.css
Normal file
@@ -0,0 +1,630 @@
|
||||
/***** RESET BROWSER STYLE *****/
|
||||
/*******************************/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-ms-overflow-style: scrollbar
|
||||
}
|
||||
|
||||
body {
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
-webkit-box-sizing: inherit;
|
||||
box-sizing: inherit
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px
|
||||
}
|
||||
|
||||
.row {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -5px;
|
||||
margin-left: -5px
|
||||
}
|
||||
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.no-gutters > .col, .no-gutters > [class*=col-] {
|
||||
padding-right: 0;
|
||||
padding-left: 0
|
||||
}
|
||||
|
||||
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 200px;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.col-auto {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: auto
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 8.555555%;
|
||||
-ms-flex: 0 0 8.555555%;
|
||||
flex: 0 0 8.555555%;
|
||||
max-width: 8.555555%
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 16.666667%;
|
||||
-ms-flex: 0 0 16.666667%;
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 25%;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 33.555555%;
|
||||
-ms-flex: 0 0 33.555555%;
|
||||
flex: 0 0 33.555555%;
|
||||
max-width: 33.555555%
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 41.666667%;
|
||||
-ms-flex: 0 0 41.666667%;
|
||||
flex: 0 0 41.666667%;
|
||||
max-width: 41.666667%
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 50%;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 58.555555%;
|
||||
-ms-flex: 0 0 58.555555%;
|
||||
flex: 0 0 58.555555%;
|
||||
max-width: 58.555555%
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 66.666667%;
|
||||
-ms-flex: 0 0 66.666667%;
|
||||
flex: 0 0 66.666667%;
|
||||
max-width: 66.666667%
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 75%;
|
||||
-ms-flex: 0 0 75%;
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 83.555555%;
|
||||
-ms-flex: 0 0 83.555555%;
|
||||
flex: 0 0 83.555555%;
|
||||
max-width: 83.555555%
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 91.666667%;
|
||||
-ms-flex: 0 0 91.666667%;
|
||||
flex: 0 0 91.666667%;
|
||||
max-width: 91.666667%
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 100%;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.pull-0 {
|
||||
right: auto
|
||||
}
|
||||
|
||||
.pull-1 {
|
||||
right: 8.555555%
|
||||
}
|
||||
|
||||
.pull-2 {
|
||||
right: 16.666667%
|
||||
}
|
||||
|
||||
.pull-3 {
|
||||
right: 25%
|
||||
}
|
||||
|
||||
.pull-4 {
|
||||
right: 33.555555%
|
||||
}
|
||||
|
||||
.pull-5 {
|
||||
right: 41.666667%
|
||||
}
|
||||
|
||||
.pull-6 {
|
||||
right: 50%
|
||||
}
|
||||
|
||||
.pull-7 {
|
||||
right: 58.555555%
|
||||
}
|
||||
|
||||
.pull-8 {
|
||||
right: 66.666667%
|
||||
}
|
||||
|
||||
.pull-9 {
|
||||
right: 75%
|
||||
}
|
||||
|
||||
.pull-10 {
|
||||
right: 83.555555%
|
||||
}
|
||||
|
||||
.pull-11 {
|
||||
right: 91.666667%
|
||||
}
|
||||
|
||||
.pull-12 {
|
||||
right: 100%
|
||||
}
|
||||
|
||||
.push-0 {
|
||||
left: auto
|
||||
}
|
||||
|
||||
.push-1 {
|
||||
left: 8.555555%
|
||||
}
|
||||
|
||||
.push-2 {
|
||||
left: 16.666667%
|
||||
}
|
||||
|
||||
.push-3 {
|
||||
left: 25%
|
||||
}
|
||||
|
||||
.push-4 {
|
||||
left: 33.555555%
|
||||
}
|
||||
|
||||
.push-5 {
|
||||
left: 41.666667%
|
||||
}
|
||||
|
||||
.push-6 {
|
||||
left: 50%
|
||||
}
|
||||
|
||||
.push-7 {
|
||||
left: 58.555555%
|
||||
}
|
||||
|
||||
|
||||
.push-8 {
|
||||
left: 66.666667%
|
||||
}
|
||||
|
||||
.push-9 {
|
||||
left: 75%
|
||||
}
|
||||
|
||||
.push-10 {
|
||||
left: 83.555555%
|
||||
}
|
||||
|
||||
.push-11 {
|
||||
left: 91.666667%
|
||||
}
|
||||
|
||||
.push-12 {
|
||||
left: 100%
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
margin-left: 8.555555%
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
margin-left: 16.666667%
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
margin-left: 25%
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
margin-left: 33.555555%
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
margin-left: 41.666667%
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
margin-left: 50%
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
margin-left: 58.555555%
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
margin-left: 66.666667%
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
margin-left: 75%
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
margin-left: 83.555555%
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
margin-left: 91.666667%
|
||||
}
|
||||
|
||||
.mainwrapper {
|
||||
background:var(--header-gradient);
|
||||
background-size: 100vw 100vh;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.rightpanel {
|
||||
background-size: contain;
|
||||
background-position: bottom;
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
.rightpanel:before {
|
||||
|
||||
position: absolute;
|
||||
height: calc(100% + 50px);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: -50px;
|
||||
content: " ";
|
||||
opacity: .5;
|
||||
mix-blend-mode: multiply;
|
||||
background-size:cover;
|
||||
background-image:url(/dist/images/backgrounds/bg5.png);
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
background-attachment: fixed;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.rightpanel.personal:before {
|
||||
|
||||
}
|
||||
|
||||
.rightpanel.project:before {
|
||||
|
||||
}
|
||||
|
||||
.rightpanel.company:before {
|
||||
|
||||
}
|
||||
|
||||
.rightpanel {
|
||||
padding-top:50px;
|
||||
}
|
||||
|
||||
.rightpanel::after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: block;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.overlay::after {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
|
||||
.primaryContent {
|
||||
min-height:calc(100vh - 50px);
|
||||
padding-top:10px;
|
||||
padding-bottom:10px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.leftpanel {
|
||||
width: 240px;
|
||||
color: #fff;
|
||||
float: left;
|
||||
clear: both;
|
||||
background:var(--left-panel-bg);
|
||||
position:sticky;
|
||||
height:calc(100vh - 70px);
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top:70px;
|
||||
margin-top:20px;
|
||||
left:10px;
|
||||
border-radius: var(--box-radius-large);
|
||||
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
clear: both;
|
||||
height: 50px;
|
||||
position: fixed;
|
||||
top:0px;
|
||||
z-index: 15;
|
||||
width: 100%;
|
||||
box-shadow: var(--large-shadow);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
/*background:var(--header-bg-color);*/
|
||||
}
|
||||
|
||||
/* Pageheader is a glass card matching the content card below it, floating on
|
||||
the app's gradient background (which lives on .rightpanel, untouched). The
|
||||
old design used a 150px invisible cushion + a -95px content overlap to make
|
||||
the header float transparently on the gradient; that's replaced by a proper
|
||||
boxed header. Applied globally so every page's header is consistent. */
|
||||
.pageheader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* Allow the right cluster (meta/summary + actions) to wrap below the title
|
||||
on narrow viewports instead of forcing horizontal overflow — mobile.css
|
||||
only adjusts padding/min-height, not the flex behavior. */
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 8px 18px;
|
||||
height: auto;
|
||||
line-height: 1.3;
|
||||
position: relative;
|
||||
/* Above the nav bar (z-index 11) so the breadcrumb + sprint ⋮ dropdowns,
|
||||
which open downward into the nav bar's area, render on top of it. */
|
||||
z-index: 12;
|
||||
/* Match the content card exactly (same bg, NO backdrop blur) so the header
|
||||
and content read as one cohesive surface, not mismatched cards. */
|
||||
background: var(--glass-background);
|
||||
border: var(--glass-border);
|
||||
border-radius: var(--box-radius);
|
||||
box-shadow: var(--large-shadow);
|
||||
/* Horizontal margin matches .maincontent's 15px padding so the header card
|
||||
lines up with the content card below it (was full-width → stuck out
|
||||
wider, which read as a box-inside-a-box). No bottom margin: the gap to the
|
||||
next block comes solely from .maincontent's 10px padding-top, so the
|
||||
vertical rhythm (top-nav→header, header→nav/content) is an even 10px
|
||||
everywhere (was 8px margin + 10px padding = an uneven 18px). */
|
||||
margin: 0 15px 0 15px;
|
||||
}
|
||||
|
||||
.pageheader .pagetitle {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
/* Must be visible, not hidden — the breadcrumb switcher's dropdown menu
|
||||
lives inside here and overflow:hidden would clip it shut. */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Header content must be able to shrink so it never forces the card wider than
|
||||
the viewport (flex children need min-width:0 to shrink below content size). */
|
||||
.pageheader .pagetitle > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Right cluster on the header: secondary metadata (board stats, "updated …")
|
||||
plus optional actions (the sprint ⋮ menu), on ONE line with the title — so
|
||||
the header stays compact instead of adding a sub-line row. Shared by Tasks +
|
||||
the report header. */
|
||||
.pageheader-right {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.pageheader-meta {
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--primary-font-color);
|
||||
/* .75 (was .6): review feedback — the meta text was hard to read. */
|
||||
opacity: .75;
|
||||
}
|
||||
/* Muted crumb separator — the "/" between orientation segments in a page
|
||||
title ("Resources / Plan", "Docs / Default"), matching the report header.
|
||||
Opacity (not --secondary-font-color, which is #000 in the default theme)
|
||||
so it reads as muted on every theme. */
|
||||
.pagetitle h1 .crumb-sep,
|
||||
.subjectSwitcher-sep {
|
||||
color: var(--primary-font-color);
|
||||
opacity: .45;
|
||||
}
|
||||
/* Sprint edit/delete ⋮ menu — a subtle icon button inline in the right cluster
|
||||
(only rendered for a real sprint view). */
|
||||
.pageheader-right .headerEditDropdown {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.pageheader-right .headerEditDropdown > .btn-transparent {
|
||||
color: var(--primary-font-color);
|
||||
opacity: .5;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 4px 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.pageheader-right .headerEditDropdown > .btn-transparent:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.maincontent {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
margin-top: 0;
|
||||
position:relative;
|
||||
z-index:5;
|
||||
}
|
||||
|
||||
.maincontentinner {
|
||||
border-radius:var(--box-radius);
|
||||
background:var(--glass-background);
|
||||
position:relative;
|
||||
padding:14px; /* account for 1px border */
|
||||
margin-bottom:10px;
|
||||
box-shadow: var(--large-shadow);
|
||||
|
||||
border: var(--glass-border);
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-radius:var(--box-radius);
|
||||
background: var(--glass-background);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
position:relative;
|
||||
|
||||
margin-bottom:20px;
|
||||
box-shadow: var(--large-shadow);
|
||||
|
||||
border: var(--glass-border);
|
||||
|
||||
font-size: var(--font-size-s);
|
||||
|
||||
color: var(--primary-font-color);
|
||||
padding:10px 20px;
|
||||
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
margin: 10px 15px;
|
||||
margin-bottom:40px;
|
||||
}
|
||||
|
||||
.footer .footer-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.footer .footer-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.announcementBanner{
|
||||
background:linear-gradient(170deg, var(--accent1) 20%,var(--accent2) 90%);
|
||||
height:40px;
|
||||
width:100%;
|
||||
text-align:center;
|
||||
line-height:40px;
|
||||
color:var(--main-action-color);
|
||||
position: fixed;
|
||||
bottom:0px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.announcementBanner:before {
|
||||
|
||||
}
|
||||
|
||||
/* ── Document-page mode ──────────────────────────────────────────────
|
||||
body.lt-doc-page: for pages whose content card renders its OWN doc-shell
|
||||
header (the stakeholder reports' .rd-hdr — see report-deck.css). The shared
|
||||
teal pageheader collapses (kept in the DOM so its lifecycle hooks still
|
||||
fire) and the content shell goes flush/transparent so the document card IS
|
||||
the page. ONE implementation for every doc-shell page — never re-create
|
||||
this per page in a template. Specificity (body + class) outranks the plain
|
||||
.pageheader/.maincontentinner base rules, so no !important is needed.
|
||||
(RA's body.ra-page-active predates this mode and should converge onto it
|
||||
in the tab-component rollout follow-ups.) */
|
||||
body.lt-doc-page .pageheader {
|
||||
display: none;
|
||||
}
|
||||
body.lt-doc-page .maincontent {
|
||||
margin-top: 0;
|
||||
padding-top: 14px;
|
||||
}
|
||||
body.lt-doc-page .maincontentinner {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
3094
public/assets/css/components/style.default.css
Normal file
3094
public/assets/css/components/style.default.css
Normal file
File diff suppressed because it is too large
Load Diff
307
public/assets/css/components/tab-group.css
Normal file
307
public/assets/css/components/tab-group.css
Normal file
@@ -0,0 +1,307 @@
|
||||
/*
|
||||
* Shared tab-group (x-global::navigation.tabs) — the ONE tablist skin.
|
||||
*
|
||||
* Consolidates the four hand-rolled copies of the same visual (board tabs in
|
||||
* nav.css, report deck .rd-tabs, goal-dialog .gv-tabs, Resource Allocation
|
||||
* .ra-tabs) into a single component stylesheet. Two variants:
|
||||
*
|
||||
* .lt-tabs--attached gradient accent band + translucent framed segment
|
||||
* group + white active pill (board/report look). Uses
|
||||
* the theme accents with the conditional --nav-scrim
|
||||
* (0 for dark accents; raised per-theme where white
|
||||
* controls would fail WCAG AA on light accents).
|
||||
* .lt-tabs--floating free-floating fully-rounded glass pills (Resource
|
||||
* Allocation look); .lt-tabs--dark for dark headers.
|
||||
*
|
||||
* Behavior (ARIA, keyboard, persistence) lives in the component's script.
|
||||
*/
|
||||
|
||||
/* ── Shared structure ─────────────────────────────────────────────── */
|
||||
.lt-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.lt-tabs-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.lt-tabs-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.lt-tab {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
transition: all .14s ease;
|
||||
letter-spacing: .1px;
|
||||
}
|
||||
.lt-tab i {
|
||||
font-size: 12px;
|
||||
opacity: .9;
|
||||
}
|
||||
.lt-tab:hover:not(.on) {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
.lt-tab:focus-visible {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.lt-tab.on {
|
||||
color: var(--primary-font-color);
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.lt-tab.on i {
|
||||
color: var(--accent1);
|
||||
opacity: 1;
|
||||
}
|
||||
.lt-tab.on:focus-visible {
|
||||
outline: 2px solid var(--accent1);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Count badge */
|
||||
.lt-tab .ct {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
border-radius: 100px;
|
||||
padding: 1px 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.lt-tab.on .ct {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
color: var(--accent1);
|
||||
}
|
||||
|
||||
/* ── Attached variant: gradient band (board/report family) ────────── */
|
||||
.lt-tabs--attached {
|
||||
padding: 7px 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 14px;
|
||||
background:
|
||||
linear-gradient(rgba(0, 0, 0, var(--nav-scrim, 0)), rgba(0, 0, 0, var(--nav-scrim, 0))),
|
||||
linear-gradient(90deg, var(--accent1), var(--accent2));
|
||||
/* Flat, no shadow — the bar must read as one system with the content
|
||||
below it, not a separate floating element (Marcel, nav redesign). */
|
||||
box-shadow: none;
|
||||
}
|
||||
.lt-tabs--attached .lt-tabs-group {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 11px;
|
||||
padding: 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
.lt-tabs--attached .lt-tab {
|
||||
padding: 7px 14px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
/* Action-less pages hug the band to its tabs (compact nav, not an empty bar). */
|
||||
.lt-tabs--attached:not(:has(.lt-tabs-actions)) {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* ── Floating variant: glass pills (Resource Allocation family) — THE
|
||||
standard look for horizontal tab navs (design call 2026-08-03). The
|
||||
glass container lives on the GROUP so page-level actions (period
|
||||
pickers, New/Filter/Group By) sit inline on the same row, borderless,
|
||||
on the page background. ─────────────────────────────────────────── */
|
||||
.lt-tabs--floating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 8px;
|
||||
position: relative;
|
||||
}
|
||||
.lt-tabs--floating .lt-tabs-group {
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 100px;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
.lt-tabs--floating .lt-tab {
|
||||
padding: 8px 16px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.lt-tabs--floating .lt-tab.on,
|
||||
.lt-tabs--floating .lt-tab.is-active {
|
||||
box-shadow: 0 2px 6px rgba(20, 40, 50, .12);
|
||||
}
|
||||
|
||||
/* Link flavor — server-side-active nav tabs (board/timeline views): same
|
||||
pills, <ul><li class="active"><a> structure. */
|
||||
.lt-tabs--links .lt-tabs-group ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
.lt-tabs--links .lt-tabs-group li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.lt-tabs--links .lt-tabs-group li a {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
transition: all .14s ease;
|
||||
letter-spacing: .1px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.lt-tabs--links .lt-tabs-group li:not(.active) a:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
.lt-tabs--links .lt-tabs-group li a:focus-visible {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.lt-tabs--links .lt-tabs-group li.active a {
|
||||
color: var(--primary-font-color);
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px rgba(20, 40, 50, .12);
|
||||
}
|
||||
.lt-tabs--links .lt-tabs-group li.active a:focus-visible {
|
||||
outline: 2px solid var(--accent1);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Light-surface flavor — floating pills inside white cards/modals (goal
|
||||
dialog): same shape, ink adapted so the glass doesn't vanish on white. */
|
||||
.lt-tabs--onlight .lt-tabs-group {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
.lt-tabs--onlight .lt-tab {
|
||||
color: var(--primary-font-color);
|
||||
opacity: .75;
|
||||
}
|
||||
.lt-tabs--onlight .lt-tab:hover:not(.on):not(.is-active) {
|
||||
color: var(--primary-font-color);
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.lt-tabs--onlight .lt-tab.on,
|
||||
.lt-tabs--onlight .lt-tab.is-active {
|
||||
color: var(--accent1);
|
||||
opacity: 1;
|
||||
background: #fff;
|
||||
}
|
||||
.lt-tabs--onlight .lt-tab:focus-visible {
|
||||
outline-color: var(--accent1);
|
||||
}
|
||||
|
||||
/* Inline actions (right cluster) — borderless on the page background.
|
||||
Ported from the retired band (.maincontentinner.tabs .tabs-actions). */
|
||||
.lt-tabs-actions .btn {
|
||||
line-height: 1.2;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.lt-tabs-actions .btn .badge {
|
||||
line-height: 1;
|
||||
padding: 3px 6px;
|
||||
font-size: 10px;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
/* Filter / Group By match the report period-picker: white pill, dark text
|
||||
(design call 2026-08-03 — one filter style everywhere). Three classes so
|
||||
this outranks forms.css `body .btn.btn-link` (0-2-1), which otherwise
|
||||
flattens the pill back to transparent text. */
|
||||
.lt-tabs .lt-tabs-actions .btn-link {
|
||||
color: var(--primary-font-color);
|
||||
opacity: 1;
|
||||
background: #fff;
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-radius: 22px;
|
||||
padding: 7px 14px;
|
||||
box-shadow: 0 1px 3px rgba(20, 40, 50, .06);
|
||||
transition: border-color .12s ease;
|
||||
}
|
||||
.lt-tabs .lt-tabs-actions .btn-link:hover {
|
||||
border-color: var(--accent1);
|
||||
background: #fff;
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
.lt-tabs .lt-tabs-actions .btn-link:focus-visible {
|
||||
outline: 2px solid var(--accent1);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.lt-tabs-actions .btn:focus-visible {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.lt-tabs-actions form {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
.lt-tabs-actions .filterWrapper {
|
||||
margin-bottom: 0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* Right-edge actions: panels/menus open LEFTWARD or they fall off screen. */
|
||||
.lt-tabs-actions .filterBar,
|
||||
.lt-tabs-actions .dropdown-menu {
|
||||
left: auto !important;
|
||||
right: 0;
|
||||
}
|
||||
.lt-tabs-actions .btn-group {
|
||||
float: none;
|
||||
margin: 0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Floating on a dark header (server-stamped by the caller) */
|
||||
.lt-tabs--dark {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
.lt-tabs--dark .lt-tab.on {
|
||||
color: #182831;
|
||||
}
|
||||
|
||||
/* ── Print: tabs are navigation, not content ──────────────────────── */
|
||||
@media print {
|
||||
.lt-tabs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
582
public/assets/css/components/tables.css
Normal file
582
public/assets/css/components/tables.css
Normal file
@@ -0,0 +1,582 @@
|
||||
.table thead th.right, .table tr td.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-size-s);
|
||||
border-top: 0;
|
||||
color: var(--kanban-col-title-color);
|
||||
background:var(--col-content-bg);
|
||||
|
||||
}
|
||||
|
||||
.table th.centeralign, .table td.centeralign {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.table.table-bordered th {
|
||||
border-color: var(--neutral);
|
||||
}
|
||||
|
||||
.table .con0 {
|
||||
}
|
||||
|
||||
.table .con1 {
|
||||
}
|
||||
|
||||
.table tr.even {
|
||||
background:var(--col-row-striped);
|
||||
}
|
||||
|
||||
.table-bordered th,
|
||||
.table-bordered td {
|
||||
border-right: 0px solid var(--neutral);
|
||||
border-left:0px;
|
||||
box-shadow: 0px 1px 1px var(--neutral);
|
||||
}
|
||||
|
||||
.table-bordered th:last-child,
|
||||
.table-bordered td:last-child {
|
||||
border-right: 0px solid var(--neutral);
|
||||
}
|
||||
|
||||
|
||||
.dataTable {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dataTable th,
|
||||
.dataTable td {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.simpleAccordionContainer .dataTables_wrapper{
|
||||
padding-bottom:20px
|
||||
}
|
||||
|
||||
.dataTables_length, .dataTables_info {
|
||||
padding: 10px;
|
||||
font-size: var(--font-size-s);
|
||||
border: 0px solid var(--neutral);
|
||||
}
|
||||
|
||||
.dataTables_length {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.dataTables_info {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.dataTables_filter {
|
||||
position: absolute;
|
||||
margin-top: -45px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.dataTables_filter input {
|
||||
width: 150px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.dataTables_paginate {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.dataTables_paginate .first, .dataTables_paginate .previous, .dataTables_paginate .paginate_active,
|
||||
.dataTables_paginate .paginate_button, .dataTables_paginate .next, .dataTables_paginate .last {
|
||||
padding: 5px 10px;
|
||||
border: 0px solid var(--neutral);
|
||||
font-size: var(--font-size-s);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dataTables_paginate span:hover {
|
||||
background-color: var(--secondary-action-hover-bg);
|
||||
}
|
||||
|
||||
.dataTables_paginate .first {
|
||||
border-left: 0px solid var(--neutral);
|
||||
}
|
||||
|
||||
.dataTables_paginate .paginate_active,
|
||||
.paginate_button.current {
|
||||
background-color: var(--col-title-bg);
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.dataTables_paginate .paginate_button:hover {
|
||||
background: var(--kanban-col-title-bg);
|
||||
}
|
||||
|
||||
.dataTables_paginate .paginate_button_disabled {
|
||||
cursor: default;
|
||||
color: var(--neutral);
|
||||
background: var(--kanban-col-title-bg);
|
||||
}
|
||||
|
||||
.dataTables_paginate a {
|
||||
color: var(--primary-font-color);
|
||||
font-size:var(--font-size-s);
|
||||
}
|
||||
|
||||
.dataTables_paginate a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dataTables_length select {
|
||||
width: auto !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dataTables_scrollHead {
|
||||
background: var(--primary-font-color);
|
||||
}
|
||||
|
||||
.dataTables_scrollHead table {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.dataTable thead th.sorting,
|
||||
.dataTable thead th.sorting_asc,
|
||||
.dataTable thead th.sorting_desc {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.dataTable thead th.sorting:hover,
|
||||
.dataTable thead th.sorting_asc:hover,
|
||||
.dataTable thead th.sorting_desc:hover {
|
||||
background: var(--dropdown-link-hover-bg);
|
||||
color:var(--dropdown-link-hover-color);
|
||||
|
||||
}
|
||||
|
||||
.dataTable thead th.sorting:after {
|
||||
font-family: FontAwesome;
|
||||
content: "\00a0\00a0\f0dc";
|
||||
font-size:var(--font-size-s);
|
||||
}
|
||||
|
||||
.dataTable thead th.sorting_asc:after {
|
||||
font-family: FontAwesome;
|
||||
content: "\00a0\00a0\f0de";
|
||||
|
||||
}
|
||||
|
||||
.dataTable thead th.sorting_desc:after {
|
||||
font-family: FontAwesome;
|
||||
content: "\00a0\00a0\f0dd";
|
||||
}
|
||||
|
||||
.maincontentinner .table,
|
||||
.maincontentinner table{
|
||||
border:1px solid var(--col-content-bg);
|
||||
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border-top-left-radius:var(--box-radius);
|
||||
border-top-right-radius:var(--box-radius);
|
||||
}
|
||||
|
||||
.maincontentinner .table th,
|
||||
.maincontentinner table th,
|
||||
.maincontentinner table thead td,
|
||||
.maincontentinner .table.table-bordered th,
|
||||
.maincontentinner .table tr.dtrg-group td{
|
||||
font-weight: normal;
|
||||
text-transform:none;
|
||||
font-size: var(--base-font-size);
|
||||
border-top: 0;
|
||||
|
||||
font-weight: normal;
|
||||
text-rendering: optimizelegibility;
|
||||
padding: 7px 10px 5px 10px;
|
||||
|
||||
border:0px;
|
||||
border-right:0px solid var(--neutral);
|
||||
border-color:var(--neutral);
|
||||
line-height: 17px;
|
||||
|
||||
color: var(--kanban-col-title-color);
|
||||
background:var(--secondary-background);
|
||||
}
|
||||
|
||||
.maincontentinner .table th,
|
||||
.maincontentinner table thead td,
|
||||
.maincontentinner .table.table-bordered th,
|
||||
.maincontentinner table th {
|
||||
background:var(--col-title-bg);
|
||||
padding: 10px 10px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.table-bordered colgroup+thead tr:first-child th:first-child {
|
||||
border-top-left-radius:var(--box-radius);
|
||||
}
|
||||
|
||||
.table-bordered colgroup+thead tr:last-child th:last-child {
|
||||
border-top-right-radius:var(--box-radius);
|
||||
}
|
||||
|
||||
.maincontentinner .table th:last-child,
|
||||
.maincontentinner .table.table-bordered th:last-child {
|
||||
border-right:0px;
|
||||
}
|
||||
|
||||
|
||||
.maincontentinner .table th.sorting_desc,
|
||||
.maincontentinner .table th.sorting_asc {
|
||||
}
|
||||
|
||||
|
||||
.maincontentinner .table tr.dtrg-group td {
|
||||
color: var(--kanban-col-title-color);
|
||||
padding: 5px 10px;
|
||||
padding-top:25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.maincontentinner .table {
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
.maincontentinner .table td,
|
||||
.maincontentinner table td{
|
||||
padding:5px 10px 3px 10px;
|
||||
vertical-align: middle;
|
||||
min-height:17px;
|
||||
border-right:1px solid var(--secondary-background);
|
||||
}
|
||||
|
||||
.maincontentinner .listStyleTable td {
|
||||
border-right:0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dataTable tr:hover {
|
||||
box-shadow:var(--regular-shadow);
|
||||
}
|
||||
|
||||
.dataTable tr:hover td {
|
||||
background:var(--col-title-bg);
|
||||
|
||||
}
|
||||
|
||||
.maincontentinner .table td .small-input {
|
||||
width:40px;
|
||||
}
|
||||
|
||||
.maincontentinner .dataTables_wrapper .bottom {
|
||||
position:relative;
|
||||
border: 0px solid var(--main-border-color);
|
||||
border-top:0px;
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.maincontentinner .dataTables_wrapper .dataTables_info {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:10px;
|
||||
border:0px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.maincontentinner .dataTables_wrapper .dataTables_length{
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:10px;
|
||||
margin-left:-65px;
|
||||
border:0px;
|
||||
padding:5px;
|
||||
font-size:var(--font-size-s);
|
||||
}
|
||||
|
||||
.maincontentinner .dataTables_wrapper .dataTables_length label,
|
||||
.maincontentinner .dataTables_wrapper .dataTables_length select {
|
||||
font-size:var(--font-size-s);
|
||||
}
|
||||
|
||||
.maincontentinner .dataTables_wrapper .dataTables_paginate{
|
||||
position:absolute;
|
||||
right:0px;
|
||||
bottom:10px;
|
||||
border:0px;
|
||||
padding:10px 10px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.maincontentinner .table tr.dt-rowReorder-moving {
|
||||
outline:2px solid var(--neutral);
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons .dt-button-collection {
|
||||
position:absolute;
|
||||
z-index:3;
|
||||
float: left;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
list-style: none;
|
||||
background-color: var(--secondary-background);
|
||||
margin-top: 10px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 0px;
|
||||
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons .dt-button-collection button {
|
||||
display:block;
|
||||
width:100%;
|
||||
margin:0px;
|
||||
background:var(--secondary-background);
|
||||
color: var(--main-menu-link-color);
|
||||
padding: 5px 10px;
|
||||
border:0px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons .dt-button-collection button:before {
|
||||
font-family: "Font Awesome 6 Free";
|
||||
content: "\f204";
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons .dt-button-collection button. dt-button-active{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons .dt-button-collection button.dt-button-active:before {
|
||||
font-family: "Font Awesome 6 Free";
|
||||
content: "\f205";
|
||||
color:var(--accent1);
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons .dt-button-collection button:hover,
|
||||
.maincontentinner .dt-buttons .dt-button-collection button.active:hover{
|
||||
color: var(--dropdown-link-hover-color);
|
||||
background:var(--dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons>.dt-button {
|
||||
display: inline-block;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-color: var(--neutral);
|
||||
border: 1px solid var(--secondary-action-bg);
|
||||
margin: 0 0 9px;
|
||||
padding: 4px 14px;
|
||||
line-height: 21px;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
color: var(--secondary-action-color);
|
||||
background: var(--secondary-action-bg);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons>.dt-button span {
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons>.dt-button:hover {
|
||||
background:var(--secondary-action-hover-bg);
|
||||
color:var(--secondary-action-hover-color);
|
||||
}
|
||||
.maincontentinner .dt-buttons .dt-button-collection button {
|
||||
border-radius:0px;
|
||||
}
|
||||
|
||||
.maincontentinner .dt-buttons .dt-button-collection button:hover {
|
||||
background:var(--main-menu-link-hover-bg);
|
||||
color:var(--main-menu-link-hover-color);
|
||||
}
|
||||
|
||||
|
||||
.timesheetTable td.active,
|
||||
.timesheetTable th.active{
|
||||
background:var(--col-title-bg);
|
||||
}
|
||||
|
||||
.maincontentinner .timesheetTable td input {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
.maincontentinner .timesheetTable tfoot td {
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.maincontentinner .headtitle table,
|
||||
.maincontentinner .headtitle .table th,
|
||||
.maincontentinner .headtitle .table td{
|
||||
border:none;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td,
|
||||
table td{
|
||||
border-top:1px solid var(--col-title-bg);
|
||||
}
|
||||
|
||||
|
||||
.articleBody table thead td{
|
||||
background:var(--neutral);
|
||||
}
|
||||
|
||||
.articleBody table td {
|
||||
border:1px solid var(--neutral);
|
||||
}
|
||||
|
||||
/*fake height to allow divs in tds to fill out space */
|
||||
.table tr {
|
||||
height:1px;
|
||||
}
|
||||
|
||||
.table td.dropdown-cell {
|
||||
padding:0px;
|
||||
font-weight: 400;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.table td.dropdown-cell .dropdown {
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-radius:0px !important;
|
||||
display:block;
|
||||
|
||||
}
|
||||
|
||||
.table td.dropdown-cell .dropdown > a {
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-radius:0px !important;
|
||||
padding: 5px 10px 3px 10px !important;
|
||||
line-height: 32px;
|
||||
font-size:var(--base-font-size);
|
||||
box-shadow:none;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.table td.dropdown-cell .dropdown > a .text {
|
||||
}
|
||||
.table td.dropdown-cell .dropdown > a i {
|
||||
float:right;
|
||||
line-height:31px;
|
||||
}
|
||||
|
||||
.table td.dropdown-cell .dropdown.ticketDropdown ul {
|
||||
top:35px;
|
||||
}
|
||||
|
||||
.listStyleTable td {
|
||||
|
||||
}
|
||||
|
||||
.maincontentinner .table.listStyleTable {
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.maincontentinner .table.listStyleTable td {
|
||||
padding:5px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.maincontentinner .table.listStyleTable td.dropdown-cell {
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
.maincontentinner .table.listStyleTable td.dropdown-cell .dropdown > a {
|
||||
padding:0px 10px 0px 10px !important;
|
||||
|
||||
}
|
||||
|
||||
.maincontentinner .table.listStyleTable .dtrg-group td {
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.maincontentinner .table.listStyleTable tr:hover {
|
||||
box-shadow: none;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.maincontentinner .table.listStyleTable tr.active td {
|
||||
background: var(--col-title-bg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.maincontentinner .table.listStyleTable td.roundStatusBtn .statusDropdown > a {
|
||||
border-radius: 15px;
|
||||
padding: 0px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.maincontentinner .dataTables_wrapper .center .dataTables_paginate {
|
||||
left: auto;
|
||||
right: auto;
|
||||
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.maincontentinner .table.listStyleTable td.roundStatusBtn .f-left {
|
||||
float:none !important;
|
||||
}
|
||||
|
||||
.maincontentinner .table.listStyleTable .dtrg-start:first-child td{
|
||||
padding-top:0px
|
||||
}
|
||||
|
||||
.maincontentinner .table tfoot td,
|
||||
.maincontentinner table tfoot td {
|
||||
font-weight: bold;
|
||||
border-top: 1px solid var(--neutral);
|
||||
/* text-align: center; */
|
||||
/* min-height: 41px; */
|
||||
padding: 8px 5px 8px 20px;
|
||||
}
|
||||
|
||||
.ticketTable .ticketModal {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.dt-button-down-arrow {
|
||||
font-size:0px;
|
||||
}
|
||||
|
||||
.dt-button-down-arrow:before {
|
||||
font-family: "Font Awesome 6 Free";
|
||||
content: "\f0d7";
|
||||
font-size: var(--font-size-m);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
table.fc-multimonth-header-table {
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.dataTable .progress-wrapper {
|
||||
display:none;
|
||||
}
|
||||
|
||||
197
public/assets/css/components/text-styles.css
Normal file
197
public/assets/css/components/text-styles.css
Normal file
@@ -0,0 +1,197 @@
|
||||
/* Base link styles - outline removed for mouse interaction only */
|
||||
a, a:hover, a:link, a:active {
|
||||
outline: none;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Accessible keyboard focus indicator - WCAG 2.1 AA compliant */
|
||||
a:focus {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--element-radius);
|
||||
}
|
||||
|
||||
body a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: 2px;
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
/* Focus styles for interactive elements */
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible,
|
||||
[role="button"]:focus-visible,
|
||||
[tabindex]:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
label, input, textarea, select, button {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-weight: var(--font-weight-body);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
h1 { font-size:var(--font-size-xxl);}
|
||||
h2 { font-size:var(--font-size-xl);}
|
||||
h3 { font-size:var(--font-size-xl); font-weight:var(--font-weight-bold);}
|
||||
h4 { font-size:var(--base-font-size); font-weight:var(--font-weight-bold);}
|
||||
h5 { font-size:var(--base-font-size); font-weight:var(--font-weight-bold);}
|
||||
|
||||
h1 small {
|
||||
font-size: var(--font-size-s);
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
|
||||
.label-default {
|
||||
background: var(--neutral);
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
.label-important, .label-warning,
|
||||
.label-success, .label-info, .label-inverse,
|
||||
.label-default, .label-primary, .label-danger {
|
||||
padding: 2px 8px;
|
||||
color: #fff;
|
||||
margin-left: 4px;
|
||||
border-radius: var(--element-radius);
|
||||
}
|
||||
|
||||
|
||||
.dropdown [class*="label-"]:hover {
|
||||
background: var(--dropdown-link-hover-bg) !important;
|
||||
color:var(--dropdown-link-hover-color) !important;
|
||||
}
|
||||
|
||||
a .label:after,
|
||||
a .label-important:after, a .label-warning:after,
|
||||
a .label-success:after, a .label-info:after, .label-inverse:after,
|
||||
a .label-default:after, a .label-primary:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
border-top: 4px solid #fff;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
content: "";
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
a .label.feature-label {
|
||||
background: var(--element-gradient);
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
position:absolute;
|
||||
top:4px;
|
||||
right:0px;
|
||||
border-radius: var(--element-radius);
|
||||
padding: 1px 4px;
|
||||
color:var(--main-action-color);
|
||||
}
|
||||
|
||||
a .label.feature-label:after {
|
||||
border:none;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
.nav .label.feature-label {
|
||||
}
|
||||
|
||||
.pagetitle {
|
||||
}
|
||||
|
||||
.pagetitle h1 {
|
||||
font-size: var(--font-size-xl);
|
||||
/* Dark text now that the header is a white/glass card (was white on the
|
||||
gradient). --primary-font-color adapts in dark mode. */
|
||||
color: var(--primary-font-color);
|
||||
line-height: 1.2;
|
||||
/* Reset the Bootstrap default h1 margin (0.67em 0); the auto-height header
|
||||
card owns the vertical rhythm via its own padding. */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagetitle h1 a {
|
||||
color: var(--primary-font-color);
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.pagetitle h5 {
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--secondary-font-color);
|
||||
/* Reset the Bootstrap default heading margin so the subtitle sits tight
|
||||
under the title inside the auto-height header card. */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.maincontentinner .subtitle,
|
||||
.stickyHeader .subtitle {
|
||||
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--primary-font-color);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.maincontentinner .subtitle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.grid-stack-item-content .stickyHeader .subtitle {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--base-font-size);
|
||||
color: var(--secondary-font-color);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.subtitle2 {
|
||||
font-size: var(--base-font-size);
|
||||
text-transform: uppercase;
|
||||
color: var(--primary-font-color);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
font-family: 'PT Serif', Georgia, "Times New Roman", Times, serif;
|
||||
font-style: italic;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
blockquote.pull-right {
|
||||
background-position: right 5px;
|
||||
padding: 0 40px 0 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.maincontent > h2 {
|
||||
color:var(--main-action-color);
|
||||
}
|
||||
|
||||
a.danger,
|
||||
a.delete {
|
||||
color:var(--red) !important;
|
||||
}
|
||||
3910
public/assets/css/components/tiptap-editor.css
Normal file
3910
public/assets/css/components/tiptap-editor.css
Normal file
File diff suppressed because it is too large
Load Diff
107
public/assets/css/components/toast-notifications.css
Normal file
107
public/assets/css/components/toast-notifications.css
Normal file
@@ -0,0 +1,107 @@
|
||||
/* Toast Notifications */
|
||||
.toast-notification {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.875rem 1rem;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
background: var(--main-bg);
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-radius: var(--box-radius);
|
||||
box-shadow: var(--large-shadow);
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.toast-notification.toast-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.toast-notification--success {
|
||||
border-left: 4px solid var(--accent1);
|
||||
}
|
||||
|
||||
.toast-notification--error {
|
||||
border-left: 4px solid var(--red);
|
||||
}
|
||||
|
||||
.toast-notification--info {
|
||||
border-left: 4px solid var(--blue);
|
||||
}
|
||||
|
||||
.toast-notification__content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toast-notification__icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--accent1);
|
||||
}
|
||||
|
||||
.toast-notification--error .toast-notification__icon {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.toast-notification--info .toast-notification__icon {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.toast-notification__message {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--primary-font-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toast-notification__dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
color: var(--primary-font-color);
|
||||
cursor: pointer;
|
||||
padding: 0 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
opacity: 0.5;
|
||||
flex-shrink: 0;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-notification__dismiss:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-notification__dismiss:focus-visible {
|
||||
outline: 2px solid var(--accent1);
|
||||
outline-offset: 2px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hide animation */
|
||||
.toast-notification--hiding {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.toast-notification,
|
||||
.toast-notification--hiding {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
77
public/assets/css/components/tourBoxes.css
Normal file
77
public/assets/css/components/tourBoxes.css
Normal file
@@ -0,0 +1,77 @@
|
||||
.shepherd-header,
|
||||
.shepherd-content {
|
||||
background:var(--secondary-background);
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
.shepherd-element,
|
||||
.shepherd-content {
|
||||
border-radius:var(--box-radius);
|
||||
}
|
||||
|
||||
.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before,
|
||||
.shepherd-element.shepherd-has-title[data-popper-placement^=top]>.shepherd-arrow:before,
|
||||
.shepherd-element.shepherd-has-title[data-popper-placement^=left]>.shepherd-arrow:before,
|
||||
.shepherd-element.shepherd-has-title[data-popper-placement^=right]>.shepherd-arrow:before,
|
||||
.shepherd-arrow:before {
|
||||
background:var(--secondary-background);
|
||||
}
|
||||
|
||||
.shepherd-title,
|
||||
.shepherd-text {
|
||||
font-size: var(--font-size-l);
|
||||
line-height: var(--line-height-normal);
|
||||
padding:16px;
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
.shepherd-title {
|
||||
font-size:var(--font-size-l);
|
||||
font-weight:var(--font-weight-bold);
|
||||
color:var(--main-action-color);
|
||||
}
|
||||
|
||||
.shepherd-has-title .shepherd-content .shepherd-header {
|
||||
padding:0px;
|
||||
background:var(--element-gradient);
|
||||
border-top-left-radius: var(--box-radius);
|
||||
border-top-right-radius: var(--box-radius);
|
||||
}
|
||||
|
||||
.shepherd-button {
|
||||
background:var(--main-action-bg);
|
||||
color:var(--main-action-color);
|
||||
border-radius: var(--input-radius);
|
||||
padding: 4px 12px;
|
||||
font-weight:var(--font-weight-bold);
|
||||
line-height:20px;
|
||||
border: 1px solid var(--main-action-bg);
|
||||
}
|
||||
|
||||
.shepherd-button.shepherd-button-secondary {
|
||||
border-radius: var(--input-radius);
|
||||
border:1px solid var(--secondary-action-bg);
|
||||
}
|
||||
|
||||
.shepherd-enabled.shepherd-element {
|
||||
box-shadow:var(--large-shadow);
|
||||
-webkit-filter: drop-shadow(0 0px 15px rgba(0, 0, 0, 0.4));
|
||||
filter: drop-shadow(0 0px 15px rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
|
||||
.shepherd-button:not(:disabled):hover {
|
||||
background:var(--main-action-hover-bg);
|
||||
color:var(--main-action-hover-color);
|
||||
}
|
||||
|
||||
.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
|
||||
color:var(--main-action-color);
|
||||
width:16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
|
||||
background: none;
|
||||
opacity:var(--opacity-subtle);
|
||||
}
|
||||
48
public/assets/css/components/tree-overwrites.css
Normal file
48
public/assets/css/components/tree-overwrites.css
Normal file
@@ -0,0 +1,48 @@
|
||||
|
||||
body .jstree-default .jstree-wholerow-hovered,
|
||||
body .jstree-default .jstree-wholerow-clicked{
|
||||
background:var(--main-menu-overlayed-link-hover-bg);
|
||||
border-radius: var(--box-radius);
|
||||
}
|
||||
|
||||
body .jstree-default .jstree-clicked {
|
||||
color:var(--main-menu-link-hover-color);
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node {
|
||||
line-height:34px;
|
||||
min-height:34px;
|
||||
}
|
||||
|
||||
body .jstree-default .jstree-node a{
|
||||
padding-top:4px;
|
||||
padding-bottom:4px;
|
||||
}
|
||||
|
||||
|
||||
body .jstree-default .jstree-node .jstree-wholerow {
|
||||
height:34px;
|
||||
}
|
||||
|
||||
#article-toc-wrapper {
|
||||
|
||||
}
|
||||
|
||||
body .jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl {
|
||||
background-position: -9px 1px;
|
||||
}
|
||||
|
||||
.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {
|
||||
background-position: -40px 1px;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-icon:empty {
|
||||
width:20px;
|
||||
padding-right:4px;
|
||||
opacity: var(--opacity-muted);
|
||||
}
|
||||
|
||||
.jstree-wholerow-ul {
|
||||
max-width:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
1181
public/assets/css/components/wiki.css
Normal file
1181
public/assets/css/components/wiki.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user