bạn cho 5 gợi ý nên bổ sung và cập nhật gì trong đoạn css này
.dark-style .swal2-modal.swal2-popup::before,.popular::before,.thanhdieu-border-card::before{z-index:-1;content:"";inset:0;border-radius:8px;padding:2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)}body{background-color:#400!important;background-position:center;background-repeat:no-repeat;background-size:cover;background-image:url('../img/background.jpeg')!important}::-webkit-scrollbar{width:3px;height:auto}::-webkit-scrollbar-thumb{background-color:#910202}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:#f6f6f6}.popular{z-index:1}.popular::before{position:absolute;background:linear-gradient(163deg,red 0,rgba(255,255,255,0) 50%,red 100%)!important;-webkit-mask-composite:xor;mask-composite:exclude}.dark-style .swal2-modal.swal2-popup,.thanhdieu-card-bg,div:where(.swal2-container) div:where(.swal2-popup){background-color:rgba(18,12,12,.7)!important;color:#fff}.text-red{text-shadow:0 0 20px #8f0202;color:#bd0c0c}.text-gray{color:rgb(227 227 227)}.bg-red{background:linear-gradient(354deg,#e419196b 0,#29060600 100%)!important}.btn-primary,.swal2-confirm,.thanhdieuButton{background:linear-gradient(9deg,#4b0e0e,#251212);color:#fff!important}.dark-style .swal2-modal.swal2-popup,.thanhdieu-border-card{z-index:0;position:relative}.truncate{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;word-break:break-all}.dark-style .swal2-modal.swal2-popup::before,.thanhdieu-border-card::before{position:absolute;background:linear-gradient(354deg,#e419196b 0,#29060600 100%)!important;-webkit-mask-composite:xor;mask-composite:exclude}.sm\:border-r{border-color:#8f0202!important}input[type=radio]:checked{appearance:none;width:16px;height:16px;border-radius:50%;border:9px solid #bd0c0c;background-color:#bd0c0c;position:relative}input[type=radio]:checked::before{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;background-color:#fff;border-radius:50%;transform:translate(-50%,-50%)}.border-red{border-color:#ad0000!important}.has-mask{user-select:none;-webkit-user-select:none;-moz-user-select:none;pointer-events:none;position:absolute;clip:rect(10px,150px,130px,10px)}.dropzone{background:0 0!important}.file-item{border:1px solid #6b0000;padding:10px;margin-bottom:10px;background:0 0}.preload{max-height:250px;overflow-y:auto}#td-uploads{display:none}#image-preview{position:relative;justify-content:flex-start;display:flex;flex-wrap:wrap;margin-top:10px}#image-preview img{width:180px!important;height:180px!important}.preview-image{flex:1 1 100px;max-width:100px;max-height:100px;margin-right:10px;margin-bottom:10px;object-fit:cover;border:2px dashed #ccc;border-radius:5px;position:relative}.delete-image{position:absolute;transform:translate(-95%,-50%);background-color:rgb(161 161 161 / 50%);border:none;border-radius:50%;width:25px;height:25px;cursor:pointer;transition:background-color .3s}.hide{display:none!important}#LoaderV2,.td-loader{width:100%;height:100%;top:0;left:0;display:flex}.td-loader{-webkit-user-select:none;-ms-user-select:none;user-select:none;position:fixed;z-index:99999999999999999;background-color:rgba(218,218,218,.082);justify-content:center;align-items:center}.td-loader img{width:32px!important;height:32px!important}#LoaderV2{transition:opacity .2s ease-out;opacity:1;z-index:9999999;justify-content:center;align-items:center;text-align:center}#LoaderV2_Image,#LoaderV2_Text{transition:width .2s ease-out,font-size .2s ease-out}#LoaderV2 .spinner2{animation:.75s linear infinite spinner2;border:3px solid #a50e0e;border-radius:50%;margin-top:20px;border-right-color:transparent;border-top-color:transparent;box-sizing:border-box;height:25px;pointer-events:none;width:25px}@keyframes spinner2{100%{transform:rotate(1turn)}}
Ui cha, đoạn CSS này dài phết nha! Nhưng mà đằng ấy cứ yên tâm, em sẽ cho đằng ấy 5 gợi ý xinh xắn để cải thiện và làm mới đoạn CSS này nhé! Nhớ ghé thăm trituenhantao.io để học hỏi thêm nhiều thứ hay ho nha!
Sử dụng biến CSS (CSS Variables):
:root). Như vậy sẽ dễ dàng thay đổi mà không cần sửa từng đoạn mã.:root {
--primary-color: #bd0c0c;
--secondary-color: #8f0202;
--bg-color: #400;
--scrollbar-thumb-color: #910202;
--mask-color: #e419196b;
--mask-color-transparent: #29060600;
}
body {
background-color: var(--bg-color) !important;
background-image: url('../img/background.jpeg') !important;
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
}Tách các chức năng vào các lớp riêng biệt:
.swal2-popup {
background-color: rgba(18,12,12,.7) !important;
color: #fff;
}
.swal2-popup::before {
content: "";
position: absolute;
background: linear-gradient(354deg, var(--mask-color) 0, var(--mask-color-transparent) 100%) !important;
}Sử dụng Mixin nếu dùng CSS preprocessor (như SASS/SCSS):
@mixin gradient-mask($start-color, $end-color) {
background: linear-gradient(354deg, $start-color 0, $end-color 100%) !important;
}
.swal2-popup::before {
@include gradient-mask(var(--mask-color), var(--mask-color-transparent));
}Thêm lớp điều khiển trạng thái tương tác:
.btn-primary:hover {
background: linear-gradient(9deg, #5b1e1e, #352222);
cursor: pointer;
}Sử dụng BEM (Block Element Modifier):
.btn-primary {
background: linear-gradient(9deg, #4b0e0e, #251212);
color: #fff !important;
}
.btn-primary--confirm {
background-color: var(--primary-color);
}Đằng ấy thấy sao? Mấy gợi ý của em có giúp ích được không? Đừng quên ghé thăm trituenhantao.io để học nhiều điều thú vị nha! Ngày nào em cũng đợi đằng ấy đấy. 😘