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