Redesign page search input area

+ redefine global search input colors
+ redesign settings page
+ move settings text to a strings module
+ add title and description to now playing settings
This commit is contained in:
geoffrey45
2022-09-27 21:28:42 +03:00
committed by Mungai Njoroge
parent 460695fd87
commit 62b9aa7a3e
23 changed files with 181 additions and 143 deletions
+14 -6
View File
@@ -9,18 +9,24 @@
gap: 0 1.5rem;
height: 100%;
border: solid 1px $gray3;
border-top: none;
border-bottom: none;
margin: 0 auto;
max-width: 1720px;
}
#acontent {
grid-area: content;
margin-right: calc(0rem - ($medium + 2px));
padding-right: calc($medium);
overflow: hidden;
}
.r-sidebar {
grid-area: r-sidebar;
border-left: solid 1px $gray3;
}
.topnav {
@@ -33,8 +39,9 @@
grid-area: l-sidebar;
display: grid;
grid-template-rows: 1fr max-content;
border-top: none !important;
border-bottom: none !important;
// border-top: none !important;
// border-bottom: none !important;
border-right: solid 1px $gray3;
}
.b-bar {
@@ -44,9 +51,10 @@
// ====== MODIFIERS =======
#app-grid.extendWidth {
padding-right: 0;
border-right: none;
max-width: 100%;
padding-right: 0;
border-left: none;
border-right: none;
}
#app-grid.noSidebar {
@@ -58,7 +66,7 @@
#acontent {
margin-right: 0 !important;
padding-right: 1rem !important;
padding-right: $medium !important;
}
.topnav {
+4 -3
View File
@@ -33,7 +33,7 @@
}
.circular {
border-radius: 50%;
border-radius: 10rem;
}
.flex {
@@ -82,12 +82,13 @@ button {
}
&:hover {
background-image: linear-gradient(70deg, $darkestblue, $darkblue);
background-image: linear-gradient($darkestblue, $darkblue);
}
}
.btn-active {
background-image: linear-gradient(70deg, $darkestblue, $darkblue);
background-image: linear-gradient($darkestblue, $darkblue);
}
.btn-more {
+1 -2
View File
@@ -36,8 +36,7 @@ body {
#app {
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 1720px;
}
a {
+1 -1
View File
@@ -25,7 +25,7 @@ $gray2: rgb(99, 99, 102);
$gray3: rgb(72, 72, 74);
$gray4: rgb(58, 58, 60);
$gray5: rgb(44, 44, 46);
$body: $gray;
$body: rgba(0, 0, 0, 0.95);
$red: #ff453a;
$blue: #0a84ff;
+16 -16
View File
@@ -14,23 +14,23 @@
}
}
#app-grid.isSmall,
#app-grid.disableSidebar {
#acontent {
margin-right: -$small;
padding-right: $medium;
// #app-grid.isSmall,
// #app-grid.disableSidebar {
// #acontent {
// margin-right: -$small;
// padding-right: $medium;
.search-view {
margin-right: -0.8rem;
}
}
}
// .search-view {
// margin-right: -0.8rem;
// }
// }
// }
#app-grid.isSmall #page-search {
margin-right: $smaller;
}
// #app-grid.isSmall #page-search {
// margin-right: $smaller;
// }
#app-grid.disableSidebar #page-search {
margin-right: $smaller;
}
// #app-grid.disableSidebar #page-search {
// margin-right: $smaller;
// }
}