API tools faq
paste
Advertisement
draxdeveloper

Untitled

draxdeveloper
Apr 9th, 2024
728
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.25 KB | None | 0 0
raw download clone embed print report
  1. :root{
  2.  
  3.   /* BORDAS >> */
  4.  
  5.   --bordaPadrao: 3px;
  6.   --bordasDuplas: calc(2 * var(--bordaPadrao));
  7.  
  8.   /* BORDAS << */
  9.  
  10.   /* LARGURAS >> */
  11.  
  12.   --larguraLateral: 0vw;
  13.   --larguraAmpla: calc(100vw - var(--bordasDuplas));
  14.   --larguraPrincipal: calc(100vw - var(--larguraLateral) - var(--bordasDuplas));
  15.  
  16.   --larguraCabecalho: var(--larguraAmpla);
  17.   --larguraNav: var(--larguraAmpla);
  18.   --larguraBotaoNav: 10vw;
  19.   --larguraRodape: var(--larguraAmpla);
  20.  
  21.   --larguraFormulario: calc(var(--larguraPrincipal) / 100 * 60);
  22.   --larguraLabel: 12vw;
  23.   --larguraInput: 30vw;
  24.   --larguraBotaoAdd: 1.5vw;
  25.  
  26.   /* LARGURAS << */
  27.  
  28.   /* ALTURAS >> */
  29.  
  30.   --alturaPrincipal: calc(100vh - var(--alturaCabecalho) - var(--alturaNav) - var(--alturaRodape));
  31.  
  32.   --alturaCabecalho: 0vh;
  33.   --alturaNav: 0vh;
  34.   --alturaBotaoNav: var(--alturaNav);
  35.   --alturaRodape: 0vh;
  36.   --alturaLateral: calc(var(--alturaPrincipal) - 1vh);
  37.  
  38.   --alturaTituloFormulario: 0vh;
  39.   --alturaFormulario: calc(var(--alturaPrincipal) - var(--alturaTituloFormulario));
  40.   --alturaBotaoAdd: var(--larguraBotaoAdd);
  41.  
  42.   --alturaInput: 1.5vh;
  43.   --entreInputs: 0.2vh;;
  44.  
  45.   /* ALTURAS << */
  46.  
  47.   /* POSIÇÕES >> */
  48.  
  49.   --cabecalhoVertical: 0;
  50.   --cabecalhoHorizontal: 0;
  51.  
  52.   --navVertical: calc(var(--alturaCabecalho) + var(--bordasDuplas));
  53.   --navHorizontal: 0;
  54.  
  55.   --secaoVertical: calc(var(--alturaCabecalho) + var(--alturaNav) + var(--bordasDuplas));
  56.   --secaoHorizontal: 0;
  57.  
  58.   --rodapeVertical: calc(var(--alturaCabecalho) + var(--alturaNav) + var(--alturaPrincipal) + var(--bordasDuplas));
  59.   --rodapeHorizontal: 0;
  60.  
  61.   --lateralVertical: var(--secaoVertical);
  62.   --lateralHorizontal: calc(var(--larguraPrincipal) + var(--bordasDuplas));
  63.  
  64.   --botaoNavVertical: var(--navVertical);
  65.   --botaoNavHorizontal: 0;
  66.  
  67.   --fomularioVertical: calc(var(--secaoVertical) + var(--alturaTituloFormulario));
  68.   --formularioHorizontal: calc((var(--larguraPrincipal) / 2) - (var(--larguraFormulario) / 2));
  69.  
  70.   /* Posicao horizontal dos botões de navegação, todos têm mesma altura
  71.   o valor  multiplicador é o indice sequêncial começando em 0*/
  72.  
  73.   --cadTerHorizontal: calc(var(--larguraBotaoNav) * 0);
  74.   --acTerHorizontal: calc(var(--larguraBotaoNav) * 1);
  75.   --movCobHorizontal: calc(var(--larguraBotaoNav) * 2);
  76.   --conChaHorizontal: calc(var(--larguraBotaoNav) * 3);
  77.   --conLeGuaHorizontal: calc(var(--larguraBotaoNav) * 4);
  78.   --conLacHorizontal: calc(var(--larguraBotaoNav) * 5);
  79.   --conCorHorizontal: calc(var(--larguraBotaoNav) * 6);
  80.   --conMalHorizontal: calc(var(--larguraBotaoNav) * 7);
  81.   --cadObHorizontal: calc(var(--larguraBotaoNav) * 8);
  82.   --conObHorizontal: calc(var(--larguraBotaoNav) * 9);
  83.  
  84.   /* Posicao horizontal dos botões de navegação, todos têm mesma posição horizontal quando presentes no mesmo formulário.
  85.   o valor  multiplicador é o indice sequêncial representando o input, começando em 1*/
  86.  
  87.   --botaoAddEmpresaCadTerVertical: calc(((2 * 4) * var(--alturaInput)) + (6 * var(--entreInputs)));
  88.   --botaoAddEmpresaCadTerHorizontal: 2vw;
  89.  
  90.   --botaoAddCargoCadTerVertical: calc(((2 * 5) * var(--alturaInput)) + (10 * var(--entreInputs)));
  91.   --botaoAddCargoCadTerHorizontal: var(--botaoAddEmpresaCadTerHorizontal);
  92.  
  93.   --botaoAddTipoConCorVertical: calc(((1 * 1) * var(--alturaInput)) + (2 * var(--entreInputs)));
  94.   --botaoAddTipoConCorHorizontal: 2vw;
  95.  
  96.   --botaoAddAcondicionamentoConCorVertical: calc(((1 * 3) * var(--alturaInput)) + (24 * var(--entreInputs)));
  97.   --botaoAddAcondicionamentoConCorHorizontal: var(--botaoAddTipoConCorHorizontal);
  98.  
  99.   --botaoAddRemetenteConCorVertical: calc(((1 * 4) * var(--alturaInput)) + (34 * var(--entreInputs)));
  100.   --botaoAddRemetenteConCorHorizontal: var(--botaoAddTipoConCorHorizontal);
  101.  
  102.   --botaoAddDestinatarioConCorVertical: calc(((1 * 5) * var(--alturaInput)) + (44 * var(--entreInputs)));
  103.   --botaoAddDestinatarioConCorHorizontal: var(--botaoAddTipoConCorHorizontal);
  104.  
  105.   --botaoAddTipoCadObVertical: calc(((2 * 1) * var(--alturaInput)) + (12 * var(--entreInputs)));
  106.   --botaoAddTipoCadObHorizontal: 2vw;
  107.  
  108.   --botaoPesquisaObjetoVertical: 7vh;
  109.   --botaoPesquisaObjetoHorizontal: 1vw;
  110.  
  111.   /* --botaoLogoutVertical: 88vh;
  112.   --botaoLogoutHorizontal: 83vw; */
  113.  
  114.   --botaoOcorrenciaVertical: 88vh;
  115.   --botaoOcorrenciaHorizontal: 83vw;
  116.  
  117.  
  118.   /* POSIÇÕES << */
  119.  
  120. }
  121.  
  122. * {
  123.  
  124.   position: fixed;
  125.   margin: 0;
  126.   padding: 0;
  127.  
  128. }
  129.  
  130. body {
  131.  
  132.   background-color: #0B6787;
  133.   padding: 1.5rem;
  134.  
  135. }
  136.  
  137. /* GERAIS << */
  138.  
  139. /* DIVS >> */
  140.  
  141. section {
  142.  
  143.   background-color: #0B6787;
  144.  
  145.   /*border-style: ridge;
  146.   border-color: #34515e;
  147.   border-width: var(--bordaPadrao);*/
  148.  
  149.   margin: 0;
  150.  
  151.   padding: 0;
  152.  
  153.   width: var(--larguraPrincipal);
  154.   height: var(--alturaPrincipal);
  155.  
  156.   left: var(--secaoHorizontal);
  157.   top: var(--secaoVertical);
  158.  
  159. }
  160.  
  161. form {
  162.  
  163.   position: absolute;
  164.   overflow:auto;
  165.   height:100%;
  166.   width: 100%;
  167.  
  168. }
  169.  
  170. .divTitulo {
  171.  
  172.   width: calc(var(--larguraFormulario) + var(--bordasDuplas));
  173.   height: var(--alturaTituloFormulario);
  174.   left: 28vw;
  175.  
  176. }
  177.  
  178. #tituloInicial {
  179.  
  180.   margin-top: 8vh;
  181.   margin-left: 15vw;
  182.   margin-bottom: 0vh;
  183.   line-height: 0rem;
  184.  
  185. }
  186.  
  187. .areaFuncional {
  188.  
  189.   background-color: #0B6787;
  190.  
  191.   /*border-style: inset;
  192.   border-color: #34515e;
  193.   border-width: var(--bordaPadrao);*/
  194.  
  195.   padding: 0;
  196.  
  197.   width: var(--larguraFormulario);
  198.   height: var(--alturaFormulario);
  199.  
  200.   left: var(--formularioHorizontal);
  201.   top: var(--fomularioVertical);
  202.  
  203. }
  204.  
  205. /* DIVS << */
  206.  
  207. /* FORM >> */
  208.  
  209. .elementoFormulario {
  210.  
  211.   position:static;
  212.   font-size: 0.8rem;
  213.   border-radius: 3px;
  214.   margin-top: 0.5vh;
  215.  
  216. }
  217.  
  218. label.elementoFormulario {
  219.  
  220.   display: inline-block;
  221.   margin-left: 8.1vw;
  222.   width: var(--larguraLabel);
  223.  
  224.   color: white;
  225.   background-color: #3DABC9;
  226.  
  227.   text-align: center;
  228.  
  229.   font-family: 'Poppins', sans-serif;
  230.   font-weight: 500;
  231.   font-style: normal;
  232.  
  233.   /*border-style: solid;
  234.   border-color: #000000;
  235.   border-width: var(--bordaPadrao);*/
  236.  
  237. }
  238.  
  239. input.elementoFormulario {
  240.  
  241.   display: inline-block;
  242.   margin-left: 0;
  243.   width: var(--larguraInput);
  244.   text-align: left;
  245.  
  246.   font-family: 'Poppins', sans-serif;
  247.   font-weight: 400;
  248.   font-style: normal;
  249.  
  250. }
  251.  
  252. select.elementoFormulario{
  253.  
  254.   display: inline-block;
  255.   margin-left: 0;
  256.   width: var(--larguraInput);
  257.   text-align: left;
  258.  
  259.   font-family: 'Poppins', sans-serif;
  260.   font-weight: 400;
  261.   font-style: normal;
  262.  
  263. }
  264.  
  265. input[type=file].elementoFormulario {
  266.  
  267.   margin-right: 0.3vw;
  268.  
  269. }
  270.  
  271. textarea.elementoFormulario{
  272.  
  273.   margin: var(--entreInputs);
  274.   margin-left: 0;
  275.   width: calc(var(--larguraInput) + 12vw);
  276.   text-align: center;
  277.  
  278.   font-family: 'Poppins', sans-serif;
  279.   font-weight: 400;
  280.   font-style: normal;
  281.  
  282. }
  283.  
  284. #finalizarConfirmaT1 , #finalizarConfirmaT2 {
  285.  
  286.   width: calc(var(--larguraInput) - 28vw);
  287.   margin-left: calc(var(--larguraLabel) + 18vw);
  288.  
  289. }
  290.  
  291.  
  292. #funcoesEquipamentoPropio {
  293.  
  294.   vertical-align: middle;
  295.  
  296.   margin-left: 0;
  297.   width: var(--larguraInput);
  298.   text-align: left;
  299.  
  300.   font-family: 'Poppins', sans-serif;
  301.   font-weight: 400;
  302.   font-style: normal;
  303.  
  304. }
  305.  
  306. #funcoesAdicionadas {
  307.  
  308.   vertical-align: middle;
  309.  
  310.   margin-left: 0;
  311.   width: var(--larguraInput);
  312.   text-align: left;
  313.  
  314.   font-family: 'Poppins', sans-serif;
  315.   font-weight: 400;
  316.   font-style: normal;
  317.  
  318. }
  319.  
  320. #funcoesSoftwares {
  321.  
  322.   vertical-align: middle;
  323.  
  324.   margin-left: 0;
  325.   width: var(--larguraInput);
  326.   text-align: left;
  327.  
  328.   font-family: 'Poppins', sans-serif;
  329.   font-weight: 400;
  330.   font-style: normal;
  331.  
  332. }
  333.  
  334. #funcoesEquipamentoPropioLabel {
  335.  
  336.   margin-left: 8.1vw;
  337.  
  338.   padding-top: 1vh;
  339.   padding-bottom: 1vh;
  340.  
  341.   vertical-align: middle;
  342.  
  343.   word-wrap: break-word;
  344.  
  345.   display: inline-block;
  346.  
  347.   width: var(--larguraLabel);
  348.  
  349.   background-color: #3DABC9;
  350.  
  351.   text-align: center;
  352.  
  353.   font-family: 'Poppins', sans-serif;
  354.   font-weight: 400;
  355.   font-style: normal;
  356.  
  357. }
  358.  
  359. #funcoesAdicionadasLabel {
  360.  
  361.   margin-left: 8.1vw;
  362.  
  363.   padding-top: 1vh;
  364.   padding-bottom: 1vh;
  365.  
  366.   vertical-align: middle;
  367.  
  368.   word-wrap: break-word;
  369.  
  370.   display: inline-block;
  371.  
  372.   width: var(--larguraLabel);
  373.  
  374.   background-color: #3DABC9;
  375.  
  376.   text-align: center;
  377.  
  378.   font-family: 'Poppins', sans-serif;
  379.   font-weight: 400;
  380.   font-style: normal;
  381. }
  382.  
  383. #funcoesSoftwaresLabel {
  384.  
  385.   margin-left: 8.1vw;
  386.  
  387.   padding-top: 1vh;
  388.   padding-bottom: 1vh;
  389.  
  390.   vertical-align: middle;
  391.  
  392.   word-wrap: break-word;
  393.  
  394.   display: inline-block;
  395.  
  396.   width: var(--larguraLabel);
  397.  
  398.   background-color: #3DABC9;
  399.  
  400.   text-align: center;
  401.  
  402.   font-family: 'Poppins', sans-serif;
  403.   font-weight: 400;
  404.   font-style: normal;
  405.  
  406. }
  407.  
  408. .button {
  409.  
  410.   text-align: center;
  411.  
  412.   font-family: 'Poppins', sans-serif;
  413.   font-weight: 700;
  414.   font-style: normal;
  415.  
  416.   padding: 0.5vw 0.5vh;
  417.   text-align: center;
  418.   cursor: pointer;
  419.   outline: none;
  420.   color: #0B6787;
  421.   background-color: white;
  422.   border: none;
  423.   border-radius: 0.5vw;
  424.   box-shadow: 0 0.8vh #3DABC9;
  425.  
  426. }
  427.  
  428. .button:hover {background-color: #A9A9A9}
  429.  
  430. .button:active {
  431.   background-color: white;
  432.   box-shadow: 0 3px #3DABC9;
  433.   transform: translateY(4px);
  434. }
  435.  
  436. input:read-only {
  437.  
  438.   background-color: gray;
  439.  
  440. }
  441.  
  442. textarea:read-only {
  443.  
  444.   background-color: gray;
  445.  
  446. }
  447.  
  448. input:not(:focus):not(:placeholder-shown):invalid {
  449.  
  450.   /* background-color: #D34F6C; */
  451.  
  452. }
  453.  
  454. textarea:not(:focus):not(:placeholder-shown):invalid {
  455.  
  456.   /* background-color: #D34F6C; */
  457.  
  458. }
  459.  
  460. .botaoSalvar {
  461.  
  462.   display: inline-block;
  463.   margin-left: 71%;
  464.   margin-top: 3%;
  465.  
  466. }
  467.  
  468. .botaoFormAnterior {
  469.  
  470.   display: inline-block;
  471.   margin-left: 65%;
  472.   margin-top: 3%;
  473.  
  474. }
  475.  
  476. .botaoFormProximo {
  477.  
  478.   display: inline-block;
  479.   margin-left: 3%;
  480.   margin-top: 3%;
  481.  
  482. }
  483.  
  484. .botaoFormProximoIsolado {
  485.  
  486.   display: inline-block;
  487.   margin-left: 76%;
  488.   margin-top: 5%;
  489.  
  490. }
  491.  
  492. .botaoFormEspecial {
  493.  
  494.   position: absolute;
  495.  
  496. }
  497.  
  498. /* FORM << */
  499.  
  500. /* TEXTOS >> */
  501.  
  502. /* Padrão liquido https://www.smashingmagazine.com/2016/05/fluid-typography/ */
  503.  
  504. /* Older browsers */
  505. html { font-size: 5px; }
  506.  
  507. /* Modern browsers only need this one */
  508.  
  509. @media screen and (min-width: 25em){
  510.   html { font-size: calc( 5px + (24 - 5) * (100vw - 320px) / (1920 - 320)) ); }
  511. }
  512.  
  513. /* Safari <8 and IE <11 */
  514. @media screen and (min-width: 25em){
  515.   html { font-size: calc( 5px + (24 - 5) * (100vw - 320px) / (1920 - 320) ); }
  516. }
  517. @media screen and (min-width: 50em){
  518.  
  519. html { font-size: calc( 5px + (24 - 5) * (100vw - 320px) / (1920 - 320) ); }
  520. }
  521.  
  522. /* Padrão liquido https://www.smashingmagazine.com/2016/05/fluid-typography/ */
  523.  
  524. h1 {
  525.  
  526.   font-family: 'Poppins', sans-serif;
  527.   color: black;
  528.   /*text-align: center;*/
  529.   left: 25vw;
  530.   font-size: 1rem;
  531.  
  532.   line-height: 2rem;
  533.   margin-top: calc((1.5rem - 2rem) + 1.5rem);
  534.   margin-bottom: 1.5rem;
  535.  
  536. }
  537.  
  538. h2 {
  539.  
  540.   position:static;
  541.  
  542.   font-family: 'Poppins', sans-serif;
  543.   font-weight: 400;
  544.   font-style: normal;
  545.   font-size: 1.5rem;
  546.  
  547.   color: white;
  548.  
  549.   color: white;
  550.   margin-left: 8vw;
  551.   margin-bottom: 2vh;
  552.  
  553.   line-height: 2rem;
  554.  
  555. }
  556.  
  557. h3 {
  558.  
  559.   position:static;
  560.  
  561.   font-family: 'Poppins', sans-serif;
  562.   font-weight: 400;
  563.   font-style: normal;
  564.   font-size: 1rem;
  565.  
  566.   color: white;
  567.   /*text-align: center;*/
  568.   /*left: 25vw;*/
  569.  
  570.   line-height: 2rem;
  571.  
  572.   margin-top: calc((1.5rem - 2rem) + 1.5rem);
  573.   margin-bottom: 1.5rem;
  574.  
  575. }
  576.  
  577. h4 {
  578.  
  579.   position:static;
  580.  
  581.   font-family: 'Poppins', sans-serif;
  582.   font-weight: 400;
  583.   font-style: normal;
  584.   font-size: 1.2rem;
  585.  
  586.   color: white;
  587.   margin-left: 8vw;
  588.  
  589.  
  590.   line-height: 2rem;
  591.  
  592. }
  593.  
  594. p {
  595.  
  596.   font-family: 'Poppins', sans-serif;
  597.   font-weight: 400;
  598.   font-style: normal;
  599.   font-size: 0.8rem;
  600.  
  601.   color: white;
  602.  
  603.   line-height: 0.8rem;
  604.   margin-bottom: 0.8rem;
  605.  
  606. }
  607.  
  608. .erro {
  609.  
  610.   font-family: 'Poppins', sans-serif;
  611.   font-weight: 400;
  612.   font-style: normal;
  613.   font-size: 0.6rem;
  614.  
  615.   margin-left: 8vw;
  616.   color: #f1807e;
  617.  
  618.   line-height: 0.6rem;
  619.   margin-bottom: 0.5rem;
  620.  
  621. }
  622.  
  623. .descricao {
  624.  
  625.   font-family: 'Poppins', sans-serif;
  626.   font-weight: 400;
  627.   font-style: normal;
  628.   font-size: 0.5rem;
  629.  
  630.   margin-left: 4vw;
  631.   color: white;
  632.  
  633.   line-height: 0.5rem;
  634.   margin-bottom: 0
  635.  
  636. }
  637.  
  638. #tituloInicio {
  639.  
  640.   font-family: 'Poppins', sans-serif;
  641.   color: white;
  642.   /*text-align: center;*/
  643.   left: 37vw;
  644.   font-size: 1rem;
  645.  
  646. }
  647.  
  648. #proximoInicio {
  649.  
  650.   position:static;
  651.   margin-left: 20vw;
  652.   margin-top: 40vh;
  653.   width: 15vw;
  654.   font-size: 1rem;
  655.  
  656. }
  657.  
  658. /* TEXTOS << */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!