API tools faq
paste
Advertisement
NecromancerCoding

No Mires: The Return of the King (CSS)

NecromancerCoding
Sep 19th, 2024 (edited)
273
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.49 KB | None | 0 0
raw download clone embed print report
  1. /* NO MIRES THE RETURN OF THE KING */
  2.  
  3. /*VARIABLES*/
  4.  
  5. :root:has(.nomires), :root:has(.nomires) *, :root:has(.nomires) *::before, :root:has(.nomires) *::after {
  6.   /* ACENTOS Y TEXTO */
  7.   --accent1:#395a5a;
  8.   --accent2:#2f4d4d;
  9.   --links1:#bbb;
  10.   --links2:#2f4d4d;
  11.   --text:#999;
  12.   --subtitle:#ccc;
  13.   --title:#395a5a;
  14.   /* FONDOS */
  15.   --bckg:url('https://i.imgur.com/K6ha5m1.png');
  16.   --bckg-color:#2f2f2f;
  17.   --bckg-blend:multiply;
  18.   --dbckg0:#111111bf;
  19.   /* BORDES */
  20.   --border1:1px solid var(--border1-c);
  21.   --border2:1px solid var(--border2-c);
  22.   --border3:16px solid var(--border3-c);
  23.   --border1-c:#161616;
  24.   --border2-c:#1c1c1c;
  25.   --border3-c:#0a0a0a80;
  26.   /* FUENTES */
  27.   --f-titles:'Archivo Black', sans-serif;
  28.   --f-body:'Open Sans', sans-serif;
  29.   --f-mono:'Space Mono', monospace;
  30.   /* TAMAÑOS DE TEXTO */
  31.   --fs-big:3rem;
  32.   --fs-body:14px;
  33.   --fs-tiny:.7rem;
  34.   /* EFECTOS */
  35.   --effect1:var(--accent2);
  36.   --effect1-blend:multiply;
  37.   --effect2:#000;
  38.   --effect2-blend:color;
  39.   --blur:blur(10px);
  40. }
  41.  
  42. /*ESTILO; edita solo si sabes lo que haces*/
  43.  
  44. body#phpbb:has(a.mainmenu[href^="/register"]) {
  45.   overflow:hidden;
  46. }
  47.  
  48. :where(html,body#phpbb):has(a.mainmenu[href^="/register"]), .nomires, html:has(.nomires) {
  49.   font:var(--fs-body) var(--f-body);
  50.   color:var(--text);
  51. }
  52.  
  53. body#phpbb.nomires {
  54.   background-image:var(--bckg);
  55.   background-color:var(--bckg-color);
  56.   background-position:center;
  57.   background-size: cover;
  58.   background-blend-mode:var(--bckg-blend);
  59.   background-attachment: fixed;
  60.   background-repeat: no-repeat;
  61.   height:100dvh;
  62.   overflow:hidden;
  63.   display:grid;
  64.   grid-template-columns:1fr;
  65.   place-content:center;
  66.   padding:0!important;
  67.   & a {
  68.     color:var(--links1);
  69.     &:hover {
  70.       color:var(--links2);
  71.     }
  72.   }
  73. }
  74.  
  75. #nomires {
  76.   margin-inline:auto;
  77.   width:clamp(30rem, 60%, 60rem);
  78.   background:var(--dbckg0);
  79.   backdrop-filter:var(--blur);
  80.   background-clip:padding-box;
  81.   border:var(--border3);
  82.   outline:var(--border2);
  83.   aspect-ratio:5/2.5;
  84.   max-height:65dvh;
  85.   gap:1px;
  86.   display:grid;
  87.   grid-template-columns:1fr 1.25fr;
  88.   grid-template-rows:min-content min-content 1fr min-content;
  89.   grid-template-areas:
  90.     'links links'
  91.     'img title'
  92.     'img text'
  93.     'form form';
  94.   & > div {
  95.     outline:var(--border1);
  96.   }
  97.   & > .nm-img {
  98.     grid-area:img;
  99.     position:relative;
  100.     &::before, &::after {
  101.       content:'';
  102.       position:absolute;
  103.       inset:0;
  104.     }
  105.     &::before {
  106.       background:var(--effect1);
  107.       mix-blend-mode:var(--effect1-blend);
  108.       z-index:-1;
  109.     }
  110.     &::after {
  111.       background:var(--effect2);
  112.       mix-blend-mode:var(--effect2-blend);
  113.       z-index:-2;
  114.     }
  115.     & img {
  116.       width:100%;
  117.       height:100%;
  118.       position:relative;
  119.       z-index:-3;
  120.       object-position:center;
  121.       object-fit:cover;
  122.     }
  123.   }
  124.   & > .nm-title {
  125.     grid-area:title;
  126.     border-bottom:var(--border1);
  127.     display:flex;
  128.     flex-direction:column;
  129.     align-items:center;
  130.     justify-content:center;
  131.     padding:3rem;
  132.     text-align:center;
  133.     & b {
  134.       font: var(--fs-big) var(--f-titles);
  135.       text-transform:uppercase;
  136.       line-height:1em;
  137.       color:var(--title);
  138.     }
  139.     & i {
  140.       font:var(--fs-tiny) var(--f-mono);
  141.       text-transform:uppercase;
  142.       line-height:1em;
  143.       color:var(--subtitle);
  144.       max-width:60%;
  145.       margin-inline:auto;
  146.       text-align:justify;
  147.       text-align-last:center;
  148.     }
  149.   }
  150.   & > .nm-text {
  151.     grid-area:text;
  152.     font-size:.9em;
  153.     line-height:1.3em;
  154.     text-align:justify;
  155.     border:2em solid transparent;
  156.     border-right-width:1rem;
  157.     padding-right:1rem;
  158.     overflow:auto;
  159.     &::-webkit-scrollbar { width:2px; }
  160.     &::-webkit-scrollbar-thumb { background:var(--accent2); }
  161.   }
  162.   & > .nm-links {
  163.     grid-area:links;
  164.     gap:1px;
  165.     display:flex;
  166.     justify-content:center;
  167.     align-items:stretch;
  168.     & > a {
  169.       outline:var(--border1);
  170.       display:flex;
  171.       justify-content:center;
  172.       align-items:center;
  173.       padding:2em;
  174.       width:100%;
  175.       font:700 var(--fs-tiny) var(--f-mono);
  176.       text-transform:uppercase;
  177.     }
  178.   }
  179.   & > .nm-form {
  180.     grid-area:form;
  181.     & form {
  182.       display:flex;
  183.       justify-content:center;
  184.       align-items:stretch;
  185.       height:3rem;
  186.       gap:1px;
  187.       overflow:hidden;
  188.       & > span {
  189.         display:flex;
  190.         justify-content:center;
  191.         align-items:stretch;
  192.         outline:var(--border1);
  193.         flex-grow:1;
  194.         & > i {
  195.           width:3rem;
  196.           flex-shrink:0;
  197.           border-right:var(--border1);
  198.           align-content:center;
  199.           text-align:center;
  200.           color:var(--accent1);
  201.         }
  202.         & input {
  203.           flex-grow:1;
  204.           background:none;
  205.           outline:none;
  206.           border:0;
  207.           min-width:0;
  208.           width:0!important;
  209.           color:var(--text);
  210.           padding:0 1em;
  211.           font-size:.8em;
  212.           &:-internal-autofill-selected {
  213.             background-clip:text;
  214.             color:transparent;
  215.             -webkit-text-fill-color:var(--subtitle);
  216.             font-style:italic;
  217.           }
  218.         }
  219.       }
  220.       & > a {
  221.         width:2rem;
  222.         flex-shrink:0;
  223.         border-right:var(--border1);
  224.         align-content:center;
  225.         text-align:center;
  226.       }
  227.       & > label, & > input.button1 {
  228.         background:none;
  229.         padding:0 2em;
  230.         border:0;
  231.         outline:0;
  232.         place-content:center;
  233.         font:700 var(--fs-tiny) var(--f-mono);
  234.         text-transform:uppercase;
  235.         flex-shrink:0;
  236.         color:var(--text);
  237.         cursor:pointer;
  238.         &:is(.button1) {
  239.           color:var(--links1);
  240.           border-left:var(--border1);
  241.           font:700 calc(var(--fs-tiny) + .025rem) var(--f-mono);
  242.           &:hover { color:var(--links2); }
  243.         }
  244.         & [type="checkbox"] {
  245.           display:none;
  246.         }
  247.         &:has(*:checked) {
  248.           color:var(--accent1);
  249.         }
  250.       }
  251.     }
  252.   }
  253. }
  254.  
  255. .nomires :where(.sd-cmp-2jVB1, .sd-cmp-1wlYk) {
  256.   display: none;
  257. }
  258.  
  259. /*REGISTRO, PUEDES BORRAR HASTA EL SIGUIENTE COMENTARIO SI NO TE HACE FALTA*/
  260. .nomires-registro {
  261.   & #nomiresSafe {
  262.     margin-inline:auto;
  263.     width:clamp(30rem, 60%, 60rem);
  264.     background:var(--dbckg0);
  265.     backdrop-filter:var(--blur);
  266.     background-clip:padding-box;
  267.     border:var(--border3);
  268.     outline:var(--border2);
  269.     aspect-ratio:5/2.5;
  270.     max-height:65dvh;
  271.     overflow:auto;
  272.     &::-webkit-scrollbar {
  273.       width:12px;
  274.       background:var(--dbckg0);
  275.       border-left:var(--border1);
  276.     }
  277.     &::-webkit-scrollbar-thumb {
  278.       border:5px solid transparent;
  279.       background-clip:padding-box;
  280.       background-color:var(--accent2);
  281.     }
  282.     @supports (-moz-background-clip) {
  283.       scrollbar-width:thin;
  284.       scrollbar-color:var(--accent2) var(--dbckg0);
  285.     }
  286.   }
  287.   & span:is(.corners-top, .corners-bottom) {
  288.     display:none;
  289.   }
  290.   & .panel {
  291.     background:none;
  292.     padding:20px;
  293.     margin:0;
  294.     border:0;
  295.     color:inherit;
  296.     & p { font-size:var(--fs-body); }
  297.     &:has(h2.u) p {
  298.       text-align:justify;
  299.     }
  300.     &+&:has(.cgu-buttons) {
  301.       padding:0;
  302.       border-top:var(--border1);
  303.       & p { margin:0; }
  304.       & .cgu-buttons {
  305.         width:100%!important;
  306.         height:100%;
  307.         padding:2em;
  308.         font:700 var(--fs-tiny) var(--f-mono);
  309.         text-transform:uppercase;
  310.         background:none;
  311.         border:0;
  312.         outline:0;
  313.         color:var(--links1);
  314.         &:hover {
  315.           color:var(--links2);
  316.         }
  317.       }
  318.     }
  319.   }
  320.   & h2.u {
  321.     margin:-20px -20px 20px;
  322.     border-bottom:var(--border1);
  323.     padding:20px;
  324.     text-align:center;
  325.     font:var(--fs-big) var(--f-titles);
  326.     text-transform:uppercase;
  327.     color:var(--accent1);
  328.   }
  329.   & span[style="color:red"] {
  330.     color:var(--subtitle)!important;
  331.     border:var(--border1);
  332.     display:block;
  333.     background:var(--dbckg0);
  334.     padding:15px;
  335.     text-align-last:center;
  336.     font:var(--fs-tiny) var(--f-mono);
  337.     text-transform:uppercase;
  338.     margin-top:-1rem;
  339.   }
  340.   & div[align="center"] div[align="justify"] {
  341.     display:grid!important;
  342.     grid-template-columns: 1fr 1fr;
  343.     text-align:center;
  344.     place-content:center;
  345.     font:700 var(--fs-tiny) var(--f-mono);
  346.     text-transform:uppercase;
  347.     & p, & label {
  348.       text-align:center;
  349.       font:700 var(--fs-tiny) var(--f-mono);
  350.       cursor:pointer;
  351.     }
  352.   }
  353.  
  354.   & #cp-main, & form#form_confirm {
  355.     margin:0;
  356.     float:none;
  357.     width:100%;
  358.     & .panel {
  359.       padding:0;
  360.       background:none;
  361.       font-size:var(--fs-body);
  362.       & label, & dt {
  363.         color:var(--subtitle);
  364.         font-size:var(--fs-body);
  365.         color:var(--subtitle);
  366.         font-weight:700;
  367.         & * {
  368.           color:inherit!important;
  369.         }
  370.       }
  371.       & input, & .inputbox, & select {
  372.         background:var(--dbckg0);
  373.         border:var(--border1);
  374.         color:var(--text);
  375.         font:var(--fs-body) var(--f-body);
  376.         padding:.5em;
  377.         &:-internal-autofill-selected {
  378.           background-clip:text;
  379.           -webkit-text-fill-color:var(--subtitle);
  380.         }
  381.         &[type="radio"], &[type="checkbox"] {
  382.           filter:invert(1) brightness(30%) contrast(.8);
  383.           &:checked {
  384.             accent-color:var(--accent1);
  385.             filter:invert(1) hue-rotate(180deg) brightness(.6) contrast(1.5);
  386.           }
  387.         }
  388.       }
  389.     }
  390.     & .button1, & .button2 {
  391.       background:var(--dbckg0);
  392.       color:var(--links1);
  393.       font:700 var(--fs-tiny) var(--f-mono);
  394.       text-transform:uppercase;
  395.       padding:1em 2em;
  396.       border:var(--border1);
  397.       &:hover {
  398.         color:var(--links2);
  399.       }
  400.     }
  401.   }
  402.   & h1.page-title {
  403.     margin:0;
  404.     border:0;
  405.     font:calc(var(--fs-big) * .8) var(--f-titles);
  406.     text-align:center;
  407.     color:var(--accent1)!important;
  408.     text-transform:uppercase;
  409.   }
  410.  
  411. }
  412. /*REGISTRO, PUEDES BORRAR DESDE EL ANTERIOR COMENTARIO SI NO TE HACE FALTA*/
  413.  
  414. /*COSAS DEL JS, NO TOQUES*/
  415. .unloaded { opacity:0; }
  416. html { background:black; }
  417. body#phpbb { transition:opacity ease 1s; }
  418.  
  419. /*CORRECCIÓN UPDATE VER CONTRASEÑA*/
  420.  
  421. .password-container {
  422. flex-grow: 1;
  423. align-items: stretch;
  424. gap:0px;
  425. & input {
  426. margin:0;
  427. }
  428. & img {
  429. padding: .9rem;
  430. filter:none;
  431. transition:ease .4s;
  432. &.show_hide_pwd.on {
  433. filter:none;
  434. padding:.85rem;
  435. }
  436. }
  437. }
  438.  
  439. /*CORRECCIÓN UPDATE VER CONTRASEÑA*/
  440.  
  441. /* NO MIRES THE RETURN OF THE KING */
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!