@charset "utf-8";
:root{
interpolate-size: allow-keywords;
--rp-green: #1FA95B;
--rp-red: #D93838;
--rp-blue: #1E40AF;
--rp-nol: #71717A;
}
*,*::before,*::after{
box-sizing: border-box;
}
*{
margin: 0;
padding: 0;
font: inherit;
}
.debug * {
background: rgb(0 100 0 / 0.1) !important;
outline: 1px dotted rgba(0,128,0,.5) !important;
}
@font-face{font-family:Lexend;src:url(fonts/Lexend-VariableFont_wght.ttf);}
@font-face {
font-family: Roboto-Mono;
src: url(fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf);
}
html{
scrollbar-gutter: stable;
}
body{
min-height: 100dvh;
}
input,div,textarea,select{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
outline: none;
}
input,textarea,select,textarea{
padding: 10px;
width: 100%;
}
textarea{
height: 100px;
padding: 10px;
outline: none;
font-weight: 300;
font-size: 0.8rem;
}
input[type="button"]{
cursor: pointer;
width: auto;
}
input[type="date"],
.date-input {
padding: 8px 10px;
border: 1px solid #d8d8d8;
border-radius: 4px;
background: #fff;
color: #333;
outline: none;
transition: border-color .15s ease;
width: auto;
}
input[type="date"]:hover,
.date-input:hover {
border-color: #c0c0c0;
}
input[type="date"]:focus,
.date-input:focus {
border-color: #6f9dd8;
}
input[type="date"]:disabled,
.date-input:disabled {
background: #f7f7f7;
color: #999;
cursor: not-allowed;
}
.xinput-astext {
border: none;
border-bottom: 1px solid #000;
background: transparent;
outline: none;
padding: 0 0 1px;
margin: 0 4px;
font-size: inherit;
font-family: inherit;
color: inherit;
width: auto;
min-width: 3ch;
text-align: center;
}
.xinput-astext:focus {
outline: none;
box-shadow: none !important;
}
.xcheckbox,
.xradio {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0;
/* Label */
label {
line-height: 1.4em;
cursor: pointer;
padding-top: 1px;
border-radius: 4px;
transition:
color 0.15s ease,
background-color 0.15s ease,
opacity 0.15s ease;
/* Hover label */
&:hover {
background-color: rgba(0, 0, 0, 0.05);
opacity: 0.95;
}
}
/* Checkbox */
input[type="checkbox"],
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 1em;
height: 1em;
border: 2px solid #6b7280;
border-radius: 4px;
background-color: #ffffff;
cursor: pointer;
margin-top: 2px;
position: relative;
padding: 6px;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
/* Hover effect */
&:hover {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
&:checked {
background-color: #4f46e5;
border-color: #4f46e5;
&::after {
content: "";
position: absolute;
/* UPDATED (sesuai permintaan) */
width: 0.4em;
height: 0.6em;
top: 0.1em;
left: 0.35em;
border: solid white;
border-width: 0 0.18em 0.18em 0;
transform: rotate(45deg);
}
}
}
/* ====================== COLOR VARIANTS ====================== */
&.green input[type="checkbox"]:checked {
background-color: #22c55e;
border-color: #22c55e;
}
&.blue input[type="checkbox"]:checked {
background-color: #3b82f6;
border-color: #3b82f6;
}
&.yellow input[type="checkbox"]:checked {
background-color: #eab308;
border-color: #eab308;
}
&.red input[type="checkbox"]:checked {
background-color: #ef4444;
border-color: #ef4444;
}
&.purple input[type="checkbox"]:checked {
background-color: #a855f7;
border-color: #a855f7;
}
&.black input[type="checkbox"]:checked {
background-color: #000000;
border-color: #000000;
}
&.grey input[type="checkbox"]:checked {
background-color: #6b7280;
border-color: #6b7280;
}
&.white input[type="checkbox"]:checked {
background-color: #ffffff;
border-color: #d1d5db;
input[type="checkbox"]:checked::after {
border-color: #000000;
}
}
}
img,picture,svg,video{
max-width: 100%;
display: block;
}
a{text-decoration:none;cursor: pointer;}
a:visited,
a:hover,
a:active,
a:focus,
a:link {
color: inherit;
}
p{text-wrap: pretty;}
/* GRID */
.xcol-2,.mcol-2,.xcol-3,.mcol-3,.xcol-4,.mcol-4{display: grid}
.xcol-1-2,.mcol-1-2{
display: grid;
grid-template-columns: 1fr 2fr;
}
.xcol-2,.mcol-2,.xcol-2-2-1,.xcol-2-1-1{grid-template-columns: 1fr 1fr;}
.xcol-3,.mcol-3,.mcol-3-2,.xcol-3-3-1,.xcol-3-2-1{
grid-template-columns: repeat(3, 1fr);}
.xcol-4,.mcol-4,.mcol-4-2,.xcol-4-3-2,.xcol-4-3-1,.xcol-4-2-1,.xcol-4-4-2,.xcol-4-4-1{
grid-template-columns: repeat(4, 1fr);}
.xcol-5,.mcol-5,.mcol-5-2,.mcol-5-3{grid-template-columns: repeat(5, 1fr);}
.xcol-6,.mcol-6,.mcol-6-2{grid-template-columns: repeat(6, 1fr);}
.xcol-8,.mcol-8,.mcol-8-2,.xcol-8-5-2{
grid-template-columns: repeat(8, 1fr);}
.xcol-2-1,.mcol-2-1{
display: grid;
grid-template-columns: 2fr 1fr;
}
.xcol-12,.mcol-12{grid-template-columns: repeat(12, 1fr)}
.xcol-f21,.xcol-f21-21-1{
grid-template-columns: 2fr 1fr;
}
.xcol-f31-21-1{
grid-template-columns: 3fr 1fr;
}
.xcol-1f-2f,.mcol-1f-2f,.xcol-f-12-12-1{grid-template-columns: 1fr 2fr}
.xcol-2f-1f,.mcol-2f-1f{grid-template-columns: 2fr 1fr}
.xcol-6f-4f,.mcol-6f-4f{grid-template-columns: 6fr 4fr;}
.xcol-1f-2f-1f,.mcol-1f-2f-1f{grid-template-columns: 1fr 2fr 1fr}
.xcol-custom{
display: grid;
grid-template-columns: var(--fr);
}
.mcol-autofill{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.xgap{
gap: var(--xgap);
}
.x-inline{
display: inline-flex;
align-items: center;
gap: 6px;
}
.lr {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
@media (max-width: 1024px) {
.xcol-f31-21-1{
grid-template-columns: 2fr 1fr;
}
.xcol-8-5-2{
grid-template-columns: repeat(5, 1fr);
}
.xcol-4-3-2,
.xcol-3-3-1{
grid-template-columns: repeat(3, 1fr);
}
.xcol-4-2-1,.xcol-3-2-1{
grid-template-columns: repeat(2, 1fr);
}
.xcol-2-1-1{
grid-template-columns: 1fr;
}
.xcol-f-12-12-1{
grid-template-columns: 1fr 2fr;
}
}
@media (max-width: 480px) {
.xcol-8-5-2,
.xcol-4-4-2,
.xcol-4-3-2{
grid-template-columns: repeat(2, 1fr);
}
.xcol-4-4-1,.xcol-2-2-1,.xcol-3-3-1,.xcol-4-2-1,
.xcol-f21-f21-f1,.xcol-f31-21-1,.xcol-f-12-12-1{
grid-template-columns: 1fr;
}
}
/* FONT SIZE */
body{
.fs-06{font-size: 0.6rem}
.fs-065{font-size: 0.65rem}
.fs-07{font-size: 0.7rem}
.fs-08{font-size: 0.8rem}
.fs-09{font-size: 0.9rem}
.fs-1{font-size: 1rem}
.fs-11{font-size: 1.1rem}
.fs-12{font-size: 1.2rem}
.fs-13{font-size: 1.3rem}
.fs-14{font-size: 1.4rem}
.fs-15{font-size: 1.5rem}
.fs-16{font-size: 1.6rem}
.fs-17{font-size: 1.7rem}
.fs-18{font-size: 1.8rem}
.fs-2{font-size: 2rem}
.fs-3{font-size: 3rem}
.fw-300{font-weight: 300 !important}
.fw-400{font-weight: 400 !important}
.fw-600{font-weight: 600 !important}
.ff-custom{font-family: var(--ff);}
.number{font-family: Roboto-Mono;}
.h1{
font-size: 180%;
line-height: 2.2rem;
}
.h2{
font-size: 140%;
line-height: 1.8rem;
}
.h3{
font-size: 120%;
line-height: 1.4rem;
}
.h1,.h2,.h3{
&.green{
color: #19d284;
}
&.blue{
color: #18a8ee;
}
&.yellow {
color: #f4c430;
}
&.red {
color: #ff4d4f;
}
&.purple {
color: #8b5cf6;
}
&.orange {
color: #fb923c;
}
&.teal {
color: #14b8a6;
}
&.pink {
color: #ec4899;
}
&.gray {
color: #64748b;
}
}
@media (max-width: 1024px) {
.h1{
font-size: 150%;
line-height: 1.9rem;
}
}
@media (max-width: 480px) {
.h1{
font-size: 120%;
line-height: 1.5rem;
}
}
}
/* FONT PROPERTY */
/* MOBILE */
.fs-m-14{font-size: 1.4rem}
.fs-m-15{font-size: 1.5rem}
.fs-m-16{font-size: 1.6rem}
.fs-m-17{font-size: 1.7rem}
.fs-m-18{font-size: 1.8rem}
.fs-m-2{font-size: 2rem}
/* LINK */
/* pastikan teks & icon sejajar */
a .link{
display: inline-flex;
align-items: center;
gap: 4px; /* jarak icon - teks */
position: relative;
}
/* pseudo icon */
a .link::before{
content: "";
font-family: "Font Awesome 6 Pro";
font-weight: 900;
font-size: 0.95em;
line-height: 1;
--fa-primary-opacity: 1;
--fa-secondary-opacity: .35;
}
a:hover .link::before{
transform: translateX(-2px) scale(1.05);
opacity: 1;
}
/* PDF */
a[href$=".pdf"] .link::before{
content: "\f1c1"; /* file-pdf */
color: #e53935;
}
a[href$=".xls"] .link::before,
a[href$=".xlsx"] .link::before{
content: "\f1c3"; /* file-excel */
color: #2e7d32;
}
a[href$=".doc"] .link::before,
a[href$=".docx"] .link::before{
content: "\f1c2"; /* file-word */
color: #1565c0;
}
a[href$=".ppt"] .link::before,
a[href$=".pptx"] .link::before{
content: "\f1c4";
color: #d84315;
}
/* ZIP */
a[href$=".zip"] .link::before,
a[href$=".rar"] .link::before,
a[href$=".7z"] .link::before,
a[href$=".gz"] .link::before{
content: "\f1c6";
color: #6d4c41;
}
/* WIDTH */
.w100{width: 100%}
.mw-320,.mw-500,.mw-700,.mw-1000, .mw-1200{
width: 100%;
}
.mw-320{max-width: 320px;}
.mw-500{max-width: 500px;}
.mw-600{max-width: 600px;}
.mw-700{max-width: 700px;}
.mw-800{max-width: 800px;}
.mw-1000 {max-width: 1000px;}
.mw-1200 {max-width: 1200px;}
.mh-200{max-height: 200px;}
.mh-300{max-height: 300px;}
.mw-custom{max-width: var(--mw);}
.mh-custom{max-height: var(--mh);}
.xw{width: var(--xw);}
.xh{height: var(--xh);}
/* BARIS */
.xline{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
.xline-2{
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* IMAGE FIX */
.ximage{
img{
object-fit: cover;
}
.circle{border-radius: 100%}
.square-200{
width: 200px;
height: 200px;
}
.square-250{
width: 250px;
height: 250px;
}
.square-300{
width: 300px;
height: 300px;
}
}
.enter{
padding: 10px 0;
}
.enter-2{padding: 20px 0;}
.enter-4{padding: 40px 0;}
.enter-6{padding: 60px 0;}
.enter-8{padding: 80px 0;}
/* BHVR */
.left,.xleft{
display: grid;
text-align: left;
justify-content: flex-start;
}
.right{
text-align: right;
justify-content: end;
align-content: center;
.div-select{
display: grid;
justify-content: end;
select{
width: max-content;
background: transparent;
border: solid 1px #ccc;
padding: 5px 10px;
cursor: pointer;
}
}
}
.xmiddle{
display: grid;
align-content: center;
align-items: center;
}
.xsquare{
aspect-ratio: 1/1;
object-fit: cover;
}
.xcircle{
border-radius: 100%;
}
.xrounded-5{
border-radius: 5px;
border: solid 1px #e8e8e8;
}
.xrounded-10{
border-radius: 10px;
}
.img-40{
width: 40px;
height: 40px;
max-width: 40px;
max-height: 40px;
object-fit: cover;
img{
width: 40px;
height: 40px;
max-width: 40px;
max-height: 40px;
object-fit: cover;
}
}
.img-50{
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
object-fit: cover;
}
.xcursor{
cursor: pointer;
}
/* SECTION */
body{
section{
width: 100%;
}
.section-80{
width: 80%;
margin: auto;
}
.section-80-90-100{
width: 80%;
margin: auto;
}
.section-80-90{
width: 80%;
margin: auto;
}
@media (max-width: 1024px) {
.section-80-90{width: 90%;}
.section-80-90-100{width: 90%;}
}
@media (max-width: 480px) {
.section-80-90-100{width: 100%;}
}
}
/* ELEMENTS */
/* BUTTON */
.btn-clickable{
box-shadow: #094c66 4px 4px 0 0;
transition: transform 200ms, box-shadow 2s;
}
.btn-clickable:active{
transform: translateY(4px) translateX(4px);
box-shadow: #094c66 0px 0 0 0;
}
/* BOF */
.xbutton {
--fg: #fff;
--radius: 12px;
--shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
--press-scale: 0.96;
--glow: rgba(255, 255, 255, 0.25);
--speed: 0.25s;
appearance: none;
border: none;
border-radius: var(--radius);
padding: 12px 20px;
font-size: 0.8rem;
font-family: system-ui, sans-serif;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition:
transform var(--speed) ease,
box-shadow var(--speed) ease,
filter var(--speed) ease,
background .2s ease,
color .2s ease,
border-color .2s ease;
box-shadow: var(--shadow);
outline: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
&:focus-visible{
outline: 2px solid royalblue;
outline-offset: 2px;
}
i{
width: auto;
font-size: 130%;
}
/* warna yang pakai var(--fg) */
&.green,
&.blue,
&.gold,
&.purple,
&.lightblue,
&.orange,
&.red {
color: var(--fg);
}
/* warna dengan color spesifik */
&.yellow { color: #3a2f00; }
&.pink { color: #3a0030; }
&.grey {color: #2b2b2b;}
/* white: warna khusus */
&.white {
border: 1px solid #e2e8f0 !important;
background-color: #f8fafc !important;
color: #2d3748 !important;
}
/* background masing-masing */
&.green {
background: linear-gradient(135deg, #51e88c, #1fa95b);
}
&.red {
background: linear-gradient(135deg, #ff6b6b, #d93838);
}
&.black {
background: linear-gradient(135deg, #3a3a3a, #111);
color: #f5f5f5;
}
&.blue {
background: linear-gradient(135deg, #5ea3ff, #3c6df0);
}
&.yellow {
background: linear-gradient(135deg, #ffe680, #f5c400);
}
&.purple {
background: linear-gradient(135deg, #b37aff, #6d3af0);
}
&.lightblue {
background: linear-gradient(135deg, #a8e0ff, #5bbef0);
}
&.orange {
background: linear-gradient(135deg, #ffb347, #ff7b00);
}
&.pink {
background: linear-gradient(135deg, #ff9ecd, #ff5fa2);
}
&.gold {
background: linear-gradient(135deg, #ffd700, #b8860b);
}
&.grey{
background: linear-gradient(135deg, #d9d9d9, #9f9f9f);
}
&.teal {
background: linear-gradient(135deg, #2dd4bf, #0f766e);
color: #ecfeff;
}
&:active {
transform: translateY(0);
}
&::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transition: left .5s ease;
}
&:hover::before {
left: 150%;
}
/* #region SECONDARY */
&.green-line {
background: #fff;
border: 1px solid #1fa95b;
color: #1fa95b;
&:hover {
background: linear-gradient(135deg, #51e88c, #1fa95b);
color: #fff;
}
}
&.red-line {
background: #fff;
border: 1px solid #d93838;
color: #d93838;
&:hover {
background: linear-gradient(135deg, #ff6b6b, #d93838);
color: #fff;
}
}
&.black-line {
background: #fff;
border: 1px solid #111;
color: #111;
&:hover {
background: linear-gradient(135deg, #3a3a3a, #111);
color: #fff;
}
}
&.blue-line {
background: #fff;
border: 1px solid #3c6df0;
color: #3c6df0;
&:hover {
background: linear-gradient(135deg, #5ea3ff, #3c6df0);
color: #fff;
}
}
&.yellow-line {
background: #fff;
border: 1px solid #f5c400;
color: #c99800;
&:hover {
background: linear-gradient(135deg, #ffe680, #f5c400);
color: #111;
}
}
&.purple-line {
background: #fff;
border: 1px solid #6d3af0;
color: #6d3af0;
&:hover {
background: linear-gradient(135deg, #b37aff, #6d3af0);
color: #fff;
}
}
&.lightblue-line {
background: #fff;
border: 1px solid #5bbef0;
color: #2899d8;
&:hover {
background: linear-gradient(135deg, #a8e0ff, #5bbef0);
color: #111;
}
}
&.orange-line {
background: #fff;
border: 1px solid #ff7b00;
color: #ff7b00;
&:hover {
background: linear-gradient(135deg, #ffb347, #ff7b00);
color: #fff;
}
}
&.pink-line {
background: #fff;
border: 1px solid #ff5fa2;
color: #ff5fa2;
&:hover {
background: linear-gradient(135deg, #ff9ecd, #ff5fa2);
color: #fff;
}
}
&.gold-line {
background: #fff;
border: 1px solid #b8860b;
color: #b8860b;
&:hover {
background: linear-gradient(135deg, #ffd700, #b8860b);
color: #111;
}
}
&.grey-line {
background: #fff;
border: 1px solid #9f9f9f;
color: #6b6b6b;
&:hover {
background: linear-gradient(135deg, #d9d9d9, #9f9f9f);
color: #111;
}
}
&.teal-line {
background: #fff;
border: 1px solid #0f766e;
color: #0f766e;
&:hover {
background: linear-gradient(135deg, #2dd4bf, #0f766e);
color: #ecfeff;
}
}
/* #endregion SECONDARY */
&:disabled,
&.disabled {
opacity: .55;
filter: grayscale(30%);
cursor: not-allowed;
pointer-events: none;
/* kalau tombol ingin warna lebih pudar */
/* background-color: #dcdcdc !important; */
}
&.lite{
padding: 6px 8px;
font-size: 0.7rem;
font-weight: 300;
}
}
.xbutton.attention {
animation: xbtn-lift 1.8s ease-in-out infinite;
}
@keyframes xbtn-lift {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.xbutton.shake {
animation: xbtn-shake 3s ease-in-out infinite;
}
@keyframes xbtn-shake {
0%, 90%, 100% { transform: translateX(0); }
92% { transform: translateX(-2px); }
94% { transform: translateX(2px); }
96% { transform: translateX(-2px); }
98% { transform: translateX(2px); }
}
.xbutton.ring {
animation: xbtn-ring 2s ease-out infinite;
}
@keyframes xbtn-ring {
0% {
box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
}
70% {
box-shadow: 0 0 0 6px rgba(0,0,0,0);
}
100% {
box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
}
/* FLASHING */
.xflash {
position: relative;
overflow: hidden;
padding: 12px 16px;
/*border-radius: 8px;
background: rgb(232, 232, 232);*/
transition: background 0.4s ease;
&.flashing {
animation: flashGlow 1.2s ease-out;
}
&.flashing::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0.6) 50%,
transparent 100%
);
transform: skewX(-20deg);
animation: shimmer 0.9s ease-out forwards;
}
}
/* Glow lembut */
/* Efek kilau menyapu */
/* Animations */
@keyframes shimmer {
to {
left: 130%;
}
}
@keyframes flashGlow {
0% {
box-shadow: 0 0 0px rgba(0, 150, 255, 0);
background: rgba(0, 150, 255, 0.18);
}
50% {
box-shadow: 0 0 18px rgba(0, 150, 255, 0.25);
}
100% {
box-shadow: 0 0 0px rgba(0, 150, 255, 0);
background: rgba(0, 150, 255, 0.08);
}
}
/* BLIMP */
.blimp{
transition: color .2s ease;
&.updating {
animation: blimpblimp .8s ease-out;
}
}
@keyframes blimpblimp {
0% {
background: rgba(16, 185, 129, .25);
}
100% {
background: transparent;
}
}
.xselect{
border: 1px solid #e2e8f0;
border-radius: 8px;
background-color: #f8fafc;
font-size: 0.8rem;
color: #2d3748;
transition: all 0.3s ease;
font-weight: 300;
width: auto;
&.green,
&.blue,
&.purple,
&.lightblue,
&.red {
color: #fff;
}
&.green {
background: linear-gradient(135deg, #51e88c, #1fa95b);
}
&.red {
background: linear-gradient(135deg, #ff6b6b, #d93838);
}
&.blue {
background: linear-gradient(135deg, #5ea3ff, #3c6df0);
}
&.orange {
background: linear-gradient(135deg, #ffb347, #ff7b00);
}
}
select.xbutton{
appearance: auto;
}
.xbutton::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
background: var(--glow);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition:
width 0.45s ease,
height 0.45s ease,
opacity 0.6s ease;
}
.xbutton:hover {
filter: brightness(1.06);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.xbutton:active {
transform: scale(var(--press-scale));
}
.xbutton:active::after {
width: 220%;
height: 220%;
opacity: 0.3;
}
.xbutton:focus-visible,
.xbutton:focus {
outline: 2px solid rgba(110, 150, 255, 0.18);
outline-offset: 3px;
border: none !important;
box-shadow: none !important;
}
.xbutton:not(:active)::after {
width: 0;
height: 0;
opacity: 0;
}
/* EOF */
/* BOX */
.xbox-shadow{
background: rgba( 255, 255, 255, 0.6 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
padding: 30px;
}
.xbox-content {
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
padding: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgba(255,255,255,var(--tw-bg-opacity));
border-radius: .5rem;
transition: box-shadow .25s ease, background-color .25s ease;
}
.xbox-content:hover{
background-color: rgba(249,250,251,1);
box-shadow: 0 6px 10px rgba(0,0,0,.08);
}
.xbox-noshadow{
--margin-bottom: 20px;
--padding: 10px;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: #fafafa;
margin-bottom: var(--margin-bottom);
padding: var(--padding);
}
.xbox-justify{
display: flex;
align-items: center;
justify-content: space-between;
}
.xbox-title{
color: #6b7280;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 8px;
&.spacing{
letter-spacing: 0.05em;
text-transform: uppercase;
}
&.line{
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #e2e8f0;
}
}
.xbox-selected{
border: 1px solid rgb(45, 127, 249);
background: rgb(245, 250, 255);
}
/* FORM */
.xform{
.xinput-label-i span {
position: absolute;
font-size: 1rem;
font-weight: 600;
padding: 10px;
color: initial;
.fa-envelope{
color: #888787;
}
}
textarea:focus,
input:not([type="checkbox"]):focus{
outline: none; /* Menghilangkan garis biru bawaan */
/*border: 2px solid #007BFF; /* Menambahkan border biru */
box-shadow: 0 0 5px #007BFF; /* Efek glow */
}
.xform-input{
width: 100%;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background-color: #f8fafc;
font-size: 0.8rem;
color: #2d3748;
transition: all 0.3s ease;
font-weight: 300;
}
.xform-info{
display: inline-block;
padding-top: 5px;
font-weight: 300;
font-size: 93%;
color: #697777;
&.red{
color: #df0c0c;
}
}
/* THEMES */
&.spacing{
.xform-row{
label{
font-weight: 300;
font-size: 0.8rem;
margin-bottom: 12px;
letter-spacing: 0.05em;
}
}
}
}
.xform-title{
padding: 20px 0;
font-size: 0.8rem;
font-weight: 400;
}
.xform-line{
border-bottom: solid 1px #e2e8f0;
margin: 20px 0 40px;
}
.xselect-transparent select{
border: none;
border-radius: 0;
padding: 12.5px;
background-color: #fff;
border-bottom: solid 2px #f7f7f7;
cursor: pointer;
}
/* FORM INPUT RP
*/
.xinput-label-rp{
position: relative;
}
.xinput-label-rp span{
position: absolute;
font-size: 0.75rem;
font-weight: 500;
padding: 12px 0 0 5px;
color: gray;
}
.xinput-label-rp input{
border: none;
border-bottom: solid 2px #f7f7f7;
padding: 10px 5px;
border-radius: 0;
padding-left: 26px !important;
}
.rp{
font-family: Roboto-Mono;
&.red{
color: var(--rp-red);
}
&.blue{
color: var(--rp-blue);
}
&.green{
color: var(--color-green);
}
&.nol{
color: var(--color-nol);
}
}
/* FORM INPUT SYMBOL IN RIGHT
*/
.xinput-label-in-right{
position: relative;
}
.xinput-label-in-right span{
position: absolute;
font-size: 0.75rem;
font-weight: 500;
padding: 12px 0;
color: gray;
right: 0;
padding-right: 5px;
}
.xinput-label-in-right input{
border: none;
border-bottom: solid 2px #f7f7f7;
padding: 10px 5px;
border-radius: 0;
padding-right: 24px !important;
}
.xinput-label-i span{
position: absolute;
font-size: 1.2rem;
font-weight: 500;
padding: 10px;
color: #888;
}
.xinput-label-i input {
padding-left: 36px;
padding-top: 12px;
}
/* XLIST */
.xlist{
details{
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
overflow: hidden;
transition:
border-color .25s ease,
box-shadow .25s ease;
&[open]{
border-color: #cbd5e1;
box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}
}
.title{
display: grid;
grid-template-columns: 1fr 18px;
align-items: center;
gap: 10px;
padding: 12px 14px;
cursor: pointer;
list-style: none;
background: #f8fafc;
transition:
background .25s ease,
padding-left .25s ease;
&::-webkit-details-marker{
display: none;
}
/* hover effect */
&:hover{
background: #f1f5f9;
padding-left: 18px;
.i-expand{
color: #0f172a;
}
}
/* press effect */
&:active{
transform: scale(.995);
}
}
details[open] .title{
border-bottom: 1px solid #e2e8f0;
}
.xtab-content{
transition: all 1s ease-in;
}
/* CONTENT */
.content{
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: 8px;
width: 100%;
min-width: 0;
}
.name{
grid-column: 1;
grid-row: 1;
font-size: .95rem;
font-weight: 600;
line-height: 1.2;
color: #0f172a;
min-width: 0;
}
label{
grid-column: 1;
grid-row: 2;
display: block;
margin-top: 2px;
font-size: .74rem;
line-height: 1.1;
color: #64748b;
pointer-events: none;
}
/* ACTION BUTTONS */
.actions{
grid-column: 2;
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
align-self: center;
}
.btn-edit,
.btn-delete{
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
cursor: pointer;
position: relative;
z-index: 2;
transition:
background .2s ease,
color .2s ease,
transform .15s ease;
i{
font-size: .82rem;
line-height: 1;
}
&:active{
transform: scale(.92);
}
}
/* EDIT */
.btn-edit{
color: #94a3b8;
&:hover{
background: #dbeafe;
color: #2563eb;
}
}
/* DELETE */
.btn-delete{
color: #94a3b8;
&:hover{
background: #fee2e2;
color: #dc2626;
}
}
.btn-edit.sub,
.btn-delete.sub{
width: 18px;
height: 18px;
i{
font-size: .72rem;
}
}
.icon{
display: flex;
align-items: center;
justify-content: center;
}
.i-expand{
font-size: .9rem;
color: #475569;
transition:
transform .25s ease,
color .25s ease;
}
details[open] .i-expand{
transform: rotate(180deg);
}
.items{
padding: 4px 14px 8px;
animation: fadeSlide .25s ease;
}
.item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
font-size: .9rem;
transition:
background .2s ease,
padding-left .2s ease;
&:hover{
background: #fafafa;
padding-left: 6px;
}
&:last-child{
border-bottom: 0;
}
.actions{
grid-column: auto;
grid-row: auto;
}
}
}
@keyframes fadeSlide{
from{
opacity: 0;
transform: translateY(-6px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeSlide{
from{
opacity: 0;
transform: translateY(-6px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
.xright{
display: flex;
justify-content: flex-end;
gap: 8px;
align-items: center;
}
/* TABEL */
.xtable-toolbar{
padding: 20px 0;
}
.xtable{
border-spacing: 0;
border-collapse: separate;
transform: translateZ(0);
width: 100%;
&.shadow{
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
&.ff{
font-family: var(--ff);
}
&.fs-custom{
font-size: var(--fs);
input{
font-size: var(--fs);
}
}
.tr-td:nth-child(even){
background-color: #fff;
}
.tr-td:nth-child(odd){
background-color: #f9f9f9;
}
td{
padding: 10px;
}
.td-number{
font-family: Roboto-Mono;
}
.td-no{
font-family: Roboto-Mono;
width: 30px;
}
.th-rp,
.th-usd,
.td-usd,
.td-rp{
text-align: right;
font-family: Roboto-Mono;
}
.td-rp::before,
.th-rp::before{
content: 'Rp.';
float: left;
}
.td-usd::before,
.th-usd::before{
content: '$';
float: left;
}
/* ACTION */
tr.deleting,
.tr.deleting{
opacity:0;
transition: opacity 2s ease;
}
tr.deleting td,
.tr.deleting .td{
padding-top:0;
padding-bottom:0;
transition: padding .25s ease;
}
@keyframes rowSlideUp{
0%{
opacity:1;
transform:translateY(0);
}
100%{
opacity:0;
transform:translateY(-12px);
}
}
/* #region ========= TABLE COLOR SYSTEM ========= */
&.red{
.tr-th {
background-image: linear-gradient(135deg, #b71a1a 0%, #f46969 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #fff5f6;
}
td{
box-shadow: inset 0 -1px 0 rgba(177, 18, 38, 0.08);
}
}
&.red-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #f65e5e;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #eee;
box-shadow: 0 6px 3px rgba(0,0,0,0.08);
}
}
&.blue{
.tr-th {
background-image: linear-gradient(135deg, #1e4ed8 0%, #60a5fa 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #f2f7ff;
}
td{
box-shadow: inset 0 -1px 0 rgba(30, 78, 216, 0.08);
}
}
&.blue-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #60a5fa;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #eee;
box-shadow: 0 6px 3px rgba(0,0,0,0.08);
}
}
/*
&.green{
.tr-th {
background-image: linear-gradient(135deg, #0f766e 0%, #34d399 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #f1fdf9;
}
td{
box-shadow: inset 0 -1px 0 rgba(15, 118, 110, 0.08);
}
}
*/
&.green {
border: 1px solid #d8f1e4;
.tr-th {
background: #16a34a;
}
.tr-td:nth-child(2n+1) {
background: #f7fcf9;
}
.tr-td:hover td {
background: #edf9f1;
}
td {
box-shadow: inset 0 -1px 0 rgba(22, 163, 74, .08);
}
}
&.green-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #34d399;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #d0fcec;
box-shadow: 0 6px 6px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
background-color: #d4f0e6;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
&.purple{
.tr-th {
background-image: linear-gradient(135deg, #6d28d9 0%, #c4b5fd 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #f6f3ff;
}
td{
box-shadow: inset 0 -1px 0 rgba(109, 40, 217, 0.08);
}
}
&.purple-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #a78bfa;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.td-rp::before {
color: #a78bfa;
}
}
&.dark-blue{
.tr-th {
background-image: linear-gradient(135deg, #0b2f5f 0%, #3b82f6 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #f1f6fc;
}
td{
box-shadow: inset 0 -1px 0 rgba(11, 47, 95, 0.1);
}
}
&.dark-blue-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #3b82f6;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
&.dark-purple{
.tr-th {
background-image: linear-gradient(135deg, #281670 0%, #8b5cf6 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #f4f2fb;
}
td{
box-shadow: inset 0 -1px 0 rgba(40, 22, 112, 0.1);
}
}
&.dark-purple-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #8b5cf6;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
&.teal{
.tr-th {
background-image: linear-gradient(135deg, #0f766e 0%, #5eead4 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #f1fdfb;
}
td{
box-shadow: inset 0 -1px 0 rgba(15, 118, 110, 0.08);
}
}
&.teal-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #5eead4;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
&.yellow{
.tr-th {
background-image: linear-gradient(135deg, #ca8a04 0%, #fde047 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #fffbea;
}
td{
box-shadow: inset 0 -1px 0 rgba(202, 138, 4, 0.08);
}
}
&.yellow-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #fde047;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
&.gray{
.tr-th {
background-image: linear-gradient(135deg, #4b5563 0%, #d1d5db 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #f6f7f8;
}
td{
box-shadow: inset 0 -1px 0 rgba(75, 85, 99, 0.08);
}
}
&.gray-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #9ca3af;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
&.pink{
.tr-th {
background-image: linear-gradient(135deg, #be185d 0%, #f9a8d4 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #fff1f7;
}
td{
box-shadow: inset 0 -1px 0 rgba(190, 24, 93, 0.08);
}
}
&.pink-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #f9a8d4;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
&.black{
.tr-th {
background-image: linear-gradient(135deg, #1f2937 0%, #6b7280 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #f3f4f6;
}
td{
box-shadow: inset 0 -1px 0 rgba(31, 41, 55, 0.1);
}
}
&.black-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #6b7280;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #eee;
box-shadow: 0 6px 3px rgba(0,0,0,0.08);
}
}
&.brown{
.tr-th {
background-image: linear-gradient(135deg, #7c4a1f 0%, #d6a067 100%);
}
.tr-td:nth-child(2n+1) {
background-color: #fdf6f1;
}
td{
box-shadow: inset 0 -1px 0 rgba(124, 74, 31, 0.08);
}
}
&.brown-line{
background-image: none;
.tr-th {
background-image: none;
background-color: #e8e8e8;
border-bottom: solid 3px #d6a067;
font-weight: 600;
}
th {
text-align: center;
padding: 10px;
font-weight: 500;
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border-radius: 5px;
color: #2d2d2d;
}
td{
border: solid 1px #dfdfdf;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
}
/* #endregion */
&.cembung{
th{
background: #f9fafb;
padding: 14px 18px;
font-size: 13px;
font-weight: 600;
color: #6b7280;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}
td{
padding: 16px 18px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
background-color: #fff;
}
}
&.lite{
*{
font-weight: 300;
font-size: 0.8rem;
}
strong{
font-weight: 500;
}
}
.tr-td.disabled{
background-color: #D2D2D2 !important;
color: #1C1C1C;
opacity: 0.4;
}
}
.xtable-title{
font-size: 16px;
font-weight: 700;
color: #1f2937;
padding: 10px 12px;
margin-bottom: 10px;
background: #f9fafb;
border: 1px solid #eef2f7;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: .04em;
}
.xborder{
border: solid 1px #ccc;
}
.xtable .td-nourut{
width: 30px;
border-right: dotted 1px #3ebbf0;
}
.xtable-box{
display: grid;
gap: 1.2rem;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
width: 100%;
.tr {
background: #ffffff;
border-radius: 14px;
padding: 1.1rem 1.2rem;
border: 1px solid #eef1f4;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.25s ease, border-color 0.25s ease;
display: flex;
flex-direction: column;
gap: 0.8rem;
.td-header {
display: flex;
align-items: center;
gap: 0.9rem;
.td-image {
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 14px;
overflow: hidden;
background: #f8fafc;
border: 1px solid #eef1f4;
display: flex;
align-items: center;
justify-content: center;
img {
width: 70%;
height: 70%;
object-fit: contain;
}
}
.td-label label {
display: block;
font-weight: 600;
font-size: 0.95rem;
color: #111827;
}
.td-label small {
display: block;
font-size: 0.7rem;
color: #6b7280;
margin-top: 2px;
}
}
.td-content {
padding-top: 0.8rem;
border-top: 1px solid #f1f1f1;
color: #374151;
line-height: 1.5;
font-weight: 300;
label.title,
label.content{
display: inline-block;
width: 100%;
}
label.title{
font-size: 0.7rem;
font-weight: 400;
color: #909090;
padding-bottom: 2px;
}
label.content{
font-size: 0.7rem;
}
}
.td-action {
padding-top: 0.8rem;
border-top: 1px solid #f1f1f1;
display: flex;
justify-content: flex-end;
}
}
.tr:hover {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
border-color: #e5e7eb;
}
}
.xpaging{
margin: 50px auto;
width: fit-content;
padding: 10px 15px;
border-radius: 3px;
.box-arrow,
.box-number,
.paging-box,
.paging-i-current,
button{
border-radius: 5px;
margin: 1px;
}
button{
border: none;
}
.box-arrow{
border-radius: 3px;
color: #9d9d4e;
padding: 5px 8px;
&.active{
color: yellow;
}
}
.box-number,
.paging-box,
.paging-i-current{
padding: 5px 10px;
color: #fff;
cursor: pointer;
}
.box-number.active,
.paging-i-current{
background-color: yellow;
color: #000;
}
.box-arrow:hover,
.box-number:hover,
.paging-box:hover{
background-color: #939300;
}
&.transparent-circle-blue{
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: fit-content;
margin: 20px auto;
.box-number,
.box-arrow{
cursor: pointer;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: white;
color: #6b7280;
transition: all .3s ease;
text-decoration: none;
}
.box-number:hover,
.box-arrow:hover{
background: #f3f4f6;
color: #2563eb;
transform: translateY(-2px);
}
.box-number.active{
background: linear-gradient(135deg, #2563eb, #6366f1);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.paging-i:hover{
background-color: inherit;
}
}
&.blue{
background: radial-gradient(ellipse at bottom, #036298 0%, #123a53 100%);
}
&.red{
background-image: linear-gradient(to bottom right, #ca1313, #C30D0D00);
background-color: rgba(153, 9, 9, 0.69);
.box-arrow{
color: #ecec78;
}
.box-arrow:hover{
background-color: #ffff0085;
}
.box-number:hover{
background-color: #e8e842bd;
}
}
&.whiteblack{
.box-number,
.paging-box,
.paging-i-current{
background-color: #f0f0f0;
color: #4d4d4d;
cursor: pointer;
border: solid 1px #e1e1e1;
}
.paging-i-current{
background-color: #333;
color: #fff;
}
.box-number:disabled{
color: #ccc;
cursor: default;
}
.box-arrow:hover,
.box-number:hover,
.paging-box:hover{
background-color: #979797;
}
}
&.green{
background: radial-gradient(ellipse at bottom, #1f9d55 0%, #14532d 100%);
.box-arrow{
color: #d9ffe8;
}
.box-arrow:hover{
background-color: #34d39980;
}
.box-number:hover{
background-color: #6ee7b780;
}
}
&.purple{
background: linear-gradient(to bottom right, #6d28d9, #4c1d95);
.box-arrow{
color: #f3e8ff;
}
.box-arrow:hover{
background-color: #c084fc80;
}
.box-number:hover{
background-color: #a855f780;
}
}
&.orange{
background: linear-gradient(to bottom right, #ea580c, #7c2d12);
.box-arrow{
color: #fff7ed;
}
.box-arrow:hover{
background-color: #fdba7480;
}
.box-number:hover{
background-color: #fb923c80;
}
}
&.cyan{
background: radial-gradient(ellipse at top, #06b6d4 0%, #0e7490 100%);
.box-arrow{
color: #e0f7ff;
}
.box-arrow:hover{
background-color: #67e8f980;
}
.box-number:hover{
background-color: #22d3ee80;
}
}
&.yellow{
background: linear-gradient(to bottom right, #facc15, #a16207);
color: #333;
.box-arrow{
color: #333;
}
.box-arrow:hover{
background-color: #fde04780;
}
.box-number:hover{
background-color: #facc1580;
}
}
&.yellowblack{
background: linear-gradient(to bottom right, #000000, #1a1a1a);
color: #facc15;
.box-number,
.paging-box,
.paging-i-current{
background-color: #111;
color: #facc15;
border: 1px solid #333;
cursor: pointer;
}
.paging-i-current{
background-color: #facc15;
color: #000;
font-weight: 600;
}
.box-number:disabled{
color: #555;
cursor: default;
border-color: #222;
}
.box-arrow{
color: #facc15;
}
.box-arrow:hover,
.box-number:hover,
.paging-box:hover{
background-color: #facc15;
color: #000;
border-color: #facc15;
}
}
}
/* DATALIST THEME DEFAULT */
.xdatalist{
position: relative;
width: 100%;
}
.xdatalist .xform-input{
padding-right: 30px;
}
.xdatalist-i{
width: min-content;
position: absolute;
top: 0;
right: 0;
padding: 10px;
font-size: 1rem;
color: cadetblue;
}
.xdatalist-select{
position: absolute;
z-index: 1;
}
.xdatalist-option{
background-color: #f7f7f7;
padding: 10px 5px;
border-bottom: solid 1px #ecebeb;
}
.xdatalist-option:hover{
cursor: pointer;
background-color: #e6e6e6;
}
.xdatalist-selected{
display: none;
position: absolute;
top: 10px;
left: 5px;
padding: 5px 25px 5px 5px;
border-radius: 5px;
}
.xdatalist-selected-text{
color: #143D53;
}
.xdatalist-selected i{
position: absolute;
right: 5px;
font-size: 1rem;
color: #fffdfd;
cursor: pointer;
}
.xdatalist-selected i:hover{
color: #b55;
}
.none{display:none}
/* LOGIN */
.xlogin-split{
height: 100%;
position: absolute;
width: 100%;
display: grid;
gap: 0;
}
.xlogin-site-name{
background-color: rgba(0,0,0,.8);
color: #fff;
padding: 20px;
font-size: 1.4rem;
width: max-content;
margin: 50px;
border-radius: 10px;
font-family: Lexend;
}
/* ANIMATION */
.xreveal{
opacity: 0;
transition: 2s all ease;
}
.xreveal.active{
transform: translate(0, 0);
opacity: 1;
}
.xreveal-to-up{
transform: translateY(150px);
}
.xreveal-to-down{
transform: translateY(-150px);
}
.xreveal-to-left{
transform: translateX(150px);
}
.xreveal-to-right{
transform: translateX(-150px);
}
/* SEARCH */
.xsearch{
position: relative;
padding-bottom: 1px;
bottom: 0;
right: 0;
}
.xsearch-icon{
position: absolute;
left: 0;
padding: 10px;
}
.xsearch-icon i{
color: grey;
font-size: 0.9rem;
}
.xsearch-input input{
padding: 10px 0 10px 30px;
border-radius: 3px;
border: solid 1px #ccc;
}
.xsearch-input input:focus{
outline: none;
}
/* IMAGE */
.xthumb{
object-fit: cover;
}
/* IMAGE TEMPLATES */
/*
*/
.ximg-image-text{
display: grid;
grid-template-columns: 50px 1fr;
}
.ximg-image-text-img{
justify-content: center;
}
.ximg-image-text-img img{
max-width: 100%;
}
.xinfo{
padding: 15px;
border-radius: 15px;
font-size: 0.7rem;
margin: 20px 0;
font-weight: 300;
text-align: center;
strong{
font-size: 0.7rem;
}
&.grey{
background-color: #f7f7f7;
border: solid 1px #ccc;
color: #666;
}
&.red{
background-color: #FFF5F5;
border:solid 1px #E53935;
color: #C62828;
}
}
.xlabel{
display: inline-block;
padding: 5px 8px;
border-radius: 10px;
font-size: 0.7rem;
transition: all 0.2s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
&.warning{
color: #794342;
background-color: #fde3e3;
border: 1px solid #fbc0bd;
}
&.warning:hover{
background-color: #fbc0bd;
}
&.date{
background-color: #f7f7f7;
border: solid 1px #ccc;
color: #666;
}
/* ========= SOFT ========= */
&.red{
color: #a94442;
background-color: #f9d6d5;
border: 1px solid #f2a6a4;
}
&.red:hover{ background-color: #f5bcbc; }
&.blue{
color: #599aff;
background-color: #daf1ff;
border: 1px solid #a2cfff;
}
&.blue:hover{ background-color: #c3e7ff; }
&.green{
color: #42796f;
background-color: #e3fcfd;
border: 1px solid #4cead3;
}
&.green:hover{ background-color: #c6f6f2; }
&.yellow{
color: #8a6d00;
background-color: #f9eec0;
border: 1px solid #f2dd87;
}
&.yellow:hover{ background-color: #ffe781; }
&.purple{
color: #6f42c1;
background-color: #efe7ff;
border: 1px solid #d2c2ff;
}
&.purple:hover{ background-color: #e0d4ff; }
&.teal{
color: #0f766e;
background-color: #d1faf5;
border: 1px solid #5eead4;
}
&.teal:hover{ background-color: #baf5ee; }
&.black{
color: #444;
background-color: #e3e3e3;
border: 1px solid #b5b9b8;
}
&.black:hover{ background-color: #d0d0d0; }
&.pink{
color: #b03060;
background-color: #ffe0ec;
border: 1px solid #ffb6d5;
}
&.pink:hover{ background-color: #ffd0e3; }
&.gray{
color: #555;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
&.gray:hover{ background-color: #e0e0e0; }
/* ========= REGULAR ========= */
&.red-regular{
color: #fff;
background-color: #f87171;
border: 1px solid #ef4444;
}
&.red-regular:hover{ background-color: #ef4444; }
&.blue-regular{
color: #fff;
background-color: #60a5fa;
border: 1px solid #3b82f6;
}
&.blue-regular:hover{ background-color: #3b82f6; }
&.green-regular{
color: #fff;
background-color: #4ade80;
border: 1px solid #22c55e;
}
&.green-regular:hover{ background-color: #22c55e; }
&.yellow-regular{
color: #333;
background-color: #fde047;
border: 1px solid #facc15;
}
&.yellow-regular:hover{ background-color: #facc15; }
&.purple-regular{
color: #fff;
background-color: #a78bfa;
border: 1px solid #8b5cf6;
}
&.purple-regular:hover{ background-color: #8b5cf6; }
&.teal-regular{
color: #fff;
background-color: #5eead4;
border: 1px solid #14b8a6;
}
&.teal-regular:hover{ background-color: #14b8a6; }
&.black-regular{
color: #fff;
background-color: #9ca3af;
border: 1px solid #6b7280;
}
&.black-regular:hover{ background-color: #6b7280; }
&.pink-regular{
color: #fff;
background-color: #f472b6;
border: 1px solid #ec4899;
}
&.pink-regular:hover{ background-color: #ec4899; }
&.gray-regular{
color: #333;
background-color: #e5e7eb;
border: 1px solid #d1d5db;
}
&.gray-regular:hover{ background-color: #d1d5db; }
/* ========= SOLID ========= */
&.red-solid{
color: #fff;
background-color: #dc3545;
border: 1px solid #dc3545;
}
&.red-solid:hover{ background-color: #b52a37; }
&.blue-solid{
color: #fff;
background-color: #0d6efd;
border: 1px solid #0d6efd;
}
&.blue-solid:hover{ background-color: #0b5ed7; }
&.green-solid{
color: #fff;
background-color: #198754;
border: 1px solid #198754;
}
&.green-solid:hover{ background-color: #146c43; }
&.yellow-solid{
color: #333;
background-color: #ffc107;
border: 1px solid #ffc107;
}
&.yellow-solid:hover{ background-color: #e0a800; }
&.purple-solid{
color: #fff;
background-color: #6f42c1;
border: 1px solid #6f42c1;
}
&.purple-solid:hover{ background-color: #59339d; }
&.teal-solid{
color: #fff;
background-color: #0d9488;
border: 1px solid #0d9488;
}
&.teal-solid:hover{ background-color: #0f766e; }
&.black-solid{
color: #fff;
background-color: #343a40;
border: 1px solid #343a40;
}
&.black-solid:hover{ background-color: #1d2124; }
&.pink-solid{
color: #fff;
background-color: #d63384;
border: 1px solid #d63384;
}
&.pink-solid:hover{ background-color: #b02a6b; }
&.gray-solid{
color: #fff;
background-color: #6c757d;
border: 1px solid #6c757d;
}
&.gray-solid:hover{ background-color: #5a6268; }
/* OUTLINE */
&.red-outline{
color: #ef4444;
background-color: transparent;
border: 1px solid #ef4444;
}
&.red-outline:hover{
color: #fff;
background-color: #ef4444;
}
&.blue-outline{
color: #3b82f6;
background-color: transparent;
border: 1px solid #3b82f6;
}
&.blue-outline:hover{
color: #fff;
background-color: #3b82f6;
}
&.green-outline{
color: #22c55e;
background-color: transparent;
border: 1px solid #22c55e;
}
&.green-outline:hover{
color: #fff;
background-color: #22c55e;
}
&.yellow-outline{
color: #facc15;
background-color: transparent;
border: 1px solid #facc15;
}
&.yellow-outline:hover{
color: #333;
background-color: #facc15;
}
&.purple-outline{
color: #8b5cf6;
background-color: transparent;
border: 1px solid #8b5cf6;
}
&.purple-outline:hover{
color: #fff;
background-color: #8b5cf6;
}
&.teal-outline{
color: #14b8a6;
background-color: transparent;
border: 1px solid #14b8a6;
}
&.teal-outline:hover{
color: #fff;
background-color: #14b8a6;
}
&.black-outline{
color: #6b7280;
background-color: transparent;
border: 1px solid #6b7280;
}
&.black-outline:hover{
color: #fff;
background-color: #6b7280;
}
&.pink-outline{
color: #ec4899;
background-color: transparent;
border: 1px solid #ec4899;
}
&.pink-outline:hover{
color: #fff;
background-color: #ec4899;
}
&.gray-outline{
color: #6b7280;
background-color: transparent;
border: 1px solid #6b7280;
}
&.gray-outline:hover{
color: #fff;
background-color: #6b7280;
}
&.lite{
font-weight: 300 !important;
font-size: 0.7rem !important;
}
&.disabled,
&[disabled]{
opacity: 0.55;
pointer-events: none;
cursor: not-allowed;
filter: grayscale(30%);
}
}
/* SCRATCHY POPUP */
.xpopup{
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 99998;
backdrop-filter: blur(1px);
.xpopup-box{
background-color: #fff;
margin: auto;
border-radius:1rem;
position: relative;
animation: center-animate 0.3s ease;
max-width: 80%;
transform: translateY(12px) scale(.96);
transition:
transform .22s cubic-bezier(.16, 1, .3, 1),
opacity .22s ease;
&.show{
transform: translateY(0) scale(1);
opacity: 1;
}
.xpopup-content{
.xpopup-title{
font-size: 0.8rem;
letter-spacing: 0.05em;
padding: 15px 20px;
border-bottom: solid 1px #e2e8f0;
font-weight: 300;
background-color: #f2f2f2;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.xpopup-message{
width: 100%;
height:max-content;
max-width: 80vw;
max-height: 80vh;
overflow-y: auto;
color: #64748B;
padding: 20px;
.xtable{
min-width: 800px;
}
}
.xpopup-message span{font-size:inherit}
.xpopup-message pre{font-size:inherit;white-space: pre-line}
.xpopup-div-button{
padding: 15px 20px;
display: block;
text-align: right;
width: 100%;
input{
margin-left: 10px;
}
}
}
.xpopup-content *:not(i){
max-width: 100%;
max-height: 100%;
font-family: Lexend;
font-size: 0.8rem;
}
&.w-400{min-width: 400px;}
&.w-600{min-width: 600px;}
&.w-800{min-width: 800px;}
&.w-1000{min-width: 1000px;}
&.w-1200{min-width: 1200px;}
}
}
/* TOAST */
#toast-container {
position: fixed;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 99999;
}
.toast {
display: flex;
align-items: center;
gap: 10px;
min-width: 230px;
padding: 10px 16px;
border-radius: 12px;
color: #fff;
backdrop-filter: blur(8px);
box-shadow: 0 4px 18px rgba(0,0,0,.15);
opacity: 0;
transform: translateY(-15px);
transition: opacity .35s ease, transform .35s cubic-bezier(.18,.89,.32,1.28);
position: relative;
overflow: hidden;
font-family: Inter, sans-serif;
font-size: 14px;
&.show {
opacity: 1;
transform: translateY(0);
}
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background: rgba(255,255,255,0.8);
transform-origin: left;
}
/* THEMES ------------------------------------------------ */
&.default { background: rgba(0, 102, 255, .75); }
&.primary { background: rgba(0, 123, 255, .8); }
&.secondary { background: rgba(108, 117, 125, .8); }
&.success { background: rgba(40, 167, 69, .8); }
&.error { background: rgba(220, 53, 69, .8); }
&.warn { background: rgba(255, 193, 7, .85); color: #222; }
&.info { background: rgba(23, 162, 184, .8); }
&.neutral { background: rgba(180, 180, 180, .4); }
&.dark { background: rgba(20,20,20,.75); }
&.glass { background: rgba(255,255,255,.08); color: #eee; border: 1px solid rgba(255,255,255,.15); }
&.system { background: rgba(0,0,0,.65); }
/* COLORS ------------------------------------------------ */
&.red { background: rgba(220, 53, 69, .8); }
&.pink { background: rgba(232, 62, 140, .8); }
&.purple { background: rgba(111, 66, 193, .8); }
&.indigo { background: rgba(102, 16, 242, .8); }
&.blue { background: rgba(0, 123, 255, .8); }
&.cyan { background: rgba(23, 162, 184, .8); }
&.teal { background: rgba(32, 201, 151, .8); }
&.green { background: rgba(40, 167, 69, .8); }
&.lime { background: rgba(132, 204, 22, .85); }
&.yellow { background: rgba(255, 193, 7, .85); color: #222; }
&.orange { background: rgba(253, 126, 20, .85); }
&.brown { background: rgba(121, 85, 72, .85); }
&.gray { background: rgba(108, 117, 125, .8); }
&.black { background: rgba(20, 20, 20, .8); }
&.white {
background: rgba(255, 255, 255, .9);
color: #222;
border: 1px solid rgba(0,0,0,.1);
}
/* icon + text */
.toast-icon i { font-size: 18px; }
.toast-text { flex: 1; }
}
article {
font-size: 1.15rem;
color: #34495e;
padding: 80px 0;
h2{
font-size: 130%;
font-weight: 700;
}
h3{
font-weight: 600;
font-size: 105%;
line-height: 1.25;
margin: 2em 0 .7em;
letter-spacing: 0.02em;
}
strong{
font-weight: 600;
}
ul,
ol ul{
list-style: none;
margin: 12px 0 18px;
padding-left: 0;
position: relative;
li{
position: relative;
padding-left: 18px;
margin: 10px 0;
color: #2c3e50;
font-size: 14.5px;
line-height: 1.6;
font-weight: 500;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: -0.8em;
width: 1px;
background: linear-gradient(to bottom, #c7cdd4, transparent);
opacity: 0.8;
}
li::after {
content: "";
position: absolute;
left: -2px;
top: 0.65em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #6b7280;
opacity: 0.7;
}
}
ol{
list-style: decimal;
margin: 12px 0 18px;
padding-left: 28px;
li{
margin: 10px 0;
color: #2c3e50;
font-size: 14.5px;
line-height: 1.6;
font-weight: 500;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
padding-left: 6px;
}
li::marker{
color: #6b7280;
font-weight: 700;
font-size: .95em;
}
}
p{
margin: 1em 0;
line-height: 1.8;
}
a{
color: inherit;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(37,99,235,.35);
text-underline-offset: 3px;
text-decoration-thickness: 2px;
transition: .2s;
&:hover{
color: #2563eb;
text-decoration-color: #2563eb;
}
}
}
/* REPLACE QUILL */
.ql-editor{
min-height: 200px;
}
@media only screen and (max-width : 480px) {
.no-mobile{display:none}
.mcol-2,.mcol-2-1,.mcol-3,.mcol-4,.mcol-8,.mcol-12,.mcol-1f-2f,.mcol-2f-1f,.mcol-6f-4f{
grid-template-columns: 1fr;
}
.mcol-3-2,.mcol-4-2,.mcol-5-2,.mcol-6-2,.mcol-8-2{grid-template-columns: repeat(2, 1fr);}
.mcol-5-2{grid-template-columns: repeat(2, 1fr)}
.mcol-5-3{grid-template-columns: repeat(3, 1fr)}
/* FONT SIZE */
.fs-m-14{font-size: 1.2rem}
.fs-m-15{font-size: 1.3rem}
.fs-m-16{font-size: 1.4rem}
.fs-m-17{font-size: 1.5rem}
.fs-m-18{font-size: 1.6rem}
.fs-m-2{font-size: 1.8rem}
}