[ticket/17291] Replace additional images w/ fonts & CSS

PHPBB3-17291

Signed-off-by: Matt Friedman <maf675@gmail.com>

phpBB/adm/style/admin.css

@@ -334,7 +334,8 @@ li {
 	}
 
 	#content {
-		background: #f3f3f3 url("../images/innerbox_bg.gif") repeat-x top;
+		background: #f3f3f3;
+		background: linear-gradient(to bottom, #dbdee2 0%, #e0e2e5 27%, #ecedee 65%, #f3f3f3 100%);
 		padding: 5px;
 	}
 
@@ -501,7 +502,8 @@ li {
 /* Main Panel
 ---------------------------------------- */
 #acp {
-	background: #f3f3f3 url("../images/innerbox_bg.gif") repeat-x top;
+	background: #f3f3f3;
+	background: linear-gradient(to bottom, #dbdee2 0%, #e0e2e5 27%, #ecedee 65%, #f3f3f3 100%);
 	border: 1px #999999 solid;
 	border-radius: 5px;
 	box-shadow: #ffffff 0 0 0 1px inset;
@@ -517,7 +519,8 @@ li {
 }
 
 .panel {
-	background: #f3f3f3 url("../images/innerbox_bg.gif") repeat-x top;
+	background: #f3f3f3;
+	background: linear-gradient(to bottom, #dbdee2 0%, #e0e2e5 27%, #ecedee 65%, #f3f3f3 100%);
 	border-radius: 5px;
 	overflow: hidden;
 	padding: 5px 0;
@@ -734,7 +737,8 @@ th {
 	font-size: 0.75em;
 	text-align: left;
 	text-transform: uppercase;
-	background: #70aed3 url("../images/gradient2b.gif") bottom left repeat-x;
+	background: #70aed3;
+	background: linear-gradient(to bottom, #70aed3 0%, #5ba0c9 100%);
 	border-top: 1px solid #6dacd2;
 	border-bottom: 1px solid #327aa5;
 	color: #ffffff;
@@ -1019,7 +1023,8 @@ table.fixed-width-table {
 		font-weight: bold;
 		text-align: left;
 		text-transform: uppercase;
-		background: #70aed3 url("../images/gradient2b.gif") bottom left repeat-x;
+		background: #70aed3;
+		background: linear-gradient(to bottom, #70aed3 0%, #5ba0c9 100%);
 		border-top: 1px solid #6dacd2;
 		border-bottom: 1px solid #327aa5;
 		color: #ffffff;
@@ -1719,7 +1724,8 @@ a.button2,
 input.button2 {
 	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
 	font-size: 0.85em;
-	background: #efefef url("../images/bg_button.gif") repeat-x top;
+	background: #efefef;
+	background: linear-gradient(to bottom, #ffffff 0%, #d2d2d2 4%, #dfdfdf 26%, #efefef 65%, #efefef 100%);
 	color: #000000;
 	width: auto !important;
 	padding: 1px 3px 0;
@@ -1763,7 +1769,8 @@ a.button1:hover,
 input.button1:hover,
 a.button2:hover,
 input.button2:hover {
-	background: #efefef url("../images/bg_button.gif") repeat bottom;
+	background: #efefef;
+	background: linear-gradient(to bottom, #ffffff 0%, #d2d2d2 4%, #dfdfdf 26%, #efefef 65%, #efefef 100%);
 	border: 1px solid #bc2a4d;
 	color: #bc2a4d;
 }
@@ -1828,19 +1835,17 @@ input.button2:focus {
 }
 
 .phpbb_alert .alert_close {
+	font-size: 16px;
 	text-decoration: none !important;
-	background: transparent url("../images/alert_close.png") 0 0 no-repeat;
 	display: block;
 	float: right;
 	overflow: hidden;
-	width: 16px;
-	height: 16px;
 	margin-top: -7px;
 	margin-right: -31px;
 }
 
 .phpbb_alert .alert_close:hover {
-	background-position: 0 -16px;
+	color: #bc2a4d;
 }
 
 .phpbb_alert p {
@@ -2351,11 +2356,11 @@ fieldset.permissions .permissions-switch {
 	font-size: 0.85em;
 	line-height: normal;
 	min-width: 570px;
-	margin: 0 0 -1px 7px;
+	margin: 0 0 0 7px;
 }
 
 .rtl .permissions-category {
-	margin: 0 7px -1px 0;
+	margin: 0 7px 0 0;
 }
 
 .permissions-category ul {
@@ -2376,7 +2381,9 @@ fieldset.permissions .permissions-switch {
 
 .permissions-category a {
 	text-decoration: none;
-	background: url("../images/bg_tabs_alt1.gif") no-repeat 0% -35px;
+	background: #bcccd8;
+	border: 1px solid transparent;
+	border-radius: 4px 4px 0 0;
 	position: relative;
 	float: left;
 	margin: 0 1px 0 0;
@@ -2389,7 +2396,6 @@ fieldset.permissions .permissions-switch {
 
 .permissions-category a span.tabbg {
 	white-space: nowrap;
-	background: url("../images/bg_tabs_alt2.gif") no-repeat 100% -35px;
 	color: #536482;
 	display: block;
 	float: left;
@@ -2400,41 +2406,34 @@ fieldset.permissions .permissions-switch {
 	float: right;
 }
 
-/* Commented Backslash Hack hides rule from IE5-Mac \ */
 .permissions-category a span.tabbg,
 .rtl .permissions-category a span.tabbg {
 	float: none;
 }
 
-/* End hack */
+.permissions-category a:hover,
 .permissions-category a:hover span.tabbg {
-	background-position: 100% -70px;
+	background: #dfedfa;
 	color: #dd6900;
 }
 
+.permissions-category .activetab a,
+.permissions-category .activetab a:hover,
+.permissions-category .activetab a span.tabbg {
+	background: #ccdcea;
+	background: linear-gradient(to bottom, #eaf2f9 0%, #ccdcea 100%);
+	color: #333333;
+}
+
 .permissions-category .activetab a {
-	background-position: 0 0;
+	border-color: #cadceb;
+	box-shadow: 0 1px 1px #f2f9ff inset;
 }
 
 .permissions-category .activetab a span.tabbg {
-	background-position: 100% 0;
-	color: #333333;
 	padding-bottom: 7px;
 }
 
-.permissions-category a:hover {
-	background-position: 0 -70px;
-}
-
-.permissions-category .activetab a:hover span.tabbg {
-	background-position: 100% 0;
-	color: #333333;
-}
-
-.permissions-category .activetab a:hover {
-	background-position: 0 0;
-}
-
 .permissions-category a span.colour {
 	border: 1px solid #536482;
 	display: block;
@@ -2808,8 +2807,16 @@ fieldset.permissions .permissions-switch {
 	user-select: none;
 }
 
+.roles-options > .button:hover {
+	background: transparent;
+}
+
+.roles-options > .button:active {
+	padding: 4px;
+}
+
 .roles-options > span {
-	background: url("../images/arrow_down.gif") no-repeat 235px 0.7em;
+	background: transparent;
 	border: 1px solid #dedede;
 	border-radius: 3px;
 	display: none;
@@ -2817,8 +2824,16 @@ fieldset.permissions .permissions-switch {
 	padding: 4px;
 }
 
-.rtl .roles-options > span {
+.roles-options > span:after {
-	background: url("../images/arrow_down.gif") no-repeat 7px 0.7em;
+	font-family: "Font Awesome 6 Free";
+	float: right;
+	content: "\f107";
+}
+
+.rtl .roles-options > span:after {
+	font-family: "Font Awesome 6 Free";
+	float: left;
+	content: "\f107";
 }
 
 .roles-options li {

phpBB/adm/style/overall_footer.html

@@ -30,11 +30,11 @@
 		</div>
 
 		<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
-			<a href="#" class="alert_close"></a>
+			<a href="#" class="alert_close">{{ Icon('font', 'circle-xmark', '', true) }}</a>
 			<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
 		</div>
 		<div id="phpbb_confirm" class="phpbb_alert">
-			<a href="#" class="alert_close"></a>
+			<a href="#" class="alert_close">{{ Icon('font', 'circle-xmark', '', true) }}</a>
 			<div class="alert_text"></div>
 		</div>
 	</div>