Sucal best Dark Mode
sucalcodelco.com by Adaptaweb
Details
AuthorAdaptaweb
LicenseNo License
Categorydark mode
Created
Updated
Size16 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Alejandro Tamayo
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name sucalcodelco.com
@version 20250219.19.40
@namespace https://userstyles.world/user/Adaptaweb
@description Sucal best Dark Mode
@author Adaptaweb
@license No License
==/UserStyle== */
@-moz-document url-prefix("https://sucalcodelco.com") {
:root {
color-scheme: dark;
}
html, body {
font-family: Lato, sans-serif;
height: 100%;
margin: 0;
font-size: 14px;
font-weight: 400;
color: #fffc;
padding: 0;
min-height: 100%;
background-color: #0C0C0C;
}
.form-container {
background: #262626 !important;
display: flex
;
flex-direction: column;
padding: 0 60px;
height: 100%;
width: 100%;
justify-content: center;
text-align: center;
}
.ng-invalid{
background: #262626 !important;
}
.ng-valid{
background: #262626 !important;
}
.p-input-icon-left>i:first-of-type {
left: .5rem;
color: #cecece;
}
.p-input-icon-right>i:last-of-type {
right: .5rem;
color: #cecece;
}
.layout-menu-dark .menu-wrapper {
background-color: #171717;
box-shadow: 0 10px 40px #2932410f;
}
.layout-topbar-light .layout-topbar .layout-topbar-wrapper {
height: 100%;
display: flex;
align-items: center;
background: #262626;
}
.layout-rightpanel {
position: fixed;
z-index: 1000;
right: 0;
top: 62px;
height: calc(100% - 62px);
padding: 0;
width: 418px;
overflow: auto;
background-color: #3e3e3e;
transform: translate(418px);
transition: transform .2s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 10px 40px #2932410f;
}
.p-listbox {
background: #E35415;
color: #69707a;
border: 1px solid #D4D6D9;
}
.p-dropdown {
background: #373737;
border: 1px solid #4e4e4e;
transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
border-radius: 6px;
}
.p-dropdown .p-dropdown-label.p-placeholder {
color: #fff;
background: #373737;
}
.p-dropdown .p-dropdown-clear-icon {
color: #fff;
}
.p-dropdown .p-dropdown-trigger {
background: #373737;
color: #fff ;
width: 2.357rem;
}
.p-dropdown-panel {
background: #373737;
color: #fdfdfd ;
box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
}
.p-dropdown-panel .p-dropdown-header {
padding: .5rem 1rem;
border-bottom: 0 none;
color: #f1f2f4;
background: #373737;
}
.p-inputtext {
color: #fff !important;
background: #3e3e3e;
padding: .5rem;
border: 1px solid #4e4e4e;
transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
-webkit-appearance: none;
appearance: none;
border-radius: 6px;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
margin: 0;
padding: .5rem 1rem;
border: 0 none;
color: #f7f7f7;
background: transparent;
transition: box-shadow .2s;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
color: #fff;
background: #555
}
.card {
background: #262626;
padding: 20px;
color:#FFFFFF !important;
box-sizing: border-box;
box-shadow: 0 10px 40px #2932410f;
border-radius: 6px;
margin-bottom: 2rem;
}
.p-datatable .p-datatable-header {
background: #262626;
color: #f7f7f7;
border: 1px solid rgba(227, 84, 21, .2);
border-width: 1px 0 1px 0;
padding: 1rem;
font-weight: 600;
}
.p-datatable .p-datatable-thead>tr>th {
text-align: left;
padding: 1rem;
border: 1px solid rgba(227, 84, 21, 5);
border-width: 0 0 1px 0;
font-weight: 600;
color: #fbfbfb;
background: #2d2d2d;
transition: box-shadow .2s;
}
.p-datatable .p-datatable-tbody>tr {
background: #3e3e3e;
color: #f0f1f2;
transition: box-shadow .2s;
outline-color: #ffa858;
}
.p-paginator {
background: #2d2d2d;
color: #e1e1e1;
border: solid rgba(227, 84, 21, .2);
padding: .5rem 1rem;
}
.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):hover {
background: rgba(91, 91, 91, .2);
color: #d9d9d9;
}
.p-card {
background: #262626;
color: #e6e6e6;
box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f;
border-radius: 6px;
}
.p-dropdown .p-dropdown-label {
background: #3e3e3e;
border: 0 none;
}
.p-tabview .p-tabview-nav {
background: #262626;
border: 1px solid #262626;
border-width: 0 0 2px 0;
}
.p-tabview .p-tabview-panels {
background: #2f2f2f;
padding: 1rem;
border: 0 none;
color: #fff;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
background: #2f2f2f;
border-color: #e35415;
color: #f5f5f5;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link {
border: solid #e35415;
border-width: 0 0 2px 0;
border-color: transparent transparent #2f2f2f transparent;
background: #3c3c3c;
color: #83888f;
padding: 1rem;
font-weight: 600;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
transition: box-shadow .2s;
margin: 0 0 -2px;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #525252;
border-color: #83888f;
color: #b8b8b8
}
.customMessage {
background-color: #658986;
border: solid #0a746b;
border-width: 1px;
color: #000 !important;
border-radius: 10px;
}
.text-900{
color: #fff !important;
}
.profile-avatar {
border: 5px solid #FF7F50; /* Borde coral */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
transition: transform 0.3s, box-shadow 0.3s; /* Transición para transformaciones y sombras */
}
.profile-avatar:hover {
transform: scale(1.1); /* Aumenta el tamaño al pasar el cursor */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}
.p-disabled, .p-component:disabled {
opacity: .5;
}
.p-input-icon-right>i:last-of-type {
right: .5rem;
color: #fff;
}
.p-button {
border-color: #d1d5db00 !important;
}
.p-button.p-button-outlined {
background-color: #e35415;
border: solid #e35415;
color: #fff !important;
}
.p-button.p-button-outlined:enabled:hover {
background: #e35415ad;
border: solid #e35415ad;
color: #f4f4f4;
}
.p-button.p-button-outlined.p-button-plain {
color: #83888f;
border-color: #83888f
}
.bordeContrato[_ngcontent-iwg-c309] {
background-color: #ffff f;
border: solid #404040;
border-width: 1px;
color: #fff;
border-radius: 10px;
}
.button-detalle:hover {
background: rgb(255, 130, 76) !important;
border-color: #e35415 !important;
color: #fff !important;
}
.p-virtualscroller .p-virtualscroller-content {
background: #ffffff;
color: #69707a;
border: 0 none;
padding: 0;
}
.p-datatable .p-datatable-tbody>tr>td {
text-align: left;
border: 1px solid rgba(151, 151, 151, .2);
border-width: 0 0 1px 0;
padding: 1rem;
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
background: #2d2d2d;
border-radius: 10px;
}
.p-overlaypanel {
background: #2d2d2d;
color: #69707a;
border: 0 none;
border-radius: 6px;
box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f;
}
.p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success>.p-button.p-button-outlined, .p-splitbutton.p-button-success>.p-button.p-button-outlined {
background-color: #689f38;
color: #FFF;
border: 0px;
}
.p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger>.p-button.p-button-outlined, .p-splitbutton.p-button-danger>.p-button.p-button-outlined {
background-color: #d32f2f;
color: #FFF;
border: 0px solid;
}
.swal2-popup {
display: none;
position: relative;
box-sizing: border-box;
grid-template-columns: minmax(0, 100%);
width: 32em;
max-width: 100%;
padding: 0 0 1.25em;
border: none;
border-radius: 5px;
background: #3e3e3e;
color: #fff;
font-family: inherit;
font-size: 1rem;
}
.p-multiselect {
background: #3e3e3e;
border: 1px solid #373737;
transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
border-radius: 6px;
color:#FFF;
}
.p-multiselect .p-multiselect-label.p-placeholder {
color: #fff;
}
.p-multiselect-panel .p-multiselect-header {
padding: .5rem 1rem;
border-bottom: 0 none;
color: #fff;
background: #3e3e3e;
margin: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.p-multiselect-panel {
background: #3e3e3e;
color: #FFF !important;
border: 0 none;
border-radius: 6px;
box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
margin: 0;
padding: .5rem 1rem;
border: 0 none;
color: #e5e5e5;
background: transparent;
transition: box-shadow .2s;
border-radius: 0;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #fff;
background: rgba(227, 84, 21, .78);
}
.p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info>.p-button.p-button-outlined, .p-splitbutton.p-button-info>.p-button.p-button-outlined {
background-color: #0288d1;
color: #fff !important;
border: 1px solid #0288d1;
}
.p-button.p-button-info.p-button-outlined:enabled:hover,.p-buttonset.p-button-info>.p-button.p-button-outlined:enabled:hover,.p-splitbutton.p-button-info>.p-button.p-button-outlined:enabled:hover {
background: #0288d1a8;
color: #0288d1;
border: 1px solid #0288d1a8;
}
.p-accordion p-accordiontab:first-child .p-accordion-header .p-accordion-header-link {
border-top-right-radius: 6px;
border-top-left-rad...