mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-07-29 00:07:21 -04:00
Fix: dropdown menu triangle in mobile view (#4169)
* central triangle styles moved to template.css * Update template.rtl.css * fix: triangle in config menu in mobile view * improve dark theme in mobile view
This commit is contained in:
@@ -304,18 +304,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #fff;
|
||||
display: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -304,18 +304,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #fff;
|
||||
display: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -30,18 +30,8 @@
|
||||
text-align: left;
|
||||
|
||||
&::after {
|
||||
background: $grey-lighter;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 18px;
|
||||
bottom: -14px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
// border-top: 1px solid #95a5a6;
|
||||
// border-left: 1px solid #95a5a6;
|
||||
border: none;
|
||||
right: 17px;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -234,16 +234,8 @@ form th {
|
||||
text-align: left;
|
||||
}
|
||||
.dropdown-menu::after {
|
||||
background: #fcfaf8;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 18px;
|
||||
bottom: -14px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
border: none;
|
||||
right: 17px;
|
||||
}
|
||||
.dropdown-menu .dropdown-header {
|
||||
margin: 1.75rem 0 0.5rem 2rem;
|
||||
|
||||
@@ -234,16 +234,8 @@ form th {
|
||||
text-align: right;
|
||||
}
|
||||
.dropdown-menu::after {
|
||||
background: #fcfaf8;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 18px;
|
||||
bottom: -14px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
border: none;
|
||||
left: 17px;
|
||||
}
|
||||
.dropdown-menu .dropdown-header {
|
||||
margin: 1.75rem 2rem 0.5rem 0;
|
||||
|
||||
@@ -340,17 +340,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #1a1a1a;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #888;
|
||||
border-left: 1px solid #888;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@@ -1176,6 +1166,7 @@ a.btn {
|
||||
background-color: #1a1a1a;
|
||||
border-top: 1px solid #888;
|
||||
border-left: 1px solid #888;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.day .name {
|
||||
|
||||
@@ -340,17 +340,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #1a1a1a;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #888;
|
||||
border-right: 1px solid #888;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@@ -1176,6 +1166,7 @@ a.btn {
|
||||
background-color: #1a1a1a;
|
||||
border-top: 1px solid #888;
|
||||
border-right: 1px solid #888;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.day .name {
|
||||
|
||||
@@ -340,17 +340,8 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #95a5a6;
|
||||
border-left: 1px solid #95a5a6;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
border-color: #95a5a6;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -340,17 +340,8 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #95a5a6;
|
||||
border-right: 1px solid #95a5a6;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
border-color: #95a5a6;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -30,18 +30,8 @@
|
||||
text-align: left;
|
||||
|
||||
&::after {
|
||||
background: $grey-lighter;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
border: none;
|
||||
right: 18px;
|
||||
bottom: -14px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
// border-top: 1px solid #95a5a6;
|
||||
// border-left: 1px solid #95a5a6;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -234,16 +234,8 @@ form th {
|
||||
text-align: left;
|
||||
}
|
||||
.dropdown-menu::after {
|
||||
background: #f9fafb;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
border: none;
|
||||
right: 18px;
|
||||
bottom: -14px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.dropdown-menu .dropdown-header {
|
||||
margin: 1.75rem 0 0.5rem 2rem;
|
||||
|
||||
@@ -234,16 +234,8 @@ form th {
|
||||
text-align: right;
|
||||
}
|
||||
.dropdown-menu::after {
|
||||
background: #f9fafb;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
border: none;
|
||||
left: 18px;
|
||||
bottom: -14px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.dropdown-menu .dropdown-header {
|
||||
margin: 1.75rem 2rem 0.5rem 0;
|
||||
|
||||
@@ -359,18 +359,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
/* @noflip */
|
||||
border-left: 1px solid #ddd;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -359,18 +359,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
/* @noflip */
|
||||
border-right: 1px solid #ddd;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -327,17 +327,8 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #aaa;
|
||||
border-left: 1px solid #aaa;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
border-color: #aaa;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -327,17 +327,8 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #aaa;
|
||||
border-right: 1px solid #aaa;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
border-color: #aaa;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -373,17 +373,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #222;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #171717;
|
||||
border-left: 1px solid #171717;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
border-color: #171717;
|
||||
}
|
||||
|
||||
.configure .dropdown-header {
|
||||
|
||||
@@ -373,17 +373,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background: #222;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 1px solid #171717;
|
||||
border-right: 1px solid #171717;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
border-color: #171717;
|
||||
}
|
||||
|
||||
.configure .dropdown-header {
|
||||
|
||||
@@ -296,6 +296,9 @@ form th {
|
||||
.dropdown-menu .dropdown-header {
|
||||
cursor: default;
|
||||
}
|
||||
.dropdown-menu::after {
|
||||
content: none;
|
||||
}
|
||||
.dropdown-menu > .item {
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
|
||||
@@ -296,6 +296,9 @@ form th {
|
||||
.dropdown-menu .dropdown-header {
|
||||
cursor: default;
|
||||
}
|
||||
.dropdown-menu::after {
|
||||
content: none;
|
||||
}
|
||||
.dropdown-menu > .item {
|
||||
padding: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
@@ -376,6 +376,10 @@ form {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
> {
|
||||
.item {
|
||||
|
||||
|
||||
@@ -336,6 +336,20 @@ a.btn {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background-color: inherit;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-width: 1px 0 0 1px;
|
||||
border-style: solid;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.dropdown-menu-scrollable {
|
||||
max-height: min(75vh, 50em);
|
||||
overflow-x: hidden;
|
||||
@@ -1451,6 +1465,10 @@ input:checked + .slide-container .properties {
|
||||
box-shadow: -3px 0 3px #aaa;
|
||||
}
|
||||
|
||||
.configure .dropdown-target:target ~ .dropdown-toggle::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.dropdown-target:target ~ .dropdown-menu {
|
||||
display: table-cell;
|
||||
z-index: 1000;
|
||||
|
||||
@@ -336,6 +336,20 @@ a.btn {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu::after {
|
||||
background-color: inherit;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-width: 1px 1px 0 0;
|
||||
border-style: solid;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 13px;
|
||||
z-index: -10;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.dropdown-menu-scrollable {
|
||||
max-height: min(75vh, 50em);
|
||||
overflow-x: hidden;
|
||||
@@ -1451,6 +1465,10 @@ input:checked + .slide-container .properties {
|
||||
box-shadow: 3px 0 3px #aaa;
|
||||
}
|
||||
|
||||
.configure .dropdown-target:target ~ .dropdown-toggle::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.dropdown-target:target ~ .dropdown-menu {
|
||||
display: table-cell;
|
||||
z-index: 1000;
|
||||
|
||||
Reference in New Issue
Block a user