0
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2025-01-31 14:53:18 +00:00
nextcloud_server/apps/files_external/css/settings.scss
Daniel Calviño Sánchez 9108d54bda fix: Remove status check when configuration was changed
Setting a null status was supposed to remove the status check, but
nothing was changed in that case. Now the status check is properly
removed, and doing that by hiding the element rather than just turning
it invisible also prevents that clicking on the invisible status
triggers a check, as until the new configuration is saved the check will
still be performed with the old configuration, which could be misleading
for the user.

Additionally, an explicit width is set to the parent of the span element
to prevent its width from changing when the span is shown and hidden.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2024-09-05 04:18:37 +02:00

173 lines
3.4 KiB
SCSS

#files_external {
margin-bottom: 0px;
}
#externalStorage {
margin: 15px 0 20px 0;
tr.externalStorageLoading > td {
text-align: center;
}
}
#externalStorage td {
& > input:not(.applicableToAllUsers), & > select {
width: 100%;
}
}
#externalStorage .popovermenu li > .menuitem {
width: fit-content !important;
}
#externalStorage td.status {
/* overwrite conflicting core styles */
display: table-cell;
vertical-align: middle;
/* ensure width does not change even if internal span is not displayed */
width: 43px;
}
#externalStorage td.status > span {
display: inline-block;
height: 28px;
width: 28px;
vertical-align: text-bottom;
border-radius: 50%;
cursor: pointer;
}
#externalStorage {
td.mountPoint, td.backend, td.authentication, td.configuration {
min-width: 160px;
width: 15%;
}
}
#externalStorage td>img { padding-top:7px; opacity: 0.5; }
#externalStorage td>img:hover { padding-top:7px; cursor:pointer; opacity: 1; }
#addMountPoint>td { border:none; }
#addMountPoint>td.applicable { visibility:hidden; }
#addMountPoint>td.hidden { visibility:hidden; }
#externalStorage td {
height: 50px;
&.mountOptionsToggle,
&.remove,
&.save {
position: relative;
padding: 0 !important;
width: 44px;
[class^='icon-'],
[class*=' icon-'] {
width: 44px;
height: 44px;
margin: 3px;
opacity: 0.5;
padding: 14px;
vertical-align: text-bottom;
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
}
#selectBackend {
margin-left: -10px;
width: 150px;
}
#externalStorage td.configuration,
#externalStorage td.backend {
white-space: normal;
}
#externalStorage td.configuration > * {
white-space: nowrap;
}
#externalStorage td.configuration input.added {
margin-right: 6px;
}
#externalStorage label > input[type="checkbox"] {
margin-right: 3px;
}
#externalStorage td.configuration label {
width: 100%;
display: inline-flex;
align-items: center;
}
#externalStorage td.configuration input.disabled-success {
background-color: rgba(134, 255, 110, 0.9);
}
#externalStorage td.applicable label {
display: inline-flex;
align-items: center;
}
#externalStorage td.applicable div.chzn-container {
position: relative;
top: 3px;
}
#externalStorage .select2-container.applicableUsers {
width: 100% !important;
}
#userMountingBackends {
padding-left: 25px;
}
.files-external-select2 .select2-results .select2-result-label {
height: 32px;
padding: 3px;
}
.files-external-select2 .select2-results .select2-result-label > span {
display: block;
position: relative;
}
.files-external-select2 .select2-results .select2-result-label .avatardiv {
display:inline-block;
}
.files-external-select2 .select2-results .select2-result-label .avatardiv + span {
position: absolute;
top: 5px;
margin-left: 10px;
}
.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type="group"] + span {
vertical-align: top;
top: 6px;
position: absolute;
max-width: 80%;
left: 30px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#externalStorage .select2-container .select2-search-choice {
display: flex;
.select2-search-choice-close {
display: block;
left: auto;
position: relative;
width: 20px;
}
}
#externalStorage .mountOptionsToggle .dropdown {
width: auto;
}
.nav-icon-external-storage {
background-image: var(--icon-external-dark);
}
.global_credentials__personal {
margin: 10px auto;
text-align: center;
width: min(400px, 100vw);
}