fox-send/app/templates/file/file.css

101 lines
1.5 KiB
CSS

.fileToast {
flex: none;
display: block;
margin: 6px 0 0;
overflow: hidden;
font-size: 11px;
line-height: 18px;
color: var(--lightTextColor);
background-color: var(--pageBGColor);
position: relative;
border: 3px solid rgba(12, 12, 12, 0.2);
background-clip: padding-box;
box-sizing: border-box;
height: 53px;
border-radius: 4px;
}
.fileToast__content {
height: 100%;
position: relative;
z-index: 2;
}
.fileToast::after {
position: absolute;
z-index: 1;
content: '';
transition: all 0.25s;
top: 0;
left: 50%;
width: 0;
height: 100%;
background-color: var(--primaryControlBGColor);
}
.fileToast:hover {
background-color: #eee;
}
.fileToast--active {
color: var(--primaryControlFGColor);
}
.fileToast--active::after {
left: 0%;
width: 100%;
}
.fileData {
margin: 8px 16px 8px 44px;
overflow: hidden;
}
.fileName {
margin: 0;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.fileInfo {
margin: 0;
}
.fileToast .fileIcon {
margin: 0 8px;
}
@media (max-device-width: 750px), (max-width: 750px) {
.fileToast {
height: 32px;
}
.fileToast__content {
display: flex;
line-height: 13px;
margin: 0;
align-items: center;
}
.fileData {
flex: auto;
display: flex;
flex-wrap: nowrap;
margin: 0 6px 0 0;
}
.fileInfo {
flex: none;
margin-left: auto;
}
.fileToast .fileIcon {
flex: none;
transform: scale(0.5);
color: transparent;
}
}