«ميدياويكي:Common.css»: الفرق بين المراجعتين
من Sudan Memory
(٣١ مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر ١: | سطر ١: | ||
/* ستؤثر الأنماط المتراصة (CSS) المعروضة هنا على كل الواجهات */ | /* ستؤثر الأنماط المتراصة (CSS) المعروضة هنا على كل الواجهات */ | ||
+ | |||
/* Added by Abdalla, 2020-12-05, to fix the font scaling problem in iOS; | /* 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 | * See https://stackoverflow.com/questions/20924039/wrong-font-size-when-using-float-right-in-css-on-mobile-safari | ||
سطر ٧: | سطر ٨: | ||
body { | body { | ||
font-size: larger; | font-size: larger; | ||
+ | /*font-size: 110%;*/ | ||
text-size-adjust: 100%; | text-size-adjust: 100%; | ||
-ms-text-size-adjust: 100%; | -ms-text-size-adjust: 100%; | ||
سطر ١٦: | سطر ١٨: | ||
border-right: solid 1px; | border-right: solid 1px; | ||
padding-right: 10px; | padding-right: 10px; | ||
− | color:blue; | + | /*color:blue;*/ |
} | } | ||
سطر ٢٤: | سطر ٢٦: | ||
padding-right:50px; | padding-right:50px; | ||
opacity:0.5; | opacity:0.5; | ||
− | border-right:solid 1px | + | 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 { | .treeBranch { | ||
− | cursor: pointer | + | cursor: pointer; |
− | -webkit-user-select: none | + | -webkit-user-select: none; /* Safari 3.1+ */ |
− | -moz-user-select: none | + | -moz-user-select: none; /* Firefox 2+ */ |
− | -ms-user-select: none | + | -ms-user-select: none; /* IE 10+ */ |
− | user-select: none | + | user-select: none; |
} | } | ||
.treeBranch::before { | .treeBranch::before { | ||
− | content: "+" | + | content: "+"; |
− | color: black | + | color: black; |
− | display: inline-block | + | display: inline-block; |
− | margin-left: 3px | + | margin-left: 3px; |
− | width: 14px | + | width: 14px; |
} | } | ||
.treeBranch-down::before { | .treeBranch-down::before { | ||
− | content: " | + | content: "–"; |
} | } | ||
.treeBranch-nested { | .treeBranch-nested { | ||
− | display: none | + | display: none; |
} | } | ||
.treeBranch-empty::before { | .treeBranch-empty::before { | ||
− | content: " " | + | content: " " ; |
− | margin-left: 17px | + | margin-left: 17px ; |
− | display: inline-block | + | display: inline-block; |
} | } | ||
.treeBranch-active { | .treeBranch-active { | ||
− | display: block | + | 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; | ||
} | } |
المراجعة الحالية بتاريخ ١٩:٠٣، ٢٩ مارس ٢٠٢٤
/* ستؤثر الأنماط المتراصة (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; }