Template:FrontPage/styles.css: Difference between revisions
Dascent-wiki (talk | contribs) Dascent-wiki changed the content model of the page Template:FrontPage/styles.css from "CSS" to "Sanitized CSS" |
Dascent-wiki (talk | contribs) No edit summary |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/** CSS Style **/ | /** CSS Style **/ | ||
.isfrpage{display:block;width:100%;height:auto;margin:10px auto 20px auto;box-sizing:border-box;padding:.7em;} | .isfrpage{display:block;width:100%;height:auto;margin:10px auto 20px auto;box-sizing:border-box;padding:.7em;} | ||
.isflex | .isflex{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;} | ||
.info-box {display:block;border: 1px solid #ccc;border-radius: 5px;padding:0 0 1em;background-color: #f9f9f9;flex: 1;min-width: 280px;height:auto;} | |||
.isinner{display:block;width:95%;height:auto;margin:0 auto;text-align:left;word-break: break-all;} | |||
.isinner ul{display:block;width:100%;padding:0;} | |||
.isinner ul li{display:block;width:100%;padding:0;} | |||
.isinner ul li a{display:block;width:100%;padding:0;color:#36F;text-decoration:none;} | |||
.isinner ul li a:hover{display:block;width:100%;padding:0;color:#009;text-decoration:none;} | |||
.isinner ul li a.external{background-image:none;} | |||
.info-box-title {font-size: 1.2em;font-weight: bold;margin-top: 0;margin-bottom: 10px;padding: 8px;border-bottom: 1px solid #d6d6d6;} | |||
h3.info-box-title{background-color:#f1f1f1;color:#036;font-size:16px;} | |||
[class*="icn-"]{display:inline-block;width:40px;height:25px;margin-left:3px;margin-right:5px;vertical-align:middle;overflow:hidden;} | |||
span.icn-feather img{display:block;width:40px;height:300px;transform:translateY(0);} | |||
span.icn-star img{display:block;width:40px;height:300px;transform: translateY(-25px);} | |||
span.icn-hat img{display:block;width:40px;height:300px;transform: translateY(-48px);} | |||
span.icn-pen img{display:block;width:40px;height:300px;transform: translateY(-73px);} | |||
span.icn-moon img{display:block;width:40px;height:300px;transform: translateY(-98px);} | |||
span.icn-eye img{display:block;width:40px;height:300px;transform: translateY(-123px);} | |||
span.icn-hand img{display:block;width:40px;height:300px;transform: translateY(-148px);} | |||
span.icn-triket img{display:block;width:40px;height:300px;transform: translateY(-173px);} | |||
span.icn-yoga img{display:block;width:40px;height:300px;transform: translateY(-200px);} | |||
span.icn-announce img{display:block;width:40px;height:300px;transform: translateY(-225px);} | |||
span.icn-sound img{display:block;width:40px;height:300px;transform: translateY(-250px);} | |||
span.icn-cart img{display:block;width:40px;height:300px;transform: translateY(-275px);} | |||
.hrstyle{display:block;width:96%;height:1px;margin:10px auto 14px auto;background-color:#ccc;box-shadow:0 1px 3px #fff;} | |||
.featured-cover img{display:block;width:100%;height:auto;margin:0 auto;}.makeitgold{background-color:#f2f0e6;box-shadow:0 0 1px #d9d4b6;height:auto;padding:0;} | |||
.featured-cover{display:block;width:100%;height:auto;margin:0;text-align:center;flex: 1;} | |||
.isinner{display:block;width:100%;height:auto;margin:0 auto;text-align:left;word-break: break-all;flex: 1;} | |||
.isbox{display:block;width:90%;height:auto;margin:0 auto;text-align:left;word-break: break-all;flex: 1;} | |||
.makeitgold h1{display:block;width:100%;height:auto;margin:0 auto;text-indent:20px;font-size:1.4em;font-weight:600;color:#900;background-color:#F0ECD9;padding:.7em 0 .8em;}.isbox h4{font-size:1.3em;font-weight:600;color:#036;} | |||
. | .fullbanner,.fullbanner img{display:block;width:100%;height:auto;margin:0 auto;padding:0;text-align:center;background-color:#000;} | ||
. | /**Cards***/ | ||
[class*="icn-"]{display: | #appsfrpage .corpus {display: flex;flex-wrap: wrap;justify-content: center;gap: 20px; padding: 20px;} | ||
#appsfrpage .excard {flex: 1 0 300px; | |||
border: 1px solid #ccc;border-radius: 5px;padding:0 0 20px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);display: flex; | |||
flex-direction: column;min-height: 200px;} | |||
#appsfrpage .excard-inner{display:block;width:90%;height:auto;margin:10px auto 12px auto;padding:10px;} | |||
#appsfrpage .excard-cover{display:block;width:100%;height:auto;margin:0 auto 12px auto;padding:0;text-align:center;border-radius:5px 5px 0 0;overflow:hidden;background-color:#000;} | |||
#appsfrpage .excard-cover img{display:block;width:100%;height:250px;object-fit:cover;margin:0 auto;transform:scale(1);opacity:.5;transition: opacity .3s ease-in-out, transform 1.3s;}#appsfrpage .excard:hover img{opacity:1;transform:scale(1.2);} | |||
#appsfrpage .excard-title {font-size: 1.2em;font-weight: bold;margin-bottom: 10px;} | |||
#appsfrpage .excard-text {margin-bottom: 20px;flex-grow: 1;} | |||
#appsfrpage .excard-button {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 5px;text-decoration: none;text-align: center;align-self: flex-start;} | |||
#appsfrpage .appsinfo{display:block;min-width:80%;max-width:97%;height:auto;margin:10px auto 12px auto;padding:1em 0 1em;text-align:center;}#appsfrpage .appsinfo h3{font-size:1.7rem;color:#036;}#appsfrpage .appsinfo p{font-size:1.3rem;color:#888;} | |||
/** Random Card News **/ | |||
#randomWidgetContainer{width:100%;max-width:800px;margin:20px auto;padding:15px;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);background-color:#fff;box-sizing:border-box;} | |||
.widget-content{display:flex;align-items:center;gap:20px;} | |||
.widget-image-wrapper{flex-shrink:0;width:200px;border-radius:6px;overflow:hidden;} | |||
.widget-image-link{display:block;} | |||
.widget-image{width:100%;height:auto;display:block;object-fit:cover;border-radius:6px;} | |||
.widget-text-content{flex-grow:1;} | |||
.widget-title{font-size:1.5em;margin-top:0;margin-bottom:10px;} | |||
.widget-title-link{color:#007bff;text-decoration:none;font-weight:bold;} | |||
.widget-title-link:hover{text-decoration:underline;} | |||
.widget-excerpt{font-size:0.95em;line-height:1.5;color:#555;margin-bottom:15px;} | |||
.widget-read-more{display:inline-block;background-color:#007bff;color:white;padding:8px 15px;border-radius:5px;text-decoration:none;font-size:0.9em;transition:background-color 0.3s ease;} | |||
.widget-read-more:hover{background-color:#0056b3;} | |||
@media (min-width: 150px) and (max-width: 768px) {.isflex{flex-direction:column;}.info-box {border: 1px solid #ccc;border-radius: 5px;padding:0 0 1em;background-color: #f9f9f9;box-shadow: 2px 2px 5px rgba(0,0,0,0.1);flex: 1;min-width: 180px;}[class*="icn-"]{display:block;width:40px;height:25px;margin:10px auto 5px auto;overflow:hidden;}.info-box-title,h3.info-box-title {font-size: 1.1em;font-weight: 300;margin:0 auto 7px auto;padding: 8px 0 18px;border-bottom: 1px solid #ccc;text-align:center;}.makeitgold h1{display:block;width:100%;height:auto;margin:0 auto;text-indent:0;font-size:1.4em;font-weight:600;color:#900;background-color:#F0ECD9;padding:.7em 0 .8em;text-align:center;}#appsfrpage .excard {flex-basis: 100%;}.widget-content{flex-direction:column;text-align:center;}.widget-image-wrapper{width:100%;max-width:300px;margin-bottom:15px;}.widget-title{order:-1;margin-bottom:10px;}.widget-excerpt{margin-top:0;}.widget-read-more{margin-top:10px;} | |||
} | |||
Latest revision as of 07:01, 3 August 2025
/** CSS Style **/
.isfrpage{display:block;width:100%;height:auto;margin:10px auto 20px auto;box-sizing:border-box;padding:.7em;}
.isflex{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;}
.info-box {display:block;border: 1px solid #ccc;border-radius: 5px;padding:0 0 1em;background-color: #f9f9f9;flex: 1;min-width: 280px;height:auto;}
.isinner{display:block;width:95%;height:auto;margin:0 auto;text-align:left;word-break: break-all;}
.isinner ul{display:block;width:100%;padding:0;}
.isinner ul li{display:block;width:100%;padding:0;}
.isinner ul li a{display:block;width:100%;padding:0;color:#36F;text-decoration:none;}
.isinner ul li a:hover{display:block;width:100%;padding:0;color:#009;text-decoration:none;}
.isinner ul li a.external{background-image:none;}
.info-box-title {font-size: 1.2em;font-weight: bold;margin-top: 0;margin-bottom: 10px;padding: 8px;border-bottom: 1px solid #d6d6d6;}
h3.info-box-title{background-color:#f1f1f1;color:#036;font-size:16px;}
[class*="icn-"]{display:inline-block;width:40px;height:25px;margin-left:3px;margin-right:5px;vertical-align:middle;overflow:hidden;}
span.icn-feather img{display:block;width:40px;height:300px;transform:translateY(0);}
span.icn-star img{display:block;width:40px;height:300px;transform: translateY(-25px);}
span.icn-hat img{display:block;width:40px;height:300px;transform: translateY(-48px);}
span.icn-pen img{display:block;width:40px;height:300px;transform: translateY(-73px);}
span.icn-moon img{display:block;width:40px;height:300px;transform: translateY(-98px);}
span.icn-eye img{display:block;width:40px;height:300px;transform: translateY(-123px);}
span.icn-hand img{display:block;width:40px;height:300px;transform: translateY(-148px);}
span.icn-triket img{display:block;width:40px;height:300px;transform: translateY(-173px);}
span.icn-yoga img{display:block;width:40px;height:300px;transform: translateY(-200px);}
span.icn-announce img{display:block;width:40px;height:300px;transform: translateY(-225px);}
span.icn-sound img{display:block;width:40px;height:300px;transform: translateY(-250px);}
span.icn-cart img{display:block;width:40px;height:300px;transform: translateY(-275px);}
.hrstyle{display:block;width:96%;height:1px;margin:10px auto 14px auto;background-color:#ccc;box-shadow:0 1px 3px #fff;}
.featured-cover img{display:block;width:100%;height:auto;margin:0 auto;}.makeitgold{background-color:#f2f0e6;box-shadow:0 0 1px #d9d4b6;height:auto;padding:0;}
.featured-cover{display:block;width:100%;height:auto;margin:0;text-align:center;flex: 1;}
.isinner{display:block;width:100%;height:auto;margin:0 auto;text-align:left;word-break: break-all;flex: 1;}
.isbox{display:block;width:90%;height:auto;margin:0 auto;text-align:left;word-break: break-all;flex: 1;}
.makeitgold h1{display:block;width:100%;height:auto;margin:0 auto;text-indent:20px;font-size:1.4em;font-weight:600;color:#900;background-color:#F0ECD9;padding:.7em 0 .8em;}.isbox h4{font-size:1.3em;font-weight:600;color:#036;}
.fullbanner,.fullbanner img{display:block;width:100%;height:auto;margin:0 auto;padding:0;text-align:center;background-color:#000;}
/**Cards***/
#appsfrpage .corpus {display: flex;flex-wrap: wrap;justify-content: center;gap: 20px; padding: 20px;}
#appsfrpage .excard {flex: 1 0 300px;
border: 1px solid #ccc;border-radius: 5px;padding:0 0 20px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);display: flex;
flex-direction: column;min-height: 200px;}
#appsfrpage .excard-inner{display:block;width:90%;height:auto;margin:10px auto 12px auto;padding:10px;}
#appsfrpage .excard-cover{display:block;width:100%;height:auto;margin:0 auto 12px auto;padding:0;text-align:center;border-radius:5px 5px 0 0;overflow:hidden;background-color:#000;}
#appsfrpage .excard-cover img{display:block;width:100%;height:250px;object-fit:cover;margin:0 auto;transform:scale(1);opacity:.5;transition: opacity .3s ease-in-out, transform 1.3s;}#appsfrpage .excard:hover img{opacity:1;transform:scale(1.2);}
#appsfrpage .excard-title {font-size: 1.2em;font-weight: bold;margin-bottom: 10px;}
#appsfrpage .excard-text {margin-bottom: 20px;flex-grow: 1;}
#appsfrpage .excard-button {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 5px;text-decoration: none;text-align: center;align-self: flex-start;}
#appsfrpage .appsinfo{display:block;min-width:80%;max-width:97%;height:auto;margin:10px auto 12px auto;padding:1em 0 1em;text-align:center;}#appsfrpage .appsinfo h3{font-size:1.7rem;color:#036;}#appsfrpage .appsinfo p{font-size:1.3rem;color:#888;}
/** Random Card News **/
#randomWidgetContainer{width:100%;max-width:800px;margin:20px auto;padding:15px;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);background-color:#fff;box-sizing:border-box;}
.widget-content{display:flex;align-items:center;gap:20px;}
.widget-image-wrapper{flex-shrink:0;width:200px;border-radius:6px;overflow:hidden;}
.widget-image-link{display:block;}
.widget-image{width:100%;height:auto;display:block;object-fit:cover;border-radius:6px;}
.widget-text-content{flex-grow:1;}
.widget-title{font-size:1.5em;margin-top:0;margin-bottom:10px;}
.widget-title-link{color:#007bff;text-decoration:none;font-weight:bold;}
.widget-title-link:hover{text-decoration:underline;}
.widget-excerpt{font-size:0.95em;line-height:1.5;color:#555;margin-bottom:15px;}
.widget-read-more{display:inline-block;background-color:#007bff;color:white;padding:8px 15px;border-radius:5px;text-decoration:none;font-size:0.9em;transition:background-color 0.3s ease;}
.widget-read-more:hover{background-color:#0056b3;}
@media (min-width: 150px) and (max-width: 768px) {.isflex{flex-direction:column;}.info-box {border: 1px solid #ccc;border-radius: 5px;padding:0 0 1em;background-color: #f9f9f9;box-shadow: 2px 2px 5px rgba(0,0,0,0.1);flex: 1;min-width: 180px;}[class*="icn-"]{display:block;width:40px;height:25px;margin:10px auto 5px auto;overflow:hidden;}.info-box-title,h3.info-box-title {font-size: 1.1em;font-weight: 300;margin:0 auto 7px auto;padding: 8px 0 18px;border-bottom: 1px solid #ccc;text-align:center;}.makeitgold h1{display:block;width:100%;height:auto;margin:0 auto;text-indent:0;font-size:1.4em;font-weight:600;color:#900;background-color:#F0ECD9;padding:.7em 0 .8em;text-align:center;}#appsfrpage .excard {flex-basis: 100%;}.widget-content{flex-direction:column;text-align:center;}.widget-image-wrapper{width:100%;max-width:300px;margin-bottom:15px;}.widget-title{order:-1;margin-bottom:10px;}.widget-excerpt{margin-top:0;}.widget-read-more{margin-top:10px;}
}