misuzu/assets/misuzu.css/manage/role-item.css

126 lines
2.8 KiB
CSS
Raw Normal View History

2022-09-13 13:14:49 +00:00
.manage__role-item {
display: flex;
text-shadow: 0 1px 4px #000;
box-shadow: 0 1px 4px #000A;
margin-bottom: 4px;
}
.manage__role-item:last-child {
margin-bottom: 0;
}
.manage__role-item__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--accent-colour);
}
.manage__role-item__container {
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: var(--background-colour-translucent-9);
width: 100%;
height: 100%;
margin-left: 5px;
pointer-events: none;
transition: background-color .2s;
}
.manage__role-item:hover .manage__role-item__container,
.manage__role-item:focus .manage__role-item__container,
.manage__role-item:focus-within .manage__role-item__container {
background-color: var(--background-colour-translucent-8);
}
.manage__role-item__icon {
border-radius: 100%;
width: 40px;
height: 40px;
box-shadow: 0 1px 4px #111;
margin: 10px;
flex: 0 0 auto;
overflow: hidden;
}
.manage__role-item__icon__content {
background-color: var(--background-colour-translucent-6);
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 1.5em;
transition: background-color .2s;
}
.manage__role-item__icon__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--accent-colour);
}
.manage__role-item:hover .manage__role-item__icon__content,
.manage__role-item:focus .manage__role-item__icon__content,
.manage__role-item:focus-within .manage__role-item__icon__content {
background-color: var(--background-colour-translucent-4);
}
.manage__role-item__info {
display: inline-flex;
flex-direction: column;
flex: 1 1 auto;
}
.manage__role-item__name {
font-size: 1.4em;
line-height: 1.4em;
}
.manage__role-item__details {
font-size: .9em;
line-height: 1.3em;
display: inline-flex;
align-items: center;
padding: 1px 0;
}
.manage__role-item__users {
border-radius: 10px;
background-color: var(--accent-colour);
box-shadow: 0 1px 4px #111;
padding: 2px 5px;
}
.manage__role-item__title {
padding: 2px 5px;
}
.manage__role-item__actions {
display: flex;
flex: 0 0 auto;
margin: 10px;
}
.manage__role-item__action {
width: 32px;
height: 32px;
line-height: 32px;
font-size: 1.5em;
border-radius: 2px;
margin: 5px;
margin-right: 0;
color: #fff;
cursor: pointer;
pointer-events: initial;
transition: background-color .2s;
text-align: center;
}
.manage__role-item__action:hover,
.manage__role-item__action:focus {
background-color: rgba(255, 255, 255, .2);
}
.manage__role-item__action:active {
background-color: rgba(255, 255, 255, .1);
}