1body { 2 min-height: 100%; 3 height: auto; 4} 5#app { 6 width: 100%; 7} 8// one solution to fix category multiselect being hidden (overflow of surrounding element) 9.splitpanes__pane-details { 10 // this works but is sketchy 11 // overflow: visible !important; 12 height: auto; 13} 14@media only screen and (max-width: 1024px) { 15 // fix max height being unset in mobile view by server style 16 .app-content-list { 17 max-height: calc(100vh - 50px) !important; 18 } 19} 20#projectid, #password { 21 display: none; 22} 23#newBillButton { 24 margin-top: 10px !important; 25} 26.balancePositive { 27 color: green; 28} 29.balanceNegative { 30 color: red; 31} 32.balance { 33 float: right; 34 font-weight: bold; 35 height: 44px; 36 line-height: 44px; 37} 38.memberAvatar img { 39 width: 24px; 40 height: auto; 41 border-radius: 50%; 42 margin: 10px 6px 10px 0px; 43 cursor: pointer; 44} 45.memberAvatarDisabled .disabledMask { 46 display: block; 47} 48.disabledMask { 49 width: 26px; 50 height: 26px; 51 background-image: url('./images/forbidden.svg'); 52 position: absolute; 53 top: 9px; 54 left: 38px; 55} 56.memberAvatar { 57 width: 26px; 58 height: 44px; 59} 60 61.avatarTable { 62 .owerAvatar { 63 height: 24px; 64 margin: 2px 5px 2px 5px; 65 } 66 .owerAvatarDisabled { 67 margin-left: -21px; 68 } 69 .owerAvatar img { 70 margin-bottom: 2px; 71 } 72 .owerAvatarDisabled .disabledMask { 73 top: -1px; 74 } 75} 76.owerAvatar { 77 display: inline-block; 78 vertical-align: middle; 79 height: 26px; 80 .disabledMask { 81 display: block; 82 position: relative; 83 top: -31px; 84 left: -1px; 85 } 86} 87.owerAvatarDisabled { 88 margin-left: -26px; 89} 90 91input[type=number] { 92 -moz-appearance: number-input !important; 93 -webkit-appearance: initial !important; 94} 95.coloredTable { 96 // max-width: 500px; 97 display: block; 98 margin: 20px 20px 20px 20px; 99 border-spacing: 2px 2px; 100 scrollbar-width: unset !important; 101 scrollbar-color: var(--color-primary) var(--color-background-hover); 102 103 th { 104 font-weight: bold; 105 text-align: center; 106 border: 1px solid var(--color-border-dark); 107 padding: 0px 5px 0px 5px; 108 109 span { 110 display: block; 111 max-width: 100px; 112 word-wrap: break-word; 113 white-space: normal; 114 } 115 } 116 td { 117 text-align: right; 118 padding-right: 2px; 119 } 120 td:first-child { 121 text-align: left; 122 } 123} 124.undoDeleteBill { 125 display: none; 126} 127#app-settings-content button { 128 padding: 10px; 129 padding-left: 34px; 130 background-position: 10px center; 131 width: 100%; 132 text-align: left; 133} 134.selectedbill { 135 background-color: var(--color-background-dark) !important; 136} 137.app-navigation-entry-share { 138 display: none; 139} 140.app-navigation-entry { 141 padding-right: 0 !important; 142} 143.shareinput { 144 width: 100%; 145} 146.icon-colorpicker { 147 background-image: url('../img/color_picker.svg'); 148} 149.loading-bill { 150 margin-left: 10px; 151 margin-right: 10px; 152} 153.activeButton { 154 background: var(--color-background-darker); 155} 156.memberitem > a { 157 opacity: 1 !important; 158} 159.autoexportSelect { 160 width: 40%; 161} 162.autoexportLabel { 163 width: 60%; 164 overflow: hidden; 165 text-overflow: ellipsis; 166} 167.autoexportProject { 168 display: flex !important; 169 align-items: center !important; 170} 171a.billitem .app-content-list-item-icon { 172 background-position: center; 173 background-repeat: no-repeat; 174 background-size: cover; 175} 176.exportStats span, 177.exportSettlement span { 178 min-height: 16px !important; 179 min-width: 16px !important; 180} 181/* this is not applied if done in a vue component */ 182.memberColorPicker .trigger { 183 height: 25px !important; 184} 185.fixed-icon { 186 background-size: 60% 100%; 187 background-repeat: no-repeat; 188 background-position: center; 189} 190/* dirty hack to make things right in settings sidebar */ 191.multiselect__content-wrapper { 192 z-index: 10000 !important; 193} 194 195// fade transition 196.fade { 197 &-enter { 198 opacity: 0; 199 } 200 &-enter-to { 201 opacity: 1; 202 } 203 &-leave { 204 opacity: 1; 205 } 206 &-leave-to { 207 opacity: 0; 208 } 209 &-enter-active, 210 &-leave-active { 211 transition: all 150ms ease-in-out; 212 } 213} 214 215.slide-right-leave-active, 216.slide-right-enter-active { 217 transition-duration: var(--animation-quick); 218 transition-property: min-width, max-width; 219} 220 221.slide-right-enter-to, 222.slide-right-leave { 223 min-width: 300px; 224 max-width: 500px; 225} 226 227.slide-right-enter, 228.slide-right-leave-to { 229 min-width: 0 !important; 230 max-width: 0 !important; 231} 232 233.slide-down-leave-active, 234.slide-down-enter-active { 235 transition-duration: var(--animation-quick); 236 transition-property: min-height, max-height; 237} 238 239.slide-down-enter-to, 240.slide-down-leave { 241 min-height: 300px; 242 max-height: 500px; 243} 244 245.slide-down-enter, 246.slide-down-leave-to { 247 min-height: 0 !important; 248 max-height: 0 !important; 249} 250 251.icon-activity { 252 background-image: url('../img/activity-dark.svg'); 253 background-size: 20px; 254} 255 256body.theme--dark .icon-activity { 257 background-image: url('../img/activity.svg'); 258} 259 260.cospend-settings-dialog .modal-container { 261 display: flex !important; 262} 263 264