styled-components/macro#createGlobalStyle TypeScript Examples
The following examples show how to use
styled-components/macro#createGlobalStyle.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: styles.ts From covid-19 with MIT License | 6 votes |
|
GlobalStyles = createGlobalStyle`
html {
font-family: ${props => props.theme.fontFamily}
}
body {
margin: 0;
background-color: ${props => props.theme.colors.background};
font-weight: 300;
color: ${props => props.theme.colors.text};
}
a {
color: ${props => props.theme.colors.secondary};
text-decoration: underline;
transition: opacity ease-in-out 150ms;
:hover {
opacity: 0.5;
}
:active {
opacity: 0.75;
}
}
html,
body,
#root {
height: 100%;
width: 100%;
position: fixed;
overflow: hidden;
}
`
Example #2
| Source File: Theme.tsx From revite with GNU Affero General Public License v3.0 | 6 votes |
|
GlobalTheme = createGlobalStyle<{ theme: Theme }>`
:root {
${(props) => generateVariables(props.theme)}
}
${(props) =>
props.theme["min-opacity"] === 1 &&
`
* {
backdrop-filter: unset !important;
}
`}
`
Example #3
| Source File: base.ts From datart with Apache License 2.0 | 6 votes |
|
Base = createGlobalStyle`
body {
font-family: ${FONT_FAMILY};
font-size: ${FONT_SIZE_BODY};
background-color: ${p => p.theme.bodyBackground};
h1,h2,h3,h4,h5,h6 {
margin: 0;
font-weight: inherit;
color: inherit;
}
p, figure {
margin: 0;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
input {
padding: 0;
}
table th {
padding: 0;
text-align: center;
}
* {
-webkit-overflow-scrolling: touch;
}
}
`
Example #4
| Source File: viz.ts From datart with Apache License 2.0 | 6 votes |
|
Viz = createGlobalStyle`
/* 覆盖antd 默认样式 */
@media (max-width: 575px) {
.datart-viz .ant-form .ant-form-item .ant-form-item-label,
.datart-viz .ant-form .ant-form-item .ant-form-item-control {
flex: 1;
}
}
`
Example #5
| Source File: loading.ts From netflix-clone with MIT License | 5 votes |
|
LockBody = createGlobalStyle`
body {
overflow: hidden;
}
`
Example #6
| Source File: loading.ts From netflix-clone with MIT License | 5 votes |
|
ReleaseBody = createGlobalStyle`
body {
overflow: visible;
}
`
Example #7
| Source File: LoadingMask.tsx From datart with Apache License 2.0 | 5 votes |
|
LoadingMaskStyle = createGlobalStyle`
.blur {
filter: blur(2px);
}
`
Example #8
| Source File: DashboardTabStyle.ts From datart with Apache License 2.0 | 5 votes |
|
DashboardTabStyle = createGlobalStyle`
.ant-tabs{
padding: 0 ${SPACE_XS};
user-select: none;
background-color: ${p => p.theme.componentBackground};
border-bottom: 1px solid ${p => p.theme.borderColorSplit};
&.ant-tabs-top > .ant-tabs-nav,
&.ant-tabs-bottom > .ant-tabs-nav,
&.ant-tabs-top > div > .ant-tabs-nav,
&.ant-tabs-bottom > div > .ant-tabs-nav {
margin: 0;
}
&.ant-tabs-top > .ant-tabs-nav::before,
&.ant-tabs-bottom > .ant-tabs-nav::before,
&.ant-tabs-top > div > .ant-tabs-nav::before,
&.ant-tabs-bottom > div > .ant-tabs-nav::before {
border-bottom: 0;
}
.ant-tabs-tab-remove {
margin-right: -${SPACE_SM};
visibility: hidden;
}
&.ant-tabs-card {
&.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
&.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
padding: ${SPACE_XS} ${SPACE_MD};
margin: ${SPACE_SM} ${SPACE};
font-weight: ${FONT_WEIGHT_MEDIUM};
color: ${p => p.theme.textColorSnd};
background-color: ${p => p.theme.componentBackground};
border: none;
border-radius: 0;
&:hover {
background-color: ${p => p.theme.bodyBackground};
.ant-tabs-tab-remove {
visibility: visible;
}
}
}
&.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
&.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
background-color: ${p => p.theme.bodyBackground};
}
}
}
`
Example #9
| Source File: EditorTabStyle.ts From datart with Apache License 2.0 | 5 votes |
|
EditorTabsStyle = createGlobalStyle`
.ant-tabs {
user-select: none;
background-color: ${p => p.theme.bodyBackground};
& > .ant-tabs-nav,
& > div > .ant-tabs-nav {
.ant-tabs-nav-more {
padding: ${SPACE_XS} ${SPACE_SM};
}
}
&.ant-tabs-top > .ant-tabs-nav,
&.ant-tabs-bottom > .ant-tabs-nav,
&.ant-tabs-top > div > .ant-tabs-nav,
&.ant-tabs-bottom > div > .ant-tabs-nav {
margin: 0;
}
&.ant-tabs-top > .ant-tabs-nav::before,
&.ant-tabs-bottom > .ant-tabs-nav::before,
&.ant-tabs-top > div > .ant-tabs-nav::before,
&.ant-tabs-bottom > div > .ant-tabs-nav::before {
border-bottom: 0;
}
&.ant-tabs-card {
.ant-tabs-tab {
min-width: ${SPACE_TIMES(30)};
}
.ant-tabs-tab-btn {
flex: 1;
}
.ant-tabs-tab-btn:active,
.ant-tabs-tab-btn:focus,
.ant-tabs-tab-remove:active,
.ant-tabs-tab-remove:focus {
color: ${p => p.theme.textColor};
}
&.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
&.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
padding: ${SPACE_SM} ${SPACE_XS} ${SPACE_SM} ${SPACE_SM};
margin: 0 !important;
color: ${p => p.theme.textColorLight};
background-color: ${p => p.theme.bodyBackground};
border: none;
border-radius: 0;
}
&.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
&.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
background-color: ${p => p.theme.componentBackground};
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: ${p => p.theme.textColor};
}
}
}
`
Example #10
| Source File: globalOverlays.ts From datart with Apache License 2.0 | 5 votes |
|
GlobalOverlays = createGlobalStyle`
/* app/components/Popup */
.datart-popup {
z-index: ${LEVEL_1000 - 1};
&.on-modal {
z-index: ${LEVEL_1000 + 30};
}
.ant-popover-arrow {
display: none;
}
.ant-popover-inner-content {
padding: 0;
}
.ant-dropdown-menu {
box-shadow: none;
}
&.ant-popover-placement-bottom,
&.ant-popover-placement-bottomLeft,
&.ant-popover-placement-bottomRight {
padding-top: 0;
}
}
/* schema table header action dropdown menu */
.datart-schema-table-header-menu {
min-width: ${SPACE_TIMES(40)};
.ant-dropdown-menu-submenu-selected {
.ant-dropdown-menu-submenu-title {
color: ${p => p.theme.textColor};
}
}
}
/* config panel */
.datart-config-panel {
&.ant-collapse >
.ant-collapse-item >
.ant-collapse-header {
padding: ${SPACE_XS} 0;
color: ${p => p.theme.textColor};
.ant-collapse-arrow {
margin-right: ${SPACE_XS};
}
}
.ant-collapse-content >
.ant-collapse-content-box {
padding: ${SPACE_XS} 0 ${SPACE_SM} !important;
}
}
/* data config section dropdown */
.datart-data-section-dropdown {
z-index: ${LEVEL_1000 - 1};
}
/* color popover */
.datart-aggregation-colorpopover{
.ant-popover-arrow{
display:none;
}
}
`
Example #11
| Source File: hardcoded.ts From datart with Apache License 2.0 | 5 votes |
|
Hardcoded = createGlobalStyle`
body {
.ant-form-item-label > label {
color: ${p => p.theme.textColorLight};
}
.ant-form-item-label-left > label {
padding-left: ${SPACE_SM};
&:before {
position: absolute;
left: 0;
}
}
.ant-popover-inner {
box-shadow: ${p => p.theme.shadow3};
}
.ant-popover.ant-popconfirm {
z-index: 1060;
}
/* fix antd bugs #32919 */
.ant-tabs-dropdown-menu-item {
display: flex;
align-items: center;
> span {
flex: 1;
white-space: nowrap;
}
&-remove {
flex: none;
margin-left: ${SPACE_SM};
font-size: ${FONT_SIZE_LABEL};
color: ${p => p.theme.textColorLight};
cursor: pointer;
background: 0 0;
border: 0;
&:hover {
color: ${p => p.theme.primary};
}
}
}
}
/* react-grid-layout */
.react-grid-item.react-grid-placeholder {
background-color: ${p => p.theme.textColorDisabled} !important;
}
`
Example #12
| Source File: reactSplit.ts From datart with Apache License 2.0 | 5 votes |
|
ReactSplit = createGlobalStyle`
/* react-split */
.datart-split {
min-width: 0;
min-height: 0;
.gutter-horizontal {
&:before {
width: 2px;
height: 100%;
transform: translate(-50%, 0);
}
&:after {
width: ${SPACE_TIMES(2)};
height: 100%;
cursor: ew-resize;
transform: translate(-50%, 0);
}
}
.gutter-vertical {
&:before {
width: 100%;
height: 2px;
transform: translate(0, -50%);
}
&:after {
width: 100%;
height: ${SPACE_TIMES(2)};
cursor: ns-resize;
transform: translate(0, -50%);
}
}
.gutter-horizontal,
.gutter-vertical{
position: relative;
&:before {
position: absolute;
z-index: ${LEVEL_10};
content: '';
}
&:after {
position: absolute;
z-index: ${LEVEL_10};
content: '';
}
&:hover,
&:active {
&:before {
background-color: ${p => p.theme.primary};
}
}
}
}
`
Example #13
| Source File: GlobalStyle.ts From baidu-pan-downloader with MIT License | 4 votes |
|
GlobalStyle = createGlobalStyle`
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
background-color: #2f3439;
font-family: "Noto Sans", sans-serif;
}
.wrap {
display: flex;
justify-content: center;
width: 100%;
}
/* -------------------------------------
* Bar container
* ------------------------------------- */
.progress-radial {
float: left;
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #2f3439;
background-color: tomato;
transition: all 1s ease-out;
cursor: pointer;
}
.progress-radial:hover {
background: #2e6da4;
}
/* -------------------------------------
* Optional centered circle w/text
* ------------------------------------- */
.progress-radial .overlay {
position: absolute;
width: 30px;
height: 30px;
background-color: #fffde8;
border-radius: 50%;
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 2rem;
font-size: 12px;
}
/* -------------------------------------
* Mixin for progress-% class
* ------------------------------------- */
.progress-0 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-1 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(93.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-2 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(97.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-3 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(100.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-4 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(104.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-5 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-6 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(111.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-7 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(115.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-8 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(118.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-9 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(122.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-10 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-11 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(129.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-12 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(133.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-13 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(136.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-14 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(140.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-15 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-16 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(147.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-17 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(151.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-18 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(154.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-19 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(158.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-20 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-21 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(165.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-22 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(169.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-23 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(172.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-24 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(176.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-25 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-26 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(183.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-27 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(187.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-28 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(190.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-29 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(194.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-30 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-31 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(201.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-32 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(205.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-33 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(208.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-34 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(212.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-35 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-36 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(219.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-37 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(223.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-38 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(226.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-39 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(230.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-40 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-41 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(237.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-42 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(241.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-43 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(244.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-44 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(248.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-45 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-46 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(255.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-47 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(259.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-48 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(262.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-49 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(266.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-50 {
background-image: linear-gradient(-90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-51 {
background-image: linear-gradient(-86.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-52 {
background-image: linear-gradient(-82.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-53 {
background-image: linear-gradient(-79.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-54 {
background-image: linear-gradient(-75.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-55 {
background-image: linear-gradient(-72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-56 {
background-image: linear-gradient(-68.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-57 {
background-image: linear-gradient(-64.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-58 {
background-image: linear-gradient(-61.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-59 {
background-image: linear-gradient(-57.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-60 {
background-image: linear-gradient(-54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-61 {
background-image: linear-gradient(-50.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-62 {
background-image: linear-gradient(-46.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-63 {
background-image: linear-gradient(-43.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-64 {
background-image: linear-gradient(-39.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-65 {
background-image: linear-gradient(-36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-66 {
background-image: linear-gradient(-32.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-67 {
background-image: linear-gradient(-28.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-68 {
background-image: linear-gradient(-25.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-69 {
background-image: linear-gradient(-21.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-70 {
background-image: linear-gradient(-18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-71 {
background-image: linear-gradient(-14.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-72 {
background-image: linear-gradient(-10.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-73 {
background-image: linear-gradient(-7.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-74 {
background-image: linear-gradient(-3.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-75 {
background-image: linear-gradient(0deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-76 {
background-image: linear-gradient(3.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-77 {
background-image: linear-gradient(7.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-78 {
background-image: linear-gradient(10.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-79 {
background-image: linear-gradient(14.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-80 {
background-image: linear-gradient(18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-81 {
background-image: linear-gradient(21.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-82 {
background-image: linear-gradient(25.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-83 {
background-image: linear-gradient(28.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-84 {
background-image: linear-gradient(32.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-85 {
background-image: linear-gradient(36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-86 {
background-image: linear-gradient(39.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-87 {
background-image: linear-gradient(43.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-88 {
background-image: linear-gradient(46.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-89 {
background-image: linear-gradient(50.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-90 {
background-image: linear-gradient(54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-91 {
background-image: linear-gradient(57.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-92 {
background-image: linear-gradient(61.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-93 {
background-image: linear-gradient(64.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-94 {
background-image: linear-gradient(68.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-95 {
background-image: linear-gradient(72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-96 {
background-image: linear-gradient(75.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-97 {
background-image: linear-gradient(79.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-98 {
background-image: linear-gradient(82.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-99 {
background-image: linear-gradient(86.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-100 {
background-image: linear-gradient(90deg, #ff6347 52%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
pre.code {
text-align: left;
background: rgb(250, 250, 250);
border-radius: 3px;
border: 0px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px inset;
color: #4d4d4d;
font-family: Monaco, Consolas, "Courier New", Courier, monospace, sans-serif;
font-size: 13px;
outline: 0px;
overflow: auto;
max-height: 55vh;
padding: 10px;
vertical-align: baseline;
line-height: normal;
}
#floating-button{
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 55px;
right: 32px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus{
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
animation: plus-out 0.3s;
transition: all 0.3s;
}
#container-floating{
position: fixed;
width: 70px;
height: 70px;
bottom: 30px;
right: 30px;
z-index: 50;
}
#container-floating:hover{
height: 400px;
width: 90px;
padding: 30px;
}
#container-floating:hover .plus{
animation: plus-in 0.15s linear;
animation-fill-mode: forwards;
}
.edit{
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
display: block;
right: 0;
padding: 0;
opacity: 0;
margin: auto;
line-height: 65px;
transform: rotateZ(-70deg);
transition: all 0.3s;
animation: edit-out 0.3s;
}
#container-floating:hover .edit{
animation: edit-in 0.2s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
@keyframes edit-in{
from {opacity: 0; transform: rotateZ(-70deg);}
to {opacity: 1; transform: rotateZ(0deg);}
}
@keyframes edit-out{
from {opacity: 1; transform: rotateZ(0deg);}
to {opacity: 0; transform: rotateZ(-70deg);}
}
@keyframes plus-in{
from {opacity: 1; transform: rotateZ(0deg);}
to {opacity: 0; transform: rotateZ(180deg);}
}
@keyframes plus-out{
from {opacity: 0; transform: rotateZ(180deg);}
to {opacity: 1; transform: rotateZ(0deg);}
}
.nds{
width: 40px;
height: 40px;
border-radius: 50%;
position: fixed;
z-index: 300;
transform: scale(0);
cursor: pointer;
}
.nd1{
background: #d3a411;
right: 40px;
bottom: 120px;
animation-delay: 0.2s;
animation: bounce-out-nds 0.3s linear;
animation-fill-mode: forwards;
}
@keyframes bounce-nds{
from {opacity: 0;}
to {opacity: 1; transform: scale(1);}
}
@keyframes bounce-out-nds{
from {opacity: 1; transform: scale(1);}
to {opacity: 0; transform: scale(0);}
}
#container-floating:hover .nds{
animation: bounce-nds 0.1s linear;
animation-fill-mode: forwards;
}
.reminder{
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
line-height: 40px;
}
.module-yun-tip {
z-index: 999 !important;
}
`
Example #14
| Source File: global.ts From tezos-academy with MIT License | 4 votes |
|
GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
}
.img-git-diff {
height: 300px;
}
:root {
--glitch-height: 100vh;
--gap-horizontal: 10px;
--gap-vertical: 5px;
--time-anim: 6s;
--delay-anim: 0s;
--blend-mode-1: none;
--blend-mode-2: none;
--blend-mode-3: none;
--blend-mode-4: none;
--blend-mode-5: overlay;
--blend-color-1: transparent;
--blend-color-2: transparent;
--blend-color-3: transparent;
--blend-color-4: transparent;
--blend-color-5: #af4949;
}
body {
font-family: 'Electrolize', Helvetica, Arial, sans-serif;
font-display: optional;
margin: 0;
padding: 0;
background-color: ${backgroundColor};
color: ${textColor};
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-size: 40px;
font-weight: 700;
display: inline-block;
margin: 20px 0px;
}
h2 {
font-size: 20px;
font-weight: normal;
display: block;
margin: 0;
}
h3 {
font-size: 30px;
font-weight: normal;
display: block;
margin: 0;
}
input {
color: ${textColor};
font-size: 14px;
}
::placeholder {
color: ${placeholderColor};
font-size: 14px;
}
*:focus {
outline: none;
}
a {
color: #42edf8;
text-decoration: none !important;
opacity: 1;
transition: opacity 0.15s ease-in-out-out;
will-change: opacity;
}
a:visited {
color: inherit;
}
a:hover {
opacity: 0.9;
}
p {
font-family: "Proxima Nova", sans-serif;
display: block;
margin-block-start: 10px;
margin-block-end: 10px;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
@keyframes autofill {
0%,100% {
color: ${textColor};
background: ${backgroundColor};
}
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
animation-delay: 300ms;
animation-name: autofill;
animation-fill-mode: both;
}
.appear {
opacity: 0;
will-change: transform, opacity;
animation: ${fadeInFromLeft} ease-in-out 1;
animation-fill-mode: forwards;
animation-duration: 0.3s;
}
.slide-right-enter {
opacity: 0;
}
.slide-right-enter-active {
opacity: 1;
transition: opacity 200ms;
}
.slide-right-exit {
opacity: 1;
}
.slide-right-exit-active {
opacity: 0;
transition: opacity 200ms;
}
.slide-left-enter {
opacity: 0;
}
.slide-left-enter-active {
opacity: 1;
transition: opacity 200ms;
}
.slide-left-exit {
opacity: 1;
}
.slide-left-exit-active {
opacity: 0;
transition: opacity 200ms;
}
/* .slide-right-enter-active {
animation-name: ${slideRightEnter};
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.slide-right-exit-active {
animation-name: ${slideRightExit};
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.slide-left-enter-active {
animation-name: ${slideLeftEnter};
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.slide-left-exit-active {
animation-name: ${slideLeftExit};
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
} */
.grecaptcha-badge {
visibility: hidden;
}
*::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
background: transparent;
}
*::-webkit-scrollbar-track, ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track-piece {
background: #00000000;
}
*::-webkit-scrollbar-thumb {
background: #08658b;
}
*::-webkit-scrollbar-thumb:hover {
background: #08658b;
}
.rc-slider {
margin: 10px 0 23px 5px;
}
.rc-slider-handle {
background-color: #0a456d !important;
}
.rc-slider-rail {
background-color: #0a456d !important;
}
.rc-slider-track {
background-color: #42edf8 !important;
box-shadow: 0px 0px 25px rgba(11, 183, 226, 0.65), 0px 0px 15px rgba(0, 112, 202, 0.6);
}
.rc-slider-dot {
background-color: #0a456d !important;
border: 2px solid #0a456d !important;
}
.rc-slider-dot-active {
background-color: #42edf8 !important;
border-color: #42edf8 !important;
drop-shadow: 0px 0px 25px rgba(11, 183, 226, 0.65), 0px 0px 15px rgba(0, 112, 202, 0.6);
}
.rc-slider-mark-text {
display: none !important;
}
`
Example #15
| Source File: global.ts From tezos-link with Apache License 2.0 | 4 votes |
|
GlobalStyle = createGlobalStyle`
@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova-Thin.woff2') format('woff2'), url('/fonts/ProximaNova-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova-Light.woff2') format('woff2'), url('/fonts/ProximaNova-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova-Regular.woff2') format('woff2'), url('/fonts/ProximaNova-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova-Semibold.woff2') format('woff2'), url('/fonts/ProximaNova-Semibold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova-Bold.woff2') format('woff2'), url('/fonts/ProximaNova-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: ${backgroundColor};
background-image: url("/bg.svg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: inherit;
background-position: top center;
color: ${textColor};
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
font-size: 40px;
font-weight: 700;
display: block;
margin: 20px 0px;
}
h3 {
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 300;
display: block;
margin: 0px;
}
input {
color: ${textColor};
font-size: 14px;
}
::placeholder {
color: ${placeholderColor};
font-size: 14px;
}
*:focus {
outline: none;
}
a, a:visited {
color: ${textColor};
text-decoration: none !important;
opacity: 1;
transition: opacity 0.15s ease-in-out;
will-change: opacity;
}
a:hover {
opacity: 0.9;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
.appear {
opacity: 0;
will-change: transform, opacity;
animation: ${fadeInFromLeft} ease-in 1;
animation-fill-mode: forwards;
animation-duration: 0.2s;
}
#confetis {
z-index: -1;
position: fixed;
margin-top: -100px;
margin-left: 70px;
}
blockquote {
margin: 0 10px 0 10px;
padding: 2px 10px 2px 10px;
border-left: 5px solid ${primaryColor};
}
.markdown code {
background-color: ${backgroundColor};
border-radius: 2px;
color: ${primaryColor};
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: auto;
font-family: monospace;
padding: 0.25em 0.5em;
font-size: 0.9em;
}
.markdown pre {
background-color: ${backgroundColor};
border-radius: 2px;
margin-bottom: 1.5rem;
padding: 1rem;
white-space: pre-wrap;
word-wrap: break-word;
}
.markdown pre code {
background-color: transparent;
color: #d4d4d4;
}
.markdown th {
font-size: .875rem;
text-transform: uppercase;
background-color: ${primaryColor};
color: black;
padding: .5rem;
}
.markdown td {
padding: .5rem;
}
[data-tooltip]:hover {
position: absolute;
overflow-y: visible !important;
}
[data-tooltip]:hover::before {
all: initial;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
border-radius: 5px;
padding: 10px;
background-color: ${backgroundColor};
content: attr(data-tooltip);
color: ${secondaryColor};
position: absolute;
bottom: 100%;
width: auto;
left: 50%;
transform: translate(-50%, 0);
margin-bottom: 15px;
text-align: center;
font-size: 14px;
}
[data-tooltip]:hover::after {
all: initial;
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid ${backgroundColor};
position: absolute;
bottom: 100%;
content: '';
left: 50%;
transform: translate(-50%, 0);
margin-bottom: 5px;
}
`
Example #16
| Source File: form.ts From datart with Apache License 2.0 | 4 votes |
|
Form = createGlobalStyle`
.datart-ant-input {
&.ant-input {
color: ${p => p.theme.textColorSnd};
background-color: ${p => p.theme.bodyBackground};
border-color: ${p => p.theme.bodyBackground};
box-shadow: none;
&:hover,
&:focus {
border-color: ${p => p.theme.bodyBackground};
box-shadow: none;
}
&:focus {
background-color: ${p => p.theme.emphasisBackground};
}
}
}
.datart-ant-select {
&.ant-select {
color: ${p => p.theme.textColorSnd};
}
&.ant-select:not(.ant-select-customize-input) .ant-select-selector {
background-color: ${p => p.theme.bodyBackground};
border-color: ${p => p.theme.bodyBackground} !important;
border-radius: ${BORDER_RADIUS};
box-shadow: none !important;
}
}
.datart-ant-input-number {
&.ant-input-number {
width: 100%;
background-color: ${p => p.theme.bodyBackground};
border-color: ${p => p.theme.bodyBackground};
border-radius: ${BORDER_RADIUS};
box-shadow: none;
&:hover,
&:focus {
border-color: ${p => p.theme.bodyBackground};
box-shadow: none;
}
&:focus {
background-color: ${p => p.theme.bodyBackground};
}
}
.ant-input-number-input {
color: ${p => p.theme.textColorSnd};
}
.ant-input-number-handler-wrap {
background-color: ${p => p.theme.bodyBackground};
}
.ant-input-number-disabled {
background-color: ${p => p.theme.textColorDisabled};
}
}
.datart-ant-upload {
&.ant-upload.ant-upload-drag {
background-color: ${p => p.theme.bodyBackground} !important;
border-color: transparent !important;
border-radius: ${BORDER_RADIUS};
}
}
.datart-modal-button {
&.ant-btn {
color: ${p => p.theme.textColorSnd};
background-color: ${p => p.theme.bodyBackground};
border: 0;
border-radius: ${BORDER_RADIUS};
&:hover,
&:active {
color: ${p => p.theme.textColorSnd};
background-color: ${p => p.theme.emphasisBackground};
}
}
}
`
