/* Theme Name: anyna Author: Anyna Themes Description: A simple theme for blogger. Tags: blog, one-column, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options Version: 1.0 Requires at least: 5.0 Tested up to: 5.7 Requires PHP: 5.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: anyna This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ :root{ --color-0: rgb(66, 6, 51); --color-1: rgb(100 , 22, 81); --color-2: rgb(114, 22, 91); --color-3: rgb(138, 31, 111); --color-4: rgb(158, 35, 127); --color-5: rgb(202, 53, 165); --color-6: rgb(231, 131, 208); --color-7: rgb(233, 148, 212); --color-8: rgb(235, 179, 221); --color-9: rgb(236, 203, 228); --color-1-2: #000000; --color-1-3: #222222; --color-1-4: #444444; --color-1-5: #666666; --color-1-6: #aaa; --color-1-7: #ccc; --color-1-8: #eee; --color-1-9: #eeeeee; --color-1-10: #f0f0f0; --color-1-11: #f2f2f2; --color-1-12: #fefefe; --color-1-13: #fff; } *{ word-break: break-word; word-wrap: break-word; } body{ margin : 0px; direction: ltr; } body.custom-background{ background-attachment: fixed !important; background-size: cover !important; } .site{ margin: 20px 40px; background-color: rgba(255, 255, 255, 0.6); color: #222222; text-align: left; } .site a[href]{ color:var(--color-4); text-decoration: none !important; } .site a[href]:hover{ color:var(--color-1); } [sidebar] ul , [sitebar] ol , [sitebar] li , li.comment , li[id*=comment-]{ list-style-type: none; } #page form{ padding: 12px; } #page input , #page button , #page textarea{ max-width: 100%; box-sizing: border-box; } #page input , #page textarea{ margin: 10px 0px; border-color: var(--color-7); padding: 10px; } #page input:focus , #page textarea:focus{ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19); } #page input[type=text]:focus{ outline: #222222 dashed 1px; outline-offset: -5px; } #page button , #page input[type=submit]{ margin: 10px 0px; border: none; padding: 10px; background-color: var(--color-4); color: #eeeeee; font-weight: bold; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #page button:hover , #page input[type=submit]:hover{ background-color: var(--color-1); } .site table{ border-collapse: collapse; } .site th , .site td{ padding: 10px; border: 1px solid var(--color-7); } .site table thead th{ background-color: var(--color-3); } .site thead th , .site thead th *{ color: #ccc; } .site tbody th{ background-color: var(--color-5); } .site tbody th , .site tbody th a[href]{ color: #eee; } .site table tr:nth-child(even){ background-color: var(--color-7); } .site pre{ overflow: auto; } .screen-reader-text{ display: none; } img{ display: block; max-width: 100%; height: auto; } .alignnone{ max-width: 100%; margin-bottom: 10px; } .alignright{ margin-left: 10px; margin-bottom: 10px; float: right; text-align: right; max-width: 100%; } .alignleft{ margin-right: 10px; margin-bottom: 10px; float: left; text-align: left; max-width: 100%; } .aligncenter{ margin: auto; margin-bottom: 10px; text-align: center; max-width: 100%; } .gallery img{ display: inline-block; } .wp-caption , .wp-caption-text , .gallery-caption{ font-style: italic; } blockquote cite{ display: block; margin: 16px 0px; padding: 0px 20px; text-align: right; } .wp-block-button:not(.is-style-outline) .wp-block-button__link , .site .wp-block-file__button[href]{ background-color: var(--color-1); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover , .site .wp-block-file__button[href]:hover{ background-color: var(--color-2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .wp-block-button.is-style-outline .wp-block-button__link{ border: 2px solid var(--color-1); } .wp-block-button.is-style-outline .wp-block-button__link:hover{ border: 2px solid var(--color-2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .site a.wp-block-button__link[href] , .site a.wp-block-button__link[href]:hover , .site .wp-block-file__button[href] , .site .wp-block-file__button[href]:hover{ color: #fff; } [sidebar] ul , [sidebar] ol{ padding: 10px; } .site .widget{ margin: 20px 0px; } .site .widget-title{ background-color: var(--color-4); margin: 10px 0px; padding: 10px 20px; color: #fefefe; } .header{ position : relative; } .header .bloginfo{ box-sizing: border-box; width : 100%; height : 150px; padding : 20px 50px; } .header .bloginfo .title , .header .bloginfo .description{ margin : 10px; font-weight: bold; } .header .bloginfo .title{ font-size : 50px; text-shadow: 2px 2px 4px #000000; } .header .bloginfo .description{ color: #555555; } .header .nav{ position: relative; padding: 10px 220px 10px 0px; background-color: var(--color-4); font-family: Verdana, sans-serif; font-weight: bold; } .header .nav , .header .nav input{ font-size: 16px; } .header .nav a{ text-decoration: none; color: #eeeeee; display: block; padding: 10px 15px; border-radius: 20px; background-color: rgba( 0 , 0 , 0 , 0 ); transition: background-color 0.2s; } .header .nav a:hover , .header .nav a[href]:focus{ background-color: var(--color-3); color: #fff; outline: none; } .header .nav ul{ margin: 0px; list-style-type: none; } .menu-item-has-children::after{ position: absolute; top: 0px; right: 0px; padding: 10px; color: #eeeeee; content: "\00BB"; transition: transform 0.5s; } body.mobile .menu-item-has-children::after{ transform: rotate( 90deg ); } .site .menu .menu-item-has-children>a{ padding-right: 25px; } .site .menu .menu-item-has-children:hover::after{ color: #fff; transform: rotate( 90deg ); } body.mobile .site .menu .menu-item-has-children:hover::after{ transform: rotate( -90deg ); } .header .nav .menu>ul ul , .header .nav .menu>li ul{ background-color: var(--color-4); padding: 10px; min-width: 200px; } .header .nav .menu>ul , .header .nav ul.menu{ padding-left: 40px; } .header .nav .search-form-wrapper{ position: absolute; right: 0px; top: 0px; } .menu>ul ul , .menu>li ul{ display: none; visibility : hidden ; position: absolute ; margin: 0px; padding: 0px; transform: translateY( 40px ); opacity: 0; transition: transform 0.5s , opacity 0.5s; } body:not(.mobile) .menu>ul ul.show , body:not(.mobile) .menu>li ul.show{ transform: translateY( 0px ); opacity: 1; z-index: 100; } body.mobile .site .menu>ul ul , body.mobile .site .menu>li ul{ display: block; visibility : hidden; position: static; box-sizing: border-box; height: 0px; padding: 0px 10px; overflow: hidden; transform: translateY( 0px ); opacity: 1; transition: height 0.5s , opacity 0.5s; } .menu li{ white-space: nowrap; position: relative; } .menu li{ display: block; } .header .nav .menu>li , .header .nav .menu>ul>li{ display: inline-block; } #page .header form{ padding: 0px; } #page .header .search-form label{ display: block; } #page .header .search-form input{ margin: 10px; padding: 8px 20px 8px 20px; border:2px solid var(--color-1); border-radius: 20px; background-color: var(--color-3); outline: none; width: 200px; color: #eee; font-weight: bold; transition: width 1s; } #page .header .search-form input::placeholder{ color: #ccc; } #page .header .search-form input:focus{ width: 300px; } #page .header .search-form button{ display: none; float: right; margin-right: -40px; } .main-wrapper{ text-align: center; } #main{ width: 100%; box-sizing: border-box; display: inline-block; padding: 20px 0px; text-align: left; } body.page .main-wrapper{ padding: 0px 10px; } body.page .content-area{ padding: 20px 10px; } #main #center{ display: inline-block; text-align: left; } #main #content{ text-align: left; } #content{ box-sizing: border-box; } .posts .post-wrapper{ margin-bottom: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .posts .post-wrapper>article{ padding: 10px 20px; } article .time , article .time[href] , article .author{ color: #666666; font-weight: bold; } .post .content a[href]{ text-decoration: underline !important; } .posts article h2{ margin: 0px 0px 5px 0px; } .posts article .thumbnail img{ width: 250px; height: auto; object-fit: cover; } .posts article img[class*="post-thumbnail"]{ margin-left: 10px; width: 200px; height: auto; max-width: 40%; float: right; } .posts .post-wrapper{ background-color: var(--color-9); } .posts article.sticky{ background-color: var(--color-8); } .post .author{ text-align: right; font-style: italic; margin: 20px 0px; padding-right: 20px; } .post .tags{ margin: 10px 0px; } .post .tags a[href]{ font-weight: bold; } .nav-links{ text-align: center; padding-bottom: 20px; } .nav-links .next{ float: right; } .nav-links .prev{ float: left; } .nav-links .page-numbers , .nav-links .page-numbers[href]{ margin: 5px; padding: 10px 20px; display: inline-block; background-color: var(--color-1); color: #eee; font-weight: bold; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .nav-links .page-numbers.current{ background-color: var(--color-5); } .nav-links .page-numbers[href]:hover{ background-color: var(--color-3); color: #fefefe; } .clear-both{ clear: both; } #content{ width: 100%; } .content-area{ margin: 10px auto; padding: 0px 10px; border-radius: 10px; width: 100%; box-sizing: border-box; overflow-x: hidden; text-overflow: ellipsis; } .content-area:not(.posts){ background-color: var(--color-9); } .content-area .site-main,.content-area .comments-wrapper{ padding: 10px; } .comment-body ul , .comment-body ol , .comment-body li , .content ul , .content ol, .content li{ overflow-x: visible; } .single .post .entry-title{ margin: 10px 0px; color: var(--color-3); } .site .page-title{ color: var(--color-3); } .single .post .thumbnail{ float: left; margin-right: 10px; } .single .post .thumbnail img{ width: 250px; height: 150px; object-fit: cover; } .single .content{ margin: 10px 0px; text-align: left; } .site .page-links .post-page-numbers , .site .page-links .name{ margin: 5px; padding: 8px 10px; border-radius: 4px; display: inline-block; } .site .page-links a.post-page-numbers:hover{ color: #ccc; background-color: var(--color-4); } .comments-wrapper ul , .comments-wrapper ol{ margin: 0px; padding-left: 10px; } .comment{ margin: 10px 0px; } .comment.bypostauthor .comment-body{ background-color: var(--color-6); } .comment-body{ padding: 12px; border-radius: 10px; } .comment-body:hover{ background-color: #ccc; } .comment.bypostauthor .comment-body:hover{ background-color: var(--color-7); } .comment-author{ margin-bottom: 10px; } .comment-author img.avatar{ float: left; width: 50px; height: 50px; margin-right: 10px; object-fit: cover; } .comment-author cite{ font-size: 20px; } .comments-header , .comment-meta a[href] , .comment-reply-title{ color: #444444; } #page .comment-respond textarea{ margin: 10px 0px 0px 0px; max-width: 100%; box-sizing: border-box; } .comments-wrapper .form-submit{ text-align: right; padding-right: 40px; } #center{ width: 100%; box-sizing: border-box; } [sidebar=main-left] , [sidebar=main-right]{ padding: 10px; box-sizing: border-box; height: 100%; } [sidebar=main-left]>.inner , [sidebar=main-right]>.inner{ background-color: var(--color-9); padding: 10px; border-radius: 10px; } #main .menu{ margin: 10px 0px; padding: 0px; list-style-type: none; font-weight: bold; } #main .menu>li{ border-top: 1px solid var(--color-3); transition: padding-left 0.2s; } #main .menu>li.menu-item-has-children::after{ color: var(--color-3); } #main .menu>li.menu-item-has-children:hover::after{ color: var(--color-5); } #main .menu>li:first-child{ border-top: none; } #main .menu>li:hover{ padding-left: 10px; } #main .menu>li:hover>a{ color:var(--color-5); } #main .menu ul{ background-color: var(--color-1); margin: 0px; padding: 0px; min-width: 200px; list-style-type: none; } #main .menu a{ display: block; padding: 10px; text-decoration: none; color: var(--color-3); } #main .menu ul>li:hover{ background-color: var(--color-3); } #main .menu ul a{ color: #f0f0f0; } .site .widget_archive ul{ padding: 10px; list-style-type: none; } .site .widget_archive a{ display: block; padding: 4px 10px; border-radius: 4px; color: var(--color-3); text-decoration: none; } .site .widget_archive a:hover{ background-color: var(--color-1); color: #f2f2f2; } .site .footer .widget_archive a:hover{ background-color: var(--color-4); } .site .widget_archive a:active{ background-color: var(--color-5); color: #f2f2f2; } #main .widget_tag_cloud a{ text-decoration: none; color: var(--color-1); } #main .widget_tag_cloud a:hover{ color: var(--color-5); } .site .footer .widget_tag_cloud a{ color: #aaa; } .site .footer .widget_tag_cloud a:hover{ color: #fff; } #main .widget_recent_entries ul{ padding: 10px; } #main .widget_recent_entries>ul{ border: 1px solid var(--color-1); border-radius: 12px; background-color: var(--color-3); } #main .widget_recent_entries li{ margin: 5px 0px; border-radius: 12px; background-color: var(--color-1); } #main .widget_recent_entries li:hover{ background-color: var(--color-5); } #main .widget_recent_entries li>a{ display: block; padding: 10px; color: #f0f0f0; text-decoration: none; font-weight: bold; } #main .widget_recent_entries li>a:hover{ color:#fefefe; } #main .widget_recent_comments ol{ padding: 0px; } #main .widget_recent_comments ol>li>article>*{ margin: 0px; } #main .widget_recent_comments a{ color:var(--color-5); text-decoration: none; } #main .widget_recent_comments a:hover{ color: var(--color-1); text-decoration: underline; } .site .widget_recent_comments .wp-block-latest-comments , .site .widget_recent_comments #recentcomments{ padding: 0px; } .site .widget_recent_comments .wp-block-latest-comments>li , .site .widget_recent_comments #recentcomments>li{ margin: 5px 0px; padding: 10px; border-radius: 10px; } #main .widget_recent_comments .wp-block-latest-comments>li:hover , #main .widget_recent_comments #recentcomments>li:hover{ background-color: #ccc; } .site .footer .widget_recent_comments .wp-block-latest-comments>li:hover , .site .footer .widget_recent_comments #recentcomments>li:hover{ background-color: var(--color-0); } #main .widget_calendar *{ border-color: var(--color-5); } #main .widget_calendar table th{ background-color: var(--color-6); } #page .widget_search form{ text-align: center; padding: 0px 5px; } #page .widget_search form input{ margin: 0px; box-sizing: border-box; width: 100%; text-align: left; } #page .widget_search form input:not([type=submit]):focus{ outline: #222222 dashed 1px; outline-offset: -5px; } #page .widget_search form [type=submit]{ margin: 5px; padding: 10px 40px; width: auto; text-align: center; } #main .wp-block-search__inside-wrapper{ display: block; } #page .footer .widget_search form [type=submit]{ margin: 0px 10px; } #page .widget_search.widget_block label{ display: none; } #page .widget_search button .screen-reader-text{ display: inline-block; position: static; width: auto; height: auto; margin: auto; } #page .widget_search button .fa-search{ display: none; } .widget_pages>ul , ul.wp-block-page-list{ box-sizing: border-box; border: 1px solid var(--color-9); border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .site .footer .widget_pages>ul , .site .footer ul.wp-block-page-list{ border: 1px solid var(--color-3); box-shadow: none; } .site .footer .widget_pages>ul:hover , .site .footer ul.wp-block-page-list:hover{ background-color: var(--color-2); } .widget_pages>ul ul , ul.wp-block-page-list ul{ margin-left: 8px; padding: 0px; box-sizing: border-box; height: 0px; overflow: hidden; visibility: hidden; transition: height 0.5s; } .widget_pages>ul li , ul.wp-block-page-list li{ margin: 2px 0px; padding: 4px 10px; } .widget_pages>ul li>a[href] , ul.wp-block-page-list li>a[href]{ display: inline-block; } .widget_pages>ul li:hover>a[href] , ul.wp-block-page-list li:hover>a[href]{ text-decoration: underline !important; } .widget_pages ul a , ul.wp-block-page-list a , ul.wp-block-categories-list a{ font-weight: bold; } .footer{ padding: 5px; background-color:var(--color-1); color: #fff; } .footer .widget-title{ background: none; } .footer a[href]{ color: var(--color-6); } .footer a[href]:hover{ color: var(--color-8); } .footer li>a[href]{ display: block; color: #aaa; } .footer li>a[href]:hover{ color: #fff; } .footer-2 [sidebar]{ float: left; padding: 10px; box-sizing: border-box; } .footer .sidebars-1 [sidebar], .footer .sidebars-2 [sidebar],.footer .sidebars-3 [sidebar]{ width: 33.3%; } .footer .sidebars-4 [sidebar]{ width: 25%; } .site .mobile-mode{ visibility: hidden; } @media only screen and (max-width: 900px){ body .site{ margin: 10px; } body.mobile .site .menu>ul ul , body.mobile .site .menu>li ul{ position: static; padding: 0px 0px 0px 5px; } body .header .nav{ padding-right: 0px; } body .menu-item-has-children::after{ padding: 8px 12px; } body .header .nav .search-form-wrapper{ position: static; padding-left: 20px; } body .header .menu ul , body .header ul.menu{ box-sizing: border-box; width: 100%; } body .header .nav .menu>ul , body .header .nav ul.menu{ padding: 0px 20px; } body .header .menu ul::after , body .header ul.menu::after{ display: block; content: ""; clear: both; } body .header .menu>li{ float: left; width: 50%; } body .site .footer .footer-2 [sidebar]{ width: 50%; } body .site .mobile-mode{ visibility: visible; } } @media only screen and (max-width: 600px){ body .header .bloginfo{ padding: 20px; } body .header .bloginfo .title{ font-size: 35px; } body .header .menu>li{ float: left; width: 100%; } }