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: var(--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 var(--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-icon {
  38                 transform: scale(1.2);
  39         }
  40 }
  41
  42 .notificationSettingsState {
  43         align-items: center;
  44         display: flex;
  45         flex: 0 0 34px;
  46         justify-content: center;
  47
  48         @include screen-sm-up {
  49                 margin: 0 20px;
  50         }
  51
  52         @include screen-xs {
  53                 margin: 0 10px;
  54         }
  55
  56         label {
  57                 cursor: pointer;
  58         }
  59
  60         input[type="checkbox"] {
  61                 opacity: 0;
  62                 position: absolute;
  63                 z-index: -1;
  64
  65                 &:focus-visible ~ .icon {
  66                         transform: scale(1.2);
  67                 }
  68
  69                 &:not(:checked) + fa-icon[name="bell"] {
  70                         display: none;
  71                 }
  72
  73                 &:checked ~ fa-icon[name="bell-slash"] {
  74                         display: none;
  75                 }
  76         }
  77
  78         fa-icon[name="bell"] {
  79                 color: rgba(0, 153, 0, 1);
  80         }
  81
  82         fa-icon[name="bell-slash"] {
  83                 color: rgba(204, 0, 0, 1);
  84         }
  85 }
  86
  87 .notificationSettingsEmail {
  88         align-items: center;
  89         display: flex;
  90         flex: 0 0 50px;
  91         justify-content: flex-end;
  92 }
  93 .notificationSettingsEmailType {
  94         align-items: center;
  95         display: flex;
  96
  97         &.disabled fa-icon {
  98                 color: var(--wcfContentDimmedText) !important;
  99         }
 100
 101         fa-icon[name="xmark"] {
 102                 color: rgba(204, 0, 0, 1);
 103         }
 104
 105         fa-icon[name="bolt"],
 106         fa-icon[name="clock"] {
 107                 color: rgba(0, 153, 0, 1);
 108         }
 109 }