forked from fixin.me/fixin.me
Upgrade layout to grid+flex
This commit is contained in:
@@ -1,21 +1,25 @@
|
||||
/*
|
||||
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
||||
* listed below.
|
||||
* This is a manifest file that'll be compiled into application.css, which will
|
||||
* include all the files listed below.
|
||||
*
|
||||
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
|
||||
* vendor/assets/stylesheets directory can be referenced here using a relative path.
|
||||
* Any CSS (and SCSS, if configured) file within this directory,
|
||||
* lib/assets/stylesheets, or any plugin's vendor/assets/stylesheets directory
|
||||
* can be referenced here using a relative path.
|
||||
*
|
||||
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
||||
* compiled file so the styles you add here take precedence over styles defined in any other CSS
|
||||
* files in this directory. Styles in this file should be added after the last require_* statement.
|
||||
* It is generally better to create a new file per style scope.
|
||||
* You're free to add application-wide styles to this file and they'll appear at
|
||||
* the bottom of the compiled file so the styles you add here take precedence
|
||||
* over styles defined in any other CSS files in this directory. Styles in this
|
||||
* file should be added after the last require_* statement. It is generally
|
||||
* better to create a new file per style scope.
|
||||
*
|
||||
*= require_tree .
|
||||
*= require_self
|
||||
*/
|
||||
|
||||
* {
|
||||
font-family: system-ui;
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::selection {
|
||||
background-color: #009ade;
|
||||
@@ -24,28 +28,67 @@
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
.centered {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
margin: 0 0.5rem;
|
||||
display: grid;
|
||||
gap: 0.8em;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"nav nav nav"
|
||||
"leftside main rightside";
|
||||
grid-template-columns: 1fr 0fr 1fr;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
font-family: system-ui;
|
||||
margin: 0.4em;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
background-color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* blue - target for interaction with pointer */
|
||||
/* gray - target for interaction with keyboard */
|
||||
input,
|
||||
select {
|
||||
background-color: white;
|
||||
border: 1px solid;
|
||||
border-radius: 0.2rem;
|
||||
border-color: #cccccc;
|
||||
a,
|
||||
button,
|
||||
input[type=submit] {
|
||||
align-items: center;
|
||||
color: #a0a0a0;
|
||||
cursor: pointer;
|
||||
fill: #a0a0a0;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
input:not([type=checkbox]),
|
||||
.button,
|
||||
button,
|
||||
input[type=submit] {
|
||||
display: flex;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.4em;
|
||||
width: fit-content;
|
||||
}
|
||||
input:not([type=submit]).not([type=checkbox]),
|
||||
select {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
.button,
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
border: solid 1px #a0a0a0;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
.button > svg,
|
||||
.tab > svg,
|
||||
button > svg {
|
||||
height: 1.8em;
|
||||
padding-right: 0.4em;
|
||||
width: 1.8em;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
accent-color: #009ade;
|
||||
appearance: none;
|
||||
@@ -83,72 +126,52 @@ input:read-only:hover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.app-menu {
|
||||
height: 2.2rem;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
.app-menu > * {
|
||||
float: right;
|
||||
margin-left: 0.8rem;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
gap: 0.8em;
|
||||
grid-area: header;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
height: 2.4rem;
|
||||
margin: 0.4rem 0;
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
grid-area: nav;
|
||||
}
|
||||
.nav-menu .right > * {
|
||||
float: right;
|
||||
}
|
||||
.nav-menu .left > * {
|
||||
float: left;
|
||||
.navigation > .tab + .tab.right {
|
||||
margin-inline-start: 4%;
|
||||
}
|
||||
/* TODO: inactive tab color #d0d0d0 or #c7c7c7 */
|
||||
.nav-menu .tab {
|
||||
border: none;
|
||||
border-bottom: solid 0.2rem #a0a0a0;
|
||||
border-radius: 0;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 0.8rem;
|
||||
.navigation > .tab {
|
||||
border-bottom: solid 3px #c7c7c7;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
justify-content: center;
|
||||
padding-block: 0.3em;
|
||||
}
|
||||
.nav-menu .tab:hover {
|
||||
border-bottom: solid 0.2rem #009ade;
|
||||
.navigation > .tab:hover {
|
||||
border-bottom: solid 4px #009ade;
|
||||
}
|
||||
.nav-menu .tab.active {
|
||||
border-bottom: solid 0.2rem;
|
||||
.navigation > .tab.active {
|
||||
border-bottom: solid 4px;
|
||||
color: #009ade;
|
||||
fill: #009ade;
|
||||
}
|
||||
.nav-menu a.button svg,
|
||||
.nav-menu button svg {
|
||||
height: 1.5rem;
|
||||
padding-right: 0.4rem;
|
||||
width: 1.5rem;
|
||||
|
||||
|
||||
.leftside {
|
||||
grid-area: leftside;
|
||||
}
|
||||
.main {
|
||||
grid-area: main;
|
||||
}
|
||||
.rightside {
|
||||
grid-area: rightside;
|
||||
}
|
||||
|
||||
a.button,
|
||||
button,
|
||||
input[type=submit] {
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
border: 1px solid;
|
||||
border-color: #a0a0a0;
|
||||
border-radius: 0.2rem;
|
||||
color: #a0a0a0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
fill: #a0a0a0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
padding: 0.4rem;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
a.button svg,
|
||||
button svg {
|
||||
height: 1.3rem;
|
||||
padding-right: 0.4rem;
|
||||
width: 1.3rem;
|
||||
}
|
||||
|
||||
a.button:hover,
|
||||
a.button.active:hover,
|
||||
button:hover,
|
||||
@@ -180,6 +203,7 @@ button.dangerous:hover:focus-visible {
|
||||
border-color: #b21237;
|
||||
}
|
||||
|
||||
|
||||
.flashes {
|
||||
height: 2.1rem;
|
||||
}
|
||||
@@ -226,6 +250,7 @@ button.dangerous:hover:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
form table {
|
||||
border-spacing: 0.8rem;
|
||||
}
|
||||
@@ -264,41 +289,41 @@ form input[type=submit] {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
table.items {
|
||||
border-spacing: 0;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 0.2rem;
|
||||
border: solid 1px #dddddd;
|
||||
border-radius: 0.25em;
|
||||
font-size: 0.85rem;
|
||||
margin: 1rem auto 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
table.items thead {
|
||||
font-size: 0.8rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
table.items thead,
|
||||
table.items tbody tr:hover {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
table.items th {
|
||||
padding-block: 0.75em;
|
||||
}
|
||||
table.items th,
|
||||
table.items td {
|
||||
padding: 0 0.8rem;
|
||||
text-align: center;
|
||||
padding-inline-start: 0.8rem;
|
||||
}
|
||||
table.items th:last-child {
|
||||
padding-inline-end: 0.4em;
|
||||
}
|
||||
table.items td {
|
||||
border-top: 1px solid #dddddd;
|
||||
border-top: solid 1px #dddddd;
|
||||
padding-block: 0.1em;
|
||||
}
|
||||
table.items td:first-child {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
table.items a {
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
line-height: 2.2rem;
|
||||
padding: 0 0.8rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
table.items a:hover,
|
||||
table.items a:focus-visible,
|
||||
@@ -329,13 +354,13 @@ table.items td.number {
|
||||
text-align: right;
|
||||
}
|
||||
table.items td.actions {
|
||||
padding: 0 0 0 0.8rem;
|
||||
text-align: right;
|
||||
}
|
||||
table.items button {
|
||||
table.items .button,
|
||||
table.items button,
|
||||
table.items input[type=submit] {
|
||||
font-weight: normal;
|
||||
margin-right: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
padding: 0.3em;
|
||||
}
|
||||
table.items select:not(:hover),
|
||||
table.items button:not(:hover) {
|
||||
@@ -347,7 +372,10 @@ table.items select:focus-visible {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.contextual {
|
||||
float: right;
|
||||
margin-top: 1rem;
|
||||
|
||||
.centered {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.unwrappable {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user