/* ========================================================= Moviarg merged stylesheet Replaces: - stylesandbox2.css - estilotexto.css - estiloboton.css - estilotabla.css - estilohover.css Theme toggle: - Light mode is default. - Dark mode activates with: ========================================================= */ /* ========================================================= Theme variables ========================================================= */ :root { color-scheme: light; --body-bg: #e5e5e5; --body-text: #3f3f3f; --top-bg: #2E627C; --top-border: #7599a9; --top-text: #ffffff; --top-menu-bg: #35718F; --top-menu-text: #ffffff; --top-menu-hover-bg: #eeeeee; --top-menu-hover-text: #000000; --content-bg: #f9f9f9; --content-border: #c9c9c9; --panel-bg: #ffffff; --panel-border: #e9e9e9; --heading-bg: #fffaae; --heading-text: #585858; --sidebar-heading-bg: #6a9d84; --sidebar-link-bg: #7599a9; --sidebar-link-text: #ffffff; --sidebar-link-hover-bg: #eeeeee; --sidebar-link-hover-text: #000000; --footer-bg: #4D606E; --footer-text: #ffffff; --link: #000000; --link-hover: red; --link-special: #000088; --link-special-hover: #880000; --table-bg: #ffffff; --table-caption-bg: #94AA74; --table-header-bg: #8b8b8b; --table-border: #e5e5e5; --table-row-hover: #ffff99; --table-mobile-expanded-bg: #e0e0e0; --table-mobile-label-bg: #999999; --table-mobile-arrow: #cccccc; --button-blue: #55acee; --button-green: #5E7830; --button-red: #e74c3c; --button-purple: #9b59b6; --button-orange: #e67e22; --button-yellow: #f1c40f; --button-site: #7599a9; --button-text-dark: #000000; --button-text-light: #ffffff; --theme-toggle-bg: #35718F; --theme-toggle-border: #ffffff; --theme-toggle-text: #ffffff; --theme-toggle-hover-bg: #eeeeee; --theme-toggle-hover-text: #000000; --input-bg: #ffffff; --input-text: #222222; --input-border: #bdbdbd; } html[data-theme="dark"] { color-scheme: dark; --body-bg: #111827; --body-text: #e5e7eb; --top-bg: #0f2633; --top-border: #35596b; --top-text: #ffffff; --top-menu-bg: #244b60; --top-menu-text: #ffffff; --top-menu-hover-bg: #e5e7eb; --top-menu-hover-text: #111827; --content-bg: #17212b; --content-border: #334155; --panel-bg: #1f2937; --panel-border: #374151; --heading-bg: #4a421c; --heading-text: #fff7c2; --sidebar-heading-bg: #315b48; --sidebar-link-bg: #2f596d; --sidebar-link-text: #ffffff; --sidebar-link-hover-bg: #e5e7eb; --sidebar-link-hover-text: #111827; --footer-bg: #1f2937; --footer-text: #ffffff; --link: #e5e7eb; --link-hover: #ff7676; --link-special: #9cc7ff; --link-special-hover: #ffb3b3; --table-bg: #1f2937; --table-caption-bg: #53683e; --table-header-bg: #374151; --table-border: #374151; --table-row-hover: #3b3411; --table-mobile-expanded-bg: #2d3748; --table-mobile-label-bg: #4b5563; --table-mobile-arrow: #9ca3af; --button-blue: #60a5fa; --button-green: #84cc16; --button-red: #f87171; --button-purple: #c084fc; --button-orange: #fb923c; --button-yellow: #facc15; --button-site: #8fb5c7; --button-text-dark: #f9fafb; --button-text-light: #111827; --theme-toggle-bg: #e5e7eb; --theme-toggle-border: #ffffff; --theme-toggle-text: #111827; --theme-toggle-hover-bg: #ffffff; --theme-toggle-hover-text: #000000; --input-bg: #111827; --input-text: #f9fafb; --input-border: #4b5563; } /* ========================================================= Base / Layout Former: stylesandbox2.css + estilotexto.css ========================================================= */ body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; background: var(--body-bg); color: var(--body-text); font-size: 14px; line-height: 24px; } /* Preserve the latest global link behavior from the old CSS order. */ a:link, a:visited, a:active { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: none; } table { border-spacing: 0em; } input, select, textarea { background: var(--input-bg); color: var(--input-text); border-color: var(--input-border); } #top { background: var(--top-bg); padding: 0 10px; height: 70px; line-height: 70px; border-bottom: 5px solid var(--top-border); } #header { float: left; } #header h1 { margin: 0; padding: 0; font-weight: bold; color: var(--top-text); font-size: 33px; letter-spacing: -1px; } #header h2 { margin: 0; padding: 0; font-weight: bold; color: var(--top-text); font-size: 22px; letter-spacing: -1px; } #topmenu { float: right; } #topmenu ul { margin: 0; padding: 0; list-style-type: none; } #topmenu li { display: inline; padding: 0 0 0 20px; } #topmenu li a { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; padding: 5px 10px; background: var(--top-menu-bg); text-decoration: none; color: var(--top-menu-text); } #topmenu li a.login-logout { border: 2px var(--button-red) solid; } #topmenu li a:hover { background: var(--top-menu-hover-bg); color: var(--top-menu-hover-text); } #contentwrap { max-width: 90%; background: var(--content-bg); margin: 10px auto; border: 1px solid var(--content-border); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .cleft { float: left; padding: 10px 0 10px 10px; max-width: 200px; } .cleft h3 { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; font-size: 12px; font-weight: bold; color: #fff; background: var(--sidebar-heading-bg); padding: 3px 10px; } .cleft ul { margin: 0; padding: 0; list-style-type: none; } .cleft ul li { margin: 0 0 5px 0; color: #fff; } .cleft ul li a { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; font-size: 12px; display: block; text-decoration: none; color: var(--sidebar-link-text); background: var(--sidebar-link-bg); padding: 3px 10px; } .cleft ul li a:hover { background: var(--sidebar-link-hover-bg); color: var(--sidebar-link-hover-text); } .cright { -webkit-border-top-right-radius: 7px; -webkit-border-bottom-right-radius: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomright: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-left: 1px solid var(--panel-border); background: var(--panel-bg); float: right; padding: 20px 20px 20px 20px; margin-left: 5px; margin-right: 5px; width: calc(100% - 260px); } .cright h2 { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background: var(--heading-bg); padding: 10px; font-weight: bold; color: var(--heading-text); letter-spacing: -1px; margin-left: 5px; margin-right: 5px; } #footer { background: var(--footer-bg); color: var(--footer-text); padding: 10px; } #footer a { color: var(--footer-text); text-decoration: none; border-bottom: 1px dotted var(--footer-text); } #footer a:hover { border-bottom: 1px dotted #ccc; } .left { float: left; } .right { float: right; } .clear { clear: both; padding: 0 0 10px 0; } /* ========================================================= Theme toggle button ========================================================= */ .theme-toggle { cursor: pointer; margin-left: 10px; border-radius: 7px; padding: 5px 10px; border: 1px solid var(--theme-toggle-border); background: var(--theme-toggle-bg); color: var(--theme-toggle-text); font-size: 12px; line-height: normal; } .theme-toggle:hover { background: var(--theme-toggle-hover-bg); color: var(--theme-toggle-hover-text); } /* ========================================================= Buttons Former: estiloboton.css ========================================================= */ h4 { color: var(--button-blue); text-align: center; } .link { border-bottom: 2px dotted var(--button-blue); text-decoration: none; color: var(--button-blue); transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; } .link:hover { color: #2ecc71; border-bottom: 2px dotted #2ecc71; } .btn { cursor: pointer; margin: 5px; border-radius: 5px; text-decoration: none; padding: 5px; font-size: 14px; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; display: inline-block; } .btnsml { cursor: pointer; margin: 0; border-radius: 6px; text-decoration: none; padding: 0 5px; font-size: 10px; height: 20px; line-height: 20px; overflow: hidden; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; display: inline-block; } .blue { color: var(--button-blue); border: 2px var(--button-blue) solid; } .blue:hover { background-color: var(--button-blue); color: var(--button-text-light); } .sitio { color: var(--button-text-dark); border: 2px var(--button-site) solid; display: inline-block; } .sitio:hover { background-color: var(--button-site); color: var(--button-text-light); } .green { color: var(--button-text-dark); border: 2px var(--button-green) solid; } .green:hover { color: var(--button-text-light); background-color: var(--button-green); } .red { color: var(--button-red); border: 2px var(--button-red) solid; } .red:hover { color: var(--button-text-light); background-color: var(--button-red); } .purple { color: var(--button-purple); border: 2px var(--button-purple) solid; } .purple:hover { color: var(--button-text-light); background-color: var(--button-purple); } .orange { color: var(--button-orange); border: 2px var(--button-orange) solid; } .orange:hover { color: var(--button-text-light); background-color: var(--button-orange); } .yellow { color: var(--button-yellow); border: 2px var(--button-yellow) solid; } .yellow:hover { color: var(--button-text-light); background-color: var(--button-yellow); } .buttons { padding-top: 30px; text-align: center; } /* ========================================================= Responsive table layout Former: estilotabla.css ========================================================= */ #table { display: table; width: 100%; background: var(--table-bg); margin: 0; box-sizing: border-box; } .caption { display: block; width: 100%; background: var(--table-caption-bg); height: 55px; padding-left: 10px; color: #fff; font-size: 20px; line-height: 55px; text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); box-sizing: border-box; } .header-row { background: var(--table-header-bg); color: #fff; } .row { display: table-row; } .cell { display: table-cell; font-size: 12px; padding: 3px; border-bottom: 1px solid var(--table-border); text-align: left; } .row:hover { background-color: var(--table-row-hover); } .row:first-child:hover { background-color: var(--table-header-bg); } .primary { text-align: left; } .cell a:visited, .cell a:link, .cell a:active { color: var(--link); text-decoration: none; } .cell a:hover { color: var(--link-hover); text-decoration: none; } input[type="radio"], input[type="checkbox"] { display: none; } @media only screen and (max-width: 360px) { body { padding: 0; } #table { display: block; margin: 44px 0 0 0; } .caption { position: fixed; top: 0; text-align: center; height: 44px; line-height: 44px; z-index: 5; border-bottom: 2px solid #999; } .row { position: relative; display: block; border-bottom: 1px solid #ccc; } .header-row { display: none; } .cell { display: block; border: none; position: relative; height: 45px; line-height: 45px; text-align: left; } .primary:after { content: ""; display: block; position: absolute; right: 20px; top: 18px; z-index: 2; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid var(--table-mobile-arrow); } .cell:nth-of-type(n+2) { display: none; } input[type="radio"], input[type="checkbox"] { display: block; position: absolute; z-index: 1; width: 99%; height: 100%; opacity: 0; } input[type="radio"]:checked ~ .cell, input[type="checkbox"]:checked ~ .cell { display: block; border-bottom: 1px solid #eee; } input[type="radio"]:checked ~ .cell:nth-of-type(n+2), input[type="checkbox"]:checked ~ .cell:nth-of-type(n+2) { background: var(--table-mobile-expanded-bg); } input[type="radio"]:checked ~ .cell:nth-of-type(n+2):before, input[type="checkbox"]:checked ~ .cell:nth-of-type(n+2):before { content: attr(data-label); display: inline-block; width: 60px; background: var(--table-mobile-label-bg); border-radius: 10px; height: 20px; margin-right: 10px; font-size: 12px; line-height: 20px; text-align: center; color: white; } input[type="radio"]:checked ~ .primary, input[type="checkbox"]:checked ~ .primary { border-bottom: 2px solid #999; } input[type="radio"]:checked ~ .primary:after, input[type="checkbox"]:checked ~ .primary:after { position: absolute; right: 18px; top: 22px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 10px solid var(--table-mobile-arrow); z-index: 2; } } /* ========================================================= Hover image preview Former: estilohover.css ========================================================= */ .hover_img a { position: relative; } .hover_img a span { position: absolute; display: none; z-index: 99; } .hover_img a:hover span { display: block; width: 300px; }