wcfsetup/install/files/style/ui/accountSecurity.scss

   1 .accountSecurityContainer {
   2         align-items: center;
   3         display: flex;
   4
   5         @include screen-sm-down {
   6                 align-items: flex-start;
   7                 flex-direction: column;
   8         }
   9 }
  10
  11 .accountSecurityInformation {
  12         flex: 1 auto;
  13 }
  14
  15 .accountSecurityInformationLink {
  16         color: inherit;
  17 }
  18
  19 .accountSecurityButtons {
  20         flex: 0 0 auto;
  21
  22         @include screen-md-up {
  23                 margin-left: 10px;
  24         }
  25
  26         @include screen-sm-down {
  27                 align-self: flex-end;
  28                 margin-top: 5px;
  29         }
  30 }
  31
  32 .multifactorBackupCode {
  33         font-family: var(--wcfFontFamilyMonospace) !important;
  34
  35         &.used {
  36                 text-decoration: line-through;
  37         }
  38         .chunk {
  39                 margin-left: 5px;
  40
  41                 &:first-child {
  42                         margin-left: 0;
  43                         font-weight: 600;
  44                 }
  45         }
  46 }
  47
  48 @media not print {
  49         .multifactorBackupCodesPrintMetadata {
  50                 display: none !important;
  51         }
  52 }
  53
  54 @media print {
  55         .multifactorBackupCodesPrintButton {
  56                 display: none !important;
  57         }
  58
  59         .multifactorBackupCodesPrintContainer {
  60                 padding: 1cm !important;
  61                 position: absolute !important;
  62                 background: white !important;
  63                 inset: 0 !important;
  64
  65                 .multifactorBackupCodesPrintMetadata {
  66                         max-width: 9cm !important;
  67                 }
  68         }
  69 }
  70
  71 // Just .multifactorTotpCode is not specific enough.
  72 input.multifactorTotpCode,
  73 input.multifactorEmailCode,
  74 input.multifactorBackupCode {
  75         font-family: var(--wcfFontFamilyMonospace) !important;
  76         font-weight: 600;
  77         box-sizing: content-box;
  78
  79         &[size="6"] {
  80                 width: 6ch;
  81                 font-size: 28px;
  82         }
  83         &[size="8"] {
  84                 width: 8ch;
  85                 font-size: 28px;
  86         }
  87         &[size="23"] {
  88                 width: 23ch;
  89                 font-size: 18px;
  90         }
  91 }
  92
  93 .multifactorTotpNewDevice {
  94         display: flex;
  95         flex-direction: column;
  96         margin-top: 20px;
  97
  98         .totpSecretContainer {
  99                 text-align: center;
 100
 101                 canvas {
 102                         width: 200px;
 103                         height: 200px;
 104                         background: #fff;
 105                         border-radius: 3px;
 106                         border: 3px solid #fff;
 107                         box-sizing: content-box;
 108                 }
 109         }
 110
 111         .totpSecret {
 112                 display: inline-block;
 113                 margin-top: 10px;
 114         }
 115
 116         .multifactorTotpNewDeviceFields {
 117                 flex: 1 1 auto;
 118         }
 119
 120         @include screen-md-up {
 121                 flex-direction: row;
 122
 123                 .totpSecretContainer {
 124                         width: 250px;
 125                         margin: 0 5px;
 126                 }
 127         }
 128 }