_dialog.scss
ASCII text
1/* Modal Dialogs */ 2 3.headline { 4@include type(headline6); 5} 6 7.modal-dialog { 8border: 0; 9border-radius: $corner-radius; 10box-shadow: $shadow-z8; 11background-color: $surface-z8; 12color: $on-surface; 13 14@if $version >= 3.36 { 15.modal-dialog-content-box { 16max-width: 28em; 17margin: 32px 40px; 18spacing: 32px; 19} 20} @else { 21.modal-dialog-content-box { 22padding: 24px; 23} 24} 25 26.modal-dialog-linked-button { 27@extend %bubble_button; 28} 29 30@if $version == 3.34 { 31StEntry { 32@extend %entry; 33} 34 35.button { 36@extend %button; 37} 38} 39} 40 41/* End Session Dialog */ 42@if $version >= 3.36 { 43.end-session-dialog { 44width: 30em; 45 46.end-session-dialog-battery-warning, 47.dialog-list-title { 48color: $error; 49} 50} 51} @else { 52.end-session-dialog { 53spacing: 42px; 54border: 0; 55} 56 57.end-session-dialog-subject { 58@include type(headline6); 59} 60 61.end-session-dialog-list { 62padding-top: 20px; 63} 64 65.end-session-dialog-layout { 66padding-left: 17px; 67 68&:rtl { 69padding-right: 17px; 70} 71} 72 73.end-session-dialog-description { 74width: 28em; 75padding-bottom: 10px; 76 77&:rtl { 78text-align: right; 79} 80} 81 82.end-session-dialog-warning { 83width: 28em; 84padding-top: 6px; 85color: $error; 86 87&:rtl { 88text-align: right; 89} 90} 91 92.end-session-dialog-logout-icon { 93width: 48px; 94height: 48px; 95border-radius: $circular-radius; 96background-size: contain; 97} 98 99.end-session-dialog-shutdown-icon { 100width: 48px; 101height: 48px; 102color: hint($on-surface); 103} 104 105.end-session-dialog-inhibitor-layout { 106max-height: 200px; 107padding-right: 64px; 108padding-left: 64px; 109spacing: 16px; 110} 111 112.end-session-dialog-session-list, 113.end-session-dialog-app-list { 114spacing: 1em; 115} 116 117.end-session-dialog-list-header { 118font-weight: bold; 119 120&:rtl { 121text-align: right; 122} 123} 124 125.end-session-dialog-app-list-item, 126.end-session-dialog-session-list-item { 127spacing: 1em; 128} 129 130.end-session-dialog-app-list-item-name, 131.end-session-dialog-session-list-item-name { 132font-weight: bold; 133} 134 135.end-session-dialog-app-list-item-description { 136color: hint($on-surface); 137font-size: 1em; 138} 139} 140 141/* Message Dialog */ 142@if $version >= 3.36 { 143.message-dialog-content { 144spacing: 18px; 145 146.message-dialog-title { 147@include type(headline6); 148text-align: inherit; 149 150$lightweight: if($version >= 3.38, ".lightweight", ".leightweight"); 151 152&#{$lightweight} { 153@include type(headline6); 154} 155} 156 157.message-dialog-description { 158color: hint($on-surface); 159text-align: inherit; 160} 161} 162} @else { 163.message-dialog-main-layout { 164padding: 12px 20px 0; 165spacing: 12px; 166} 167 168.message-dialog-content { 169max-width: 28em; 170spacing: 20px; 171} 172 173.message-dialog-icon { 174min-width: 48px; 175icon-size: 48px; 176} 177 178.message-dialog-title { 179font-weight: bold; 180} 181 182.message-dialog-subtitle { 183color: hint($on-surface); 184font-weight: normal; 185} 186} 187 188/* Dialog List */ 189.dialog-list { 190spacing: 18px; 191 192.dialog-list-title { 193text-align: inherit; 194font-weight: bold; 195} 196 197.dialog-list-scrollview { 198max-height: 200px; 199} 200 201.dialog-list-box { 202spacing: 1em; 203 204.dialog-list-item { 205spacing: 1em; 206 207.dialog-list-item-title { 208font-weight: bold; 209} 210 211.dialog-list-item-description { 212color: hint($on-surface); 213font-size: 1em; 214} 215} 216} 217} 218 219/* Run Dialog */ 220.run-dialog { 221@if $version >= 3.36 { 222.modal-dialog-content-box { 223margin-top: 24px; 224margin-bottom: 16px; 225} 226 227.run-dialog-entry { 228width: 20em; 229} 230 231.run-dialog-description { 232text-align: inherit; 233color: hint($on-surface); 234font-size: 1em; 235} 236} @else { 237.run-dialog-label { 238padding-bottom: .4em; 239color: hint($on-surface); 240font-weight: normal; 241font-size: 1em; 242} 243 244.run-dialog-entry { 245width: 20em; 246margin-bottom: 0; 247} 248 249.run-dialog-error-box { 250padding-top: 16px; 251spacing: 6px; 252color: $error; 253} 254 255.run-dialog-button-box { 256padding-top: 1em; 257} 258} 259} 260 261/* Password or Authentication Dialog */ 262 263@if $version >= 3.36 { 264.prompt-dialog { 265width: 28em; 266 267.modal-dialog-content-box { 268margin-bottom: 24px; 269} 270} 271 272.prompt-dialog-password-grid { 273spacing-rows: 8px; 274spacing-columns: 4px; 275 276.prompt-dialog-password-entry { 277width: auto; 278 279// 4px (spacing) + 16px (spinner-width) 280&:ltr { 281margin-left: 20px; 282} 283 284&:rtl { 285margin-right: 20px; 286} 287} 288} 289 290.prompt-dialog-password-layout { 291spacing: 8px; 292} 293 294.prompt-dialog-password-entry { 295width: 18em; 296} 297} @else { 298.prompt-dialog { 299// this is the width of the entire modal popup 300width: 34em; 301 302.message-dialog-main-layout { 303spacing: 24px; 304padding: 10px; 305} 306 307.message-dialog-content { 308spacing: 16px; 309} 310 311.message-dialog-title { 312color: inherit; 313@include type(headline6); 314} 315} 316 317.prompt-dialog-description:rtl { 318text-align: right; 319} 320 321.prompt-dialog-password-box { 322spacing: 1em; 323padding-bottom: 1em; 324} 325} 326 327.prompt-dialog-error-label, 328.prompt-dialog-info-label, 329.prompt-dialog-null-label { 330font-size: 1em; 331 332@if $version >= 3.36 { 333text-align: inherit; 334} @else { 335padding-bottom: 8px; 336} 337} 338 339.prompt-dialog-error-label { 340color: $error; 341} 342 343@if $version == 3.34 { 344.prompt-dialog-pim-box { 345spacing: 1em; 346} 347 348.prompt-dialog-grid { 349spacing-rows: 15px; 350spacing-columns: 1em; 351} 352 353.prompt-dialog-keyfiles-box { 354spacing: 1em; 355} 356 357.prompt-dialog-button.button { 358padding: 0 8px; 359} 360} 361 362 363/* Polkit Dialog */ 364 365.polkit-dialog-user-layout { 366@if $version >= 3.36 { 367text-align: center; 368spacing: 8px; 369margin-bottom: 6px; 370} @else { 371spacing: 10px; 372padding-left: 10px; 373 374&:rtl { 375padding-left: 0; 376padding-right: 10px; 377} 378} 379 380@if $version < 40 { 381.polkit-dialog-user-icon { 382border-radius: $circular-radius; 383background-size: contain; 384 385@if $version < 3.36 { 386width: 48px; 387height: 48px; 388} 389} 390} 391 392.polkit-dialog-user-root-label { 393color: $error; 394} 395} 396 397/* Audio selection dialog */ 398.audio-device-selection-dialog { 399@if $version >= 3.36 { 400.modal-dialog-content-box { 401margin-bottom: 28px; 402} 403} @else { 404spacing: 30px; 405 406.audio-selection-content { 407spacing: 20px; 408padding: 24px; 409} 410 411.audio-selection-title { 412font-weight: bold; 413text-align: inherit; 414} 415} 416 417.audio-selection-box { 418spacing: 20px; 419} 420} 421 422.audio-selection-device { 423transition-duration: $duration; 424border: 0; 425border-radius: $corner-radius; 426 427&:focus { 428background-color: focus-overlay($on-surface); 429} 430 431&:hover { 432background-color: hover-overlay($on-surface); 433} 434 435&:active { 436transition-duration: $duration-ripple; 437background-color: pressed-overlay($on-surface); 438color: inherit; 439} 440} 441 442.audio-selection-device-box { 443padding: 20px; 444spacing: 20px; 445} 446 447.audio-selection-device-icon { 448icon-size: 64px; 449} 450 451@if $version >= 40 { 452/* Welcome dialog */ 453.welcome-dialog-image { 454// Reasonable maximum dimensions 455height: 300px; 456width: 300px; 457background-image: url("gnome-shell-start.svg"); 458background-size: contain; 459} 460} 461 462@if $version < 3.36 { 463/* ShellMountOperation Dialogs */ 464.shell-mount-operation-icon { 465icon-size: 48px; 466} 467 468.mount-dialog-subject { 469@include type(headline6); 470} 471 472.mount-dialog { 473spacing: 24px; 474 475.message-dialog-title { 476max-width: 34em; 477padding-top: 10px; 478padding-bottom: 6px; 479padding-left: 17px; 480 481&:rtl { 482padding-left: 0; 483padding-right: 17px; 484} 485} 486 487.message-dialog-body { 488width: 28em; 489padding-left: 17px; 490 491&:rtl { 492padding-left: 0; 493padding-right: 17px; 494} 495} 496} 497 498.mount-dialog-app-list { 499max-height: 200px; 500padding-top: 24px; 501padding-left: 48px; 502padding-right: 32px; 503 504&:rtl { 505padding-right: 48px; 506padding-left: 32px; 507} 508} 509 510.mount-dialog-app-list-item { 511&, 512&:hover { 513color: inherit; 514} 515 516&:ltr { 517padding-right: 1em; 518} 519 520&:rtl { 521padding-left: 1em; 522} 523} 524 525.mount-dialog-app-list-item-icon { 526&:ltr { 527padding-right: 16px; 528} 529 530&:rtl { 531padding-left: 16px; 532} 533} 534 535.mount-dialog-app-list-item-name { 536font-size: 1em; 537} 538 539/* Access Dialog */ 540.access-dialog { 541spacing: 30px; 542} 543 544/* Geolocation Dialog */ 545.geolocation-dialog { 546spacing: 30px; 547} 548 549/* Extension Dialog */ 550.extension-dialog { 551.message-dialog-main-layout { 552spacing: 24px; 553padding: 10px; 554} 555 556.message-dialog-title { 557color: hint($on-surface); 558font-weight: normal; 559} 560} 561 562/* Inhibit-Shortcuts Dialog */ 563.inhibit-shortcuts-dialog { 564spacing: 30px; 565} 566 567/* Network Agent Dialog */ 568 569.network-dialog-secret-table { 570spacing-rows: 15px; 571spacing-columns: 1em; 572} 573 574.keyring-dialog-control-table { 575spacing-rows: 15px; 576spacing-columns: 1em; 577} 578} 579