mw-config/config.css

   1 /* stylelint-disable selector-class-pattern */
   2 *,
   3 ::before,
   4 ::after {
   5         box-sizing: border-box;
   6 }
   7
   8 html {
   9         line-height: 1.4;
  10         font-size: 1em;
  11         -webkit-text-size-adjust: 100%;
  12 }
  13
  14 html.dark {
  15         color-scheme: dark;
  16 }
  17
  18 body {
  19         margin: 0;
  20         width: 100%;
  21         min-width: 320px;
  22         min-height: 100vh;
  23         line-height: 1.6;
  24         font-family: sans-serif;
  25         font-size: 1em;
  26         font-weight: normal;
  27         color: rgba( 60, 60, 67 );
  28         background-color: #f8f9fa;
  29         direction: ltr;
  30         font-synthesis: style;
  31         text-rendering: optimizelegibility;
  32         -webkit-font-smoothing: antialiased;
  33         -moz-osx-font-smoothing: grayscale;
  34 }
  35
  36 main {
  37         display: block;
  38 }
  39
  40 .mw-body {
  41         margin: 32px 32px 0;
  42         padding-bottom: 30px;
  43 }
  44
  45 @media ( min-width: 960px ) {
  46         .mw-body {
  47                 margin: 32px 32px 0;
  48                 padding-top: 64px;
  49                 padding-left: 272px;
  50         }
  51 }
  52
  53 @media ( min-width: 1440px ) {
  54         .mw-body {
  55                 padding-right: calc( (100vw - 1440px) / 2 );
  56                 padding-left: calc( (100vw - 1440px) / 2 + 272px );
  57         }
  58 }
  59
  60 #mw-panel {
  61         position: fixed;
  62         top: 0;
  63         bottom: 0;
  64         left: 0;
  65         z-index: 50;
  66         padding: 32px 32px 96px;
  67         width: calc( 100vw - 64px );
  68         max-width: 320px;
  69         opacity: 0;
  70         overflow: hidden auto;
  71         transform: translate( -100% );
  72         transition: opacity 0.5s, transform 0.25s ease;
  73         overflow-wrap: break-word;
  74         border-right: 1px solid #c8ccd1;
  75 }
  76
  77 #mw-panel a {
  78         font-weight: 500;
  79         color: #54595d;
  80 }
  81
  82 #mw-panel div:nth-child( n+2 ) {
  83         border-top: 1px solid #a2a9b1;
  84         padding-top: 10px;
  85 }
  86
  87 #mw-panel a:hover {
  88         /* stylelint-disable-next-line declaration-no-important */
  89         color: #447ff5 !important;
  90 }
  91
  92 #mw-panel a:active {
  93         /* stylelint-disable-next-line declaration-no-important */
  94         color: #36c !important;
  95         /* stylelint-disable-next-line declaration-no-important */
  96         font-weight: bold !important;
  97 }
  98
  99 #mw-panel li {
 100         list-style-type: none;
 101 }
 102
 103 .dark #mw-panel {
 104         box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 1px 2px rgba( 0, 0, 0, 0.06 );
 105 }
 106
 107 @media ( min-width: 960px ) {
 108         #mw-panel {
 109                 z-index: 1;
 110                 padding-top: 64px;
 111                 padding-bottom: 128px;
 112                 width: 272px;
 113                 max-width: 100%;
 114                 opacity: 1;
 115                 visibility: visible;
 116                 box-shadow: none;
 117                 transform: translate( 0 );
 118         }
 119 }
 120
 121 @media ( min-width: 1440px ) {
 122         #mw-panel {
 123                 /* CSS math (max) not supported by all browsers */
 124                 /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 125                 padding-left: max( 32px, calc( (100% - (1440px - 64px)) / 2 ) );
 126                 width: calc( (100% - (1440px - 64px)) / 2 + 240px );
 127         }
 128 }
 129
 130 #p-logo {
 131         margin-left: auto;
 132         margin-right: auto;
 133         display: block;
 134         width: 160px;
 135 }
 136
 137 #p-logo a {
 138         background-position: center center;
 139         background-repeat: no-repeat;
 140         display: block;
 141         width: 10em;
 142         height: 160px;
 143         text-decoration: none;
 144         background-image: url( images/installer-logo.png );
 145 }
 146
 147 .config-page-list {
 148         float: right;
 149         max-width: 300px;
 150         margin: 10px;
 151 }
 152
 153 .config-submit {
 154         margin: 5px 0 5px 0;
 155 }
 156
 157 .config-help-field-content {
 158         display: flex;
 159 }
 160
 161 .config-help-field-content-hidden {
 162         display: none;
 163 }
 164
 165 .config-page-current {
 166         font-weight: bold;
 167 }
 168
 169 #config-live-log {
 170         margin: 10px;
 171 }
 172
 173 .cdx-card {
 174         margin-top: 5px;
 175         margin-bottom: 5px;
 176 }
 177
 178 .dbWrapper {
 179         margin-bottom: 30px;
 180 }
 181 /* Logo preview */
 182 .logo-preview-area {
 183         display: flex;
 184         padding: 20px;
 185         margin: 20px 20px 0;
 186 }
 187 /* Logo preview (main) */
 188 .logo-main {
 189         display: inline-flex;
 190         max-height: 100px;
 191         align-items: center;
 192         margin-left: 20px;
 193 }
 194
 195 .logo-icon {
 196         width: 50px;
 197         height: 50px;
 198         margin-right: 10px;
 199 }
 200
 201 .logo-tagline,
 202 .logo-wordmark {
 203         display: block;
 204         max-width: 130px;
 205         max-height: 50px;
 206 }
 207
 208 .logo-tagline {
 209         font-size: 0.75em;
 210         text-align: center;
 211 }
 212
 213 .logo-dropper {
 214         display: none;
 215 }
 216
 217 .sidebar .cdx-card__text {
 218         text-align: center;
 219 }