composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-12 23:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°8274 - Move every color style to themes/ to ease color customization, add illustration to export popup

Browse Source
This commit is contained in:
Stephen Abello
2025-04-10 10:30:25 +02:00
parent 4d88ef6ed4
commit 5b1ea20407
55 changed files with 1580 additions and 1406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
datamodels/2.x/itop-portal-base/portal/public/css/bootstrap-theme-combodo.scss vendored
View File

@@ -1,4 +1,3 @@
@import '../../../../../css/common/main.scss';
@import "utils/all";
@import "pages/base";
$ipb-color-blue-100: orange;
@import "themes/all";

2
datamodels/2.x/itop-portal-base/portal/public/css/components/_all.scss
View File

@@ -4,6 +4,6 @@
@import "button";
@import "modal";
@import "form";
@import "illustration";
@import "input";
@import "caselog";
@import "progress-bar";

291
datamodels/2.x/itop-portal-base/portal/public/css/components/_button.scss
View File

@@ -1,298 +1,21 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-button--padding-y: 6px !default;
$ipb-button--padding-x: 9px !default;
$ipb-button-colors: (
'' : (
'primary': (
'': (
$common-color-blue-800,
$common-color-white-100,
$common-color-blue-900
),
':hover': (
$common-color-blue-700,
$common-color-white-100,
$common-color-blue-800
),
':active': (
$common-color-blue-900,
$common-color-white-100,
$common-color-blue-950
),
':disabled': (
$common-color-blue-200,
$common-color-blue-600,
$common-color-blue-300
),
),
'default': (
'': (
$common-color-white-100,
$common-color-grey-800,
$common-color-grey-600
),
':hover': (
$common-color-grey-100,
$common-color-grey-900,
$common-color-grey-700
),
':active': (
$common-color-grey-200,
$common-color-grey-900,
$common-color-grey-700
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
'success': (
'': (
$common-color-success-900,
$common-color-white-100,
$common-color-success-900
),
':hover': (
$common-color-success-800,
$common-color-green-100,
$common-color-success-900
),
':active': (
$common-color-success-950,
$common-color-green-100,
$common-color-success-950
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
'warning': (
'': (
$common-color-warning-700,
$common-color-white-100,
$common-color-warning-900
),
':hover': (
$common-color-warning-600,
$common-color-warning-100,
$common-color-warning-700
),
':active': (
$common-color-warning-800,
$common-color-warning-100,
$common-color-warning-900
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
'danger': (
'': (
$common-color-danger-800,
$common-color-white-100,
$common-color-danger-900
),
':hover': (
$common-color-danger-700,
$common-color-danger-100,
$common-color-danger-800
),
':active': (
$common-color-danger-900,
$common-color-danger-100,
$common-color-danger-950
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
'info': (
'': (
$common-color-information-800,
$common-color-white-100,
$common-color-information-900
),
':hover': (
$common-color-information-700,
$common-color-information-100,
$common-color-information-800
),
':active': (
$common-color-information-900,
$common-color-information-100,
$common-color-information-950
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
),
'alternative' : (
'primary': (
'': (
$common-color-transparent,
$common-color-blue-800,
$common-color-transparent
),
':hover': (
$common-color-blue-100,
$common-color-blue-900,
$common-color-blue-100
),
':active': (
$common-color-blue-200,
$common-color-blue-900,
$common-color-blue-200
),
':disabled': (
$common-color-blue-200,
$common-color-blue-600,
$common-color-blue-300
),
),
'default': (
'': (
$common-color-transparent,
$common-color-grey-800,
$common-color-transparent
),
':hover': (
$common-color-grey-200,
$common-color-grey-900,
$common-color-grey-200
),
':active': (
$common-color-grey-300,
$common-color-grey-900,
$common-color-grey-300
),
':disabled': (
$common-color-transparent,
$common-color-grey-500,
$common-color-transparent
),
),
'success': (
'': (
$common-color-transparent,
$common-color-success-900,
$common-color-transparent
),
':hover': (
$common-color-success-100,
$common-color-success-900,
$common-color-success-100
),
':active': (
$common-color-success-200,
$common-color-success-900,
$common-color-success-200
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
'warning': (
'': (
$common-color-transparent,
$common-color-warning-800,
$common-color-transparent
),
':hover': (
$common-color-warning-100,
$common-color-warning-900,
$common-color-warning-100
),
':active': (
$common-color-warning-200,
$common-color-warning-900,
$common-color-warning-200
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
'danger': (
'': (
$common-color-transparent,
$common-color-danger-800,
$common-color-transparent
),
':hover': (
$common-color-danger-100,
$common-color-danger-800,
$common-color-danger-100
),
':active': (
$common-color-danger-200,
$common-color-danger-800,
$common-color-danger-200
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
'info': (
'': (
$common-color-transparent,
$common-color-information-800,
$common-color-transparent
),
':hover': (
$common-color-information-100,
$common-color-information-800,
$common-color-information-100
),
':active': (
$common-color-information-200,
$common-color-information-800,
$common-color-information-200
),
':disabled': (
$common-color-grey-200,
$common-color-grey-700,
$common-color-grey-300
),
),
),
) !default;
.ipb-button, .btn{
--ibp-button-border-radius-top-left: 4px;
--ibp-button-border-radius-top-right: 4px;
--ibp-button-border-radius-bottom-right: 4px;
--ibp-button-border-radius-bottom-left: 4px;
background-color: $common-color-white-100 !important;
border-radius: var(--ibp-button-border-radius-top-left) var(--ibp-button-border-radius-top-right) var(--ibp-button-border-radius-bottom-right) var(--ibp-button-border-radius-bottom-left);
border: solid 1px $common-color-blue-700;
padding: $ipb-button--padding-y $ipb-button--padding-x;
color: $common-color-blue-800 !important;
cursor: pointer;
@each $sType, $aColors in $ipb-button-colors {
@each $sColor, $sPseudoClasses in $aColors {
@each $sPseudoClass, $sAttributes in $sPseudoClasses {
&.ipb-is-#{$sColor}#{if($sType != '', ".ipb-is-#{$sType}", '')}#{$sPseudoClass}, &.btn-#{$sColor}#{if($sType != '', ".#{$sType}", '')}#{$sPseudoClass} {
background-color: nth($sAttributes, 1) !important;
color: nth($sAttributes, 2) !important;
border-color: nth($sAttributes, 3) !important;
}
}
}
}
@extend %common-font-size-150;
}

231
datamodels/2.x/itop-portal-base/portal/public/css/components/_caselog.scss
View File

@@ -1,27 +1,13 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
$messaging-self-primary-color: $common-color-blue-100 !default;
$messaging-self-secondary-color: $common-color-blue-800 !default;
$messaging-1st-peer-primary-color: $white !default;
$messaging-1st-peer-secondary-color: $common-color-grey-400 !default;
$messaging-2nd-peer-primary-color: $white !default;
$messaging-2nd-peer-secondary-color: $common-color-grey-400 !default;
$messaging-3rd-peer-primary-color: $white !default;
$messaging-3rd-peer-secondary-color: $common-color-grey-300 !default;
$messaging-4th-peer-primary-color: $white !default;
$messaging-4th-peer-secondary-color: $common-color-grey-400 !default;
$messaging-5th-peer-primary-color: $white !default;
$messaging-5th-peer-secondary-color: $common-color-grey-400 !default;
$ipb-caselog-thread--border: 1px solid $common-color-grey-400 !default;
/* SCSS variables (can be overloaded) */
$ipb-caselog-thread--border-top: none !default;
$ipb-caselog-thread--header--padding: 12px !default;
$ipb-caselog-thread--header--background-color: $common-color-white-100 !default;
$ipb-caselog-thread--header--span--color: $common-color-grey-800 !default;
$ipb-caselog-thread--header-toggler--color: inherit !default;
$ipb-caselog-thread--header-toggler--hover--active-focus--color: inherit !default;
$ipb-caselog-thread--header-toggler--not-first-child--margin: 0 0.4em 0 0.2em !default;
@@ -30,33 +16,24 @@ $ipb-caselog-thread--header-info--first-child--margin-left: 0 !default;
$ipb-caselog-thread--header-info--span--span--margin-left: $ipb-caselog-thread--header-info--span--margin-left !default;
$ipb-caselog-thread--content--padding: 12px !default;
$ipb-caselog-thread--content--background-color: $common-color-grey-100 !default;
$ipb-caselog-thread--date--margin-bottom: 10px !default;
$ipb-caselog-thread--date--color: $common-color-grey-800 !default;
$ipb-caselog-thread--block--min-height: 40px !default;
$ipb-caselog-thread--block--margin-bottom: 15px !default;
$ipb-caselog-thread--block--last-child--margin-bottom: 0 !default;
$ipb-caselog-thread--block-medallion--block-entries--border: 1px solid $common-color-grey-200 !default;
$ipb-caselog-thread--block-medallion--width: 40px !default;
$ipb-caselog-thread--block-medallion--height: $ipb-caselog-thread--block-medallion--width !default;
$ipb-caselog-thread--block-medallion--color: $common-color-blue-800 !default;
$ipb-caselog-thread--block-medallion--background-color: $common-color-blue-100 !default;
$ipb-caselog-thread--block-user--margin-left: 54px !default;
$ipb-caselog-thread--block-user--color: $ipb-caselog-thread--block-medallion--color !default;
$ipb-caselog-thread--block-entries--margin-x: 60px !default;
$ipb-caselog-thread--block-entries--border-radius: $common-border-radius-500 !default;
$ipb-caselog-thread--block-entries--background-color: $ipb-caselog-thread--block-medallion--background-color !default;
$ipb-caselog-thread--block-entries--color: $ipb-caselog-thread--block-medallion--color !default;
$ipb-caselog-thread--block-entry--padding-y: 8px !default;
$ipb-caselog-thread--block-entry--padding-x: 10px !default;
$ipb-caselog-thread--block-entry--border-bottom: 1px solid $common-color-grey-200 !default;
$ipb-caselog-thread--block-entry-content--height: 0px !default;
@@ -68,24 +45,10 @@ $ipb-caselog-thread--block-entry-toggler--top: 2px !default;
$ipb-caselog-thread--block-entry-toggler--right: 5px !default;
$ipb-caselog-thread--block-entry-toggler--padding-y: 2px !default;
$ipb-caselog-thread--block-entry-toggler--padding-x: 5px !default;
$ipb-caselog-thread--block-entry-toggler--background-color: $ipb-caselog-thread--block-medallion--background-color !default;
$ipb-caselog-thread--block-me--block-user--margin-right: 54px !default;
$ipb-caselog-thread--block-me--block-entries--margin-left: initial !default;
$ipb-caselog-thread--block-me--block-entries--margin-right: $ipb-caselog-thread--block-entries--margin-x !default;
$ipb-caselog-thread--block-me--block-entry--first--content--border-left-color: transparent !default;
$ipb-caselog-thread--block-me--block-entry--first--content--border-right-color: $ipb-caselog-thread--block-medallion--background-color !default;
$ipb-caselog-thread--block-colors: (
1: ($common-color-white-100, $common-color-grey-700),
2: ($common-color-white-100, $common-color-grey-700),
3: ($common-color-white-100, $common-color-grey-700),
4: ($common-color-white-100, $common-color-grey-700),
5: ($common-color-white-100, $common-color-grey-700)
);
$messaging-block-medallion-size: 40px !default;
$messaging-block-entries-margin-x: 60px !default;
@@ -93,28 +56,22 @@ $messaging-block-entries-margin-x: 60px !default;
.ipb-caselog-thread {
position: relative;
border: $ipb-caselog-thread--border;
border-top: $ipb-caselog-thread--border-top;
}
.ipb-caselog-thread--header{
padding: $ipb-caselog-thread--header--padding;
background-color: $ipb-caselog-thread--header--background-color;
border-bottom: none;
@extend %common-font-size-100;
span{
color: $ipb-caselog-thread--header--span--color;
}
}
.ipb-caselog-thread--header-toggler{
cursor: pointer;
color: $ipb-caselog-thread--header-toggler--color;
text-decoration: none;
&:hover,
&:active,
&:focus{
color: $ipb-caselog-thread--header-toggler--hover--active-focus--color;
text-decoration: none;
}
@@ -142,13 +99,11 @@ $messaging-block-entries-margin-x: 60px !default;
.ipb-caselog-thread--content{
padding: $ipb-caselog-thread--content--padding;
background-color: $ipb-caselog-thread--content--background-color;
}
.ipb-caselog-thread--date{
margin-bottom: $ipb-caselog-thread--date--margin-bottom;
text-align: center;
color: $ipb-caselog-thread--date--color;
@extend %common-font-size-150;
&:first-child{
@@ -165,10 +120,7 @@ $messaging-block-entries-margin-x: 60px !default;
margin-bottom: $ipb-caselog-thread--block--last-child--margin-bottom;
}
}
.ipb-caselog-thread--block-medallion,
.ipb-caselog-thread--block-entries{
border: $ipb-caselog-thread--block-medallion--block-entries--border;
}
.ipb-caselog-thread--block-medallion{
position: absolute;
@@ -177,13 +129,11 @@ $messaging-block-entries-margin-x: 60px !default;
width: $ipb-caselog-thread--block-medallion--width;
height: $ipb-caselog-thread--block-medallion--height;
line-height: $ipb-caselog-thread--block-medallion--height;
color: $ipb-caselog-thread--block-medallion--color; /* .ipb-caselog-thread--block-entries color */
text-align: center;
@extend %common-font-size-250;
background-size: 100%; /* Full size is necessary for images with filled background to fit nicely in the medallion, even if this means that images with a transparent background might appear cropped */
background-position: center center;
background-color: $ipb-caselog-thread--block-medallion--background-color; /* .ipb-caselog-thread--block-entries background-color */
background-repeat: no-repeat;
border-radius: 100%;
}
@@ -191,7 +141,6 @@ $messaging-block-entries-margin-x: 60px !default;
.ipb-caselog-thread--block-user{
display: none;
margin-left: $ipb-caselog-thread--block-user--margin-left;
color: $ipb-caselog-thread--block-user--color; /* .ipb-caselog-thread--block-entries background-color */
@extend %common-font-ral-bol-100;
}
@@ -202,14 +151,11 @@ $messaging-block-entries-margin-x: 60px !default;
margin-left: $ipb-caselog-thread--block-entries--margin-x;
max-width: calc(100% - #{$ipb-caselog-thread--block-entries--margin-x});
border-radius: $ipb-caselog-thread--block-entries--border-radius;
background-color: $ipb-caselog-thread--block-entries--background-color;
color: $ipb-caselog-thread--block-entries--color;
}
.ipb-caselog-thread--block-entry{
position: relative;
padding: $ipb-caselog-thread--block-entry--padding-y $ipb-caselog-thread--block-entry--padding-x;
border-bottom: $ipb-caselog-thread--block-entry--border-bottom;
img{
max-width: 100%;
@@ -264,9 +210,13 @@ $messaging-block-entries-margin-x: 60px !default;
padding: $ipb-caselog-thread--block-entry-toggler--padding-y $ipb-caselog-thread--block-entry-toggler--padding-x;
opacity: 0;
cursor: pointer;
background-color: $ipb-caselog-thread--block-entry-toggler--background-color; /* .ipb-caselog-thread--block-entries background-color */
transition: all 0.2s linear;
}
.ipb-caselog-thread--block-entry:not(.closed):hover{
.ipb-caselog-thread--block-entry-toggler{
opacity: 1;
}
}
.ipb-caselog-thread--block-me{
text-align: right;
@@ -297,166 +247,9 @@ $messaging-block-entries-margin-x: 60px !default;
.ipb-caselog-thread--block-entry-content:before{
left: initial;
right: -15px;
border-right-color: transparent;
border-left-color: $ipb-caselog-thread--block-me--block-entry--first--content--border-right-color; /* .ipb-caselog-thread--block-entries background-color */
}
}
}
}
.ipb-caselog-thread--block-color-1{
.ipb-caselog-thread--block-medallion{
color: $messaging-1st-peer-secondary-color;
background-color: $messaging-1st-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-1st-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-1st-peer-secondary-color;
background-color: $messaging-1st-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-1st-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-1st-peer-primary-color;
border-right-color: $messaging-1st-peer-primary-color;
}
}
}
}
.ipb-caselog-thread--block-color-2{
.ipb-caselog-thread--block-medallion{
color: $messaging-2nd-peer-secondary-color;
background-color: $messaging-2nd-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-2nd-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-2nd-peer-secondary-color;
background-color: $messaging-2nd-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-2nd-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-2nd-peer-primary-color;
border-right-color: $messaging-2nd-peer-primary-color;
}
}
}
}
.ipb-caselog-thread--block-color-3{
.ipb-caselog-thread--block-medallion{
color: $messaging-3rd-peer-secondary-color;
background-color: $messaging-3rd-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-3rd-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-3rd-peer-secondary-color;
background-color: $messaging-3rd-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-3rd-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-3rd-peer-primary-color;
border-right-color: $messaging-3rd-peer-primary-color;
}
}
}
}
.ipb-caselog-thread--block-color-4{
.ipb-caselog-thread--block-medallion{
color: $messaging-4th-peer-secondary-color;
background-color: $messaging-4th-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-4th-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-4th-peer-secondary-color;
background-color: $messaging-4th-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-4th-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-4th-peer-primary-color;
border-right-color: $messaging-4th-peer-primary-color;
}
}
}
}
.ipb-caselog-thread--block-color-5{
.ipb-caselog-thread--block-medallion{
color: $messaging-5th-peer-secondary-color;
background-color: $messaging-5th-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-5th-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-5th-peer-secondary-color;
background-color: $messaging-5th-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-5th-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-5th-peer-primary-color;
border-right-color: $messaging-5th-peer-primary-color;
}
}
}
}
@each $index, $colors in $ipb-caselog-thread--block-colors {
.ipb-caselog-thread--block-color-#{$index} {
.ipb-caselog-thread--block-medallion {
color: nth($colors, 2);
background-color: nth($colors, 1);
}
.ipb-caselog-thread--block-user {
color: nth($colors, 1);
}
.ipb-caselog-thread--block-entries {
color: nth($colors, 2);
background-color: nth($colors, 1);
.ipb-caselog-thread--block-entry {
.ipb-caselog-thread--block-entry-toggler {
background-color: nth($colors, 1);
}
}
.ipb-caselog-thread--block-entry:first-child {
.ipb-caselog-thread--block-entry-content:before {
border-top-color: nth($colors, 1);
border-right-color: nth($colors, 1);
}
}
}
}
}

24
datamodels/2.x/itop-portal-base/portal/public/css/components/_dropdown.scss
View File

@@ -1,16 +1,14 @@
$ipb-dropdown--background-color: $ipb-color-white-100 !default;
$ipb-dropdown--border: 1px solid $ipb-color-grey-300 !default;
$ipb-dropdown--border-radius: $common-border-radius-400 !default;
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ipb-dropdown--li--background-color: $ipb-dropdown--background-color !default;
/* SCSS variables (can be overloaded) */
$ipb-dropdown--border-radius: $common-border-radius-400 !default;
$ipb-dropdown--a--padding-y: $common-spacing-400 !default;
$ipb-dropdown--a--padding-x: $common-spacing-500 !default;
$ipb-dropdown--a--border-radius: $ipb-dropdown--border-radius !default;
$ipb-dropdown--a--color: $ipb-color-grey-900 !default;
$ipb-dropdown--li--hover--background-color: $ipb-color-grey-200 !default;
$ipb-dropdown--li--hover--a--color: $ipb-color-grey-800 !default;
$ipb-dropdown--icon--margin-right: $common-spacing-300 !default;
@@ -18,12 +16,9 @@ ipb-dropdown {
display: none;
position: absolute;
width: max-content;
background: $ipb-dropdown--background-color;
border: $ipb-dropdown--border;
border-radius: $ipb-dropdown--border-radius;
list-style: none;
li {
background-color: $ipb-dropdown--li--background-color;
a {
display: inline-block;
width: 100%;
@@ -31,13 +26,6 @@ ipb-dropdown {
border-radius: $ipb-dropdown--a--border-radius;
cursor: pointer;
text-decoration: none;
color: $ipb-dropdown--a--color;
}
&:hover {
background: $ipb-dropdown--li--hover--background-color;
a {
color: $ipb-dropdown--li--hover--a--color;
}
}
}
}

24
datamodels/2.x/itop-portal-base/portal/public/css/components/_form.scss
View File

@@ -1,36 +1,28 @@
$ipb--fieldset--background-color: $common-color-grey-50 !default;
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb--fieldset--padding-y: 10px !default;
$ipb--fieldset--padding-x: 7px !default;
$ipb--fieldset--border: 1px solid $common-color-grey-200 !default;
$ipb--fieldset--border-radius: $common-border-radius-500 !default;
$ipb--fieldset--legend--padding-y: $common-spacing-0 !default;
$ipb--fieldset--legend--padding-x: 13px !default;
$ipb--fieldset--inside--fieldset--background-color: $common-color-grey-100 !default;
$ipb-field--has-tooltip-or-is-mandatory--vertical-align: top !default;
$ipb-field--has-tooltip-or-is-mandatory--left: $common-spacing-200 !default;
$ipb-field--has-tooltip--content: "\f05a" !default;
$ipb-field--has-tooltip--color: $common-color-grey-700 !default;
$ipb-field--is-mandatory--content: "\f069" !default;
$ipb-field--is-mandatory--color: $common-color-orange-700 !default;
$ipb-field--is-mandatory--font-size: 0.6rem !default;
.form_fields {
fieldset {
background-color: $ipb--fieldset--background-color;
padding: $ipb--fieldset--padding-y $ipb--fieldset--padding-x;
border-radius: $ipb--fieldset--border-radius;
border: $ipb--fieldset--border;
legend {
padding: $ipb--fieldset--legend--padding-y $ipb--fieldset--legend--padding-x;
}
fieldset {
background-color: $ipb--fieldset--inside--fieldset--background-color;
}
}
}
@@ -43,14 +35,10 @@ $ipb-field--is-mandatory--font-size: 0.6rem !default;
}
.form_field_label > .control-label[data-tooltip-instantiated="true"]:after {
content: $ipb-field--has-tooltip--content;
color: $ipb-field--has-tooltip--color;
cursor: pointer;
@extend %common-font-size-50;
}
.form_field .form_mandatory .control-label:after{
content: $ipb-field--is-mandatory--content;
color: $ipb-field--is-mandatory--color;
font-size: $common-font-size-20;
};

6
datamodels/2.x/itop-portal-base/portal/public/css/components/_illustration.scss
View File

@@ -1,6 +0,0 @@
$ipb-svg-illustration--fill: $common-svg-illustration--fill !default;
.ipb-svg-illustration--container > svg *[fill="#6c63ff"]{
fill: $ipb-svg-illustration--fill;
}

22
datamodels/2.x/itop-portal-base/portal/public/css/components/_input.scss
View File

@@ -1,26 +1,26 @@
$ipb-form-control--color: $common-color-grey-800 !default;
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-form-control--border-radius: $common-border-radius-300 !default;
$ipb-form-control--box-shadow: none !default;
$ipb-form-control--input-group-addon--border-top-right-radius: 0 !default;
$ipb-form-control--input-group-addon--border-bottom-right-radius: 0 !default;
$ipb-input-group-addon--border: 1px solid $ipb-color-grey-300 !default;
$ipb-input-group-addon--border-radius: $ipb-form-control--border-radius !default;
$ipb-input-group-addon--background-color: $common-color-grey-100 !default;
$ipb-input-group-addon--color: $common-color-grey-800 !default;
$ipb-input-group-addon--form-control--border-top-left-radius: 0 !default;
$ipb-input-group-addon--form-control--border-bottom-left-radius: 0 !default;
$ipb-form-control--is-focused--border-color: $common-color-primary-700 !default;
$ipb-form-control--is-focused--box-shadow: none !default;
.form-control {
color: $ipb-form-control--color;
border-radius: $ipb-form-control--border-radius;
-webkit-box-shadow: $ipb-form-control--box-shadow;
box-shadow: $ipb-form-control--box-shadow;
&:focus {
border-color: $ipb-form-control--is-focused--border-color;
box-shadow: $ipb-form-control--is-focused--box-shadow;
-webkit-box-shadow: $ipb-form-control--is-focused--box-shadow;
}
@@ -31,14 +31,6 @@ $ipb-form-control--is-focused--box-shadow: none !default;
border-bottom-right-radius: $ipb-form-control--input-group-addon--border-bottom-right-radius;
}
.input-group-addon {
border: $ipb-input-group-addon--border;
border-radius: $ipb-input-group-addon--border-radius;
background-color: $ipb-input-group-addon--background-color;
color: $ipb-input-group-addon--color;
}
.form-control + .input-group-addon {
border-top-left-radius: $ipb-input-group-addon--form-control--border-top-left-radius;
border-bottom-left-radius: $ipb-input-group-addon--form-control--border-bottom-left-radius;

34
datamodels/2.x/itop-portal-base/portal/public/css/components/_modal.scss
View File

@@ -1,32 +1,21 @@
/*
* @copyright Copyright (C) 2010-2024 Combodo SAS
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables */
/* SCSS variables (can be overloaded) */
$ipb-modal--max-height: 90vh !default;
$ipb-modal--max-width: 90vw !default;
$ipb-modal--border-radius: $common-border-radius-500 !default;
$ipb-modal--header--padding: $common-spacing-500 !default;
$ipb-modal--header--background-color: $common-color-white-100 !default;
$ipb-modal--header--color: $common-color-grey-900 !default;
$ipb-modal--header--border-radius: $ipb-modal--border-radius $ipb-modal--border-radius 0 0 !default;
$ipb-modal--header--close--color: $common-color-grey-900 !default;
$ipb-modal--header--close--opacity: 1 !default;
$ipb-modal--header--close--hover--color: $common-color-grey-700 !default;
$ipb-modal--footer-padding: $ipb-modal--header--padding !default;
$ipb-modal--backdrop--opacity: 0.6 !default;
$ipb-modal--backdrop--background-color: $common-color-blue-grey-800 !default;
$ipb-modal--backdrop--backdrop-filter: blur(2px) !default;
$ipb-modal--content--border-radius: $ipb-modal--border-radius !default;
$ipb-modal--content--border: 1px solid $common-color-grey-400 !default;
$ipb-modal--title--color: $ipb-modal--header--color !default;
$ipb-modal--title--to-clipboard--margin: $common-spacing-200 !default;
$ipb-modal--title--span--margin-left: 5px !default;
$ipb-modal--title--span--separator--width: $common-size-100 !default;
@@ -34,7 +23,6 @@ $ipb-modal--title--span--separator--height: $ipb-modal--title--span--separator--
$ipb-modal--title--span--separator--margin-right: $common-spacing-200 !default;
$ipb-modal--title--span--separator--margin-top: calc(-1 * #{$ipb-modal--title--span--separator--height} / 2) !default;
$ipb-modal--title--span--separator--border-radius: $common-border-radius-full !default;
$ipb-modal--title--span--separator--background-color: $common-color-grey-800 !default;
@@ -44,21 +32,11 @@ $ipb-modal--title--span--separator--background-color: $common-color-grey-800 !de
max-height: $ipb-modal--max-height !important;
max-width: $ipb-modal--max-width !important;
border-radius: $ipb-modal--border-radius;
.modal-header {
background-color: $ipb-modal--header--background-color;
color: $ipb-modal--header--color;
}
}
.modal-backdrop.in {
opacity: $ipb-modal--backdrop--opacity;
background-color: $ipb-modal--backdrop--background-color;
backdrop-filter: $ipb-modal--backdrop--backdrop-filter;
}
.modal-content {
border-radius: $ipb-modal--content--border-radius !important;
border: $ipb-modal--content--border;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
@@ -67,13 +45,7 @@ $ipb-modal--title--span--separator--background-color: $common-color-grey-800 !de
padding: $ipb-modal--header--padding;
border-radius:$ipb-modal--header--border-radius !important;
.close {
color: $ipb-modal--header--close--color;
opacity: $ipb-modal--header--close--opacity;
@extend %common-font-size-400;
&:hover {
color: $ipb-modal--header--close--hover--color;
}
}
}
@@ -82,7 +54,6 @@ $ipb-modal--title--span--separator--background-color: $common-color-grey-800 !de
}
.modal-title {
color: $ipb-modal--title--color !important;
display: flex;
align-items: center;
@@ -97,7 +68,6 @@ $ipb-modal--title--span--separator--background-color: $common-color-grey-800 !de
width: $ipb-modal--title--span--separator--width;
height: $ipb-modal--title--span--separator--height;
border-radius: $ipb-modal--title--span--separator--border-radius;
background-color: $ipb-modal--title--span--separator--background-color;
}
}
.url-to-clipboard.url-to-clipboard-icon {

8
datamodels/2.x/itop-portal-base/portal/public/css/components/_panel.scss
View File

@@ -1,8 +1,12 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-panel--border-radius: $common-border-radius-300!default;
.ipb-panel {
border: 1px solid $common-color-grey-400;
border-radius: 0 $common-border-radius-500 $common-border-radius-500 $common-border-radius-500;
box-shadow: none;
-webkit-box-shadow: none;

19
datamodels/2.x/itop-portal-base/portal/public/css/components/_progress-bar.scss Normal file
View File

@@ -0,0 +1,19 @@
$ipb-progress--height: $common-size-350 !default;
$ipb-progress--border-radius: $common-border-radius-500 !default;
$ipb-progress--bar--line-height: $ipb-progress--height !default;
$ipb-progress--bar--border-radius: $ipb-progress--border-radius !default;
.ipb-progress, .progress {
height: $ipb-progress--height;
border-radius: $ipb-progress--border-radius;
}
.ipb-progress--bar, .progress-bar {
background-color: $ipb-color-primary-600;
color: #ffffff;
line-height: $ipb-progress--bar--line-height;
border-radius: $ipb-progress--bar--border-radius;
@extend %common-font-ral-med-150;
}

50
datamodels/2.x/itop-portal-base/portal/public/css/components/_tile.scss
View File

@@ -1,23 +1,29 @@
@import "../../../../../../node_modules/bulma-scss/utilities/mixins";
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
@import "../node_modules/bulma-scss/utilities/mixins";
/* SCSS variables */
$ipb-tile--width: 450px !default;
$ipb-tile--min-width: 150px !default;
$ipb-tile--padding: $common-spacing-500 !default;
$ipb-tile--margin: $common-spacing-400 !default;
$ipb-tile--border-color: $common-color-grey-200 !default;
$ipb-tile--border-width: 1px !default;
$ipb-tile--border-radius: $common-border-radius-500 !default;
$ipb-tile--background-color: $common-color-white-100 !default;
$ipb-tile--decoration--size: 44px !default;
$ipb-tile--decoration--padding: $common-spacing-400 !default;
$ipb-tile--decoration--hover--background: common-adjust-alpha($common-color-blue-700, .1) !default;
$ipb-tile--decoration--background: common-adjust-lightness($ipb-tile--decoration--hover--background, 38%) !default;
$ipb-tile--decoration--icon--color: $common-color-blue-700 !default;
$ipb-tile--decoration--icon--font-size: $common-font-size-250 !default;
$ipb-tile--title--color: $common-base-variable--text-color !default;
$ipb-tile--title--font-size: $common-font-size-400 !default;
$ipb-tile--description--color: $common-base-variable--text-color !default;
$ipb-tile--manage-brick--chart--margin-top: $common-spacing-500 !default;
$ipb-tile--manage-brick--badge--margin-top: $common-font-size-400 !default;
$ipb-tile--manage-brick--badge--count--padding: 0 $common-spacing-300 !default;
$ipb-tile--manage-brick--badge--count--font-size: $common-font-size-300 !default;
$ipb-tile--manage-brick--badge--label--font-size: $common-font-size-100 !default;
$ipb-tile--manage-brick--top-list--margin-top: $common-spacing-500 !default;
.ipb-tile{
position: relative;
@@ -26,8 +32,6 @@ $ipb-tile--description--color: $common-base-variable--text-color !default;
min-width: $ipb-tile--min-width;
margin: $ipb-tile--margin;
padding: $ipb-tile--padding;
background-color: $ipb-tile--background-color;
border: $ipb-tile--border-width solid $ipb-tile--border-color;
border-radius: $ipb-tile--border-radius;
white-space: normal;
flex-grow: 1;
@@ -68,7 +72,6 @@ $ipb-tile--description--color: $common-base-variable--text-color !default;
width: $ipb-tile--decoration--size;
height: $ipb-tile--decoration--size;
padding: $ipb-tile--decoration--padding;
background-color: $ipb-tile--decoration--background;
border-radius: $ipb-tile--border-radius;
text-align: center;
transition: background-color 1s ease;
@@ -81,15 +84,9 @@ $ipb-tile--description--color: $common-base-variable--text-color !default;
}
}
}
.ipb-tile:hover{
.ipb-tile--decoration{
background-color: $ipb-tile--decoration--hover--background;
}
}
.ipb-tile--decoration--icon {
&.icon {
color: $ipb-tile--decoration--icon--color;
font-size: $ipb-tile--decoration--icon--font-size;
}
@@ -102,7 +99,6 @@ $ipb-tile--description--color: $common-base-variable--text-color !default;
.ipb-tile--title{
flex-grow: 1;
color: $ipb-tile--title--color;
font-size: $ipb-tile--title--font-size;
font-weight: bold;
@include ipb-text-overflow-ellipsis;
@@ -126,8 +122,6 @@ $ipb-tile--description--color: $common-base-variable--text-color !default;
/* description */
.ipb-tile--description{
color: $ipb-tile--description--color;
@extend %common-font-ral-nor-150;
}
@@ -144,14 +138,6 @@ $ipb-tile--description--color: $common-base-variable--text-color !default;
/* ManageBrick tile display */
/****************************/
$ipb-tile--manage-brick--chart--margin-top: $common-spacing-500 !default;
$ipb-tile--manage-brick--badge--margin-top: $common-font-size-400 !default;
$ipb-tile--manage-brick--badge--count--padding: 0 $common-spacing-300 !default;
$ipb-tile--manage-brick--badge--count--font-size: $common-font-size-300 !default;
$ipb-tile--manage-brick--badge--label--font-size: $common-font-size-100 !default;
$ipb-tile--manage-brick--badge--hover--item--background: common-adjust-alpha($common-base-variable--text-color, .1) !default;
$ipb-tile--manage-brick--top-list--margin-top: $common-spacing-500 !default;
/* title */
.ipb-tile--manage .ipb-tile--title {
@@ -205,10 +191,6 @@ $ipb-tile--manage-brick--top-list--margin-top: $common-spacing-500 !default;
font-size: $ipb-tile--manage-brick--badge--label--font-size;
}
/* top list */
.ipb-tile--manage-brick--top-list {
}
/***********************/

9
datamodels/2.x/itop-portal-base/portal/public/css/layout/_home.scss
View File

@@ -1,4 +1,7 @@
/* SCSS variables */
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
.ipb-home .ipb-page--main-wrapper:before{
content: '';
@@ -8,8 +11,6 @@
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/backgrounds/dots-left-top.svg");
background-size: 30%;
background-position-y: top;
background-position-x: left;
background-repeat: no-repeat;
@@ -24,8 +25,6 @@
right: 0;
width: 100%;
height: 100%;
background-image: url("../img/backgrounds/dots-right-bottom.svg");
background-size: 30%;
background-position-y: bottom;
background-position-x: right;
background-repeat: no-repeat;

44
datamodels/2.x/itop-portal-base/portal/public/css/layout/_navigation-menu.scss
View File

@@ -1,7 +1,12 @@
@import "../../../../../../node_modules/bulma-scss/utilities/mixins";
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
@import "../node_modules/bulma-scss/utilities/mixins";
$ipb-navigation-menu--flex-column-gap: $common-spacing-300 !default;
$ipb-navigation-menu--background-color: $common-color-blue-grey-900 !default;
$ipb-navigation-menu--nav-vertical--width: 60px !default;
$ipb-navigation-menu--nav-vertical--is-expanded--width: 280px !default;
$ipb-navigation-menu--nav-horizontal--height: 56px !default;
@@ -14,16 +19,11 @@ $ipb-navigation-menu--menu-entry--wrapper--flex-column-gap: $common-spacing-500
$ipb-navigation-menu--menu-entry--size: 44px !default;
$ipb-navigation-menu--menu-entry--border-radius: $common-border-radius-500 !default;
$ipb-navigation-menu--menu-entry--padding: $common-spacing-300 !default;
$ipb-navigation-menu--menu-entry--active--icon--color: $common-color-orange-600 !default;
$ipb-navigation-menu--menu-entry--active--color: $common-color-grey-800 !default;
$ipb-navigation-menu--menu-entry--active--background-color: $common-color-white-100 !default;
$ipb-navigation-menu--menu-entry--icon-size: 28px !default;
$ipb-navigation-menu--menu-entry--font-size: 2rem !default;
$ipb-navigation-menu--separator--width: $common-spacing-400 !default;
$ipb-navigation-menu--menu-entry--more--background-color: #455a6447 !default;
$ipb-navigation-menu--user-part--flex-column-gap: $common-spacing-300 !default;
$ipb-navigation-menu--user-card--flex-column-gap: $common-spacing-300;
$ipb-navigation-menu--user-card--photo--background-color: #585653 !default;
$ipb-navigation-menu--user-card--photo--size: 36px !default;
$dropdown-menu--items-remainder--padding: $common-spacing-300 !default;
$dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !default;
@@ -36,7 +36,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
display: flex;
flex-direction: column;
border-radius: 0 $ipb-navigation-menu--border-radius $ipb-navigation-menu--border-radius 0;
background-color: $ipb-navigation-menu--background-color;
column-gap: $ipb-navigation-menu--flex-column-gap;
// in expanded state
@@ -125,16 +124,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
@include ipb-text-overflow-ellipsis;
@extend %common-font-ral-nor-200;
}
&.active .ipb-navigation-menu--menu-entry {
background-color: $ipb-navigation-menu--menu-entry--active--background-color;
color: $ipb-navigation-menu--menu-entry--active--color;
.ipb-navigation-menu--menu-entry--icon {
color: $ipb-navigation-menu--menu-entry--active--icon--color;
}
}
}
// menu entry
@@ -151,7 +140,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
align-items: center;
column-gap: $ipb-navigation-menu--menu-entry--wrapper--flex-column-gap;
border-radius: $ipb-navigation-menu--menu-entry--border-radius;
color: whitesmoke;
@include ipb-transition(#{"background-color, color"});
// entry icon
@@ -161,13 +149,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
font-size: $ipb-navigation-menu--menu-entry--font-size;
text-align: center;
}
// hover and focus effect
&:hover, &:focus:not(.ipb-not-focusable) {
color: white;
background-color: $common-color-blue-grey-700;
}
}
// drop down items remainder
@@ -178,7 +159,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
// drop down menu items remainder
.ipb-dropdown-menu--items-remainder {
padding: $dropdown-menu--items-remainder--padding;
background-color: $ipb-navigation-menu--background-color;
border-bottom-left-radius: $dropdown-menu--items-remainder--border-radius;
border-bottom-right-radius: $dropdown-menu--items-remainder--border-radius;
-webkit-box-shadow: none;
@@ -195,7 +175,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
display: flex;
align-items: center;
column-gap: $ipb-navigation-menu--user-part--flex-column-gap;
background-color: $common-color-grey-800;
border-radius: 0 0 $ipb-navigation-menu--border-radius 0;
// toggle mobile menu
@@ -213,7 +192,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
align-items: center;
justify-content: center;
@extend %common-font-ral-nor-150;
color: white !important;
text-decoration: none;
overflow-x: hidden;
@@ -226,7 +204,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
background-color: $ipb-navigation-menu--user-card--photo--background-color;
border-radius: 100%;
}
@@ -247,9 +224,7 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
@include ipb-text-overflow-ellipsis;
}
}
}
}
// MOBILE MENU ////////////////////////////////////////////
@@ -267,7 +242,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
top: $ipb-navigation-menu--nav-horizontal--height;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.28);
z-index: 9998;
}
@@ -405,7 +379,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
width: 100%;
max-height: 0;
padding: 0 12px;
background-color: $ipb-navigation-menu--background-color;
z-index: 9999;
@include ipb-transition(max-height, ease, 0.5s);
@@ -463,9 +436,6 @@ $dropdown-menu--items-remainder--border-radius: $common-border-radius-700 !defau
@include ipb-toggle-nav-animated-cross;
}
}
}
}
}

15
datamodels/2.x/itop-portal-base/portal/public/css/layout/_page.scss
View File

@@ -1,13 +1,16 @@
@import "../../../../../../node_modules/bulma-scss/utilities/mixins";
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
@import "../node_modules/bulma-scss/utilities/mixins";
/* SCSS variables */
$ipb-page--main-wrapper--padding: $common-spacing-600 $common-spacing-700 !default;
$ipb-page--main-header--margin-bottom: $common-size-250 !default;
$ipb-page--main-header--information--title--font-size: $common-font-size-450 !default;
$ipb-page--main-header--information--title--color: $common-base-variable--text-color !default;
$ipb-page--main-header--information--subtitle--padding: $common-spacing-200 !default;
$ipb-page--main-header--information--subtitle--font-size: $common-font-size-250 !default;
$ipb-page--main-header--information--subtitle--color: $common-base-variable--text-color !default;
html {
font-size: 12px;
@@ -48,7 +51,6 @@ body{
.ipb-page--main-header--information--title{
font-size: $ipb-page--main-header--information--title--font-size;
font-weight: bold;
color: $ipb-page--main-header--information--title--color;
> span ~ span {
@include ipb-following-dot;
@@ -57,7 +59,6 @@ body{
.ipb-page--main-header--information--subtitle{
font-size: $ipb-page--main-header--information--subtitle--font-size;
color: $ipb-page--main-header--information--subtitle--color;
padding: $ipb-page--main-header--information--subtitle--padding;
max-width: 1400px;
}
@@ -76,7 +77,6 @@ body{
.ipb-copyright {
text-decoration: none !important;
color: $common-color-secondary-800;
}
@include mobile {
@@ -97,6 +97,5 @@ body{
width: 100%;
}
}
}

27
datamodels/2.x/itop-portal-base/portal/public/css/layout/_tabs.scss
View File

@@ -1,14 +1,15 @@
$ipb-tabs--tab--border: solid 1px $common-color-grey-400 !default;
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-tabs--tab--badge--border-radius: $common-border-radius-500 !default;
$ipb-tabs--tab--badge--padding-y: 3px !default;
$ipb-tabs--tab--badge--padding-x: 5px !default;
$ipb-tabs--tab--badge--margin-left: $common-spacing-200 !default;
$ipb-tabs--tab--background-color: $common-color-grey-100 !default;
$ipb-tabs--tab--color: $common-color-grey-900 !default;
$ipb-tabs--tab--active--background-color: $common-color-white-100 !default;
$ipb-tabs--tab--active--badge--background-color: $common-color-grey-200 !default;
$ipb-tabs--tab--active--indicator--background-color: $common-color-primary-600 !default;
$ipb-tabs--tab--active--indicator--width: $common-size-150 !default;
$ipb-tabs--tab--active--indicator--height: $ipb-tabs--tab--active--indicator--width !default;
$ipb-tabs--tab--active--indicator--margin-right: $common-spacing-300 !default;
@@ -18,26 +19,17 @@ $ipb-tabs--tab--active--indicator--border-radius: $common-border-radius-full !de
> a {
display: flex;
align-items: center;
background-color: $ipb-tabs--tab--background-color;
color: $ipb-tabs--tab--color;
@extend %common-font-ral-med-150;
> .badge {
color: $common-color-grey-900;
background-color: transparent;
border-radius: $ipb-tabs--tab--badge--border-radius;
padding: $ipb-tabs--tab--badge--padding-y $ipb-tabs--tab--badge--padding-x;
margin-left: $ipb-tabs--tab--badge--margin-left;
}
border: $ipb-tabs--tab--border;
border-bottom: none;
}
&.active > a {
background-color: $ipb-tabs--tab--active--background-color;
&:before {
content: " ";
display: inline-block;
@@ -45,11 +37,6 @@ $ipb-tabs--tab--active--indicator--border-radius: $common-border-radius-full !de
height: $ipb-tabs--tab--active--indicator--height;
margin-right: $ipb-tabs--tab--active--indicator--margin-right;
border-radius: $ipb-tabs--tab--active--indicator--border-radius;
background-color: $ipb-tabs--tab--active--indicator--background-color;
}
> .badge {
background-color: $ipb-tabs--tab--active--badge--background-color;
}
}
}

15
datamodels/2.x/itop-portal-base/portal/public/css/mixins.scss
View File

@@ -1,6 +1,11 @@
/* SCSS variables */
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-following-dot--size: $common-size-150 !default;
$ipb-following-dot--color: $common-color-orange-600 !default;
$ipb-following-dot--color: $ipb-color-primary-600 !default;
$ipb-following-dot--margin-top: calc(-1 * #{$ipb-following-dot--size} / 2) !default;
$ipb-following-dot--margin-bottom: auto !default;
$ipb-following-dot--margin-x: $common-spacing-300 !default;
@@ -19,7 +24,7 @@ $ipb-following-dot--margin-x: $common-spacing-300 !default;
}
/* SCSS variables */
$ipb-heavy-animated-border--border-color: $common-color-blue-grey-700 !default;
$ipb-heavy-animated-border--border-color: $ipb-color-blue-grey-700 !default;
$ipb-heavy-animated-border--border-width: $common-size-50 !default;
$ipb-heavy-animated-border--border-radius: $common-border-radius-500 !default;
@@ -45,7 +50,7 @@ $ipb-heavy-animated-border--border-radius: $common-border-radius-500 !default;
/* SCSS variables */
$ipb-toggle-nav--color: white !default;
$ipb-toggle-nav--color: $ipb-color-white-100 !default;
@mixin ipb-toggle-nav($color:$ipb-toggle-nav--color) {
@@ -147,7 +152,7 @@ $ipb-toggle-nav--color: white !default;
}
/* SCSS variables */
$ipb-scrollbar--color: $common-color-grey-200 $common-color-blue-grey-800 !default;
$ipb-scrollbar--color: $ipb-color-grey-200 $ipb-color-blue-grey-800 !default;
@mixin ipb-scrollbar($overflowX:hidden, $overflowY:auto, $scrollbarWidth:thin, $scrollbarColor:$ipb-scrollbar--color) {
overflow-x: $overflowX;

8
datamodels/2.x/itop-portal-base/portal/public/css/pages/_base.scss
View File

@@ -1,8 +0,0 @@
/*
* @copyright Copyright (C) 2010-2024 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-body-text-color: $ipb-color-grey-900 !default;
$ipb-body-background-color: $ipb-color-white-200 !default;

110
datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_browse-brick.scss
View File

@@ -1,14 +1,16 @@
@import "../../../../../../../node_modules/bulma-scss/utilities/mixins";
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ipb-browse-brick--mosaic-item--highlight-color: $common-color-blue-800, $common-color-orange-800, $common-color-green-800, $common-color-pink-800, $common-color-cyan-800, $common-color-yellow-800, $common-color-purple-800;
/* SCSS variables (can be overloaded) */
@import "../node_modules/bulma-scss/utilities/mixins";
$ipb-browse-brick-panel--row--margin: $common-spacing-0 !default;
$ipb-browse-brick-panel--brick-content-toolbar--padding: $common-spacing-400 !default;
$ipb-content-mosaic--padding: $common-spacing-0 !default;
$ipb-browse-brick--mosaic-breadcrumb--padding: $common-spacing-200 !default;
$ipb-browse-brick--mosaic-breadcrumb--active--color: $common-color-grey-800 !default;
$ipb-browse-brick--mosaic-breadcrumb--a--color: $common-color-primary-800 !default;
$ipb-browse-brick--mosaic--gap: $common-spacing-300 !default;
$ipb-browse-brick--mosaic--small--grid-template-columns: 1fr !default;
@@ -20,10 +22,7 @@ $ipb-browse-brick--mosaic-group-item--min-height: $common-size-550 !default;
$ipb-browse-brick--mosaic-group-item--height: auto !default;
$ipb-browse-brick--mosaic-group-item--width: 100% !default;
$ipb-browse-brick--mosaic-group-item--margin: $common-spacing-0 !default;
$ipb-browse-brick--mosaic-group-item--color: $common-base-variable--text-color !default;
$ipb-browse-brick--mosaic-group-item--border: 1px solid $common-color-grey-300 !default;
$ipb-browse-brick--mosaic-group-item--border-radius: $common-border-radius-300 !default;
$ipb-browse-brick--mosaic-group-item--background-color: $common-color-white-100 !default;
$ipb-browse-brick--mosaic-group-item--animation--transform-x: -20px !default;
$ipb-browse-brick--mosaic-group-item--actions--top: $common-spacing-500 !default;
@@ -32,49 +31,30 @@ $ipb-browse-brick--mosaic-item--height: 100% !default;
$ipb-browse-brick--mosaic-item--padding: $common-spacing-600 !default;
$ipb-browse-brick--mosaic-item--margin: $common-spacing-0 !default;
$ipb-browse-brick--mosaic-item--border-radius: $ipb-browse-brick--mosaic-group-item--border-radius !default;
$ipb-browse-brick--mosaic-item--background-color: $common-color-white-100 !default;
$ipb-browse-brick--mosaic-item--color: $common-base-variable--text-color !default;
$ipb-browse-brick--mosaic-item--hover--color: inherit !default;
$ipb-browse-brick--mosaic-item--hover--background-color--alpha: 0.05 !default;
$ipb-browse-brick--mosaic-item-description--color: $common-color-grey-800 !default;
$ipb-browse-brick--mosaic-item-image--height: 44px !default;
$ipb-browse-brick--mosaic-item-image--width: 44px !default;
$ipb-browse-brick--mosaic-item-image--border-radius: $common-border-radius-700 !default;
$ipb-browse-brick--mosaic-item-image--padding: $common-spacing-0 !default;
$ipb-browse-brick--mosaic-item-image--margin-bottom: $common-spacing-500 !default;
$ipb-browse-brick--mosaic-item-image--background-color: common-adjust-alpha($common-color-blue-700, .1) !default;
$ipb-browse-brick--mosaic-item-image--background-color--alpha: 0.1 !default;
$ipb-browse-brick--mosaic-item-image--color: $common-color-blue-700 !default;
$ipb-browse-brick--mosaic-item-image--img--height: $common-size-300 !default;
$ipb-browse-brick--mosaic-item-description--margin-top: $common-spacing-300 !default;
$ipb-browse-brick-panel--mosaic--background-color: transparent !default;
$ipb-browse-brick-panel--mosaic--border: none !default;
$ipb-browse-brick-panel--dataTables_wrapper--padding-x: $common-spacing-0 !default;
$ipb-browse-brick-panel--dataTables_wrapper--padding-y: $common-size-200 !default;
$ipb-browse-brick-panel--dataTables_wrapper--row--div--padding-x: $common-size-200 !default;
$ipb-browse-brick-panel--dataTables_wrapper--row--div--padding-y: $common-size-0 !default;
$ipb-browse-brick--tree-item--color: $common-color-grey-900 !default;
$ipb-browse-brick--tree-item--hyperlink--color: $common-hyperlink-color !default;
$ipb-browse-brick--tree-item-filter-data--color: $common-color-grey-800 !default;
$ipb-browse-brick--tree-item-filter-data--margin-top: $common-spacing-300 !default;
$ipb-browse-brick--tree-item-filter-data--item--margin-y: $common-spacing-0 !default;
$ipb-browse-brick--tree-item-filter-data--item--margin-x: $common-spacing-300 !default;
$ipb-browse-brick--tree-item--description--margin-top: $common-spacing-200 !default;
$ipb-browse-brick--tree-item--description--color: $common-color-grey-800 !default;
$ipb-browse-brick--tree-item--wrapper--padding-top: $common-spacing-500 !default;
$ipb-browse-brick--tree-item--wrapper--color: inherit !default;
$ipb-browse-brick--tree-item-image--height: $common-size-350 !default;
$ipb-browse-brick--tree-item-image--width: $common-size-350 !default;
@@ -90,25 +70,20 @@ $ipb-browse-brick--tree-item-image--has-glyphicon--margin-right: $common-spacing
$ipb-browse-brick--tree-item--has-glyphicon--description--margin-left: 19px !default;
$ipb-browse-brick--list-group-item--padding-y: $common-spacing-0 !default;
$ipb-browse-brick--list-group-item--padding-x: $common-spacing-500 !default;
$ipb-browse-brick--list-group-item--padding: $common-spacing-0 !default;
$ipb-browse-brick--list-group-item--padding-left: $common-spacing-500 !default;
$ipb-browse-brick--list-group-item--margin-bottom: -1px !default;
$ipb-browse-brick--list-group-item--background-color: $common-color-white-100 !default;
$ipb-browse-brick--list-group-item--border: 1px solid $common-color-grey-400 !default;
$ipb-browse-brick--list-group--margin-bottom: $common-spacing-0 !default;
$ipb-browse-brick--list-group-item--tree-item-wrapper--padding-bottom: $common-spacing-500 !default;
$ipb-browse-brick--list-group--tree--margin: $common-spacing-0 !default;
$ipb-browse-brick--list-group--tree--background-color: $common-color-white-100 !default;
$ipb-browse-brick--no-item--illustration--max-width: 100% !default;
$ipb-browse-brick--no-item--illustration--padding-y: $common-spacing-600 !default;
$ipb-browse-brick--no-item--illustration--padding-x: $common-spacing-500 !default;
$ipb-browse-brick--no-item--illustration--svg--max-width: $common-size-700 !default;
$ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
// Common
.ipb-browse-brick-panel {
@@ -131,22 +106,12 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
}
// Mosaic view
.page_browse_brick_as_mosaic .ipb-browse-brick-panel{
background-color: $ipb-browse-brick-panel--mosaic--background-color !important;
border: $ipb-browse-brick-panel--mosaic--border !important;
}
#brick_content_mosaic{
padding: $ipb-content-mosaic--padding;
}
#mosaic-breadcrumb {
padding: $ipb-browse-brick--mosaic-breadcrumb--padding;
a {
color: $ipb-browse-brick--mosaic-breadcrumb--a--color;
}
.active {
color: $ipb-browse-brick--mosaic-breadcrumb--active--color;
}
}
.mosaic-group {
@@ -180,23 +145,7 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
height: $ipb-browse-brick--mosaic-group-item--height;
width: $ipb-browse-brick--mosaic-group-item--width;
margin: $ipb-browse-brick--mosaic-group-item--margin;
color: $ipb-browse-brick--mosaic-group-item--color;
border: $ipb-browse-brick--mosaic-group-item--border;
border-radius: $ipb-browse-brick--mosaic-group-item--border-radius;
background-color: $ipb-browse-brick--mosaic-group-item--background-color;
@for $i from 1 through length($ipb-browse-brick--mosaic-item--highlight-color) {
&:nth-child(#{length($ipb-browse-brick--mosaic-item--highlight-color)}n + #{$i}){
.mosaic-item:hover{
background-color: common-adjust-alpha(nth($ipb-browse-brick--mosaic-item--highlight-color, $i), $ipb-browse-brick--mosaic-item--hover--background-color--alpha);
}
.mosaic-item-image {
background-color: common-adjust-alpha(nth($ipb-browse-brick--mosaic-item--highlight-color, $i), $ipb-browse-brick--mosaic-item-image--background-color--alpha);
color: nth($ipb-browse-brick--mosaic-item--highlight-color, $i);
}
}
}
> .mosaic-group-item-actions {
position: absolute;
@@ -213,15 +162,7 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
padding: $ipb-browse-brick--mosaic-item--padding;
margin: $ipb-browse-brick--mosaic-item--margin;
border-radius: $ipb-browse-brick--mosaic-item--border-radius;
background-color: $ipb-browse-brick--mosaic-item--background-color;
color: $ipb-browse-brick--mosaic-item--color;
transition: background-color 0.3s linear;
&:hover {
color: $ipb-browse-brick--mosaic-item--hover--color;
}
}
@@ -236,7 +177,6 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
.mosaic-item-description {
@extend %common-font-ral-nor-150;
color: $ipb-browse-brick--mosaic-item-description--color;
}
}
@@ -247,8 +187,6 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
padding: $ipb-browse-brick--mosaic-item-image--padding;
margin-bottom: $ipb-browse-brick--mosaic-item-image--margin-bottom;
border-radius: $ipb-browse-brick--mosaic-item-image--border-radius;
background-color: $ipb-browse-brick--mosaic-item-image--background-color;
color: $ipb-browse-brick--mosaic-item-image--color;
align-items: center;
justify-content: center;
text-transform: capitalize;
@@ -280,26 +218,22 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
}
.list-group-item .list-group-item-text, .tree-item {
color: $ipb-browse-brick--tree-item--color;
@extend %common-font-ral-bol-150;
& a {
@extend %common-font-size-150;
color: $ipb-browse-brick--tree-item--hyperlink--color;
}
}
.list-group.tree .list-group-item .list-group-item-description {
display: block;
margin-top: $ipb-browse-brick--tree-item--description--margin-top;
color: $ipb-browse-brick--tree-item--description--color;
@extend %common-font-ral-nor-100;
}
.list-group-item .tree-item-wrapper .tree-item-filter-data {
margin-top: $ipb-browse-brick--tree-item-filter-data--margin-top;
color: $ipb-browse-brick--tree-item-filter-data--color;
@extend %common-font-ral-med-100;
> span:not(:last-child):after {
@@ -307,7 +241,6 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
margin: $ipb-browse-brick--tree-item-filter-data--item--margin-y $ipb-browse-brick--tree-item-filter-data--item--margin-x;
}
a {
color: $ipb-browse-brick--tree-item-filter-data--color;
font-size: $common-font-size-100 !important;
}
}
@@ -315,32 +248,15 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
#brick_content_tree .list-group-item>.tree-item-wrapper {
display: flex;
padding-top: $ipb-browse-brick--tree-item--wrapper--padding-top;
color: $ipb-browse-brick--tree-item--wrapper--color;
text-decoration: inherit;
cursor: pointer
}
.list-group-item {
#brick_content_tree .list-group-item {
display: block;
position: relative;
padding: $ipb-browse-brick--list-group-item--padding-y $ipb-browse-brick--list-group-item--padding-x;
padding: $ipb-browse-brick--list-group-item--padding $ipb-browse-brick--list-group-item--padding $ipb-browse-brick--list-group-item--padding $ipb-browse-brick--list-group-item--padding-left;
margin-bottom: $ipb-browse-brick--list-group-item--margin-bottom;
background-color: $ipb-browse-brick--list-group-item--background-color;
border: $ipb-browse-brick--list-group-item--border;
border-bottom: none;
@for $i from 1 through length($ipb-browse-brick--mosaic-item--highlight-color) {
&:nth-child(#{length($ipb-browse-brick--mosaic-item--highlight-color)}n + #{$i - 1}) {
&:hover {
background-color: common-adjust-alpha(nth($ipb-browse-brick--mosaic-item--highlight-color, $i), $ipb-browse-brick--mosaic-item--hover--background-color--alpha);
}
> .tree-item-wrapper .tree-item-image {
background-color: common-adjust-alpha(nth($ipb-browse-brick--mosaic-item--highlight-color, $i), $ipb-browse-brick--mosaic-item-image--background-color--alpha);
color: nth($ipb-browse-brick--mosaic-item--highlight-color, $i);
}
}
}
}
@@ -386,7 +302,6 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
.list-group.tree {
margin: $ipb-browse-brick--list-group--tree--margin;
background-color: $ipb-browse-brick--list-group--tree--background-color;
}
.ipb-browse-brick--no-item--illustration {
@@ -402,6 +317,5 @@ $ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
}
.ipb-browse-brick--no-item--text {
color: $ipb-browse-brick--no-item--text--color;
@extend %common-font-ral-med-300;
}

48
datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_manage-brick.scss
View File

@@ -1,3 +1,9 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-manage-brick--panel--body--padding-y: $common-spacing-500 !default;
$ipb-manage-brick--panel--body--padding-x: $common-spacing-0 !default;
@@ -15,7 +21,6 @@ $ipb-manage-brick--no-result--illustration--padding-y: $common-spacing-600 !defa
$ipb-manage-brick--no-result--illustration--padding-x: $common-spacing-500 !default;
$ipb-manage-brick--no-result--illustration--svg--max-width: $common-size-700 !default;
$ipb-manage-brick--no-result--text--color: $common-color-grey-800 !default;
.ipb-manage-brick--panel--body {
padding: $ipb-manage-brick--panel--body--padding-y $ipb-manage-brick--panel--body--padding-x 0 $ipb-manage-brick--panel--body--padding-x;
@@ -38,36 +43,30 @@ $ipb-manage-brick--no-result--text--color: $common-color-grey-800 !default;
margin-top: $ipb-manage-brick--panel--body--table--margin-top !important;
}
.ipb-manage-brick--export-action {
color: $common-color-grey-800;
}
.ipb-manage-brick--export-action--icon {
float: right;
}
$ipb-manage-brick--pie-chart--colors:
$common-color-blue-400 $common-color-blue-950 "rgb(44, 160, 44)",
$common-color-blue-500 $common-color-blue-950 "rgb(214, 39, 40)",
$common-color-blue-600 $common-color-blue-100 "rgb(148, 103, 189)",
$common-color-blue-700 $common-color-blue-100 "rgb(140, 86, 75)",
$common-color-blue-800 $common-color-blue-100 "rgb(227, 119, 194)",
$common-color-blue-900 $common-color-blue-100 "rgb(127, 127, 127)",
$common-color-blue-950 $common-color-blue-100 "rgb(188, 189, 34)",
$common-color-blue-100 $common-color-blue-950 "rgb(23, 190, 207)",
$common-color-blue-200 $common-color-blue-950 "rgb(31, 119, 180)",
$common-color-blue-300 $common-color-blue-950 "rgb(255, 127, 14)"
!default;
.ipb-export--feedback {
display: flex;
flex-direction: column;
}
@each $background, $text, $originalColor in $ipb-manage-brick--pie-chart--colors {
.c3-chart-arc path[style="fill: #{$originalColor}; cursor: pointer; opacity: 1;"] {
fill: $background !important;
.ipb-export-message {
@extend %common-font-ral-med-150;
margin: $common-spacing-300 $common-spacing-0;
}
.c3-legend-item-tile[style="stroke: #{$originalColor}; pointer-events: none;"] {
stroke: $background !important;
}
.c3-chart-arc:has(path[style="fill: #{$originalColor}; cursor: pointer; opacity: 1;"]) text {
fill: $text !important;
.ipb-export--illustration {
align-self: center;
margin: 24px 0;
max-width: $common-size-650;
max-height: $common-size-650;
> svg {
max-width: 100%;
height: 100%;
}
}
@@ -84,6 +83,5 @@ $common-color-blue-300 $common-color-blue-950 "rgb(255, 127, 14)"
}
.ipb-manage-brick--no-result--text {
color: $ipb-manage-brick--no-result--text--color;
@extend %common-font-ral-med-300;
}

8
datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_object-brick.scss
View File

@@ -1,5 +1,10 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-object-brick--url-to-clipboard--opacity: 0.5 !default;
$ipb-object-brick--url-to-clipboard-tooltip-copied--color: $common-color-green-500!default;
$ipb-object-brick--url-to-clipboard-tooltip-copied--margin-right: $common-spacing-200!default;
@@ -15,6 +20,5 @@ $ipb-object-brick--url-to-clipboard-tooltip-copied--margin-right: $common-spacin
}
// Used for clipboard's tooltip, which is not part of .url-to-clipboard element
.url-to-clipboard-tooltip-copied {
color: $ipb-object-brick--url-to-clipboard-tooltip-copied--color;
margin-right: $ipb-object-brick--url-to-clipboard-tooltip-copied--margin-right;
}

207
datamodels/2.x/itop-portal-base/portal/public/css/portal.scss
View File

@@ -15,10 +15,10 @@
*
* You should have received a copy of the GNU Affero General Public License
*/
@import '../../../../../css/common/main.scss';
@import 'common/main.scss';
@import 'variables.scss';
@import "utils/all";
@import '../../../../../node_modules/ckeditor5-itop-build/build/styles/compiled-theme';
@import '../node_modules/ckeditor5-itop-build/build/styles/compiled-theme';
/*!
* Combodo portal template v1.0.0
@@ -275,201 +275,6 @@ footer{
padding-top: 15px;
}
//.home .tile{
// display: block;
// margin-bottom: 8px;
// padding: 0em 1em;
// min-height: 4em;
// background-color: $white;
// background-image: none;
// border: none;
// border-radius: 0px;
// text-align: center;
// text-decoration: none;
// white-space: normal;
// line-height: 4em;
// box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
//}
//.home .tile .tile_decoration{
// position: absolute;
// top: 0.3em;
// left: 2.5em;
//}
//.home .tile .tile_title{
// font-weight: bold;
// color: $gray;
//}
//
//.home .tile .tile_title > span.icon {
// color: $combodo-orange;
//}
//
//.home .tile .tile_description{
// display: none;
// color: #555555;
//}
//
//
///**********************************/
///* ManageBrick badge tile display */
///**********************************/
//.home a.tile.tile_badge > div {
// display: table;
// width: 100%;
//}
//
//.home a.tile.tile_badge > div > div {
// display: table-row;
//}
//
//.home a.tile.tile_badge > div > div > div {
// display: table-cell;
//}
//
//@media (max-width: 768px) {
// .home a.tile.tile_badge > div > div > div.tile_body div.tile_count {
// position: absolute;
// top: 0em;
// right: 2em;
// text-align: right;
// font-size: 1.2em;
// }
// .home a.tile.tile_badge > div.tile_description {
// display: none;
// }
//}
//@media (min-width: 768px) {
// .home .tile{
// display: block;
// margin-bottom: 25px;
// padding: 40px 40px 30px 40px;
// min-height: 10em;
// text-align: left;
// transition: all 0.2s linear;
// }
// .home .tile:hover{
// box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.10);
// }
// .home .tile .tile_decoration{
// display: block;
// position: relative;
// float: left;
// top: 1.5em;
// left: initial;
// margin: 0px 30px 15px 0px;
// }
// .home .tile .tile_body{
// display: block;
// padding-left: 4.3em;
// text-align: left;
// line-height: 1.5em;
// }
// .home .tile .tile_title{
// margin-bottom: 1em;
// font-size: 1.0em;
// }
// .home .tile .tile_description{
// display: block;
// text-align: left;
// }
//
// .home a.tile.tile_badge{
// height: 10em;
// overflow: hidden;
// }
// .home a.tile.tile_badge > div > div > div.tile_decoration{
// top: unset;
// vertical-align: middle;
// }
// .home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
// font-size: 4em;
// }
// .home a.tile.tile_badge > div > div > div.tile_body{
// position: relative;
// padding: 0;
// margin: 0;
// vertical-align: middle;
// text-align: right;
// }
// .home a.tile.tile_badge > div > div > div.tile_body .tile_title{
// margin-top: 1em;
// margin-bottom: 0;
// font-size: 1em;
// font-weight: normal;
// }
// .home a.tile.tile_badge > div > div > div.tile_body .tile_count{
// position: absolute;
// top: 0;
// right: 0;
// font-size: 2em;
// font-weight: bold;
// color: $gray;
// }
// .home a.tile.tile_badge .tile_description{
// display: none;
// }
//}
//@media (min-width: 992px) {
// .home .tile{
// min-height: 14em;
// padding: 30px 40px 30px 40px;
// }
// .home .tile .tile_decoration > span.icon{
// font-size: 4em;
// }
// .home .tile .tile_body{
// padding-left: 6.3em;
// }
// .home .tile .tile_title{
// font-size: 1.4em;
// }
// .home .tile .tile_description{
// font-size: 1.2em;
// }
//
// .home a.tile.tile_badge > div > div > div.tile_body .tile_title{
// font-size: 1.2em;
// }
// .home a.tile.tile_badge > div > div > div.tile_body .tile_count{
// font-size: 3em;
// }
// .home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
// font-size: 4em;
// }
// .home a.tile.tile_badge .tile_description{
// display: block;
// font-size: 1em;
// text-align: center;
// }
//}
//@media (min-width: 1200px) {
// .home .tile{
// margin-bottom: 40px;
// min-height: 15em;
// padding: 40px 50px 30px 50px;
// }
// .home .tile .tile_decoration{
// margin: 0px 40px 15px 0px;
// top: 1.5em;
// }
// .home .tile .tile_decoration > span.icon{
// font-size: 6em;
// }
// .home .tile .tile_body{
// padding-left: 9.1em;
// }
// .home .tile .tile_title{
// font-size: 1.5em;
// }
// .home .tile .tile_description{
// font-size: 1.2em;
// }
//
// .home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
// font-size: 6em;
// }
//}
/********************/
/* Modules settings */
/********************/
@@ -489,13 +294,7 @@ footer{
#main-header-actions{
margin-bottom: 15px;
}
/* This is no longer necessary but we keep it just in case */
/*#main-header-actions .btn-group .btn{
padding: 0em 1.5em;
line-height: 2.4em;
font-size: 14px;
background-image: none;
}*/
@media (min-width: 768px) {
#main-header:after{
clear: both;

9
datamodels/2.x/itop-portal-base/portal/public/css/themes/_all.scss
View File

@@ -1,3 +1,8 @@
@import "components/all";
@import "layout/all";
@import 'common/main.scss';
/* Import shame first as we want to override some of its styles */
@import "shame";
@import "../utils/all";
@import "pages/all";
@import "components/all";
@import "vendors/all";
@import "layout/all";

185
datamodels/2.x/itop-portal-base/portal/public/css/themes/_shame.scss
View File

@@ -1,35 +1,22 @@
/*!
* Copyright (C) 2013-2024 Combodo SAS
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
@import 'variables.scss';
/*!
/*
* Combodo portal theme v2.7.0
* Based on Bootswatch Simplex
*/
/*!
/*
* bootswatch v3.3.5
* Homepage: http://bootswatch.com
* Copyright 2012-2015 Thomas Park
* Licensed under MIT
* Based on Bootstrap
*/
/*!
/*
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -1374,15 +1361,6 @@ th {
.table-bordered>thead>tr>td {
border-bottom-width: 2px
}
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: $table-bg-accent;
}
.table-striped>tbody>tr:hover {
background-color: $table-bg-hover;
}
.table-hover>tbody>tr:hover {
background-color: $table-bg-hover;
}
table col[class*="col-"] {
position: static;
float: none;
@@ -1394,111 +1372,6 @@ table th[class*="col-"] {
float: none;
display: table-cell
}
.table>thead>tr>td.active,
.table>tbody>tr>td.active,
.table>tfoot>tr>td.active,
.table>thead>tr>th.active,
.table>tbody>tr>th.active,
.table>tfoot>tr>th.active,
.table>thead>tr.active>td,
.table>tbody>tr.active>td,
.table>tfoot>tr.active>td,
.table>thead>tr.active>th,
.table>tbody>tr.active>th,
.table>tfoot>tr.active>th {
background-color: #f5f5f5
}
.table-hover>tbody>tr>td.active:hover,
.table-hover>tbody>tr>th.active:hover,
.table-hover>tbody>tr.active:hover>td,
.table-hover>tbody>tr:hover>.active,
.table-hover>tbody>tr.active:hover>th {
background-color: #e8e8e8
}
.table>thead>tr>td.success,
.table>tbody>tr>td.success,
.table>tfoot>tr>td.success,
.table>thead>tr>th.success,
.table>tbody>tr>th.success,
.table>tfoot>tr>th.success,
.table>thead>tr.success>td,
.table>tbody>tr.success>td,
.table>tfoot>tr.success>td,
.table>thead>tr.success>th,
.table>tbody>tr.success>th,
.table>tfoot>tr.success>th {
background-color: $state-success-bg
}
.table-hover>tbody>tr>td.success:hover,
.table-hover>tbody>tr>th.success:hover,
.table-hover>tbody>tr.success:hover>td,
.table-hover>tbody>tr:hover>.success,
.table-hover>tbody>tr.success:hover>th {
background-color: #d0e9c6
}
.table>thead>tr>td.info,
.table>tbody>tr>td.info,
.table>tfoot>tr>td.info,
.table>thead>tr>th.info,
.table>tbody>tr>th.info,
.table>tfoot>tr>th.info,
.table>thead>tr.info>td,
.table>tbody>tr.info>td,
.table>tfoot>tr.info>td,
.table>thead>tr.info>th,
.table>tbody>tr.info>th,
.table>tfoot>tr.info>th {
background-color: $state-info-bg
}
.table-hover>tbody>tr>td.info:hover,
.table-hover>tbody>tr>th.info:hover,
.table-hover>tbody>tr.info:hover>td,
.table-hover>tbody>tr:hover>.info,
.table-hover>tbody>tr.info:hover>th {
background-color: #c4e3f3
}
.table>thead>tr>td.warning,
.table>tbody>tr>td.warning,
.table>tfoot>tr>td.warning,
.table>thead>tr>th.warning,
.table>tbody>tr>th.warning,
.table>tfoot>tr>th.warning,
.table>thead>tr.warning>td,
.table>tbody>tr.warning>td,
.table>tfoot>tr.warning>td,
.table>thead>tr.warning>th,
.table>tbody>tr.warning>th,
.table>tfoot>tr.warning>th {
background-color: $state-warning-bg
}
.table-hover>tbody>tr>td.warning:hover,
.table-hover>tbody>tr>th.warning:hover,
.table-hover>tbody>tr.warning:hover>td,
.table-hover>tbody>tr:hover>.warning,
.table-hover>tbody>tr.warning:hover>th {
background-color: #faf2cc
}
.table>thead>tr>td.danger,
.table>tbody>tr>td.danger,
.table>tfoot>tr>td.danger,
.table>thead>tr>th.danger,
.table>tbody>tr>th.danger,
.table>tfoot>tr>th.danger,
.table>thead>tr.danger>td,
.table>tbody>tr.danger>td,
.table>tfoot>tr.danger>td,
.table>thead>tr.danger>th,
.table>tbody>tr.danger>th,
.table>tfoot>tr.danger>th {
background-color: $state-danger-bg
}
.table-hover>tbody>tr>td.danger:hover,
.table-hover>tbody>tr>th.danger:hover,
.table-hover>tbody>tr.danger:hover>td,
.table-hover>tbody>tr:hover>.danger,
.table-hover>tbody>tr.danger:hover>th {
background-color: #ebcccc
}
.table-responsive {
overflow-x: auto;
min-height: 0.01%
@@ -3175,21 +3048,6 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
border-bottom-color: #fcfcfc
}
}
.nav-pills>li {
float: left
}
.nav-pills>li>a {
border-radius: $border-radius-base
}
.nav-pills>li+li {
margin-left: 2px
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
color: #ffffff;
background-color: $brand-primary
}
.nav-stacked>li {
float: none
}
@@ -6082,37 +5940,6 @@ table.dataTable{
}
}
}
/* ManageBrick grouping tabs. Should be placed somewhere else? */
.grouping_tabs{
&.nav-pills > li > a{
color: #444;
background-color: #F5F5F5;
&:hover,
&:focus{
text-decoration: none;
background-color: #DDDDDD;
}
> .badge{
color: #ea7d1e;;
background-color: transparent;
}
}
&.nav-pills > li.active{
> a,
> a:hover,
> a:focus{
color: #444;
background-color: #FCFCFC;
}
}
}
/* Temp */
.label{

11
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_alert.scss
View File

@@ -1,4 +1,9 @@
/* SCSS variables */
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-alert--message--color: $ipb-body-text-color !default;
$ipb-alert--icon--font-size: $common-font-size-300 !default;
$ipb-alert--icon--width: 24px !default;
@@ -61,8 +66,8 @@ $ipb-alerts-colors: (
$icon: map-get($alert-color, "icon");
$background-color: common-adjust-alpha($color, .1);
.ipb-alert.alert-#{$name} {
background: linear-gradient(113deg, $background-color 0px, $background-color 60px, transparent 60px), white;
.ipb-alert.alert-#{$name}, .ipb-alert.ipb-is-#{$name} {
background: linear-gradient(113deg, $background-color 0px, $background-color 60px, transparent 60px), $ipb-alert--background-color;
border-left-color: $color;
&:before {

8
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_all.scss
View File

@@ -1,7 +1,13 @@
@import "alert";
@import "button";
@import "caselog";
@import "datatables";
@import "dropdown";
@import "form";
@import "illustration";
@import "input";
@import "modal";
@import "nav";
@import "navigation-menu";
@import "panel";
@import "progress-bar";
@import "tile";

326
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_button.scss
View File

@@ -1,33 +1,299 @@
/* SCSS variables */
$btn--border-radius: $common-border-radius-300 !default;
$btn--active--color: $common-color-white-100 !default;
$btn--active--background-color: $common-color-blue-grey-900 !default;
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
.btn{
border-radius: $btn--border-radius !important;
}
.btn.active{
background-color: #263238 !important;
color: $btn--active--color !important;
}
.btn-group .btn:first-child{
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.btn-group .btn:last-child{
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
// todo
.btn.btn-secondary:hover {
color: unset;
}
.btn.btn-secondary:active {
color: unset;
/* SCSS variables (can be overloaded) */
$ipb-button-colors: (
'' : (
'primary': (
'': (
$ipb-color-blue-800,
$ipb-color-white-100,
$ipb-color-blue-900
),
':hover': (
$ipb-color-blue-700,
$ipb-color-white-100,
$ipb-color-blue-800
),
':active': (
$ipb-color-blue-900,
$ipb-color-white-100,
$ipb-color-blue-950
),
':disabled': (
$ipb-color-blue-200,
$ipb-color-blue-600,
$ipb-color-blue-300
),
),
'default': (
'': (
$ipb-color-white-100,
$ipb-color-grey-800,
$ipb-color-grey-600
),
':hover': (
$ipb-color-grey-100,
$ipb-color-grey-900,
$ipb-color-grey-700
),
':active': (
$ipb-color-grey-200,
$ipb-color-grey-900,
$ipb-color-grey-700
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
'success': (
'': (
$ipb-color-success-900,
$ipb-color-white-100,
$ipb-color-success-900
),
':hover': (
$ipb-color-success-800,
$ipb-color-green-100,
$ipb-color-success-900
),
':active': (
$ipb-color-success-950,
$ipb-color-green-100,
$ipb-color-success-950
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
'warning': (
'': (
$ipb-color-warning-700,
$ipb-color-white-100,
$ipb-color-warning-900
),
':hover': (
$ipb-color-warning-600,
$ipb-color-warning-100,
$ipb-color-warning-700
),
':active': (
$ipb-color-warning-800,
$ipb-color-warning-100,
$ipb-color-warning-900
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
'danger': (
'': (
$ipb-color-danger-800,
$ipb-color-white-100,
$ipb-color-danger-900
),
':hover': (
$ipb-color-danger-700,
$ipb-color-danger-100,
$ipb-color-danger-800
),
':active': (
$ipb-color-danger-900,
$ipb-color-danger-100,
$ipb-color-danger-950
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
'info': (
'': (
$ipb-color-information-800,
$ipb-color-white-100,
$ipb-color-information-900
),
':hover': (
$ipb-color-information-700,
$ipb-color-information-100,
$ipb-color-information-800
),
':active': (
$ipb-color-information-900,
$ipb-color-information-100,
$ipb-color-information-950
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
),
'alternative' : (
'primary': (
'': (
$ipb-color-transparent,
$ipb-color-blue-800,
$ipb-color-transparent
),
':hover': (
$ipb-color-blue-100,
$ipb-color-blue-900,
$ipb-color-blue-100
),
':active': (
$ipb-color-blue-200,
$ipb-color-blue-900,
$ipb-color-blue-200
),
':disabled': (
$ipb-color-blue-200,
$ipb-color-blue-600,
$ipb-color-blue-300
),
),
'default': (
'': (
$ipb-color-transparent,
$ipb-color-grey-800,
$ipb-color-transparent
),
':hover': (
$ipb-color-grey-200,
$ipb-color-grey-900,
$ipb-color-grey-200
),
':active': (
$ipb-color-grey-300,
$ipb-color-grey-900,
$ipb-color-grey-300
),
':disabled': (
$ipb-color-transparent,
$ipb-color-grey-500,
$ipb-color-transparent
),
),
'success': (
'': (
$ipb-color-transparent,
$ipb-color-success-900,
$ipb-color-transparent
),
':hover': (
$ipb-color-success-100,
$ipb-color-success-900,
$ipb-color-success-100
),
':active': (
$ipb-color-success-200,
$ipb-color-success-900,
$ipb-color-success-200
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
'warning': (
'': (
$ipb-color-transparent,
$ipb-color-warning-800,
$ipb-color-transparent
),
':hover': (
$ipb-color-warning-100,
$ipb-color-warning-900,
$ipb-color-warning-100
),
':active': (
$ipb-color-warning-200,
$ipb-color-warning-900,
$ipb-color-warning-200
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
'danger': (
'': (
$ipb-color-transparent,
$ipb-color-danger-800,
$ipb-color-transparent
),
':hover': (
$ipb-color-danger-100,
$ipb-color-danger-800,
$ipb-color-danger-100
),
':active': (
$ipb-color-danger-200,
$ipb-color-danger-800,
$ipb-color-danger-200
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
'info': (
'': (
$ipb-color-transparent,
$ipb-color-information-800,
$ipb-color-transparent
),
':hover': (
$ipb-color-information-100,
$ipb-color-information-800,
$ipb-color-information-100
),
':active': (
$ipb-color-information-200,
$ipb-color-information-800,
$ipb-color-information-200
),
':disabled': (
$ipb-color-grey-200,
$ipb-color-grey-700,
$ipb-color-grey-300
),
),
),
) !default;
$ipb-button--background-color: $ipb-color-white-100 !default;
$ipb-button--color: $ipb-color-blue-800 !default;
$ipb-button--border-color:$ipb-color-blue-700 !default;
$ipb-button--border: solid 1px $ipb-button--border-color !default;
.ipb-button, .btn{
background-color: $ipb-button--background-color !important;
color: $ipb-button--color !important;
border: $ipb-button--border;
@each $sType, $aColors in $ipb-button-colors {
@each $sColor, $sPseudoClasses in $aColors {
@each $sPseudoClass, $sAttributes in $sPseudoClasses {
&.ipb-is-#{$sColor}#{if($sType != '', ".ipb-is-#{$sType}", '')}#{$sPseudoClass}, &.btn-#{$sColor}#{if($sType != '', ".#{$sType}", '')}#{$sPseudoClass} {
background-color: nth($sAttributes, 1) !important;
color: nth($sAttributes, 2) !important;
border-color: nth($sAttributes, 3) !important;
}
}
}
}
}

285
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_caselog.scss Normal file
View File

@@ -0,0 +1,285 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$messaging-self-primary-color: $ipb-color-blue-100 !default;
$messaging-self-secondary-color: $ipb-color-blue-800 !default;
$messaging-1st-peer-primary-color: $ipb-color-white-100 !default;
$messaging-1st-peer-secondary-color: $ipb-color-grey-400 !default;
$messaging-2nd-peer-primary-color: $ipb-color-white-100 !default;
$messaging-2nd-peer-secondary-color: $ipb-color-grey-400 !default;
$messaging-2nd-peer-secondary-color: $ipb-color-grey-400 !default;
$messaging-3rd-peer-primary-color: $ipb-color-white-100 !default;
$messaging-3rd-peer-secondary-color: $ipb-color-grey-300 !default;
$messaging-4th-peer-primary-color: $ipb-color-white-100 !default;
$messaging-4th-peer-secondary-color: $ipb-color-grey-400 !default;
$messaging-5th-peer-primary-color: $ipb-color-white-100 !default;
$messaging-5th-peer-secondary-color: $ipb-color-grey-400 !default;
$ipb-caselog-thread--border-color: $ipb-color-grey-400 !default;
$ipb-caselog-thread--border: 1px solid $ipb-caselog-thread--border-color !default;
$ipb-caselog-thread--header--background-color: $ipb-color-white-100 !default;
$ipb-caselog-thread--header--span--color: $ipb-color-grey-800 !default;
$ipb-caselog-thread--header-toggler--color: inherit !default;
$ipb-caselog-thread--header-toggler--hover--active-focus--color: inherit !default;
$ipb-caselog-thread--content--background-color: $ipb-color-grey-100 !default;
$ipb-caselog-thread--date--color: $ipb-color-grey-800 !default;
$ipb-caselog-thread--block-medallion--block-entries--border-color: $ipb-color-grey-200 !default;
$ipb-caselog-thread--block-medallion--block-entries--border: 1px solid $ipb-caselog-thread--block-medallion--block-entries--border-color !default;
$ipb-caselog-thread--block-medallion--color: $ipb-color-blue-800 !default;
$ipb-caselog-thread--block-medallion--background-color: $ipb-color-blue-100 !default;
$ipb-caselog-thread--block-user--color: $ipb-caselog-thread--block-medallion--color !default;
$ipb-caselog-thread--block-entries--background-color: $ipb-caselog-thread--block-medallion--background-color !default;
$ipb-caselog-thread--block-entries--color: $ipb-caselog-thread--block-medallion--color !default;
$ipb-caselog-thread--block-entry--border-bottom-color: $ipb-color-grey-200 !default;
$ipb-caselog-thread--block-entry--border-bottom: 1px solid $ipb-caselog-thread--block-entry--border-bottom-color !default;
$ipb-caselog-thread--block-entry-toggler--background-color: $ipb-caselog-thread--block-medallion--background-color !default;
$ipb-caselog-thread--block-me--block-entry--first--content--border-left-color: transparent !default;
$ipb-caselog-thread--block-me--block-entry--first--content--border-right-color: $ipb-caselog-thread--block-medallion--background-color !default;
$ipb-caselog-thread--block-colors: (
1: ($ipb-color-white-100, $ipb-color-grey-700),
2: ($ipb-color-white-100, $ipb-color-grey-700),
3: ($ipb-color-white-100, $ipb-color-grey-700),
4: ($ipb-color-white-100, $ipb-color-grey-700),
5: ($ipb-color-white-100, $ipb-color-grey-700)
);
.ipb-caselog-thread {
border: $ipb-caselog-thread--border;
}
.ipb-caselog-thread--header{
background-color: $ipb-caselog-thread--header--background-color;
span{
color: $ipb-caselog-thread--header--span--color;
}
}
.ipb-caselog-thread--header-toggler{
color: $ipb-caselog-thread--header-toggler--color;
&:hover,
&:active,
&:focus{
color: $ipb-caselog-thread--header-toggler--hover--active-focus--color;
}
}
.ipb-caselog-thread--block-medallion,
.ipb-caselog-thread--block-entries{
border: $ipb-caselog-thread--block-medallion--block-entries--border;
}
.ipb-caselog-thread--content{
background-color: $ipb-caselog-thread--content--background-color;
}
.ipb-caselog-thread--date {
color: $ipb-caselog-thread--date--color;
}
.ipb-caselog-thread--block-medallion{
color: $ipb-caselog-thread--block-medallion--color; /* .ipb-caselog-thread--block-entries color */
background-color: $ipb-caselog-thread--block-medallion--background-color; /* .ipb-caselog-thread--block-entries background-color */
}
.ipb-caselog-thread--block-user{
color: $ipb-caselog-thread--block-user--color; /* .ipb-caselog-thread--block-entries background-color */
}
.ipb-caselog-thread--block-entries{
background-color: $ipb-caselog-thread--block-entries--background-color;
color: $ipb-caselog-thread--block-entries--color;
}
.ipb-caselog-thread--block-entry {
border-bottom: $ipb-caselog-thread--block-entry--border-bottom;
}
.ipb-caselog-thread--block-entry-toggler{
background-color: $ipb-caselog-thread--block-entry-toggler--background-color; /* .ipb-caselog-thread--block-entries background-color */
}
.ipb-caselog-thread--block-me{
.ipb-caselog-thread--block-entries{
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-right-color: $ipb-caselog-thread--block-me--block-entry--first--content--border-left-color;
border-left-color: $ipb-caselog-thread--block-me--block-entry--first--content--border-right-color; /* .ipb-caselog-thread--block-entries background-color */
}
}
}
}
.ipb-caselog-thread--block-color-1{
.ipb-caselog-thread--block-medallion{
color: $messaging-1st-peer-secondary-color;
background-color: $messaging-1st-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-1st-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-1st-peer-secondary-color;
background-color: $messaging-1st-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-1st-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-1st-peer-primary-color;
border-right-color: $messaging-1st-peer-primary-color;
}
}
}
}
.ipb-caselog-thread--block-color-2{
.ipb-caselog-thread--block-medallion{
color: $messaging-2nd-peer-secondary-color;
background-color: $messaging-2nd-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-2nd-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-2nd-peer-secondary-color;
background-color: $messaging-2nd-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-2nd-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-2nd-peer-primary-color;
border-right-color: $messaging-2nd-peer-primary-color;
}
}
}
}
.ipb-caselog-thread--block-color-3{
.ipb-caselog-thread--block-medallion{
color: $messaging-3rd-peer-secondary-color;
background-color: $messaging-3rd-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-3rd-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-3rd-peer-secondary-color;
background-color: $messaging-3rd-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-3rd-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-3rd-peer-primary-color;
border-right-color: $messaging-3rd-peer-primary-color;
}
}
}
}
.ipb-caselog-thread--block-color-4{
.ipb-caselog-thread--block-medallion{
color: $messaging-4th-peer-secondary-color;
background-color: $messaging-4th-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-4th-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-4th-peer-secondary-color;
background-color: $messaging-4th-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-4th-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-4th-peer-primary-color;
border-right-color: $messaging-4th-peer-primary-color;
}
}
}
}
.ipb-caselog-thread--block-color-5{
.ipb-caselog-thread--block-medallion{
color: $messaging-5th-peer-secondary-color;
background-color: $messaging-5th-peer-primary-color;
}
.ipb-caselog-thread--block-user{
color: $messaging-5th-peer-primary-color;
}
.ipb-caselog-thread--block-entries{
color: $messaging-5th-peer-secondary-color;
background-color: $messaging-5th-peer-primary-color;
.ipb-caselog-thread--block-entry{
.ipb-caselog-thread--block-entry-toggler{
background-color: $messaging-5th-peer-primary-color;
}
}
.ipb-caselog-thread--block-entry:first-child{
.ipb-caselog-thread--block-entry-content:before{
border-top-color: $messaging-5th-peer-primary-color;
border-right-color: $messaging-5th-peer-primary-color;
}
}
}
}
@each $index, $colors in $ipb-caselog-thread--block-colors {
.ipb-caselog-thread--block-color-#{$index} {
.ipb-caselog-thread--block-medallion {
color: nth($colors, 2);
background-color: nth($colors, 1);
}
.ipb-caselog-thread--block-user {
color: nth($colors, 1);
}
.ipb-caselog-thread--block-entries {
color: nth($colors, 2);
background-color: nth($colors, 1);
.ipb-caselog-thread--block-entry {
.ipb-caselog-thread--block-entry-toggler {
background-color: nth($colors, 1);
}
}
.ipb-caselog-thread--block-entry:first-child {
.ipb-caselog-thread--block-entry-content:before {
border-top-color: nth($colors, 1);
border-right-color: nth($colors, 1);
}
}
}
}
}

6
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_datatables.scss
View File

@@ -1,3 +1,9 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ibo-vendors-datatables--column-sorting-icon--opacity: 0.3 !default;
$ibo-vendors-datatables--column-sorting-icon--opacity--is-sorted: 1 !default;
$ibo-vendors-datatables--column-sorting-icon--content: "\f0dc" !default;

33
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_dropdown.scss Normal file
View File

@@ -0,0 +1,33 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-dropdown--background-color: $ipb-color-white-100 !default;
$ipb-dropdown--border-color: $ipb-color-grey-300 !default;
$ipb-dropdown--border: 1px solid $ipb-dropdown--border-color !default;
$ipb-dropdown--li--background-color: $ipb-dropdown--background-color !default;
$ipb-dropdown--a--color: $ipb-color-grey-900 !default;
$ipb-dropdown--li--hover--background-color: $ipb-color-grey-200 !default;
$ipb-dropdown--li--hover--a--color: $ipb-color-grey-800 !default;
ipb-dropdown {
background-color: $ipb-dropdown--background-color;
border: $ipb-dropdown--border;
li {
background-color: $ipb-dropdown--li--background-color;
a {
color: $ipb-dropdown--a--color;
}
&:hover {
background: $ipb-dropdown--li--hover--background-color;
a {
color: $ipb-dropdown--li--hover--a--color;
}
}
}
}

37
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_form.scss Normal file
View File

@@ -0,0 +1,37 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb--fieldset--background-color: $ipb-color-grey-50 !default;
$ipb--fieldset--border-color: $ipb-color-grey-200 !default;
$ipb--fieldset--border: 1px solid $ipb--fieldset--border-color !default;
$ipb--fieldset--inside--fieldset--background-color: $ipb-color-grey-100 !default;
$ipb-field--has-tooltip--content: "\f05a" !default;
$ipb-field--has-tooltip--color: $ipb-color-grey-700 !default;
$ipb-field--is-mandatory--content: "\f069" !default;
$ipb-field--is-mandatory--color: $ipb-color-primary-700 !default;
.form_fields {
fieldset {
background-color: $ipb--fieldset--background-color;
border: $ipb--fieldset--border;
fieldset {
background-color: $ipb--fieldset--inside--fieldset--background-color;
}
}
}
.form_field_label > .control-label[data-tooltip-instantiated="true"]:after {
content: $ipb-field--has-tooltip--content;
color: $ipb-field--has-tooltip--color;
}
.form_field .form_mandatory .control-label:after{
content: $ipb-field--is-mandatory--content;
color: $ipb-field--is-mandatory--color;
};

11
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_illustration.scss Normal file
View File

@@ -0,0 +1,11 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-svg-illustration--fill: $ipb-color-primary-700 !default;
.ipb-svg-illustration--container > svg *[fill="#6c63ff"]{
fill: $ipb-svg-illustration--fill;
}

27
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_input.scss
View File

@@ -0,0 +1,27 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-form-control--color: $common-color-grey-800 !default;
$ipb-form-control--is-focused--border-color: $common-color-primary-700 !default;
$ipb-input-group-addon--border-color: $ipb-color-grey-300 !default;
$ipb-input-group-addon--border: 1px solid $ipb-input-group-addon--border-color !default;
$ipb-input-group-addon--background-color: $common-color-grey-100 !default;
$ipb-input-group-addon--color: $common-color-grey-800 !default;
.form-control {
color: $ipb-form-control--color;
&:focus {
border-color: $ipb-form-control--is-focused--border-color;
}
}
.input-group-addon {
border: $ipb-input-group-addon--border;
background-color: $ipb-input-group-addon--background-color;
color: $ipb-input-group-addon--color;
}

62
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_modal.scss Normal file
View File

@@ -0,0 +1,62 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-modal--header--background-color: $ipb-color-white-100 !default;
$ipb-modal--header--color: $ipb-color-grey-900 !default;
$ipb-modal--header--close--color: $ipb-color-grey-900 !default;
$ipb-modal--header--close--opacity: 1 !default;
$ipb-modal--header--close--hover--color: $ipb-color-grey-700 !default;
$ipb-modal--backdrop--opacity: 0.6 !default;
$ipb-modal--backdrop--background-color: $ipb-color-blue-grey-800 !default;
$ipb-modal--backdrop--backdrop-filter: blur(2px) !default;
$ipb-modal--content--border-color: $ipb-color-grey-400 !default;
$ipb-modal--content--border: 1px solid $ipb-modal--content--border-color !default;
$ipb-modal--title--color: $ipb-modal--header--color !default;
$ipb-modal--title--span--separator--background-color: $ipb-color-grey-800 !default;
.modal .modal-dialog{
.modal-header {
background-color: $ipb-modal--header--background-color;
color: $ipb-modal--header--color;
}
}
.modal-backdrop.in {
background-color: common-adjust-alpha($ipb-modal--backdrop--background-color, $ipb-modal--backdrop--opacity);
backdrop-filter: $ipb-modal--backdrop--backdrop-filter;
}
.modal-content {
border: $ipb-modal--content--border;
}
.modal-header {
.close {
color: $ipb-modal--header--close--color;
opacity: $ipb-modal--header--close--opacity;
&:hover {
color: $ipb-modal--header--close--hover--color;
}
}
}
.modal-title {
color: $ipb-modal--title--color !important;
span ~ span {
&:before {
background-color: $ipb-modal--title--span--separator--background-color;
}
}
}

7
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_nav.scss
View File

@@ -1,4 +1,9 @@
/* SCSS variables */
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$nav-pills--li--border-radius: $common-border-radius-300 !default;
.nav-pills > li > a{

10
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_navigation-menu.scss
View File

@@ -1,10 +0,0 @@
.nav > li {
display: flex;
}
.nav > li > a {
display: flex;
}
.navbar-default .navbar-nav > li > a {
color: $common-color-grey-300;
}

25
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_panel.scss
View File

@@ -1,8 +1,27 @@
/* SCSS variables */
$panel--border-radius: $common-border-radius-300!default;
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-panel--border-color: $ipb-color-grey-400 !default;
$ipb-panel--border: 1px solid $ipb-panel--border-color !default;
$ipb-panel--background-color: $ipb-color-white-100 !default;
$ipb-panel--heading--border-color: $ipb-color-grey-400 !default;
$ipb-panel--heading--background-color: $ipb-color-grey-100 !default;
$ipb-panel--heading--color: $ipb-color-grey-800 !default;
.panel{
.ipb-panel, .panel{
box-shadow: none;
border: $ipb-panel--border;
background-color: $ipb-panel--background-color;
&.panel-default .panel-heading {
border-color: $ipb-panel--heading--border-color;
background-color: $ipb-panel--heading--background-color;
color: $ipb-panel--heading--color;
}
}

14
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_progress-bar.scss Normal file
View File

@@ -0,0 +1,14 @@
$ipb-progress--background-color: $ipb-color-grey-200 !default;
$ipb-progress--bar--background-color: $ipb-color-primary-700 !default;
$ipb-progress--bar--color: $ipb-color-white-100 !default;
.ipb-progress, .progress {
background-color: $ipb-progress--background-color;
}
.ipb-progress--bar, .progress-bar {
background-color: $ipb-color-primary-700;
color: $ipb-progress--bar--color;
}

48
datamodels/2.x/itop-portal-base/portal/public/css/themes/components/_tile.scss Normal file
View File

@@ -0,0 +1,48 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-tile--background-color: $ipb-color-white-100 !default;
$ipb-tile--border-color: $ipb-color-grey-200 !default;
$ipb-tile--border: 1px solid $ipb-tile--border-color!default;
$ipb-tile--decoration--opacity: 0.1 !default;
$ipb-tile--decoration--background-color: common-adjust-alpha($ipb-color-blue-700, $ipb-tile--decoration--opacity) !default;
$ipb-tile--decoration--hover--opacity: 0.25 !default;
$ipb-tile--decoration--hover--background-color: common-adjust-alpha($ipb-tile--decoration--background-color, $ipb-tile--decoration--hover--opacity) !default;
$ipb-tile--decoration--icon--color: $ipb-color-blue-700 !default;
$ipb-tile--title--color: $common-base-variable--text-color !default;
$ipb-tile--description--color: $common-base-variable--text-color !default;
.ipb-tile{
background-color: $ipb-tile--background-color;
border: $ipb-tile--border;
}
.ipb-tile--decoration {
background-color: $ipb-tile--decoration--background-color;
}
.ipb-tile:hover {
.ipb-tile--decoration {
background-color: $ipb-tile--decoration--hover--background-color;
}
}
.ipb-tile--decoration--icon {
&.icon {
color: $ipb-tile--decoration--icon--color;
}
}
.ipb-tile--title{
color: $ipb-tile--title--color;
}
.ipb-tile--description{
color: $ipb-tile--description--color;
}

3
datamodels/2.x/itop-portal-base/portal/public/css/themes/layout/_all.scss
View File

@@ -1 +1,4 @@
@import 'home';
@import 'navigation-menu';
@import 'page';
@import 'tabs';

21
datamodels/2.x/itop-portal-base/portal/public/css/themes/layout/_home.scss Normal file
View File

@@ -0,0 +1,21 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-home--main-wrapper--before--background-image: url("../img/backgrounds/dots-left-top.svg") !default;
$ipb-home--main-wrapper--before--background-size: 30% !default;
$ipb-home--main-wrapper--after--background-image: url("../img/backgrounds/dots-right-bottom.svg") !default;
$ipb-home--main-wrapper--after--background-size: 30% !default;
.ipb-home .ipb-page--main-wrapper:before{
background-image: $ipb-home--main-wrapper--before--background-image;
background-size: $ipb-home--main-wrapper--before--background-size;
}
.ipb-home .ipb-page--main-wrapper:after{
background-image: $ipb-home--main-wrapper--after--background-image;
background-size: $ipb-home--main-wrapper--after--background-size;
}

82
datamodels/2.x/itop-portal-base/portal/public/css/themes/layout/_navigation-menu.scss Normal file
View File

@@ -0,0 +1,82 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
@import "../node_modules/bulma-scss/utilities/mixins";
$ipb-navigation-menu--background-color: $ipb-color-blue-grey-900 !default;
$ipb-navigation-menu--menu-entry--active--icon--color: $ipb-color-primary-600 !default;
$ipb-navigation-menu--menu-entry--active--color: $ipb-color-grey-800 !default;
$ipb-navigation-menu--menu-entry--active--background-color: $ipb-color-white-100 !default;
$ipb-navigation-menu--dropdown-menu--items-remainder--color: $ipb-color-white-200 !default;
$ipb-navigation-menu--dropdown-menu--items-remainder--hover--color: $ipb-color-white-100 !default;
$ipb-navigation-menu--dropdown-menu--items-remainder--hover--background-color: $ipb-color-blue-grey-700 !default;
$ipb-navigation-menu--user-card--color: $ipb-color-white-100 !default;
$ipb-navigation-menu--user-card--photo--background-color: $ipb-color-grey-700 !default;
$ipb-navigation-menu--user-part--background-color: $ipb-color-grey-800 !default;
$ipb-navigation-menu-overlay--opacity: 0.6 !default;
$ipb-navigation-menu-overlay--background-color: $ipb-color-blue-grey-800 !default;
$ipb-navigation-menu-overlay--backdrop-filter: blur(2px) !default;
.ipb-navigation-menu {
background-color: $ipb-navigation-menu--background-color;
}
// entry wrapper
.ipb-navigation-menu--menu-entry--wrapper {
&.active .ipb-navigation-menu--menu-entry {
background-color: $ipb-navigation-menu--menu-entry--active--background-color;
color: $ipb-navigation-menu--menu-entry--active--color;
.ipb-navigation-menu--menu-entry--icon {
color: $ipb-navigation-menu--menu-entry--active--icon--color;
}
}
}
// menu entry
.ipb-navigation-menu--menu-entry,
.ipb-dropdown-menu--items-remainder > li > a {
color: $ipb-navigation-menu--dropdown-menu--items-remainder--color;
&:hover, &:focus:not(.ipb-not-focusable) {
color: $ipb-navigation-menu--dropdown-menu--items-remainder--hover--color;
background-color: $ipb-navigation-menu--dropdown-menu--items-remainder--hover--background-color;
}
}
.ipb-dropdown-menu--items-remainder {
background-color: $ipb-navigation-menu--background-color;
}
.ipb-navigation-menu--user-part {
background-color: $ipb-navigation-menu--user-part--background-color;
}
.ipb-navigation-menu--user-card {
color: $ipb-navigation-menu--user-card--color !important;
.ipb-navigation-menu--user-card--photo {
background-color: $ipb-navigation-menu--user-card--photo--background-color;
}
}
.ipb-navigation-menu-overlay {
background-color: common-adjust-alpha($ipb-navigation-menu-overlay--background-color, $ipb-navigation-menu-overlay--opacity);
backdrop-filter: $ipb-navigation-menu-overlay--backdrop-filter;
}
@include mobile {
.ipb-body {
.ipb-navigation-menu {
.ipb-navigation-menu--middle-part {
background-color: $ipb-navigation-menu--background-color;
}
}
}
}

23
datamodels/2.x/itop-portal-base/portal/public/css/themes/layout/_page.scss
View File

@@ -1,4 +1,27 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-copyright--color: $ipb-color-secondary-800 !default;
$ipb-page--main-header--information--title--color: $common-base-variable--text-color !default;
$ipb-page--main-header--information--subtitle--color: $common-base-variable--text-color !default;
body{
@extend %common-font-ral-med-100;
}
.ipb-copyright {
text-decoration: none !important;
}
.ipb-page--main-header--information--title{
color: $ipb-page--main-header--information--title--color;
}
.ipb-page--main-header--information--subtitle {
color: $ipb-page--main-header--information--subtitle--color;
}

51
datamodels/2.x/itop-portal-base/portal/public/css/themes/layout/_tabs.scss Normal file
View File

@@ -0,0 +1,51 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-tabs--tab--border-color: $ipb-color-grey-400 !default;
$ipb-tabs--tab--border: solid 1px $ipb-tabs--tab--border-color !default;
$ipb-tabs--tab--background-color: $ipb-color-grey-100 !default;
$ipb-tabs--tab--color: $ipb-color-grey-900 !default;
$ipb-tabs--tab--badge--background-color: transparent !default;
$ipb-tabs--tab--badge--color: $ipb-color-grey-900 !default;
$ipb-tabs--tab--hover--background-color: $ipb-color-grey-300 !default;
$ipb-tabs--tab--hover--color: $ipb-color-grey-900 !default;
$ipb-tabs--tab--badge--hover--background-color: $ipb-tabs--tab--hover--background-color !default;
$ipb-tabs--tab--active--background-color: $ipb-color-white-100 !default;
$ipb-tabs--tab--active--badge--background-color: $ipb-color-grey-200 !default;
$ipb-tabs--tab--active--indicator--background-color: $ipb-color-primary-600 !default;
.ipb-tabs.nav-pills > li{
> a {
background-color: $ipb-tabs--tab--background-color;
color: $ipb-tabs--tab--color;
> .badge {
background-color: $ipb-tabs--tab--badge--background-color;
color: $ipb-tabs--tab--badge--color;
}
border: $ipb-tabs--tab--border;
border-bottom: none;
}
&.active > a {
background-color: $ipb-tabs--tab--active--background-color;
&:before {
background-color: $ipb-tabs--tab--active--indicator--background-color;
}
> .badge {
background-color: $ipb-tabs--tab--active--badge--background-color;
}
}
&:hover > a, & > a:focus {
background-color: $ipb-tabs--tab--hover--background-color;
color: $ipb-tabs--tab--hover--color;
> .badge {
background-color: $ipb-tabs--tab--badge--hover--background-color;
}
}
}

2
datamodels/2.x/itop-portal-base/portal/public/css/themes/pages/_all.scss Normal file
View File

@@ -0,0 +1,2 @@
@import "base";
@import "bricks/all";

8
datamodels/2.x/itop-portal-base/portal/public/css/themes/pages/_base.scss Normal file
View File

@@ -0,0 +1,8 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-body-text-color: $ipb-color-grey-900 !default;
$ipb-body-background-color: $ipb-color-white-200 !default;

3
datamodels/2.x/itop-portal-base/portal/public/css/themes/pages/bricks/_all.scss Normal file
View File

@@ -0,0 +1,3 @@
@import "browse-brick";
@import "manage-brick";
@import "object-brick";

150
datamodels/2.x/itop-portal-base/portal/public/css/themes/pages/bricks/_browse-brick.scss Normal file
View File

@@ -0,0 +1,150 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
@import "../node_modules/bulma-scss/utilities/mixins";
$ipb-browse-brick--mosaic-item--highlight-color: $ipb-color-blue-800, $ipb-color-orange-800, $ipb-color-green-800, $ipb-color-pink-800, $ipb-color-cyan-800, $ipb-color-yellow-800, $ipb-color-purple-800;
$ipb-browse-brick--mosaic-breadcrumb--active--color: $ipb-color-grey-800 !default;
$ipb-browse-brick--mosaic-breadcrumb--a--color: $ipb-color-primary-800 !default;
$ipb-browse-brick--mosaic-group-item--color: $common-base-variable--text-color !default;
$ipb-browse-brick--mosaic-group-item--border-color: $ipb-color-grey-300 !default;
$ipb-browse-brick--mosaic-group-item--border: 1px solid $ipb-browse-brick--mosaic-group-item--border-color !default;
$ipb-browse-brick--mosaic-group-item--background-color: $ipb-color-white-100 !default;
$ipb-browse-brick--mosaic-item--background-color: $ipb-color-white-100 !default;
$ipb-browse-brick--mosaic-item--color: $common-base-variable--text-color !default;
$ipb-browse-brick--mosaic-item--hover--color: inherit !default;
$ipb-browse-brick--mosaic-item--hover--background-color--alpha: 0.05 !default;
$ipb-browse-brick--mosaic-item-description--color: $ipb-color-grey-800 !default;
$ipb-browse-brick--mosaic-item-image--background-color: common-adjust-alpha($ipb-color-blue-700, .1) !default;
$ipb-browse-brick--mosaic-item-image--background-color--alpha: 0.1 !default;
$ipb-browse-brick--mosaic-item-image--color: $ipb-color-blue-700 !default;
$ipb-browse-brick-panel--mosaic--background-color: transparent !default;
$ipb-browse-brick-panel--mosaic--border: none !default;
$ipb-browse-brick--tree-item--color: $ipb-color-grey-900 !default;
$ipb-browse-brick--tree-item--hyperlink--color: $common-hyperlink-color !default;
$ipb-browse-brick--tree-item-filter-data--color: $ipb-color-grey-800 !default;
$ipb-browse-brick--tree-item--description--color: $ipb-color-grey-800 !default;
$ipb-browse-brick--tree-item--wrapper--color: inherit !default;
$ipb-browse-brick--list-group-item--background-color: $ipb-color-white-100 !default;
$ipb-browse-brick--list-group-item--border-top-color: $ipb-color-grey-400 !default;
$ipb-browse-brick--list-group-item--border-top: 1px solid $ipb-browse-brick--list-group-item--border-top-color !default;
$ipb-browse-brick--list-group--tree--background-color: $ipb-color-white-100 !default;
$ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default;
.page_browse_brick_as_mosaic .ipb-browse-brick-panel{
background-color: $ipb-browse-brick-panel--mosaic--background-color !important;
border: $ipb-browse-brick-panel--mosaic--border !important;
}
#mosaic-breadcrumb {
a {
color: $ipb-browse-brick--mosaic-breadcrumb--a--color;
}
.active {
color: $ipb-browse-brick--mosaic-breadcrumb--active--color;
}
}
.mosaic-group-item {
background-color: $ipb-browse-brick--mosaic-group-item--background-color;
color: $ipb-browse-brick--mosaic-group-item--color;
border: $ipb-browse-brick--mosaic-group-item--border;
@for $i from 1 through length($ipb-browse-brick--mosaic-item--highlight-color) {
&:nth-child(#{length($ipb-browse-brick--mosaic-item--highlight-color)}n + #{$i}){
.mosaic-item:hover{
background-color: common-adjust-alpha(nth($ipb-browse-brick--mosaic-item--highlight-color, $i), $ipb-browse-brick--mosaic-item--hover--background-color--alpha);
}
.mosaic-item-image {
background-color: common-adjust-alpha(nth($ipb-browse-brick--mosaic-item--highlight-color, $i), $ipb-browse-brick--mosaic-item-image--background-color--alpha);
color: nth($ipb-browse-brick--mosaic-item--highlight-color, $i);
}
}
}
}
.mosaic-item {
background-color: $ipb-browse-brick--mosaic-item--background-color;
color: $ipb-browse-brick--mosaic-item--color;
&:hover {
color: $ipb-browse-brick--mosaic-item--hover--color;
}
}
.mosaic-item-text {
.mosaic-item-description {
color: $ipb-browse-brick--mosaic-item-description--color;
}
}
.mosaic-item-image {
background-color: $ipb-browse-brick--mosaic-item-image--background-color;
color: $ipb-browse-brick--mosaic-item-image--color;
}
.list-group-item .list-group-item-text, .tree-item {
color: $ipb-browse-brick--tree-item--color;
& a {
color: $ipb-browse-brick--tree-item--hyperlink--color;
}
}
.list-group.tree .list-group-item .list-group-item-description {
color: $ipb-browse-brick--tree-item--description--color;
}
.list-group-item .tree-item-wrapper .tree-item-filter-data {
color: $ipb-browse-brick--tree-item-filter-data--color;
a {
color: $ipb-browse-brick--tree-item-filter-data--color;
}
}
#brick_content_tree .list-group-item>.tree-item-wrapper {;
color: $ipb-browse-brick--tree-item--wrapper--color;
}
#brick_content_tree .list-group-item {
background-color: $ipb-browse-brick--list-group-item--background-color;
border: none;
border-top: $ipb-browse-brick--list-group-item--border-top;
@for $i from 1 through length($ipb-browse-brick--mosaic-item--highlight-color) {
&:nth-child(#{length($ipb-browse-brick--mosaic-item--highlight-color)}n + #{$i - 1}) {
&:hover {
background-color: common-adjust-alpha(nth($ipb-browse-brick--mosaic-item--highlight-color, $i), $ipb-browse-brick--mosaic-item--hover--background-color--alpha);
}
> .tree-item-wrapper .tree-item-image {
background-color: common-adjust-alpha(nth($ipb-browse-brick--mosaic-item--highlight-color, $i), $ipb-browse-brick--mosaic-item-image--background-color--alpha);
color: nth($ipb-browse-brick--mosaic-item--highlight-color, $i);
}
}
}
}
.list-group.tree {
background-color: $ipb-browse-brick--list-group--tree--background-color;
}
.ipb-browse-brick--no-item--text {
color: $ipb-browse-brick--no-item--text--color;
}

41
datamodels/2.x/itop-portal-base/portal/public/css/themes/pages/bricks/_manage-brick.scss Normal file
View File

@@ -0,0 +1,41 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-manage-brick--export-action--color: $ipb-color-grey-800 !default;
$ipb-manage-brick--no-result--text--color: $ipb-color-grey-800 !default;
$ipb-manage-brick--pie-chart--colors:
$ipb-color-blue-400 $ipb-color-blue-950 "rgb(44, 160, 44)",
$ipb-color-blue-500 $ipb-color-blue-950 "rgb(214, 39, 40)",
$ipb-color-blue-600 $ipb-color-blue-100 "rgb(148, 103, 189)",
$ipb-color-blue-700 $ipb-color-blue-100 "rgb(140, 86, 75)",
$ipb-color-blue-800 $ipb-color-blue-100 "rgb(227, 119, 194)",
$ipb-color-blue-900 $ipb-color-blue-100 "rgb(127, 127, 127)",
$ipb-color-blue-950 $ipb-color-blue-100 "rgb(188, 189, 34)",
$ipb-color-blue-100 $ipb-color-blue-950 "rgb(23, 190, 207)",
$ipb-color-blue-200 $ipb-color-blue-950 "rgb(31, 119, 180)",
$ipb-color-blue-300 $ipb-color-blue-950 "rgb(255, 127, 14)"
!default;
@each $background, $text, $originalColor in $ipb-manage-brick--pie-chart--colors {
.c3-chart-arc path[style="fill: #{$originalColor}; cursor: pointer; opacity: 1;"] {
fill: $background !important;
}
.c3-legend-item-tile[style="stroke: #{$originalColor}; pointer-events: none;"] {
stroke: $background !important;
}
.c3-chart-arc:has(path[style="fill: #{$originalColor}; cursor: pointer; opacity: 1;"]) text {
fill: $text !important;
}
}
.ipb-manage-brick--export-action {
color: $ipb-manage-brick--export-action--color;
}
.ipb-manage-brick--no-result--text {
color: $ipb-manage-brick--no-result--text--color;
}

11
datamodels/2.x/itop-portal-base/portal/public/css/themes/pages/bricks/_object-brick.scss Normal file
View File

@@ -0,0 +1,11 @@
/*
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-object-brick--url-to-clipboard-tooltip-copied--color: $ipb-color-green-500!default;
.url-to-clipboard-tooltip-copied {
color: $ipb-object-brick--url-to-clipboard-tooltip-copied--color;
}

1
datamodels/2.x/itop-portal-base/portal/public/css/themes/vendors/_all.scss vendored Normal file
View File

@@ -0,0 +1 @@
@import "datatables";

129
datamodels/2.x/itop-portal-base/portal/public/css/themes/vendors/_datatables.scss vendored Normal file
View File

@@ -0,0 +1,129 @@
$ipb-vendors--datatables--paginate-button--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'default'), '') !default;
$ipb-vendors--datatables--paginate-button--hover--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'default'), ':hover') !default;
$ipb-vendors--datatables--paginate-button--focus--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'default'), ':active') !default;
$ipb-vendors--datatables--paginate-button--disabled--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'default'), ':disabled') !default;
$ipb-vendors--datatables--paginate-button--active--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'primary'), '') !default;
$ipb-vendors--datatables--paginate-button--active--hover--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'primary'), ':hover') !default;
$ipb-vendors-datatables--columns-header--border-bottom-color: $ipb-color-grey-400 !default;
$ipb-vendors-datatables--columns-header--border-bottom: 2px solid $ipb-vendors-datatables--columns-header--border-bottom-color !default;
$ipb-vendors-datatables--row--is-odd--background-color: $ipb-color-white-100 !default;
$ipb-vendors-datatables--row--is-even--background-color: $ipb-color-white-200 !default;
$ipb-vendors-datatables--row--hover--background-color: $ipb-color-blue-100 !default;
$ipb-vendors-datatables--row--is-selected--color: $ipb-color-blue-900 !default;
$ipb-vendors-datatables--row--is-selected--background-color: $ipb-color-blue-200 !default;
$ipb-vendors-datatables--row--is-selected--hover--background-color: $ipb-color-blue-100 !default;
$ipb-vendors-datatables--row-highlight--colors:(
'red': ($ipb-color-red-100, $ipb-color-red-200),
'danger': ($ipb-color-danger-200, $ipb-color-danger-300),
'alert': ($ipb-color-red-200, $ipb-color-red-300),
'orange': ($ipb-color-orange-100, $ipb-color-orange-200),
'warning': ($ipb-color-warning-200, $ipb-color-warning-300),
'blue': ($ipb-color-blue-200, $ipb-color-blue-300),
'info': ($ipb-color-information-200, $ipb-color-information-300),
'green': ($ipb-color-green-100, $ipb-color-green-200),
'success': ($ipb-color-success-100, $ipb-color-success-200),
) !default;
$ipb-vendors-datatables--row-highlight--first-cell--colors:(
'red': ($ipb-color-red-300),
'danger': ($ipb-color-danger-400),
'alert': ($ipb-color-red-400),
'orange': ($ipb-color-orange-300),
'warning': ($ipb-color-warning-400),
'blue': ($ipb-color-blue-400),
'info': ($ipb-color-information-400),
'green': ($ipb-color-green-300),
'success': ($ipb-color-success-300),
) !default;
.table {
> thead > tr > th {
border-bottom: $ipb-vendors-datatables--columns-header--border-bottom !important;
}
}
.table-striped > tbody > tr{
background-color: $ipb-vendors-datatables--row--is-even--background-color;
&:nth-of-type(2n+1) {
background-color: $ipb-vendors-datatables--row--is-odd--background-color;
}
@each $sColorLabel, $aAttributes in $ipb-vendors-datatables--row-highlight--colors {
$sBgColor: nth($aAttributes, 1);
$sBgColorHover: nth($aAttributes, 2);
&.ipb-is-#{$sColorLabel}, &.#{$sColorLabel}{
td {
background-color: $sBgColor;
}
&:hover td {
background-color: $sBgColorHover;
}
}
}
@each $sColorLabel, $aAttributes in $ipb-vendors-datatables--row-highlight--first-cell--colors {
$sBgColor: nth($aAttributes, 1);
&.ipb-is-#{$sColorLabel} td:first-child::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background-color: $sBgColor;
}
}
&:hover {
background-color: $ipb-vendors-datatables--row--hover--background-color;
}
}
table.dataTable {
> thead, tbody, tfoot {
> tr.selected {
background-color: $ipb-vendors-datatables--row--is-selected--background-color;
color: $ipb-vendors-datatables--row--is-selected--color;
&:hover {
background-color: $ipb-vendors-datatables--row--is-selected--hover--background-color;
}
}
}
}
.pagination > .paginate_button{
> a {
background-color: nth($ipb-vendors--datatables--paginate-button--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--colors, 3);
&:hover {
background-color: nth($ipb-vendors--datatables--paginate-button--hover--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--hover--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--hover--colors, 3)
}
&:focus {
background-color: nth($ipb-vendors--datatables--paginate-button--focus--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--focus--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--focus--colors, 3)
}
}
&.disabled > a {
background-color: nth($ipb-vendors--datatables--paginate-button--disabled--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--disabled--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--disabled--colors, 3)
}
&.active > a {
background-color: nth($ipb-vendors--datatables--paginate-button--active--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--active--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--active--colors, 3);
&:hover{
background-color: nth($ipb-vendors--datatables--paginate-button--active--hover--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--active--hover--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--active--hover--colors, 3)
}
}
}

124
datamodels/2.x/itop-portal-base/portal/public/css/vendors/_datatables.scss vendored
View File

@@ -1,52 +1,14 @@
/*
* @copyright Copyright (C) 2010-2024 Combodo SAS
* @copyright Copyright (C) 2010-2025 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables (can be overloaded) */
$ipb-vendors-datatables--cell--padding-x: $common-spacing-400 !default;
$ipb-vendors-datatables--cell--padding-y: 10px !default;
$ipb-vendors-datatables--columns-header--border-bottom: 2px solid $common-color-grey-400 !default;
$ipb-vendors--datatables--paginate-button--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'default'), '') !default;
$ipb-vendors--datatables--paginate-button--hover--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'default'), ':hover') !default;
$ipb-vendors--datatables--paginate-button--focus--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'default'), ':active') !default;
$ipb-vendors--datatables--paginate-button--disabled--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'default'), ':disabled') !default;
$ipb-vendors--datatables--paginate-button--active--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'primary'), '') !default;
$ipb-vendors--datatables--paginate-button--active--hover--colors: map-get(map-get(map-get($ipb-button-colors, ''), 'primary'), ':hover') !default;
$ipb-vendors-datatables--row--is-odd--background-color: $common-color-white-100 !default;
$ipb-vendors-datatables--row--is-even--background-color: $common-color-white-200 !default;
$ipb-vendors-datatables--row--is-selected--color: $common-color-blue-900 !default;
$ipb-vendors-datatables--row--is-selected--background-color: $common-color-blue-200 !default;
$ipb-vendors-datatables--row--is-selected--hover--background-color: $common-color-blue-100 !default;
$ipb-vendors-datatables--row-highlight--first-cell--width: 3px !default;
$ipb-vendors-datatables--row-highlight--colors:(
'red': ($common-color-red-100, $common-color-red-200),
'danger': ($common-color-danger-200, $common-color-danger-300),
'alert': ($common-color-red-200, $common-color-red-300),
'orange': ($common-color-orange-100, $common-color-orange-200),
'warning': ($common-color-warning-200, $common-color-warning-300),
'blue': ($common-color-blue-200, $common-color-blue-300),
'info': ($common-color-information-200, $common-color-information-300),
'green': ($common-color-green-100, $common-color-green-200),
'success': ($common-color-success-100, $common-color-success-200),
) !default;
$ipb-vendors-datatables--row-highlight--first-cell--colors:(
'red': ($common-color-red-300),
'danger': ($common-color-danger-400),
'alert': ($common-color-red-400),
'orange': ($common-color-orange-300),
'warning': ($common-color-warning-400),
'blue': ($common-color-blue-400),
'info': ($common-color-information-400),
'green': ($common-color-green-300),
'success': ($common-color-success-300),
) !default;
.table {
> thead, tbody, tfoot {
> tr {
@@ -57,95 +19,13 @@ $ipb-vendors-datatables--row-highlight--first-cell--colors:(
}
}
}
> thead > tr > th {
border-bottom: $ipb-vendors-datatables--columns-header--border-bottom !important;
}
}
.table-striped > tbody > tr{
background-color: $ipb-vendors-datatables--row--is-even--background-color;
cursor: pointer;
&:nth-of-type(2n+1) {
background-color: $ipb-vendors-datatables--row--is-odd--background-color;
}
@each $sColorLabel, $aAttributes in $ipb-vendors-datatables--row-highlight--colors {
$sBgColor: nth($aAttributes, 1);
$sBgColorHover: nth($aAttributes, 2);
&.ipb-is-#{$sColorLabel}, &.#{$sColorLabel}{
td {
background-color: $sBgColor;
}
&:hover td {
background-color: $sBgColorHover;
}
}
}
@each $sColorLabel, $aAttributes in $ipb-vendors-datatables--row-highlight--first-cell--colors {
$sBgColor: nth($aAttributes, 1);
&.ipb-is-#{$sColorLabel} td:first-child::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background-color: $sBgColor;
}
}
&:hover {
background-color: $common-color-blue-100;
}
}
.pagination > .paginate_button{
> a {
background-color: nth($ipb-vendors--datatables--paginate-button--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--colors, 3);
&:hover {
background-color: nth($ipb-vendors--datatables--paginate-button--hover--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--hover--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--hover--colors, 3)
}
&:focus {
background-color: nth($ipb-vendors--datatables--paginate-button--focus--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--focus--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--focus--colors, 3)
}
}
&.disabled > a {
background-color: nth($ipb-vendors--datatables--paginate-button--disabled--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--disabled--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--disabled--colors, 3)
}
&.active > a {
background-color: nth($ipb-vendors--datatables--paginate-button--active--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--active--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--active--colors, 3);
&:hover{
background-color: nth($ipb-vendors--datatables--paginate-button--active--hover--colors, 1);
color: nth($ipb-vendors--datatables--paginate-button--active--hover--colors, 2);
border-color: nth($ipb-vendors--datatables--paginate-button--active--hover--colors, 3)
}
}
}
.dataTables_length, .dataTables_filter, .dataTables_info {
@extend %common-font-ral-nor-150;
}
table.dataTable {
> thead, tbody, tfoot {
> tr.selected {
background-color: $ipb-vendors-datatables--row--is-selected--background-color;
color: $ipb-vendors-datatables--row--is-selected--color;
&:hover {
background-color: $ipb-vendors-datatables--row--is-selected--hover--background-color;
}
}
}
}

11
datamodels/2.x/itop-portal-base/portal/templates/bricks/manage/popup-export-excel.html.twig
View File

@@ -10,15 +10,18 @@
<p id="export-error" class="ipb-alert alert alert-danger" role="alert"></p>
</div>
<div id="export-feedback">
<div id="export-feedback" class="ipb-export--feedback">
<p id="export-excel-warning" class="ipb-alert alert alert-warning" role="alert">{{ 'UI:Bulk:Export:MaliciousInjection:Alert:Message'|dict_format(sWikiUrl)|raw }}</p>
<p class="export-message" style="text-align:center;">{{ 'ExcelExport:PreparingExport'|dict_s }}</p>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%"
<div class="ipb-export--illustration ipb-svg-illustration--container">
{{ source('illustrations/undraw_export-files.svg') }}
</div>
<div class="ipb-progress progress">
<div class="ipb-progress--bar progress-bar" role="progressbar" style="width: 0%"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span class="progress-message">0%</span>
</div>
</div>
<p class="ipb-export-message export-message" style="text-align:center;">{{ 'ExcelExport:PreparingExport'|dict_s }}</p>
</div>
</div>
<div class="modal-footer">

1
images/illustrations/undraw_export-files.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB