|
|
| (No se muestran 32 ediciones intermedias del mismo usuario) |
| Línea 1: |
Línea 1: |
| /* Custom colors - top bar*/
| |
| .tab-bar {
| |
| background: #2284a1;
| |
| }
| |
|
| |
|
| .logo {
| |
| width: 50%;
| |
| }
| |
|
| |
| .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;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| /****/
| |
|
| |
| /*===========*/
| |
|
| |
|
| |
|
| |
|
| |
| /* Overall style */
| |
| .mainpage {
| |
| max-width: 1040px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| /* Heading */
| |
| .mainpage-heading {
| |
| width: 100%;
| |
| margin: 0 1em 0 0;
| |
| border-collapse: collapse;
| |
| border-spacing: 0;
| |
| }
| |
| .mainpage-welcome {
| |
| padding: .5em 1.6em 1em;
| |
| }
| |
| .mainpage-welcome-sitename {
| |
| font-size: 220%;
| |
| color: #484848;
| |
| }
| |
| .mainpage-welcome-slogan {
| |
| color: #666;
| |
| }
| |
| .mainpage-actions {
| |
| white-space: nowrap;
| |
| text-align: right;
| |
| }
| |
| .mainpage-actions ul {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| .mainpage-actions li {
| |
| display: inline-block;
| |
| margin: 0;
| |
| padding: .5em;
| |
| font-weight: bold;
| |
| }
| |
| @media screen and (max-width: 999px) {
| |
| .mainpage-heading,
| |
| .mainpage-heading tbody,
| |
| .mainpage-heading tr,
| |
| .mainpage-heading td {
| |
| display: block;
| |
| }
| |
| .mainpage-heading td {
| |
| padding-left: 1.6em;
| |
| padding-right: 1.6em;
| |
| }
| |
| .mainpage-actions {
| |
| text-align: center;
| |
| white-space: normal;
| |
| }
| |
| }
| |
|
| |
| /* Main table */
| |
| .mainpage-maintable {
| |
| width: 100%;
| |
| margin: 1em 0;
| |
| border: none;
| |
| background: transparent;
| |
| border-spacing: 0;
| |
| }
| |
| .mainpage-maintable td {
| |
| padding: 0;
| |
| vertical-align: top;
| |
| }
| |
| .mainpage-maintable td.mainpage-column-left {
| |
| width: 60%;
| |
| padding-right: .5em;
| |
| }
| |
| .mainpage-maintable td.mainpage-column-right {
| |
| width: 50%;
| |
| padding-left: .5em;
| |
| }
| |
| @media screen and (max-width: 999px) {
| |
| .mainpage-maintable,
| |
| .mainpage-maintable tbody,
| |
| .mainpage-maintable tr,
| |
| .mainpage-maintable td {
| |
| display: block;
| |
| }
| |
| .mainpage-maintable td.mainpage-column-left {
| |
| width: auto;
| |
| padding: 0 0 .75em;
| |
| }
| |
| .mainpage-maintable td.mainpage-column-right {
| |
| width: auto;
| |
| padding: .75em 0 0;
| |
| }
| |
| }
| |
|
| |
| /* Boxes */
| |
| .mainpage-box {
| |
| border: 1px solid;
| |
| }
| |
| .mainpage-box:not(:first-child) {
| |
| margin-top: 1.5em;
| |
| }
| |
| .mainpage-box .mainpage-box-title {
| |
| padding: .2em .5em;
| |
| font-size: 125%;
| |
| font-weight: bold;
| |
| }
| |
| .mainpage-box .mainpage-box-content {
| |
| padding: .4em 1em .3em;
| |
| }
| |
| .mainpage-box .mainpage-box-seealso {
| |
| clear: both;
| |
| border-style: solid;
| |
| border-width: 1px 0 0;
| |
| padding-top: .4em;
| |
| margin-top: .8em;
| |
| text-align: end;
| |
| font-size: 95%;
| |
| font-weight: bold;
| |
| }
| |
| .mainpage-box-orange,
| |
| .mainpage-box-orange .mainpage-box-seealso {
| |
| border-color: #fad67d;
| |
| }
| |
| .mainpage-box-orange .mainpage-box-title {
| |
| background-color: #fad67d;
| |
| }
| |
| .mainpage-box-green,
| |
| .mainpage-box-green .mainpage-box-seealso {
| |
| border-color: #bbfa7c;
| |
| }
| |
| .mainpage-box-green .mainpage-box-title {
| |
| background-color: #bbfa7c;
| |
| }
| |
| .mainpage-box-blue,
| |
| .mainpage-box-blue .mainpage-box-seealso {
| |
| border-color: #abd5f5;
| |
| }
| |
| .mainpage-box-blue .mainpage-box-title {
| |
| background-color: #abd5f5;
| |
| }
| |
|
| |
| /* Languages bar */
| |
| .mainpage-languages {
| |
| padding: 2em;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* keep wikitext div not exceed room available, it doesn’t have any identifier yet :( */
| |
| #mf-vid-vid > div,
| |
| /* keep Kaltura not exceed room available */
| |
| #mf-vid-vid .mediaContainer,
| |
| #mf-vid-vid .mwPlayerContainer,
| |
| #mf-vid-vid .PopUpMediaTransform,
| |
| /* keep VideoJS not exceed room available */
| |
| #mf-vid-vid .video-js,
| |
| #mf-vid-vid img {
| |
| max-width: 100%;
| |
| }
| |
