From 212211135894cd4fc1169bb74172180bc744ee53 Mon Sep 17 00:00:00 2001 From: rulingcom Date: Mon, 3 Jan 2022 04:04:17 +0000 Subject: [PATCH] Fix header video layout. --- .../stylesheets/template/layout/header.scss | 19 +- .../template/modules/menu.scss.save | 411 ------------------ 2 files changed, 6 insertions(+), 424 deletions(-) delete mode 100644 assets/stylesheets/template/modules/menu.scss.save diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index b96f410..efef6a6 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -121,54 +121,47 @@ a#content{ } &,& .jp-jplayer{ @media(min-width:1801px){ - height: 760px; .ad-overlay{ bottom: 50%; position: absolute; } } @media screen and (min-width:1451px) and (max-width:1800px){ - height: 760px; .ad-overlay{ bottom: 40%; position: absolute; } } @media screen and (min-width:1281px) and (max-width:1450px){ - height: 760px; .ad-overlay{ bottom: 50%; position: absolute; } } @media screen and (min-width:1026px) and (max-width:1280px){ - height: 720px; .ad-overlay{ bottom: 30%; position: absolute; } } @media screen and (min-width:991px) and (max-width:1025px){ - height: 760px; .ad-overlay{ bottom: 31%; position: absolute; } } - @media screen and (min-width:$screen-xs) and (max-width:990px){ - height: 760px !important; - .ad-overlay{ - bottom: 35%; - position: absolute; - } - } @media(max-width: $screen-xs){ - height: 760px !important; .ad-overlay{ top: 17%; position: absolute; } } + @media screen and (min-width: 769px){ + height: 100vh; + } + @media screen and (max-width: 768px){ + height: 720px; + } } } .jp-jplayer{ diff --git a/assets/stylesheets/template/modules/menu.scss.save b/assets/stylesheets/template/modules/menu.scss.save deleted file mode 100644 index 0183f4b..0000000 --- a/assets/stylesheets/template/modules/menu.scss.save +++ /dev/null @@ -1,411 +0,0 @@ -@charset "utf-8"; - -@import "../initial"; -.collapse{ - @media(min-width: 769px){ - width:100%; - } -} -.navbar-collapse.in { - overflow-y: unset; -} - -.modules-menu { - font-family: $sub-font; - max-height: none; - z-index: 1020; - - li { - white-space: nowrap; - } - .menu-drop.opened { - transform: rotateX(180deg); - } - - .modules-menu-level-0 { - @media (min-width: 1900px) { - padding-top: 32px!important; - } - @media (min-width: 1025px){ - padding-top: 28px!important; - } - @media (min-width: 769px) { - margin: 0 0 0.8em 0; - -webkit-flex-flow: row wrap; - list-style: none; - width:100%; - padding-top: 10px; - display: flex; - } - .has-dropdown.level-1.active { - .modules-menu-level-1 { - display: block; - } - } - - .has-dropdown.level-2.active { - .modules-menu-level-2 { - display: block; - } - } - - // .dropdown-toggle-icon { - // position: absolute; - // top: 0.5em; - // right: 0.3em; - // width: 2.5em; - // height: 2.5em; - // cursor: pointer; - // line-height: 2.5em; - // font-size: 1em; - // text-align: center; - // border-radius: 0.13em; - // } - - .menu-drop { - position: absolute; - right: 0.3em; - width: 2.5em; - height: 2.5em; - cursor: pointer; - line-height: 2.5em; - font-size: 0.5em; - text-align: center; - border-radius: 0.13em; - top: 2em; - } - - // .dropdown-toggle-icon.level-1 { - // background-color: lighten($theme-gray, 10%); - // } - - // .dropdown-toggle-icon.level-2 { - // background-color: lighten($theme-gray, 10%); - // } - - & > li { - position:relative; - margin: 0; - padding: 0 1em; - border-bottom: 0.0625em solid lighten($theme-gray, 5%); - - & > a { - display: block; - padding: 1.125em 0; - font-family: $main-font; - } - - &:hover { - - // background-color: $theme-color-second; - // border-radius: 0.5em; - - & > a { - color: #288E8E; - } - - @media (min-width: $screen-sm) { - // background-color: $theme-color-second; - // border-radius: 0.5em; - } - } - - @media (min-width: $screen-sm) { - position: static; - margin: 0; - padding: 0; - border-bottom: none; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - - .modules-menu-level-1 { - left: auto; - - &:before { - right: 0.625em; - left: auto; - } - - & > li { - padding-right: 1em; - padding-left: 1em; - - & > a { - padding-left: 0; - } - } - - .modules-menu-level-2 { - right: 100%; - left: auto; - } - } - } - - & > a { - padding: 0.8rem; - font-size: 14px; - color:#fff; - font-weight: 900; - // text-shadow: 1px 1px 1px #0000008c; - } - - &:hover { - .modules-menu-level-1 { - // display: block; - // - // visibility: visible; - // opacity: 1; - // transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear; - - } - } - } - } - } - - .modules-menu-level-1 { - background-color:#ffffff; - list-style: none; - z-index: 1; - padding:1em; - @media(min-width:769px){ - flex-wrap: wrap; - justify-content: flex-start; - left:0; - display: flex; - visibility: hidden; - position: fixed!important; - opacity: 0; - width: 100vw; - box-shadow: 2px 2px 5px #00000033; - margin: 0.8em 0; - padding: 0; - max-height: 0; - overflow: hidden; - transition-duration: 0.5s; - } - - & > li { - position: relative; - // & + li { - // border-top: 0.0625em solid lighten($theme-gray, 5%); - // } - - & > a { - display: block; - padding: 1em 1.5em; - font-family: $main-font; - font-size: 16px; - font-weight: 600; - color: #333; - } - - // &:hover { - // background-color: $theme-color-second; - // & > a { - // color: $theme-color-main; - // } - // } - } - - @media (min-width: $screen-sm) { - position: absolute; - - & > li { - padding-right: 2em; - flex: 0 0 33.3%; - & > a { - padding-left: 1em; - border-bottom: 2px solid #288E8E; - padding: 5px 0; - } - - &:hover { - .modules-menu-level-2 { - display: block; - } - } - } - } - } - - .modules-menu-level-2 { - margin: 0; - padding: 0; - list-style: none; - - & > li { - & + li { - // border-top: 0.0625em solid lighten($theme-gray, 5%); - } - - & > a { - display: block; - padding: 0.3em 3em; - font-family: $main-font; - color: #333; - font-size: 16px; - font-weight: 500; - } - - // &:hover { - // background-color: $theme-color-second; - // } - } - - @media (min-width: $screen-sm) { - top: 0; - left: 100%; - - & > li > a { - padding-left: 1em; - } - } - } -} - -.has-mobile-dropdown { - .modules-menu { - .dropdown-toggle-icon { - display: block; - } - } -} - -@media (max-width: 767px) { - .modules-menu .modules-menu-level-0 { - flex-direction: column; - width: 100%; - padding: 0; - } -} -@media (max-width: 769px) { - .modules-menu .modules-menu-level-0 { - width: 100%; - padding: 0; - } -} - -//mobile -.mobile-menu { - z-index: 1051; - width: 100vw; - position: fixed; - top: 0; - right: 0; - bottom: 0; - display: none; - - &.active { - display: block; - } - - .modules-menu { - width: 100%; - position: absolute; - right: 40px; - background: #ffffff; - height: 100%; - top: 0; - padding-top: 40px; - } - .modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {color: #000; - font-size: 18px ; - font-weight: 500; } -.menu-drop{ - font-size: 10px ; -} - .navbar-toggle { - position: absolute; - left: 0; - background: transparent; - top: 40px; - z-index: 1; - height: 100vh; - margin: 0; - width: 20%; - border: 0; - } - .cover { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(0,0,0,0.8); - z-index: 0; - } -} - - -//覆蓋bootstrap nav設定 -.mobile-menu .modules-menu.collapsing { - overflow:unset !important; - transform: translateX(100%); - -webkit-transition-timing-function:ease; - -o-transition-timing-function:ease; - transition-timing-function:ease; - -webkit-transition-duration:.35s; - -o-transition-duration:.35s; - transition-duration:.35s; - -webkit-transition-property:transform; - -o-transition-property:transform; - transition-property:transform; -} -.mobile-menu .modules-menu.collapse.in { - transform: translateX(100%); - -webkit-transition-timing-function:ease; - -o-transition-timing-function:ease; - transition-timing-function:ease; - -webkit-transition-duration:.35s; - -o-transition-duration:.35s; - transition-duration:.35s; - -webkit-transition-property:transform; - -o-transition-property:transform; - transition-property:transform; -} - -.mobile-menu .collapse.navbar-collapse.modules-menu { - overflow-y: scroll; - transform: translateX(0%); -} -.display-on{ - display:block!important; - transition-duration: 0.9s; -} -.drop-down > a:after{ - content:"\f103"; - color:#fff; - font-family: FontAwesome; - font-style: normal; - margin-left: 5px; -} -.dropdown-arrow{ - align-self: center; - margin-left: 10px; - z-index: 999; - @media(max-width: 768px){ - position: absolute; - right: 0.3em; - width: 2.5em; - height: 2.5em; - cursor: pointer; - line-height: 2.5em; - font-size: 1em; - text-align: center; - border-radius: 0.13em; - display: none!important; - } -} -.fa-chevron-right{ - align-self: center; - margin-left: 10px; - font-size: 3px; - font-weight: 100!important; -}