sw-ui-controls/dist/index.css

SW UI controls for rapid development

._1GaQl {
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px;
  height: 25px;
  box-shadow: 10px 10px 10px inherit;
  display: flex;
  gap: 5px;
  border-radius: 5px;
  border-color: inherit;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background-color: var(--background-color);
  color: var(--text-color);
}
._1GaQl:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
._1GaQl ._RHwR3 {
  animation: _1308w 3s linear infinite;
  font-weight: bolder;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  background: transparent;
}
@keyframes _1308w {
  100% {
    transform: rotate(360deg);
  }
}

._2WMWq {
  height: 100%;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
._1uqqJ {
  height: 10%;
  font-weight: bold;
}
.___NBr {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
._XcDw_ {
  height: 20%;
  overflow: hidden;
}
._2Xf_W {
  height: 60%;
  width: 100%;
}
._2Xf_W img {
  height: 100%;
  width: 100%;
}
._2WMWq > :not(._2Xf_W) {
  padding: 0 5px;
}

._3j-Fv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
._3j-Fv input {
  width: 20px;
  height: 20px;
}

._50bpz,
._RQhoA:has(p._50bpz) * {
  color: var(--error-color-dark);
}
._50bpz *,
._RQhoA:has(p._50bpz) * * {
  color: var(--error-color-dark);
}
._RQhoA {
  margin: 10px 0;
}
._RQhoA input,
._RQhoA textarea {
  border: 0px;
  border-bottom: 1px solid;
  border-color: inherit;
  outline: none;
}
._RQhoA input {
  width: 100%;
  height: 30px;
}
._RQhoA textarea {
  width: 100%;
}
._RQhoA label {
  font-weight: 100;
}
._RQhoA ._Rter0 label {
  position: absolute;
  top: 0;
}
._RQhoA ._2trDv label {
  position: absolute;
  top: 30px;
}
._RQhoA ._3ln_B {
  position: absolute;
  top: 10px;
  right: 0;
}

._scIHa,
._3vfOT:has(p._scIHa) * {
  color: var(--error-color-dark);
}
._scIHa *,
._3vfOT:has(p._scIHa) * * {
  color: var(--error-color-dark);
}
._3vfOT {
  margin: 10px 0;
}
._3vfOT select {
  border: 0px;
  border-bottom: 1px solid;
  border-color: inherit;
  outline: none;
}
._3vfOT select {
  width: 100%;
  height: 30px;
  margin: 5px 0px;
}
._3vfOT label {
  font-weight: 100;
}
._3vfOT ._2ZqVg label {
  position: absolute;
  top: 0;
}
._3vfOT ._Q4Tsd label {
  position: absolute;
  top: 30px;
}

._3vfOT select option {
  border-radius: 0;
}

._21lFc {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid currentColor;
}

._21lFc ._3Rz-G {
  display: flex;
  width: 100%;
  gap: 5px;
  justify-content: space-between;
}
._21lFc ._3Rz-G > button {
  flex: 1;
}

._21lFc ._sP5yG {
  display: flex;
  flex-direction: row;
  height: 100%;
}
._21lFc ._sP5yG > div {
  flex: 1;
}

._21lFc ._qP5kt {
  height: 90%;
  min-height: 200px;
  padding: 10px;
  margin-top: 10px;
  outline: none;
}

._21lFc ._2MWdB {
  height: --webkit-fill-available;
  border: 0px 0.5px 1px 1px solid gray;
  word-break: break-all;
}

._2VAj8 {
  margin-bottom: 5px;
}

._Wqqt4 {
  display: flex;
  gap: "2px";
}
._Wqqt4 > svg > path:hover {
  fill: var(--text-color);
}
._Wqqt4 > ._2sUzu > path {
  fill: var(--accent-color);
}

label {
  font-weight: 100;
}

._2qzJ5 {
}

._2qzJ5 > div:last-of-type {
  display: flex;
}

._2qzJ5 > div:last-of-type > label {
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px;
  height: 30px;
  box-shadow: 10px 10px 10px inherit;
  display: flex;
  gap: 5px;
  border-radius: 5px;
  border-color: inherit;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border: 1px solid lightgray;
  flex-direction: column;
}

._2owhk {
  width: 300px;
  height: 200px;
  border: 2px dashed #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

._30Se6 {
  display: flex;
  flex-direction: row;
}

._22Keb {
  list-style-type: none;
  position: relative;
  top: -15px;
}

._22Keb li {
  display: flex;
  gap: 15px;
  line-height: 2rem;
  align-items: center;
  border-bottom: 0.5px solid gray;
}

._1Afe- {
  display: flex;
}

._I3tU2 > div:first-of-type > div {
  height: 100% !important;
}

._1ej_m {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--background-color);
  padding: 50px;
  z-index: 1000;
}

._1ej_m > button {
  position: absolute;
  width: 25px;
  height: 25px;
  top: -8px;
  right: -8px;
  background-color: transparent;
  padding: 0;
  max-height: 100%;
  overflow-y: auto;
  margin: 50px 0px;
}
._1ej_m > button > svg {
  width: 100%;
  height: 100%;
  background-color: none;
  background: none;
}
._1lTGa {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 7);
  z-index: 1000;
  opacity: 0.7;
}

._SwBYy {
  position: relative;
  z-index: 1;
}
._BUAhm {
  position: relative;
  z-index: 2;
  background-color: "gray";
  padding: "20px";
  margin: "25px";
}

._20RG7 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
._20RG7 input {
  width: 20px;
  height: 20px;
}

._3r4qz ._3Q0QX {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}
._3r4qz ._3Q0QX ._3LN5U {
  height: 2px;
  position: relative;
  background: black;
  top: -10px;
  border: 0;
  width: max(calc(100% - 185px), 50px);
}
._3r4qz ._3Q0QX ._24s1a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._3r4qz ._3Q0QX ._3v6ld {
  font-weight: bold;
  padding: 4px 10px;
  border: 1px solid;
  border-color: inherit;
  border-radius: 50%;
  width: -moz-min-content;
  width: min-content;
}
._3r4qz ._3Q0QX ._3PHMX {
  font-weight: normal;
  width: -moz-max-content;
  width: max-content;
}
._3r4qz ._3Q0QX ._I9xuA ._3v6ld {
  background-color: var(--success-color);
}
._3r4qz ._3Q0QX ._I9xuA ._3PHMX {
  color: var(--success-color);
}
._3r4qz ._3Q0QX ._2bZyB ._3v6ld {
  background-color: var(--primary-color);
}
._3r4qz ._3Q0QX ._2bZyB ._3PHMX {
  color: var(--text-color);
}

._3r4qz ._1jtHW {
  background-color: var(--success-color) !important;
  height: 2px !important;
}
._3r4qz ._41MGY {
  font-weight: bolder;
  height: 2px !important;
  background-color: var(--text-color) !important;
}

._158SV,
._14mTy,
._249x8,
._3k2lF {
  border: 1px solid lightgray;
  padding: 5px 10px;
}
._1q3pG {
  border: 1px solid inherit;
  border-collapse: collapse;
}

 ._Ku1IN {
	 display: flex;
	 flex-direction: column;
}
 ._Ku1IN ._hjeWQ {
	 display: flex;
	 flex-direction: row;
}
 ._Ku1IN ._hjeWQ > button {
	 border-radius: 0px !important;
}
 
._HaqHw {
  width: 100%;
}
._1JHMN {
  position: relative;
  width: min(80px, 100%);
}
._1ALhf,
._2_CGm {
  width: min(calc(100% / 7) - 7px, 100%);
  border: 1px solid var(--text-color);
  height: 50px;
  gap: 0 !important;
}
._16UZH ._4xWEr {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

._iw2d8 ._3vWr9 {
  text-align: center;
}
._iw2d8 ._2pEAJ {
  position: absolute;
  display: flex;
  bottom: 5px;
}
._iw2d8 ._2eRmg > button {
  fill: lightgreen;
}
._iw2d8 ._2pEAJ > button {
  width: -moz-max-content;
  width: max-content;
  padding: 0;
  margin: 0;
  height: -moz-fit-content;
  height: fit-content;
  border: 0;
}
._iw2d8 ._2pEAJ > button > svg > path {
  fill: bisque;
}

._3ETRj {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.5;
  background: var(--background-color);
  opacity: 0.5;
}

._1EPbf {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.5;
}

._2Jjqj {
  animation: _2mNZq 3s linear infinite;
  font-weight: bolder;
  width: 10%;
  height: 10%;
  top: 50%;
  left: 50%;
  background: transparent;
}
._1EPbf ._2Jjqj {
  position: absolute;
}
._3ETRj ._2Jjqj {
  position: fixed;
}
@keyframes _2mNZq {
  100% {
    transform: rotate(360deg);
  }
}

._2UG57 {
  border: 1px solid var(--text-color);
  border-radius: 5px;
}

._2UG57 ._ht1Hk {
  display: flex;
  border-bottom: 1px solid var(--text-color);
  padding: 5px 8px;
  font-weight: bold;
}

._2UG57 ._ht1Hk > div:first-of-type {
  width: 90%;
}
._2UG57 ._ht1Hk > div:last-of-type {
  width: 10%;
}

._2UG57 ._giePj {
  padding: 5px 8px;
}

._1FTAF {
  width: 100%;
}

._1FTAF ._2pIJI {
}

._1FTAF ._2mzEq {
}

._1FTAF ._2mzEq ._jWPmc {
  gap: 0px;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 5px;
  justify-content: center;
  padding-left: 5px;
}
._1FTAF ._2mzEq ._jWPmc > span {
}
._1FTAF ._2mzEq ._jWPmc button {
}

._1FTAF ._2mzEq ._27Pfm {
  border: 1px solid currentColor;
  padding: 5px;
}

._3ZP1l > ._TrBMz {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
._3ZP1l > ._TrBMz > div {
  direction: rtl;
}

._TrBMz > ._TrBMz {
  position: relative;
  left: 35px;
}

._684O1 {
  position: relative;
}

._1Pkaq {
  position: absolute;
  top: 60px;
  width: 100%;
}
._3HBTr {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

._3HBTr ._10yst {
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 1px 5px 1px 0px;
  display: flex;
  gap: 2px;
}