Thursday, 2 October 2025

Custom Region Scheme in Oracle Apex ( Custom CSS )

 .t-Footer{

    display: none;

}


.t-Header {

    background: white;

    display: none;

}



a.a-IRR-headerLink {

    color: white;

}


.a-IRR-header {

    background-color: #A6B28B;

    color: white;

}


.a-IRR-header:hover {

    background-color: #1C352D;

    color: white;

}


tr:nth-child(even) {

    background-color: #eef2ff;

}


tr:hover{

        --a-gv-row-hover-background-color: #c0c0c0;

}


.li .t-NavigationBar-item has-username {

  display: inline-block;

  white-space: normal;

  text-align: left;

  line-height: 1.2;

  color: black;

}



.t-Header-branding {

    align-items: center;

    background: linear-gradient(90deg, #1C352D, #A6B28B);

    border-bottom: var(--ut-header-border-width,1px) solid var(--ut-header-border-color);

    box-shadow: var(--ut-header-box-shadow);

    color: var(--ut-header-text-color);

    display: grid;

    gap: var(--ut-header-item-spacing,.5rem);

    grid-template-areas: "controls logo navbar";

    grid-template-columns: auto auto 1fr;

    min-height: var(--ut-header-height);

    padding-block-end:calc(var(--ut-header-padding-y, var(--ut-header-item-spacing, .5rem)) - var(--ut-header-border-width, 1px));padding-block-start: var(--ut-header-padding-y,var(--ut-header-item-spacing,.5rem));

    padding-inline-end:var(--ut-header-padding-x,var(--ut-header-item-spacing,.5rem));padding-inline-start: var(--ut-header-padding-x,var(--ut-header-item-spacing,.5rem));

    position: relative;

    

}


.t-Card-desc:hover{

    color: #1C352D;

}

    .t-Card-wrap:hover {

    opacity: 1;

    background-color: #f6efd2;

    transition: 1s;

    color: #1C352D;

}


.t-Cards--basic .t-Card-wrap,.t-Cards--compact .t-Card-wrap {

    display: grid;

    grid-template-areas: "cardlist-title cardlist-icon" "cardlist-body cardlist-body";

    grid-template-columns: 1fr auto;

   background-color: #f6efd2;

    grid-template-rows: auto 1fr

}



/*.u-Processing {

   display:none !important;

}*/


.t-Card-desc {

    flex-grow: 1;

    font-size: x-large;

    line-height: initial;

    text-align: left;

    color: #a36201;

}


.t-Region--accent2>.t-Region-header {

    --ut-region-header-background-color: #1C352D;

    --ut-region-header-text-color: #ffffff;

}


.t-Region--accent1>.t-Region-header {

    --ut-region-header-background-color: #909f6e;

    --ut-region-header-text-color: #ffffff;

}


.t-Region-header {

    --ut-region-header-background-color: #909f6e;

    --ut-region-header-text-color: #ffffff;

}



label#P44_PERIOD_LABEL {

    font-weight: 700;

    font-size: larger;

    padding-top: 0px;

}


.margin-top-none {

    margin-top: 0!important;

    padding-top: 0px;

}


div#P44_PERIOD {

    margin-top: 10px;

}



.t-Card-info {

    color: var(--ut-cardlist-info-color, var(--ut-component-text-muted-color));

    font-size: var(--ut-cardlist-info-font-size, 11px);

    margin-top: var(--ut-cardlist-info-margin-y, 12px);

    line-height: var(--ut-cardlist-info-line-height, 16px);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: end;

    font-weight: bold;

}


a {

    background-color: transparent;

    color: #a36201;

    text-decoration: none;

}



.t-Button{

    border-radius: 8px;

    transition: all 0.3s ease; /* Smooth transition for all properties */

    background: linear-gradient(10deg, #A6B28B, #1C352D);

    color: #ffffff;

}


.t-Button:hover{

    transform: translateY(-2px); /* move up by 2px on hover */

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* nice shadow effect */

   /* transform: 0 2px 1 rgba(0,0,0,0,0.15);*/

    padding-left: 20px;

    padding-right: 20px;

    background: #A6B28B;

    color: white;

}


.t-NavigationBar-item.has-username .t-Button-label {

    text-transform: uppercase;

}


.progress-bar {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

    -ms-flex-pack: center;

    justify-content: center;

    color: rgb(255, 255, 255);

    white-space: nowrap;

    background-color: #3b6256;

    transition: width .6s ease;

    transform-origin: left;

    animation: anim 3s;

}


.progress {

    display: -ms-flexbox;

    display: flex;

    height: .5rem;

    overflow: hidden;

    text-align:left;

    background-color: #A6B28B;

    border-radius: .20rem;

    font-size: initial;

    

}


@keyframes anim{

  from{

      width: 0%;

  }

};


.a-IRR-aggregate {

    background: #456b5a;

    color: white;

    font-weight: bold;

    font-size: medium;

}


.ui-draggable .ui-dialog-titlebar{


      transition: all 0.3s ease; /* Smooth transition for all properties */

    background: linear-gradient(10deg, #1C352D ,  #A6B28B);

    color: white;


}


.t-ButtonRegion-wrap{

    background: aliceblue;

}


.t-Dialog-body{


    background: lightgrey;

}


.t-Dialog-bodyWrapperIn{


     background: #b1b2b0;

 

}

.a-IG-header{


     transition: all 0.3s ease; /* Smooth transition for all properties */

    background: linear-gradient(10deg, #1C352D ,  #A6B28B);

    color: white;

}


.a-IRR-toolbar {


  transition: all 0.3s ease; /* Smooth transition for all properties */

    background: linear-gradient(10deg, #1C352D ,  #A6B28B);

    color: white;


}


.t-LoginPage--split .t-Login-container{


 transition: all 0.3s ease; /* Smooth transition for all properties */

    background: linear-gradient(10deg, #1C352D ,  #A6B28B);

    color: white;


}


.a-GV-row.is-grandTotal .a-GV-cell {   

    font-weight: bold;

    font-size: large;

   

}

No comments:

Post a Comment

Check Internet Connectivity on Local System

if (!navigator.onLine) {     showOfflineAlert(); } else {     // Set a strict 3-second network timeout threshold     const controller = new ...