This commit is contained in:
AlexBa16
2026-06-08 15:29:52 +02:00
commit 27903eed4a
9931 changed files with 1535659 additions and 0 deletions
@@ -0,0 +1,222 @@
@charset "UTF-8";
.js-calendar {
box-shadow: 0 0 15px 4px #00000026 !important;
}
.calendar-container {
--fallback-url: url("../../images/select-bg.svg?v=5ebba0");
float: left;
background-color: var(--calendar-bg, #fff);
border-radius: 5px;
min-width: 160px;
padding: 0;
list-style: none;
z-index: 1100 !important;
}
.calendar-container .nav {
display: table-cell;
}
.calendar-container table {
table-layout: fixed;
border-collapse: separate;
background-color: var(--calendar-bg, #fff);
border-radius: 5px;
max-width: 268px;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
padding: 3px;
z-index: 1100 !important;
}
div.calendar-container table th, .calendar-container table td {
text-align: center;
box-shadow: none;
padding: 8px 0;
line-height: 1.1em;
}
div.calendar-container table body td {
line-height: 2em;
}
div.calendar-container table td.title {
text-align: center;
vertical-align: middle;
}
.calendar-container table thead td.headrow {
color: #000;
background: #fff;
}
.calendar-container table thead td.name {
color: #000;
text-align: center;
border-bottom: 1px solid #fff;
}
.calendar-container table thead td.weekend {
color: #999;
}
.calendar-container table tbody td.day {
text-align: right;
}
.calendar-container table tbody td.wn {
background: #fff;
}
.calendar-container table tbody td.weekend {
color: #999;
}
.calendar-container table tbody td.hilite {
color: #fff;
background: #999;
}
.calendar-container table tbody td.day {
cursor: pointer;
border: 0;
min-width: 38px;
font-size: 12px;
}
.calendar-container table tbody td.day.wn {
text-align: center;
background-color: var(--calendar-week-bg, #f4f4f4);
}
.calendar-container table tbody td.day.selected {
color: var(--btn-primary-color);
background: var(--btn-primary-bg);
border: 0;
}
.calendar-container table tbody td.today {
width: auto;
height: 100%;
font-weight: bold;
position: relative;
}
.calendar-container table tbody td.today:after {
content: "";
background-color: #46a546;
border-radius: 1.5px;
height: 3px;
position: absolute;
bottom: 3px;
left: 3px;
right: 3px;
}
.calendar-container table tbody td.today.selected:after {
background-color: #fff;
}
.calendar-container table tbody td.day:hover {
color: var(--btn-primary-color);
cursor: pointer;
background: var(--btn-primary-bg);
}
.calendar-container table tbody td.day:hover:after {
background-color: #fff;
}
.calendar-container table tbody .disabled {
color: var(--calendar-disabled-color);
background-color: var(--calendar-disabled-bg);
}
.calendar-container table tbody .emptycell {
visibility: hidden;
}
.calendar-container table tbody .emptyrow {
display: none;
}
.calendar-container .calendar-head-row td {
border-bottom: none;
padding: 4px 0 !important;
}
.calendar-container .day-name {
border-bottom: none;
padding-top: .5rem;
font-size: .7rem;
font-weight: bold;
}
.calendar-container .time td {
border-bottom: none;
padding: 15px 3px 10px 0;
}
.calendar-container td.time-title {
margin-top: 20px;
display: block;
}
.calendar-container .time td select {
width: 100%;
color: var(--calendar-select-color, #212529);
background-color: var(--calendar-select-bg-color, #f0f4fb);
appearance: none;
background-repeat: no-repeat;
background-size: max(100%, 58rem);
border: 1px solid #cdcdcd;
border-radius: .25rem;
padding: 5px 9px 3px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
display: block;
}
html:not([dir="rtl"]) .calendar-container .time td select {
background-image: var(--calendar-select-bg-url, var(--fallback-url));
background-position: 100%;
}
.buttons-wrapper {
width: 100%;
padding: 5px;
margin-bottom: 0 !important;
}
.buttons-wrapper .btn {
min-width: 60px;
color: var(--btn-primary-color);
background: var(--btn-primary-bg);
border: 1px solid var(--body-bg);
margin-right: 0;
padding: 0 16px;
line-height: 2.375rem;
box-shadow: 1px 1px 1px #00000040;
}
.buttons-wrapper .btn:hover {
color: var(--btn-primary-color);
background: var(--btn-primary-bg);
}
.buttons-wrapper .btn:last-child {
margin-right: 0;
}
.time .time-title {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='24' height='24' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
}
.calendar-container select, .calendar-container .js-btn {
cursor: pointer;
}
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";.js-calendar{box-shadow:0 0 15px 4px #00000026!important}.calendar-container{--fallback-url:url(../../images/select-bg.svg?v=5ebba0);float:left;background-color:var(--calendar-bg,#fff);border-radius:5px;min-width:160px;padding:0;list-style:none;z-index:1100!important}.calendar-container .nav{display:table-cell}.calendar-container table{table-layout:fixed;border-collapse:separate;background-color:var(--calendar-bg,#fff);border-radius:5px;max-width:268px;margin-top:2px;margin-left:auto;margin-right:auto;padding:3px;z-index:1100!important}div.calendar-container table th,.calendar-container table td{text-align:center;box-shadow:none;padding:8px 0;line-height:1.1em}div.calendar-container table body td{line-height:2em}div.calendar-container table td.title{text-align:center;vertical-align:middle}.calendar-container table thead td.headrow{color:#000;background:#fff}.calendar-container table thead td.name{color:#000;text-align:center;border-bottom:1px solid #fff}.calendar-container table thead td.weekend{color:#999}.calendar-container table tbody td.day{text-align:right}.calendar-container table tbody td.wn{background:#fff}.calendar-container table tbody td.weekend{color:#999}.calendar-container table tbody td.hilite{color:#fff;background:#999}.calendar-container table tbody td.day{cursor:pointer;border:0;min-width:38px;font-size:12px}.calendar-container table tbody td.day.wn{text-align:center;background-color:var(--calendar-week-bg,#f4f4f4)}.calendar-container table tbody td.day.selected{color:var(--btn-primary-color);background:var(--btn-primary-bg);border:0}.calendar-container table tbody td.today{width:auto;height:100%;font-weight:700;position:relative}.calendar-container table tbody td.today:after{content:"";background-color:#46a546;border-radius:1.5px;height:3px;position:absolute;bottom:3px;left:3px;right:3px}.calendar-container table tbody td.today.selected:after{background-color:#fff}.calendar-container table tbody td.day:hover{color:var(--btn-primary-color);cursor:pointer;background:var(--btn-primary-bg)}.calendar-container table tbody td.day:hover:after{background-color:#fff}.calendar-container table tbody .disabled{color:var(--calendar-disabled-color);background-color:var(--calendar-disabled-bg)}.calendar-container table tbody .emptycell{visibility:hidden}.calendar-container table tbody .emptyrow{display:none}.calendar-container .calendar-head-row td{border-bottom:none;padding:4px 0!important}.calendar-container .day-name{border-bottom:none;padding-top:.5rem;font-size:.7rem;font-weight:700}.calendar-container .time td{border-bottom:none;padding:15px 3px 10px 0}.calendar-container td.time-title{margin-top:20px;display:block}.calendar-container .time td select{width:100%;color:var(--calendar-select-color,#212529);background-color:var(--calendar-select-bg-color,#f0f4fb);appearance:none;background-repeat:no-repeat;background-size:max(100%,58rem);border:1px solid #cdcdcd;border-radius:.25rem;padding:5px 9px 3px;font-size:16px;font-weight:400;line-height:1.5;display:block}html:not([dir=rtl]) .calendar-container .time td select{background-image:var(--calendar-select-bg-url,var(--fallback-url));background-position:100%}.buttons-wrapper{width:100%;padding:5px;margin-bottom:0!important}.buttons-wrapper .btn{min-width:60px;color:var(--btn-primary-color);background:var(--btn-primary-bg);border:1px solid var(--body-bg);margin-right:0;padding:0 16px;line-height:2.375rem;box-shadow:1px 1px 1px #00000040}.buttons-wrapper .btn:hover{color:var(--btn-primary-color);background:var(--btn-primary-bg)}.buttons-wrapper .btn:last-child{margin-right:0}.time .time-title{background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='24' height='24' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat}.calendar-container select,.calendar-container .js-btn{cursor:pointer}
@@ -0,0 +1,36 @@
@charset "UTF-8";
joomla-field-media .field-media-preview {
background-color: #f2f2f2;
border: 1px solid #00000026;
border-bottom-width: 0;
border-radius: .25rem .25rem 0 0;
justify-content: center;
align-items: center;
max-width: 356px;
height: 180px;
padding: 10px;
display: flex;
overflow: hidden;
}
joomla-field-media .field-media-preview-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(0,0,0,.25)' d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z'/%3E%3C/svg%3E");
background-size: 7rem;
width: 7rem;
height: 7rem;
}
joomla-field-media .field-media-input {
border-top-left-radius: 0;
border-start-start-radius: 0;
}
joomla-field-media .input-group > .btn.btn-success.button-select, joomla-field-media .button-clear {
border-top-right-radius: 0;
border-start-end-radius: 0;
}
joomla-field-media img {
max-width: 100%;
max-height: 100%;
}
@@ -0,0 +1 @@
@charset "UTF-8";joomla-field-media .field-media-preview{background-color:#f2f2f2;border:1px solid #00000026;border-bottom-width:0;border-radius:.25rem .25rem 0 0;justify-content:center;align-items:center;max-width:356px;height:180px;padding:10px;display:flex;overflow:hidden}joomla-field-media .field-media-preview-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(0,0,0,.25)' d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z'/%3E%3C/svg%3E");background-size:7rem;width:7rem;height:7rem}joomla-field-media .field-media-input{border-top-left-radius:0;border-start-start-radius:0}joomla-field-media .input-group>.btn.btn-success.button-select,joomla-field-media .button-clear{border-top-right-radius:0;border-start-end-radius:0}joomla-field-media img{max-width:100%;max-height:100%}
@@ -0,0 +1,34 @@
@charset "UTF-8";
joomla-field-permissions .joomla-icon:after {
content: "";
width: 1rem;
height: 1rem;
line-height: 1.5;
display: inline-block;
}
joomla-field-permissions .joomla-icon.joomla-field-permissions__allowed:after {
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/%3E%3C/svg%3E") no-repeat;
}
joomla-field-permissions .joomla-icon.joomla-field-permissions__denied:after {
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z'/%3E%3C/svg%3E") no-repeat;
}
joomla-field-permissions .joomla-icon.joomla-field-permissions__spinner {
animation: 2s linear infinite spin;
}
joomla-field-permissions .joomla-icon.joomla-field-permissions__spinner:after {
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M526 1394q0 53-37.5 90.5t-90.5 37.5q-52 0-90-38t-38-90q0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm498 206q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-704-704q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-964-996q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zm1170 498q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-640-704q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm530 206q0 93-66 158.5t-158 65.5q-93 0-158.5-65.5t-65.5-158.5q0-92 65.5-158t158.5-66q92 0 158 66t66 158z'/%3E%3C/svg%3E") no-repeat;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(359deg);
}
}
@@ -0,0 +1 @@
@charset "UTF-8";joomla-field-permissions .joomla-icon:after{content:"";width:1rem;height:1rem;line-height:1.5;display:inline-block}joomla-field-permissions .joomla-icon.joomla-field-permissions__allowed:after{background:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/%3E%3C/svg%3E") no-repeat}joomla-field-permissions .joomla-icon.joomla-field-permissions__denied:after{background:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z'/%3E%3C/svg%3E") no-repeat}joomla-field-permissions .joomla-icon.joomla-field-permissions__spinner{animation:2s linear infinite spin}joomla-field-permissions .joomla-icon.joomla-field-permissions__spinner:after{background:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M526 1394q0 53-37.5 90.5t-90.5 37.5q-52 0-90-38t-38-90q0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm498 206q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-704-704q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-964-996q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zm1170 498q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-640-704q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm530 206q0 93-66 158.5t-158 65.5q-93 0-158.5-65.5t-65.5-158.5q0-92 65.5-158t158.5-66q92 0 158 66t66 158z'/%3E%3C/svg%3E") no-repeat}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(359deg)}}
@@ -0,0 +1,50 @@
@charset "UTF-8";
joomla-field-simple-color {
display: block;
}
joomla-field-simple-color button {
appearance: none;
border: var(--border-width, 1px) solid var(--input-border-color, #ccc);
border-radius: var(--border-radius, .25rem);
background: none;
width: 2rem;
height: 2rem;
margin-block-end: .24rem;
margin-inline: .5rem;
}
joomla-field-simple-color::part(close) {
appearance: none;
background: none;
border: 0;
margin-block-end: .2rem;
margin-inline: .5rem;
}
joomla-field-simple-color::part(opener) {
vertical-align: middle;
border: var(--border-width, 1px) solid var(--input-border-color, #ccc);
border-radius: var(--border-radius, .25rem);
appearance: none;
width: 2rem;
height: 2rem;
margin-block: .7rem;
overflow: hidden;
}
joomla-field-simple-color::part(opener):focus, joomla-field-simple-color::part(opener):hover, joomla-field-simple-color button[aria-pressed="true"] {
border: 2px solid var(--template-link-color, #52a8eccc);
box-shadow: 0 0 0 .25rem #2a69b740;
}
joomla-field-simple-color::part(panel) {
float: inline-start;
background-color: var(--body-bg, #fff);
border: var(--border-width, 1px) solid var(--input-border-color, #ccc);
border-radius: var(--border-radius, .25rem);
background-clip: padding-box;
flex-flow: wrap;
padding: .64rem 0 .4rem;
box-shadow: 0 5px 10px #0003;
}
@@ -0,0 +1 @@
@charset "UTF-8";joomla-field-simple-color{display:block}joomla-field-simple-color button{appearance:none;border:var(--border-width,1px) solid var(--input-border-color,#ccc);border-radius:var(--border-radius,.25rem);background:0 0;width:2rem;height:2rem;margin-block-end:.24rem;margin-inline:.5rem}joomla-field-simple-color::part(close){appearance:none;background:0 0;border:0;margin-block-end:.2rem;margin-inline:.5rem}joomla-field-simple-color::part(opener){vertical-align:middle;border:var(--border-width,1px) solid var(--input-border-color,#ccc);border-radius:var(--border-radius,.25rem);appearance:none;width:2rem;height:2rem;margin-block:.7rem;overflow:hidden}joomla-field-simple-color::part(opener):focus,joomla-field-simple-color::part(opener):hover,joomla-field-simple-color button[aria-pressed=true]{border:2px solid var(--template-link-color,#52a8eccc);box-shadow:0 0 0 .25rem #2a69b740}joomla-field-simple-color::part(panel){float:inline-start;background-color:var(--body-bg,#fff);border:var(--border-width,1px) solid var(--input-border-color,#ccc);border-radius:var(--border-radius,.25rem);background-clip:padding-box;flex-flow:wrap;padding:.64rem 0 .4rem;box-shadow:0 5px 10px #0003}
@@ -0,0 +1,24 @@
@charset "UTF-8";
joomla-field-mediamore details {
background: #f5f5f5;
border: 1px solid #c9c9c9;
border-radius: .25rem;
margin: 0 0 0 .5rem;
position: absolute;
bottom: 0;
}
joomla-field-mediamore label.input-group-text {
width: auto;
}
joomla-field-mediamore summary {
background-color: #e3e3e3;
border-radius: .25rem;
padding: 1rem;
font-weight: 500;
}
joomla-field-mediamore details .form-group {
margin: 1rem !important;
}
@@ -0,0 +1 @@
@charset "UTF-8";joomla-field-mediamore details{background:#f5f5f5;border:1px solid #c9c9c9;border-radius:.25rem;margin:0 0 0 .5rem;position:absolute;bottom:0}joomla-field-mediamore label.input-group-text{width:auto}joomla-field-mediamore summary{background-color:#e3e3e3;border-radius:.25rem;padding:1rem;font-weight:500}joomla-field-mediamore details .form-group{margin:1rem!important}
@@ -0,0 +1,82 @@
@charset "UTF-8";
.switcher {
width: 18rem;
height: 28px;
margin: 0;
position: relative;
}
.switcher input {
top: 0;
z-index: 2;
cursor: pointer;
opacity: 0;
width: 62px;
height: 28px;
margin: 0;
position: absolute;
inset-inline-start: 0;
}
.switcher input:checked {
z-index: 1;
}
.switcher input:checked + label {
z-index: 0;
opacity: 1;
}
.switcher input:not(:checked) + label {
z-index: 3;
opacity: 0;
}
.switcher input:focus ~ .toggle-outside {
border-color: var(--focus);
box-shadow: 0 0 0 .2rem #1a466b40;
}
.switcher label {
margin-bottom: 0;
text-align: start;
width: auto;
min-width: 6rem;
height: 100%;
margin-inline-start: 70px;
line-height: 28px;
transition: opacity .25s;
display: inline-block;
position: absolute;
inset-inline-start: 0;
}
.switcher .toggle-outside {
box-sizing: border-box;
background: #d3d3d3;
border: 1px solid #0000002e;
width: 58px;
height: 100%;
transition: all .2s;
position: absolute;
inset-inline-start: 0;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.switcher input ~ input:checked ~ .toggle-outside {
background: #2f7d32;
}
.switcher .toggle-inside {
background: #fff;
width: 28px;
height: 28px;
transition: all .4s;
position: absolute;
left: 0;
}
.switcher input ~ input:checked ~ .toggle-outside .toggle-inside {
left: 30px;
}
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";.switcher{width:18rem;height:28px;margin:0;position:relative}.switcher input{top:0;z-index:2;cursor:pointer;opacity:0;width:62px;height:28px;margin:0;position:absolute;inset-inline-start:0}.switcher input:checked{z-index:1}.switcher input:checked+label{z-index:0;opacity:1}.switcher input:not(:checked)+label{z-index:3;opacity:0}.switcher input:focus~.toggle-outside{border-color:var(--focus);box-shadow:0 0 0 .2rem #1a466b40}.switcher label{margin-bottom:0;text-align:start;width:auto;min-width:6rem;height:100%;margin-inline-start:70px;line-height:28px;transition:opacity .25s;display:inline-block;position:absolute;inset-inline-start:0}.switcher .toggle-outside{box-sizing:border-box;background:#d3d3d3;border:1px solid #0000002e;width:58px;height:100%;transition:all .2s;position:absolute;inset-inline-start:0;overflow:hidden;transform:translate(0,0)}.switcher input~input:checked~.toggle-outside{background:#2f7d32}.switcher .toggle-inside{background:#fff;width:28px;height:28px;transition:all .4s;position:absolute;left:0}.switcher input~input:checked~.toggle-outside .toggle-inside{left:30px}