mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-14 01:45:12 +00:00
Max PeintnerandGitHub
0a488eb1fb
* add iam label, user avatar * avatar component * split granted and owned modules * move components to resp module * refactor project contributors, g project nav * rem console logs, add avatar for org members * fix changes loading, auth user page * refactor home, i18n * fix changes side overflow * lint
123 lines
2.4 KiB
SCSS
123 lines
2.4 KiB
SCSS
$dark-background: #2d2e30;
|
|
|
|
.app {
|
|
position: relative;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
// width: 300px;
|
|
}
|
|
.circle {
|
|
position: relative;
|
|
border-radius: 100%;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
|
|
margin: auto;
|
|
}
|
|
.crescent {
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
right: 0;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: white;
|
|
transform: scale(0);
|
|
transform-origin: top right;
|
|
transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
p {
|
|
font-size: 90%;
|
|
}
|
|
.heading {
|
|
font-size: 100%;
|
|
font-weight: bolder;
|
|
margin: 2rem 0 .2rem 0;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 14px;
|
|
color: #81868a;
|
|
}
|
|
|
|
label, .toggle {
|
|
height: 2.8rem;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
label {
|
|
width: 100%;
|
|
background-color: rgba(0,0,0,.1);
|
|
border-radius: 100px;
|
|
position: relative;
|
|
margin: 1rem 0 1rem 0;
|
|
cursor: pointer;
|
|
}
|
|
.toggle {
|
|
position: absolute;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 15px rgba(0,0,0,.15);
|
|
transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
.names {
|
|
font-size: 90%;
|
|
font-weight: bolder;
|
|
width: 65%;
|
|
margin-left: 17.5%;
|
|
margin-top: .5%;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
user-select: none;
|
|
}
|
|
|
|
/* -------- Switch Styles ------------*/
|
|
[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
/* Toggle */
|
|
[type="checkbox"]:checked + .app .toggle{
|
|
transform: translateX(100%);
|
|
background-color: $dark-background;
|
|
}
|
|
[type="checkbox"]:checked + .app .dark{
|
|
opacity: 1;
|
|
}
|
|
[type="checkbox"]:checked + .app .light{
|
|
opacity: .5;
|
|
}
|
|
/* App */
|
|
[type="checkbox"]:checked + .app{
|
|
background-color: $dark-background;
|
|
color: white;
|
|
}
|
|
/* Circle */
|
|
[type="checkbox"]:checked + .app .crescent{
|
|
transform: scale(1);
|
|
background: $dark-background;
|
|
}
|
|
[type="checkbox"]:checked + .app .circle{
|
|
background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
|
|
}
|
|
[type="checkbox"]:checked + .app .main-circle{
|
|
background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
|
|
}
|
|
/* Fab */
|
|
[type="checkbox"]:checked + .app .fab{
|
|
background-color: $dark-background;
|
|
}
|
|
[type="checkbox"]:checked + .app .arrow,
|
|
[type="checkbox"]:checked + .app .mark,
|
|
[type="checkbox"]:checked + .app .battery{
|
|
background-color: white;
|
|
}
|
|
[type="checkbox"]:checked + .app .network{
|
|
border-color: transparent transparent white transparent;
|
|
}
|
|
[type="checkbox"]:checked + .app .swipe{
|
|
background-color: $dark-background;
|
|
opacity: 1;
|
|
} |