github.com/letsencrypt/boulder@v0.20251208.0/sfe/static/style.css (about)

     1  * {
     2      font-family: system-ui, sans-serif;
     3  }
     4  
     5  html,
     6  body {
     7      height: 100%;
     8      margin: 0;
     9      padding: 0;
    10      width: 100%;
    11      display: flex;
    12      flex-direction: column;
    13      min-height: 100vh;
    14  }
    15  
    16  html {
    17      line-height: 1.15;
    18  }
    19  
    20  div {
    21      display: block;
    22      unicode-bidi: isolate;
    23  }
    24  
    25  body {
    26      flex: 1;
    27      align-items: center;
    28  }
    29  
    30  h1,
    31  h2,
    32  h3,
    33  h4,
    34  h5,
    35  h6 {
    36      color: #003C66;
    37      font-weight: normal;
    38  }
    39  
    40  h1 {
    41      font-size: 2em;
    42      margin: .67em 0;
    43      display: block;
    44  }
    45  
    46  a,
    47  a:hover {
    48      color: #285999;
    49  }
    50  
    51  .header,
    52  .footer {
    53      width: 100%;
    54      background-color: #f8f8f8;
    55      border-bottom: 1px solid #eee;
    56  }
    57  
    58  .header {
    59      padding: 10px 20px;
    60      box-sizing: border-box;
    61  }
    62  
    63  .footer {
    64      margin-top: auto;
    65  }
    66  
    67  .container {
    68      max-width: 45em;
    69      margin: 0 auto;
    70      width: 100%;
    71  }
    72  
    73  .section,
    74  .highlight {
    75      width: 100%;
    76      max-width: 45em;
    77      padding: 10px 20px;
    78      box-sizing: border-box;
    79  }
    80  
    81  .section {
    82      padding: 10px 20px;
    83      margin: 0 auto;
    84  }
    85  
    86  .highlight {
    87      margin-top: 20px;
    88      margin-bottom: 5px;
    89      background-color: #e9f0fa;
    90      border-left: 5px solid #003C66;
    91      border-radius: 8px;
    92  }
    93  
    94  .form-field {
    95      margin-bottom: 1.5rem;
    96  }
    97  
    98  .form-field label {
    99      font-weight: 600;
   100      color: #222;
   101      font-size: 1rem;
   102      display: block;
   103      margin-bottom: 0.2rem;
   104  }
   105  
   106  .form-field .field-description {
   107      display: block;
   108      color: #666;
   109      font-size: 0.875rem;
   110      margin: 0.1rem 0 0.4rem 0;
   111  }
   112  
   113  .form-field input,
   114  .form-field select,
   115  .form-field textarea {
   116      width: 100%;
   117      padding: 8px;
   118      box-sizing: border-box;
   119      font-size: 1rem;
   120      border: 1px solid #ccc;
   121      border-radius: 4px;
   122      font-family: inherit;
   123      line-height: 1.4;
   124  }
   125  
   126  .form-field input:focus,
   127  .form-field select:focus,
   128  .form-field textarea:focus {
   129      border-color: #003C66;
   130      outline: none;
   131      box-shadow: 0 0 0 2px rgba(0, 60, 102, 0.2);
   132  }
   133  
   134  .form-field input.valid,
   135  .form-field select.valid,
   136  .form-field textarea.valid {
   137      border: 1px solid green;
   138      outline: 2px solid rgba(0, 128, 0, 0.4);
   139      box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.2);
   140  }
   141  
   142  .form-field input.invalid,
   143  .form-field select.invalid,
   144  .form-field textarea.invalid {
   145      border: 1px solid red;
   146      outline: 2px solid rgba(255, 0, 0, 0.4);
   147      box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
   148  }
   149  
   150  .checkbox-row {
   151      display: flex;
   152      align-items: center;
   153      gap: 0.5rem;
   154      margin-top: 0.4rem;
   155  }
   156  
   157  .checkbox-row input[type="checkbox"] {
   158      width: auto;
   159      margin: 0;
   160      transform: scale(1.1);
   161      box-sizing: content-box;
   162  }
   163  
   164  .checkbox-text {
   165      font-size: 0.875rem;
   166      color: #666;
   167      line-height: 1.4;
   168  }
   169  
   170  .checkbox-row input.invalid {
   171      outline: 2px solid rgba(255, 0, 0, 0.6);
   172  }
   173  
   174  .form-field .error-message {
   175      color: red;
   176      font-size: 0.875rem;
   177      margin-top: 0.3rem;
   178  }
   179  
   180  button.primary {
   181      color: #fff;
   182      background-color: #003C66;
   183      border: none;
   184      padding: 10px 20px;
   185      cursor: pointer;
   186      transition: background-color 0.3s;
   187      border-radius: 8px;
   188      margin: 10px 0px 0px;
   189      font-family: inherit;
   190      font-size: 100%;
   191      line-height: 1.15;
   192      overflow: visible;
   193      text-transform: none;
   194  }
   195  
   196  button.primary:hover {
   197      background-color: #285999;
   198  }
   199  
   200  button.primary.btn-disabled {
   201      background: #999;
   202      cursor: not-allowed;
   203  }
   204  
   205  #override-form {
   206      padding-bottom: 2.5rem;
   207  }
   208  
   209  #form-error-banner {
   210      display: none;
   211      color: #fff;
   212      background: #c00;
   213      padding: 8px;
   214      border-radius: 4px;
   215      margin-bottom: 12px;
   216  }
   217  
   218  #logo {
   219      height: 50px;
   220  }