diff --git a/p/scripts/main.js b/p/scripts/main.js
index 37984513d..1619993c4 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -426,10 +426,17 @@ function toggleContent(new_active, old_active, skipping) {
if (context.sticky_post) { // Stick the article to the top when opened
const prev_article = new_active.previousElementSibling;
- let new_pos = new_active.offsetParent.offsetTop + new_active.offsetTop;
+ const nav_menu = document.querySelector('.nav_menu');
+ let nav_menu_height = 0;
+
+ if (getComputedStyle(nav_menu).position === 'fixed' || getComputedStyle(nav_menu).position === 'sticky') {
+ nav_menu_height = nav_menu.offsetHeight;
+ }
+
+ let new_pos = new_active.offsetParent.offsetTop + new_active.offsetTop - nav_menu_height;
if (prev_article && new_active.offsetTop - prev_article.offsetTop <= 150) {
- new_pos = prev_article.offsetParent.offsetTop + prev_article.offsetTop;
+ new_pos = prev_article.offsetParent.offsetTop + prev_article.offsetTop - nav_menu_height;
if (relative_move) {
new_pos -= box_to_move.offsetTop;
}
@@ -1213,7 +1220,13 @@ function init_nav_entries() {
const windowTop = document.scrollingElement.scrollTop;
const item_top = active_item.offsetParent.offsetTop + active_item.offsetTop;
- document.scrollingElement.scrollTop = windowTop > item_top ? item_top : 0;
+ const nav_menu = document.querySelector('.nav_menu');
+ let nav_menu_height = 0;
+
+ if (getComputedStyle(nav_menu).position === 'fixed' || getComputedStyle(nav_menu).position === 'sticky') {
+ nav_menu_height = nav_menu.offsetHeight;
+ }
+ document.scrollingElement.scrollTop = windowTop > item_top ? item_top - nav_menu_height : 0 - nav_menu_height;
return false;
};
}
diff --git a/p/themes/Swage/icons/import.svg b/p/themes/Swage/icons/import.svg
deleted file mode 100644
index 1f26448ff..000000000
--- a/p/themes/Swage/icons/import.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index e04a4de04..f6e1dbbb7 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -2,17 +2,19 @@ input,
select, textarea {
min-height: 25px;
margin-top: 4px;
- line-height: 25px;
+ line-height: 29px;
vertical-align: middle;
background: #fcfcfc;
- border: none;
- padding-left: 5px;
+ border: 2px solid #e3e3e3;
+ padding-left: 8px;
}
input:invalid,
select:invalid {
+ padding-left: 5px;
color: #b0425b;
- border-color: #b0425b;
+ border-left-color: #b0425b;
+ border-left-width: 5px;
box-shadow: none;
}
@@ -56,9 +58,6 @@ a.btn {
line-height: 25px;
text-decoration: none;
}
-a.btn:hover {
- background: #00488b;
-}
a.btn .icon {
filter: brightness(3);
}
@@ -74,7 +73,7 @@ img.icon:hover {
}
main#stream {
- margin-top: 35px;
+ margin-top: 2rem;
}
sup {
@@ -84,9 +83,10 @@ sup {
legend {
margin: 20px 0 5px;
padding: 5px 20px;
- background: #e3e3e3;
+ background: #22303d;
display: inline-block;
width: auto;
+ color: #fcfcfc;
font-size: 1.4em;
clear: both;
}
@@ -96,7 +96,6 @@ label {
}
textarea {
- background: #e3e3e3;
width: 360px;
height: 100px;
}
@@ -114,7 +113,8 @@ select:disabled {
}
select {
- background: #e3e3e3;
+ padding-top: 7px;
+ padding-bottom: 8px;
}
input.extend {
@@ -146,6 +146,57 @@ form th {
text-align: center;
}
+@supports (scrollbar-width: thin) {
+ #sidebar,
+.scrollbar-thin {
+ scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+ scrollbar-width: thin;
+ }
+
+ #sidebar:hover,
+.scrollbar-thin:hover {
+ scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
+ }
+
+ #slider.scrollbar-thin {
+ scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
+ }
+
+ #slider.scrollbar-thin:hover {
+ scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
+ }
+}
+@supports not (scrollbar-width: thin) {
+ #sidebar::-webkit-scrollbar,
+.scrollbar-thin::-webkit-scrollbar {
+ background: rgba(255, 255, 255, 0);
+ width: 8px;
+ }
+
+ #sidebar::-webkit-scrollbar-thumb,
+.scrollbar-thin::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0);
+ display: unset;
+ border-radius: 5px;
+ }
+
+ #sidebar:hover::-webkit-scrollbar-thumb,
+.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ #slider.scrollbar-thin::-webkit-scrollbar {
+ background: rgba(0, 0, 0, 0.05);
+ }
+
+ #slider.scrollbar-thin::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.1);
+ }
+
+ #slider.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.3);
+ }
+}
.category .title.error::before {
display: inline-block;
padding-right: 7px;
@@ -186,6 +237,9 @@ form th {
vertical-align: middle;
font-size: 0;
}
+.stick select {
+ margin-top: 0;
+}
.btn {
margin: 0;
padding: 5px 10px;
@@ -200,12 +254,13 @@ form th {
cursor: pointer;
overflow: hidden;
}
-.btn.active,
-.btn :active,
-.btn :hover {
+.btn.active, .btn:active, .btn:hover {
background: #00488b;
text-decoration: none;
}
+.btn .icon {
+ filter: brightness(3);
+}
.btn-important, .btn-attention {
font-weight: normal;
@@ -226,7 +281,7 @@ form th {
}
.nav-list .nav-header {
- padding: 0 10px;
+ padding: 0 1rem;
font-weight: bold;
background: #22303d;
color: #fcfcfc;
@@ -254,7 +309,7 @@ form th {
background: #c46178;
}
.nav-list .item > a {
- padding: 0 10px;
+ padding: 0 1.5rem;
}
.nav-list .item.empty a {
color: #fa8052;
@@ -302,7 +357,7 @@ form th {
}
.dropdown-menu {
- padding: 5px 0;
+ padding: 0.5rem 0 1rem 0;
font-size: 0.8rem;
text-align: left;
border: none;
@@ -310,6 +365,17 @@ form th {
}
.dropdown-menu .dropdown-header {
cursor: default;
+ padding: 0 0.5rem 0.5rem;
+ font-weight: bold;
+ color: #fcfcfc;
+}
+.dropdown-menu .dropdown-header a {
+ padding: 0 5px;
+ position: absolute;
+ right: 5px;
+}
+.dropdown-menu .dropdown-header a:hover {
+ background-color: #0062be;
}
.dropdown-menu::after {
content: none;
@@ -337,11 +403,10 @@ form th {
padding: 2px 5px;
}
-.dropdown-header {
- padding: 0 5px 5px;
- font-weight: bold;
- text-align: left;
- color: #fcfcfc;
+.labels .dropdown-menu,
+.tags .dropdown-menu,
+.share .dropdown-menu {
+ right: auto;
}
.separator {
@@ -452,14 +517,20 @@ form th {
}
.box .box-title {
margin: 0;
- padding: 5px 10px;
- background: #e3e3e3;
- color: #969696;
+ padding: 7px 10px;
+ background: #22303d;
+ color: #fcfcfc;
border-bottom: 1px solid #e3e3e3;
}
+.box .box-title a {
+ color: #fcfcfc;
+}
.box .box-title .configure {
margin-right: 4px;
}
+.box .box-title .configure .icon:hover {
+ filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+}
.box .box-content {
padding-left: 30px;
max-height: 260px;
@@ -471,7 +542,10 @@ form th {
}
.box .box-content .item .configure .icon {
vertical-align: middle;
- background-color: #e3e3e3;
+ filter: invert(1);
+}
+.box .box-content .item .configure .icon:hover {
+ filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
}
.box.category .box-title .title {
font-weight: normal;
@@ -502,6 +576,9 @@ form th {
padding: 2px 10px;
font-size: 0.8rem;
}
+.box.visible-semi {
+ border-style: solid;
+}
.tree {
margin: 10px 0;
@@ -513,7 +590,7 @@ form th {
height: 35px;
font-size: 1rem;
position: relative;
- line-height: 2.3rem;
+ line-height: 2rem;
}
.tree-folder-title .title {
background: inherit;
@@ -575,9 +652,6 @@ form th {
top: 5px;
filter: grayscale(100%) brightness(100);
}
-.header > .item.search input {
- width: 230px;
-}
.header .item.search input:focus {
width: 350px;
}
@@ -587,8 +661,15 @@ form th {
.header .item.configure {
position: fixed;
right: 0;
- z-index: 1000;
+ z-index: 95;
width: 35px;
+ text-align: center;
+ line-height: 0.8rem;
+}
+.header .item.configure > .icon {
+ filter: brightness(3);
+ margin-right: 5px;
+ margin-top: 3px;
}
.header .item.configure .dropdown .icon {
filter: brightness(3);
@@ -601,6 +682,10 @@ form th {
.aside.aside_feed .tree {
margin: 0 0 50px;
}
+.aside.aside_feed .tree-folder .tree-folder-title:hover,
+.aside.aside_feed .tree-folder .item.feed:hover {
+ background-color: #00488b;
+}
.aside.aside_feed .nav-form input,
.aside.aside_feed .nav-form select {
width: 140px;
@@ -623,14 +708,33 @@ form th {
.aside_feed .tree-folder-items .dropdown-menu::after {
left: 2px;
}
+.aside_feed .about {
+ padding: 1rem;
+ display: block;
+ text-align: center;
+ font-size: 0.8em;
+ font-style: italic;
+}
+
+.reader .aside .toggle_aside {
+ background: #22303d;
+ display: block;
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+}
+.reader .aside .toggle_aside .icon {
+ filter: brightness(3);
+}
+.reader .aside .toggle_aside:hover {
+ background-color: #0062be;
+}
.post {
padding: 10px 50px;
font-size: 0.9em;
}
-.post input {
- background: #e3e3e3;
-}
.post input.long {
height: 33px;
margin-top: 0px;
@@ -644,7 +748,6 @@ form th {
.prompt input {
margin: 5px auto;
- width: 100%;
}
#global {
@@ -662,6 +765,7 @@ form th {
line-height: 1.5em;
}
#new-article > a {
+ padding: 1rem;
line-height: 1.5em;
font-weight: bold;
color: #fcfcfc;
@@ -689,14 +793,23 @@ form th {
width: 100%;
font-size: 0;
background-color: #0062be;
- position: fixed;
- z-index: 900;
+ position: sticky;
+ top: 0;
+ z-index: 90;
}
.nav_menu .item.search {
display: inline-block;
- position: fixed;
+ position: absolute;
right: 40px;
}
+.nav_menu .item.search input {
+ border-width: 0;
+ line-height: 25px;
+}
+.nav_menu #toggle-unread .icon,
+.nav_menu #toggle-starred .icon {
+ filter: brightness(1);
+}
.flux {
padding-right: 10px;
@@ -830,26 +943,44 @@ form th {
width: 270px;
}
-.formLogin #global {
+#overlay {
+ z-index: 100;
+}
+
+#panel {
+ z-index: 100;
+}
+#panel .nav_menu {
+ position: relative;
+}
+
+.formLogin #global,
+.register #global {
height: 0;
}
-.formLogin .header {
- background: #22303d;
- height: 55px;
+.formLogin .header,
+.register .header {
+ background: #0062be;
+ height: 35px;
+ position: relative;
}
-.formLogin .header > .item.configure {
- width: 200px;
- position: unset;
+.formLogin .header > .item.configure,
+.register .header > .item.configure {
+ padding: 8px;
+ width: auto;
+ position: absolute;
+ right: 0;
+ white-space: nowrap;
+ bottom: 0;
}
-.formLogin a.signin {
+.formLogin .header > .item.configure .icon,
+.register .header > .item.configure .icon {
+ filter: brightness(3);
+}
+
+a.signin {
color: #fcfcfc;
- padding-left: 5px;
-}
-.formLogin input {
- border-top: 1px #e3e3e3;
- border-right: 1px #e3e3e3;
- border-bottom: 1px #e3e3e3;
- border-left: 5px solid;
+ font-size: 70%;
}
.loglist {
@@ -885,7 +1016,7 @@ form th {
}
@media (max-width: 840px) {
- .formLogin .header {
+ body:not(.formLogin, .register) .header .item.title {
display: none;
}
@@ -894,33 +1025,28 @@ form th {
text-align: left;
}
- .dropdown-header, .dropdown-menu > .item {
- padding: 12px;
+ .dropdown {
+ position: relative;
}
#new-article {
+ margin-top: 2rem;
width: 100%;
- position: sticky;
- top: 0;
}
.header {
display: table;
}
- .header .item.title .logo {
- display: none;
+ .header .item {
+ padding: 0;
}
.header .item.configure {
padding: 0;
- position: absolute;
- right: 77px;
+ position: fixed;
+ right: 76px;
}
-
- .header > .item.title a {
- display: block;
- position: absolute;
- top: -35px;
- left: 10px;
+ .header .item.configure > .icon {
+ margin-top: 5px;
}
button.read_all.btn {
@@ -934,6 +1060,7 @@ form th {
}
.aside {
+ padding: 0;
width: 0;
transition: width 200ms linear;
}
@@ -942,11 +1069,14 @@ form th {
display: block;
height: 50px;
line-height: 50px;
- text-align: right;
+ text-align: center;
padding-right: 10px;
}
- .aside.aside_feed {
- padding: 0;
+ .aside .toggle_aside:hover {
+ background-color: #0062be;
+ }
+ .aside .toggle_aside .icon {
+ filter: brightness(3);
}
.aside.aside_feed .configure-feeds {
display: flex;
@@ -959,8 +1089,22 @@ form th {
z-index: 1000;
}
+ #slider .toggle_aside {
+ background: #22303d;
+ display: block;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ padding-right: 10px;
+ }
+ #slider .toggle_aside:hover {
+ background-color: #0062be;
+ }
+ #slider .toggle_aside .icon {
+ filter: brightness(3);
+ }
+
.nav_menu {
- position: initial;
height: 71px;
}
.nav_menu .btn {
@@ -972,16 +1116,17 @@ form th {
.nav_menu .stick .btn {
margin: 0;
}
- .nav_menu .search {
- position: absolute !important;
+ .nav_menu .item.search {
top: 3px;
- left: 37px;
+ margin-left: 77px;
+ width: calc(100% - 152px);
+ position: relative;
}
- .nav_menu .search form {
+ .nav_menu .item.search form {
display: block;
}
- .nav_menu .search input {
- width: 85%;
+ .nav_menu .item.search input {
+ width: 100%;
}
#panel .close,
@@ -990,14 +1135,24 @@ form th {
display: block;
height: 50px;
line-height: 50px;
- text-align: right;
+ text-align: center;
padding-right: 10px;
}
+ #panel .close:hover,
+.dropdown-menu .toggle_aside:hover {
+ background-color: #0062be;
+ }
- .dropdown-target:target ~ .dropdown-toggle.btn::after {
+ .dropdown-target:target ~ .dropdown-toggle::after,
+.dropdown-target:target ~ .dropdown-toggle.btn::after {
display: none;
}
+ .share .dropdown-menu {
+ right: 3%;
+ left: auto;
+ }
+
.day .name {
font-size: 1.1rem;
}
@@ -1082,7 +1237,6 @@ div#nav_menu_views {
}
}
button.as-link {
- color: #fcfcfc;
outline: none;
}
@@ -1122,11 +1276,6 @@ button.as-link {
color: #c46178;
}
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
- vertical-align: middle;
- float: right;
-}
-
#stream.reader .flux {
padding: 0 0 50px;
background: #fcfcfc;
@@ -1139,15 +1288,17 @@ button.as-link {
font-size: 90%;
}
-#nav_menu_actions ul.dropdown-menu, #nav_menu_read_all ul.dropdown-menu {
- left: 0px;
+#nav_menu_actions ul.dropdown-menu {
+ left: 0;
+}
+
+#nav_menu_read_all ul.dropdown-menu {
+ right: 0;
+ left: auto;
}
#slider label {
min-height: initial;
}
-#slider .form-group:hover {
- background: initial;
-}
/*# sourceMappingURL=swage.css.map */
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index d87f291e9..e55c10f68 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -2,17 +2,19 @@ input,
select, textarea {
min-height: 25px;
margin-top: 4px;
- line-height: 25px;
+ line-height: 29px;
vertical-align: middle;
background: #fcfcfc;
- border: none;
- padding-right: 5px;
+ border: 2px solid #e3e3e3;
+ padding-right: 8px;
}
input:invalid,
select:invalid {
+ padding-right: 5px;
color: #b0425b;
- border-color: #b0425b;
+ border-right-color: #b0425b;
+ border-right-width: 5px;
box-shadow: none;
}
@@ -56,9 +58,6 @@ a.btn {
line-height: 25px;
text-decoration: none;
}
-a.btn:hover {
- background: #00488b;
-}
a.btn .icon {
filter: brightness(3);
}
@@ -74,7 +73,7 @@ img.icon:hover {
}
main#stream {
- margin-top: 35px;
+ margin-top: 2rem;
}
sup {
@@ -84,9 +83,10 @@ sup {
legend {
margin: 20px 0 5px;
padding: 5px 20px;
- background: #e3e3e3;
+ background: #22303d;
display: inline-block;
width: auto;
+ color: #fcfcfc;
font-size: 1.4em;
clear: both;
}
@@ -96,7 +96,6 @@ label {
}
textarea {
- background: #e3e3e3;
width: 360px;
height: 100px;
}
@@ -114,7 +113,8 @@ select:disabled {
}
select {
- background: #e3e3e3;
+ padding-top: 7px;
+ padding-bottom: 8px;
}
input.extend {
@@ -146,6 +146,57 @@ form th {
text-align: center;
}
+@supports (scrollbar-width: thin) {
+ #sidebar,
+.scrollbar-thin {
+ scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+ scrollbar-width: thin;
+ }
+
+ #sidebar:hover,
+.scrollbar-thin:hover {
+ scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
+ }
+
+ #slider.scrollbar-thin {
+ scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
+ }
+
+ #slider.scrollbar-thin:hover {
+ scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
+ }
+}
+@supports not (scrollbar-width: thin) {
+ #sidebar::-webkit-scrollbar,
+.scrollbar-thin::-webkit-scrollbar {
+ background: rgba(255, 255, 255, 0);
+ width: 8px;
+ }
+
+ #sidebar::-webkit-scrollbar-thumb,
+.scrollbar-thin::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0);
+ display: unset;
+ border-radius: 5px;
+ }
+
+ #sidebar:hover::-webkit-scrollbar-thumb,
+.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ #slider.scrollbar-thin::-webkit-scrollbar {
+ background: rgba(0, 0, 0, 0.05);
+ }
+
+ #slider.scrollbar-thin::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.1);
+ }
+
+ #slider.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.3);
+ }
+}
.category .title.error::before {
display: inline-block;
padding-left: 7px;
@@ -186,6 +237,9 @@ form th {
vertical-align: middle;
font-size: 0;
}
+.stick select {
+ margin-top: 0;
+}
.btn {
margin: 0;
padding: 5px 10px;
@@ -200,12 +254,13 @@ form th {
cursor: pointer;
overflow: hidden;
}
-.btn.active,
-.btn :active,
-.btn :hover {
+.btn.active, .btn:active, .btn:hover {
background: #00488b;
text-decoration: none;
}
+.btn .icon {
+ filter: brightness(3);
+}
.btn-important, .btn-attention {
font-weight: normal;
@@ -226,7 +281,7 @@ form th {
}
.nav-list .nav-header {
- padding: 0 10px;
+ padding: 0 1rem;
font-weight: bold;
background: #22303d;
color: #fcfcfc;
@@ -254,7 +309,7 @@ form th {
background: #c46178;
}
.nav-list .item > a {
- padding: 0 10px;
+ padding: 0 1.5rem;
}
.nav-list .item.empty a {
color: #fa8052;
@@ -302,7 +357,7 @@ form th {
}
.dropdown-menu {
- padding: 5px 0;
+ padding: 0.5rem 0 1rem 0;
font-size: 0.8rem;
text-align: right;
border: none;
@@ -310,6 +365,17 @@ form th {
}
.dropdown-menu .dropdown-header {
cursor: default;
+ padding: 0 0.5rem 0.5rem;
+ font-weight: bold;
+ color: #fcfcfc;
+}
+.dropdown-menu .dropdown-header a {
+ padding: 0 5px;
+ position: absolute;
+ left: 5px;
+}
+.dropdown-menu .dropdown-header a:hover {
+ background-color: #0062be;
}
.dropdown-menu::after {
content: none;
@@ -337,11 +403,10 @@ form th {
padding: 2px 5px;
}
-.dropdown-header {
- padding: 0 5px 5px;
- font-weight: bold;
- text-align: right;
- color: #fcfcfc;
+.labels .dropdown-menu,
+.tags .dropdown-menu,
+.share .dropdown-menu {
+ left: auto;
}
.separator {
@@ -452,14 +517,20 @@ form th {
}
.box .box-title {
margin: 0;
- padding: 5px 10px;
- background: #e3e3e3;
- color: #969696;
+ padding: 7px 10px;
+ background: #22303d;
+ color: #fcfcfc;
border-bottom: 1px solid #e3e3e3;
}
+.box .box-title a {
+ color: #fcfcfc;
+}
.box .box-title .configure {
margin-left: 4px;
}
+.box .box-title .configure .icon:hover {
+ filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+}
.box .box-content {
padding-right: 30px;
max-height: 260px;
@@ -471,7 +542,10 @@ form th {
}
.box .box-content .item .configure .icon {
vertical-align: middle;
- background-color: #e3e3e3;
+ filter: invert(1);
+}
+.box .box-content .item .configure .icon:hover {
+ filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
}
.box.category .box-title .title {
font-weight: normal;
@@ -502,6 +576,9 @@ form th {
padding: 2px 10px;
font-size: 0.8rem;
}
+.box.visible-semi {
+ border-style: solid;
+}
.tree {
margin: 10px 0;
@@ -513,7 +590,7 @@ form th {
height: 35px;
font-size: 1rem;
position: relative;
- line-height: 2.3rem;
+ line-height: 2rem;
}
.tree-folder-title .title {
background: inherit;
@@ -575,9 +652,6 @@ form th {
top: 5px;
filter: grayscale(100%) brightness(100);
}
-.header > .item.search input {
- width: 230px;
-}
.header .item.search input:focus {
width: 350px;
}
@@ -587,8 +661,15 @@ form th {
.header .item.configure {
position: fixed;
left: 0;
- z-index: 1000;
+ z-index: 95;
width: 35px;
+ text-align: center;
+ line-height: 0.8rem;
+}
+.header .item.configure > .icon {
+ filter: brightness(3);
+ margin-left: 5px;
+ margin-top: 3px;
}
.header .item.configure .dropdown .icon {
filter: brightness(3);
@@ -601,6 +682,10 @@ form th {
.aside.aside_feed .tree {
margin: 0 0 50px;
}
+.aside.aside_feed .tree-folder .tree-folder-title:hover,
+.aside.aside_feed .tree-folder .item.feed:hover {
+ background-color: #00488b;
+}
.aside.aside_feed .nav-form input,
.aside.aside_feed .nav-form select {
width: 140px;
@@ -623,14 +708,33 @@ form th {
.aside_feed .tree-folder-items .dropdown-menu::after {
right: 2px;
}
+.aside_feed .about {
+ padding: 1rem;
+ display: block;
+ text-align: center;
+ font-size: 0.8em;
+ font-style: italic;
+}
+
+.reader .aside .toggle_aside {
+ background: #22303d;
+ display: block;
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+}
+.reader .aside .toggle_aside .icon {
+ filter: brightness(3);
+}
+.reader .aside .toggle_aside:hover {
+ background-color: #0062be;
+}
.post {
padding: 10px 50px;
font-size: 0.9em;
}
-.post input {
- background: #e3e3e3;
-}
.post input.long {
height: 33px;
margin-top: 0px;
@@ -644,7 +748,6 @@ form th {
.prompt input {
margin: 5px auto;
- width: 100%;
}
#global {
@@ -662,6 +765,7 @@ form th {
line-height: 1.5em;
}
#new-article > a {
+ padding: 1rem;
line-height: 1.5em;
font-weight: bold;
color: #fcfcfc;
@@ -689,14 +793,23 @@ form th {
width: 100%;
font-size: 0;
background-color: #0062be;
- position: fixed;
- z-index: 900;
+ position: sticky;
+ top: 0;
+ z-index: 90;
}
.nav_menu .item.search {
display: inline-block;
- position: fixed;
+ position: absolute;
left: 40px;
}
+.nav_menu .item.search input {
+ border-width: 0;
+ line-height: 25px;
+}
+.nav_menu #toggle-unread .icon,
+.nav_menu #toggle-starred .icon {
+ filter: brightness(1);
+}
.flux {
padding-left: 10px;
@@ -830,26 +943,44 @@ form th {
width: 270px;
}
-.formLogin #global {
+#overlay {
+ z-index: 100;
+}
+
+#panel {
+ z-index: 100;
+}
+#panel .nav_menu {
+ position: relative;
+}
+
+.formLogin #global,
+.register #global {
height: 0;
}
-.formLogin .header {
- background: #22303d;
- height: 55px;
+.formLogin .header,
+.register .header {
+ background: #0062be;
+ height: 35px;
+ position: relative;
}
-.formLogin .header > .item.configure {
- width: 200px;
- position: unset;
+.formLogin .header > .item.configure,
+.register .header > .item.configure {
+ padding: 8px;
+ width: auto;
+ position: absolute;
+ left: 0;
+ white-space: nowrap;
+ bottom: 0;
}
-.formLogin a.signin {
+.formLogin .header > .item.configure .icon,
+.register .header > .item.configure .icon {
+ filter: brightness(3);
+}
+
+a.signin {
color: #fcfcfc;
- padding-right: 5px;
-}
-.formLogin input {
- border-top: 1px #e3e3e3;
- border-left: 1px #e3e3e3;
- border-bottom: 1px #e3e3e3;
- border-right: 5px solid;
+ font-size: 70%;
}
.loglist {
@@ -885,7 +1016,7 @@ form th {
}
@media (max-width: 840px) {
- .formLogin .header {
+ body:not(.formLogin, .register) .header .item.title {
display: none;
}
@@ -894,33 +1025,28 @@ form th {
text-align: right;
}
- .dropdown-header, .dropdown-menu > .item {
- padding: 12px;
+ .dropdown {
+ position: relative;
}
#new-article {
+ margin-top: 2rem;
width: 100%;
- position: sticky;
- top: 0;
}
.header {
display: table;
}
- .header .item.title .logo {
- display: none;
+ .header .item {
+ padding: 0;
}
.header .item.configure {
padding: 0;
- position: absolute;
- left: 77px;
+ position: fixed;
+ left: 76px;
}
-
- .header > .item.title a {
- display: block;
- position: absolute;
- top: -35px;
- right: 10px;
+ .header .item.configure > .icon {
+ margin-top: 5px;
}
button.read_all.btn {
@@ -934,6 +1060,7 @@ form th {
}
.aside {
+ padding: 0;
width: 0;
transition: width 200ms linear;
}
@@ -942,11 +1069,14 @@ form th {
display: block;
height: 50px;
line-height: 50px;
- text-align: left;
+ text-align: center;
padding-left: 10px;
}
- .aside.aside_feed {
- padding: 0;
+ .aside .toggle_aside:hover {
+ background-color: #0062be;
+ }
+ .aside .toggle_aside .icon {
+ filter: brightness(3);
}
.aside.aside_feed .configure-feeds {
display: flex;
@@ -959,8 +1089,22 @@ form th {
z-index: 1000;
}
+ #slider .toggle_aside {
+ background: #22303d;
+ display: block;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ padding-left: 10px;
+ }
+ #slider .toggle_aside:hover {
+ background-color: #0062be;
+ }
+ #slider .toggle_aside .icon {
+ filter: brightness(3);
+ }
+
.nav_menu {
- position: initial;
height: 71px;
}
.nav_menu .btn {
@@ -972,16 +1116,17 @@ form th {
.nav_menu .stick .btn {
margin: 0;
}
- .nav_menu .search {
- position: absolute !important;
+ .nav_menu .item.search {
top: 3px;
- right: 37px;
+ margin-right: 77px;
+ width: calc(100% - 152px);
+ position: relative;
}
- .nav_menu .search form {
+ .nav_menu .item.search form {
display: block;
}
- .nav_menu .search input {
- width: 85%;
+ .nav_menu .item.search input {
+ width: 100%;
}
#panel .close,
@@ -990,14 +1135,24 @@ form th {
display: block;
height: 50px;
line-height: 50px;
- text-align: left;
+ text-align: center;
padding-left: 10px;
}
+ #panel .close:hover,
+.dropdown-menu .toggle_aside:hover {
+ background-color: #0062be;
+ }
- .dropdown-target:target ~ .dropdown-toggle.btn::after {
+ .dropdown-target:target ~ .dropdown-toggle::after,
+.dropdown-target:target ~ .dropdown-toggle.btn::after {
display: none;
}
+ .share .dropdown-menu {
+ left: 3%;
+ right: auto;
+ }
+
.day .name {
font-size: 1.1rem;
}
@@ -1082,7 +1237,6 @@ div#nav_menu_views {
}
}
button.as-link {
- color: #fcfcfc;
outline: none;
}
@@ -1122,11 +1276,6 @@ button.as-link {
color: #c46178;
}
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
- vertical-align: middle;
- float: left;
-}
-
#stream.reader .flux {
padding: 0 0 50px;
background: #fcfcfc;
@@ -1139,13 +1288,15 @@ button.as-link {
font-size: 90%;
}
-#nav_menu_actions ul.dropdown-menu, #nav_menu_read_all ul.dropdown-menu {
- right: 0px;
+#nav_menu_actions ul.dropdown-menu {
+ right: 0;
+}
+
+#nav_menu_read_all ul.dropdown-menu {
+ left: 0;
+ right: auto;
}
#slider label {
min-height: initial;
}
-#slider .form-group:hover {
- background: initial;
-}
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 7e70e96a4..f1503d494 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -19,16 +19,18 @@ $color_hover: #fff;
%input {
min-height: 25px;
margin-top: 4px;
- line-height: 25px;
+ line-height: 29px;
vertical-align: middle;
background: $color_light;
- border: none;
- padding-left: 5px;
+ border: 2px solid #e3e3e3;
+ padding-left: 8px;
}
%invalid {
+ padding-left: 5px;
color: $color_bad;
- border-color: $color_bad;
+ border-left-color: $color_bad;
+ border-left-width: 5px;
box-shadow: none;
}
@@ -70,10 +72,6 @@ a {
line-height: 25px;
text-decoration: none;
- &:hover {
- background: color.adjust( $color_nav, $lightness: -10%);
- }
-
.icon {
filter: brightness(3);
}
@@ -95,7 +93,7 @@ img {
}
main#stream {
- margin-top: 35px;
+ margin-top: 2rem;
}
sup {
@@ -105,9 +103,10 @@ sup {
legend {
margin: 20px 0 5px;
padding: 5px 20px;
- background: color.adjust( $color_light, $lightness: -10%);
+ background: $color_aside;
display: inline-block;
width: auto;
+ color: $color_light;
font-size: 1.4em;
clear: both;
}
@@ -117,7 +116,6 @@ label {
}
textarea {
- background: color.adjust( $color_light, $lightness: -10% );
width: 360px;
height: 100px;
@@ -148,7 +146,8 @@ select {
}
select {
- background: color.adjust( $color_light, $lightness: -10% );
+ padding-top: 7px;
+ padding-bottom: 8px;
}
input {
@@ -184,6 +183,65 @@ form {
}
}
+
+@supports (scrollbar-width: thin) {
+ // scrollbar for the sliders (with blue/dark background color)
+ #sidebar,
+ .scrollbar-thin {
+ scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+ scrollbar-width: thin;
+ }
+
+ #sidebar:hover,
+ .scrollbar-thin:hover {
+ scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
+ }
+
+ // scrollbar for the sliders (with white background color)
+ #slider.scrollbar-thin {
+ scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
+ }
+
+ #slider.scrollbar-thin:hover {
+ scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
+ }
+}
+
+@supports not (scrollbar-width: thin) {
+ // scrollbar for the sliders (with blue/dark background color)
+ #sidebar::-webkit-scrollbar,
+ .scrollbar-thin::-webkit-scrollbar {
+ background: rgba(255, 255, 255, 0);
+ width: 8px;
+ }
+
+ #sidebar::-webkit-scrollbar-thumb,
+ .scrollbar-thin::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0);
+ display: unset;
+ border-radius: 5px;
+ }
+
+ #sidebar:hover::-webkit-scrollbar-thumb,
+ .scrollbar-thin:hover::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ // scrollbar for the sliders (with white background color)
+ #slider.scrollbar-thin::-webkit-scrollbar {
+ background: rgba(0, 0, 0, 0.05);
+ }
+
+ #slider.scrollbar-thin::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.1);
+ }
+
+ #slider.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.3);
+ }
+}
+
+
.category {
.title.error::before {
display: inline-block;
@@ -238,6 +296,10 @@ form {
vertical-align: middle;
font-size: 0;
+ select {
+ margin-top: 0;
+ }
+
&.configure-feeds {
@extend %aside-width;
@@ -259,11 +321,15 @@ form {
overflow: hidden;
&.active,
- :active,
- :hover {
+ &:active,
+ &:hover {
background: color.adjust( $color_nav, $lightness: -10%);
text-decoration: none;
}
+
+ .icon {
+ filter: brightness(3);
+ }
}
.btn-important, .btn-attention {
@@ -289,7 +355,7 @@ form {
.nav-header {
@extend %nav-list;
- padding: 0 10px;
+ padding: 0 1rem;
font-weight: bold;
background: $color_aside;
color: $color_light;
@@ -328,7 +394,7 @@ form {
}
> a {
- padding: 0 10px;
+ padding: 0 1.5rem;
}
&.empty a {
@@ -387,7 +453,7 @@ form {
}
.dropdown-menu {
- padding: 5px 0;
+ padding: 0.5rem 0 1rem 0;
font-size: 0.8rem;
text-align: left;
border: none;
@@ -395,6 +461,19 @@ form {
.dropdown-header {
cursor: default;
+ padding: 0 0.5rem 0.5rem;
+ font-weight: bold;
+ color: $color_light;
+
+ a {
+ padding: 0 5px;
+ position: absolute;
+ right: 5px;
+
+ &:hover {
+ background-color: $color_nav;
+ }
+ }
}
&::after {
@@ -443,11 +522,12 @@ form {
}
}
-.dropdown-header {
- padding: 0 5px 5px;
- font-weight: bold;
- text-align: left;
- color: $color_light;
+.labels,
+.tags,
+.share {
+ .dropdown-menu {
+ right: auto;
+ }
}
.separator {
@@ -568,19 +648,26 @@ form {
.box-title {
margin: 0;
- padding: 5px 10px;
- background: color.adjust( $color_light, $lightness: -10%);
- color: color.adjust( $color_light, $lightness: -40% );
+ padding: 7px 10px;
+ background: $color_aside;
+ color: $color_light;
border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%);
+ a {
+ color: $color_light;
+ }
+
.configure {
margin-right: 4px;
+
+ .icon {
+ &:hover {
+ filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+ }
+ }
}
}
-
-
-
.box-content {
padding-left: 30px;
max-height: 260px;
@@ -593,7 +680,11 @@ form {
.configure {
.icon {
vertical-align: middle;
- background-color: color.adjust( $color_light, $lightness: -10%);
+ filter: invert(1);
+
+ &:hover {
+ filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+ }
}
}
}
@@ -635,6 +726,10 @@ form {
font-size: 0.8rem;
}
}
+
+ &.visible-semi {
+ border-style: solid;
+ }
}
.tree {
@@ -647,7 +742,7 @@ form {
height: 35px;
font-size: 1rem;
position: relative;
- line-height: 2.3rem;
+ line-height: 2rem;
.title {
background: inherit;
@@ -719,10 +814,6 @@ form {
filter: grayscale(100%) brightness(100);
}
}
-
- &.search input {
- width: 230px;
- }
}
.item.search input:focus {
@@ -736,8 +827,16 @@ form {
.item.configure {
position: fixed;
right: 0;
- z-index: 1000;
+ z-index: 95;
width: 35px;
+ text-align: center;
+ line-height: 0.8rem;
+
+ > .icon {
+ filter: brightness(3);
+ margin-right: 5px;
+ margin-top: 3px;
+ }
.dropdown .icon {
filter: brightness(3);
@@ -756,6 +855,15 @@ form {
margin: 0 0 50px;
}
+ .tree-folder {
+ .tree-folder-title,
+ .item.feed {
+ &:hover {
+ background-color: color.adjust( $color_nav, $lightness: -10%);
+ }
+ }
+ }
+
.nav-form {
input,
select {
@@ -789,6 +897,35 @@ form {
.tree-folder-items .dropdown-menu::after {
left: 2px;
}
+
+ .about {
+ padding: 1rem;
+ display: block;
+ text-align: center;
+ font-size: 0.8em;
+ font-style: italic;
+ }
+}
+
+.reader {
+ .aside {
+ .toggle_aside {
+ background: $color_aside;
+ display: block;
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+
+ .icon {
+ filter: brightness(3);
+ }
+
+ &:hover {
+ background-color: color.adjust( $color_nav, $lightness: 0%);
+ }
+ }
+ }
}
.post {
@@ -796,8 +933,6 @@ form {
font-size: 0.9em;
input {
- background: color.adjust( $color_light, $lightness: -10% );
-
&.long {
height: 33px;
margin-top: 0px;
@@ -816,7 +951,6 @@ form {
.prompt {
input {
margin: 5px auto;
- width: 100%;
}
}
@@ -837,6 +971,7 @@ form {
@extend %aside-width;
> a {
+ padding: 1rem;
line-height: 1.5em;
font-weight: bold;
color: $color_light;
@@ -870,13 +1005,26 @@ form {
width: 100%;
font-size: 0;
background-color: $color_nav;
- position: fixed;
- z-index: 900;
+ position: sticky;
+ top: 0;
+ z-index: 90;
.item.search {
display: inline-block;
- position: fixed;
+ position: absolute;
right: 40px;
+
+ input {
+ border-width: 0;
+ line-height: 25px;
+ }
+ }
+
+ #toggle-unread,
+ #toggle-starred {
+ .icon {
+ filter: brightness(1);
+ }
}
}
@@ -1047,34 +1195,49 @@ form {
}
}
-.formLogin {
+#overlay {
+ z-index: 100;
+}
+
+#panel {
+ z-index: 100;
+
+ .nav_menu {
+ position: relative;
+ }
+}
+
+.formLogin,
+.register {
#global {
height: 0;
}
.header {
- background: $color_aside;
- height: 55px;
+ background: $color_nav;
+ height: 35px;
+ position: relative;
> .item {
&.configure {
- width: 200px;
- position: unset;
+ padding: 8px;
+ width: auto;
+ position: absolute;
+ right: 0;
+ white-space: nowrap;
+ bottom: 0;
+
+ .icon {
+ filter: brightness(3);
+ }
}
}
}
+}
- a.signin {
- color: $color_light;
- padding-left: 5px;
- }
-
- input {
- border-top: 1px color.adjust( $color_light, $lightness: -10%);
- border-right: 1px color.adjust( $color_light, $lightness: -10%);
- border-bottom: 1px color.adjust( $color_light, $lightness: -10%);
- border-left: 5px solid;
- }
+a.signin {
+ color: $color_light;
+ font-size: 70%;
}
.loglist {
@@ -1115,8 +1278,12 @@ form {
}
@media (max-width: 840px) {
- .formLogin .header {
- display: none;
+ body:not(.formLogin, .register) {
+ .header {
+ .item.title {
+ display: none;
+ }
+ }
}
.form-group .group-name {
@@ -1124,35 +1291,31 @@ form {
text-align: left;
}
- .dropdown-header, .dropdown-menu > .item {
- padding: 12px;
+ .dropdown {
+ position: relative;
}
#new-article {
+ margin-top: 2rem;
width: 100%;
- position: sticky;
- top: 0;
}
.header {
display: table;
- .item.title .logo {
- display: none;
+ .item {
+ padding: 0;
}
.item.configure {
padding: 0;
- position: absolute;
- right: 77px;
- }
- }
+ position: fixed;
+ right: 76px;
- .header > .item.title a {
- display: block;
- position: absolute;
- top: -35px;
- left: 10px;
+ > .icon {
+ margin-top: 5px;
+ }
+ }
}
button.read_all.btn {
@@ -1166,6 +1329,7 @@ form {
}
.aside {
+ padding: 0;
width: 0;
transition: width 200ms linear;
@@ -1174,12 +1338,16 @@ form {
display: block;
height: 50px;
line-height: 50px;
- text-align: right;
+ text-align: center;
padding-right: 10px;
- }
- &.aside_feed {
- padding: 0;
+ &:hover {
+ background-color: color.adjust( $color_nav, $lightness: 0%);
+ }
+
+ .icon {
+ filter: brightness(3);
+ }
}
&.aside_feed .configure-feeds {
@@ -1195,8 +1363,26 @@ form {
}
}
+ #slider {
+ .toggle_aside {
+ background: $color_aside;
+ display: block;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ padding-right: 10px;
+
+ &:hover {
+ background-color: color.adjust( $color_nav, $lightness: 0%);
+ }
+
+ .icon {
+ filter: brightness(3);
+ }
+ }
+ }
+
.nav_menu {
- position: initial;
height: 71px;
.btn {
@@ -1211,17 +1397,18 @@ form {
}
}
- .search {
- position: absolute !important;
+ .item.search {
top: 3px;
- left: 37px;
+ margin-left: 77px;
+ width: calc(100% - 4 * 38px);
+ position: relative;
form {
display: block;
}
input {
- width: 85%;
+ width: 100%;
}
}
}
@@ -1232,14 +1419,24 @@ form {
display: block;
height: 50px;
line-height: 50px;
- text-align: right;
+ text-align: center;
padding-right: 10px;
+
+ &:hover {
+ background-color: color.adjust( $color_nav, $lightness: 0%);
+ }
}
+ .dropdown-target:target ~ .dropdown-toggle::after,
.dropdown-target:target ~ .dropdown-toggle.btn::after {
display: none;
}
+ .share .dropdown-menu {
+ right: 3%;
+ left: auto;
+ }
+
.day .name {
font-size: 1.1rem;
}
@@ -1330,7 +1527,6 @@ form {
}
button.as-link {
- color: $color_light;
outline: none;
}
@@ -1379,11 +1575,6 @@ button.as-link {
}
}
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
- vertical-align: middle;
- float: right;
-}
-
#stream.reader .flux {
padding: 0 0 50px;
background: $color_light;
@@ -1397,9 +1588,16 @@ button.as-link {
}
}
-#nav_menu_actions, #nav_menu_read_all {
+#nav_menu_actions {
ul.dropdown-menu {
- left: 0px;
+ left: 0;
+ }
+}
+
+#nav_menu_read_all {
+ ul.dropdown-menu {
+ right: 0;
+ left: auto;
}
}
@@ -1407,11 +1605,4 @@ button.as-link {
label {
min-height: initial;
}
-
- .form-group {
- &:hover {
- background: initial;
- }
- }
-
}
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index d640a2c9c..e5332f8a4 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -22,6 +22,15 @@ html, body {
font-size: 100%;
}
+main.prompt {
+ margin: 3rem auto;
+ padding: 2rem;
+ max-width: 400px;
+ min-width: 300px;
+ width: 33%;
+ text-align: center;
+}
+
/*=== Links */
a {
text-decoration: none;
@@ -64,6 +73,7 @@ p {
p.help, .prompt p.help {
margin: 5px 0 0.5em;
+ text-align: left;
}
p.help .icon {
@@ -210,6 +220,15 @@ input[type="checkbox"] {
min-height: 15px !important;
}
+.prompt textarea,
+.prompt input,
+.prompt select,
+.prompt .stick {
+ margin: 5px auto;
+ width: 100%;
+ box-sizing: border-box;
+}
+
.dropdown-menu label > input[type="text"] {
width: 150px;
width: calc(99% - 5em);
@@ -746,6 +765,8 @@ input[type="checkbox"]:focus-visible {
.box .box-content {
padding: 8px 8px 8px 16px;
display: block;
+ min-height: 2.5em;
+ max-height: 260px;
overflow: auto;
}
@@ -835,7 +856,7 @@ li.drag-hover {
}
#sidebar:hover,
- .scrollbar-thin {
+ .scrollbar-thin:hover {
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
}
}
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 610561e79..126ca04a3 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -22,6 +22,15 @@ html, body {
font-size: 100%;
}
+main.prompt {
+ margin: 3rem auto;
+ padding: 2rem;
+ max-width: 400px;
+ min-width: 300px;
+ width: 33%;
+ text-align: center;
+}
+
/*=== Links */
a {
text-decoration: none;
@@ -64,6 +73,7 @@ p {
p.help, .prompt p.help {
margin: 5px 0 0.5em;
+ text-align: right;
}
p.help .icon {
@@ -210,6 +220,15 @@ input[type="checkbox"] {
min-height: 15px !important;
}
+.prompt textarea,
+.prompt input,
+.prompt select,
+.prompt .stick {
+ margin: 5px auto;
+ width: 100%;
+ box-sizing: border-box;
+}
+
.dropdown-menu label > input[type="text"] {
width: 150px;
width: calc(99% - 5em);
@@ -746,6 +765,8 @@ input[type="checkbox"]:focus-visible {
.box .box-content {
padding: 8px 16px 8px 8px;
display: block;
+ min-height: 2.5em;
+ max-height: 260px;
overflow: auto;
}
@@ -835,7 +856,7 @@ li.drag-hover {
}
#sidebar:hover,
- .scrollbar-thin {
+ .scrollbar-thin:hover {
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
}
}