armcord/src/content/css/setup.css

179 lines
3.4 KiB
CSS

/* Meta {{{ */
:root {
--background-primary: #282b30;
--background-secondary: rgba(255, 255, 255, 0.1);
--background-modifier-hover: rgba(106, 116, 128, 0.16);
--brand-experiment: #7289da;
--brand-experiment-560: #5c6fb1;
--brand-experiment-600: #4e5d94;
--interactive-normal: #b9bbbe;
--interactive-hover: #dcddde;
--text-muted: #72767d;
--font-primary: "Whitney";
}
@font-face {
font-family: Whitney;
font-weight: 400;
font-style: normal;
src: url(https://armcord.smartfridge.space/whitney_400.woff) format("woff");
}
html,
body {
overflow: hidden;
margin: 0;
padding-top: 30px;
width: 100%;
height: 100%;
background: var(--background-primary);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
* {
font-family: var(--font-primary), sans-serif;
box-sizing: border-box;
user-select: none;
cursor: default;
}
/* }}} */
/* Utility classes {{{ */
.hidden {
display: none !important;
}
.text-center {
text-align: center;
}
.setup-ask {
font-size: 20px;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* }}} */
#setup {
display: flex;
flex-direction: column;
align-items: center;
color: white;
}
/* Warning {{{ */
#warning {
font-size: 1.5em;
font-weight: bold;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
max-width: 328px;
background-color: rgba(255, 0, 0, 0.1);
border: red solid 2px;
border-radius: 0.5rem;
}
#warning > p {
color: white;
font-weight: bold;
margin: 1rem;
}
/* }}} */
/* Logo {{{ */
#logo {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
content: var(--logo-svg);
width: 292px;
}
.titlebar #window-controls-container #maximize {
display: none;
}
.titlebar #window-controls-container #spacer {
float: left;
height: 100%;
width: 33%;
}
[armcord-platform="darwin"] .titlebar #window-controls-container {
margin-left: -26px;
}
[armcord-platform="darwin"] .titlebar #window-controls-container #minimize {
transform: translateX(5px);
}
/* }}} */
/* Buttons {{{ */
#buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
user-select: all !important;
margin-top: 10px;
margin-bottom: 10px;
}
button {
background: var(--brand-experiment);
color: var(--header-primary);
outline: none;
border: none;
border-radius: 4px;
padding: 8px 20px;
transition: 0.17s ease;
}
button:hover {
background: var(--brand-experiment-560);
cursor: pointer;
transition: 0.17s ease;
}
button:active {
background: var(--brand-experiment-600);
cursor: pointer;
transition: 0.17s ease;
}
/* }}} */
/* Dropdowns {{{ */
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #2c2f33;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #fff;
font-size: inherit;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
option {
text-align: left;
}
/* }}} */