f7cloud_client/themes/forbion/css/pages/app-files/_app-files.css
root 8b6a0139db f7cloud_client
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-17 22:59:26 +00:00

876 lines
25 KiB
CSS

@import url('./icons/_icons.css');
body {
--color-primary-element: #70B62B !important;
--color-primary-element-hover: #6faf2e !important;
--color-primary-element-light-hover: #ffffff !important;
--color-background-hover: transparent !important;
--sidebar-pad: 0px;
--vs-border-width: 1px solid #E6E6E6;
--row-height: 60px !important;
& #app-content-vue {
width: 100% !important;
background-color: transparent !important;
margin-left: var(--main-margin-panels) !important;
margin-right: calc(var(--main-margin-panels) - 1px) !important;
& .files-list .files-list__tbody .files-list__row-icon {
flex: 0 0 32px !important;
}
& .files-list {
background-color: #ffffff;
border-radius: 8px;
margin-top: var(--main-margin-panels);
& .files-list__before {
& .files-list__header-workspace {
& .text-editor {
& .content-wrapper.text-editor__content-wrapper {
& .tiptap {
& > p[data-placeholder="Start writing or type '/' to add"]::before {
content:"" !important;
}
}
}
}
}
}
}
& .files-list__header {
background-color: #ffffff;
border-radius: 8px;
height: 40px;
flex: none;
padding-inline: calc(var(--default-clickable-area, 44px) + 2 * var(--app-navigation-padding, 4px)) var(--app-navigation-padding, 4px);
margin-inline: 0 !important;
margin-block: 0 !important;
}
}
/*upload-picker*/
& .mask-button-load {
width: 256px !important;
min-height: 40px !important;
color: white;
background-color: #b8d0a0 !important;
border-radius: 8px;
position: absolute;
top: 0;
left: 0;
}
& #content-vue {
z-index: 100 !important;
position: relative;
}
& #app-content-vue {
z-index: 900 !important;
overflow: visible;
}
& .app-navigation {
z-index: 910 !important;
top: 40px !important;
.app-navigation-toggle-wrapper {
z-index: 960 !important;
}
& .app-navigation__search {
display: none;
}
}
& .upload-picker.files-list__header-upload-button.upload-picker--uploading .action-item {
display: none !important;
}
& .upload-picker:not(.upload-picker--uploading) {
height: 40px !important;
& .action-item>div>button {
color: white;
width: 256px;
background-color: #70B62B !important;
height: 40px;
/*gap: 8px;*/
padding: 10px 14px;
border-radius: 8px;
}
& .action-item>div>button:before {
content: '';
position: absolute;
top: 0;
right: 31px;
width: 2px;
height: 100%;
background: #ffffff;
pointer-events: none;
}
& .action-item>div>button:after {
content: '';
position: absolute;
top: 50%;
right: 7px;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("../../../images/plus.svg");
background-repeat: no-repeat;
pointer-events: none;
}
}
& .upload-picker.files-list__header-upload-button {
display: block !important;
padding: 0;
position: absolute;
left: -261px;
top: 0;
z-index: 920 !important;
& .upload-picker__cancel {
top: 0;
right: -20px;
position: absolute;
}
& .action-item {
& .v-popper>button {
width: 256px;
height: 40px;
}
& .button-vue__wrapper::before {
font-family: Raleway;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0px;
left: 48px;
position: absolute;
content: "Создать или загрузить";
}
& .button-vue__wrapper:after {
background-image: url("/themes/forbion/images/inbox-mail-white.svg") !important;
content: '';
position: absolute;
top: 7px;
left: 15px;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
& .button-vue__wrapper .button-vue__text,
.button-vue__wrapper .button-vue__icon {
display: none;
}
}
& .files-list__header-upload-button--disabled {
color: white;
width: 247px;
background-color: #b8d0a0 !important;
/*background-color: #70b62b5e !important;*/
opacity: 1;
height: 40px;
padding: 10px 14px;
border-radius: 8px;
display: flex !important;
& .button-vue__wrapper:after {
background-image: url('/themes/forbion/images/inbox-mail-white.svg') !important;
content: '';
position: absolute;
top: 10px;
left: 15px;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
& .button-vue__icon {
display: none;
}
& .button-vue__text {
font-family: Raleway;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
}
& .files-list__header-upload-button--disabled:before {
content: '';
position: absolute;
top: 0;
right: 31px;
width: 2px;
height: 100%;
background: #ffffff;
pointer-events: none;
}
& .files-list__header-upload-button--disabled:after {
content: '';
position: absolute;
top: 50%;
right: 7px;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("../../../images/plus.svg");
background-repeat: no-repeat;
pointer-events: none;
}
& .files-list__header-share-button {
display: none !important;
}
& .material-design-icon .material-design-icon__svg>path {
color: white !important;
}
}
/*upload-picker*/
& .app-navigation.files-navigation {
/*width: 256px !important;*/
background-color: transparent !important;
& .app-navigation-entry__settings {
background-color: #ffffff !important;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
& .app-navigation__body {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: var(--main-margin-panels);
background-color: #ffffff !important;
}
& .app-navigation-toggle-wrapper {
top: -37px !important;
& button {
background-color: transparent;
}
& .material-design-icon>svg {
display: none;
}
& .material-design-icon::before {
background-image: url("/themes/forbion/images/files/close-sidebar-gray.svg") !important;
content: '';
width: 20px;
height: 36px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
& .material-design-icon.menu-icon::before {
transform: scale(1.1) rotateY(-180deg);
}
& .material-design-icon.menu-icon>svg path {
color: #808080;
}
}
& #app-navigation-vue {
& .app-navigation__search {
& .input-field__main-wrapper input {
box-shadow: none;
border: 1px solid #E6E6E6;
}
}
& .upload-picker.files-list__header-upload-button.upload-picker--uploading {
height: 40px !important;
display: flex !important;
}
& .upload-picker--uploading button.button-vue.button-vue--size-normal.button-vue--icon-and-text {
background-color: transparent !important;
width: 40px !important;
height: 40px !important;
border: none;
& .button-vue__text::after {
left: 9px !important;
}
}
}
}
& #app-content-vue:has(li.vue-crumb a[aria-label="Предоставленные вам"]),
#app-content-vue:has(li.vue-crumb a[aria-label="Ожидающие подтверждения"]),
#app-content-vue:has(li.vue-crumb a[aria-label="Доступные по ссылке"]),
#app-content-vue:has(li.vue-crumb a[aria-label="Доступные для других"]) {
& .files-list__empty {
& .empty-content__icon .icon-vue>span>svg {
display: none;
}
& .empty-content__icon .icon-vue>span::before {
background-image: url("/themes/forbion/images/files/shared-icon-colored.svg") !important;
content: '';
width: 75px;
height: 75px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
}
}
& #app-content-vue:has(li.vue-crumb a[aria-label="Запросы файлов"]) {
& .files-list__empty {
& .empty-content__icon .icon-vue>span>svg {
display: none;
}
& .empty-content__icon .icon-vue>span::before {
background-image: url("/themes/forbion/images/files/folder-icon-colored.svg") !important;
content: '';
width: 75px;
height: 75px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
}
}
& #app-content-vue:has(li.vue-crumb a[aria-label="Удалённые общие ресурсы"]) {
& .files-list__empty {
& .empty-content__icon .icon-vue>span>svg {
display: none;
}
& .empty-content__icon .icon-vue>span::before {
background-image: url("/themes/forbion/images/files/trash-icon-colored.svg") !important;
content: '';
width: 75px;
height: 75px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
}
}
& #content-vue {
gap: 0px !important;
}
& #app-content-vue {
& .empty-content .empty-content__icon {
background-color: #ffffff;
& .icon-vue svg path {
color: #70B62B !important;
}
}
& .files-list__before {
& .editor .container-suggestions {
margin-left: 0px;
margin-bottom: 8px;
}
}
& .files-list__empty:has(form.upload-picker.files-list__header-upload-button) {
& .empty-content__icon .icon-vue>span>svg {
display: none;
}
& .empty-content__icon .icon-vue>span::before {
background-image: url("/themes/forbion/images/files/folder-icon-colored.svg") !important;
content: '';
width: 75px;
height: 75px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
}
& .material-design-icon.dots-horizontal-icon>svg {
display: none;
}
& .material-design-icon.dots-horizontal-icon::before {
background-image: url("/themes/forbion/images/files/dots-vertic-gray.svg") !important;
content: '';
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
& .files-list__filters .file-list-filters__filter .icon-vue>svg path {
color: #808080;
}
& .files-list__filters .file-list-filters__filter .button-vue--vue-secondary .icon-vue>svg path {
color: #ffffff;
}
& .files-list__header {
& .files-list__breadcrumbs.breadcrumb {
justify-content: space-between;
margin-inline: 0 !important;
& .breadcrumb__crumbs {
& .button-vue__icon,
span.icon-vue svg {
display: none;
}
}
}
& .magnifier-icon {
display: flex;
}
& .material-design-icon.view-grid-outline-icon>svg,
.material-design-icon.format-list-bulleted-square-icon>svg,
.material-design-icon.view-grid-icon>svg {
display: none;
}
& .material-design-icon.view-grid-outline-icon::before,
.material-design-icon.view-grid-icon::before {
background-image: url("/themes/forbion/images/files/grid-files-gray.svg") !important;
content: '';
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
& .material-design-icon.format-list-bulleted-square-icon::before {
background-image: url("/themes/forbion/images/files/grid-files-gray.svg") !important;
content: '';
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
& .files-list__thead-overlay {
& button[data-cy-files-list-selection-action="favorite"] {
& .icon-vue svg {
display: none;
}
& .icon-vue::before {
background-image: url("/themes/forbion/images/files/star-white.svg") !important;
content: '';
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
& button[data-cy-files-list-selection-action="systemtags:bulk"] {
& .icon-vue svg {
display: none;
}
& .icon-vue::before {
background-image: url("/themes/forbion/images/files/tags-white.svg") !important;
content: '';
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
& button[data-cy-files-list-selection-action="move-copy"] {
& .icon-vue svg {
display: none;
}
& .icon-vue::before {
background-image: url("/themes/forbion/images/files/copy-move-white.svg") !important;
content: '';
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
}
& .files-list__thead-overlay {
top: 0 !important;
}
& .files-list__table {
& .files-list__thead {
position: static !important;
}
& .files-list__row-head {
height: 65px !important;
& .files-list__column.files-list__row-name.files-list__column--sortable {
height: 65px !important;
& .file-list-filters {
gap: 2px !important;
}
}
& .button-vue.files-list__column-sort-button {
min-width: 0 !important;
width: 100px;
}
}
& .material-design-icon.checkbox-blank-outline-icon,
.material-design-icon.checkbox-marked-icon,
.material-design-icon.minus-box-icon {
width: 16px !important;
height: 16px !important;
}
& .material-design-icon.checkbox-blank-outline-icon svg path {
color: #808080;
}
}
}
& #app-sidebar-vue {
border-radius: 8px;
& .app-sidebar-header {
& .app-sidebar-header__info .app-sidebar-header__desc .app-sidebar-header__subname .sidebar__subname {
& span.icon-vue svg {
display:none;
}
& span.icon-vue::before {
background-image: url("/themes/forbion/images/files/star-green-full.svg") !important;
content: "";
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
}
}
& .app-sidebar-tabs__nav {
& #tab-button-version_vue .svg-icon,
#tab-button-version_vue .checkbox-content__icon svg {
display: none !important;
}
& #tab-button-version_vue .checkbox-content__icon::before {
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url('/themes/forbion/images/right-sidebar/version-icon-black.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
& #tab-button-sharing .svg-icon,
#tab-button-sharing_vue .checkbox-content__icon svg {
display: none !important;
}
& #tab-button-sharing .checkbox-content__icon::before {
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url('/themes/forbion/images/right-sidebar/people-icon-black.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
& #tab-button-chat .icon-talk,
#tab-button-chat_vue .checkbox-content__icon svg {
display: none !important;
}
& #tab-button-chat .checkbox-content__icon::before {
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url('/themes/forbion/images/right-sidebar/chats-icon-black.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
& #tab-activity {
& .activity-entry {
align-items: center;
gap: 5px;
}
& .rich-text--wrapper.activity-entry__content__subject {
font-weight: 500;
font-size: 14px;
line-height: 20.14px;
}
& .nc-datetime.activity-entry__date {
font-weight: 600;
font-size: 12px;
line-height: 20.14px;
}
}
& .sharingTab__content {
display: flex;
flex-direction: column;
& .sharing-entry__title {
font-weight: 500;
font-size: 14px;
line-height: 20.14px;
}
}
& .sharingTabDetailsView__wrapper {
overflow-x: hidden !important;
}
& .sharingTabDetailsView__advanced {
& .input-field__main-wrapper input {
box-shadow: none;
border: 1px solid #E6E6E6;
}
}
& .sharingTabDetailsView__wrapper {
& input[type="text"] {
box-shadow: none;
border: 1px solid #E6E6E6;
}
}
& .sharingTab {
& .avatar-class-icon.avatar-link-share.icon-public-white {
background-image: url('/themes/forbion/images/right-sidebar/sidebar-share-icon.svg');
}
& .avatar-shared.icon-more-white {
background-image: url('/themes/forbion/images/right-sidebar/sidebar-people-icon.svg');
}
& .avatar-external.icon-external-white {
background-image: url('/themes/forbion/images/right-sidebar/sidebar-link-icon.svg');
}
& .material-design-icon.content-copy-icon svg {
display: none;
}
& .material-design-icon.content-copy-icon::before {
content: '';
background-image: url("/themes/forbion/images/files/plus-black.svg");
width: 16px;
height: 16px;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
& .sharingTab__content section:nth-child(2) {
order: -1;
padding-bottom: 0px;
border-bottom: none;
& .section-header,
.sharing-search {
display: none;
}
}
& .sharingTab__content section:nth-child(1) {
padding-bottom: 0px;
border-bottom: none;
& .section-header,
.sharing-search {
display: none;
}
& .sharing-entry__desc {
&>p {
display: none;
}
}
}
& .sharingTab__content section:nth-child(3) {
display: none;
}
}
& .talkChatTab {
& .icon.icon-talk {
margin: 0 !important;
background-image: url("/themes/forbion/images/files/go-to-chat-colored.svg");
opacity: 1;
}
& .emptycontent.room-not-joined>button {
height: 36px;
& .button-vue__text {
font-weight: 500;
font-size: 14px;
line-height: 20px;
}
}
}
}
& .modal-mask.dialog__modal {
& .modal-wrapper.modal-wrapper--small {
& .modal-container {
padding-top: 32px;
& .button-vue.button-vue--size-normal.button-vue--icon-and-text.button-vue--vue-primary .button-vue__icon {
display: none;
}
& .button-vue__wrapper::before {
background-image: url("/themes/forbion/images/files/save-icon-white.svg") !important;
content: '';
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 2px;
}
& .dialog__name {
display: flex;
justify-content: start;
}
& .input-field__main-wrapper {
height: 36px;
input {
border: 1px solid #E6E6E6;
box-shadow: none;
}
}
}
}
}
}
@media (max-width: 1024px) {
body {
& #app-content-vue {
margin-left: 0 !important;
margin-right: 0 !important;
}
& #app-sidebar-vue {
margin-left: var(--main-margin-panels) !important;
}
}
}