API tools faq
paste
oscarviedma

Código CSS Formulario Registro - RE

oscarviedma
Apr 3rd, 2026
268
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.01 KB | None | 0 0
raw download clone embed print report
  1. /* ═══════════════════════════════════════════════
  2.    REGISTRO DE EVENTO — CSS
  3. ═══════════════════════════════════════════════ */
  4.  
  5. /* ── TIPOGRAFÍA (edita aquí para cambiar fuentes) ── */
  6. :root {
  7.   --ov-re-font-body:    'DM Sans', sans-serif;
  8.   --ov-re-font-display: 'DM Serif Display', serif;
  9. }
  10.  
  11. /* ── VARIABLES DE COLOR Y DISEÑO ── */
  12. .ov-re-spots-bar,
  13. .ov-re-form-zone,
  14. .ov-re-preloader {
  15.   --ov-re-ink:          #0f0e0d;
  16.   --ov-re-ink-soft:     #4a4744;
  17.   --ov-re-ink-muted:    #8a8581;
  18.   --ov-re-cream:        #f7f4ef;
  19.   --ov-re-cream-dark:   #edeae3;
  20.   --ov-re-accent:       #D42A2A;
  21.   --ov-re-accent-light: #f0c4b4;
  22.   --ov-re-white:        #ffffff;
  23.   --ov-re-border:       rgba(15,14,13,0.12);
  24.   --ov-re-radius:       14px;
  25. }
  26.  
  27. /* ── DOT ANIMADO ── */
  28. .ov-re-dot {
  29.   display: inline-block;
  30.   width: 6px;
  31.   height: 6px;
  32.   border-radius: 50%;
  33.   background: #D42A2A;
  34.   animation: ovRePulse 2s ease infinite;
  35.   vertical-align: middle;
  36.   margin-right: 6px;
  37. }
  38.  
  39. @keyframes ovRePulse {
  40.   0%, 100% { opacity: 1; transform: scale(1); }
  41.   50%       { opacity: 0.5; transform: scale(0.7); }
  42. }
  43.  
  44. /* ── PRECARGADOR ── */
  45. .ov-re-preloader {
  46.   display: flex;
  47.   flex-direction: column;
  48.   align-items: center;
  49.   justify-content: center;
  50.   gap: 14px;
  51.   padding: 4rem 0;
  52.   font-family: var(--ov-re-font-body);
  53.   font-size: 15px;
  54.   color: var(--ov-re-ink-muted);
  55.   text-align: center;
  56. }
  57.  
  58. .ov-re-preloader-spinner {
  59.   width: 36px;
  60.   height: 36px;
  61.   border: 3px solid var(--ov-re-cream-dark);
  62.   border-top-color: var(--ov-re-accent);
  63.   border-radius: 50%;
  64.   animation: ovReSpin 0.7s linear infinite;
  65.   flex-shrink: 0;
  66. }
  67.  
  68. .ov-re-preloader.ov-re-oculto {
  69.   display: none;
  70. }
  71.  
  72. /* ── BARRA DE CUPOS ── */
  73. .ov-re-spots-bar {
  74.   margin-bottom: 2rem;
  75. }
  76.  
  77. .ov-re-spots-label {
  78.   display: flex;
  79.   justify-content: space-between;
  80.   font-family: var(--ov-re-font-body);
  81.   font-size: 13px;
  82.   color: var(--ov-re-ink-soft);
  83.   margin-bottom: 8px;
  84. }
  85.  
  86. .ov-re-spots-label strong {
  87.   color: var(--ov-re-accent);
  88.   font-weight: 500;
  89. }
  90.  
  91. .ov-re-bar-track {
  92.   height: 5px;
  93.   background: rgba(255, 255, 255, 0.1);
  94.   border-radius: 3px;
  95.   overflow: hidden;
  96. }
  97.  
  98. .ov-re-bar-fill {
  99.   height: 100%;
  100.   background: var(--ov-re-accent);
  101.   border-radius: 3px;
  102.   width: 0;
  103.   transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  104. }
  105.  
  106. /* ── ZONA DEL FORMULARIO ── */
  107. .ov-re-form-zone {
  108.   font-family: var(--ov-re-font-body);
  109.   color: var(--ov-re-ink);
  110. }
  111.  
  112. /* ── ENCABEZADO ── */
  113. .ov-re-form-header {
  114.   margin-bottom: 1.75rem;
  115.   animation: ovReFadeUp 0.5s ease both;
  116. }
  117.  
  118. .ov-re-form-header h2 {
  119.   font-family: var(--ov-re-font-display);
  120.   font-size: 1.8rem;
  121.   margin-bottom: 0.35rem;
  122.   color: var(--ov-re-ink);
  123. }
  124.  
  125. .ov-re-form-header p {
  126.   font-size: 14px;
  127.   color: var(--ov-re-ink-soft);
  128.   line-height: 1.6;
  129.   margin: 0;
  130. }
  131.  
  132. /* ── FORMULARIO ── */
  133. .ov-re-form {
  134.   display: flex;
  135.   flex-direction: column;
  136.   gap: 1rem;
  137.   animation: ovReFadeUp 0.5s 0.1s ease both;
  138. }
  139.  
  140. /* ── CAMPO ── */
  141. .ov-re-field {
  142.   display: flex;
  143.   flex-direction: column;
  144.   gap: 6px;
  145.   margin-bottom: 16px;
  146. }
  147.  
  148. .ov-re-field label {
  149.   font-size: 11px;
  150.   font-weight: 600;
  151.   color: var(--ov-re-ink-soft);
  152.   text-transform: uppercase;
  153.   letter-spacing: 0.07em;
  154.   font-family: var(--ov-re-font-body);
  155. }
  156.  
  157. .ov-re-field input,
  158. .ov-re-field select,
  159. .ov-re-field textarea {
  160.   font-family: var(--ov-re-font-body);
  161.   font-size: 15px;
  162.   color: var(--ov-re-ink);
  163.   background: var(--ov-re-white);
  164.   border: 1.5px solid var(--ov-re-border);
  165.   border-radius: var(--ov-re-radius);
  166.   padding: 13px 16px;
  167.   outline: none;
  168.   transition: border-color 0.2s, box-shadow 0.2s;
  169.   appearance: none;
  170.   -webkit-appearance: none;
  171.   width: 100%;
  172.   box-sizing: border-box;
  173.   margin-bottom: 0;
  174. }
  175.  
  176. /* ── SELECT WRAPPER + ÍCONO ETmodules (flecha abajo) ── */
  177. .ov-re-field-select-wrap {
  178.   position: relative;
  179. }
  180.  
  181. .ov-re-field-select-wrap::after {
  182.   content: '\33';
  183.   font-family: 'ETmodules';
  184.   font-size: 18px;
  185.   color: var(--ov-re-ink-muted);
  186.   position: absolute;
  187.   right: 14px;
  188.   top: 50%;
  189.   transform: translateY(-50%);
  190.   pointer-events: none;
  191.   line-height: 1;
  192. }
  193.  
  194. .ov-re-field select {
  195.   background-color: var(--ov-re-white);
  196.   background-image: none;
  197.   padding-right: 42px;
  198.   cursor: pointer;
  199.   width: 100%;
  200. }
  201.  
  202. .ov-re-field textarea {
  203.   resize: vertical;
  204.   min-height: 100px;
  205. }
  206.  
  207. .ov-re-field input:focus,
  208. .ov-re-field select:focus,
  209. .ov-re-field textarea:focus {
  210.   border-color: var(--ov-re-accent);
  211.   box-shadow: 0 0 0 4px rgba(212,82,42,0.1);
  212. }
  213.  
  214. .ov-re-field input::placeholder,
  215. .ov-re-field textarea::placeholder {
  216.   color: var(--ov-re-ink-muted);
  217. }
  218.  
  219. .ov-re-field input.ov-re-error,
  220. .ov-re-field select.ov-re-error,
  221. .ov-re-field textarea.ov-re-error {
  222.   border-color: #c0392b;
  223. }
  224.  
  225. /* ── MENSAJES DE ERROR ── */
  226. .ov-re-field-error {
  227.   font-size: 11px;
  228.   color: #c0392b;
  229.   display: none;
  230.   font-family: var(--ov-re-font-body);
  231. }
  232.  
  233. .ov-re-field-error.ov-re-show {
  234.   display: block;
  235. }
  236.  
  237. /* ── CHECKBOX ── */
  238. .ov-re-check-group {
  239.   display: flex;
  240.   align-items: flex-start;
  241.   gap: 10px;
  242.   margin-top: 4px;
  243. }
  244.  
  245. .ov-re-check-group input[type="checkbox"] {
  246.   width: 18px;
  247.   height: 18px;
  248.   min-width: 18px;
  249.   accent-color: var(--ov-re-accent);
  250.   margin-top: 2px;
  251.   cursor: pointer;
  252. }
  253.  
  254. .ov-re-check-group span {
  255.   font-size: 13px;
  256.   color: var(--ov-re-ink-soft);
  257.   line-height: 1.5;
  258.   font-family: var(--ov-re-font-body);
  259. }
  260.  
  261. /* ── BOTÓN SUBMIT ── */
  262. .ov-re-btn-submit {
  263.   font-family: var(--ov-re-font-body);
  264.   font-size: 15px;
  265.   font-weight: 500;
  266.   color: var(--ov-re-white);
  267.   background: var(--ov-re-ink);
  268.   border: none;
  269.   border-radius: var(--ov-re-radius);
  270.   padding: 15px 28px;
  271.   cursor: pointer;
  272.   display: flex;
  273.   align-items: center;
  274.   justify-content: center;
  275.   gap: 10px;
  276.   transition: background 0.2s, transform 0.15s;
  277.   margin-top: 0.5rem;
  278.   width: 100%;
  279. }
  280.  
  281. .ov-re-btn-submit:hover  { background: var(--ov-re-accent); }
  282. .ov-re-btn-submit:active { transform: scale(0.98); }
  283. .ov-re-btn-submit:disabled {
  284.   background: var(--ov-re-ink-muted);
  285.   cursor: not-allowed;
  286.   transform: none;
  287. }
  288.  
  289. .ov-re-btn-arrow {
  290.   width: 20px;
  291.   height: 20px;
  292.   background: rgba(255,255,255,0.2);
  293.   border-radius: 50%;
  294.   display: flex;
  295.   align-items: center;
  296.   justify-content: center;
  297.   font-size: 12px;
  298.   transition: transform 0.2s;
  299. }
  300.  
  301. .ov-re-btn-submit:hover .ov-re-btn-arrow {
  302.   transform: translateX(3px);
  303. }
  304.  
  305. /* ── SPINNER SUBMIT ── */
  306. .ov-re-spinner {
  307.   width: 18px;
  308.   height: 18px;
  309.   border: 2px solid rgba(255,255,255,0.3);
  310.   border-top-color: #fff;
  311.   border-radius: 50%;
  312.   animation: ovReSpin 0.7s linear infinite;
  313.   display: none;
  314. }
  315.  
  316. @keyframes ovReSpin {
  317.   to { transform: rotate(360deg); }
  318. }
  319.  
  320. /* ── ESTADOS ── */
  321. .ov-re-estado {
  322.   display: none;
  323.   flex-direction: column;
  324.   align-items: flex-start;
  325.   gap: 1rem;
  326.   animation: ovReFadeUp 0.5s ease both;
  327. }
  328.  
  329. .ov-re-estado.ov-re-visible {
  330.   display: flex;
  331. }
  332.  
  333. .ov-re-estado-icon {
  334.   width: 56px;
  335.   height: 56px;
  336.   border-radius: 14px;
  337.   display: flex;
  338.   align-items: center;
  339.   justify-content: center;
  340.   font-size: 26px;
  341. }
  342.  
  343. .ov-re-estado-success .ov-re-estado-icon { background: #e8f5e9; }
  344. .ov-re-estado-error   .ov-re-estado-icon { background: #fdecea; }
  345. .ov-re-estado-full    .ov-re-estado-icon { background: #fff8e1; }
  346.  
  347. .ov-re-estado h3 {
  348.   font-family: var(--ov-re-font-display);
  349.   font-size: 1.5rem;
  350.   color: var(--ov-re-ink);
  351.   margin: 0;
  352. }
  353.  
  354. .ov-re-estado p {
  355.   font-size: 14px;
  356.   color: var(--ov-re-ink-soft);
  357.   line-height: 1.6;
  358.   margin: 0;
  359.   font-family: var(--ov-re-font-body);
  360. }
  361.  
  362. .ov-re-estado-detail {
  363.   background: var(--ov-re-cream-dark);
  364.   border-radius: var(--ov-re-radius);
  365.   padding: 1rem 1.25rem;
  366.   font-size: 13px;
  367.   color: var(--ov-re-ink-soft);
  368.   line-height: 1.8;
  369.   width: 100%;
  370.   box-sizing: border-box;
  371.   font-family: var(--ov-re-font-body);
  372. }
  373.  
  374. .ov-re-estado-detail strong {
  375.   color: var(--ov-re-ink);
  376.   font-weight: 500;
  377. }
  378.  
  379. /* ── BOTÓN VOLVER ── */
  380. .ov-re-btn-back {
  381.   font-family: var(--ov-re-font-body);
  382.   font-size: 13px;
  383.   color: var(--ov-re-ink-soft);
  384.   background: none;
  385.   border: 1.5px solid var(--ov-re-border);
  386.   border-radius: var(--ov-re-radius);
  387.   padding: 10px 20px;
  388.   cursor: pointer;
  389.   transition: border-color 0.2s, color 0.2s;
  390. }
  391.  
  392. .ov-re-btn-back:hover {
  393.   border-color: var(--ov-re-ink);
  394.   color: var(--ov-re-ink);
  395. }
  396.  
  397. /* ── ANIMACIONES ── */
  398. @keyframes ovReFadeUp {
  399.   from { opacity: 0; transform: translateY(14px); }
  400.   to   { opacity: 1; transform: translateY(0); }
  401. }
  402.  
  403. /* ── RESPONSIVE ── */
  404. @media (max-width: 600px) {
  405.   .ov-re-form-zone {
  406.     max-width: 100%;
  407.   }
  408.   .ov-re-form-header h2 {
  409.     font-size: 1.5rem;
  410.   }
  411. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!