css DAWN CSS已更新
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css DAWN CSS已更新相关的知识，希望对你有一定的参考价值。
/*======================
GENERAL
======================*/
/* fix image aligning classes*/
.text-align-right {
text-align: right !important;
}
.text-align-left {
text-align: left !important;
}
#block-mainpagecontent .align-center {
text-align: center;
margin: 0 auto;
}
/* add space above footer */
.not-front .footer {
margin-top: 3rem;
}
.layout-container {
overflow-x: hidden !important;
}
/* map */
.iframeWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.iframeWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*======================
BUTTONS
======================*/
/* ADD ARROWS TO BLOCK TITLES */
h3.node__title a {
position: relative;
}
.team-member h3.node__title a::after,
.products-services h3.node__title a::after,
.blog h3.node__title a::after {
content: "›";
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
display: inline-block;
position: absolute;
bottom: -3px;
right: -20px;
transition: all 0.3s ease;
}
.team-member h3.node__title a:hover::after,
.products-services h3 a:hover::after,
.blog h3.node__title a:hover::after {
right: -30px;
}
/* ADD ARROWS TO BUTTONS */
#edit-submit::after,
.button::after {
content: "›";
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
display: inline-block;
padding-left: 10px;
transition: all 0.3s ease;
}
#edit-submit:hover::after,
.button:hover::after {
padding-left: 20px;
}
/*======================
HEADER
======================*/
/* header within */
.aw-header .header_within {
max-width: 99%;
}
.aw-header .header_within > .grid-container {
max-width: 100%;
}
.aw-header [data-block-internal-id="aw_core_visitormainmenu"] .menu .menu-item > a, [data-block-internal-id="aw_core_visitormainmenu"] .menu .is-submenu-parent-item > a {
letter-spacing: 2px;
}
.menu-icon::after {
background: white;
box-shadow: 0 7px 0 white,0 14px 0 white;
}
/* logo */
/* HIDE DEFAULT LOGO ON FRONTPAGE */
/* USE JS TO INSERT LOGO ON BANNER*/
.path-frontpage #block-logo .block__content a{
visibility: hidden;
pointer-events: none;
cursor: default;
}
@media screen and (min-width: 40em){
.block--logo .image__field--type-image img {
max-height: 100px;
}
}
.block--logo .image__field--type-image img {
padding: 0;
}
/*======================
NAVIGATION
======================*/
[data-block-internal-id="aw_core_visitormainmenu"] .dropdown.menu .is-active > a {
color: white;
}
/* submenu */
[data-block-internal-id="aw_core_visitormainmenu"] .is-dropdown-submenu {
background-color: rgba(0,0,0,0.5)!important;
border: none !important;
}
[data-block-internal-id="aw_core_visitormainmenu"] .menu-item.is-dropdown-submenu-item > a {
color: white;
}
/* Remove link hover effect if menu container with no link */
@media screen and (min-width: 64em){
.link--container > a {
cursor: default !important;
pointer-events: none;
}
}
/*======================
BANNERS
======================*/
/* tint for frontpage banner */
.path-frontpage .orbit__container .orbit__image:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
/* REMOVE ANIMATION IF USING MULTIPLE BANNERS = SLIDESHOW */
animation: brighten 1s ease;
}
/* REMOVE BRIGHTEN ANIMATION IF USING MULTIPLE BANNERS = SLIDESHOW */
@keyframes brighten {
from {background: rgba(0,0,0,1);}
to {background: rgba(0,0,0,0.4);}
}
/* ANIMATE BUTTON */
.path-frontpage .orbit__container .button {
position: relative;
animation: fadeInSlow 3.5s ease-out;
border: none;
}
/* ADD ARROW TO LEARN MORE BUTTON */
.path-frontpage .orbit__container .button::after {
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
content: "⌄";
font-size: 2rem;
transition: all 0.3s ease;
position: absolute;
top: 3rem;
left: 50%;
transform: translate(-50%,0);
padding-left: 0;
}
.path-frontpage .orbit__container .button:hover::after {
top: 4rem;
}
@media print, screen and (min-width: 64em){
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider .orbit__caption {
width: 80%;
}
}
/* IMPORTANT - Use JS to prepend the logo to h1 */
.path-frontpage [data-block-internal-id="core_slider_fullscreen"] .orbit__caption > h1 img {
max-width: 300px;
margin-bottom: 1rem;
}
.path-frontpage [data-block-internal-id="core_slider_fullscreen"] .orbit__caption > h1 {
margin-bottom: 2rem;
}
/* Fade in caption */
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider .orbit__caption {
animation: fadeIn 1.5s ease;
}
/* Slide down caption */
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider h1,
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider h4,
#block-core-slider-regular {
animation: slideDown 1.5s ease;
position: relative;
}
/* Fade in button slower than caption */
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider h4:last-of-type {
animation: fadeInSlow 1.5s ease;
}
main,
.footer {
position: relative;
animation: slideUp 1.5s ease;
}
.path-frontpage .aw-content,
.path-frontpage .footer,
.not-front .layout-container {
animation: fadeInSlow 1.5s ease;
}
/* KEYFRAMES */
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeInSlow {
0% {opacity: 0;}
50% {opacity: 0.1;}
100% {opacity: 1;}
}
@keyframes slideDown {
from {top: -30px;}
to {top: 0;}
}
@keyframes slideUp {
from {bottom: -50px;}
to {bottom: 0;}
}
/* internal banner*/
.orbit__container .orbit__image:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.3);
}
@media print, screen and (min-width: 40em){
[data-block-internal-id="core_slider_regular"] .page-top__static-caption {
margin-top: 30px;
}
}
[data-block-internal-id="core_slider_regular"] h1 {
font-size: 32px;
}
/*======================
TEAM
======================*/
/* make team member block full width */
[data-block-internal-id="team_member_01"] .grid-container {
max-width: 100%;
padding: 0;
}
.team-member img {
margin-bottom: 0;
}
/* Remove team info */
.path-frontpage .team-member--imgside .main-section .team__field--name-field-role-title + a,
.path-frontpage .team-member--imgside .main-section .field--name-field-email,
.path-frontpage .team-member--imgside .main-section .team__field--name-field-biography,
.path-frontpage .team-member--imgside .main-section .social-media-container {
display: none;
}
/* Make team member role title font bigger */
.team-member .field--name-field-role-title {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Remove padding from team block */
[data-block-internal-id="team_member_01"] .block__content {
padding: 0 !important;
}
[data-block-internal-id="team_member_01"] .team-member img,
[data-block-internal-id="team_member_01"] .team-member {
margin-bottom: 0;
}
/*======================
BLOG
======================*/
/* remove read more button */
.path-frontpage .blog .node--read-mode.button--primary {
display: none;
}
/* float blog featured image and make smaller */
@media screen and (min-width: 48em){
.page--node-type--blog-01 #block-mainpagecontent .field--name-field-featured-image {
float: right;
margin-left: 40px;
}
}
.page--node-type--blog-01 #block-mainpagecontent .field--name-field-featured-image img {
height: 300px;
width: 400px;
object-fit: cover;
}
/*======================
SERVICES
======================*/
.products-services .icon {
color: var(--secondary-color,#bbb);
}
.path-products-services .products-services h3.node__title,
.path-frontpage .products-services h3.node__title {
text-align: center;
}
/*======================
INSIDE PAGES
======================*/
/* PAGE - CONTACT */
[data-block-internal-id="sitewidecontactform_5"] h2.text-center {
text-align: left;
font-size: 28px;
margin-bottom: 10px;
}
@media screen and (min-width: 40em){
[data-block-internal-id="sitewidecontactform_5"] {
margin-left: 50px;
}
}
@media screen and (max-width: 40em){
[data-block-internal-id="sitewidecontactform_5"] {
margin-top: 50px;
}
}
/*======================
FORMS
======================*/
input:not([type]), input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=week], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=color], textarea, fieldset {
box-shadow: none !important;
padding: 1.5rem 1rem !important;
border: 1px solid #ccc;
}
input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=month]:focus, input[type=week]:focus, input[type=email]:focus, input[type=number]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=url]:focus, input[type=color]:focus, textarea:focus {
border: 1px solid #2d2d2d;
}
/*======================
FOOTER
======================*/
/* Change column width of footer blocks */
@media screen and (min-width: 48em){
.footer .grid-x > .cell:first-child {
width: 30%;
}
.footer .grid-x > .cell:last-child {
width: 70%;
}
}
/* Width styling for google map and address block*/
@media screen and (min-width: 40em){
.footer .block--google-map-with-address-block .google-map-container .google-map-caption {
width: 230px;
}
.footer .block--google-map-with-address-block .google-map-container .google-map-wrapper {
position: relative;
width: calc(100% - 270px);
}
}
.footer .google-map-caption {
justify-content: flex-start;
padding: 0;
}
.footer .google-map-container {
padding: 0;
}
/* fix line height issue on contact info block */
.footer .contact-info-container > div {
margin: 3px 0 17px;
}
.footer .social-media-icon {
font-size: 2rem;
}
/*======================
BUG FIXES
======================*/
/* Blog tag page fixes */
body.path-taxonomy {
color: white;
}
.path-taxonomy [data-block-internal-id="core_slider_regular"] .page-top-image-slider {
margin-top: -28px;
}
/*Fix layout on category when multiple blogs exist*/
.path-taxonomy #block-mainpagecontent .grid-x.medium-unstack {
flex-direction: column !important;
}
.path-taxonomy #block-mainpagecontent .grid-x > .blog {
width: 90% !important;
margin-bottom: 1rem;
}
@media screen and (max-width: 48em){
.path-taxonomy #block-mainpagecontent .grid-x > .blog .main-section {
padding-left: 0;
}
}
以上是关于css DAWN CSS已更新的主要内容，如果未能解决你的问题，请参考以下文章