Upload files to "/"
This commit is contained in:
freakoverse
parent
53b6f49780
commit
105e20ebef
268
dashboard.css
Normal file
268
dashboard.css
Normal file
@ -0,0 +1,268 @@
|
||||
.secMainBodySecInside_Dashboard {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSec {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecTop {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecTop {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecMid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecFilters {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecUpload {
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecTopSec {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecTopSec.secMainBodySecInside_DashboardSecTopSecLeft {
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecTopSec.secMainBodySecInside_DashboardSecTopSecRight {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecTopSecRightSec {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecTopSecRightSec.secMainBodySecInside_DashboardSecTopSecRightSecSearch {
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecTopSecRightSec.secMainBodySecInside_DashboardSecTopSecRightSecBtns {
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecTopSecDivider {
|
||||
width: 1px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
height: 100%;
|
||||
max-height: 25px;
|
||||
}
|
||||
|
||||
.btnMain.secMainBodySecInside_DashboardSecTopSecRightSecBtnsBtn {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.secMainBodySecInside_DashboardSecMidCards {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.secMainBodySecInside_DashboardSecMidCards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrap {
|
||||
transition: ease 0.2s;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 0px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border-left: solid 4px rgba(76,130,163,0);
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrap:hover {
|
||||
transition: ease 0.2s;
|
||||
border-left: solid 4px #4c82a3;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrap:hover > .secMainBodySecInside_DashboardSecMidCardsWrapBtns {
|
||||
transition: ease 0.2s;
|
||||
padding: 5px 10px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLink {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
color: unset;
|
||||
text-decoration: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 15px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLink:hover {
|
||||
color: unset;
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapBtns {
|
||||
transition: ease 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 5px;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
width: 0px;
|
||||
overflow: hidden;
|
||||
border-left: solid 1px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btnMain.secMainBodySecInside_DashboardSecMidCardsWrapBtnsBtn {
|
||||
background: rgba(76,130,163,0);
|
||||
color: rgb(76,130,163);
|
||||
flex-grow: 1;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkTop {
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkTopText {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidPrimary {
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidSecondary {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidDivider {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser {
|
||||
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;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther {
|
||||
transition: ease 0.2s;
|
||||
margin: 0 0 0 -15px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther:hover {
|
||||
transition: ease 0.2s;
|
||||
margin: 0 15px 0 0px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus {
|
||||
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;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst {
|
||||
margin: 0 0 0 -15px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst:hover {
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
color: rgba(0,0,0,0.3);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomSplit {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRowVisual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRowText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
696
files.css
Normal file
696
files.css
Normal file
@ -0,0 +1,696 @@
|
||||
.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-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.filesPageSec.filesPageSecSides {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 15px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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: 992px) {
|
||||
.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;
|
||||
}
|
||||
|
||||
116
footer.css
Normal file
116
footer.css
Normal file
@ -0,0 +1,116 @@
|
||||
.secMain.secMainFooter {
|
||||
background: white;
|
||||
padding: 50px 0 0 0;
|
||||
}
|
||||
|
||||
.secMainFooterInside {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.secMainFooterInsideTop {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 1.75fr 0.75fr;
|
||||
grid-gap: 50px;
|
||||
padding: 0 0 40px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.secMainFooterInsideTop {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSec {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 0px;
|
||||
}
|
||||
|
||||
.secMainFooterInsideBottom {
|
||||
padding: 10px 0;
|
||||
border-top: solid 1px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.secMainFooterInsideBottomSec {
|
||||
}
|
||||
|
||||
.secMainFooterInsideBottomSecText {
|
||||
text-align: center;
|
||||
color: rgba(0,0,0,0.5);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSecLeftTop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSecLeftBottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btnMain.secMainFooterInsideTopSecMidBtn {
|
||||
flex-grow: 1;
|
||||
background: unset;
|
||||
color: rgba(0,0,0,0.65);
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSecLeftTopImg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSecLeftBottomText {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSecMidInside {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.secMainFooterInsideTopSecMidInside {
|
||||
flex-direction: column;
|
||||
justify-content: unset;
|
||||
align-items: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSecRightInside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.secMainFooterInsideTopSecRightInside {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSecRightInsideText {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.secMainFooterInsideTopSecRightInsideLinks {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.btnMain.secMainFooterInsideTopSecRightInsideLinksLink {
|
||||
}
|
||||
|
||||
171
frontpage.css
Normal file
171
frontpage.css
Normal file
@ -0,0 +1,171 @@
|
||||
.secMainBodySecInside_Front {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 45px;
|
||||
border-radius: 4px;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.secMainBodySecInside_Front {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSec {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 0px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecLogo {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecLogoImg {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecInfoHeading {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecInfoText {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecCards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecCards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 0px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInside {
|
||||
transition: ease 0.2s;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 15px;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInside:hover {
|
||||
transition: ease 0.2s;
|
||||
background: #4c82a3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInside:hover > .secMainBodySecInside_FrontSecCardsCardInsideSecTop > .secMainBodySecInside_FrontSecCardsCardInsideSecTopVisual {
|
||||
transition: ease 0.2s;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInside:hover > .secMainBodySecInside_FrontSecCardsCardInsideSecBottom > .secMainBodySecInside_FrontSecCardsCardInsideSecBottomBtnAlt {
|
||||
transition: ease 0.2s;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInsideSec {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 0px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecTop {
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecMid {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecBottom {
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInsideSecTopVisual {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
color: rgb(76,130,163);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSecCardsCardInsideSecTopText {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.btnMain.secMainBodySecInside_FrontSecCardsCardInsideSecBottomBtnAlt {
|
||||
background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.00)), linear-gradient(rgba(76,130,163,0), rgba(76,130,163,0));
|
||||
color: #434343;
|
||||
}
|
||||
|
||||
.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecExtra {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.secMainBodySec.secMainBodySecFront {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.secMainBodySecFrontBGElement {
|
||||
width: 13%;
|
||||
opacity: 0.05;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.secMainBodySecFrontBGElement {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainBodySecFrontBGElement.secMainBodySecFrontBGElementRight {
|
||||
top: 50px;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.secMainBodySecFrontBGElement.secMainBodySecFrontBGElementLeft {
|
||||
bottom: 50px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
74
nav.css
Normal file
74
nav.css
Normal file
@ -0,0 +1,74 @@
|
||||
.secMain.secMainNav {
|
||||
background: white;
|
||||
height: 75px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secMainNavInside {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||
grid-gap: 25px;
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.secMainNavInside {
|
||||
grid-template-columns: 0.75fr 0fr 2.25fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.secMainNavInsideSec {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secMainNavInsideSecLeft {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secMainNavInsideSecMid {
|
||||
}
|
||||
|
||||
.secMainNavInsideSecRight {
|
||||
}
|
||||
|
||||
.linkMain.secMainNavInsideSecLeftLink {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.linkMain.secMainNavInsideLeftLink {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.secMainNavInsideLeftLinkImg {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.secMainNavInsideSecLeftInside {
|
||||
}
|
||||
|
||||
.secMainNavInsideSecMidInside {
|
||||
}
|
||||
|
||||
.secMainNavInsideSecRightInside {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.btnMain.secMainNavInsideSecRightInsideBtn {
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user