From cef14a58fc8820d88b2b32c94b98ac2d637c0663 Mon Sep 17 00:00:00 2001 From: Mrchlldev <137673915+Mrchlldev@users.noreply.github.com> Date: Sun, 7 Jul 2024 21:12:24 +0700 Subject: [PATCH] Update mrchllaja-css.css --- mrchllaja-css.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/mrchllaja-css.css b/mrchllaja-css.css index 5906133..27c511b 100644 --- a/mrchllaja-css.css +++ b/mrchllaja-css.css @@ -1,3 +1,17 @@ +/* Label Info */ +.label-info-container{background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:5px;padding:20px;position:relative} +.label-info-container::before{content:'';width:70px;height:70px;position:absolute;z-index:0;background:rgba(0,0,0,.04);bottom:0;left:0;border-radius:0 70px 0 0} +.label-info-header-infotext{display:flex;justify-content:space-between;align-items:center} +.label-info-infotext{display:flex;align-items:center;gap:15px} +.label-info-infotext-svg{background:var(--linkB);border-radius:50%;padding:7px 8px 5px 9px} +.label-info-infotext-svg svg{stroke:#fff!important;stroke-width:2!important} +.label-info-infotext-h2 {font-size:1.2rem;font-weight:800;margin:0!important} +.label-info-home-link{display:inline-flex;align-items:center;gap:6px} +.label-info-home-link svg{stroke:var(--linkB)!important} +.label-info-bottom-infotext{margin:20px 0 0 0} +.label-info-bottom-infotext p{font-size:15px;margin:0!important;line-height:25px!important} +.drK .label-info-container{background:var(--darkBa)} + /* Material Design Box */ .mrchllbox{background-color:transparent;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:15px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)} .mrchllbox h2 {box-shadow:0 5px 10px rgba(30,30,30,.2);background-color:#02d07a;border-radius:5px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:13px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase} @@ -21,5 +35,7 @@ table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)} .drK .mrchllbox table,.drK .mrchllbox table td,.drK .mrchllbox{border-color:rgba(255,255,255,.15);color:#fefefe} /* Dummy Text */ .dummyText i{display:block;background-color:rgba(0,0,0,.05);margin-bottom:10px;height:1.5em} .dummyText i.img{height:auto;min-height:200px;margin:2rem 10%} .drkM .dummyText i{background-color:rgba(255,255,255,.05)} + /* Recent Posts Cateogry */ .rCategory{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:1rem}.rCategory a{color:var(--bodyC)}.rCategory .rPostel{display:-webkit-box;display:-webkit-flex;display:flex;gap:10px;padding:.75rem;border:1px solid var(--contentL);border-radius:.75rem;--rSize:80px}.rCategory .rThumb{position:relative;width:var(--rSize);flex-shrink:0}.rCategory .rThumb a{display:block;position:inherit;padding-top:100%;border-radius:4px;background-color:var(--contentL);overflow:hidden}.rCategory .rThumb img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;background-size:cover;background-position:center;background-repeat:no-repeat}.rCategory .rItm{flex-grow:1;display:flex;flex-direction:column;justify-content:center;line-height:1.5}.rItm .rTitle{font-size:14px;font-weight:400}.rItm .rDesc{font-size:12px;display:-webkit-box;-webkit-line-clamp:var(--ws-line-clamp,1);-webkit-box-orient:vertical;overflow:hidden;opacity:.8}.rNavfeed{display:flex;align-items:center;justify-content:center;gap:1rem;padding-top:30px;--svg-stroke:1.5;--svg-size:20px}.rNavfeed>*{transition:var(--trans-2)}.rNavfeed:where(.next,.previous,.home){position:relative;overflow:hidden;color:var(--bodyC);border-radius:10px;width:45px;height:45px;display:flex;align-items:center;justify-content:center}.rNavfeed span.noactived{--iconC:var(--contentL)}.rNavfeed:where(.next,.previous,.home):hover{box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}.rLoad{display:flex;justify-content:center}.rLoad div{width:1rem;height:1rem;margin:2rem 0.3rem;background:var(--linkC);border-radius:50%;-webkit-animation:0.3s bounce infinite alternate;animation:0.3s bounce infinite alternate}.rLoad div:nth-child(2){-webkit-animation-delay:0.3s;animation-delay:0.3s}.rLoad div:nth-child(3){-webkit-animation-delay:0.6s;animation-delay:0.6s}@-webkit-keyframes bounce{to{opacity:0.3;transform:translate3d(0,-1rem,0)}}@keyframes bounce{to{opacity:0.3;transform:translate3d(0,-1rem,0)}}.drK .rCategory a{color:var(--darkT)}.drK .rNavfeed:where(.next,.previous,.home):hover{box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} + /* Widget Slider */ .slideB{--indicator:var(--themeC);--sliderBd-radius:4px;--sliderRatio:56.25%}@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}.slider .item{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}.slideI .i.active{width:10px;background-color:var(--indicator)}.slideB .next,.slideB .prev{position:absolute;top:40%;font-size:2.5em;border-radius:50%;user-select:none;border:1px solid #e4e3e1;background:#fffdfc;opacity:.5;padding:0 20px 5px;outline:0}.slideB .next:hover,.slideB .prev:hover{opacity:.9}.slideB .prev{left:10px}.slideB .next{right:10px}.slideB{position:relative;border-radius:var(--sliderBd-radius);overflow:hidden}.slideB:hover .slideI svg{opacity:1;visibility:visible}.slideI.active svg .pause{display:block}.slideI.active svg .play,.slideI svg .pause{display:none}.slider.no-items~.slideI{display:none}.slideI .i{width:4px;height:4px;border-radius:10px;background-color:rgb(0 0 0 / 15%);transition:width .1s ease,background-color .1s ease}svg{width:12px;height:12px;fill:currentColor}.slideI svg{right:0}.slideI svg{position:absolute;top:0;opacity:0;visibility:hidden;transition:opacity .1s ease .4s,visibility .1s ease .4s}.slider{position:relative;width:400%}.slider >*{flex-shrink:0;width:calc(100% / 4)}.slider .item{display:none;position:relative;border-radius:var(--sliderBd-radius);overflow:hidden}.slider .img{display:block;padding-top:var(--sliderRatio);color:#d9e2f0;background-color:#f9f9fb;background-position:center;background-size:cover;background-repeat:no-repeat}.slider .cap{display:block;position:absolute;left:0;bottom:0;right:0;padding:20px;padding-block-start:40px;background-image:linear-gradient(0deg,rgb(45 49 56 / 90%) 0%,rgb(45 49 56 / 50%) 60%,rgb(45 49 56 / 0%) 100%)}.slideB >*{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}.slideB:hover .slider .cap{background-image:none}.slideB a:hover{filter:none}.slider .img{position:relative;border-radius:var(--sliderBd-radius)}.slider .cap{background-image:linear-gradient(0deg,rgb(45 49 56 / 55%) 0%,rgb(45 49 56 / 22%) 60%,rgb(45 49 56 / 0%) 100%);border-radius:var(--sliderBd-radius);font-size:0.9em;line-height:1.2em;font-weight:600;text-shadow:0 2px 10px #272733,0 1px 1px rgba(10,10,10,.5);color:#f9f9fb}.slider .category{top:0;right:0;position:absolute;padding:10px}.slideB a.button{display:inline-flex;text-decoration:none;outline:0;border:0;padding:2px 10px;font-size:12px;border-radius:15px;color:#0e2045;background-color:#fffdfc;box-shadow:5px 5px 15px 0 rgb(0 0 0 / 10%)}.slideI{display:flex;gap:5px;position:relative;height:12px;margin-block:5px calc(40px - 12px - 4px)) align-items:center;justify-content:center;margin-top:5px}@media screen and (max-width:640px){.slideB a.button{font-size:10px;padding:0 10px}.slideB .next,.slideB .prev{font-size:1em;border-radius:50%;padding:0 10px 3px}}