Main Page
Difference between revisions of "User:Perseonn/common.css"
Jump to navigation
Jump to search
(23 intermediate revisions by the same user not shown) | |||
Line 68: | Line 68: | ||
.cast-roster-card {border-top-left-radius: 4px; border-bottom-left-radius: 4px;} | .cast-roster-card {border-top-left-radius: 4px; border-bottom-left-radius: 4px;} | ||
.cast-roster-card-container, .cast-roster-middle, .cast-roster-middle-bottom, .cast-roster-line-container, .cast-roster-name-container, .cast-roster-category, .cast-roster-line-container {float:left;} | .cast-roster-card-container, .cast-roster-middle, .cast-roster-middle-bottom, .cast-roster-line-container, .cast-roster-name-container, .cast-roster-category, .cast-roster-line-container {float:left;} | ||
− | |||
− | |||
− | |||
− | |||
@media (min-width: 768px) and (max-width: 991px){ | @media (min-width: 768px) and (max-width: 991px){ | ||
Line 93: | Line 89: | ||
.cast-roster-image-container{float:right;} | .cast-roster-image-container{float:right;} | ||
.cast-roster-image{max-height:191px;border-top-right-radius: 4px; border-bottom-right-radius: 4px;} | .cast-roster-image{max-height:191px;border-top-right-radius: 4px; border-bottom-right-radius: 4px;} | ||
+ | } | ||
+ | |||
+ | |||
+ | /* BOOTSTRAP-BORROWED ROUTINE | ||
+ | ============================================================================== | ||
+ | The media width are bootstrap standard, please do not ask to change it.*/ | ||
+ | |||
+ | @media (max-width: 767px){ | ||
+ | /* Ex-Small */ | ||
+ | .hidden-xs{display:none;} | ||
+ | } | ||
+ | |||
+ | @media (min-width: 768px) and (max-width: 991px){ | ||
+ | /* Small */ | ||
+ | .hidden-sm{display:none;} | ||
+ | } | ||
+ | |||
+ | @media (min-width: 992px) and (max-width: 1199px){ | ||
+ | /* Medium */ | ||
+ | .hidden-md{display:none;} | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1200px){ | ||
+ | /* Large */ | ||
+ | .hidden-lg{display:none;} | ||
+ | } | ||
+ | |||
+ | |||
+ | /* RING CONTAINER | ||
+ | ==============================================================================*/ | ||
+ | .float-left, div[class*="-grind"] {float:left;} | ||
+ | div[class*="ring-container-"] > .wikitable {margin:0px; min-height: 142px; width:100%;} | ||
+ | .ring-container {display:inline-block;} | ||
+ | .ring-container, .ring-container-image, .ring-container-name, .ring-container-properties, .ring-container-material, div[class*="-grind"] {width:100%;} | ||
+ | div[class*="-header-"] {font-weight: 600;} | ||
+ | .ring-container-grind{} | ||
+ | div[class*="header-grind"], div[class*="header-stat"], div[class*="header-plus"], div[class*="stat-value"] {box-sizing: border-box;background-color: #f2f2f2; border:1px solid #aaa; padding-left: 0.2em;} | ||
+ | |||
+ | |||
+ | @media (max-width: 767px){ | ||
+ | /* Ex-Small */ | ||
+ | .ring-container-image {max-width: 100%;} | ||
+ | .ring-container-name {max-width: 100%;} | ||
+ | .ring-container-description {max-width: 100%;} | ||
+ | .ring-container-properties {max-width: 25%;} | ||
+ | .ring-container-material {max-width: 75%;} | ||
+ | div[class*="header-grind"], div[class*="header-stat"] {max-width:25%;} | ||
+ | div[class*="header-plus"], div[class*="stat-value"] {max-width:25%;} | ||
+ | |||
+ | } | ||
+ | |||
+ | @media (min-width: 768px) and (max-width: 991px){ | ||
+ | /* Small */ | ||
+ | .ring-container-image {max-width: 25%;} | ||
+ | .ring-container-name {max-width: 75%;} | ||
+ | .ring-container-description {max-width: 100%;} | ||
+ | .ring-container-properties {max-width: 33%;} | ||
+ | .ring-container-material {max-width: 67%;} | ||
+ | div[class*="header-grind"], div[class*="header-stat"] {max-width:16%;} | ||
+ | div[class*="header-plus"], div[class*="stat-value"] {max-width:14%;} | ||
+ | } | ||
+ | |||
+ | @media (min-width: 992px) and (max-width: 1199px){ | ||
+ | /* Medium */ | ||
+ | .ring-container-image {max-width: 13%;} | ||
+ | .ring-container-name {max-width: 37%;} | ||
+ | .ring-container-description {max-width: 50%;} | ||
+ | .ring-container-properties {max-width: 25%;} | ||
+ | .ring-container-material {max-width: 75%;} | ||
+ | div[class*="header-grind"], div[class*="header-stat"] {max-width:20%;} | ||
+ | div[class*="header-plus"], div[class*="stat-value"] {max-width:8%;} | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1200px){ | ||
+ | /* Large */ | ||
+ | .ring-container-image {max-width: 13%;} | ||
+ | .ring-container-name {max-width: 23%;} | ||
+ | .ring-container-description {max-width: 34%;} | ||
+ | .ring-container-properties {max-width: 10%;} | ||
+ | .ring-container-material {max-width: 20%;} | ||
+ | div[class*="header-grind"], div[class*="header-stat"] {max-width:20%;} | ||
+ | div[class*="header-plus"], div[class*="stat-value"] {max-width:8%;} | ||
} | } |
Latest revision as of 12:11, 10 May 2017
table.repha-table th a, .btn-primary a { color:#ffffff; } .btn-primary a:hover { color:#f4eff1; text-decoration:none; } .text-color-1{ color: #F4EFF1; } .text-color-2{ color: #F5D4D2; } .text-color-3{ color: #F3AABC; } .text-color-4{ color: #F6DEE6; } .infobox-header, table.repha-table th, .text-color-5{ color: #E1808E; } .form-group:nth-child(2n+0), table.repha-table tr:nth-child(2n+0), .bg-color-1{ background-color: #F4EFF1; } .bg-color-2{ background-color: #F5D4D2; } .bg-color-3{ background-color: #F3AABC ; } .infobox-header, table.repha-table th, .bg-color-4{ background-color: #F6DEE6; } /* CAST-ROSTER ==============================================================================*/ .enable-none {display:none;} .enable-yes > .enable-none {display:inline!important;} .cast-roster-middle {max-height:192px;} .cast-roster-middle-top {height:96px; padding-left:1em; padding-top: 0.5em;} .cast-roster-middle-bottom {height:95px; padding:1em; border-top: 1px solid #ddd; background-image: linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%); font-size:80%;} .cast-roster-line-container {margin-top:5px;} .cast-roster-line {border-left:6px solid #43731d; padding-left: 4px; font-size:108%;} .cast-roster-image {max-width:100%;} .cast-roster-category {font-size:90%;} .cast-roster-category p {margin-bottom: 0px;} .cast-roster-name {font-size: 160%;} .cast-roster-panel-small {margin-bottom: 6px} .cast-roster-panel-main {margin-bottom: 0.5em;} .cast-roster-category, .cast-roster-middle, .cast-roster-middle-bottom {width:100%;} .cast-roster-extra {padding: 0px 4px; height: 18px;} .cast-roster-card {border-top-left-radius: 4px; border-bottom-left-radius: 4px;} .cast-roster-card-container, .cast-roster-middle, .cast-roster-middle-bottom, .cast-roster-line-container, .cast-roster-name-container, .cast-roster-category, .cast-roster-line-container {float:left;} @media (min-width: 768px) and (max-width: 991px){ /* Small */ .cast-roster-image-container{float:left;} .cast-roster-image{border-top-right-radius: 4px; border-top-left-radius: 4px;} .hidden-sm{display:none;} } @media (min-width: 992px) and (max-width: 1199px){ /* Medium */ .cast-roster-middle{max-width:496px;} .cast-roster-image-container{float:right;} .cast-roster-image{max-height:191px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;} .hidden-md{display:none;} } @media (min-width: 1200px){ /* Large */ .cast-roster-middle{max-width:535px;} .cast-roster-image-container{float:right;} .cast-roster-image{max-height:191px;border-top-right-radius: 4px; border-bottom-right-radius: 4px;} } /* BOOTSTRAP-BORROWED ROUTINE ============================================================================== The media width are bootstrap standard, please do not ask to change it.*/ @media (max-width: 767px){ /* Ex-Small */ .hidden-xs{display:none;} } @media (min-width: 768px) and (max-width: 991px){ /* Small */ .hidden-sm{display:none;} } @media (min-width: 992px) and (max-width: 1199px){ /* Medium */ .hidden-md{display:none;} } @media (min-width: 1200px){ /* Large */ .hidden-lg{display:none;} } /* RING CONTAINER ==============================================================================*/ .float-left, div[class*="-grind"] {float:left;} div[class*="ring-container-"] > .wikitable {margin:0px; min-height: 142px; width:100%;} .ring-container {display:inline-block;} .ring-container, .ring-container-image, .ring-container-name, .ring-container-properties, .ring-container-material, div[class*="-grind"] {width:100%;} div[class*="-header-"] {font-weight: 600;} .ring-container-grind{} div[class*="header-grind"], div[class*="header-stat"], div[class*="header-plus"], div[class*="stat-value"] {box-sizing: border-box;background-color: #f2f2f2; border:1px solid #aaa; padding-left: 0.2em;} @media (max-width: 767px){ /* Ex-Small */ .ring-container-image {max-width: 100%;} .ring-container-name {max-width: 100%;} .ring-container-description {max-width: 100%;} .ring-container-properties {max-width: 25%;} .ring-container-material {max-width: 75%;} div[class*="header-grind"], div[class*="header-stat"] {max-width:25%;} div[class*="header-plus"], div[class*="stat-value"] {max-width:25%;} } @media (min-width: 768px) and (max-width: 991px){ /* Small */ .ring-container-image {max-width: 25%;} .ring-container-name {max-width: 75%;} .ring-container-description {max-width: 100%;} .ring-container-properties {max-width: 33%;} .ring-container-material {max-width: 67%;} div[class*="header-grind"], div[class*="header-stat"] {max-width:16%;} div[class*="header-plus"], div[class*="stat-value"] {max-width:14%;} } @media (min-width: 992px) and (max-width: 1199px){ /* Medium */ .ring-container-image {max-width: 13%;} .ring-container-name {max-width: 37%;} .ring-container-description {max-width: 50%;} .ring-container-properties {max-width: 25%;} .ring-container-material {max-width: 75%;} div[class*="header-grind"], div[class*="header-stat"] {max-width:20%;} div[class*="header-plus"], div[class*="stat-value"] {max-width:8%;} } @media (min-width: 1200px){ /* Large */ .ring-container-image {max-width: 13%;} .ring-container-name {max-width: 23%;} .ring-container-description {max-width: 34%;} .ring-container-properties {max-width: 10%;} .ring-container-material {max-width: 20%;} div[class*="header-grind"], div[class*="header-stat"] {max-width:20%;} div[class*="header-plus"], div[class*="stat-value"] {max-width:8%;} }