«ميدياويكي:Common.css»: الفرق بين المراجعتين
من Sudan Memory
(٩ مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر ٨١: | سطر ٨١: | ||
/******************************************************************************/ | /******************************************************************************/ | ||
+ | |||
+ | /* | ||
+ | =============================================================================== | ||
+ | Side2Side template: جنبالجنب | ||
+ | =============================================================================== | ||
+ | */ | ||
+ | |||
+ | .side2side { | ||
+ | display: flex; | ||
+ | overflow-x: auto; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | .side2side div { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .side2side div:first-child { | ||
+ | margin-left: 1em; | ||
+ | } | ||
/* | /* | ||
سطر ٩١: | سطر ١٠٩: | ||
text-align: center; | text-align: center; | ||
white-space: pre; | white-space: pre; | ||
+ | position: relative; /* required for numbering */ | ||
+ | } | ||
+ | .bNumbered::after { | ||
+ | content: attr(data-number); /* Use the data-number attribute for content */ | ||
+ | position: absolute; /* Position the number outside the paragraph */ | ||
+ | right: 505px; /* Aligned at edge of div, in the left padding */ | ||
+ | opacity: 0.25; | ||
} | } | ||
.bFree { | .bFree { | ||
text-align: right; | text-align: right; | ||
padding-right: 50px; | padding-right: 50px; | ||
+ | white-space: pre-wrap; | ||
} | } | ||
.bComment { /* Primarily for embedded notes */ | .bComment { /* Primarily for embedded notes */ | ||
text-align: justify; | text-align: justify; | ||
} | } | ||
− | . | + | .bCommentCenter { /* Primarily for embedded notes */ |
text-align: center; | text-align: center; | ||
} | } | ||
سطر ١٣٨: | سطر ١٦٤: | ||
.abyat, .musdar { | .abyat, .musdar { | ||
display: table; | display: table; | ||
+ | white-space: pre-wrap; | ||
} | } | ||
.poemBody { | .poemBody { | ||
display: table-cell; | display: table-cell; | ||
− | width: | + | width: 500px; |
vertical-align: middle; | vertical-align: middle; | ||
− | padding-left: | + | padding-left: 45px; |
} | } | ||
.poemGutter { | .poemGutter { | ||
سطر ١٥٢: | سطر ١٧٩: | ||
border-right: solid 1px #aaa; /* Splitting line from body */ | border-right: solid 1px #aaa; /* Splitting line from body */ | ||
white-space: pre-wrap; /* Preserve line breaks while allowing long lines to wrap */ | white-space: pre-wrap; /* Preserve line breaks while allowing long lines to wrap */ | ||
− | |||
− | |||
− | |||
} | } | ||
.bDimOthers .beit, .bDimOthers hr { | .bDimOthers .beit, .bDimOthers hr { |
المراجعة الحالية بتاريخ ١٩:٠٣، ٢٩ مارس ٢٠٢٤
/* ستؤثر الأنماط المتراصة (CSS) المعروضة هنا على كل الواجهات */ /* Added by Abdalla, 2020-12-05, to fix the font scaling problem in iOS; * See https://stackoverflow.com/questions/20924039/wrong-font-size-when-using-float-right-in-css-on-mobile-safari * Also made fonts larger */ body { font-size: larger; /*font-size: 110%;*/ text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } .quoted { border-right: solid 1px; padding-right: 10px; /*color:blue;*/ } .gutter { display:table-cell; vertical-align:middle; padding-right:50px; opacity:0.5; border-right:solid 1px #aaa } /* Added by Abdalla, 2024-03-11, to improve the font of text-entry pane */ #wpTextbox1 { font-family: inherit; } /***************************** Nested Tree Lists ******************************/ ul.nestedTree { list-style-type: none; list-style-image: none; } ul.treeRoot { margin: 0; padding: 0; } .treeBranch { cursor: pointer; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .treeBranch::before { content: "+"; color: black; display: inline-block; margin-left: 3px; width: 14px; } .treeBranch-down::before { content: "–"; } .treeBranch-nested { display: none; } .treeBranch-empty::before { content: " " ; margin-left: 17px ; display: inline-block; } .treeBranch-active { display: block ; } /******************************************************************************/ /* =============================================================================== Side2Side template: جنبالجنب =============================================================================== */ .side2side { display: flex; overflow-x: auto; white-space: nowrap; } .side2side div { display: inline-block; } .side2side div:first-child { margin-left: 1em; } /* =============================================================================== Poem formatting =============================================================================== */ p.beit { text-align: center; white-space: pre; position: relative; /* required for numbering */ } .bNumbered::after { content: attr(data-number); /* Use the data-number attribute for content */ position: absolute; /* Position the number outside the paragraph */ right: 505px; /* Aligned at edge of div, in the left padding */ opacity: 0.25; } .bFree { text-align: right; padding-right: 50px; white-space: pre-wrap; } .bComment { /* Primarily for embedded notes */ text-align: justify; } .bCommentCenter { /* Primarily for embedded notes */ text-align: center; } .bEmph { color: #DC143C; } span.bStaggerOffset { display: inline-block; width: 75px; } span.bGap { display: inline-block; width: 0; } span.bPrefix, span.bSuffix { width: 25px; display: inline-block; /*color: red;*/ } span.bPrefix { text-align: end; } span.bSuffix { text-align: start; } span.bJustified { display: inline-flex; align-items: baseline; justify-content: space-between; /* Justify content */ } .abyat hr { margin: 20px auto; } .abyat { user-select: text; -webkit-user-select: text; } .abyat, .musdar { display: table; white-space: pre-wrap; } .poemBody { display: table-cell; width: 500px; vertical-align: middle; padding-left: 45px; } .poemGutter { display: table-cell; vertical-align: middle; padding-right: 20px; /* Add an offset from separating line */ opacity: 0.5; /* Grayout */ border-right: solid 1px #aaa; /* Splitting line from body */ white-space: pre-wrap; /* Preserve line breaks while allowing long lines to wrap */ } .bDimOthers .beit, .bDimOthers hr { opacity: 0.25; } .bDimOthers .bEmph { color: inherit; opacity: 1; }