|
|
| (No se muestran 39 ediciones intermedias del mismo usuario) |
| Línea 1: |
Línea 1: |
| /* Custom colors - top bar*/
| |
| .tab-bar {
| |
| background: #2284a1;
| |
| }
| |
| .subheader {
| |
| background: #517398;
| |
| color: #fff;
| |
| text-align: center;
| |
| padding: .5em;
| |
| }
| |
| #mw-normal-catlinks a.new {
| |
| color: #000037;
| |
| }
| |
|
| |
|
| .sidebar {
| |
| background: #bfd8cf !important;
| |
| }
| |
|
| |
| @sidebar {
| |
| background-color: white;
| |
| }
| |
|
| |
| #page-content {
| |
| background-color: white;
| |
| }
| |
|
| |
| .fancytree ul {
| |
| background: none;
| |
| border: none;
| |
| font-size: 12px;
| |
| }
| |
| ul.fancytree-container {
| |
| outline: 0;
| |
| border: none;
| |
| overflow: hidden;
| |
| }
| |
| .fancytree p {
| |
| display: none;
| |
| }
| |
| span.fancytree-title {
| |
| cursor: default;
| |
| }
| |
| span.fancytree-title a {
| |
| color: black;
| |
| }
| |
|
| |
|
| |
|
| |
| @media (max-width: 810px) {
| |
| .responsive-table {
| |
| width: 100%;
| |
| display: grid;
| |
| margin: 0;
| |
| }
| |
| .responsive-table table {
| |
| width: 100%;
| |
| }
| |
| .responsive-table table td {
| |
| width: auto;
| |
| display: block;
| |
| text-align: left;
| |
| box-sizing: border-box;
| |
| border-bottom: 1px solid #4682B4;
| |
| padding: 8px;
| |
| font-size: 12px;
| |
| }
| |
| .responsive-table table td:last-child {
| |
| border-bottom: none;
| |
| }
| |
| }
| |
|
| |
|
| |
| .info-ficha {
| |
| margin-left: 10px;
| |
| }
| |
|
| |
| /* MOVIE CARD */
| |
|
| |
| #contenedor_miniatura {
| |
| width: 200px;
| |
| height: 200px;
| |
| position: relative;
| |
| border-radius: 10px !important;
| |
| margin: 0 auto; /* esto centra el elemento horizontalmente */
| |
| }
| |
|
| |
| .grande {
| |
| width: 200px !important;
| |
| height: 200px !important;
| |
| /*filter: brightness(0.4);*/
| |
| border-radius: 10px !important;
| |
| }
| |
|
| |
| .pequeña {
| |
| width: 100px;
| |
| height: 120px;
| |
| position: absolute;
| |
| top: 15%;
| |
| left: 25%;
| |
| transform: translate(-20%, -20%);
| |
| transform: rotate(-2.5deg) skewx(5deg);
| |
| border-style: outset;
| |
| border-color: white;
| |
| border-width: thin;
| |
| display: none;
| |
| }
| |
| .caratula {
| |
| position: relative;
| |
| /* width: 190px;*/
| |
| background-color: #000;
| |
| bottom: 100%;
| |
| z-index: 1;
| |
| max-width: 180px;
| |
| box-shadow: 1px 4px 10px rgb(0 0 0);
| |
| border: #7f7d7d9e;
| |
| border-style: hidden;
| |
| margin-right: 10px !important;
| |
| border-width: 2px !important;
| |
| border-style: groove;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .titulo {
| |
| line-height: 21px;
| |
| color: white !important;
| |
| background-color: black;
| |
| font: menu;
| |
| text-align: center;
| |
| }
| |
|
| |
|
| |
| #grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
| |
| grid-gap: 5px;
| |
| }
| |
|
| |
| #grid>div {
| |
| text-align: center;
| |
| }
| |
|
| |
|
| |
|
| |
| /* .flip-card-container */
| |
| .flip-card-container {
| |
| --white-1: hsl(0, 0%, 90%);
| |
| --white-2: hsl(0, 0%, 80%);
| |
| --dark: hsl(var(--hue), 25%, 10%);
| |
| --grey: hsl(0, 0%, 50%);
| |
|
| |
| width: 120px;
| |
| height: 150px;
| |
|
| |
| margin: 14px;
| |
| margin-bottom: 35px;
| |
| perspective: 1000px;
| |
| }
| |
|
| |
| /* .flip-card */
| |
| .flip-card {
| |
| width: inherit;
| |
| height: inherit;
| |
|
| |
| position: relative;
| |
| transform-style: preserve-3d;
| |
| transition: .6s .1s;
| |
| }
| |
|
| |
| /* hover and focus-within states */
| |
| .flip-card-container:hover .flip-card,
| |
| .flip-card-container:focus-within .flip-card {
| |
| transform: rotateY(180deg);
| |
| }
| |
|
| |
| /* .card-... */
| |
| .card-front,
| |
| .card-back {
| |
| width: 100%;
| |
| height: 100%;
| |
| border-radius: 24px;
| |
|
| |
| background: var(--dark);
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| overflow: hidden;
| |
|
| |
| backface-visibility: hidden;
| |
|
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
|
| |
| /* .card-front */
| |
| .card-front {
| |
| transform: rotateY(0deg);
| |
| z-index: 2;
| |
| }
| |
|
| |
| /* .card-back */
| |
| .card-back {
| |
| transform: rotateY(180deg);
| |
| z-index: 1;
| |
| background:rgba(0,0,0,1 );
| |
| opacity:0.8;
| |
| backface-visibility: hidden;
| |
| }
| |
|
| |
|
| |
|
| |
| /* figure */
| |
| figure {
| |
| z-index: -1;
| |
| }
| |
|
| |
| /* figure, .img-bg */
| |
| figure,
| |
| .img-bg {
| |
| position: absolute;
| |
| /* top: 0; */
| |
| left: 0;
| |
|
| |
| width: 100%;
| |
| height: 100%;
| |
| }
| |
|
| |
| /* img */
| |
| .frontal {
| |
| height: 100%;
| |
| width: 100%;
| |
| border-radius: 24px;
| |
| border-width: 2px !important;
| |
| border-style: inset;
| |
| box-shadow: 10px 4px 10px rgb(0 0 0);
| |
| border-color: rgba(0, 0, 0, 0.8);
| |
| }
| |
|
| |
| .trasera {
| |
| height: 100%;
| |
| width: 100%;
| |
| border-radius: 24px;
| |
| border-width: 2px !important;
| |
| border-style: inset;
| |
| box-shadow: 10px 4px 10px rgb(0 0 0);
| |
| border-color: rgba(0, 0, 0, 0.8);
| |
| }
| |
|
| |
|
| |
| /* figcaption */
| |
| figcaption {
| |
| display: block;
| |
|
| |
| width: auto;
| |
| margin-top: 12%;
| |
| padding: 8px 22px;
| |
|
| |
| font-weight: bold;
| |
| line-height: 1.6;
| |
| letter-spacing: 2px;
| |
| word-spacing: 6px;
| |
| text-align: right;
| |
|
| |
| position: absolute;
| |
| top: 0;
| |
| right: 12px;
| |
|
| |
| color: var(--white-1);
| |
| background: hsla(var(--hue), 25%, 10%, .5);
| |
| }
| |
|
| |
| /* .img-bg */
| |
| .img-bg {
| |
| background: hsla(var(--hue), 25%, 10%, .5);
| |
| }
| |
|
| |
| .card-front .img-bg {
| |
| clip-path: polygon(0 20%, 100% 40%, 100% 100%, 0 100%);
| |
| }
| |
|
| |
| .card-front .img-bg::before {
| |
| content: "";
| |
|
| |
| position: absolute;
| |
| top: 34%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%) rotate(18deg);
| |
|
| |
| width: 100%;
| |
| height: 6px;
| |
| border: 1px solid var(--primary);
| |
| border-left-color: transparent;
| |
| border-right-color: transparent;
| |
|
| |
| transition: .1s;
| |
| }
| |
|
| |
| .card-back .img-bg {
| |
| /*clip-path: polygon(0 0, 100% 0, 100% 80%, 0 60%);*/
| |
| background-color: #000000ab !important;
| |
| }
| |
|
| |
| /* hover state */
| |
| .flip-card-container:hover .card-front .img-bg::before {
| |
| width: 6px;
| |
| border-left-color: var(--primary);
| |
| border-right-color: var(--primary);
| |
| }
| |
|
| |
| /* button */
| |
| button {
| |
| font-family: inherit;
| |
| font-weight: bold;
| |
| color: var(--white-1);
| |
|
| |
| letter-spacing: 2px;
| |
|
| |
| padding: 9px 20px;
| |
| border: 1px solid var(--grey);
| |
| border-radius: 1000px;
| |
| background: transparent;
| |
| transition: .3s;
| |
|
| |
| cursor: pointer;
| |
| }
| |
|
| |
| button:hover,
| |
| button:focus {
| |
| color: var(--primary);
| |
| background: hsla(var(--hue), 25%, 10%, .2);
| |
| border-color: currentColor;
| |
| }
| |
|
| |
| button:active {
| |
| transform: translate(2px);
| |
| }
| |
|
| |
| /* .design-container */
| |
| .design-container {
| |
| --tr: 90;
| |
| --op: .5;
| |
|
| |
| width: 100%;
| |
| height: 100%;
| |
|
| |
| background: transparent;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
|
| |
| pointer-events: none;
| |
| }
| |
|
| |
| /* .design */
| |
| .design {
| |
| display: block;
| |
|
| |
| background: var(--grey);
| |
| position: absolute;
| |
|
| |
| opacity: var(--op);
| |
| transition: .3s;
| |
| }
| |
|
| |
| .design--1,
| |
| .design--2,
| |
| .design--3,
| |
| .design--4 {
| |
| width: 1px;
| |
| height: 100%;
| |
| }
| |
|
| |
| .design--1,
| |
| .design--2 {
| |
| top: 0;
| |
| transform: translateY(calc((var(--tr) - (var(--tr) * 2)) * 1%))
| |
| }
| |
|
| |
| .design--1 {
| |
| left: 20%;
| |
| }
| |
|
| |
| .design--2 {
| |
| left: 80%;
| |
| }
| |
|
| |
| .design--3,
| |
| .design--4 {
| |
| bottom: 0;
| |
| transform: translateY(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))
| |
| }
| |
|
| |
| .design--3 {
| |
| left: 24%;
| |
| }
| |
|
| |
| .design--4 {
| |
| left: 76%;
| |
| }
| |
|
| |
| .design--5,
| |
| .design--6,
| |
| .design--7,
| |
| .design--8 {
| |
| width: 100%;
| |
| height: 1px;
| |
| }
| |
|
| |
| .design--5,
| |
| .design--6 {
| |
| left: 0;
| |
| transform: translateX(calc((var(--tr) - (var(--tr) * 2)) * 1%));
| |
| }
| |
|
| |
| .design--5 {
| |
| top: 41%;
| |
| }
| |
|
| |
| .design--6 {
| |
| top: 59%;
| |
| }
| |
|
| |
| .design--7,
| |
| .design--8 {
| |
| right: 0;
| |
| transform: translateX(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))
| |
| }
| |
|
| |
| .design--7 {
| |
| top: 44%;
| |
| }
| |
|
| |
| .design--8 {
| |
| top: 56%;
| |
| }
| |
|
| |
| /* states */
| |
| button:hover+.design-container,
| |
| button:active+.design-container,
| |
| button:focus+.design-container {
| |
| --tr: 20;
| |
| --op: .7;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| /****/
| |
|
| |
|
| |
| .movie_card {
| |
| position: relative;
| |
| display: block;
| |
| width: 152px;
| |
| height: 175px;
| |
| margin-top: 40px;
| |
| overflow: hidden;
| |
| border-radius: 10px;
| |
| transition: all 0.4s;
| |
|
| |
| }
| |
| .movie_card:hover {
| |
| transform: scale(1.02);
| |
| transition: all 0.4s;
| |
| }
| |
| .movie_card .info_section {
| |
| position: relative;
| |
| width: 100%;
| |
| height: 100%;
| |
| background-blend-mode: multiply;
| |
| z-index: 2;
| |
| border-radius: 10px;
| |
| }
| |
| .movie_card .info_section .movie_header {
| |
| position: relative;
| |
| padding: 25px;
| |
| height: 40%;
| |
| }
| |
| .movie_card .info_section .movie_header h1 {
| |
| color: #fff;
| |
| font-weight: 400;
| |
| }
| |
| .movie_card .info_section .movie_header h4 {
| |
| color: #9ac7fa;
| |
| font-weight: 400;
| |
| }
| |
| .movie_card .info_section .movie_header .minutes {
| |
| display: inline-block;
| |
| margin-top: 10px;
| |
| color: #fff;
| |
| padding: 5px;
| |
| font-weight: 200;
| |
| border-radius: 5px;
| |
| border: 1px solid rgba(255, 255, 255, 0.13);
| |
| }
| |
| .movie_card .info_section .movie_header .type {
| |
| display: inline-block;
| |
| color: #cee4fd;
| |
| margin-left: 10px;
| |
| }
| |
| .movie_card .info_section .movie_header .locandina {
| |
| position: relative;
| |
| float: left;
| |
| margin-right: 20px;
| |
| height: 120px;
| |
| width: 152px;
| |
| box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);
| |
| border: #807474b5;
| |
| border-top-style: none;
| |
| border-top-width: medium;
| |
| border-right-style: none;
| |
| border-right-width: medium;
| |
| border-bottom-style: none;
| |
| border-bottom-width: medium;
| |
| border-left-style: none;
| |
| border-left-width: medium;
| |
| border-style: solid;
| |
| border-width: thin;
| |
|
| |
| }
| |
| .movie_card .info_section .movie_desc {
| |
| padding: 25px;
| |
| height: 50%;
| |
| }
| |
| .movie_card .info_section .movie_desc .text {
| |
| color: #cfd6e1;
| |
| }
| |
| .movie_card .info_section .movie_social {
| |
| height: 10%;
| |
| padding-left: 15px;
| |
| padding-bottom: 20px;
| |
| }
| |
| .movie_card .info_section .movie_social ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| }
| |
| .movie_card .info_section .movie_social ul li {
| |
| display: inline-block;
| |
| color: rgba(255, 255, 255, 0.4);
| |
| transition: color 0.3s;
| |
| transition-delay: 0.15s;
| |
| margin: 0 10px;
| |
| }
| |
| .movie_card .info_section .movie_social ul li:hover {
| |
| transition: color 0.3s;
| |
| color: rgba(255, 255, 255, 0.8);
| |
| }
| |
| .movie_card .info_section .movie_social ul li i {
| |
| font-size: 19px;
| |
| cursor: pointer;
| |
| }
| |
| .movie_card .blur_back {
| |
| position: absolute;
| |
| top: 0;
| |
| z-index: 1;
| |
| height: 100%;
| |
| right: 0;
| |
| background-size: cover;
| |
| border-radius: 11px;
| |
| top: 0px;
| |
| position: absolute !important;
| |
| left: 16px;
| |
| }
| |
| .movie_fondo {
| |
| position: absolute;
| |
| top: -10px;
| |
| left: 30px;
| |
| height: 120%;
| |
| resize: revert;
| |
| width: 120%;
| |
| }
| |
| @media screen and (min-width: 768px) {
| |
| .movie_header {
| |
| width: 100%;
| |
| }
| |
|
| |
| .movie_desc {
| |
| margin-top: 10px;
| |
| width: 90%;
| |
| }
| |
|
| |
| .info_section {
| |
| background: linear-gradient(to right, #0d0d0c 50%, transparent 100%);
| |
| }
| |
|
| |
| .blur_back {
| |
| width: 80%;
| |
| background-position: -100% 10% !important;
| |
| }
| |
| }
| |
| @media screen and (max-width: 768px) {
| |
| .movie_card {
| |
| width: 95%;
| |
| margin: 20px auto;
| |
| min-height: 350px;
| |
| height: auto;
| |
| }
| |
|
| |
| .blur_back {
| |
| width: 100%;
| |
| background-position: 50% 50% !important;
| |
| }
| |
|
| |
| .movie_header {
| |
| width: 100%;
| |
| margin-top: 85px;
| |
| }
| |
|
| |
| .movie_desc {
| |
| width: 100%;
| |
| }
| |
|
| |
| .info_section {
| |
| background: linear-gradient(to top, #141413 50%, transparent 100%);
| |
| display: inline-grid;
| |
| }
| |
| }
| |
| #bright {
| |
| /* box-shadow: 0px 0px 150px -45px rgba(255, 51, 0, 0.5);*/
| |
| }
| |
| #bright:hover {
| |
| box-shadow: 0px 0px 120px -55px rgba(255, 51, 0, 0.5);
| |
| }
| |
|
| |
| .bright_back {
| |
| background: url("https://occ-0-2433-448.1.nflxso.net/art/cd5c9/3e192edf2027c536e25bb5d3b6ac93ced77cd5c9.jpg");
| |
| }
| |
|
| |
| #tomb {
| |
| box-shadow: 0px 0px 150px -45px rgba(19, 160, 134, 0.6);
| |
| }
| |
| #tomb:hover {
| |
| box-shadow: 0px 0px 120px -55px rgba(19, 160, 134, 0.6);
| |
| }
| |
|
| |
| .tomb_back {
| |
| background: url("https://fsmedia.imgix.net/cd/c9/5e/ba/4817/4d9a/93f0/c776ec32ecbc/lara-crofts-neck-looks-unnatural-in-the-new-poster-for-tomb-raider.png");
| |
| }
| |
|
| |
| #ave {
| |
| box-shadow: 0px 0px 150px -45px rgba(199, 147, 75, 0.7);
| |
| margin-bottom: 200px;
| |
| }
| |
| #ave:hover {
| |
| box-shadow: 0px 0px 120px -55px rgba(199, 147, 75, 0.7);
| |
| }
| |
|
| |
| .ave_back {
| |
| background: url("https://www.gannett-cdn.com/-mm-/c03fd140debe8ad4c05cf81a5cad7ad61a12ce52/c=0-1580-2985-3266&r=x803&c=1600x800/local/-/media/2017/06/09/USATODAY/USATODAY/636326272873599176-Black-Panther-Teaser.jpg");
| |
| }
| |
|
| |
| .ellipsis {
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| display: -webkit-box;
| |
| -webkit-line-clamp: 3; /* número de líneas que se mostrarán antes de los puntos suspensivos */
| |
| -webkit-box-orient: vertical;
| |
| }
| |
| .profile {
| |
| transform: rotate(-2.5deg) skewx(5deg);
| |
| box-shadow: -35px 35px 50px rgba(0,0,0,1);
| |
| position: absolute;
| |
| width: 99px;
| |
| height: 131px;
| |
| background-color: #fff;
| |
| bottom: 20%;
| |
| left: 20%;
| |
| z-index: 1;
| |
| max-width: 100px;
| |
| opacity: 1;
| |
| box-shadow: -5px -5px 80px rgba(0,0,0,1);
| |
| border: #152732;
| |
| border-top-color: rgb(21, 39, 50);
| |
| border-top-style: none;
| |
| border-top-width: medium;
| |
| border-right-color: rgb(21, 39, 50);
| |
| border-right-style: none;
| |
| border-right-width: medium;
| |
| border-bottom-style: none;
| |
| border-left-style: none;
| |
| border-top-style: none;
| |
| border-right-style: none;
| |
| border-bottom-style: none;
| |
| border-left-style: none;
| |
| border-style: outset;
| |
| border-top-style: outset;
| |
| border-right-style: outset;
| |
| border-right: aliceblue;
| |
| border-top: aliceblue;
| |
| }
| |
|
| |
| .alm_container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| .alm_element {
| |
| width: calc(50% - 10px);
| |
| margin: 5px;
| |
| background-color: #eee;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| @media (max-width: 700px) {
| |
| .alm_element {
| |
| width: 100%;
| |
| }
| |
| }
| |
|
| |
|
| |
| .grid_anuario {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| margin-left: 20px;
| |
| padding-bottom: 20px;
| |
| }
| |
|
| |
| .movie_card {
| |
| width: 200px;
| |
| margin-bottom: auto;
| |
| margin-right: auto;
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .movie_card {
| |
| width: 100%;
| |
| }
| |
| }
| |
|
| |
|
| |
|
| |
| .divTable {
| |
| display: table;
| |
| width: 100%;
| |
| table-layout: fixed;
| |
| border-collapse: collapse;
| |
| border: 0px hidden #dddddd;
| |
| }
| |
|
| |
| .divTableBody {
| |
| display: table-row-group;
| |
| }
| |
|
| |
| .divTableRow {
| |
| display: table-row;
| |
| }
| |
|
| |
| .divTableCell {
| |
| display: table-cell;
| |
| padding: 10px;
| |
| vertical-align: middle;
| |
| border: 0px solid #dddddd;
| |
| text-align: left;
| |
| }
| |
|
| |
| @media screen and (max-width: 600px) {
| |
| .divTableCell {
| |
| display: block;
| |
| width: 100%;
| |
| text-align: left;
| |
| border: 0;
| |
| }
| |
|
| |
| .divTableCell:before {
| |
| content: attr(data-label);
| |
| font-weight: bold;
| |
| display: inline-block;
| |
| width: 35%;
| |
| }
| |
|
| |
| .divTableRow:after {
| |
| clear: both;
| |
| display: table;
| |
| content: "";
| |
| }
| |
| }
| |
|
| |
|
| |
|
| |
| /* Search Input
| |
| #MySearchInput
| |
| {
| |
| position: relative;
| |
| display: inline-block;
| |
| width: 18%;
| |
|
| |
| text-align: center;
| |
| justify-content: center;
| |
|
| |
| border: none;
| |
| outline: none;
| |
| background: #161617;
| |
| border-bottom: 0.1px solid #494949a1;
| |
| box-shadow: 0 4px 3px -4px #151515;
| |
| outline: none;
| |
| color: var(--brand-color);
| |
| font-family: 'Heebo', sans-serif;
| |
| font-weight: 500;
| |
| font-size: 12px;
| |
| z-index: 28;
| |
|
| |
| transition: all 0.6s ease-in-out;
| |
| }
| |
|
| |
| #MySearchInput:focus
| |
| {
| |
| /*width: 65%;*
| |
| width: 92%;
| |
| border: none;
| |
| outline:none;
| |
|
| |
| color:#fff;
| |
| font-weight: 400;
| |
| font-family: "Open Sans", Arial, Verdana;
| |
| background-image: radial-gradient(circle, #303030 0%, #141414 100%);
| |
|
| |
| transition: all 0.4s ease-in-out;
| |
| }
| |
|
| |
| /*placeholder - normal*
| |
| #MySearchInput::placeholder
| |
| {
| |
| color:#cfcfcf;
| |
| }
| |
| /*placeholder - focus*
| |
| #MySearchInput:focus::placeholder
| |
| {
| |
| color:#fff;
| |
| }
| |
| /*===========*/
| |
