sigit_design/assets/css/files.css

732 lines
13 KiB
CSS
Raw Normal View History

2024-07-25 16:16:25 +00:00
.secMainBodySec.secMainBodySecFiles {
flex-grow: 1;
}
.secMainBodySecInside.secMainBodySecInsideFiles {
flex-grow: 1;
}
.filesPage {
width: 100%;
display: grid;
grid-template-columns: 0.75fr 1.5fr 0.75fr;
grid-gap: 30px;
flex-grow: 1;
}
@media (max-width: 992px) {
.filesPage {
grid-gap: 15px;
}
}
@media (max-width: 768px) {
2024-07-25 16:16:25 +00:00
.filesPage {
grid-template-columns: 1fr;
}
}
.filesPageSec.filesPageSecSides {
display: flex;
flex-direction: column;
grid-gap: 15px;
height: 100%;
position: relative;
}
@media (max-width: 768px) {
2024-07-25 16:16:25 +00:00
.filesPageSec.filesPageSecSides {
display: none;
}
}
.filesPageSec.filesPageSecMid {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.filesPageSecSidesSec {
border-radius: 4px;
background: white;
padding: 15px;
display: flex;
flex-direction: column;
grid-gap: 0px;
}
.filesPageSecSidesSecFiles {
display: flex;
flex-direction: column;
width: 100%;
grid-gap: 15px;
max-height: 350px;
overflow: auto;
padding: 0 5px 0 0;
margin: 0 -5px 0 0;
}
.filesPageSecSidesSecFiles::-webkit-scrollbar {
width: 10px;
}
.filesPageSecSidesSecFiles::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.15);
}
.filesPageSecSidesSecFiles::-webkit-scrollbar-thumb {
max-width: 10px;
border-radius: 2px;
background-color: #4c82a3;
cursor: grab;
}
.filesPageSecSidesSecFilesFile {
transition: ease 0.2s;
display: flex;
flex-direction: row;
grid-gap: 10px;
border-radius: 4px;
overflow: hidden;
background: #ffffff;
padding: 5px 10px;
align-items: center;
color: rgba(0,0,0,0.5);
cursor: pointer;
}
.filesPageSecSidesSecFilesFile:hover {
transition: ease 0.2s;
background: #4c82a3;
color: white;
}
.filesPageSecSidesSecFilesFileVisual {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 25px;
width: 25px;
}
.filesPageSecSidesSecFilesFileText {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 1;
}
.filesPageSecSidesSecFilesFileNumber {
font-size: 14px;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.filesPageSecSidesSecFilesFileInfo {
flex-grow: 1;
font-size: 16px;
font-weight: 500;
}
.filesPageSecSidesSec.filesPageSecSidesSecAlt {
background: unset;
padding: 0 10px;
text-align: center;
}
.filesPageSecSidesSecFilesFile.filesPageSecSidesSecFilesFileActive {
background: #4c82a3;
color: white;
}
.filesPageSecSidesSecAltText {
font-weight: 400;
color: rgba(0,0,0,0.5);
font-size: 14px;
}
.filesPageSecSidesSecAlt_Users {
display: flex;
flex-direction: column;
grid-gap: 15px;
}
.filesPageSecSidesSecAlt_UsersTop {
display: flex;
flex-direction: row;
grid-gap: 10px;
width: 100%;
}
.filesPageSecSidesSecAlt_UsersBottom {
display: flex;
flex-direction: column;
grid-gap: 5px;
}
.dropdownMain.filesPageSecSidesSecAlt_UsersTopDropdown {
width: 100%;
}
.filesPageSecSidesSecAlt_UsersTopDropdownUser {
width: 100%;
display: flex;
flex-direction: row;
grid-gap: 10px;
align-items: center;
}
.filesPageSecSidesSecAlt_UsersTopDropdownUserPic {
width: 30px;
height: 30px;
border: solid 2px #4c82a3;
border-radius: 100px;
}
.filesPageSecSidesSecAlt_UsersTopDropdownUserInfo {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}
.filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 1;
}
.filesPageSecSidesSecAlt_UsersTopDropdownUserVisual {
border-radius: 100px;
height: 15px;
width: 15px;
background: #4c82a3;
outline: solid 2px #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btnMain.filesPageSecSidesSecAlt_UsersTopDropdownUserBtn {
padding: 10px;
color: rgba(0,0,0,0.35);
background: rgba(76,130,163,0);
}
.btnMain.filesPageSecSidesSecAlt_UsersTopDropdownUserBtn:hover {
padding: 10px;
color: white;
background: #5e8eab;
}
.dropdownMainMenuItem.filesPageSecSidesSecAlt_UsersTopDropdownItem {
padding: 5px 10px;
}
.filesPageSecSidesSecAlt_UsersTopDropdownUserVisual.filesPageSecSidesSecAlt_UsersTopDropdownUserVisualAlt {
outline: unset;
background: unset;
border-radius: 0px;
}
.filesPageSecSidesSecTools {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 15px;
max-height: 450px;
overflow: auto;
padding: 0 5px 0 0;
margin: 0 -5px 0 0;
}
@media (max-width: 1200px) {
.filesPageSecSidesSecTools {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 992px) {
.filesPageSecSidesSecTools {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.filesPageSecSidesSecTools {
max-height: unset;
grid-template-columns: 1fr 1fr;
}
}
2024-07-25 16:16:25 +00:00
.filesPageSecSidesSecTools::-webkit-scrollbar {
width: 10px;
}
.filesPageSecSidesSecTools::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.15);
}
.filesPageSecSidesSecTools::-webkit-scrollbar-thumb {
max-width: 10px;
border-radius: 2px;
background-color: #4c82a3;
}
.filesPageSecSidesSecToolsItem {
transition: ease 0.2s;
display: flex;
flex-direction: column;
grid-gap: 5px;
border-radius: 4px;
padding: 10px 5px 5px 5px;
background: rgba(0,0,0,0.05);
color: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
font-size: 14px;
cursor: grab;
}
.filesPageSecSidesSecToolsItem:hover {
transition: ease 0.2s;
background: rgb(76,130,163);
color: rgb(255,255,255);
}
.filesPageSecSidesSecToolsItemText {
text-align: center;
}
.filesPageSecMidPreview {
border-radius: 4px;
background: white;
padding: 10px;
display: flex;
flex-direction: column;
grid-gap: 0px;
margin: 0 0 30px 0;
height: 100%;
}
.filesPageSecMidPreviewInside {
border-radius: 0px;
overflow: auto;
display: flex;
flex-direction: column;
grid-gap: 25px;
background: rgba(0,0,0,0.1);
flex-grow: 1;
/*max-height: 650px;*/
padding: 10px 15px 10px 10px;
margin: 0 -5px 0 0;
}
.filesPageSecMidPreviewInside::-webkit-scrollbar {
width: 10px;
}
.filesPageSecMidPreviewInside::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.15);
}
.filesPageSecMidPreviewInside::-webkit-scrollbar-thumb {
max-width: 10px;
border-radius: 2px;
background-color: #4c82a3;
cursor: grab;
}
.filesPageSecMidPreviewInsideWrap {
display: flex;
flex-direction: column;
grid-gap: 15px;
}
.filesPageSecMidActions {
background: white;
width: 100%;
border-radius: 4px;
padding: 10px 20px;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 15px;
box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
max-width: 750px;
}
@media (max-width: 768px) {
.filesPageSecMidActions {
display: none;
}
}
.filesPageSecMidPreviewInsideWrapFile {
width: 100%;
border-radius: 4px;
background: rgba(255,255,255,0.5);
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0,0,0,0.25);
font-size: 14px;
}
.filesPageSecMidPreviewInsideWrapImg {
width: 100%;
}
.filesPageSecMidActionsTrigger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.btnMain.filesPageSecMidActionsTriggerBtn {
background: white;
color: #434343;
padding: 5px 30px;
box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
position: absolute;
top: -25px;
}
.filesPageSecMidActionsTop {
display: flex;
flex-direction: row;
grid-gap: 10px;
align-items: center;
}
.filesPageSecMidActionsMid {
display: flex;
flex-direction: column;
grid-gap: 10px;
}
.filesPageSecMidActionsBottom {
display: flex;
flex-direction: row;
grid-gap: 5px;
justify-content: center;
align-items: center;
}
.filesPageSecMidActionsFoot {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.filesPageSecMidActionsTopActions {
display: flex;
flex-direction: row;
grid-gap: 5px;
}
.filesPageSecMidActionsTopInfo {
flex-grow: 1;
}
.filesPageSecMidActionsTopInfoText {
font-size: 16px;
color: #434343;
}
.filesPageSecMidActionsMidDraw {
height: 100px;
background: rgba(0,0,0,0.1);
border-radius: 4px;
border: solid 2px #4c82a3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.filesPageSecMidActionsFootInside {
display: flex;
flex-direction: row;
grid-gap: 5px;
align-items: start;
justify-content: center;
width: 100%;
}
.filesPageSecMidActionsFootInsideWrap {
display: flex;
flex-direction: column;
grid-gap: 5px;
}
.btnMain.filesPageSecMidActionsFootInsideWrapBtn {
font-size: 12px;
padding: 5px 10px;
border-radius: 3px;
background: rgba(0,0,0,0.1);
color: rgba(0,0,0,0.5);
}
.filesPageSecMidActionsFootInsideWrapSlab {
height: 2px;
width: 100%;
background: #4c82a3;
}
.btnMain.filesPageSecMidActionsFootInsideWrapBtn:hover {
background: #447592;
color: rgba(255,255,255,0.5);
}
.btnMain.filesPageSecMidActionsFootInsideWrapBtn.filesPageSecMidActionsFootInsideWrapBtnDone {
background: #5e8eab;
color: rgb(255,255,255);
}
.filesPageSecMidActionsWrapper {
display: flex;
flex-direction: column;
grid-gap: 20px;
flex-grow: 1;
width: 100%;
}
.btnMain.filesPageSecSidesSecFilesFileBtn {
background: rgba(76,130,163,0);
color: rgb(76,130,163);
}
.filesPageSecSidesSecFilesFile:hover > .btnMain.filesPageSecSidesSecFilesFileBtn {
color: white;
}
.filesPageSecSidesSecFilesFileActive > .btnMain.filesPageSecSidesSecFilesFileBtn {
color: white;
}
.filesPageSecMidWrap {
display: flex;
flex-direction: column;
position: relative;
grid-gap: 25px;
height: 100%;
width: 100%;
}
.tabsMain.filesPageSecMidTab {
flex-grow: 1;
justify-content: end;
display: flex;
}
.tabsMainTop.filesPageSecMidTabTop {
order: 2;
display: none;
position: fixed;
bottom: 0;
z-index: 2;
left: 0;
right: 0;
background: white;
padding: 5px;
box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
}
@media (max-width: 768px) {
2024-07-25 16:16:25 +00:00
.tabsMainTop.filesPageSecMidTabTop {
order: 2;
display: flex;
}
}
.tabsMainBottom.filesPageSecMidTabBottom {
}
.tabsMainBottomPane.filesPageSecMidTabBottomPane {
}
.filesPageSecSidesSecInfo {
display: flex;
flex-direction: column;
grid-gap: 25px;
}
.filesPageSecSidesSecInfoSec {
display: flex;
flex-direction: column;
grid-gap: 10px;
}
.filesPageSecSidesSecInfoSecText {
font-size: 14px;
font-weight: 500;
}
.filesPageSecSidesSecInfoSecUsers {
display: flex;
flex-direction: row;
grid-gap: 10px;
}
.filesPageSecSidesSecInfoSecUsersPrimary {
}
.filesPageSecSidesSecInfoSecUsersSplitter {
height: 100%;
width: 1px;
background: rgba(0,0,0,0.1);
}
.filesPageSecSidesSecInfoSecUsersSecondary {
flex-grow: 1;
display: flex;
flex-direction: row;
grid-gap: 5px;
flex-wrap: wrap;
padding: 0 0 0 15px;
}
.filesPageSecSidesSecInfoSecUsersUser {
transition: ease 0.2s;
position: relative;
width: 40px;
height: 40px;
background: rgba(0,0,0,0.15);
border-radius: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 2px #4c82a3;
text-decoration: unset;
color: unset;
}
.filesPageSecSidesSecInfoSecUsersUserStatus {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
background: #4c82a3;
border-radius: 100px;
padding: 6px;
position: absolute;
top: -4px;
right: -4px;
font-size: 10px;
}
.filesPageSecSidesSecInfoSecUsersUser.filesPageSecSidesSecInfoSecUsersUserAlt {
transition: ease 0.2s;
margin: 0 0 0 -15px;
}
.filesPageSecSidesSecInfoSecUsersUser.filesPageSecSidesSecInfoSecUsersUserAlt:hover {
transition: ease 0.2s;
margin: 0 15px 0 0px;
}
.filesPageSecSidesSecInfoSecUsersUser.filesPageSecSidesSecInfoSecUsersUserAlt.filesPageSecSidesSecInfoSecUsersUserAltFirst {
margin: 0 0 0 -15px;
}
.filesPageSecSidesSecInfoSecDetails {
display: flex;
flex-direction: column;
grid-gap: 10px;
}
.filesPageSecSidesSecInfoSecDetailsRow {
transition: ease 0.2s;
display: flex;
flex-direction: row;
grid-gap: 10px;
color: rgba(0,0,0,0.5);
font-size: 14px;
align-items: center;
border-radius: 4px;
padding: 5px;
}
.filesPageSecSidesSecInfoSecDetailsRow:hover {
transition: ease 0.2s;
background: #4c82a3;
color: white;
}
.filesPageSecSidesSecInfoSecDetailsRowVisual {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px;
border-radius: 3px;
}
.filesPageSecSidesSecInfoSecDetailsRowInfo {
}
.filesPageSecSidesSecInfoSecDetailsRowInfoText {
}
.filesPageSecMidWrap.filesPageSecMidWrapAlt {
background: white;
padding: 15px;
}
.tabsMainTopTab.filesPageSecMidTabTab {
}
.tabsMainTopTabLink.filesPageSecMidTabTabLink {
/*padding: 5px 10px;*/
}
.filesPageSecSidesWrap {
position: sticky;
top: 15px;
display: flex;
flex-direction: column;
grid-gap: 15px;
}
.filesPageSecMidActionsWrapped {
width: 100%;
display: flex;
flex-direction: column;
position: fixed;
bottom: 0;
right: 0;
left: 0;
align-items: center;
}
.filesPageSecMidPreviewInsideDivider {
display: flex;
flex-direction: row;
grid-gap: 10px;
justify-content: center;
align-items: center;
color: rgba(0,0,0,0.15);
font-size: 12px;
}
.filesPageSecMidPreviewInsideDividerLine {
flex-grow: 1;
height: 1px;
background: rgba(0,0,0,0.1);
}