Template:Portal content/Portal:example/styles.css

/*
 * Default box styling. 
 * Override this on a per portal basis with a CSS stylesheet transcluded
 * only to that portal. 
 * Either wrap a whole area in div with a class specific to the portal,
 * or use !important to override specific values. 
 * This CSS cannot use !important to ensure that overrides are functional.
 */
.portal-content-box {
	box-sizing: border-box;
	text-align: left;
	margin: 0 0 10px;
	color: #000;
	background-color: #fefeef;
	border: 1px solid #ababab;
	overflow-x: hidden;
}

.portal-content-box-title {
	clear: both;
	box-sizing: border-box;
	background-color: #bcbcbc;
	color: #000;
	padding: 0.1em;
	text-align: center;
	margin-bottom: 0;
	font-size: 100%;
	font-family: sans-serif;
	border-bottom: 1px solid #ababab;
}

.portal-content-box-title-text {
	border: none;
	margin: 0;
	padding: 0 0 0.1em 0;
	color: #000;
	font-weight: bold;
	font-size: 100%;
	font-family: sans-serif
}

.portal-content-box-title-icon {
}

.portal-content-box-content {
	padding: 0.3em 1em 1em;	
}

/* Line break before edit, watch, or view links */
.portal-content-box-content::after {
	content: "";
	display: block;
	clear: both;
}

.portal-content-box-links-container {
	text-align: right;
	font-weight: bold;
	font-size: 80%;
	margin-top: 0.5rem;
}

/* Popular pages list: */
.top-7-pages > .portal-content-box-content {
	padding: 1em;
}

ol.popular-list {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
  margin:0;
}

ol.popular-list li {
  counter-increment: item;
  position: relative;
  padding-left: 70px;
  margin-bottom: 20px;
  min-height: 50px;
}

ol.popular-list li:last-child {
	margin-bottom:0;
}

ol.popular-list li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  background-color: #bcbcbc;
  border: 1px solid #ababab;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0;
}