@charset "UTF-8"; /* reset kinde of */ * { box-sizing: border-box; outline: none !important; } .mrg-Tx { margin-top:30px; } .mrg-B15x { margin-bottom: 26px; } /* global */ p { margin: 0.25em 0; } bdi { direction: rtl; } .WhoMade { background: rosybrown; color: #000; border-radius: 100px 100px 0 0; font-weight: 600; } a { text-decoration: none; } img, table,audio { max-width: 100%; } video { width: 100% !important; height: auto !important; } .imgFeat { width: 100%; height: auto; } .hr { border: 0; height: 15px; background: transparent !important; } /* html */ html { scroll-behavior: smooth; } /* margin and padding and width */ .fit-CON { width: fit-content; } .Hfit-CON { height: fit-content; } .mrg0, .ul, .padOmrg0 { margin: 0; } .mrgb { margin-bottom: 1rem; } .pad10 { padding: 10px; } .pad15 { padding: 15px; } .padOmrg0 { padding: 0; } .mrg-B10 { margin-bottom: 10px; } .mrg-B15 { margin-bottom: 15px; } .mrg-T10 { margin-top: 10px; } .mrg-T15 { margin-top: 15px; } .mrg-R10 { margin-right: 10px; } .mrg-R15 { margin-right: 15px; } [name="NOT-0[۰]"] { display: none !important; } .mrg-L10 { margin-left: 10px; } .mrg-L15 { margin-left: 15px; } /* lists */ .ul { list-style-type: none; padding: 0; } .li:last-child,.lib:last-child { margin-bottom: 0; } .lib:last-child { border-bottom: 0; } /* flex */ .fl,.flW,.flRe,.flWRe,.plmc { display: flex; } .flW,.flWRe { flex-wrap: wrap; } .flRe,.flWRe { flex-direction: row-reverse; } .aliI-CE,.plmc { align-items: center; } .jusCo-SP { justify-content: space-between; } .jusCo-CE,.plmc { justify-content: center; } .fl-im { display: flex !important; } .aliI-flS { align-items: flex-start; } .aliI-flE { align-items: flex-end; } .fl1 { flex-grow: 1; flex-shrink: 1; } /* border-radius */ .borOK { border-radius: 50%; } .borNOK { border-radius: 10rem; } .bor-INH { border-radius: inherit; } /* buttons and input[type="submit"] */ .but, input[type="submit"] { padding: 0; border: 0; margin: 0; background: transparent; cursor: pointer; } /* positioning */ .por{ position: relative; } .pos,.farhana { position: absolute; } .farhana { top: 0; right: 0; bottom: 0; left: 0; inset: 0; } .zin0 { z-index: 0; } .zin1 { z-index: 1; } .zin2 { z-index: 2; } .zin3 { z-index: 3; } .zin4 { z-index: 4; } .zin5 { z-index: 5; } .zin6 { z-index: 6; } .zin7 { z-index: 7; } .zin8 { z-index: 8; } .zin9 { z-index: 9; } .zin10 { z-index: 10; } /* aligns */ .txt-R { text-align: right; } .txt-C,.plmc { text-align: center; } .txt-L { text-align: left; } .dir-L { direction: ltr; } .dir-R { direction: rtl; } /* summary */ summary { cursor: pointer; } .non-mark { list-style-type: none; } .non-mark::marker { color: transparent !important; } /* details topics... */ .non { display: block; } details .clBut .clos, details[open] .clBut .ope, .disp-N,[name="dis-N"] { display: none; } details[open] .clBut .clos { display: initial; } /* displays */ .disp-B { display: block; } /* float */ .floR { float: right; } .floL { float: left; } .clear { clear: both; } /* overflow */ .ovf-H { overflow: hidden; } .ovf-YS { overflow-y: scroll; } /* background and backG settings */ .backGSize { background-size: cover !important; } /* fonts settings */ .FSt-NOR { font-style: normal; } .FWe-NOR { font-weight: normal; } /* @key frames */ @keyframes fade-farhan { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes rot-farhan { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* animations */ .fade-ME, .stickyAs { animation: fade-farhan 0.6s linear 0s 1; } /* Fonts */ /* English Font */ @font-face { font-family: 'Poppins-Regular'; src: url('https://bayanbox.ir/download/3597202278100401580/Poppins-Regular.eot'); src: url('https://bayanbox.ir/download/3597202278100401580/Poppins-Regular.eot?#iefix') format('embedded-opentype'), url('https://bayanbox.ir/download/1068366696921114214/Poppins-Regular.svg#Poppins-Regular') format('svg'), url('https://bayanbox.ir/download/5947179238070229354/Poppins-Regular.ttf') format('truetype'), url('https://bayanbox.ir/download/4861806138071738912/Poppins-Regular.woff') format('woff'), url('https://bayanbox.ir/download/7211620908606122750/Poppins-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } /* Persian Font */ @font-face { font-family: 'Vazir-Regular'; src: url('//bayanbox.ir/download/4827310715344697348/Vazir.eot'); src: url('//bayanbox.ir/download/4827310715344697348/Vazir.eot?#iefix') format('embedded-opentype'), url('//bayanbox.ir/download/9079346587792044865/Vazir.woff2') format('woff2'), url('//bayanbox.ir/download/8618153108850776974/Vazir.woff') format('woff'), url('//bayanbox.ir/download/8657326714357973781/Vazir.ttf') format('truetype'); font-weight: normal; font-style: normal; } textarea, input, select, body, button, h1, h2, h3, h4, h5, h6, .followBx, .followThis, .cke_reset_all .cke_rtl * { font-family: 'Poppins-Regular','Vazir-Regular'; } body { background: #fff url('#'); /* به جای # تصویر پس زمینه کل سایت رو بگذارید */ font-size: 16px; } /* main section */ main { margin: 50px auto 0; } main { width: 680px; } /* side bar and article block */ aside, #article-block { padding: 10px; background: #fff; box-shadow: 0 0 3px #ddd; border-radius: 5px; } /* article block section */ #article-block { width: 455px; } /* header */ /* blog name and short description */ .Name-and-Short { background: rosybrown; border: 3px solid #745050; } .Name-and-Short * { position: relative; z-index: 1; } .Name-and-Short:after { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; right: 3px; inset: 3px; border: 2px dashed #7f5250; } .BLGN a { font-size: 20px; color: #704c4c; } .Name-and-Short strong.FWe-NOR { color: #3e1f1b; font-size: 14px; } /* header pictures */ header .fl span#_item1 { background: #e6c1c1 url('https://s4.uupload.ir/files/%DB%B2%DB%B0%DB%B2%DB%B1%DB%B0%DB%B7%DB%B2%DB%B6_%DB%B1%DB%B9%DB%B5%DB%B7%DB%B0%DB%B4_d5b_s8ku.png'); } header .fl span#_item2 { background: #e6c1c1 url('https://s4.uupload.ir/files/0beb88cd-99bd-440b-962c-e80ab23f7573_8dws_u7.png'); } header .fl span#_item3 { background: #e6c1c1 url('https://s4.uupload.ir/files/872ac626-bc8f-491e-88a1-f15e3704d8dc_vgpl_zimv.png'); } header .fl span { width: 30%; height: 136.5px; background-size: cover !important; } header .fl span:after { content:''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; inset: 5px; border: 2px dashed #fff; } /* posts */ .post-list-title { padding: 10px; text-align: center; font-size: 14px; margin-bottom: 26px; color:#000; background:#fff; border: 2px solid #000; } .post-I { background: #fff; border: 2px solid #000; margin-bottom:26px } /* author in post */ .authPos_1 { flex-direction: column; bottom: -10px; right: 10px; } .authPos_12 { top: -21px; } /* top detais like author name and The publish date */ .TopDet { padding-top: 15px; padding-bottom: 3px; font-size: 14px; } /* author name */ .auth-n { color: #000; } /* publish date */ .date-p { color: #000; } /* circle divider */ span.div { width: 5px; height: 5px; background: #f4cbcb; border-radius: 100px; margin: 0 5px; } /* post name */ .postName_1 a { color: rosybrown; font-size: 16px; } /* footer post */ .haveToolTip.x { margin-right: 5px; padding: 3.5px 13px 2.5px; font-size: 17px; } /* like button */ .like { background: #f3caca; color: #000; } .like:hover { color: #a51212; background: #fff; } .rate-counter { position: absolute; } .rated .like { color:#fff; background:#795548; } /* copy link button */ .copyLink { background: #f3caca; color: #000; } .copyLink:hover { color: #b85116; background: #fff; } /* go to comments add form button */ .goCom-p { background: #f3caca; color: #000; } .goCom-p:hover { color: chocolate; background: #fff; } /* tooltip for buttons */ .haveToolTip.x span { top: 18px; pointer-events: none; padding: 2.5px 16px; max-width: 170px; border-radius: 5px; background:#fff; box-shadow: 0 0 3px #e8e8e8; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 13.5px; color: #000; white-space: nowrap; opacity: 0; left: 50%; transform: translateX(-50%); transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); -webkit-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); -moz-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); -o-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .haveToolTip.x:hover span { top: -30px; opacity: 1; } /* read more button */ .read_more { font-size: 14.5px; padding: 2.5px 13px; background: #e9c5c5; color: #000; } .read_more:after { content: ''; border: 1px dashed #c77d7d; inset: 2px; position: absolute; } .read_more:hover { background: cadetblue; color: #000; } .read_more:hover:after { border-color: white; } .img-lastPostCommenter a { height: 32px; position: relative; display:none; } .img-lastPostCommenter a:nth-child(1), .img-lastPostCommenter a:nth-child(2), .img-lastPostCommenter a:nth-child(3), .img-lastPostCommenter a:nth-child(4), .img-lastPostCommenter a:nth-child(5), .img-lastPostCommenter a:nth-child(6) { display: block; } .img-lastPostCommenter a:nth-child(1) { left: 0; } .img-lastPostCommenter a:nth-child(2) { left: -20px; } .img-lastPostCommenter a:nth-child(3) { left: -40px; } .img-lastPostCommenter a:nth-child(4) { left: -60px; } .img-lastPostCommenter a:nth-child(5) { left: -80px; } .img-lastPostCommenter a:nth-child(6) { left: -100px; } .img-lastPostCommenter a:hover { margin-right: 35px; transform: rotate(360deg); } /* laber last comments in posts */ .labelLastComInPosts { color: #795548; font-size: 14px; padding: 1.5px 6px; background: #f4cd9b; border-radius: 10px 0 0 10px; } /* Text in posts */ .mainTxt { color: #000; font-size: 13.5px; margin-top: 4px; } /* in posts page */ .post-I.x { margin-bottom: 15px; } /*comments in posts*/ .comLis-I { border: 2px solid; } .comLis-I.USER { border-color: #000; background: #fff; } .detail-comments { padding: 2.5px; margin-bottom: 6px; } .detail-comments.USER { background:rosybrown } .name-comment-- { font-size: 16px; } .USER .name-comment-- { color: #000; } .detail-comments a { width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; background: #785a5a; margin-right: 5px; border-radius: 5px; color: #fff; } .detail-comments.USER a i { height: 18px; font-size: 15px; } .detail-comments.USER .comment_date { color: #000; } .comment_date { font-size: 13.5px; padding-right: 5px; } .PADx { padding: 10px; } .ComTxt-- { font-size: 13.5px; width: calc(100% - 63px); padding: 5px 13px 5px 5px; border-radius: 3px; position: relative; z-index: 3; } .ComTxt--.USER, .ComTxt--.USER:after { background: #f3f3f3; color: #000; border-right-color:#f3f3f3 !important; } .ComTxt--.USER a { color: #000; padding: 0.5px 6px; background: rosybrown; border-radius: 100px; } .detail-comments.Admin { BACKGROUND: #f3caca; } .comLis-I.Admin { background: #e88b8b; border-color: brown; } .ComTxt--.Admin, .ComTxt--.Admin::after { background: #ffe1e1; border-right-color: #ffe1e1 !important; color: #000; } .Admin .name-comment-- { color: #000; } .detail-comments.Admin .comment_date { color: #000; } .ComTxt-- a { padding: 0.4px 10px; border-radius: 100px; margin: 0 6px; } .ComTxt--.Admin a { background: brown; color: #fff; } .ComTxt--.USER a { background: rosybrown; color: #000; } .ComTxt--:after { content: ''; position: absolute; border-right: 10px solid; border-bottom: 10px solid #0000; top: 10px; right: -4px; transform: rotate(43deg); z-index: 0; } /*comment form*/ #comment_box { border: 2px solid #000; background:#fff; padding: 10px; font-size: 13.5px; } .smalltip, .bComForm .commentAvatar span { display: none !important; } .formField2 .fldcontent { padding: 0; margin: 0; } .formField2 label { text-align: right; font-size: 12.5px; } select, div.inputFix input.text { color:#795548; border: 0; padding: 2px; font-size: 13.5px; background: #c0afa9 ; width: 100%; appearance: none; } div.inputFix { padding: 0; } label,input[type="checkbox"] { cursor: pointer; } .formField2 textarea { width: 100%; border: 0; margin-top: 3px; background: #c0afa9; resize: none; max-height: 100px; font-size: 13.5px; color:#795548; } .bComForm .commentAvatar img { border: 0; padding: 0; border-radius: 100px; box-shadow: 0 0 5px #795548; } .bComForm .sendbutton.hasCheckbox,#bComSub { margin: 0 auto; padding: 2.5px 12px; background: #4caf50; color: #000; border-radius: 100px; } input[type=checkbox] { filter: invert(0.5); } input[type="checkbox"]:hover { filter: none; } #comment_box .item_success { border: 0; margin: 0; border-radius: 100px; color: green; background: #cbf6df; font-size:13.5px; } #comment_box .item_err { border: 0; border-radius: 100px; font-size: 13.5px; color: #e0501f; background: antiquewhite; } #comment_box .item_err .icon, #comment_box .item_success .icon{ position: relative; background: none; } #comment_box .item_err .icon:after, #comment_box .item_success .icon:after{ content: '❌'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; inset: 0; } #comment_box .item_success .icon::after { content: "✔"; text-align: center; color: black; background: #ffeb3b; border-radius: 100px; } /*tags in posts*/ .tags-in-post { padding: 10px; border: 2px solid #000; } .name-inP { color: #000; font-size: 18px; } .pTgs { margin: 0 0 5px 5px; font-size: 13.5px; } .pTgs a { color: #000; padding: 0.5px 6px; background: antiquewhite; border-radius: 4px; } /*comment count in posts and pages*/ .cmCount { border: 2px solid #000; font-size: 15px; color: #000; } /*bread crumbs*/ /* breadcrumbs */ .breadCrumbs { background: rgb(255, 255, 255); font-size: 12.5px; padding-bottom: 4px; border: 2px solid #000; } .breadCrumbs ul li { margin-left: 5px; margin-bottom: 5px; } .home.bread-I a { color: lightcoral; } .bread-I:after { content: '/'; position: relative; top: 1px; font-size: 10px; color: burlywood; } .bread-I.Pcat-I a { color: lightseagreen; } .Where-User-is { color: #000; } /*typography*/ .mainTxt a { margin: 4px; background: #f4dcdc; padding: 0.3px 7px; color: #000; border-radius: 17px; display:inline-block; } .mainTxt h1 { font-size: 21px; margin: 0; padding: 6px 0; } .mainTxt hr { margin-left: -16px; margin-right: -16px; border: 0; border-bottom: 2px solid #000; } .mainTxt ul li { list-style-type: square; padding-right: 7px; border-right: 2px solid #000; } .mainTxt ul li::marker { color: rosybrown; } .mainTxt ul li:last-child { border-bottom: 2px solid #000; padding-bottom: 7px; } .mainTxt ul li:hover { border-right-color: #e91e63; color:#e91e63; } .mainTxt blockquote { padding: 10px; margin-right: -16px; margin-left: -15px; background: #fff0f0; border: 0; border-top: 2px solid #000; border-bottom: 2px solid #000; color: #000; font-style: normal; margin-top: 35px; position: relative; } .mainTxt audio { width: 100%; height: 35px; filter: invert(1) drop-shadow(2px 4px 6px black); display: block; margin: 17px 0; } .mainTxt video { width:100% !important; height:auto !important; } /*pagination*/ .pagination-box { border: 2px solid #000; padding: 6px 6px 1px 6px; } .pagination-box a { padding: 2.5px 13px; background: rosybrown; color: #000; border-radius: 100px; text-align: center; margin-left: 6px; margin-bottom: 6px; } .pagination-box a.current { background: #795548; color: #fff; } /* aside or side bar */ aside { width: 210px; height: fit-content; position: sticky; position: -webkit-sticky; top: 5px; } /* blog image */ .blog_image { width: 190px; height: 190px; } .blog_image img { object-fit: cover; object-position: center; height: 100%; width: 100%; -o-object-fit: cover; -o-object-position: center; } /* menu button */ .button .sum { color: transparent !important; } .button.menu .sum span { color: #502f2f; } .button.menu .sum { background: rosybrown; padding: 3px; border-radius: 100px; border: 2px solid #745050; } .followME { padding: 3px; background: palegoldenrod; color: #7e7c64; border: 2px solid #b1ae8f; border-radius: 100px; display:none; } .followME[href*="https://blog.ir/panel/-/followed_blogs?"], .flWWW[href*="https://blog.ir/panel/-/followed_blogs?"]{ display: block; } .menu-I a { background: #d3ab89; color: #fff; } .menu-I a[href*="https://blog.ir/panel/-/followed_blogs?follow"] { background: #000; color: #fff; border-radius: 6px; } /* buttons settings */ .secSide { position: absolute; left: 225px; width: 270px; top: 0; background: #e7b891; max-height: 300px; overflow: auto; z-index: 10; } .secSide::-webkit-scrollbar { width: 6px; height: 6px; } .secSide::-webkit-scrollbar-thumb { background: #000; border-right: 3px solid #fff; } .headSide { background: linear-gradient(45deg, rosybrown, #714c4c); border-radius: 100px; color: #fff; } .button .sum i { color: #000; } .button[open] .sum, .button.x[open] .sumx { border-color: darkred; background: red; } .button[open] .sum i.dripicons-cross { color: #fff; } .button .sum i.dripicons-cross, .button.menu[open] .sum span, .button.x[open] .sumx i { display: none; } .button[open] .sum i.dripicons-cross { display: block; font-size: 16px; position: relative; top: 3px; } .button.x[open] .sumx i.dripicons-cross { top: 0; } .sumx:after { content: attr(name); position: absolute; left: 50%; top: 25px; z-index: 10; background: rosybrown; border-radius: 3px; color: #fff; font-size: 12.5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 15px; pointer-events: none; transform: translateX(-50%); opacity: 0; transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); -webkit-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); -moz-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); -o-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .sumx:hover:after { opacity: 1; top: -45px; } .button.x .sumx { padding: 5px 5px 0; background: #a77a7a; font-size: 16px; } .butcONS details { margin: 0 0 5px 5px; } .button.x { width: 24.5%; flex-grow: 1; } .button.x .sumx i { color: #000; } .button.x .sumx:before { content: ''; position: absolute; top:2px; left:2px; right:2px; bottom:2px; inset: 2px; border: 1px dashed #fff; border-radius: inherit; } /* about blog */ .aboImg { border-radius: 5px; } .longdesc { background: #fff; border-radius: 5px; font-size: 12.5px; } .flWWW { color: #fff; background: #000; } /* recent comments */ .recCOM-I { background: #fff; border-radius: 5px; font-size: 11.5px; color: #585858; } .recCOM-I img { border-radius: 15px; } .recCOM-I .ex { width: calc(100% - 55px); } .recCOM-I .ex b.FWe-NOR { font-size: 14px; color: #000; padding: 2px; } /* post in side bar */ .img-pos-S { width: 48px; height: 48px; border-radius: 15px; background-size: cover !important; } .post-S-I { background: #fff; border-radius: 6px; } .post-S-I .ex { width: calc(100% - 58px); } .post-S-I .ex h4 { color: #000; font-size: 16px; } .post-S-I .ex span { color: #c7c7c7; font-size: 11.5px; } /* tag cloud */ .tagCL-I { margin: 0 0 3px 5px; } .tagCL-I a { color: #000; background: #fff; padding: 2.5px 6px; border-radius: 5px; font-size: 12.5px; } /* categories */ .cAT-i { background: #fff; border-radius: 5px; font-size: 14px; } .cAT-i i { color: #000; padding-left: 6px; } .cAT-i b { padding: 0.75px 6px; background: rosybrown; color: #000; border-radius: 21px; } /* categories children */ .catss li ul li { padding-right: 30px; } .catss li ul li:after { content: '↯'; background: #2f1a10; display: flex; width: 25px; height: 25px; justify-content: center; align-items: center; border-radius: 100px; color: #fff; position: absolute; top: 44%; right: 7px; transform: rotate(45deg) translateY(-50%); } /* link and daily links */ .link { background: #fff; padding: 6px; color: #000; font-size: 13.5px; border-radius: 5px; } /* archive & authors*/ .arch-I { background: #fff; font-size: 13.5px; border-radius: 5px; } .arch-I i { color: #000; padding-left: 6px; } .arch-I b { padding: 0.5px 6px; border-radius: 100px; background: palegoldenrod; color: #000; } /* stats */ .STAT-i { border: 3px solid #b6b391; padding: 5px; font-size: 12.5px; background: #eee8aa; } .STAT-i i { padding-left: 5px; } /* music list */ .music-I,.music-I * { background-size: cover !important; } .music-I { border-radius: 5px; padding: 3px; } .music-I:after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); border-radius: inherit; } .musImg { width: 45px; height: 45px; box-shadow: 0 0 6px #000; } .musImg audio { opacity: 0.5; width: 100px !important; max-width: 100px !important; height: 50px !important; max-height: 50px !important; min-width: 100px !important; min-height: 50px !important; position: absolute; left: -3px; top: -2px; } .name-mus { color: #fff; width:calc(100% - 50px); } .headers { padding: 5px; background: #e0c0c0; color: #000; } /* settings blog */ .mrg-Bx { margin-bottom: 25px; } .transAll *, .transIt { transition: all 0.6s ease-out; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; }