diff --git a/resources/css/default-rtl.css b/resources/css/default-rtl.css
deleted file mode 100644
index aff3e40f63dac3f64274bde834991206a1e9d513..0000000000000000000000000000000000000000
--- a/resources/css/default-rtl.css
+++ /dev/null
@@ -1,167 +0,0 @@
-/* these styles are in the head of this page because this is a unique page */
-
-/* THE BIG GUYS */
-html {
- direction: rtl;
-}
-#header{
- background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
-}
-#footer{
- background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
-}
-/* LISTS */
-ul {
- margin: .3em 2em 1.5em 0;
-}
-
-li {
- margin-right: 2em;
-}
-
-/* TYPOGRAPHY */
-dl dd {
- margin-right: 3em;
-}
-
-.efieldlist {
- border-right: 1px solid #e6e6e6;
-}
-
-div.caution {
- padding: .2em 60px .2em .2em;
- background-position: right;
-}
-
-th.rowtitle {
- text-align: right;
-}
-.enablebox table {
- margin-right: 1em;
-}
-.enablebox.mini table {
- float: left;
-}
-.enablebox tr td {
- padding: .5px .5em 1px 1em;
-}
-
-/* Attribute presentation in example page */
-table.attributes td.attrname {
- text-align: left;
-}
-
-fieldset.fancyfieldset {
- margin: 2em 0px 1em 1em;
-}
-fieldset.fancyfieldset legend {
- margin-right: 2em;
-}
-
-
-/* Reverse Float Left <-> Right */
-.right {
- float: left;
-}
-.left {
- float: right;
-}
-.v-center-right{
- right: 0;
-}
-.logo-footer-right{
- left:0;
- right: auto;
-}
-.message-box {
- border-left-style: initial;
- order-left-width: 0;
- border-left-color: none;
- border-right-style: solid;
- border-right-width: 0.3125rem;
-}
-.message-box.error{
- border-right-color: #cc4b37;
-}
-.message-box.success{
- border-right-color: #46cc48;
-}
-.code-box-title .clipboard-btn {
- right: auto;
- left: 0;
- margin-left: 4px;
- margin-right: auto;
-}
-
-div .item{
- float: right;
-}
-
-/*purecss elements*/
-.pure-form-aligned .pure-control-group label {
- text-align: left;
- margin: 0 0 0 1em;
-}
-@media only screen and (max-width : 480px) {
- .pure-form-aligned .pure-control-group label {
- text-align: right;
- }
-}
-.pure-form-aligned .pure-controls {
- margin: 1.5em 11em 0 0;
-}
-.pure-form .pure-help-inline,
-.pure-form-message-inline {
- padding-left: 0;
- padding-right: 0.3em;
-}
-.pure-select{
- float: left;
-}
-.pure-table-attributes ul{
- margin:0;
-}
-.pure-table-attributes li{
- margin:0;
-}
-
-/* language side menu on medium and small screens*/
-#layout.active #menu {
- right: initial;
- left: 11em;
-}
-#layout.active .menu-link {
- right: initial;
- left: 11em;
-}
-#menu {
- right: initial;
- margin-right: 0;
- margin-left: -11em; /* "#menu" width */
- left: 0;
-}
-#menu a {
- padding: 0.6em 0.6em 0.6em 0em;
-}
-
-.menu-link {
- right: initial;
- left: 0; /* "#menu width" */
-}
-
-/* -- Responsive Styles (Media Queries) ------------------------------------- */
-
-@media screen and (max-width: 0em), screen and (min-width: 40em) {
- #layout.active {
- right: auto;
- left: 11em;
- }
- #menuLink.menu-link.active {
- right: auto;
- left: 13em;
- }
- #foot.active {
- margin-right: auto;
- margin-left: 11em;
- }
-}
diff --git a/resources/css/default.scss b/resources/css/default.scss
index 4fec2f53062c0a1b48409019eb882c6eac926d5d..7b4838d216a6fe1c6239cd6218f8ea0e922203e4 100644
--- a/resources/css/default.scss
+++ b/resources/css/default.scss
@@ -36,13 +36,19 @@ body {
position: relative;
}
-.left {
+.logospace {
float: left;
}
+html[dir="rtl"] .logospace {
+ float: right;
+}
-.right {
+.menuspace {
float: right;
}
+html[dir="rtl"] .menuspace {
+ float: left;
+}
.center {
padding: auto;
@@ -535,12 +541,16 @@ FOOTER
font-size: .8rem;
}
-.logo-footer-right {
+.logo-footer-space {
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
+html[dir="rtl"] .logo-footer-space {
+ right: auto;
+ left: 0;
+}
.logo-footer {
height: 4rem;
@@ -605,8 +615,7 @@ input[type="file"] {
.pure-select {
float: right;
}
-
-div .item {
+html[dir="rtl"] .pure-select {
float: left;
}
diff --git a/templates/_footer.twig b/templates/_footer.twig
index 45b630fa3bafb8b5338cdf44139fe2adf2d24fd7..03561a324a6c6600220bd86bc44aa9178a637dbb 100644
--- a/templates/_footer.twig
+++ b/templates/_footer.twig
@@ -2,7 +2,7 @@
<div class="wrap">
<div class="center copyrights">© 2007-{{ year }} <a href="https://simplesamlphp.org/">SimpleSAMLphp</a>
</div>
- <div class="logo-footer-right show-for-large">
+ <div class="logo-footer-space show-for-large">
<div class="logo-footer">
<img class="pure-img" src="{{ asset("icons/ssplogo-fish-small.png") }}" alt="Small fish logo">
</div>
diff --git a/templates/_header.twig b/templates/_header.twig
index e821e384578e0862d044d4fcddc8887f25fe17d3..8c377c28ab4e1f1cfc63fdc984a8fed520e6463e 100644
--- a/templates/_header.twig
+++ b/templates/_header.twig
@@ -1,6 +1,6 @@
<header id="header">
<div class="wrap">
- <div class="left">
+ <div class="logospace">
<div class="v-center logo-header">
<div id="logo">
{% if header == 'SimpleSAMLphp' %}
@@ -15,7 +15,7 @@
</div>
</div>
{% if not hideLanguageBar %}
- <div class="right">
+ <div class="menuspace">
<a href="" id="menuLink" class="menu-link hide-for-large">
<span class="fa fa-globe fa-2x" aria-hidden="true"></span>
</a>
@@ -43,7 +43,7 @@
</div>
</div>
{% endif %}
- <div class="right show-for-large">
+ <div class="menuspace show-for-large">
<div class="v-center language-bar">
<form id="language-form" class="pure-form" method="get">
{% if not hideLanguageBar %}
diff --git a/templates/base.twig b/templates/base.twig
index 8579598f8a652d598fda769aa805cc699b1ae192..5893b7879d36504024026fee389e3efa6301bb19 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -1,6 +1,6 @@
{% apply spaceless %}
<!DOCTYPE html>
-<html lang="{{ currentLanguage }}" xml:lang="{{ currentLanguage }}">
+<html lang="{{ currentLanguage }}" dir="{{ isRTL ? 'rtl' : 'ltr' }}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0">
@@ -8,9 +8,6 @@
<title>{{ pagetitle }}</title>
<link rel="stylesheet" href="{{ asset("css/stylesheet.css") }}">
<link rel="icon" href="{{ asset("icons/favicon.ico") }}">
- {% if isRTL %}
- <link rel="stylesheet" href="{{ asset("assets/css/src/default-rtl.css") }}">
- {% endif %}
<meta name="robots" content="noindex, nofollow">
<link rel="preload" href="{{ asset('js/bundle.js') }}" as="script">
{% block preload %}{% endblock %}
diff --git a/www/assets/css/src/default-rtl.css b/www/assets/css/src/default-rtl.css
deleted file mode 100644
index 7cc1288a9aea3d4d7a0186d91d7d10876a39e8aa..0000000000000000000000000000000000000000
--- a/www/assets/css/src/default-rtl.css
+++ /dev/null
@@ -1,168 +0,0 @@
-/* these styles are in the head of this page because this is a unique page */
-
-/* THE BIG GUYS */
-html {
- direction: rtl;
-}
-#header{
- background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
-}
-#footer{
- background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
-}
-/* LISTS */
-ul {
- margin: .3em 2em 1.5em 0;
-}
-
-li {
- margin-right: 2em;
-}
-
-/* TYPOGRAPHY */
-dl dd {
- margin-right: 3em;
-}
-
-.efieldlist {
- border-right: 1px solid #e6e6e6;
-}
-
-div.caution {
- padding: .2em 60px .2em .2em;
- background-position: right;
-}
-
-th.rowtitle {
- text-align: right;
-}
-.enablebox tr td {
- padding: .5px .5em 1px 1em;
-}
-
-/* Attribute presentation in example page */
-table.attributes td.attrname {
- text-align: left;
-}
-
-fieldset.fancyfieldset {
- margin: 2em 0px 1em 1em;
-}
-fieldset.fancyfieldset legend {
- margin-right: 2em;
-}
-
-
-/* Reverse Float Left <-> Right */
-.right {
- float: left;
-}
-.left {
- float: right;
-}
-.v-center-right{
- right: 0;
-}
-.logo-footer-right{
- left:0;
- right: auto;
-}
-.message-box {
- border-left-style: initial;
- order-left-width: 0;
- border-left-color: none;
- border-right-style: solid;
- border-right-width: 0.3125rem;
-}
-.message-box.error{
- border-right-color: #cc4b37;
-}
-.message-box.success{
- border-right-color: #46cc48;
-}
-.code-box-title .clipboard-btn {
- right: auto;
- left: 0;
- margin-left: 4px;
- margin-right: auto;
-}
-
-/*selectize elements*/
-div .item{
- float: right;
-}
-.selectize-input{
- padding-right:8px;
-}
-.selectize-input:after{
- transform: translate(-8px, 0);
-}
-
-/*purecss elements*/
-.pure-form-aligned .pure-control-group label {
- text-align: left;
- margin: 0 0 0 1em;
-}
-@media only screen and (max-width : 480px) {
- .pure-form-aligned .pure-control-group label {
- text-align: right;
- }
-}
-.pure-form-aligned .pure-controls {
- margin: 1.5em 11em 0 0;
-}
-.pure-form .pure-help-inline,
-.pure-form-message-inline {
- padding-left: 0;
- padding-right: 0.3em;
-}
-.pure-select{
- float: left;
-}
-.pure-table-attributes ul{
- margin:0;
-}
-.pure-table-attributes li{
- margin:0;
-}
-
-/* language side menu on medium and small screens*/
-#layout.active #menu {
- right: initial;
- left: 11em;
-}
-#layout.active .menu-link {
- right: initial;
- left: 11em;
-}
-#menu {
- right: initial;
- margin-right: 0;
- margin-left: -11em; /* "#menu" width */
- left: 0;
-}
-#menu a {
- padding: 0.6em 0.6em 0.6em 0em;
-}
-
-.menu-link {
- right: initial;
- left: 0; /* "#menu width" */
-}
-
-/* -- Responsive Styles (Media Queries) ------------------------------------- */
-
-@media screen and (max-width: 0em), screen and (min-width: 40em) {
- #layout.active {
- right: auto;
- left: 11em;
- }
- #menuLink.menu-link.active {
- right: auto;
- left: 13em;
- }
- #foot.active {
- margin-right: auto;
- margin-left: 11em;
- }
-}