github.com/cozy/cozy-stack@v0.0.0-20240603063001-31110fa4cae1/assets/styles/cirrus.css (about) 1 /* Buttons */ 2 .btn .icon { 3 vertical-align: middle; 4 } 5 .btn-done { 6 background-color: var(--successColorLightest) !important; 7 opacity: 1 !important; 8 transition: none; 9 } 10 11 /* Icons */ 12 .icon-alert { 13 -webkit-mask-image: url(../icons/alert.svg); 14 mask-image: url(../icons/alert.svg); 15 } 16 .icon-answer { 17 -webkit-mask: url(../icons/answer.svg) space no-repeat bottom; 18 mask: url(../icons/answer.svg) space no-repeat bottom; 19 width: 0.813rem; 20 } 21 .icon-auth { 22 -webkit-mask-image: url(../icons/auth.svg); 23 mask-image: url(../icons/auth.svg); 24 } 25 .icon-back { 26 -webkit-mask-image: url(../icons/back.svg); 27 mask-image: url(../icons/back.svg); 28 } 29 .icon-check { 30 -webkit-mask-image: url(../icons/check.svg); 31 mask-image: url(../icons/check.svg); 32 } 33 .icon-check-circle { 34 -webkit-mask-image: url(../icons/check-circle.svg); 35 mask-image: url(../icons/check-circle.svg); 36 } 37 .icon-cross { 38 -webkit-mask-image: url(../icons/cross.svg); 39 mask-image: url(../icons/cross.svg); 40 } 41 .icon-eye-closed { 42 -webkit-mask-image: url(../icons/eye-closed.svg); 43 mask-image: url(../icons/eye-closed.svg); 44 } 45 .icon-eye-opened { 46 -webkit-mask-image: url(../icons/eye-opened.svg); 47 mask-image: url(../icons/eye-opened.svg); 48 } 49 .icon-import { 50 -webkit-mask-image: url(../icons/import.svg); 51 mask-image: url(../icons/import.svg); 52 } 53 .icon-info { 54 -webkit-mask-image: url(../icons/info.svg); 55 mask-image: url(../icons/info.svg); 56 } 57 .icon-permissions { 58 -webkit-mask-image: url(../icons/permissions.svg); 59 mask-image: url(../icons/permissions.svg); 60 } 61 .icon-right { 62 -webkit-mask-image: url(../icons/arrow-right.svg); 63 mask-image: url(../icons/arrow-right.svg); 64 } 65 66 /* Icons for files on the authorize sharing page */ 67 .filetype { 68 flex-shrink: 0; 69 width: 2rem; 70 height: 2rem; 71 } 72 .filetype-other { 73 background-image: url("../images/icon-files.svg"); 74 } 75 .filetype-audio { 76 background-image: url("../images/filetypes/audio.svg"); 77 } 78 .filetype-bin { 79 background-image: url("../images/filetypes/bin.svg"); 80 } 81 .filetype-code { 82 background-image: url("../images/filetypes/code.svg"); 83 } 84 .filetype-files { 85 background-image: url("../images/filetypes/files.svg"); 86 } 87 .filetype-image { 88 background-image: url("../images/filetypes/image.svg"); 89 } 90 .filetype-note { 91 background-image: url("../images/filetypes/note.svg"); 92 } 93 .filetype-pdf { 94 background-image: url("../images/filetypes/pdf.svg"); 95 } 96 .filetype-sheet { 97 background-image: url("../images/filetypes/sheet.svg"); 98 } 99 .filetype-slide { 100 background-image: url("../images/filetypes/slide.svg"); 101 } 102 .filetype-text { 103 background-image: url("../images/filetypes/text.svg"); 104 } 105 .filetype-video { 106 background-image: url("../images/filetypes/video.svg"); 107 } 108 .filetype-zip { 109 background-image: url("../images/filetypes/zip.svg"); 110 } 111 .filetype-organization { 112 background-image: url("../icons/doctypes/organization.svg"); 113 background-size: contain; 114 background-repeat: no-repeat; 115 } 116 117 /* Password strength on onboarding and password renew */ 118 .progress { 119 position: relative; 120 z-index: 10; 121 width: 100%; 122 height: 0.3rem; 123 bottom: 0.3rem; 124 left: 1px; 125 background: var(--dividerColor); 126 border-top: 0; 127 border-radius: 0 0 0.2rem 0.2rem; 128 } 129 .progress-bar { 130 background: var(--infoColor); 131 border-radius: 0 0 0.2rem 0; 132 } 133 .progress-bar.w-100 { 134 border-radius: 0 0 0.2rem 0.2rem; 135 } 136 .progress-bar.pass-weak { 137 background: var(--errorColorLightest); 138 } 139 .progress-bar.pass-moderate { 140 background: var(--warningColorLightest); 141 } 142 .progress-bar.pass-strong { 143 background: var(--successColorLightest); 144 } 145 .w-0 { 146 width: 0%; 147 } 148 .w-4 { 149 width: 4%; 150 } 151 .w-8 { 152 width: 8%; 153 } 154 .w-12 { 155 width: 12%; 156 } 157 .w-16 { 158 width: 16%; 159 } 160 .w-20 { 161 width: 20%; 162 } 163 .w-24 { 164 width: 24%; 165 } 166 .w-28 { 167 width: 28%; 168 } 169 .w-32 { 170 width: 32%; 171 } 172 .w-36 { 173 width: 36%; 174 } 175 .w-40 { 176 width: 40%; 177 } 178 .w-44 { 179 width: 44%; 180 } 181 .w-48 { 182 width: 48%; 183 } 184 .w-52 { 185 width: 52%; 186 } 187 .w-56 { 188 width: 56%; 189 } 190 .w-60 { 191 width: 60%; 192 } 193 .w-64 { 194 width: 64%; 195 } 196 .w-68 { 197 width: 68%; 198 } 199 .w-72 { 200 width: 72%; 201 } 202 .w-76 { 203 width: 76%; 204 } 205 .w-80 { 206 width: 80%; 207 } 208 .w-84 { 209 width: 84%; 210 } 211 .w-88 { 212 width: 88%; 213 } 214 .w-92 { 215 width: 92%; 216 } 217 .w-96 { 218 width: 96%; 219 } 220 221 /* Permissions list on the OAuth authorize page */ 222 .authorize-pill { 223 display: inline-flex; 224 flex-direction: row; 225 align-items: center; 226 padding: 0.25rem 0.75rem; 227 } 228 .permissions-list { 229 padding: 0; 230 list-style: none; 231 } 232 .permissions-list li { 233 display: flex; 234 flex-direction: row; 235 align-items: center; 236 } 237 .permissions-list li .small { 238 display: flex; 239 align-items: center; 240 flex-grow: 1; 241 padding: 1rem 1rem 1rem 0; 242 } 243 .permissions-list li + li .small { 244 border-top: solid 1px var(--dividerColor); 245 } 246 .permissions-list li .halo-icon { 247 margin-left: 1rem; 248 margin-right: 1rem; 249 } 250 @media (min-width: 768px) { 251 .permissions-list li .rounded-circle { 252 margin-left: 4rem; 253 } 254 } 255 .permissions-list li .perm { 256 -webkit-mask-position: center; 257 -webkit-mask-size: 1rem; 258 -webkit-mask-repeat: no-repeat; 259 mask-position: center; 260 mask-size: 1rem; 261 mask-repeat: no-repeat; 262 } 263 .perm { 264 -webkit-mask-image: url("../icons/doctypes/fallback.svg"); 265 mask-image: url("../icons/doctypes/fallback.svg"); 266 } 267 .perm[class^="\* "] { 268 -webkit-mask-image: url("../icons/doctypes/cozy-smile.svg"); 269 mask-image: url("../icons/doctypes/cozy-smile.svg"); 270 } 271 .perm[class^="com-bitwarden-ciphers"], 272 .perm[class^="com-bitwarden-folders"], 273 .perm[class^="com-bitwarden-profiles"], 274 .perm[class^="io-cozy-permissions"] { 275 -webkit-mask-image: url("../icons/doctypes/lock.svg"); 276 mask-image: url("../icons/doctypes/lock.svg"); 277 } 278 .perm[class^="com-bitwarden-organizations"] { 279 -webkit-mask-image: url("../icons/doctypes/organization.svg"); 280 mask-image: url("../icons/doctypes/organization.svg"); 281 } 282 .perm[class^="cc-cozycloud-dacc"], 283 .perm[class^="cc-cozycloud-dacc-dev"], 284 .perm[class^="cc-cozycloud-dacc_v2"], 285 .perm[class^="cc-cozycloud-dacc-dev_v2"], 286 .perm[class^="eu.mycozy.dacc_v2"] { 287 -webkit-mask-image: url("../icons/doctypes/stats.svg"); 288 mask-image: url("../icons/doctypes/stats.svg"); 289 } 290 .perm[class^="io-cozy-settings"], 291 .perm[class^="io-cozy-bank-settings"] { 292 -webkit-mask-image: url("../icons/doctypes/cog.svg"); 293 mask-image: url("../icons/doctypes/cog.svg"); 294 } 295 .perm[class^="io-cozy-coachco2-settings"] { 296 -webkit-mask-image: url("../icons/doctypes/cog.svg"); 297 mask-image: url("../icons/doctypes/cog.svg"); 298 } 299 .perm[class^="io-cozy-tags"] { 300 -webkit-mask-image: url("../icons/doctypes/tags.svg"); 301 mask-image: url("../icons/doctypes/tags.svg"); 302 } 303 .perm[class^="io-cozy-accounts"], 304 .perm[class^="io-cozy-accounts-stats"] { 305 -webkit-mask-image: url("../icons/doctypes/shield.svg"); 306 mask-image: url("../icons/doctypes/shield.svg"); 307 } 308 .perm[class^="io-cozy-apps"], 309 .perm[class^="io-cozy-apps-suggestions"] { 310 -webkit-mask-image: url("../icons/doctypes/grid.svg"); 311 mask-image: url("../icons/doctypes/grid.svg"); 312 } 313 .perm[class^="io-cozy-bank-accounts"] { 314 -webkit-mask-image: url("../icons/doctypes/wallet.svg"); 315 mask-image: url("../icons/doctypes/wallet.svg"); 316 } 317 .perm[class^="io-cozy-bank-groups"] { 318 -webkit-mask-image: url("../icons/doctypes/banking.svg"); 319 mask-image: url("../icons/doctypes/banking.svg"); 320 } 321 .perm[class^="io-cozy-bank-operations"] { 322 -webkit-mask-image: url("../icons/doctypes/euro.svg"); 323 mask-image: url("../icons/doctypes/euro.svg"); 324 } 325 .perm[class^="io-cozy-contacts"], 326 .perm[class^="io-cozy-identities"], 327 .perm[class^="io-cozy-bank-recipients"] { 328 -webkit-mask-image: url("../icons/doctypes/profile.svg"); 329 mask-image: url("../icons/doctypes/profile.svg"); 330 } 331 .perm[class^="io-cozy-contacts-groups"] { 332 -webkit-mask-image: url("../icons/doctypes/team.svg"); 333 mask-image: url("../icons/doctypes/team.svg"); 334 } 335 .perm[class^="io-cozy-bank-recurrence"] { 336 -webkit-mask-image: url("../icons/doctypes/timer.svg"); 337 mask-image: url("../icons/doctypes/timer.svg"); 338 } 339 .perm[class^="io-cozy-bills"] { 340 -webkit-mask-image: url("../icons/doctypes/bill.svg"); 341 mask-image: url("../icons/doctypes/bill.svg"); 342 } 343 .perm[class^="cc-cozycloud-sentry"], 344 .perm[class^="cc-cozycloud-errors"], 345 .perm[class^="io-cozy-files"] { 346 -webkit-mask-image: url("../icons/doctypes/file.svg"); 347 mask-image: url("../icons/doctypes/file.svg"); 348 } 349 .perm[class^="io-cozy-files-versions"] { 350 -webkit-mask-image: url("../icons/doctypes/history.svg"); 351 mask-image: url("../icons/doctypes/history.svg"); 352 } 353 .perm[class^="io-cozy-certified-carbon_copy"] { 354 -webkit-mask-image: url("../images/icon-certified.svg"); 355 mask-image: url("../images/icon-certified.svg"); 356 } 357 .perm[class^="io-cozy-certified-electronic_safe"] { 358 -webkit-mask-image: url("../images/icon-safe.svg"); 359 mask-image: url("../images/icon-safe.svg"); 360 } 361 .perm[class^="io-cozy-home-settings"] { 362 -webkit-mask-image: url("../icons/doctypes/cog.svg"); 363 mask-image: url("../icons/doctypes/cog.svg"); 364 } 365 .perm[class^="io-cozy-konnectors"] { 366 -webkit-mask-image: url("../icons/doctypes/sync-cozy.svg"); 367 mask-image: url("../icons/doctypes/sync-cozy.svg"); 368 } 369 .perm[class^="io-cozy-notifications"] { 370 -webkit-mask-image: url("../icons/doctypes/bell.svg"); 371 mask-image: url("../icons/doctypes/bell.svg"); 372 } 373 .perm[class^="io-cozy-photos-albums"] { 374 -webkit-mask-image: url("../icons/doctypes/picture.svg"); 375 mask-image: url("../icons/doctypes/picture.svg"); 376 } 377 .perm[class^="io-cozy-timeseries-geojson"] { 378 -webkit-mask-image: url("../icons/doctypes/location.svg"); 379 mask-image: url("../icons/doctypes/location.svg"); 380 } 381 .perm[class^="io-cozy-jobs"] { 382 -webkit-mask-image: url("../icons/doctypes/email.svg"); 383 mask-image: url("../icons/doctypes/email.svg"); 384 } 385 .perm[class^="io-cozy-triggers"] { 386 -webkit-mask-image: url("../icons/doctypes/clock.svg"); 387 mask-image: url("../icons/doctypes/clock.svg"); 388 } 389 .perm[class^="io-cozy-sharings"] { 390 -webkit-mask-image: url("../icons/doctypes/share.svg"); 391 mask-image: url("../icons/doctypes/share.svg"); 392 } 393 .perm[class^="io-cozy-oauth-clients"] { 394 -webkit-mask-image: url("../icons/doctypes/devices.svg"); 395 mask-image: url("../icons/doctypes/devices.svg"); 396 } 397 398 /* Others */ 399 .halo-icon { 400 flex: 2rem 0 0; 401 width: 2rem; 402 height: 2rem; 403 padding: 0.5rem; 404 background-color: var(--primaryColor); 405 border-radius: 50%; 406 } 407 .halo-icon .icon { 408 background-color: var(--primaryTextContrastColor); 409 } 410 button.alert-info:hover { 411 background-color: var(--btn-ghost-hover-color); 412 } 413 button.card-intent:hover { 414 background-color: var(--errorColorLightest); 415 } 416 .big.illustration { 417 height: 8rem; 418 } 419 .greyed-extension { 420 opacity: 0.6; 421 } 422 .compat .vertical-separator { 423 height: 2rem; 424 } 425 .expand { 426 display: inline-flex; 427 } 428 .expand .icon { 429 transition: transform 0.2s; 430 } 431 .expanded .icon { 432 transform: rotate(90deg); 433 } 434 :not(.expanded) + .collapse { 435 display: none; 436 } 437 .modal-icon .icon-cozy { 438 background: url(../icons/cozy-app-square.svg); 439 }