fix(topbar): unify styles
This commit is contained in:
hexxa
Hexxa
parent
433a91b442
commit
c536730cf9
6 changed files with 70 additions and 232 deletions
|
|
@ -205,203 +205,3 @@
|
|||
.black1-bg {
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
|
||||
.padding-xs {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.padding-s {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-m {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.padding-l {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.padding-xl {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.padding-l-xs {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.padding-l-s {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-l-m {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.padding-l-l {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.padding-l-xl {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
.padding-r-xs {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.padding-r-s {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-r-m {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.padding-r-l {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.padding-r-xl {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
.padding-t-xs {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.padding-t-s {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-t-m {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.padding-t-l {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.padding-t-xl {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.padding-b-xs {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.padding-b-s {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-b-m {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.padding-b-l {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.padding-b-xl {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.margin-xs {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.margin-s {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-m {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.margin-l {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.margin-xl {
|
||||
margin: 4rem;
|
||||
}
|
||||
|
||||
.margin-l-xs {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.margin-l-s {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-l-m {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.margin-l-l {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.margin-l-xl {
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
.margin-r-xs {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.margin-r-s {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-r-m {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.margin-r-l {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.margin-r-xl {
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.margin-t-xs {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.margin-t-s {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-t-m {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.margin-t-l {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.margin-t-xl {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.margin-b-xs {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.margin-b-s {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-b-m {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.margin-b-l {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.margin-b-xl {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -422,21 +422,7 @@ tr button {
|
|||
.weight-normal {
|
||||
font-weight: normal;
|
||||
}
|
||||
.h1,
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.h3,
|
||||
.h4 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.h5,
|
||||
.h6 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
|
|
|
|||
|
|
@ -4,13 +4,24 @@
|
|||
background: url("/static/img/textured_paper.png") repeat fixed center;
|
||||
}
|
||||
|
||||
.theme-default .top-bar {
|
||||
.theme-default #top-bar {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
|
||||
backdrop-filter: blur(9.5px);
|
||||
color: #16a085;
|
||||
padding: 1rem 2rem 1rem 2rem;
|
||||
-webkit-backdrop-filter: blur(9.5px);
|
||||
}
|
||||
|
||||
.theme-default #topbar-user-info {
|
||||
color: #697384;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.theme-default #top-bar button {
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
.theme-default .op-bar {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
|
||||
|
|
@ -27,4 +38,52 @@
|
|||
|
||||
.theme-default #tail {
|
||||
color: #34495e;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-default .h1,
|
||||
.theme-default .h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.theme-default .h3,
|
||||
.theme-default .h4 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.theme-default .h5,
|
||||
.theme-default .h6 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.theme-default .font-xs {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
|
||||
.theme-default .font-s {
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.1rem;
|
||||
}
|
||||
|
||||
.theme-default .font-m {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.theme-default .font-l {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.7rem;
|
||||
}
|
||||
|
||||
.theme-default .font-xl {
|
||||
font-size: 2.0rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.theme-default button {
|
||||
color: #697384;
|
||||
font-size: 1.2rem;
|
||||
background-color: #ecf0f6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
<link rel="stylesheet" href="/static/css/reset.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="stylesheet" href="/static/css/white.css">
|
||||
<link rel="stylesheet" href="/static/css/default.css">
|
||||
<!-- <link
|
||||
rel="apple-touch-icon"
|
||||
sizes="57x57"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
<link rel="stylesheet" href="/static/css/reset.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="stylesheet" href="/static/css/white.css">
|
||||
<link rel="stylesheet" href="/static/css/default.css">
|
||||
<!-- <link
|
||||
rel="apple-touch-icon"
|
||||
sizes="57x57"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from "react";
|
||||
import { List, Set } from "immutable";
|
||||
import { List } from "immutable";
|
||||
import { alertMsg, confirmMsg } from "../common/env";
|
||||
|
||||
import { ICoreState, MsgProps } from "./core_state";
|
||||
|
|
@ -89,13 +89,11 @@ export class TopBar extends React.Component<Props, State, {}> {
|
|||
const showAdmin = this.props.panes.paneNames.get("admin") ? "" : "hidden";
|
||||
|
||||
return (
|
||||
<div
|
||||
id="top-bar"
|
||||
className="top-bar cyan1-font padding-t-m padding-b-m padding-l-l padding-r-l"
|
||||
>
|
||||
<div id="top-bar">
|
||||
<Flexbox
|
||||
children={List([
|
||||
<a
|
||||
id="topbar-title"
|
||||
href="https://github.com/ihexxa/quickshare"
|
||||
target="_blank"
|
||||
className="h5"
|
||||
|
|
@ -106,27 +104,21 @@ export class TopBar extends React.Component<Props, State, {}> {
|
|||
<Flexbox
|
||||
children={List([
|
||||
<span className={`${showUserInfo}`}>
|
||||
<span className="grey3-font font-s margin-r-m">
|
||||
<span id="topbar-user-info">
|
||||
{this.props.login.userName}
|
||||
</span>
|
||||
{/* -
|
||||
<span className="grey0-font font-s margin-r-m">
|
||||
{this.props.login.userRole}
|
||||
</span> */}
|
||||
</span>,
|
||||
|
||||
<button
|
||||
onClick={this.showSettings}
|
||||
className={`grey3-bg grey4-font margin-r-m ${showSettings}`}
|
||||
style={{ minWidth: "7rem" }}
|
||||
className={`margin-r-m ${showSettings}`}
|
||||
>
|
||||
{this.props.msg.pkg.get("settings")}
|
||||
</button>,
|
||||
|
||||
<button
|
||||
onClick={this.showAdmin}
|
||||
className={`grey3-bg grey4-font margin-r-m ${showAdmin}`}
|
||||
style={{ minWidth: "7rem" }}
|
||||
className={`margin-r-m ${showAdmin}`}
|
||||
>
|
||||
{this.props.msg.pkg.get("admin")}
|
||||
</button>,
|
||||
|
|
@ -134,7 +126,6 @@ export class TopBar extends React.Component<Props, State, {}> {
|
|||
<button
|
||||
onClick={this.logout}
|
||||
className={`${showLogin}`}
|
||||
style={{ minWidth: "7rem" }}
|
||||
>
|
||||
{this.props.msg.pkg.get("login.logout")}
|
||||
</button>,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue