norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
506a878c0e179d4bf488d47f4e175cff031dc433
Gainsight/Custom_Templates/customer_templates/Nintex University/styles.css.liquid

848 lines
19 KiB
Plaintext
Raw Blame History

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');:root {
--nintex--color--black: #0E0E0E;
--nintex--color--cyan-bluish-gray: #abb8c3;
--nintex--color--white: #FFFFFF;
--nintex--color--pale-pink: #f78da7;
--nintex--color--vivid-red: #cf2e2e;
--nintex--color--luminous-vivid-orange: #ff6900;
--nintex--color--luminous-vivid-amber: #fcb900;
--nintex--color--light-green-cyan: #7bdcb5;
--nintex--color--vivid-green-cyan: #00d084;
--nintex--color--pale-cyan-blue: #8ed1fc;
--nintex--color--vivid-cyan-blue: #0693e3;
--nintex--color--vivid-purple: #9b51e0;
--nintex--color--ivory: #FFF9F4;
--nintex--color--nintex-orange: #FF6D00;
--nintex--color--light-orange: #ff9f7b;
--nintex--color--pale-orange: #FEE9E3;
--nintex--color--pink-050: #FFD4EB;
--nintex--color--navy: #030A47;
--nintex--color--pink-200: #D60D8C;
--nintex--color--pink-100: #ED2891;
--nintex--color--pink-300: #BE0075;
--nintex--color--pale-blue: #D4D7FC;
--nintex--color--pink-400: #850052;
--nintex--color--purple: #8439A6;
--nintex--color--deep-purple: #3D0456;
--nintex--color--blue: #2A348A;
--nintex--color--deep-navy: #000426;
--nintex--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
--nintex--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
--nintex--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
--nintex--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
--nintex--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
--nintex--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
--nintex--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
--nintex--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
--nintex--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
--nintex--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
--nintex--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
--nintex--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
--nintex--font-size--small: 13px;
--nintex--font-size--medium: 20px;
--nintex--font-size--large: 36px;
--nintex--font-size--x-large: 42px;
--nintex--font-size--nintex-small: 13px;
--nintex--font-size--nintex-default: 14px;
--nintex--font-size--nintex-large: 16px;
--nintex--font-family--primary: "Plus Jakarta Sans", "Arial", sans-serif;
--nintex--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--nintex--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--nintex--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--nintex--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
--nintex--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}
body,
.np-homepage-featured .np-homepage-headline,
.np-sub-navigation-content-item-link,
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
color: #000426;
}
.np-homepage-featured {
margin-top: 0 !important;
}
body, .np-dashboard {
background-color: white !important;
font-family: var(--nintex--font-family--primary);
}
.np-homepage {
margin-bottom: 0;
}
.np-header {
position: relative;
}
.header-content {
position: relative;
z-index: 3;
text-align: center;
max-width: 900px;
}
.np-header-mobile-menu-content-button,
.np-header-mobile-menu-content-name,
.np-header-search-input,
.np-header-search-icon {
color: var(--nintex--color--deep-purple)
}
.np-header-search-input {
border-color: var(--nintex--color--deep-purple);
}
.display-flex{
display: flex;
}
.nintex-ivory-bg {
background-color: var(--nintex--color--ivory);
}
.nintex-section {
padding: 40px 4%;
text-align: center;
}
.nintex-headline {
font-size: 1.5rem;
font-weight: 900;
padding-bottom: 40px;
}
.nintex-subheadline {
font-size: 1.25rem;
font-weight: 400;
padding-bottom: 40px;
}
.nintex-card {
translate: none;
rotate: none;
scale: none;
transform: translate(0px, 0em);
opacity: 1;
transition: all .2s ease-out;
width: 100%;
align-items: flex-start;
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
display: flex;
flex-flow: column;
padding: 0;
position: relative;
margin-bottom: 20px;
background-color: var(--nintex--color--white);
}
.nintex-card-image {
height: 200px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.nintex-btns-container{
display: flex;
flex-direction: row;
gap: 20px;
justify-content: flex-end;
align-items: center;
margin-top: 20px;
}
.nintex-card:hover {
transform: scale(1.03) !important;
}
.nintex-card-content {
padding: 60px 34px 35px;
text-align: left;
position: relative;
width: 100%;
height: calc(100% - 200px);
}
.nintex-card-header {
font-size: 30px;
line-height: 1.25;
font-weight: 700;
margin: 15px 0;
}
.nintex-card-text {
font-size: 14px;
line-height: 1.5;
font-weight: 400;
}
.nintex-card-link, .nintex-text-button {
background-color: transparent;
border: 1px solid transparent;
color: var(--nintex--color--pink-300);
font-weight: 800;
padding: 8px 0;
text-wrap: balance;
transition: all .1s linear;
font-size: var(--nintex--font-size--nintex-large);
text-decoration: none;
position: relative;
cursor: pointer;
}
.nintex-card-link:after, .nintex-text-button:after {
background-color: var(--nintex--color--pink-400);
bottom: -1px;
content: "";
height: 2px;
position: absolute;
right: 100%;
transition: width .3s ease, right .3s ease;
width: 0;
}
.nintex-card-link:hover, .nintex-text-button:hover {
color: var(--nintex--color--pink-400);
}
.nintex-card-link path, .nintex-text-button path{
fill: var(--nintex--color--pink-300);
transition: all .1s linear;
}
.nintex-card-link:hover path, .nintex-text-button:hover path{
fill: var(--nintex--color--pink-400);
}
/* Disabled state for nintex text button */
.nintex-text-button:disabled,
.nintex-text-button.disabled {
color: var(--nintex--color--cyan-bluish-gray);
cursor: default;
opacity: 0.6;
pointer-events: none;
}
.nintex-text-button:disabled:after,
.nintex-text-button.disabled:after {
background-color: var(--nintex--color--cyan-bluish-gray);
width: 0;
right: 100%;
}
.nintex-text-button:disabled path,
.nintex-text-button.disabled path {
fill: var(--nintex--color--cyan-bluish-gray);
}
.nintex-text-button:disabled:hover,
.nintex-text-button.disabled:hover {
color: var(--nintex--color--cyan-bluish-gray);
}
.nintex-text-button:disabled:hover path,
.nintex-text-button.disabled:hover path {
fill: var(--nintex--color--cyan-bluish-gray);
}
.nintex-card-ribbon {
background-color: white;
color: var(--nintex--color--deep-navy);
padding: 3px 12px 2px;
border: 1px solid var(--nintex--color--blue);
border-radius: 5px;
font-size: 12px;
font-weight: 600;
}
.nintex-card-ribbons{
display: flex;
position: absolute;
top: 10px;
left: 10px;
gap: 10px;
}
.nintex-card-footer{
position: absolute;
bottom: 0;
min-height: 40px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
gap: 10px;
width: calc(100% - 68px);
justify-content: space-between;
}
.nintex-card-footer-placeholder{
height: 40px;
}
.nintex-card-preheader{
display: flex
;
font-weight: 600;
position: absolute;
top: 0;
left: 0;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
border-bottom: 4px solid;
}
.nintex-card-preheader-div{
width: fit-content;
}
.nintex-fw-container{
padding: 40px 4%;
text-align: center;
margin:0;
}
.np-sub-navigation-content-item-link{
height: fit-content !important;
}
.np-footer{
background-color: var(--np-header-color);
}
.np-footer .np-button-color, .np-footer-support-help, .np-footer-support-item{
color: var(--np-header-font-color);
}
.nintex-footer-logo-image{
height: 30px;
}
.np-footer-navigation-item{
width: fit-content;
white-space: nowrap;
}
.np-footer-navigation-list{
align-items: center;
}
@media screen and (min-width: 768px) {
.nintex-headline {
font-size: 2rem;
}
.nintex-subheadline {
font-size: 1.25rem;
font-weight: 400;
padding-bottom: 40px;
}
.nintex-section {
padding: 58px 4%;
}
.nintex-card-text {
font-size: 16px;
}
.nintex-card-stretch {
display: flex;
}
.nintex-card-link:hover:after, .nintex-text-button:hover:after {
right: 0;
width: 100%;
}
.nintex-fw-container{
padding: 58px calc(4% + 30px);
text-align: center;
margin: 0;
}
.np-footer-navigation-list{
margin-right: 60px;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
}
@media screen and (min-width: 1440px) {
.nintex-fw-container{
padding: 58px calc(50vw - 720px + 4%);
}
}
.progress-card {
border-radius: 8px;
padding: 0;
display: flex;
margin-bottom: 2.187rem;
width: 100%;
flex-direction: column;
}
.progress-ring circle {
stroke-linecap: round;
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: center;
}
.progress-bar-wrapper {
height: 10px;
border-radius: 10px;
overflow: hidden;
position: relative;
width: 80%;
margin: 0 auto;
}
.progress-bar-completed,
.progress-bar-in-progress {
height: 100%;
position: absolute;
top: 0;
}
.progress-indicator-text {
text-align: center;
font-size: 14px;
font-weight: 600;
margin-top: 10px;
}
.progress-indicators-label {
display: flex
;
width: 80%;
margin: 0 auto;
gap: 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
.progress-indicator-wrapper{
margin-bottom: 20px;
}
.nintex-filters-line{
display: flex;
gap: 10px;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 10px;
}
.nintex-filters-input-wrapper{
position: relative;
flex: 1;
max-width: 300px;
min-width: 150px;
}
.nintex-filters-input{
width: 100%;
border-radius: 5px;
outline: none;
padding-left: 30px !important;
}
.nintex-filters-input-wrapper i{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #ccc
}
.nintex-filters-select{
outline: none;
border-radius: 23px;
}
.nintex-filters-input, .nintex-filters-select{
padding: 10px;
height:45px;
border: 2px solid #ccc;
}
/* Dashboard Tab Styles */
.nintex-tab-selector {
margin-bottom: 1.5rem;
}
.nintex-tab-selector-container {
display: flex;
border-bottom: 1px solid #e0e0e0;
gap: 0;
}
.nintex-tab-button {
background: none;
border: none;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 500;
color: #333;
cursor: pointer;
position: relative;
transition: color 0.2s ease;
}
.nintex-tab-button:hover {
color: var(--nintex--color--blue);
}
.nintex-tab-button.nintex-tab-active {
color: var(--nintex--color--blue);
}
.nintex-tab-button.nintex-tab-active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--nintex--color--blue);
}
.nintex-tab-content {
transition: opacity 0.3s ease;
}
.nintex-tab-content.nintex-hidden {
display: none;
}
.nintex-hidden {
display: none;
}
/* Dashboard Filters and Search Styles */
.nintex-filters-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
gap: 1rem;
flex-wrap: wrap;
}
.nintex-search-container {
flex: 1;
min-width: 250px;
}
.nintex-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.nintex-search-icon {
position: absolute;
left: 12px;
color: #666;
font-size: 14px;
}
.nintex-search-input {
width: 100%;
padding: 10px 12px 10px 35px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
}
.nintex-search-input:focus {
border-color: var(--nintex--color--blue);
}
.nintex-filter-buttons {
display: flex;
gap: 0.5rem;
}
.nintex-filter-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 10px 16px;
background: white;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.nintex-filter-button:hover {
border-color: var(--nintex--color--blue);
color: var(--nintex--color--blue);
}
.nintex-chevron-down {
font-size: 12px;
transition: transform 0.2s ease;
}
.nintex-filter-button:hover .nintex-chevron-down {
transform: rotate(180deg);
}
/* Dashboard Pagination Styles */
.nintex-pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding: 1rem 0;
border-top: 1px solid #e0e0e0;
}
.nintex-pagination-info {
font-size: 14px;
color: #666;
}
.nintex-pagination-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.nintex-pagination-button {
padding: 8px 16px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.nintex-pagination-button:hover:not(:disabled) {
border-color: var(--nintex--color--blue);
color: var(--nintex--color--blue);
}
.nintex-pagination-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.nintex-page-numbers {
display: flex;
gap: 0.25rem;
}
.nintex-page-number:hover {
border-color: var(--nintex--color--blue);
color: var(--nintex--color--blue);
}
.nintex-page-number.nintex-page-active {
background: var(--nintex--color--blue);
color: white;
border-color: var(--nintex--color--blue);
}
/* Pagination Numbers Display */
.nintex-pagination-numbers {
display: flex;
gap: 0.25rem;
align-items: center;
}
.nintex-page-number {
width: fit-content;
color: #000;
font-size: 0.9rem;
font-weight: bold;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.nintex-filters-container {
flex-direction: column;
align-items: stretch;
}
.nintex-search-container {
min-width: auto;
}
.nintex-pagination-container {
flex-direction: column;
gap: 1rem;
align-items: center;
}
}
/* Catalog Page Specific Styles */
.np-catalog .nintex-filters-input:focus,
.np-catalog .nintex-filters-select:focus,
.np-catalog .nintex-filters-input:hover,
.np-catalog .nintex-filters-select:hover {
border-color: var(--nintex--color--deep-purple);
}
.np-catalog .nintex-filters-input-wrapper:hover i,
.np-catalog .nintex-filters-input-wrapper:focus-within i,
.np-catalog .nintex-filters-input-wrapper:has(input:focus) i {
color: var(--nintex--color--deep-purple);
}
/* Learning Paths Page Specific Styles */
.np-learning-paths .nintex-filters-input:focus,
.np-learning-paths .nintex-filters-select:focus,
.np-learning-paths .nintex-filters-input:hover,
.np-learning-paths .nintex-filters-select:hover {
border-color: #8349a6;
}
.np-learning-paths .nintex-filters-input-wrapper:hover i,
.np-learning-paths .nintex-filters-input-wrapper:focus-within i,
.np-learning-paths .nintex-filters-input-wrapper:has(input:focus) i {
color: #8349a6;
}
.embla-container {
position: relative;
}
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
flex: 0 0 100%;
min-width: 0;
max-width: 100%;
display: flex;
}
.embla-buttons {
display: none;
}
@media screen and (min-width: 768px) {
.embla__container {
gap: 1rem;
}
.embla-buttons {
display: flex
;
justify-content: space-between;
align-items: center;
position: absolute;
width: calc(100% + 50px);
height: 100%;
left: -25px;
}
.embla-button {
background-color: transparent;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.embla-button svg {
transform: scale(2.5);
}
.embla-button--prev svg {
transform: rotate(180deg) scale(2.5);
}
.embla-button:hover {
transform: scale(1.1);
}
}
.header-search-input{
border: 2px solid #bac4ca;
border-radius: 4px;
color: #486776;
font-size: 15px;
opacity: 1;
outline: none;
padding: 0 56px 0 20px;
width: 100%;
height: 44px;
background-color: white;
}
.nintex-card-property-ribbons{
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
justify-content: flex-start;
position: absolute;
top: 30px;
}
.nintex-card-property-ribbon{
padding: 4px 8px 3px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
color: #333d44;
background-color: #e6e7eb;
}
.nintex-card-property-ribbon i{
font-size: 12px;
margin-right: 5px;
}
.nintex-course-rating{
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
}
.nintex-course-rating i{
color: #fdb705;
}
.np-learning-paths-resources-container{
border: none;
padding: 0;
}
#courses-progress, #learning-paths-progress{
margin-top: 59px;
}
#courses-progress {
margin-bottom: 50px;
}
.np-resource-title{
text-transform:none;
}
Reference in New Issue View Git Blame Copy Permalink