code.gitea.io/gitea@v1.21.7/web_src/css/form.css (about)

     1  .ui.input textarea,
     2  .ui.form textarea,
     3  .ui.form input:not([type]),
     4  .ui.form input[type="date"],
     5  .ui.form input[type="datetime-local"],
     6  .ui.form input[type="email"],
     7  .ui.form input[type="number"],
     8  .ui.form input[type="password"],
     9  .ui.form input[type="search"],
    10  .ui.form input[type="tel"],
    11  .ui.form input[type="time"],
    12  .ui.form input[type="text"],
    13  .ui.form input[type="file"],
    14  .ui.form input[type="url"] {
    15    transition: none;
    16  }
    17  
    18  input,
    19  textarea,
    20  .ui.input > input,
    21  .ui.form input:not([type]),
    22  .ui.form select,
    23  .ui.form textarea,
    24  .ui.form input[type="date"],
    25  .ui.form input[type="datetime-local"],
    26  .ui.form input[type="email"],
    27  .ui.form input[type="file"],
    28  .ui.form input[type="number"],
    29  .ui.form input[type="password"],
    30  .ui.form input[type="search"],
    31  .ui.form input[type="tel"],
    32  .ui.form input[type="text"],
    33  .ui.form input[type="time"],
    34  .ui.form input[type="url"],
    35  .ui.selection.dropdown,
    36  .ui.checkbox label::before,
    37  .ui.checkbox input:checked ~ label::before,
    38  .ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
    39    background: var(--color-input-background);
    40    border-color: var(--color-input-border);
    41    color: var(--color-input-text);
    42  }
    43  
    44  input:hover,
    45  textarea:hover,
    46  .ui.input input:hover,
    47  .ui.form input:not([type]):hover,
    48  .ui.form select:hover,
    49  .ui.form textarea:hover,
    50  .ui.form input[type="date"]:hover,
    51  .ui.form input[type="datetime-local"]:hover,
    52  .ui.form input[type="email"]:hover,
    53  .ui.form input[type="file"]:hover,
    54  .ui.form input[type="number"]:hover,
    55  .ui.form input[type="password"]:hover,
    56  .ui.form input[type="search"]:hover,
    57  .ui.form input[type="tel"]:hover,
    58  .ui.form input[type="text"]:hover,
    59  .ui.form input[type="time"]:hover,
    60  .ui.form input[type="url"]:hover,
    61  .ui.selection.dropdown:hover,
    62  .ui.checkbox label:hover::before,
    63  .ui.checkbox label:active::before,
    64  .ui.radio.checkbox label::after,
    65  .ui.radio.checkbox input:focus ~ label::before,
    66  .ui.radio.checkbox input:checked ~ label::before {
    67    background: var(--color-input-background);
    68    border-color: var(--color-input-border-hover);
    69    color: var(--color-input-text);
    70  }
    71  
    72  input:focus,
    73  textarea:focus,
    74  .ui.input input:focus,
    75  .ui.form input:not([type]):focus,
    76  .ui.form select:focus,
    77  .ui.form textarea:focus,
    78  .ui.form input[type="date"]:focus,
    79  .ui.form input[type="datetime-local"]:focus,
    80  .ui.form input[type="email"]:focus,
    81  .ui.form input[type="file"]:focus,
    82  .ui.form input[type="number"]:focus,
    83  .ui.form input[type="password"]:focus,
    84  .ui.form input[type="search"]:focus,
    85  .ui.form input[type="tel"]:focus,
    86  .ui.form input[type="text"]:focus,
    87  .ui.form input[type="time"]:focus,
    88  .ui.form input[type="url"]:focus,
    89  .ui.selection.dropdown:focus,
    90  .ui.checkbox input:focus ~ label::before,
    91  .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
    92  .ui.checkbox input:checked:focus ~ label::before,
    93  .ui.radio.checkbox input:focus:checked ~ label::before {
    94    background: var(--color-input-background);
    95    border-color: var(--color-primary);
    96    color: var(--color-input-text);
    97  }
    98  
    99  .ui.form .field > label,
   100  .ui.form .inline.fields > label,
   101  .ui.form .inline.fields .field > label,
   102  .ui.form .inline.fields .field > p,
   103  .ui.form .inline.field > label,
   104  .ui.form .inline.field > p,
   105  .ui.checkbox label,
   106  .ui.checkbox + label,
   107  .ui.checkbox label:hover,
   108  .ui.checkbox + label:hover,
   109  .ui.checkbox input:focus ~ label,
   110  .ui.checkbox input:active ~ label {
   111    color: var(--color-text);
   112  }
   113  
   114  .ui.form .required.fields:not(.grouped) > .field > label::after,
   115  .ui.form .required.fields.grouped > label::after,
   116  .ui.form .required.field > label::after,
   117  .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
   118  .ui.form .required.field > .checkbox::after,
   119  .ui.form label.required::after {
   120    color: var(--color-red);
   121  }
   122  
   123  .ui.input,
   124  .ui.checkbox input:focus ~ label::after,
   125  .ui.checkbox input:checked ~ label::after,
   126  .ui.checkbox label:active::after,
   127  .ui.checkbox input:not([type="radio"]):indeterminate ~ label::after,
   128  .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
   129  .ui.checkbox input:checked:focus ~ label::after,
   130  .ui.disabled.checkbox label,
   131  .ui.checkbox input[disabled] ~ label {
   132    color: var(--color-input-text);
   133  }
   134  
   135  .ui.radio.checkbox input:focus ~ label::after,
   136  .ui.radio.checkbox input:checked ~ label::after,
   137  .ui.radio.checkbox input:focus:checked ~ label::after {
   138    background: var(--color-input-text);
   139  }
   140  
   141  .ui.toggle.checkbox label::before {
   142    background: var(--color-input-toggle-background);
   143  }
   144  
   145  .ui.toggle.checkbox label,
   146  .ui.toggle.checkbox input:checked ~ label,
   147  .ui.toggle.checkbox input:focus:checked ~ label {
   148    color: var(--color-text) !important;
   149  }
   150  
   151  .ui.toggle.checkbox input:checked ~ label::before,
   152  .ui.toggle.checkbox input:focus:checked ~ label::before {
   153    background: var(--color-primary) !important;
   154  }
   155  
   156  /* match <select> padding to <input> */
   157  .ui.form select {
   158    padding: 0.67857143em 1em;
   159  }
   160  
   161  .form .help {
   162    color: var(--color-secondary-dark-5);
   163    padding-bottom: 0.6em;
   164    display: inline-block;
   165  }
   166  
   167  #create-page-form form {
   168    margin: auto;
   169  }
   170  
   171  #create-page-form form .ui.message {
   172    text-align: center;
   173  }
   174  
   175  @media (min-width: 768px) {
   176    #create-page-form form {
   177      width: 800px !important;
   178    }
   179    #create-page-form form .header {
   180      padding-left: 280px !important;
   181    }
   182    #create-page-form form .inline.field > label {
   183      text-align: right;
   184      width: 250px !important;
   185      word-wrap: break-word;
   186    }
   187    #create-page-form form .help {
   188      margin-left: 265px !important;
   189    }
   190    #create-page-form form .optional .title {
   191      margin-left: 250px !important;
   192    }
   193    #create-page-form form .inline.field > input,
   194    #create-page-form form .inline.field > textarea {
   195      width: 50%;
   196    }
   197  }
   198  
   199  @media (max-width: 767.98px) {
   200    #create-page-form form .optional .title {
   201      margin-left: 15px;
   202    }
   203    #create-page-form form .inline.field > label {
   204      display: block;
   205    }
   206  }
   207  
   208  .m-captcha-style {
   209    width: 100%;
   210    height: 5em;
   211    vertical-align: middle;
   212    display: inline-block;
   213  }
   214  
   215  @media (min-width: 768px) {
   216    .g-recaptcha-style,
   217    .h-captcha-style {
   218      margin: 0 auto !important;
   219      width: 304px;
   220      padding-left: 30px;
   221    }
   222    .g-recaptcha-style iframe,
   223    .h-captcha-style iframe {
   224      border-radius: var(--border-radius) !important;
   225      width: 302px !important;
   226      height: 76px !important;
   227    }
   228    .m-captcha-style {
   229      width: 50%;
   230    }
   231  }
   232  
   233  @media (max-height: 575px) {
   234    #rc-imageselect,
   235    .g-recaptcha-style,
   236    .h-captcha-style {
   237      transform: scale(0.77);
   238      transform-origin: 0 0;
   239    }
   240  }
   241  
   242  .user.activate form,
   243  .user.forgot.password form,
   244  .user.reset.password form,
   245  .user.link-account form,
   246  .user.signin form,
   247  .user.signup form {
   248    margin: auto;
   249    width: 700px !important;
   250  }
   251  
   252  .user.activate form .ui.message,
   253  .user.forgot.password form .ui.message,
   254  .user.reset.password form .ui.message,
   255  .user.link-account form .ui.message,
   256  .user.signin form .ui.message,
   257  .user.signup form .ui.message {
   258    text-align: center;
   259  }
   260  
   261  @media (min-width: 768px) {
   262    .user.activate form,
   263    .user.forgot.password form,
   264    .user.reset.password form,
   265    .user.link-account form,
   266    .user.signin form,
   267    .user.signup form {
   268      width: 800px !important;
   269    }
   270    .user.activate form .header,
   271    .user.forgot.password form .header,
   272    .user.reset.password form .header,
   273    .user.link-account form .header,
   274    .user.signin form .header,
   275    .user.signup form .header {
   276      padding-left: 280px !important;
   277    }
   278    .user.activate form .inline.field > label,
   279    .user.forgot.password form .inline.field > label,
   280    .user.reset.password form .inline.field > label,
   281    .user.link-account form .inline.field > label,
   282    .user.signin form .inline.field > label,
   283    .user.signup form .inline.field > label {
   284      text-align: right;
   285      width: 250px !important;
   286      word-wrap: break-word;
   287    }
   288    .user.activate form .help,
   289    .user.forgot.password form .help,
   290    .user.reset.password form .help,
   291    .user.link-account form .help,
   292    .user.signin form .help,
   293    .user.signup form .help {
   294      margin-left: 265px !important;
   295    }
   296    .user.activate form .optional .title,
   297    .user.forgot.password form .optional .title,
   298    .user.reset.password form .optional .title,
   299    .user.link-account form .optional .title,
   300    .user.signin form .optional .title,
   301    .user.signup form .optional .title {
   302      margin-left: 250px !important;
   303    }
   304    .user.activate form .inline.field > input,
   305    .user.forgot.password form .inline.field > input,
   306    .user.reset.password form .inline.field > input,
   307    .user.link-account form .inline.field > input,
   308    .user.signin form .inline.field > input,
   309    .user.signup form .inline.field > input,
   310    .user.activate form .inline.field > textarea,
   311    .user.forgot.password form .inline.field > textarea,
   312    .user.reset.password form .inline.field > textarea,
   313    .user.link-account form .inline.field > textarea,
   314    .user.signin form .inline.field > textarea,
   315    .user.signup form .inline.field > textarea,
   316    .oauth-login-link {
   317      width: 50%;
   318    }
   319  }
   320  
   321  @media (max-width: 767.98px) {
   322    .user.activate form .optional .title,
   323    .user.forgot.password form .optional .title,
   324    .user.reset.password form .optional .title,
   325    .user.link-account form .optional .title,
   326    .user.signin form .optional .title,
   327    .user.signup form .optional .title {
   328      margin-left: 15px;
   329    }
   330    .user.activate form .inline.field > label,
   331    .user.forgot.password form .inline.field > label,
   332    .user.reset.password form .inline.field > label,
   333    .user.link-account form .inline.field > label,
   334    .user.signin form .inline.field > label,
   335    .user.signup form .inline.field > label {
   336      display: block;
   337    }
   338  }
   339  
   340  .user.activate form .header,
   341  .user.forgot.password form .header,
   342  .user.reset.password form .header,
   343  .user.link-account form .header,
   344  .user.signin form .header,
   345  .user.signup form .header {
   346    padding-left: 0 !important;
   347    text-align: center;
   348  }
   349  
   350  .user.activate form .inline.field > label,
   351  .user.forgot.password form .inline.field > label,
   352  .user.reset.password form .inline.field > label,
   353  .user.link-account form .inline.field > label,
   354  .user.signin form .inline.field > label,
   355  .user.signup form .inline.field > label {
   356    width: 200px;
   357  }
   358  
   359  @media (max-width: 767.98px) {
   360    .user.activate form .inline.field > label,
   361    .user.forgot.password form .inline.field > label,
   362    .user.reset.password form .inline.field > label,
   363    .user.link-account form .inline.field > label,
   364    .user.signin form .inline.field > label,
   365    .user.signup form .inline.field > label,
   366    .user.activate form input,
   367    .user.forgot.password form input,
   368    .user.reset.password form input,
   369    .user.link-account form input,
   370    .user.signin form input,
   371    .user.signup form input,
   372    .oauth-login-link {
   373      width: 100% !important;
   374    }
   375  }
   376  
   377  .user.activate form input[type="number"],
   378  .user.forgot.password form input[type="number"],
   379  .user.reset.password form input[type="number"],
   380  .user.link-account form input[type="number"],
   381  .user.signin form input[type="number"],
   382  .user.signup form input[type="number"] {
   383    -moz-appearance: textfield;
   384  }
   385  
   386  .user.activate form input::-webkit-outer-spin-button,
   387  .user.forgot.password form input::-webkit-outer-spin-button,
   388  .user.reset.password form input::-webkit-outer-spin-button,
   389  .user.link-account form input::-webkit-outer-spin-button,
   390  .user.signin form input::-webkit-outer-spin-button,
   391  .user.signup form input::-webkit-outer-spin-button,
   392  .user.activate form input::-webkit-inner-spin-button,
   393  .user.forgot.password form input::-webkit-inner-spin-button,
   394  .user.reset.password form input::-webkit-inner-spin-button,
   395  .user.link-account form input::-webkit-inner-spin-button,
   396  .user.signin form input::-webkit-inner-spin-button,
   397  .user.signup form input::-webkit-inner-spin-button {
   398    -webkit-appearance: none;
   399    margin: 0;
   400  }
   401  
   402  .repository.new.repo form,
   403  .repository.new.migrate form,
   404  .repository.new.fork form {
   405    margin: auto;
   406  }
   407  
   408  .repository.new.repo form .ui.message,
   409  .repository.new.migrate form .ui.message,
   410  .repository.new.fork form .ui.message {
   411    text-align: center;
   412  }
   413  
   414  @media (min-width: 768px) {
   415    .repository.new.repo form,
   416    .repository.new.migrate form,
   417    .repository.new.fork form {
   418      width: 800px !important;
   419    }
   420    .repository.new.repo form .header,
   421    .repository.new.migrate form .header,
   422    .repository.new.fork form .header {
   423      padding-left: 280px !important;
   424    }
   425    .repository.new.repo form .inline.field > label,
   426    .repository.new.migrate form .inline.field > label,
   427    .repository.new.fork form .inline.field > label {
   428      text-align: right;
   429      width: 250px !important;
   430      word-wrap: break-word;
   431    }
   432    .repository.new.repo form .help,
   433    .repository.new.migrate form .help,
   434    .repository.new.fork form .help {
   435      margin-left: 265px !important;
   436    }
   437    .repository.new.repo form .optional .title,
   438    .repository.new.migrate form .optional .title,
   439    .repository.new.fork form .optional .title {
   440      margin-left: 250px !important;
   441    }
   442    .repository.new.repo form .inline.field > input,
   443    .repository.new.migrate form .inline.field > input,
   444    .repository.new.fork form .inline.field > input,
   445    .repository.new.repo form .inline.field > textarea,
   446    .repository.new.migrate form .inline.field > textarea,
   447    .repository.new.fork form .inline.field > textarea {
   448      width: 50%;
   449    }
   450  }
   451  
   452  @media (max-width: 767.98px) {
   453    .repository.new.repo form .optional .title,
   454    .repository.new.migrate form .optional .title,
   455    .repository.new.fork form .optional .title {
   456      margin-left: 15px;
   457    }
   458    .repository.new.repo form .inline.field > label,
   459    .repository.new.migrate form .inline.field > label,
   460    .repository.new.fork form .inline.field > label {
   461      display: block;
   462    }
   463  }
   464  
   465  .repository.new.repo form .dropdown .text,
   466  .repository.new.migrate form .dropdown .text,
   467  .repository.new.fork form .dropdown .text {
   468    margin-right: 0 !important;
   469  }
   470  
   471  .repository.new.repo form .header,
   472  .repository.new.migrate form .header,
   473  .repository.new.fork form .header {
   474    padding-left: 0 !important;
   475    text-align: center;
   476  }
   477  
   478  .repository.new.repo form .selection.dropdown,
   479  .repository.new.migrate form .selection.dropdown,
   480  .repository.new.fork form .selection.dropdown,
   481  .repository.new.fork form .field a {
   482    vertical-align: middle;
   483    width: 50% !important;
   484  }
   485  
   486  @media (max-width: 767.98px) {
   487    .repository.new.repo form label,
   488    .repository.new.migrate form label,
   489    .repository.new.fork form label,
   490    .repository.new.repo form input,
   491    .repository.new.migrate form input,
   492    .repository.new.fork form input,
   493    .repository.new.fork form .field a,
   494    .repository.new.repo form .selection.dropdown,
   495    .repository.new.migrate form .selection.dropdown,
   496    .repository.new.fork form .selection.dropdown {
   497      width: 100% !important;
   498    }
   499    .repository.new.repo form .field button,
   500    .repository.new.migrate form .field button,
   501    .repository.new.fork form .field button,
   502    .repository.new.repo form .field a,
   503    .repository.new.migrate form .field a {
   504      margin-bottom: 1em;
   505      width: 100%;
   506    }
   507  }
   508  
   509  @media (min-width: 768px) {
   510    .repository.new.repo .ui.form #auto-init {
   511      margin-left: 265px !important;
   512    }
   513  }
   514  
   515  .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
   516    width: 50% !important;
   517  }
   518  
   519  @media (max-width: 767.98px) {
   520    .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
   521      width: 100% !important;
   522    }
   523  }
   524  
   525  .new.webhook form .help {
   526    margin-left: 25px;
   527  }
   528  
   529  .new.webhook .events.fields .column {
   530    padding-left: 40px;
   531  }
   532  
   533  .githook textarea {
   534    font-family: var(--fonts-monospace);
   535  }
   536  
   537  @media (max-width: 767.98px) {
   538    .new.org .ui.form .field button,
   539    .new.org .ui.form .field a {
   540      margin-bottom: 1em;
   541      width: 100%;
   542    }
   543    .new.org .ui.form .field input {
   544      width: 100% !important;
   545    }
   546  }