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

   1 .notificationSettings {
   2         margin-top: 30px;
   3 }
   4
   5 .notificationSettingsCategory,
   6 .notificationSettingsItem {
   7         display: flex;
   8 }
   9
  10 .notificationSettingsCategory {
  11         border-bottom: 2px solid currentColor;
  12         color: $wcfTabularBoxHeadline;
  13         font-weight: 600;
  14         padding: 5px 0;
  15 }
  16
  17 .notificationSettingsItem {
  18         align-items: center;
  19         padding: 5px 0;
  20 }
  21
  22 .notificationSettingsItem:not(:last-child) {
  23         border-bottom: 1px solid $wcfContentBorderInner;
  24 }
  25
  26 .notificationSettingsEvent {
  27         flex: 1 auto;
  28
  29         > label {
  30                 cursor: pointer;
  31                 display: block;
  32         }
  33 }
  34
  35 .notificationSettingsEvent:hover + .notificationSettingsState,
  36 .notificationSettingsState > label:hover {
  37         .fa-bell,
  38         .fa-bell-slash {
  39                 transform: scale(1.2);
  40         }
  41 }
  42
  43 .notificationSettingsState {
  44         align-items: center;
  45         display: flex;
  46         flex: 0 0 34px;
  47         justify-content: center;
  48
  49         @include screen-sm-up {
  50                 margin: 0 20px;
  51         }
  52
  53         @include screen-xs {
  54                 margin: 0 10px;
  55         }
  56
  57         input[type="checkbox"] {
  58                 opacity: 0;
  59                 position: absolute;
  60                 z-index: -1;
  61
  62                 &.focus-visible:focus ~ .icon {
  63                         transform: scale(1.2);
  64                 }
  65
  66                 &:not(:checked) + .fa-bell {
  67                         display: none;
  68                 }
  69
  70                 &:checked ~ .fa-bell-slash {
  71                         display: none;
  72                 }
  73         }
  74 }
  75
  76 .notificationSettingsEmail {
  77         align-items: center;
  78         display: flex;
  79         flex: 0 0 45px;
  80         justify-content: flex-end;
  81 }
  82 .notificationSettingsEmailType {
  83         align-items: center;
  84         display: flex;
  85
  86         &.disabled {
  87                 filter: grayscale(1);
  88                 opacity: 0.75;
  89         }
  90 }