improve

src/app/pages/gabinete-digital/gabinete-digital.page.scss

@@ -1,14 +1,14 @@
 ion-content{
   /*  --padding-top:15px; */
-/*   --padding-end:15px;
+ /*   --padding-end:15px;
    --padding-start:15px; */
   /*  --padding-bottom:15px; */
    /* --background:#ecf8ff; */
-}
+ }
-ion-segment{
+ ion-segment{
    overflow: auto;
-}
+ }
-ion-segment-button{
+ ion-segment-button{
    margin: 0 auto !important;
    padding: 0 !important;
  
@@ -19,8 +19,8 @@ ion-segment-button{
  
    min-height: 25px;
    min-width: 25px;
-}
+ }
-:host{
+ :host{
    // background: #0782c9;
    ion-card-title {
      text-align: center;
@@ -62,6 +62,7 @@ ion-segment-button{
      border-radius: 20px;
    }
    ion-item{
+     --ion-background-color:#dae3f3;
      margin-bottom: 10px;
      border-radius: 5px;
    }
@@ -74,13 +75,13 @@ ion-segment-button{
    ion-label{
      padding: 10px;
    }
-}
+ }
-.ion-item-change-color{
+ .ion-item-change-color{
    --ion-background-color:#fff2cc !important;
    margin-bottom: 10px;
    border-radius: 5px;
-}
+ }
-.div-top-header{
+ .div-top-header{
    width: 400px;
    margin: 0 auto;
    background-color: #0782c9;
@@ -107,11 +108,11 @@ ion-segment-button{
      float: right;
      margin-right: 10px;
    }
-}
+ }
  
  
-/* NEW CSS */
+ /* NEW CSS */
-.main-content {
+ .main-content {
    width: 100%; /* 400px */
    height: 100%;
    font-family: Roboto;
@@ -154,8 +155,8 @@ ion-segment-button{
        user-select: none;
        background:  white;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-      width: 90%;
+       width: 360px;
-      margin: 0px 7px;
+       margin: 7px 20px;
        border-radius: 15px;
        padding: 7px;
        border:1px solid white;
@@ -224,32 +225,32 @@ ion-segment-button{
      }
  
    }
-}
+ }
-.title-content{
+ .title-content{
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 !important;
    background: transparent;
-}
+ }
-.div-title{
+ .div-title{
    padding: 0!important;
    float: left;
-}
+ }
-.title{
+ .title{
    font-size: 25px;
-}
+ }
-.div-icon{
+ .div-icon{
    float: right;
    font-size: 35px;
    overflow: auto;
-}
+ }
  
-/* New list view CSS */
+ /* New list view CSS */
-ion-list{
+ ion-list{
    background: transparent;
-}
+ }
-.item-wrapper{
+ .item-wrapper{
    border-radius: 15px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
    border:1px solid #e9e9e9 !important;
@@ -380,22 +381,22 @@ ion-list{
        margin-bottom: 5px;
      }
    }
-}
+ }
  
  
-@media only screen and (min-width: 561px) {
+ @media only screen and (min-width: 561px) {
    .exp-card-long{
      width: 547px !important;
    }
-}
+ }
-/* @media only screen and (min-width: 749px) {
+ /* @media only screen and (min-width: 749px) {
    .exp-card-long{
      width: 734px !important;
    }
-} */
+ } */
  
  
-@media only screen and (min-width: 701px) {
+ @media only screen and (min-width: 701px) {
    ion-content{
      --background: transparent;
    }
@@ -439,7 +440,7 @@ ion-list{
        }
        .exp-card-long{
          //display: none;
-        width: 90% !important;
+         width: 100% !important;
          cursor: pointer;
          user-select: none;
          background:  white;
@@ -512,9 +513,9 @@ ion-list{
        margin-top: 0px !important;
      }
    }
-}
+ }
  
-@media only screen and (min-width: 801px) {
+ @media only screen and (min-width: 801px) {
    .title{
      font-size: 25px !important;
    }
@@ -530,16 +531,16 @@ ion-list{
      font-size: 25px;
      text-align: left;
    }
-}
+ }
-@media only screen and (min-width: 1024px){
+ @media only screen and (min-width: 1024px){
    .content{
      width: 70%;
    }
    .aside-right{
      width: 30%;
    }
-}
+ }
-@media only screen and (min-width: 1140px) {
+ @media only screen and (min-width: 1140px) {
    .div-icon{
      display: none;
    }
@@ -550,10 +551,10 @@ ion-list{
    .aside-right{
      width: 25%;
    }
-}
+ }
  
  
-.active {
+ .active {
    color: white !important;
    fill: white !important;
    border: var(--gabinete-active-hove-box-border) !important;
@@ -583,94 +584,20 @@ ion-list{
           fill: rgb(255, 255, 255) !important
      }
    }
-}
+ }
  
-.active ion-icon::part(button) {
+ .active ion-icon::part(button) {
    color: white !important;
    fill: rgb(255, 255, 255) !important;
-}
+ }
  
-.active ion-icon::part(native) {
+ .active ion-icon::part(native) {
    color: white !important;
    fill: rgb(255, 255, 255) !important;
-}
+ }
  
-.active ion-icon{
+ .active ion-icon{
    color: white !important;
    fill: red !important;
-}
-
-ion-item.item {
-  background-color: white !important;
-}
-
-.item{
-  width: 100% !important;
-  padding: 0px 20px 0 20px !important;
-  border-bottom: 1px solid #ebebeb !important;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row;
-  background-color: transparent;
-  overflow: auto;
-
-  .item-icon{
-    //margin-top: 28px;
-    width: 45px;
-    float: left;
-    font-size: 40px;
-
-    .item-icon ion-icon{
-      color: #061b52;
-    }
-  }
-  .item-icon2{
-    //margin-top: 23px;
-    width: 45px;
-    float: left;
-    font-size: 40px;
  }
  
-  .item-content{
-    width: 100%;
-    padding: 15px 0 15px 10px;
-    overflow: auto;
-    margin-right: 5px;
-
-    p{
-      white-space: nowrap;
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-    }
-
-    .item-content-date{
-      color: #797979;
-      font-size: 13px;
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-    .item-content-title{
-      color: var(--title-text-color);
-      font-size: 15px;
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-    .item-content-detail{
-      color: #000000;
-      font-size: 13px;
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-    .item-options{
-      color: var(--box-hover-background-color);
-      width: 25px;
-      font-size: 20px;
-    }
-    .item-content-date-active, .item-content-title-active, .item-content-detail-active{
-      color: #fff;
-    }
-  }
-  .item-options-active{
-    display: none !important;
-  }
-}