feat: Add bidi support in core directory
Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>
This commit is contained in:
Mostafa Ahangarha
committed by
nextcloud-command
nextcloud-command
parent
23efda9111
commit
723780d184
@@ -316,7 +316,7 @@ $comment-padding: 10px;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
margin-left: $comment-padding !important;
|
||||
margin-inline-start: $comment-padding !important;
|
||||
}
|
||||
|
||||
&__author {
|
||||
@@ -328,8 +328,8 @@ $comment-padding: 10px;
|
||||
|
||||
&_loading,
|
||||
&__timestamp {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
margin-inline-start: auto;
|
||||
text-align: end;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
@@ -346,7 +346,7 @@ $comment-padding: 10px;
|
||||
&__submit {
|
||||
position: absolute !important;
|
||||
bottom: 5px;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
&__message {
|
||||
|
||||
@@ -569,7 +569,7 @@ export default {
|
||||
background-size: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 16px;
|
||||
margin-inline-end: 16px;
|
||||
background-position: center;
|
||||
float: left;
|
||||
margin-top: -6px;
|
||||
@@ -609,7 +609,7 @@ export default {
|
||||
margin:auto;
|
||||
background-position: 16px center;
|
||||
padding: 12px 16px;
|
||||
padding-left: 36px;
|
||||
padding-inline-start: 36px;
|
||||
border-radius: var(--border-radius-pill);
|
||||
max-width: 200px;
|
||||
opacity: 1;
|
||||
@@ -661,7 +661,7 @@ export default {
|
||||
background-color: var(--color-background-hover);
|
||||
border: 2px solid var(--color-main-background);
|
||||
border-radius: var(--border-radius-large);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -691,7 +691,7 @@ export default {
|
||||
|
||||
input[type='checkbox'].checkbox + label:before {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
inset-inline-end: 12px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,13 +41,13 @@ form #selectPartStatForm label {
|
||||
}
|
||||
|
||||
form #selectPartStatForm label:first-of-type {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-start-start-radius: 4px;
|
||||
border-end-start-radius: 4px;
|
||||
}
|
||||
|
||||
form #selectPartStatForm label:last-of-type {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-start-end-radius: 4px;
|
||||
border-end-end-radius: 4px;
|
||||
}
|
||||
|
||||
form #selectPartStatForm label span {
|
||||
@@ -79,4 +79,4 @@ form input[type="submit"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 11px 20px 9px
|
||||
}
|
||||
}
|
||||
|
||||
@@ -164,12 +164,13 @@ export default {
|
||||
width: 120px;
|
||||
}
|
||||
.time-zone {
|
||||
padding: 32px 12px 12px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-block: 32px 12px;
|
||||
padding-inline: 0 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__heading {
|
||||
margin-right: calc(var(--default-grid-baseline) * 2);
|
||||
margin-inline-end: calc(var(--default-grid-baseline) * 2);
|
||||
line-height: var(--default-clickable-area);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -164,7 +164,7 @@ export default {
|
||||
margin-top: 0.5rem;
|
||||
button {
|
||||
display: inline-flex;
|
||||
margin-left: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
&__website-button {
|
||||
@@ -184,6 +184,6 @@ export default {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
#cloudid {
|
||||
margin-left: 0.25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
.removeTrustedServer {
|
||||
display: none;
|
||||
vertical-align:middle;
|
||||
padding-left: 10px;
|
||||
padding-inline-start: 10px;
|
||||
}
|
||||
|
||||
#ocFederationAddServerButton {
|
||||
@@ -22,14 +22,14 @@
|
||||
}
|
||||
|
||||
#listOfTrustedServers .status {
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
#listOfTrustedServers .icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
#ocFederationAddServer #serverUrl {
|
||||
|
||||
@@ -34,8 +34,8 @@
|
||||
}
|
||||
|
||||
.app-sidebar .thumbnailContainer.large {
|
||||
margin-left: -15px;
|
||||
margin-right: -35px; /* 15 + 20 for the close button */
|
||||
margin-inline-start: -15px;
|
||||
margin-inline-end: -35px; /* 15 + 20 for the close button */
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
overflow-x: hidden;
|
||||
padding-top: 14px;
|
||||
font-size: 80%;
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.app-sidebar .thumbnail {
|
||||
@@ -81,7 +81,7 @@
|
||||
min-height: 75px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -126,7 +126,7 @@
|
||||
.app-sidebar .close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
opacity: .5;
|
||||
z-index: 1;
|
||||
width: 44px;
|
||||
|
||||
+49
-52
@@ -29,7 +29,7 @@
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
.button:not(:last-child) {
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
width: unset;
|
||||
gap: 14px;
|
||||
background-color: var(--color-primary-element-light);
|
||||
@@ -44,7 +44,7 @@
|
||||
}
|
||||
|
||||
#trash {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
float: right;
|
||||
z-index: 1010;
|
||||
padding: 10px;
|
||||
@@ -212,21 +212,21 @@ table th .columntitle {
|
||||
}
|
||||
table.multiselect th .columntitle {
|
||||
display: inline-block;
|
||||
margin-right: -20px;
|
||||
margin-inline-end: -20px;
|
||||
}
|
||||
table th .columntitle.name {
|
||||
padding-left: 0;
|
||||
margin-left: 44px;
|
||||
padding-inline-start: 0;
|
||||
margin-inline-start: 44px;
|
||||
}
|
||||
|
||||
table.multiselect th .columntitle.name {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
table th .sort-indicator {
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
opacity: .3;
|
||||
@@ -248,7 +248,7 @@ table th:focus .sort-indicator.hidden {
|
||||
table th,
|
||||
table td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-weight: normal;
|
||||
}
|
||||
table td {
|
||||
@@ -272,7 +272,7 @@ table th.column-selection {
|
||||
padding-top: 2px;
|
||||
}
|
||||
table th.column-size, table td.filesize {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
table th.column-mtime, table td.date,
|
||||
table th.column-last, table td.column-last {
|
||||
@@ -303,7 +303,7 @@ table.multiselect thead th {
|
||||
}
|
||||
|
||||
#app-content.with-app-sidebar table.multiselect thead{
|
||||
margin-right: 27%;
|
||||
margin-inline-end: 27%;
|
||||
}
|
||||
|
||||
table.multiselect .column-name {
|
||||
@@ -352,7 +352,7 @@ table td.filename .thumbnail {
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 9px;
|
||||
margin-inline-start: 9px;
|
||||
margin-top: 9px;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
@@ -370,7 +370,7 @@ table tr[data-has-preview='true'] .thumbnail {
|
||||
|
||||
table:not(.view-grid) td.filename input.filename {
|
||||
width: 70% !important;
|
||||
margin-left: 48px !important;
|
||||
margin-inline-start: 48px !important;
|
||||
cursor: text;
|
||||
}
|
||||
table td.filename form {
|
||||
@@ -402,7 +402,8 @@ table {
|
||||
text-overflow: ellipsis;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
padding: 0 20px 0 0;
|
||||
padding: 0;
|
||||
padding-inline-end: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -435,13 +436,13 @@ table td.filename .uploadtext {
|
||||
position: absolute;
|
||||
font-weight: normal;
|
||||
// checkbox width
|
||||
margin-left: 50px;
|
||||
left: 0;
|
||||
margin-inline-start: 50px;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
padding: 0 4px;
|
||||
// align with file name
|
||||
padding-left: 1px;
|
||||
padding-inline-start: 1px;
|
||||
font-size: 11px;
|
||||
// double the font size
|
||||
line-height: 22px;
|
||||
@@ -457,7 +458,7 @@ table td.selection {
|
||||
/* File checkboxes */
|
||||
.files-fileList tr td.selection>.selectCheckBox + label:before {
|
||||
opacity: 0.3;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
/* Show checkbox with full opacity when hovering, checked, or selected */
|
||||
@@ -497,8 +498,7 @@ table td.selection {
|
||||
.files-fileList tr td.filename {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right:0;
|
||||
padding-inline: 0;
|
||||
-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
|
||||
}
|
||||
|
||||
@@ -517,7 +517,7 @@ table td.selection {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
inset-inline-end: -8px;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
&.permanent {
|
||||
@@ -634,7 +634,7 @@ a.action.action-setreminder {
|
||||
/* hide text of the share action */
|
||||
/* .hidden-visually for accessbility */
|
||||
position: absolute;
|
||||
left:-10000px;
|
||||
inset-inline-start:-10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@@ -648,8 +648,8 @@ a.action.action-setreminder {
|
||||
&.action-menu {
|
||||
padding-top: 17px;
|
||||
padding-bottom: 17px;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
padding-inline-start: 14px;
|
||||
padding-inline-end: 14px;
|
||||
}
|
||||
&.no-permission {
|
||||
&:hover, &:focus {
|
||||
@@ -691,11 +691,11 @@ a.action.action-setreminder {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
|
||||
.files-fileList .remoteAddress .userDomain {
|
||||
margin-left: 0 !important;
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.files-fileList .favorite-mark.permanent {
|
||||
@@ -732,7 +732,7 @@ a.action.action-setreminder {
|
||||
.files-filestable .summary .filesummary {
|
||||
width: 100%;
|
||||
/* Width of checkbox and file preview */
|
||||
padding-left: 101px;
|
||||
padding-inline-start: 101px;
|
||||
}
|
||||
/* Less whitespace needed on link share page
|
||||
* as there is a footer and action menus have fewer entries.
|
||||
@@ -763,23 +763,20 @@ table.dragshadow {
|
||||
z-index: 2000;
|
||||
}
|
||||
table.dragshadow td.filename {
|
||||
padding-left:60px;
|
||||
padding-right:16px;
|
||||
padding-inline-start: 60px;
|
||||
padding-inline-end: 16px;
|
||||
height: 36px;
|
||||
|
||||
/* Override "max-width: 0" to prevent file name and size from overlapping */
|
||||
max-width: unset;
|
||||
}
|
||||
table.dragshadow td.size {
|
||||
padding-right:8px;
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
.mask {
|
||||
z-index: 50;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
background-color: var(--color-main-background);
|
||||
background-repeat: no-repeat no-repeat;
|
||||
background-position: 50%;
|
||||
@@ -797,14 +794,14 @@ table.dragshadow td.size {
|
||||
.newFileMenu {
|
||||
font-weight: 300;
|
||||
top: 100%;
|
||||
left: -48px !important;
|
||||
inset-inline-start: -48px !important;
|
||||
margin-top: 4px;
|
||||
min-width: 100px;
|
||||
z-index: 1001;
|
||||
|
||||
/* Center triangle */
|
||||
&::after {
|
||||
left: 84px !important;
|
||||
inset-inline-start: 84px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -824,7 +821,7 @@ table.dragshadow td.size {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
top: 0;
|
||||
padding-left: 50px; /* width of the nav toggle button; */
|
||||
padding-inline-start: 50px; /* width of the nav toggle button; */
|
||||
|
||||
.actions {
|
||||
> div,
|
||||
@@ -849,7 +846,7 @@ table.dragshadow td.size {
|
||||
/* position controls for apps with app-navigation */
|
||||
|
||||
.viewer-mode #app-navigation + #app-content .files-controls {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.files-filestable .filename .action .icon,
|
||||
@@ -915,8 +912,8 @@ table.dragshadow td.size {
|
||||
}
|
||||
|
||||
.notCreatable {
|
||||
margin-left: 12px;
|
||||
margin-right: 44px;
|
||||
margin-inline-start: 12px;
|
||||
margin-inline-end: 44px;
|
||||
margin-top: 12px;
|
||||
color: var(--color-main-text);
|
||||
overflow: auto;
|
||||
@@ -930,7 +927,7 @@ table.dragshadow td.size {
|
||||
.icon-alert-outline {
|
||||
top: -15px;
|
||||
position: relative;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1022,7 +1019,7 @@ table.dragshadow td.size {
|
||||
height: $grid-size;
|
||||
padding: $grid-pad; // same as action icon bottom and right padding
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: -1; // make sure the default click is the link
|
||||
|
||||
.thumbnail {
|
||||
@@ -1038,9 +1035,9 @@ table.dragshadow td.size {
|
||||
* Position is inherited from the selection while in grid view
|
||||
*/
|
||||
.favorite-mark {
|
||||
left: auto;
|
||||
inset-inline-start: auto;
|
||||
top: -11px; // center in corner of thumbnail
|
||||
right: -11px; // center in corner of thumbnail
|
||||
inset-inline-end: -11px; // center in corner of thumbnail
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1054,7 +1051,7 @@ table.dragshadow td.size {
|
||||
height: 28px;
|
||||
padding-top: 4px;
|
||||
// checkbox margins
|
||||
padding-left: calc(44px - 16px);
|
||||
padding-inline-start: calc(44px - 16px);
|
||||
}
|
||||
|
||||
.name {
|
||||
@@ -1113,7 +1110,7 @@ table.dragshadow td.size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
|
||||
.action {
|
||||
padding: $grid-pad;
|
||||
@@ -1157,7 +1154,7 @@ table.dragshadow td.size {
|
||||
|
||||
input.filename {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
@@ -1173,7 +1170,7 @@ table.dragshadow td.size {
|
||||
&.filename .favorite-mark {
|
||||
position: absolute;
|
||||
top: -8px; // half the checkbox width, center on corner of thumbnail
|
||||
left: -8px; // half the checkbox width, center on corner of thumbnail
|
||||
inset-inline-start: -8px; // half the checkbox width, center on corner of thumbnail
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
|
||||
@@ -1192,7 +1189,7 @@ table.dragshadow td.size {
|
||||
|
||||
/* Position actions menu below file */
|
||||
.popovermenu {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: $grid-size - 10px; // 2 * margin
|
||||
margin: 0 5px;
|
||||
|
||||
@@ -1228,7 +1225,7 @@ table.dragshadow td.size {
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1243,7 +1240,7 @@ table.dragshadow td.size {
|
||||
padding: 22px;
|
||||
opacity: .5;
|
||||
float: right;
|
||||
right: var(--default-grid-baseline);
|
||||
inset-inline-end: var(--default-grid-baseline);
|
||||
top: var(--default-grid-baseline);
|
||||
z-index: 100;
|
||||
position: sticky;
|
||||
@@ -1280,14 +1277,14 @@ table.dragshadow td.size {
|
||||
|
||||
/* Position actions menu correctly below 3-dot-menu */
|
||||
.popovermenu {
|
||||
left: -80px;
|
||||
inset-inline-start: -80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Right-align view toggle on link share page */
|
||||
#view-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,21 +29,21 @@ table td {
|
||||
|
||||
/* remove shift for multiselect bar to account for missing navigation */
|
||||
table.multiselect thead {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.fileList a.action.action-menu img {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.fileList .fileActionsMenu {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
/* hide text of the share action on mobile */
|
||||
/* .hidden-visually for accessbility */
|
||||
.fileList a.action-share span:not(.icon):not(.avatar) {
|
||||
position: absolute;
|
||||
left:-10000px;
|
||||
inset-inline-start: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@@ -90,6 +90,6 @@ table.dragshadow {
|
||||
|
||||
/* Remove the margin to reduce the overlap between the name and the icons */
|
||||
table.multiselect th .columntitle.name {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+10
-11
@@ -8,7 +8,7 @@
|
||||
height: 36px;
|
||||
width: 39px;
|
||||
padding: 0 !important; /* override default control bar button padding */
|
||||
margin-left: 3px;
|
||||
margin-inline-start: 3px;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
@@ -36,16 +36,16 @@
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: 36px;
|
||||
margin-left: 3px;
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
.uploadprogresswrapper > input[type='button'] {
|
||||
height: 36px;
|
||||
margin-left: 3px;
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
#uploadprogressbar {
|
||||
border-color: var(--color-border-dark);
|
||||
border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill);
|
||||
border-right: 0;
|
||||
border-inline-end: 0;
|
||||
position:relative;
|
||||
float: left;
|
||||
width: 200px;
|
||||
@@ -60,7 +60,7 @@
|
||||
#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
|
||||
height: calc(100% + 2px);
|
||||
top: -2px;
|
||||
left: -1px;
|
||||
inset-inline-start: -1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-primary-element);
|
||||
@@ -90,8 +90,8 @@
|
||||
}
|
||||
|
||||
#uploadprogressbar + .stop {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
.oc-dialog .fileexists {
|
||||
@@ -121,11 +121,10 @@
|
||||
width: 100%;
|
||||
}
|
||||
.oc-dialog .fileexists th {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-inline: 0;
|
||||
}
|
||||
.oc-dialog .fileexists th input[type='checkbox'] {
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
.oc-dialog .fileexists th:first-child {
|
||||
width: 225px;
|
||||
@@ -135,7 +134,7 @@
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
.oc-dialog .fileexists th .count {
|
||||
margin-left: 3px;
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
.oc-dialog .fileexists .conflicts .template {
|
||||
display: none;
|
||||
|
||||
@@ -243,7 +243,7 @@ export default defineComponent({
|
||||
border-color: black;
|
||||
|
||||
h3 {
|
||||
margin-left: 16px;
|
||||
margin-inline-start: 16px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
@@ -98,7 +98,7 @@ $stack-shift: 6px;
|
||||
.files-list-drag-image {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
inset-inline-start: -9999px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
@@ -119,7 +119,7 @@ $stack-shift: 6px;
|
||||
|
||||
&__icon {
|
||||
overflow: visible;
|
||||
margin-right: 12px;
|
||||
margin-inline-end: 12px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
@@ -140,7 +140,7 @@ $stack-shift: 6px;
|
||||
// Stack effect if more than one element
|
||||
.files-list__row-icon + .files-list__row-icon {
|
||||
margin-top: $stack-shift;
|
||||
margin-left: $stack-shift - $size;
|
||||
margin-inline-start: $stack-shift - $size;
|
||||
& + .files-list__row-icon {
|
||||
margin-top: $stack-shift * 2;
|
||||
}
|
||||
|
||||
@@ -26,7 +26,8 @@
|
||||
:aria-hidden="isRenaming"
|
||||
class="files-list__row-name-link"
|
||||
data-cy-files-list-row-name-link
|
||||
v-bind="linkTo.params">
|
||||
v-bind="linkTo.params"
|
||||
dir="auto">
|
||||
<!-- Filename -->
|
||||
<span class="files-list__row-name-text">
|
||||
<!-- Keep the filename stuck to the extension to avoid whitespace rendering issues-->
|
||||
|
||||
@@ -443,7 +443,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
justify-content: left;
|
||||
justify-content: start;
|
||||
width: var(--row-height);
|
||||
height: var(--row-height);
|
||||
margin: 0;
|
||||
@@ -465,8 +465,8 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
opacity: .1;
|
||||
z-index: -1;
|
||||
@@ -530,7 +530,7 @@ export default defineComponent({
|
||||
width: var(--icon-preview-size);
|
||||
height: 100%;
|
||||
// Show same padding as the checkbox right padding for visual balance
|
||||
margin-right: var(--checkbox-padding);
|
||||
margin-inline-end: var(--checkbox-padding);
|
||||
color: var(--color-primary-element);
|
||||
|
||||
// Icon is also clickable
|
||||
@@ -576,7 +576,7 @@ export default defineComponent({
|
||||
&-favorite {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -10px;
|
||||
inset-inline-end: -10px;
|
||||
}
|
||||
|
||||
// File and folder overlay
|
||||
@@ -635,7 +635,7 @@ export default defineComponent({
|
||||
color: var(--color-main-text);
|
||||
// Make some space for the outline
|
||||
padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
|
||||
padding-left: 0;
|
||||
padding-inline-start: -10px;
|
||||
// Align two name and ext
|
||||
display: inline-flex;
|
||||
}
|
||||
@@ -654,7 +654,7 @@ export default defineComponent({
|
||||
input {
|
||||
width: 100%;
|
||||
// Align with text, 0 - padding - border
|
||||
margin-left: -8px;
|
||||
margin-inline-start: -8px;
|
||||
padding: 2px 6px;
|
||||
border-width: 2px;
|
||||
|
||||
@@ -685,7 +685,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.files-list__row-action--inline {
|
||||
margin-right: 7px;
|
||||
margin-inline-end: 7px;
|
||||
}
|
||||
|
||||
.files-list__row-mtime,
|
||||
@@ -754,7 +754,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: calc(var(--item-padding)/2);
|
||||
left: calc(var(--item-padding)/2);
|
||||
inset-inline-start: calc(var(--item-padding)/2);
|
||||
overflow: hidden;
|
||||
--checkbox-container-size: 44px;
|
||||
width: var(--checkbox-container-size);
|
||||
@@ -777,7 +777,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
|
||||
.files-list__row-icon-favorite {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -814,7 +814,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
|
||||
|
||||
.files-list__row-actions {
|
||||
position: absolute;
|
||||
right: calc(var(--half-clickable-area) / 2);
|
||||
inset-inline-end: calc(var(--half-clickable-area) / 2);
|
||||
bottom: calc(var(--mtime-height) / 2);
|
||||
width: var(--clickable-area);
|
||||
height: var(--clickable-area);
|
||||
|
||||
@@ -174,7 +174,7 @@ export default {
|
||||
progress {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
margin-left: 44px;
|
||||
margin-inline-start: 44px;
|
||||
width: calc(100% - 44px - 22px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -220,7 +220,7 @@ p {
|
||||
margin-bottom: calc(var(--default-grid-baseline) * 2);
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -231,7 +231,7 @@ p {
|
||||
}
|
||||
.transfer-select-row {
|
||||
span {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
&__choose_button {
|
||||
|
||||
@@ -328,7 +328,7 @@ export default defineComponent({
|
||||
&__loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
#selectBackend {
|
||||
margin-left: -10px;
|
||||
margin-inline-start: -10px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
@@ -88,11 +88,11 @@
|
||||
}
|
||||
|
||||
#externalStorage td.configuration input.added {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
|
||||
#externalStorage label > input[type="checkbox"] {
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
#externalStorage td.configuration label {
|
||||
@@ -120,7 +120,7 @@
|
||||
}
|
||||
|
||||
#userMountingBackends {
|
||||
padding-left: 25px;
|
||||
padding-inline-start: 25px;
|
||||
}
|
||||
|
||||
.files-external-select2 .select2-results .select2-result-label {
|
||||
@@ -137,14 +137,14 @@
|
||||
.files-external-select2 .select2-results .select2-result-label .avatardiv + span {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 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;
|
||||
inset-inline-start: 30px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -154,7 +154,7 @@
|
||||
display: flex;
|
||||
.select2-search-choice-close {
|
||||
display: block;
|
||||
left: auto;
|
||||
inset-inline-start: auto;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
opacity: .1;
|
||||
z-index: -1;
|
||||
|
||||
@@ -10,14 +10,15 @@
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
margin: 3px 10px 3px 15px;
|
||||
margin-block: 3px;
|
||||
margin-inline: 15px 10px;
|
||||
border-bottom: 1px solid var(--color-border-dark);
|
||||
cursor: default;
|
||||
display: flex;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +37,8 @@ table td.filename .nametext {
|
||||
|
||||
/* some padding for better clickability */
|
||||
.files-fileList a.action img {
|
||||
padding: 0 6px 0 12px;
|
||||
padding-block: 0;
|
||||
padding-inline: 12px 6px;
|
||||
}
|
||||
/* hide text of the actions on mobile */
|
||||
.files-fileList a.action:not(.menuitem) span {
|
||||
@@ -53,7 +54,7 @@ table td.filename .nametext {
|
||||
}
|
||||
|
||||
#header .menutoggle {
|
||||
padding-right: 14px;
|
||||
padding-inline-end: 14px;
|
||||
background-position: center;
|
||||
}
|
||||
.note {
|
||||
|
||||
@@ -55,8 +55,7 @@ $download-button-section-height: 200px;
|
||||
|
||||
#imgframe audio {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
#imgframe #viewer[data-handler=audios] {
|
||||
@@ -71,7 +70,7 @@ $download-button-section-height: 200px;
|
||||
#imgframe .text-preview {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
white-space: pre-wrap;
|
||||
overflow-y: scroll;
|
||||
height: auto;
|
||||
@@ -99,12 +98,12 @@ $download-button-section-height: 200px;
|
||||
|
||||
/* fix multiselect bar offset on shared page */
|
||||
thead {
|
||||
left: 0 !important;
|
||||
inset-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
#data-upload-form {
|
||||
position: relative;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
@@ -120,8 +119,7 @@ thead {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 90%;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-inline: auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@@ -171,7 +169,7 @@ thead {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
margin-bottom: 0;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -192,13 +190,13 @@ thead {
|
||||
line-height: initial;
|
||||
margin: 20px;
|
||||
padding: 10px 20px;
|
||||
padding-left: 42px;
|
||||
padding-inline-start: 42px;
|
||||
}
|
||||
|
||||
#public-upload .emptycontent ul {
|
||||
width: 230px;
|
||||
margin: 5px auto 5vh;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
#public-upload .emptycontent li {
|
||||
@@ -209,14 +207,14 @@ thead {
|
||||
}
|
||||
|
||||
#public-upload .emptycontent li img {
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#drop-upload-progress-indicator span.icon-loading-small {
|
||||
padding-left: 18px;
|
||||
margin-right: 7px;
|
||||
padding-inline-start: 18px;
|
||||
margin-inline-end: 7px;
|
||||
}
|
||||
|
||||
#drop-uploaded-files li #drop-upload-name {
|
||||
@@ -235,7 +233,7 @@ thead {
|
||||
.note {
|
||||
margin: 0 auto 30px;
|
||||
max-width: 400px;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
#note-content {
|
||||
|
||||
@@ -92,7 +92,7 @@ export default {
|
||||
}
|
||||
}
|
||||
&__actions {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -896,7 +896,7 @@ export default {
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
// put menus to the left
|
||||
@@ -905,7 +905,7 @@ export default {
|
||||
|
||||
~.action-item,
|
||||
~.sharing-entry__loading {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -86,7 +86,7 @@ export default {
|
||||
max-width: inherit;
|
||||
}
|
||||
&__actions {
|
||||
margin-left: auto !important;
|
||||
margin-inline-start: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,7 @@ li.crumb span.icon-public {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
opacity: 0.2;
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
|
||||
li.crumb span.icon-shared.shared,
|
||||
|
||||
@@ -1116,7 +1116,7 @@ export default {
|
||||
&__advanced {
|
||||
width: 100%;
|
||||
margin-bottom: 0.5em;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
padding-left: 0;
|
||||
|
||||
section {
|
||||
@@ -1177,10 +1177,10 @@ export default {
|
||||
margin-top: 16px;
|
||||
|
||||
button {
|
||||
margin-left: 16px;
|
||||
margin-inline-start: 16px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,16 +41,16 @@
|
||||
|
||||
.versionsTabView img {
|
||||
cursor: pointer;
|
||||
padding-right: 4px;
|
||||
padding-inline-end: 4px;
|
||||
}
|
||||
|
||||
.versionsTabView img.preview {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
left: 10px;
|
||||
inset-inline-start: 10px;
|
||||
border: 1px solid var(--color-border-dark);
|
||||
cursor: default;
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
.versionsTabView .version-container {
|
||||
@@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
.versionsTabView .version-details {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.versionsTabView .version-details > span {
|
||||
@@ -73,7 +73,7 @@
|
||||
.versionsTabView .revertVersion {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.versionsTabView li.active .downloadVersion {
|
||||
@@ -95,7 +95,7 @@
|
||||
}
|
||||
|
||||
.version-container {
|
||||
padding-left: 5px;
|
||||
padding-inline-start: 5px;
|
||||
}
|
||||
|
||||
.version-details {
|
||||
|
||||
@@ -146,6 +146,6 @@ export default {
|
||||
}
|
||||
.oauth2-form--input {
|
||||
max-width: 200px;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
.help-list__text {
|
||||
margin-left: 20px;
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
|
||||
.help-iframe {
|
||||
|
||||
@@ -110,14 +110,14 @@ select {
|
||||
}
|
||||
|
||||
.personal-info {
|
||||
margin-right: 10%;
|
||||
margin-inline-end: 10%;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.personal-info[class^='icon-'], .personal-info[class*=' icon-'] {
|
||||
background-position: 0px 2px;
|
||||
padding-left: 30px;
|
||||
padding-inline-start: 30px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
@@ -153,7 +153,7 @@ select {
|
||||
}
|
||||
|
||||
&.icon-file {
|
||||
padding-left: calc(var(--default-grid-baseline) + var(--default-clickable-area));
|
||||
padding-inline-start: calc(var(--default-grid-baseline) + var(--default-clickable-area));
|
||||
background-position: calc(2 * var(--default-grid-baseline));
|
||||
}
|
||||
}
|
||||
@@ -186,7 +186,7 @@ select {
|
||||
> form span {
|
||||
&[class^='icon-checkmark'], &[class^='icon-error'] {
|
||||
position: relative;
|
||||
right: 8px;
|
||||
inset-inline-end: 8px;
|
||||
top: -28px;
|
||||
pointer-events: none;
|
||||
float: right;
|
||||
@@ -196,7 +196,7 @@ select {
|
||||
|
||||
.verify {
|
||||
position: relative;
|
||||
left: 100%;
|
||||
inset-inline-start: 100%;
|
||||
top: 0;
|
||||
height: 0;
|
||||
|
||||
@@ -221,7 +221,7 @@ select {
|
||||
/* only show pointer cursor when popup will be there */
|
||||
.verification-dialog {
|
||||
display: none;
|
||||
right: -9px;
|
||||
inset-inline-end: -9px;
|
||||
top: 40px;
|
||||
width: 275px;
|
||||
|
||||
@@ -257,7 +257,7 @@ select {
|
||||
}
|
||||
|
||||
.icon-federation-menu {
|
||||
padding-left: 16px;
|
||||
padding-inline-start: 16px;
|
||||
background-size: 16px;
|
||||
background-position: left center;
|
||||
opacity: .3;
|
||||
@@ -349,7 +349,7 @@ input#identity {
|
||||
|
||||
table.nostyle {
|
||||
label {
|
||||
margin-right: 2em;
|
||||
margin-inline-end: 2em;
|
||||
}
|
||||
|
||||
td {
|
||||
@@ -386,9 +386,9 @@ table.nostyle {
|
||||
}
|
||||
.personal-show-label {
|
||||
top: 34px !important;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-top: 0 !important;
|
||||
right: 3px;
|
||||
inset-inline-end: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -402,7 +402,7 @@ table.nostyle {
|
||||
|
||||
.strengthify-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
border-radius: 0 0 2px 2px;
|
||||
margin-top: 5px;
|
||||
@@ -420,7 +420,7 @@ table.nostyle {
|
||||
}
|
||||
|
||||
li > div {
|
||||
margin-left: 20px;
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
|
||||
.two-factor-provider-settings-icon {
|
||||
@@ -462,7 +462,7 @@ li.active {
|
||||
#usersearchform {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
|
||||
input {
|
||||
width: 150px;
|
||||
@@ -479,23 +479,25 @@ table.grid {
|
||||
|
||||
th {
|
||||
height: 2em;
|
||||
padding: 0 1em 0 0;
|
||||
padding: 0;
|
||||
padding-inline-end: 1em;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 0 1em 0 0;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
padding-inline-end: 1em;
|
||||
text-align: start;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
&.name {
|
||||
padding-left: .8em;
|
||||
padding-inline-start: .8em;
|
||||
min-width: 5em;
|
||||
max-width: 12em;
|
||||
text-overflow: ellipsis;
|
||||
@@ -503,7 +505,7 @@ td, th {
|
||||
}
|
||||
|
||||
&.password {
|
||||
padding-left: .8em;
|
||||
padding-inline-start: .8em;
|
||||
|
||||
> img {
|
||||
visibility: hidden;
|
||||
@@ -533,7 +535,7 @@ td, th {
|
||||
}
|
||||
|
||||
&.password > span {
|
||||
margin-right: 1.2em;
|
||||
margin-inline-end: 1.2em;
|
||||
color: #C7C7C7;
|
||||
}
|
||||
}
|
||||
@@ -547,12 +549,12 @@ span.usersLastLoginTooltip {
|
||||
/* Navigation icons */
|
||||
img {
|
||||
margin-bottom: -3px;
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
li span.no-icon {
|
||||
padding-left: 32px;
|
||||
padding-inline-start: 32px;
|
||||
}
|
||||
|
||||
ul li.active > span.utils {
|
||||
@@ -643,15 +645,15 @@ table.grid td.date {
|
||||
}
|
||||
|
||||
.indent {
|
||||
padding-left: 28px;
|
||||
padding-inline-start: 28px;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
padding-left: 56px;
|
||||
padding-inline-start: 56px;
|
||||
}
|
||||
|
||||
.nocheckbox {
|
||||
padding-left: 20px;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
#s2id_linksExcludedGroups {
|
||||
@@ -660,7 +662,7 @@ table.grid td.date {
|
||||
}
|
||||
|
||||
#shareApiDefaultPermissionsSection label {
|
||||
margin-right: 20px;
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
|
||||
#fileSharingSettings h3 {
|
||||
@@ -672,7 +674,7 @@ table.grid td.date {
|
||||
/* 20 px left margin, 3 px right margin */
|
||||
max-width: 600px;
|
||||
height: 150px;
|
||||
margin-left: 20px;
|
||||
margin-inline-start: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -694,7 +696,7 @@ table.grid td.date {
|
||||
label:first-child {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
select:nth-child(2),
|
||||
@@ -706,7 +708,7 @@ table.grid td.date {
|
||||
@media (max-width: calc(variables.$breakpoint-mobile * 0.75)) {
|
||||
.mail_settings p label:first-child {
|
||||
width: unset;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
display: block;
|
||||
margin-top: calc(var(--default-grid-baseline) * 2);
|
||||
}
|
||||
@@ -717,7 +719,7 @@ table.grid td.date {
|
||||
}
|
||||
|
||||
.cronlog {
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
@@ -762,7 +764,7 @@ span {
|
||||
|
||||
/* OPERA hack for strengthify*/
|
||||
doesnotexist:-o-prefocus, .strengthify-wrapper {
|
||||
left: 185px;
|
||||
inset-inline-start: 185px;
|
||||
width: 129px;
|
||||
}
|
||||
|
||||
@@ -776,7 +778,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
||||
|
||||
#postsetupchecks {
|
||||
ul {
|
||||
margin-left: 44px;
|
||||
margin-inline-start: 44px;
|
||||
list-style: disc;
|
||||
|
||||
li {
|
||||
|
||||
@@ -231,7 +231,7 @@ export default {
|
||||
border: 2px solid var(--color-primary-element);
|
||||
color: var(--color-primary-element);
|
||||
padding: 0px 7px;
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
.drag-vertical-icon {
|
||||
|
||||
@@ -175,8 +175,8 @@ export default {
|
||||
.two-factor-loading {
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
margin-left: -2px;
|
||||
margin-right: 1px;
|
||||
margin-inline-start: -2px;
|
||||
margin-inline-end: 1px;
|
||||
}
|
||||
|
||||
.top-margin {
|
||||
|
||||
@@ -361,11 +361,13 @@ $toolbar-height: 44px + $toolbar-padding * 2;
|
||||
&__bundle-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 10px 20px 0;
|
||||
margin-block: 20px;
|
||||
margin-inline: 0 10px;
|
||||
}
|
||||
|
||||
&__bundle-header {
|
||||
margin: 0 10px 0 50px;
|
||||
margin-block: 0;
|
||||
margin-inline: 50px 10px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
|
||||
@@ -0,0 +1,239 @@
|
||||
<!--
|
||||
- @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
|
||||
-
|
||||
- @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="!adding" id="generate-app-token-section" class="row spacing">
|
||||
<!-- Port to TextField component when available -->
|
||||
<NcTextField :value.sync="deviceName"
|
||||
type="text"
|
||||
:maxlength="120"
|
||||
:disabled="loading"
|
||||
class="app-name-text-field"
|
||||
:label="t('settings', 'App name')"
|
||||
:placeholder="t('settings', 'App name')"
|
||||
@keydown.enter="submit" />
|
||||
<NcButton :disabled="loading || deviceName.length === 0"
|
||||
type="primary"
|
||||
@click="submit">
|
||||
{{ t('settings', 'Create new app password') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
<div v-else class="spacing">
|
||||
{{ t('settings', 'Use the credentials below to configure your app or device.') }}
|
||||
{{ t('settings', 'For security reasons this password will only be shown once.') }}
|
||||
<div class="app-password-row">
|
||||
<label for="app-username" class="app-password-label">{{ t('settings', 'Username') }}</label>
|
||||
<input id="app-username"
|
||||
:value="loginName"
|
||||
type="text"
|
||||
class="monospaced"
|
||||
readonly="readonly"
|
||||
@focus="selectInput">
|
||||
</div>
|
||||
<div class="app-password-row">
|
||||
<label for="app-password" class="app-password-label">{{ t('settings', 'Password') }}</label>
|
||||
<input id="app-password"
|
||||
ref="appPassword"
|
||||
:value="appPassword"
|
||||
type="text"
|
||||
class="monospaced"
|
||||
readonly="readonly"
|
||||
@focus="selectInput">
|
||||
<NcButton type="tertiary"
|
||||
:title="copyTooltipOptions"
|
||||
:aria-label="copyTooltipOptions"
|
||||
@click="copyPassword">
|
||||
<template #icon>
|
||||
<Check v-if="copied" :size="20" />
|
||||
<ContentCopy v-else :size="20" />
|
||||
</template>
|
||||
</NcButton>
|
||||
<NcButton @click="reset">
|
||||
{{ t('settings', 'Done') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
<div class="app-password-row">
|
||||
<span class="app-password-label" />
|
||||
<NcButton v-if="!showQR"
|
||||
@click="showQR = true">
|
||||
{{ t('settings', 'Show QR code for mobile apps') }}
|
||||
</NcButton>
|
||||
<QR v-else
|
||||
:value="qrUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QR from '@chenfengyuan/vue-qrcode'
|
||||
import { confirmPassword } from '@nextcloud/password-confirmation'
|
||||
import '@nextcloud/password-confirmation/dist/style.css'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import { getRootUrl } from '@nextcloud/router'
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
||||
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
|
||||
|
||||
import Check from 'vue-material-design-icons/Check.vue'
|
||||
import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
|
||||
|
||||
export default {
|
||||
name: 'AuthTokenSetupDialogue',
|
||||
components: {
|
||||
Check,
|
||||
ContentCopy,
|
||||
NcButton,
|
||||
QR,
|
||||
NcTextField,
|
||||
},
|
||||
props: {
|
||||
add: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
adding: false,
|
||||
loading: false,
|
||||
deviceName: '',
|
||||
appPassword: '',
|
||||
loginName: '',
|
||||
copied: false,
|
||||
showQR: false,
|
||||
qrUrl: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
copyTooltipOptions() {
|
||||
if (this.copied) {
|
||||
return t('settings', 'Copied!')
|
||||
}
|
||||
return t('settings', 'Copy')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectInput(e) {
|
||||
e.currentTarget.select()
|
||||
},
|
||||
submit() {
|
||||
confirmPassword()
|
||||
.then(() => {
|
||||
this.loading = true
|
||||
return this.add(this.deviceName)
|
||||
})
|
||||
.then(token => {
|
||||
this.adding = true
|
||||
this.loginName = token.loginName
|
||||
this.appPassword = token.token
|
||||
|
||||
const server = window.location.protocol + '//' + window.location.host + getRootUrl()
|
||||
this.qrUrl = `nc://login/user:${token.loginName}&password:${token.token}&server:${server}`
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.appPassword.select()
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('could not create a new app password', err)
|
||||
OC.Notification.showTemporary(t('settings', 'Error while creating device token'))
|
||||
|
||||
this.reset()
|
||||
})
|
||||
},
|
||||
async copyPassword() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.appPassword)
|
||||
this.copied = true
|
||||
} catch (e) {
|
||||
this.copied = false
|
||||
console.error(e)
|
||||
showError(t('settings', 'Could not copy app password. Please copy it manually.'))
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
this.copied = false
|
||||
}, 4000)
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.adding = false
|
||||
this.loading = false
|
||||
this.showQR = false
|
||||
this.qrUrl = ''
|
||||
this.deviceName = ''
|
||||
this.appPassword = ''
|
||||
this.loginName = ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-password-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(var(--default-grid-baseline) * 2);
|
||||
|
||||
.icon {
|
||||
background-size: 16px 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-inline-start: 5px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.app-password-label {
|
||||
display: table-cell;
|
||||
margin-inline-end: 1em;
|
||||
text-align: start;
|
||||
vertical-align: middle;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.app-name-text-field {
|
||||
height: 44px !important;
|
||||
padding-left: 12px;
|
||||
margin-inline-end: 12px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.monospaced {
|
||||
width: 245px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.button-vue{
|
||||
display:inline-block;
|
||||
margin: 3px 3px 3px 3px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spacing {
|
||||
padding-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -178,7 +178,7 @@ export default {
|
||||
|
||||
li {
|
||||
list-style-type: initial;
|
||||
margin-left: 1rem;
|
||||
margin-inline-start: 1rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -161,7 +161,7 @@ export default {
|
||||
|
||||
ul, ol {
|
||||
padding-left: 10px;
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
@@ -180,8 +180,8 @@ export default {
|
||||
padding-left: 1em;
|
||||
border-left: 4px solid var(--color-primary-element);
|
||||
color: var(--color-text-maxcontrast);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -80,7 +80,8 @@ export default {
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 32px 10px 0;
|
||||
margin-block: 10px;
|
||||
margin-inline: 0 32px;
|
||||
gap: 16px 0;
|
||||
color: var(--color-text-maxcontrast);
|
||||
|
||||
|
||||
@@ -66,7 +66,7 @@ a {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 6px;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
||||
@@ -113,7 +113,7 @@ export default {
|
||||
// Override Avatar component position to fix positioning on rerender
|
||||
position: absolute !important;
|
||||
top: 40px;
|
||||
left: 18px;
|
||||
inset-inline-start: 18px;
|
||||
z-index: 1;
|
||||
|
||||
&:not(.avatardiv--unknown) {
|
||||
@@ -128,7 +128,7 @@ export default {
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 78px;
|
||||
inset-inline-start: 78px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -151,7 +151,8 @@ export default {
|
||||
color: var(--color-primary-element-text);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 0 4px 8px 0;
|
||||
margin-block: 0 8px;
|
||||
margin-inline: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -163,7 +164,8 @@ export default {
|
||||
color: var(--color-text-maxcontrast);
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 4px 4px 0 0;
|
||||
margin-block: 4px 0;
|
||||
margin-inline: 0 4px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,7 +207,7 @@ section {
|
||||
|
||||
display: flex;
|
||||
gap: 0 2px;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
@@ -218,7 +218,7 @@ section {
|
||||
align-items: center;
|
||||
|
||||
&__icon {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
align-self: start;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@@ -143,6 +143,7 @@ export default {
|
||||
}
|
||||
|
||||
.button-vue {
|
||||
margin: 0 0 0 auto !important;
|
||||
margin: 0 !important;
|
||||
margin-inline-start: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -95,7 +95,7 @@ export default Vue.extend({
|
||||
color: var(--color-text-maxcontrast);
|
||||
|
||||
&--loading {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
min-width: var(--avatar-cell-width);
|
||||
width: var(--avatar-cell-width);
|
||||
align-items: center;
|
||||
@@ -103,7 +103,7 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
&--count {
|
||||
left: var(--avatar-cell-width);
|
||||
inset-inline-start: var(--avatar-cell-width);
|
||||
min-width: var(--cell-width);
|
||||
width: var(--cell-width);
|
||||
}
|
||||
|
||||
@@ -172,7 +172,7 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
&__footer {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
&__body {
|
||||
|
||||
@@ -40,12 +40,12 @@
|
||||
}
|
||||
|
||||
&--avatar {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
&--displayname {
|
||||
left: var(--avatar-cell-width);
|
||||
border-right: 1px solid var(--color-border);
|
||||
inset-inline-start: var(--avatar-cell-width);
|
||||
border-inline-end: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
|
||||
&--actions {
|
||||
position: sticky;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
z-index: var(--sticky-column-z-index);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -100,7 +100,7 @@
|
||||
min-width: 110px;
|
||||
width: 110px;
|
||||
background-color: var(--color-main-background);
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-inline-start: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -179,8 +179,8 @@ export default {
|
||||
.webauthn-loading {
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
margin-inline-start: 2px;
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
|
||||
.new-webauthn-device {
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
// Proper spacing if multiple shown
|
||||
& + .files-list__system-tag {
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -132,7 +132,7 @@ export default {
|
||||
flex-basis: calc(16px * var(--ratio));
|
||||
flex-shrink: 0;
|
||||
height: calc(10px * var(--ratio));
|
||||
margin-right: var(--gap);
|
||||
margin-inline-end: var(--gap);
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius);
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@@ -8,17 +8,17 @@
|
||||
|
||||
.challenge {
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-inline-start: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.confirm-inline {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
margin: 0 !important;
|
||||
padding-right: 25px !important;
|
||||
padding-inline-end: 25px !important;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
opacity: .5;
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*/
|
||||
#personal-show + label {
|
||||
left: 230px !important;
|
||||
inset-inline-start: 230px !important;
|
||||
margin-top: 8px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#renewpassword .strengthify-wrapper {
|
||||
left: 10px;
|
||||
inset-inline-start: 10px;
|
||||
margin-top: 65px;
|
||||
position: absolute;
|
||||
width: 219px;
|
||||
@@ -63,29 +63,29 @@
|
||||
}
|
||||
|
||||
.tooltip.right {
|
||||
margin-left:3px;
|
||||
margin-inline-start:3px;
|
||||
padding:0 10px
|
||||
}
|
||||
|
||||
.tooltip.right .tooltip-arrow {
|
||||
top:50%;
|
||||
left:0;
|
||||
inset-inline-start:0;
|
||||
margin-top:-10px;
|
||||
border-width:10px 10px 10px 0;
|
||||
border-right-color:#fff
|
||||
border-inline-end-color:#fff
|
||||
}
|
||||
|
||||
.tooltip.left {
|
||||
margin-left:-3px;
|
||||
margin-inline-start:-3px;
|
||||
padding:0 5px
|
||||
}
|
||||
|
||||
.tooltip.left .tooltip-arrow {
|
||||
top:50%;
|
||||
right:0;
|
||||
inset-inline-end:0;
|
||||
margin-top:-10px;
|
||||
border-width:10px 0 10px 10px;
|
||||
border-left-color:#fff
|
||||
border-inline-start-color:#fff
|
||||
}
|
||||
|
||||
.tooltip.top .tooltip-arrow,.tooltip.top-left .tooltip-arrow,.tooltip.top-right .tooltip-arrow {
|
||||
@@ -95,17 +95,17 @@
|
||||
}
|
||||
|
||||
.tooltip.top .tooltip-arrow {
|
||||
left:50%;
|
||||
margin-left:-10px
|
||||
inset-inline-start:50%;
|
||||
margin-inline-start:-10px
|
||||
}
|
||||
|
||||
.tooltip.top-left .tooltip-arrow {
|
||||
right:10px;
|
||||
inset-inline-end:10px;
|
||||
margin-bottom:-10px
|
||||
}
|
||||
|
||||
.tooltip.top-right .tooltip-arrow {
|
||||
left:10px;
|
||||
inset-inline-start:10px;
|
||||
margin-bottom:-10px
|
||||
}
|
||||
|
||||
@@ -116,17 +116,17 @@
|
||||
}
|
||||
|
||||
.tooltip.bottom .tooltip-arrow {
|
||||
left:50%;
|
||||
margin-left:-10px
|
||||
inset-inline-start:50%;
|
||||
margin-inline-start:-10px
|
||||
}
|
||||
|
||||
.tooltip.bottom-left .tooltip-arrow {
|
||||
right:10px;
|
||||
inset-inline-end:10px;
|
||||
margin-top:-10px
|
||||
}
|
||||
|
||||
.tooltip.bottom-right .tooltip-arrow {
|
||||
left:10px;
|
||||
inset-inline-start:10px;
|
||||
margin-top:-10px
|
||||
}
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.tablerow input, .tablerow textarea {
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
#ldap .tablerow label {
|
||||
margin-left: 3px;
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
|
||||
.ldapIconCopy {
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
.ldapWizardControls {
|
||||
width: 60%;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.ldapWizardInfo {
|
||||
@@ -70,31 +70,30 @@
|
||||
#ldapWizard1 .hostPortCombinatorSpan {
|
||||
width: 14.5%;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
#ldapWizard1 .host {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.tableCellInput {
|
||||
margin-left: -40%;
|
||||
margin-inline-start: -40%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tableCellLabel {
|
||||
text-align: right;
|
||||
padding-right: 25%;
|
||||
text-align: end;
|
||||
padding-inline-end: 25%;
|
||||
}
|
||||
|
||||
.ldapIndent {
|
||||
margin-left: 50px;
|
||||
margin-inline-start: 50px;
|
||||
}
|
||||
|
||||
.ldapwarning {
|
||||
margin-left: 22px;
|
||||
margin-inline-start: 22px;
|
||||
color: #FF3B3B;
|
||||
}
|
||||
|
||||
@@ -116,9 +115,9 @@
|
||||
max-width: 200px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
padding-top: 9px;
|
||||
padding-right: 5px;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
#ldap fieldset input[type=submit] {
|
||||
@@ -159,7 +158,7 @@ input.ldapVerifyInput {
|
||||
.ldapInputColElement {
|
||||
width: 35%;
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
padding-inline-start: 10px;
|
||||
}
|
||||
|
||||
.ldapToggle {
|
||||
@@ -190,7 +189,7 @@ select[multiple=multiple] + button {
|
||||
}
|
||||
|
||||
#ldap .ldap_saving {
|
||||
margin-right: 15px;
|
||||
margin-inline-end: 15px;
|
||||
color: orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
margin-right: 12px;
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
&__select {
|
||||
|
||||
@@ -73,7 +73,7 @@ $label-padding: 8px;
|
||||
display: block;
|
||||
margin: $label-padding;
|
||||
padding: $label-padding;
|
||||
padding-left: $icon-size + $label-padding * 2;
|
||||
padding-inline-start: $icon-size + $label-padding * 2;
|
||||
border: 2px solid var(--color-main-background);
|
||||
border-radius: var(--border-radius-large);
|
||||
background-color: var(--color-background-hover);
|
||||
@@ -88,7 +88,7 @@ $label-padding: 8px;
|
||||
span {
|
||||
position: absolute;
|
||||
top: calc(50% - 10px);
|
||||
left: 10px;
|
||||
inset-inline-start: 10px;
|
||||
display: block;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
|
||||
@@ -589,7 +589,7 @@ export default {
|
||||
|
||||
&.icon-loading-small {
|
||||
&::after {
|
||||
left: 21px;
|
||||
inset-inline-start: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -186,7 +186,7 @@ export default {
|
||||
& > .v-select,
|
||||
& > .button-vue,
|
||||
& > input[type=text] {
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,7 +120,7 @@ export default {
|
||||
min-height: 48px;
|
||||
|
||||
&.timeslot--start {
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,7 +105,7 @@ export default {
|
||||
}
|
||||
|
||||
.option__title {
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
|
||||
@@ -196,16 +196,16 @@ export default {
|
||||
justify-content: end;
|
||||
|
||||
button {
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
}
|
||||
button:last-child{
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.flow-icon {
|
||||
@@ -230,7 +230,7 @@ export default {
|
||||
.icon-confirm {
|
||||
background-position: right 27px;
|
||||
padding-right: 20px;
|
||||
margin-right: 20px;
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
}
|
||||
.trigger p, .action p {
|
||||
@@ -239,7 +239,7 @@ export default {
|
||||
|
||||
& > span {
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
color: var(--color-text-maxcontrast);
|
||||
padding-right: 10px;
|
||||
padding-top: 6px;
|
||||
@@ -265,7 +265,7 @@ export default {
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text-maxcontrast);
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin-left: -1px;
|
||||
margin-inline-start: -1px;
|
||||
padding: 10px;
|
||||
border-radius: var(--border-radius-large);
|
||||
margin-right: 20px;
|
||||
margin-inline-end: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.actions__item .icon {
|
||||
@@ -33,7 +33,7 @@
|
||||
.actions__item_options {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding-left: 60px;
|
||||
padding-inline-start: 60px;
|
||||
}
|
||||
h3, small {
|
||||
padding: 6px;
|
||||
@@ -61,7 +61,7 @@ small {
|
||||
|
||||
.actions__item__description {
|
||||
padding-top: 5px;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
width: calc(100% - 105px);
|
||||
small {
|
||||
padding: 0;
|
||||
@@ -70,7 +70,7 @@ small {
|
||||
.icon {
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
&:not(.icon-invert) {
|
||||
filter: var(--background-invert-if-bright);
|
||||
}
|
||||
|
||||
+60
-60
@@ -84,13 +84,13 @@ dt,
|
||||
dd {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
width: 130px;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
kbd {
|
||||
@@ -141,7 +141,7 @@ kbd {
|
||||
box-shadow: none !important;
|
||||
user-select: none;
|
||||
pointer-events:none;
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -156,9 +156,9 @@ kbd {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding-left: 34px;
|
||||
padding-inline-start: 34px;
|
||||
background-position: 10px center;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -202,13 +202,13 @@ kbd {
|
||||
|
||||
> .app-navigation-entry-deleted {
|
||||
/* Ugly hack for overriding the main entry link */
|
||||
padding-left: var(--default-clickable-area) !important;
|
||||
padding-inline-start: var(--default-clickable-area) !important;
|
||||
}
|
||||
> .app-navigation-entry-edit {
|
||||
/* Ugly hack for overriding the main entry link */
|
||||
/* align the input correctly with the link text
|
||||
44px-6px padding for the input */
|
||||
padding-left: calc(var(--default-clickable-area) - 6px) !important;
|
||||
padding-inline-start: calc(var(--default-clickable-area) - 6px) !important;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
@@ -239,7 +239,7 @@ kbd {
|
||||
|
||||
/* align loader */
|
||||
&.icon-loading-small:after {
|
||||
left: 22px;
|
||||
inset-inline-start: 22px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
@@ -260,7 +260,7 @@ kbd {
|
||||
> li {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: var(--default-clickable-area);
|
||||
padding-inline-start: var(--default-clickable-area);
|
||||
width: 100%;
|
||||
margin-bottom: 3px;
|
||||
|
||||
@@ -286,21 +286,21 @@ kbd {
|
||||
|
||||
/* align loader */
|
||||
&.icon-loading-small:after {
|
||||
left: calc(var(--default-clickable-area) / 2);
|
||||
inset-inline-start: calc(var(--default-clickable-area) / 2);
|
||||
}
|
||||
|
||||
> .app-navigation-entry-deleted {
|
||||
/* margin to keep active indicator visible */
|
||||
margin-left: 4px;
|
||||
padding-left: 84px;
|
||||
margin-inline-start: 4px;
|
||||
padding-inline-start: 84px;
|
||||
}
|
||||
|
||||
> .app-navigation-entry-edit {
|
||||
/* margin to keep active indicator visible */
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
/* align the input correctly with the link text
|
||||
44px+44px-4px-6px padding for the input */
|
||||
padding-left: calc(2 * var(--default-clickable-area) - 10px) !important;
|
||||
padding-inline-start: calc(2 * var(--default-clickable-area) - 10px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -346,7 +346,7 @@ kbd {
|
||||
}
|
||||
}
|
||||
&:first-child img {
|
||||
margin-right: calc(2 * var(--default-grid-baseline)) !important;
|
||||
margin-inline-end: calc(2 * var(--default-grid-baseline)) !important;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
// Legacy invert if bright background
|
||||
@@ -358,7 +358,7 @@ kbd {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
.app-navigation-entry-utils-counter {
|
||||
padding-right: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -471,7 +471,7 @@ kbd {
|
||||
|
||||
/* force padding on link no matter if 'a' has an icon class */
|
||||
> a:first-child {
|
||||
padding-left: var(--default-clickable-area);
|
||||
padding-inline-start: var(--default-clickable-area);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
@@ -527,7 +527,7 @@ kbd {
|
||||
}
|
||||
.app-navigation-entry-utils-counter {
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
font-size: 9pt;
|
||||
line-height: var(--default-clickable-area);
|
||||
padding: 0 12px; /* Same padding as all li > a in the app-navigation */
|
||||
@@ -549,8 +549,8 @@ kbd {
|
||||
* Editable entries
|
||||
*/
|
||||
.app-navigation-entry-edit {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-inline-start: 5px;
|
||||
padding-inline-end: 5px;
|
||||
display: block;
|
||||
width: calc(100% - 1px); /* Avoid border overlapping */
|
||||
transition: opacity 250ms ease-in-out;
|
||||
@@ -565,7 +565,7 @@ kbd {
|
||||
}
|
||||
input {
|
||||
padding: 5px;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
height: 38px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
@@ -576,8 +576,8 @@ kbd {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
min-width: 0; /* firefox hack: override auto */
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
button,
|
||||
input:not([type='text']) {
|
||||
@@ -588,13 +588,13 @@ kbd {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
margin-left: -1px;
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-end-end-radius: var(--border-radius);
|
||||
border-start-end-radius: var(--border-radius);
|
||||
border-end-start-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -604,7 +604,7 @@ kbd {
|
||||
*/
|
||||
.app-navigation-entry-deleted {
|
||||
display: inline-flex;
|
||||
padding-left: var(--default-clickable-area);
|
||||
padding-inline-start: var(--default-clickable-area);
|
||||
transform: translateX(#{variables.$navigation-width});
|
||||
.app-navigation-entry-deleted-description {
|
||||
position: relative;
|
||||
@@ -636,7 +636,7 @@ kbd {
|
||||
opacity 250ms ease-in-out,
|
||||
z-index 250ms ease-in-out;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
background-color: var(--color-main-background);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -681,14 +681,14 @@ kbd {
|
||||
|
||||
@media only screen and (max-width: variables.$breakpoint-mobile) {
|
||||
#content {
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
border-start-start-radius: var(--border-radius-large);
|
||||
border-start-end-radius: var(--border-radius-large);
|
||||
}
|
||||
#app-navigation {
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-start-start-radius: var(--border-radius-large);
|
||||
}
|
||||
#app-sidebar {
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
border-start-end-radius: var(--border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -752,14 +752,14 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: variables.$header-height;
|
||||
right:0;
|
||||
inset-inline-end:0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 1500;
|
||||
opacity: 0.7px;
|
||||
height: calc(100vh - #{variables.$header-height});
|
||||
background: var(--color-main-background);
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-inline-start: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
// no animations possible, use OC.Apps.showAppSidebar
|
||||
&.disappear {
|
||||
@@ -785,7 +785,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
|
||||
display: none;
|
||||
padding: calc(var(--default-grid-baseline) * 2);
|
||||
padding-top: 0;
|
||||
padding-left: calc(var(--default-grid-baseline) * 4);
|
||||
padding-inline-start: calc(var(--default-grid-baseline) * 4);
|
||||
/* restrict height of settings and make scrollable */
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
@@ -834,7 +834,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
border-radius: calc(var(--default-clickable-area) / 2);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-weight: normal;
|
||||
font-size: 100%;
|
||||
opacity: 0.8;
|
||||
@@ -860,7 +860,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
|
||||
width: var(--default-clickable-area);
|
||||
height: var(--default-clickable-area);
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -884,14 +884,14 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
|
||||
&[type='checkbox'],
|
||||
&[type='radio'] {
|
||||
vertical-align: -2px;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub-section {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-left: 27px;
|
||||
margin-inline-start: 27px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -931,10 +931,10 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
|
||||
|
||||
/* Use same amount as sidebar padding */
|
||||
&:first-child {
|
||||
padding-left: 15px;
|
||||
padding-inline-start: 15px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 15px;
|
||||
padding-inline-end: 15px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -944,7 +944,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
|
||||
background-size: 16px;
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
opacity: .7;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1015,7 +1015,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
// = 16px/2 + 14px = 22px
|
||||
// popover right margin is 5px, arrow width is 9px to center and border is 1px
|
||||
// 22px - 9px - 5px - 1px = 7px
|
||||
right: 7px;
|
||||
inset-inline-end: 7px;
|
||||
/* change this to adjust the arrow position */
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
@@ -1030,7 +1030,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
&.menu-center {
|
||||
transform: translateX(50%);
|
||||
right: 50%;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
&:after {
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
@@ -1040,7 +1040,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
&.menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
&:after {
|
||||
left: 6px;
|
||||
right: auto;
|
||||
@@ -1107,7 +1107,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
> input,
|
||||
> form {
|
||||
&:not([class^='icon-']):not([class*='icon-']):first-child {
|
||||
margin-left: $popoveritem-height;
|
||||
margin-inline-start: $popoveritem-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1143,11 +1143,11 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
}
|
||||
> select {
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
margin-inline-start: 6px;
|
||||
}
|
||||
/* Add padding if contains icon+text */
|
||||
&:not(:empty) {
|
||||
padding-right: $outter-margin !important;
|
||||
padding-inline-end: $outter-margin !important;
|
||||
}
|
||||
/* DEPRECATED! old img in popover fallback
|
||||
* TODO: to remove */
|
||||
@@ -1177,13 +1177,13 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
if there is an element before */
|
||||
align-items: center;
|
||||
&:not(:first-child) {
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
}
|
||||
}
|
||||
/* no margin if hidden span before */
|
||||
> span.hidden + form,
|
||||
> span[style*='display:none'] + form {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
/* Inputs inside popover supports text, submit & reset */
|
||||
input {
|
||||
@@ -1193,7 +1193,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
flex: 1 1 auto;
|
||||
// space between inline inputs
|
||||
&:not(:first-child) {
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1255,7 +1255,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
position: -webkit-sticky;
|
||||
position: relative;
|
||||
top: 0;
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-inline-end: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 250ms ease-in-out;
|
||||
@@ -1343,7 +1343,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
}
|
||||
+ label {
|
||||
top: 14px;
|
||||
left: 7px;
|
||||
inset-inline-start: 7px;
|
||||
// hidden by default, only chown on hover-focus or if checked
|
||||
display: none;
|
||||
&::before {
|
||||
@@ -1359,7 +1359,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
.app-content-list-item-star {
|
||||
display: flex;
|
||||
top: 10px;
|
||||
left: 32px;
|
||||
inset-inline-start: 32px;
|
||||
background-size: 16px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@@ -1375,7 +1375,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
line-height: 40px;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
@@ -1390,13 +1390,13 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
.app-content-list-item-line-one,
|
||||
.app-content-list-item-line-two {
|
||||
display: block;
|
||||
padding-left: 50px;
|
||||
padding-inline-start: 50px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
order: 1;
|
||||
flex: 1 1 0px;
|
||||
padding-right: 10px;
|
||||
padding-inline-end: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1425,7 +1425,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
||||
margin: 0;
|
||||
// action icon have -7px margin
|
||||
// default popover is normally 5px
|
||||
right: -2px;
|
||||
inset-inline-end: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
.hidden-visually {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
inset-inline-start: -10000px;
|
||||
top: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
|
||||
+31
-28
@@ -96,7 +96,7 @@ body {
|
||||
height: 130px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
left: unset;
|
||||
inset-inline-start: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,7 +123,7 @@ form.install-form fieldset input {
|
||||
form.install-form .strengthify-wrapper {
|
||||
bottom: 17px;
|
||||
width: calc(100% - 8px);
|
||||
left: 4px;
|
||||
inset-inline-start: 4px;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
@@ -137,7 +137,7 @@ form #sqliteInformation {
|
||||
}
|
||||
form #adminaccount, form #use_other_db {
|
||||
margin-bottom: 15px;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
form #adminaccount > legend,
|
||||
form #adminlogin {
|
||||
@@ -188,8 +188,8 @@ form #datadirField legend {
|
||||
|
||||
.submit-icon {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
transition: right 100ms ease-in-out;
|
||||
inset-inline-end: 24px;
|
||||
transition: inset-inline-end 100ms ease-in-out;
|
||||
pointer-events: none; /* The submit icon is positioned on the submit button.
|
||||
From the user point of view the icon is part of the
|
||||
button, so the clicks on the icon have to be
|
||||
@@ -198,13 +198,13 @@ form #datadirField legend {
|
||||
input.login:hover ~ .submit-icon.icon-confirm-white,
|
||||
input.login:focus ~ .submit-icon.icon-confirm-white,
|
||||
input.login:active ~ .submit-icon.icon-confirm-white {
|
||||
right: 20px;
|
||||
inset-inline-end: 20px;
|
||||
}
|
||||
|
||||
.icon-loading-small {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 26px;
|
||||
inset-inline-end: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -238,7 +238,7 @@ select {
|
||||
|
||||
.icon-confirm.input-button-inline {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
inset-inline-end: 3px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
@@ -255,12 +255,12 @@ input[type='email'] {
|
||||
cursor: text;
|
||||
font-family: inherit;
|
||||
font-weight: normal;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
input[type='password'].password-with-toggle, input[type='text'].password-with-toggle {
|
||||
width: 238px;
|
||||
padding-right: 40px !important;
|
||||
padding-inline-end: 40px !important;
|
||||
}
|
||||
input.login {
|
||||
width: 260px;
|
||||
@@ -302,7 +302,7 @@ a {
|
||||
/* Checkboxes - white only for login */
|
||||
input[type='checkbox'].checkbox {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
inset-inline-start: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@@ -358,7 +358,10 @@ input[type='checkbox'].checkbox--white:checked + label:before {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
width: 250px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 3px;
|
||||
border-end-start-radius: 3px;
|
||||
overflow: hidden;
|
||||
height: 3px;
|
||||
}
|
||||
@@ -371,7 +374,7 @@ input[type='checkbox'].checkbox--white:checked + label:before {
|
||||
/* Show password toggle */
|
||||
#show, #dbpassword-toggle {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
inset-inline-end: 2px;
|
||||
top: -3px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -387,11 +390,11 @@ input[type='checkbox'].checkbox--white:checked + label:before {
|
||||
#personal-show + label {
|
||||
height: 14px;
|
||||
margin-top: -25px;
|
||||
left: 295px;
|
||||
inset-inline-start: 295px;
|
||||
display: block;
|
||||
}
|
||||
#passwordbutton {
|
||||
margin-left: .5em;
|
||||
margin-inline-start: .5em;
|
||||
}
|
||||
|
||||
/* Dark subtle label text */
|
||||
@@ -419,7 +422,7 @@ form .warning input[type='checkbox']+label {
|
||||
border-radius: 3px; /* --border-radius */
|
||||
margin: 12px 0;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
align-items: center;
|
||||
text-decoration: none !important;
|
||||
|
||||
@@ -535,7 +538,7 @@ form #selectDbType {
|
||||
.body-login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
word-wrap: break-word;
|
||||
border-radius: 10px; /* --border-radius-large */
|
||||
cursor: default;
|
||||
@@ -582,9 +585,9 @@ p.info {
|
||||
|
||||
.appList {
|
||||
list-style: disc;
|
||||
text-align: left;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
text-align: start;
|
||||
margin-inline-start: 25px;
|
||||
margin-inline-end: 25px;
|
||||
}
|
||||
|
||||
img.float-spinner {
|
||||
@@ -596,7 +599,7 @@ p.info {
|
||||
}
|
||||
}
|
||||
#update-progress-detailed {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.update-show-detailed {
|
||||
@@ -663,7 +666,7 @@ p.info {
|
||||
margin: -17px 0 0 -17px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: rotate .8s infinite linear;
|
||||
animation: rotate .8s infinite linear;
|
||||
@@ -741,7 +744,7 @@ footer {
|
||||
label.infield,
|
||||
.hidden-visually {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
inset-inline-start: -10000px;
|
||||
top: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@@ -755,11 +758,11 @@ a.legal {
|
||||
.notecard {
|
||||
color: var(--color-text-light);
|
||||
background-color: var(--note-background);
|
||||
border-left: 4px solid var(--note-theme);
|
||||
border-inline-start: 4px solid var(--note-theme);
|
||||
border-radius: var(--border-radius);
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
|
||||
&.success {
|
||||
--note-background: rgba(var(--color-success-rgb), 0.1);
|
||||
@@ -805,7 +808,7 @@ a.legal {
|
||||
.guest-box {
|
||||
&.wide {
|
||||
display: block;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
border-radius: var(--border-radius-container-large);
|
||||
}
|
||||
|
||||
@@ -830,7 +833,7 @@ button.toggle-password {
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
text-align: start !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-background-plain-text);
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
#expand.menutoggle:focus-visible::after {
|
||||
left: 40%;
|
||||
inset-inline-start: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
/* LOGO and APP NAME -------------------------------------------------------- */
|
||||
#nextcloud {
|
||||
padding: 5px 0;
|
||||
padding-left: 86px; // logo width + 2* pa
|
||||
padding-inline-start: 86px; // logo width + 2* pa
|
||||
position: relative;
|
||||
height: calc(100% - 4px);
|
||||
box-sizing: border-box;
|
||||
@@ -97,7 +97,7 @@
|
||||
position: absolute;
|
||||
max-width: 350px;
|
||||
@include header-menu-height();
|
||||
right: 8px; // relative to parent
|
||||
inset-inline-end: 8px; // relative to parent
|
||||
top: variables.$header-height;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
@@ -116,7 +116,7 @@
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
right: 10px;
|
||||
inset-inline-end: 10px;
|
||||
}
|
||||
|
||||
& > div,
|
||||
@@ -133,7 +133,7 @@
|
||||
background-position: center;
|
||||
width: 62px;
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
inset-inline-start: 12px;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
// Invert if not customized and background is bright
|
||||
@@ -142,7 +142,7 @@
|
||||
|
||||
.header-appname-container {
|
||||
display: none;
|
||||
padding-right: 10px;
|
||||
padding-inline-end: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -209,7 +209,7 @@
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-right: 5px;
|
||||
padding-inline-end: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
// Take full width to push the header-shared-by bellow (if any)
|
||||
@@ -243,7 +243,7 @@
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
top: -999px;
|
||||
left: 3px;
|
||||
inset-inline-start: 3px;
|
||||
padding: 11px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
+1
-1
@@ -33,7 +33,7 @@
|
||||
margin: -16px 0 0 -16px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: rotate .8s infinite linear;
|
||||
animation: rotate .8s infinite linear;
|
||||
|
||||
+14
-14
@@ -280,7 +280,7 @@ select {
|
||||
background: var(--icon-triangle-s-dark) no-repeat right 8px center;
|
||||
appearance: none;
|
||||
background-color: var(--color-main-background);
|
||||
padding-right: 28px !important;
|
||||
padding-inline-end: 28px !important;
|
||||
}
|
||||
|
||||
select,
|
||||
@@ -350,8 +350,8 @@ input {
|
||||
&[type='password'],
|
||||
&[type='email'] {
|
||||
+ .icon-confirm {
|
||||
margin-left: -13px !important;
|
||||
border-left-color: transparent !important;
|
||||
margin-inline-start: -13px !important;
|
||||
border-inline-start-color: transparent !important;
|
||||
border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
|
||||
border-width: 2px;
|
||||
background-clip: padding-box;
|
||||
@@ -362,7 +362,7 @@ input {
|
||||
width: var(--default-clickable-area);
|
||||
padding: 7px 6px;
|
||||
cursor: pointer;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
@include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
|
||||
@@ -393,7 +393,7 @@ input {
|
||||
&:focus {
|
||||
+ .icon-confirm {
|
||||
border-color: var(--color-primary-element) !important;
|
||||
border-left-color: transparent !important;
|
||||
border-inline-start-color: transparent !important;
|
||||
/* above previous input */
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -422,7 +422,7 @@ input {
|
||||
&.radio,
|
||||
&.checkbox {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
inset-inline-start: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@@ -473,7 +473,7 @@ input {
|
||||
// Detail description below label of checkbox or radio button
|
||||
& + label ~ em {
|
||||
display: inline-block;
|
||||
margin-left: 25px;
|
||||
margin-inline-start: 25px;
|
||||
}
|
||||
& + label ~ em:last-of-type {
|
||||
margin-bottom: $checkbox-radio-size;
|
||||
@@ -546,7 +546,7 @@ div.select2-drop {
|
||||
}
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
vertical-align: middle;
|
||||
img {
|
||||
cursor: pointer;
|
||||
@@ -620,7 +620,7 @@ div.select2-container-multi {
|
||||
}
|
||||
.select2-search-choice {
|
||||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
padding-inline-start: 5px;
|
||||
&.select2-search-choice-focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
@@ -671,7 +671,7 @@ div.select2-container {
|
||||
}
|
||||
.select2-search-choice {
|
||||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
padding-inline-start: 5px;
|
||||
background-image: none;
|
||||
background-color: var(--color-background-dark);
|
||||
border-color: var(--color-background-dark);
|
||||
@@ -713,7 +713,7 @@ div.select2-container {
|
||||
flex-wrap: wrap;
|
||||
.selected-tag {
|
||||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
padding-inline-start: 5px;
|
||||
background-image: none;
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-text-maxcontrast);
|
||||
@@ -721,7 +721,7 @@ div.select2-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.close {
|
||||
margin-left: 3px;
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -761,7 +761,7 @@ div.select2-container {
|
||||
min-height: 16px;
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -843,7 +843,7 @@ progress:not(.vue) {
|
||||
// Same as .hidden-visually
|
||||
label.infield {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
inset-inline-start: -10000px;
|
||||
top: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
|
||||
+12
-12
@@ -8,7 +8,7 @@
|
||||
|
||||
/* position share dropdown */
|
||||
#dropdown {
|
||||
margin-right: 10% !important;
|
||||
margin-inline-end: 10% !important;
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
/* fix error display on smaller screens */
|
||||
.error-wide {
|
||||
width: 100%;
|
||||
margin-left: 0 !important;
|
||||
margin-inline-start: 0 !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -37,12 +37,12 @@
|
||||
}
|
||||
|
||||
#app-navigation:not(.hidden) + #app-content {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.skip-navigation.skip-content {
|
||||
left: 3px;
|
||||
margin-left: 0;
|
||||
inset-inline-start: 3px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
/* full width for message list on mobile */
|
||||
@@ -73,7 +73,7 @@
|
||||
position: fixed;
|
||||
display: inline-block !important;
|
||||
top: variables.$header-height;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
z-index: 1050; // above app-content
|
||||
@@ -91,7 +91,7 @@
|
||||
#app-navigation-toggle {
|
||||
position: fixed;
|
||||
display: inline-block !important;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
z-index: 1050; // above app-content
|
||||
@@ -105,19 +105,19 @@
|
||||
|
||||
/* position controls for apps with app-navigation */
|
||||
#app-navigation + #app-content .files-controls {
|
||||
padding-left: 44px;
|
||||
padding-inline-start: 44px;
|
||||
}
|
||||
|
||||
/* .viewer-mode is when text editor, PDF viewer, etc is open */
|
||||
#body-user .app-files.viewer-mode .files-controls {
|
||||
padding-left: 0 !important;
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
.app-files.viewer-mode #app-navigation-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
table.multiselect thead {
|
||||
left: 0 !important;
|
||||
inset-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
/* prevent overflow in user management controls bar */
|
||||
@@ -155,14 +155,14 @@
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
right: 15px;
|
||||
inset-inline-end: 15px;
|
||||
z-index: 2001;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* settings need a different offset, since they have a right padding */
|
||||
&#settings::after {
|
||||
right: 27px;
|
||||
inset-inline-end: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+18
-18
@@ -55,7 +55,7 @@ table {
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@@ -130,7 +130,7 @@ body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 9000;
|
||||
@@ -246,13 +246,13 @@ body {
|
||||
|
||||
#show, #dbpassword {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
inset-inline-end: 1em;
|
||||
top: .8em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#show + label, #dbpassword + label {
|
||||
right: 21px;
|
||||
inset-inline-end: 21px;
|
||||
top: 15px !important;
|
||||
margin: -14px !important;
|
||||
padding: 14px !important;
|
||||
@@ -294,19 +294,19 @@ body {
|
||||
}
|
||||
|
||||
#pass2, input[name='personal-password-clone'] {
|
||||
padding-right: 30px;
|
||||
padding-inline-end: 30px;
|
||||
}
|
||||
|
||||
.personal-show-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
#personal-show + label {
|
||||
display: block;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
margin-top: -43px;
|
||||
margin-right: -4px;
|
||||
margin-inline-end: -4px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
@@ -338,13 +338,13 @@ body {
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
.error-wide {
|
||||
width: 700px;
|
||||
margin-left: -200px !important;
|
||||
margin-inline-start: -200px !important;
|
||||
.button {
|
||||
color: black !important;
|
||||
}
|
||||
@@ -566,7 +566,7 @@ code {
|
||||
}
|
||||
/* AM/PM fix */
|
||||
table.ui-timepicker tr .ui-timepicker-hour-cell:first-child {
|
||||
margin-left: 30px;
|
||||
margin-inline-start: 30px;
|
||||
}
|
||||
.ui-timepicker-table {
|
||||
th {
|
||||
@@ -597,7 +597,7 @@ code {
|
||||
}
|
||||
|
||||
&.ui-timepicker-hours {
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-inline-end: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -648,7 +648,7 @@ span.ui-icon {
|
||||
/* ---- TOOLTIPS ---- */
|
||||
|
||||
.extra-data {
|
||||
padding-right: 5px !important;
|
||||
padding-inline-end: 5px !important;
|
||||
}
|
||||
|
||||
/* ---- TAGS ---- */
|
||||
@@ -703,7 +703,7 @@ li.crumb {
|
||||
background-size: auto 24px;
|
||||
flex: 0 0 auto;
|
||||
order: 1;
|
||||
padding-right: 7px;
|
||||
padding-inline-end: 7px;
|
||||
&.crumbmenu {
|
||||
order: 2;
|
||||
position: relative;
|
||||
@@ -719,12 +719,12 @@ li.crumb {
|
||||
// Fix because of the display flex
|
||||
.popovermenu {
|
||||
top: 100%;
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
ul {
|
||||
max-height: 345px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
padding-inline-end: 5px;
|
||||
li.canDrop span:first-child {
|
||||
background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important;
|
||||
}
|
||||
@@ -766,10 +766,10 @@ li.crumb {
|
||||
}
|
||||
&:last-child {
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
// Allow multiple span next to the main 'a'
|
||||
a ~ span {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus, a:focus, &:active {
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
.select2-result-label {
|
||||
.checkmark {
|
||||
visibility: hidden;
|
||||
margin-left: -5px;
|
||||
margin-right: 5px;
|
||||
margin-inline-start: -5px;
|
||||
margin-inline-end: 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.new-item .systemtags-actions {
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
.systemtags-actions {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
inset-inline-end: 5px;
|
||||
}
|
||||
.systemtags-rename-form {
|
||||
display: inline-block;
|
||||
|
||||
+7
-7
@@ -12,7 +12,7 @@
|
||||
color: var(--color-main-text);
|
||||
box-shadow: 0 0 6px 0 var(--color-box-shadow);
|
||||
padding: 12px;
|
||||
padding-right: 34px;
|
||||
padding-inline-end: 34px;
|
||||
margin-top: 45px;
|
||||
position: fixed;
|
||||
z-index: 9000;
|
||||
@@ -21,7 +21,7 @@
|
||||
.toast-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
width: 38px;
|
||||
opacity: 0.4;
|
||||
padding: 12px;
|
||||
@@ -39,18 +39,18 @@
|
||||
}
|
||||
}
|
||||
.toastify.toastify-top {
|
||||
right: 10px;
|
||||
inset-inline-end: 10px;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
border-left: 3px solid var(--color-error);
|
||||
border-inline-start: 3px solid var(--color-error);
|
||||
}
|
||||
.toast-info {
|
||||
border-left: 3px solid var(--color-primary-element);
|
||||
border-inline-start: 3px solid var(--color-primary-element);
|
||||
}
|
||||
.toast-warning {
|
||||
border-left: 3px solid var(--color-warning);
|
||||
border-inline-start: 3px solid var(--color-warning);
|
||||
}
|
||||
.toast-success {
|
||||
border-left: 3px solid var(--color-success);
|
||||
border-inline-start: 3px solid var(--color-success);
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
letter-spacing: normal;
|
||||
line-break: auto;
|
||||
line-height: 1.6;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
.whatsNewPopover {
|
||||
bottom: 35px !important;
|
||||
left: 15px !important;
|
||||
inset-inline-start: 15px !important;
|
||||
width: 270px;
|
||||
z-index: 700;
|
||||
}
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
.whatsNewPopover .icon-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.whatsNewPopover::after {
|
||||
|
||||
@@ -88,7 +88,8 @@ export default {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
padding: 3px 3px 3px 10px;
|
||||
padding: 3px;
|
||||
padding-inline-start: 10px;
|
||||
|
||||
&__action {
|
||||
&__icon {
|
||||
@@ -108,8 +109,8 @@ export default {
|
||||
|
||||
&__body {
|
||||
flex-grow: 1;
|
||||
padding-left: 10px;
|
||||
margin-left: 10px;
|
||||
padding-inline-start: 10px;
|
||||
margin-inline-start: 10px;
|
||||
min-width: 0;
|
||||
|
||||
div {
|
||||
@@ -162,7 +163,7 @@ export default {
|
||||
/* actions menu */
|
||||
.menu {
|
||||
top: 47px;
|
||||
margin-right: 13px;
|
||||
margin-inline-end: 13px;
|
||||
}
|
||||
|
||||
.popovermenu::after {
|
||||
|
||||
@@ -61,4 +61,37 @@ export default defineComponent({
|
||||
.icon {
|
||||
filter: var(--primary-invert-if-dark);
|
||||
}
|
||||
|
||||
.profile__primary-action-button {
|
||||
font-size: var(--default-font-size);
|
||||
font-weight: bold;
|
||||
width: 188px;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
border-radius: var(--border-radius-pill);
|
||||
color: var(--color-primary-element-text);
|
||||
background-color: var(--color-primary-element);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 2px;
|
||||
margin-inline-end: 4px;
|
||||
|
||||
&.icon-invert {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--color-primary-element-light);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -219,7 +219,7 @@ $margin: 10px;
|
||||
flex-wrap: wrap;
|
||||
// Set to minimum and gro from it
|
||||
min-width: 0;
|
||||
padding-left: $margin;
|
||||
padding-inline-start: $margin;
|
||||
}
|
||||
|
||||
&-line-one,
|
||||
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 5px;
|
||||
padding-inline-end: 5px;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
|
||||
@@ -290,7 +290,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-form {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-size: 1rem;
|
||||
|
||||
&__fieldset {
|
||||
|
||||
@@ -117,7 +117,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-form {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-size: 1rem;
|
||||
|
||||
&__fieldset {
|
||||
|
||||
@@ -246,7 +246,7 @@ p {
|
||||
|
||||
.info {
|
||||
h3, p {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
@@ -143,8 +143,8 @@
|
||||
border: none;
|
||||
|
||||
.ui-tabs-nav.ui-corner-all {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
.ui-tabs-nav {
|
||||
@@ -205,8 +205,8 @@
|
||||
|
||||
&.ui-corner-all {
|
||||
border-radius: 0;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-end-start-radius: var(--border-radius);
|
||||
border-end-end-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui-state-hover, .ui-widget-content .ui-state-hover,
|
||||
|
||||
@@ -185,7 +185,7 @@ export default {
|
||||
label[for="contactsmenu__menu__search"] {
|
||||
font-weight: bold;
|
||||
font-size: 19px;
|
||||
margin-left: 13px;
|
||||
margin-inline-start: 13px;
|
||||
}
|
||||
|
||||
&__input-wrapper {
|
||||
|
||||
@@ -724,7 +724,7 @@ $input-padding: 10px;
|
||||
align-self: flex-start;
|
||||
font-weight: bold;
|
||||
font-size: 19px;
|
||||
margin-left: 13px;
|
||||
margin-inline-start: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -745,7 +745,9 @@ $input-padding: 10px;
|
||||
}
|
||||
|
||||
&__filters {
|
||||
margin: $margin 0 $margin math.div($margin, 2);
|
||||
margin-block: $margin;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: math.div($margin, 2);
|
||||
padding-top: 5px;
|
||||
ul {
|
||||
display: inline-flex;
|
||||
@@ -802,7 +804,7 @@ $input-padding: 10px;
|
||||
opacity: .5;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
@@ -821,7 +823,7 @@ $input-padding: 10px;
|
||||
display: block;
|
||||
margin: $margin;
|
||||
margin-bottom: $margin - 4px;
|
||||
margin-left: 13px;
|
||||
margin-inline-start: 13px;
|
||||
color: var(--color-primary-element);
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -311,7 +311,9 @@ $content-max-width: 640px;
|
||||
align-self: flex-start;
|
||||
padding-top: 20px;
|
||||
min-width: 220px;
|
||||
margin: -150px 20px 0 0;
|
||||
margin: 0;
|
||||
margin-top: -150px;
|
||||
margin-inline-end: 20px;
|
||||
|
||||
// Specificity hack is needed to override Avatar component styles
|
||||
:deep(.avatar.avatardiv) {
|
||||
|
||||
@@ -178,7 +178,7 @@ $spacing: 30px;
|
||||
margin-top: 2 * $spacing;
|
||||
margin-bottom: $spacing;
|
||||
li {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user