[CSS] Re-arranged CSS rules, overall refactor to minimize duplications.

This commit is contained in:
Eliseu Amaro 2021-11-15 14:07:05 +00:00 committed by Hugo Sales
parent a23f7d5aa3
commit 337fe272a3
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
5 changed files with 274 additions and 285 deletions

View File

@ -1,46 +1,43 @@
@import url("../fonts/poppins/poppins.css"); @import url("../fonts/poppins/poppins.css");
@import url("../fonts/opensans/opensans.css"); @import url("../fonts/opensans/opensans.css");
@import url("widgets/buttons.css"); @import url("widgets/buttons.css");
@import url("widgets/sections.css"); @import url("widgets/sections.css");
/* Sizes vars */
:root { :root {
--smaller: 0.6rem; --smaller: .6rem;
--default: 1rem; --default: 1rem;
--small: 1.3rem; --small: 1.3rem;
--medium: 1.62rem; --medium: 1.62rem;
--big: 3rem; --big: 3rem;
} }
/* RESET START */
* { * {
-webkit-box-sizing: border-box !important; -webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important; -moz-box-sizing: border-box !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
body, body,html {
html {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-attachment: fixed; background-attachment: fixed;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans',sans-serif;
font-size: var(--default); font-size: var(--default);
} }
body, body,input,textarea,select {
input,
textarea,
select {
color: var(--foreground); color: var(--foreground);
fill: var(--foreground); fill: var(--foreground);
} }
:link, :link,:visited {
:visited {
text-decoration: none; text-decoration: none;
color: currentColor; color: currentColor;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -52,27 +49,18 @@ hr {
background-color: var(--border) !important; background-color: var(--border) !important;
} }
ol, ol,ul {
ul {
list-style: none; list-style: none;
} }
blockquote, blockquote,body,fieldset,form,html,input,pre,textarea {
body,
fieldset,
form,
html,
input,
pre,
textarea {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: 0;
} }
:link img,
:visited img, :link img,:visited img,a img {
a img { border: 0;
border: none;
} }
address { address {
@ -80,28 +68,27 @@ address {
} }
:focus { :focus {
outline: none; outline: 0;
} }
::-moz-focus-inner { ::-moz-focus-inner {
border: 0; border: 0;
} }
details summary > * { details summary>* {
margin: unset; margin: unset;
padding: unset; padding: unset;
} }
details > summary { details>summary {
list-style: none; list-style: none;
} }
details > summary::-webkit-details-marker { details>summary::-webkit-details-marker {
display: none; display: none;
} }
/* Internet Explorer <details> graceful degradation */ @supports not(-ms-ime-align:auto) {
@supports not (-ms-ime-align: auto) {
details summary { details summary {
cursor: pointer; cursor: pointer;
} }
@ -111,15 +98,10 @@ details > summary::-webkit-details-marker {
display: none; display: none;
} }
h1, h1,h2,h3,h4,h5,h6 {
h2,
h3,
h4,
h5,
h6 {
all: unset; all: unset;
display: block; display: block;
font-family: 'Poppins', sans-serif; font-family: 'Poppins',sans-serif;
} }
h1 { h1 {
@ -140,26 +122,28 @@ h3 {
margin-bottom: 10px; margin-bottom: 10px;
} }
h4, h4,h5 {
h5 {
font-size: var(--default); font-size: var(--default);
font-weight: 400; font-weight: 400;
margin-bottom: 6.1px; margin-bottom: 6.1px;
} }
p { p {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans',sans-serif;
font-size: var(--default); font-size: var(--default);
font-weight: 400; font-weight: 400;
margin: unset; margin: unset;
} }
p:first-line { p:first-line {
padding-left: var(--default); padding-left: var(--default);
} }
p:first-line { p:first-line {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
} }
p:not(:first-line) { p:not(:first-line) {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
@ -169,10 +153,8 @@ label {
max-width: 100%; max-width: 100%;
} }
input[type=password], input[type=password],input[type=text],textarea {
input[type=text], font-family: 'Open Sans',sans-serif;
textarea {
font-family: 'Open Sans', sans-serif;
font-weight: 400; font-weight: 400;
padding: 4px 6px; padding: 4px 6px;
} }
@ -189,89 +171,75 @@ li {
padding: 0; padding: 0;
} }
/* Focus and hover (inset shadow is used in alternative to a border to prevent further redraws) */
*:focus { *:focus {
-webkit-box-shadow: var(--shadow-inset-accent); -webkit-box-shadow: var(--shadow-inset-accent);
-moz-box-shadow: var(--shadow-inset-accent); -moz-box-shadow: var(--shadow-inset-accent);
box-shadow: var(--shadow-inset-accent); box-shadow: var(--shadow-inset-accent);
} }
/* RESET END */
/* DARK AND LIGHT COLOUR SCHEMES START */ @media(prefers-color-scheme:dark) {
@media (prefers-color-scheme: dark) { :root {
/* Colour vars */ --foreground: #f0f6f6;
:root { --background-hard: #141216;
--foreground: #F0F6F6; --background-card: #131217;
--background-hard: #141216; --border: #201f25;
--background-card: #131217; --accent: #5ddbcf;
--border: #201F25; --shadow: 0 0 12px 0 #01010166;
--accent: #5ddbcf; --shadow-inset-accent: inset 0 0 0 2px var(--accent);
--shadow: 0 0 12px 0 #01010166; --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
--shadow-inset-accent: inset 0 0 0 2px var(--accent); --gradient: linear-gradient(10deg,var(--border) 0,transparent 100%) !important;
--background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round; --gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%) !important;
--gradient: linear-gradient(10deg, var(--border) 0%, transparent 100%) !important;
--gradient-backwards: linear-gradient(290deg, var(--border) 0%, var(--background-card) 100%) !important;
}
/* The page background image itself */
.background-image {
background-color: var(--background-hard);
}
/* Select element custom dropdown arrow */
select {
background: var(--gradient), url("../images/select_drop_dark.png") no-repeat center right 5px !important;
background-size: cover, 16px !important;
}
} }
@media (prefers-color-scheme: light) { .background-image {
/* Colour vars */ background-color: var(--background-hard);
:root {
--foreground: #09090D;
--background-hard: #EBEBEB;
--background-card: #F0F0F0;
--border: #D5D5D5;
--accent: #A22430;
--shadow: 0 0 12px 0 #24243416;
--shadow-inset-accent: inset 0 0 0 2px var(--accent);
--background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
--gradient: linear-gradient(290deg, var(--border) 0%, transparent 60%) !important;
--gradient-backwards: linear-gradient(290deg, var(--border) 0%, var(--background-card) 100%) !important;
}
/* The page background image itself */
.background-image {
background-color: var(--background-hard);
}
/* Select element custom dropdown arrow */
select {
background: var(--gradient), url("../images/select_drop_light.png") no-repeat center right 5px !important;
background-size: cover, 16px !important;
background-blend-mode: saturation;
}
} }
/* DARK AND LIGHT COLOUR SCHEMES END */
/* MISCELLANEOUS START */ select {
/* Align all icon .svg to center */ background: var(--gradient),url("../images/select_drop_dark.png") no-repeat center right 5px !important;
background-size: cover,16px !important;
}
}
@media(prefers-color-scheme:light) {
:root {
--foreground: #09090d;
--background-hard: #ebebeb;
--background-card: #f0f0f0;
--border: #d5d5d5;
--accent: #a22430;
--shadow: 0 0 12px 0 #24243416;
--shadow-inset-accent: inset 0 0 0 2px var(--accent);
--background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
--gradient: linear-gradient(290deg,var(--border) 0,transparent 60%) !important;
--gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%) !important;
}
.background-image {
background-color: var(--background-hard);
}
select {
background: var(--gradient),url("../images/select_drop_light.png") no-repeat center right 5px !important;
background-size: cover,16px !important;
background-blend-mode: saturation;
}
}
.icon { .icon {
align-self: center; align-self: center;
} }
/* All active links should pop up, the user should be aware where it is */
.active { .active {
font-weight: bold; font-weight: bold;
} }
/* Hide all anchors used for accesskey shortcuts */
.anchor-hidden { .anchor-hidden {
width: 1px; width: 1px;
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
} }
/* MISCELLANEOUS END */
/* Background image and noise (Firefox-based browsers present banding without it) */
.background-image { .background-image {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -299,6 +267,7 @@ box-shadow: var(--shadow-inset-accent);
list-style-type: disc; list-style-type: disc;
margin-left: var(--small); margin-left: var(--small);
} }
.accessibility-menu:focus-within:not(:active) { .accessibility-menu:focus-within:not(:active) {
top: var(--smaller); top: var(--smaller);
left: var(--smaller); left: var(--smaller);
@ -306,7 +275,7 @@ box-shadow: var(--shadow-inset-accent);
.page-header { .page-header {
z-index: 1; z-index: 1;
font-family: 'Poppins', sans-serif; font-family: 'Poppins',sans-serif;
font-size: var(--medium); font-size: var(--medium);
height: var(--big); height: var(--big);
display: flex; display: flex;
@ -319,7 +288,7 @@ box-shadow: var(--shadow-inset-accent);
background: var(--gradient) !important; background: var(--gradient) !important;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
/* Allow scrolling all the way to the top ("page-header" has a height of 3rem) */
html { html {
scroll-margin-top: var(--big); scroll-margin-top: var(--big);
} }
@ -333,7 +302,7 @@ html {
margin-left: auto; margin-left: auto;
} }
.header-instance > * { .header-instance>* {
margin: unset; margin: unset;
} }
@ -341,7 +310,8 @@ html {
justify-self: flex-end; justify-self: flex-end;
margin-left: auto; margin-left: auto;
} }
.header-extra-actions[open] > *:not(summary) {
.header-extra-actions[open]>*:not(summary) {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -381,12 +351,12 @@ html {
} }
.markdown-blocks ul li { .markdown-blocks ul li {
margin-bottom: 0.2em; margin-bottom: .2em;
} }
.doc-navigation { .doc-navigation {
border-radius: var(--smaller) var(--smaller) 0 0; border-radius: var(--smaller) var(--smaller) 0 0;
border-bottom: none; border-bottom: 0;
padding: var(--smaller); padding: var(--smaller);
background-color: var(--background-card) !important; background-color: var(--background-card) !important;
} }
@ -432,7 +402,7 @@ html {
-moz-box-direction: normal; -moz-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans',sans-serif;
font-size: var(--default); font-size: var(--default);
position: fixed; position: fixed;
top: 0; top: 0;
@ -444,7 +414,7 @@ html {
overflow-y: auto; overflow-y: auto;
} }
@media only screen and (min-width: 1281px) { @media only screen and (min-width:1281px) {
.page-content { .page-content {
padding: var(--smaller) var(--medium) 0; padding: var(--smaller) var(--medium) 0;
} }
@ -453,7 +423,7 @@ html {
width: 19vw; width: 19vw;
} }
a[id|="anchor"]:target + .accessibility-target { a[id|="anchor"]:target+.accessibility-target {
-webkit-animation-name: highlight; -webkit-animation-name: highlight;
-moz-animation-name: highlight; -moz-animation-name: highlight;
-o-animation-name: highlight; -o-animation-name: highlight;
@ -468,7 +438,8 @@ html {
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
} }
@media only screen and (max-width: 1280px) {
@media only screen and (max-width:1280px) {
.page-content-wrapper { .page-content-wrapper {
width: 100%; width: 100%;
} }
@ -477,17 +448,15 @@ html {
max-width: 100%; max-width: 100%;
} }
.header-extra-actions[open] > *:not(summary) { .header-extra-actions[open]>*:not(summary) {
width: 100%; width: 100%;
} }
#panel-left-toggle:not(:checked) + .header-panel, #panel-left-toggle:not(:checked)+.header-panel,#panel-right-toggle:not(:checked)+.header-panel {
#panel-right-toggle:not(:checked) + .header-panel {
display: none; display: none;
} }
#panel-left-toggle:checked + .header-panel,
#panel-right-toggle:checked + .header-panel, #panel-left-toggle:checked+.header-panel,#panel-right-toggle:checked+.header-panel,a[id|="anchor"]:target ~ .panel-content {
a[id|="anchor"]:target ~ .panel-content {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-box; display: -moz-box;
@ -515,6 +484,7 @@ html {
transform: none; transform: none;
} }
} }
@-moz-keyframes fadeIn { @-moz-keyframes fadeIn {
0% { 0% {
opacity: 0; opacity: 0;
@ -527,6 +497,7 @@ html {
transform: none; transform: none;
} }
} }
@-o-keyframes fadeIn { @-o-keyframes fadeIn {
0% { 0% {
opacity: 0; opacity: 0;
@ -539,6 +510,7 @@ html {
transform: none; transform: none;
} }
} }
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% {
opacity: 0; opacity: 0;
@ -555,6 +527,7 @@ html {
transform: none; transform: none;
} }
} }
@-webkit-keyframes fadeOut { @-webkit-keyframes fadeOut {
100% { 100% {
opacity: 0; opacity: 0;
@ -567,6 +540,7 @@ html {
transform: none; transform: none;
} }
} }
@-moz-keyframes fadeOut { @-moz-keyframes fadeOut {
100% { 100% {
opacity: 0; opacity: 0;
@ -579,6 +553,7 @@ html {
transform: none; transform: none;
} }
} }
@-o-keyframes fadeOut { @-o-keyframes fadeOut {
100% { 100% {
opacity: 0; opacity: 0;
@ -591,6 +566,7 @@ html {
transform: none; transform: none;
} }
} }
@keyframes fadeOut { @keyframes fadeOut {
100% { 100% {
opacity: 0; opacity: 0;
@ -607,6 +583,7 @@ html {
transform: none; transform: none;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@-webkit-keyframes highlight { @-webkit-keyframes highlight {
0% { 0% {
@ -617,7 +594,8 @@ html {
} }
50% { 50% {
-webkit-border-rns -webkit-border-rns
Enable/disabadius: var(--smaller); Enable/
disabadius: var(--smaller);
border-radius: var(--smaller); border-radius: var(--smaller);
-webkit-box-shadow: inset 0 20px 40px #FFF; -webkit-box-shadow: inset 0 20px 40px #FFF;
box-shadow: inset 0 20px 40px #FFF; box-shadow: inset 0 20px 40px #FFF;
@ -714,6 +692,7 @@ Enable/disabadius: var(--smaller);
} }
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@-webkit-keyframes highlight { @-webkit-keyframes highlight {
0% { 0% {

View File

@ -1,5 +1,4 @@
.notes hr { .notes hr {
margin-top: var(--smaller) margin-top: var(--smaller)
} }
@ -182,12 +181,15 @@ embed header {
-ms-grid-row-align: center; -ms-grid-row-align: center;
align-self: center align-self: center
} }
.note-author-fullname { .note-author-fullname {
font-weight: bold; font-weight: bold;
} }
.note-author-nickname { .note-author-nickname {
opacity: 0.5; opacity: 0.5;
} }
.note-author-nickname::before { .note-author-nickname::before {
content: '@'; content: '@';
} }
@ -311,7 +313,7 @@ embed header {
margin-right: var(--smaller) margin-right: var(--smaller)
} }
.note-attachments-unit>figure figcaption { .note-attachments-unit > figure figcaption {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-box; display: -moz-box;

View File

@ -1,35 +1,34 @@
.section-settings { .section-settings {
margin-bottom: 0.6rem; margin-bottom: .6rem;
border-radius: 0.6rem; border-radius: .6rem;
padding: 0.6rem; padding: .6rem;
box-sizing: border-box; box-sizing: border-box;
} }
.section-settings hr { .section-settings hr {
margin-top: 0.6rem; margin-top: .6rem;
margin-bottom: 0.6rem; margin-bottom: .6rem;
} }
.section-settings, .section-settings,.section-settings ul {
.section-settings ul {
border: 2px solid var(--border) !important; border: 2px solid var(--border) !important;
background-color: var(--background-card) !important; background-color: var(--background-card) !important;
} }
.section-settings ul { .section-settings ul {
border-radius: 0.6rem; border-radius: .6rem;
padding: 0.6rem; padding: .6rem;
box-sizing: border-box; box-sizing: border-box;
} }
.section-settings ul li { .section-settings ul li {
border-radius: 0.6rem; border-radius: .6rem;
} }
.form { .form {
display: flex; display: flex;
border-radius: 0.6rem; border-radius: .6rem;
padding: 0.6rem; padding: .6rem;
box-sizing: border-box; box-sizing: border-box;
} }
@ -40,7 +39,7 @@
.form #save { .form #save {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.6rem; padding: .6rem;
box-sizing: border-box; box-sizing: border-box;
} }
@ -50,16 +49,14 @@
.form #save div label { .form #save div label {
display: inline-block; display: inline-block;
font-family: 'Poppins', sans-serif; font-family: 'Poppins',sans-serif;
} }
.form #save div input, .form #save div input,.form #save div textarea {
.form #save div textarea {
display: inline-block; display: inline-block;
position: relative; position: relative;
border-radius: .6rem;
border-radius: 0.6rem; padding: .6rem;
padding: 0.6rem;
box-sizing: border-box; box-sizing: border-box;
} }
@ -76,34 +73,31 @@
} }
.section-title-settings section { .section-title-settings section {
margin-top: 0.6rem; margin-top: .6rem;
} }
.section-title-settings summary { .section-title-settings summary {
padding: 0.6rem 1rem; padding: .6rem 1rem;
} }
.section-title-settings summary h3:first-letter,
.section-title-settings summary em:first-letter { .section-title-settings summary h3:first-letter ,.section-title-settings summary em:first-letter {
text-transform: uppercase; text-transform: uppercase;
} }
.section-title-settings summary:focus .icon-details-open, .section-title-settings summary:focus .icon-details-open,.section-title-settings summary:hover .icon-details-open {
.section-title-settings summary:hover .icon-details-open { transition: all 200ms cubic-bezier(0,0.55,0.45,1);
transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
} }
/* SECTION DETAILS OPENED */
.section-title-settings[open] svg { .section-title-settings[open] svg {
transform: rotate(180deg); transform: rotate(180deg);
animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1) animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
} }
.section-title-settings[open] .set-nav li:last-of-type { .section-title-settings[open] .set-nav li:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
/* SECTION DETAILS CLOSED */
.section-title-settings:not([open]) svg { .section-title-settings:not([open]) svg {
transform: initial; transform: initial;
animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
} }

View File

@ -1,12 +1,113 @@
input { input {
all: unset; all: unset;
} }
input + label {
input+label {
-webkit-align-self: center; -webkit-align-self: center;
-ms-flex-item-align: center; -ms-flex-item-align: center;
-ms-grid-row-align: center; -ms-grid-row-align: center;
align-self: center; align-self: center;
} }
input[type=checkbox],input[type=radio] {
all: unset;
display: inline-block;
cursor: pointer !important;
width: 1rem !important;
height: 1rem !important;
}
input[type=checkbox]:not(:hover,:focus),input[type=radio]:not(:hover,:focus) {
opacity: 75%;
}
input[type=radio] {
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
margin: 3px 3px 0 5px !important;
}
input[type=file] {
all: unset;
display: block;
width: 100%;
font-family: 'Open Sans',sans-serif !important;
font-weight: normal !important;
padding: unset !important;
-webkit-border-radius: .6rem;
-moz-border-radius: .6rem;
border-radius: .6rem;
background: var(--gradient) !important;
}
input[type=radio] {
border: solid .25em !important;
}
input[type=checkbox] {
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
margin-right: 2px;
-webkit-mask-image: url("../../icons/check-off.svg") !important;
-o-mask-image: url("../../icons/check-off.svg") !important;
-moz-mask-image: url("../../icons/check-off.svg") !important;
mask-image: url("../../icons/check-off.svg") !important;
}
input[type=checkbox]:checked {
-webkit-mask-image: url("../../icons/check-on.svg") !important;
-o-mask-image: url("../../icons/check-on.svg") !important;
-moz-mask-image: url("../../icons/check-on.svg") !important;
mask-image: url("../../icons/check-on.svg") !important;
}
input[type=color] {
border: unset;
padding: 2px;
width: 100%;
height: 3rem;
}
::-webkit-file-upload-button {
cursor: pointer;
background-color: unset;
border: unset;
font-family: 'Open Sans',sans-serif !important;
font-weight: bold !important;
color: var(--foreground);
fill: var(--foreground);
margin: 3px;
}
::file-selector-button {
cursor: pointer;
background-color: unset;
border: unset;
font-family: 'Open Sans',sans-serif !important;
font-weight: bold !important;
color: var(--foreground);
fill: var(--foreground);
margin: 3px;
}
::file-selector-button {
cursor: pointer;
background-color: unset;
border: unset;
font-family: 'Open Sans',sans-serif !important;
font-weight: bold !important;
color: var(--foreground);
fill: var(--foreground);
margin: 3px;
}
*|*::-moz-button-content {
all: unset !important;
}
button { button {
cursor: pointer !important; cursor: pointer !important;
float: right !important; float: right !important;
@ -15,63 +116,14 @@ button {
-ms-grid-row-align: end !important; -ms-grid-row-align: end !important;
align-self: end !important; align-self: end !important;
} }
*|*::-moz-button-content {
all: unset !important; button,label {
} font-family: 'Poppins',sans-serif;
input[type=checkbox],
input[type=radio] {
all: unset;
display: inline-block;
cursor: pointer !important;
width: 1rem !important;
height: 1rem !important;
}
input[type=checkbox]:not(:hover, :focus),
input[type=radio]:not(:hover, :focus) {
opacity: 75%;
}
input[type=radio] {
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
margin: 3px 3px 0 5px !important;
}
input[type=file] {
all: unset;
display: block;
width: 100%;
-webkit-border-radius: 0.6rem !important;
-moz-border-radius: 0.6rem !important;
border-radius: 0.6rem !important;
}
::-webkit-file-upload-button {
cursor: pointer;
background-color: unset;
border: unset;
margin: 3px;
}
::file-selector-button {
cursor: pointer;
background-color: unset;
border: unset;
margin: 3px;
}
::file-selector-button {
cursor: pointer;
background-color: unset;
border: unset;
margin: 3px;
}
button,
label {
font-family: 'Poppins', sans-serif;
font-weight: bold !important; font-weight: bold !important;
color: currentColor; color: currentColor;
} }
button,
input, button,input,select,textarea {
select,
textarea {
display: -webkit-inline-box !important; display: -webkit-inline-box !important;
display: -webkit-inline-flex !important; display: -webkit-inline-flex !important;
display: -ms-inline-flexbox !important; display: -ms-inline-flexbox !important;
@ -80,9 +132,9 @@ textarea {
overflow: hidden; overflow: hidden;
font-size: inherit !important; font-size: inherit !important;
padding: 6px 8px !important; padding: 6px 8px !important;
-webkit-border-radius: 0.6rem; -webkit-border-radius: .6rem;
-moz-border-radius: 0.6rem; -moz-border-radius: .6rem;
border-radius: 0.6rem; border-radius: .6rem;
background: var(--gradient) !important; background: var(--gradient) !important;
border: 2px solid var(--border) !important; border: 2px solid var(--border) !important;
-webkit-box-shadow: var(--shadow); -webkit-box-shadow: var(--shadow);
@ -95,70 +147,17 @@ select {
-moz-appearance: none !important; -moz-appearance: none !important;
cursor: pointer; cursor: pointer;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-border-radius: 0.6rem; -webkit-border-radius: .6rem;
-moz-border-radius: 0.6rem; -moz-border-radius: .6rem;
border-radius: 0.6rem; border-radius: .6rem;
max-width: 100% !important; max-width: 100% !important;
} }
select > option {
select>option {
width: 1px; width: 1px;
} }
input[type=radio] {
border: solid 0.25em !important;
}
input[type=checkbox] {
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
margin-right: 2px;
-webkit-mask-image: url("../../icons/check-off.svg") !important;
-o-mask-image: url("../../icons/check-off.svg") !important;
-moz-mask-image: url("../../icons/check-off.svg") !important;
mask-image: url("../../icons/check-off.svg") !important;
}
input[type=color] {
border: unset;
padding: 2px;
width: 100%;
height: 3rem;
}
input[type=checkbox]:checked {
-webkit-mask-image: url("../../icons/check-on.svg") !important;
-o-mask-image: url("../../icons/check-on.svg") !important;
-moz-mask-image: url("../../icons/check-on.svg") !important;
mask-image: url("../../icons/check-on.svg") !important;
}
input[type=file] {
font-family: 'Open Sans', sans-serif !important;
font-weight: normal !important;
padding: unset !important;
-webkit-border-radius: 0.6rem;
-moz-border-radius: 0.6rem;
border-radius: 0.6rem;
background: var(--gradient) !important;
}
::-webkit-file-upload-button {
font-family: 'Open Sans', sans-serif !important;
font-weight: bold !important;
color: var(--foreground);
fill: var(--foreground);
}
::file-selector-button {
font-family: 'Open Sans', sans-serif !important;
font-weight: bold !important;
color: var(--foreground);
fill: var(--foreground);
}
::file-selector-button {
font-family: 'Open Sans', sans-serif !important;
font-weight: bold !important;
color: var(--foreground);
fill: var(--foreground);
}
input[type=checkbox], input[type=checkbox],input[type=radio] {
input[type=radio] {
border: unset !important; border: unset !important;
} }
@ -170,15 +169,8 @@ input[type=checkbox] {
background-color: var(--border) !important; background-color: var(--border) !important;
} }
button:focus, button:focus,button:hover,input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {
button:hover,
input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
-webkit-box-shadow: var(--shadow-inset-accent) !important; -webkit-box-shadow: var(--shadow-inset-accent) !important;
-moz-box-shadow: var(--shadow-inset-accent) !important; -moz-box-shadow: var(--shadow-inset-accent) !important;
box-shadow: var(--shadow-inset-accent) !important; box-shadow: var(--shadow-inset-accent) !important;
} }

View File

@ -12,6 +12,7 @@
-moz-box-shadow: var(--shadow); -moz-box-shadow: var(--shadow);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.profile *[class*="profile-info-"] { .profile *[class*="profile-info-"] {
flex: 1; flex: 1;
} }
@ -21,18 +22,23 @@
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column flex-direction: column
} }
.profile-info-nickname { .profile-info-nickname {
font-size: 1.3rem font-size: 1.3rem
} }
.profile-info-tags { .profile-info-tags {
margin: unset margin: unset
} }
.profile-info-stats strong { .profile-info-stats strong {
margin-right: 5px margin-right: 5px
} }
.profile-info-stats { .profile-info-stats {
margin-top: 0.6rem margin-top: 0.6rem
} }
.profile-avatar { .profile-avatar {
max-width: 4rem; max-width: 4rem;
min-width: 3rem; min-width: 3rem;
@ -41,6 +47,7 @@
margin-right: 5px; margin-right: 5px;
border-radius: 2px border-radius: 2px
} }
.section-widget { .section-widget {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -50,17 +57,21 @@
box-shadow: var(--shadow); box-shadow: var(--shadow);
border: 2px solid var(--border) !important; border: 2px solid var(--border) !important;
} }
.section-widget hr { .section-widget hr {
margin-bottom: 0.6rem margin-bottom: 0.6rem
} }
.section-widget-padded { .section-widget-padded {
padding: 0.6rem padding: 0.6rem
} }
.section-title { .section-title {
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 700; font-weight: 700;
margin: 0 margin: 0
} }
.section-widget-button-like { .section-widget-button-like {
border-radius: 0.6rem; border-radius: 0.6rem;
padding: 6px 10px; padding: 6px 10px;
@ -71,6 +82,7 @@
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: 700 font-weight: 700
} }
.section-title-details { .section-title-details {
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 700; font-weight: 700;
@ -78,18 +90,22 @@
padding: 6px 10px 6px 10px; padding: 6px 10px 6px 10px;
background: var(--gradient) !important; background: var(--gradient) !important;
} }
.section-title-details[open] svg { .section-title-details[open] svg {
transform: rotate(180deg); transform: rotate(180deg);
animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1) animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1)
} }
.section-title-details:not([open]) svg { .section-title-details:not([open]) svg {
transform: initial; transform: initial;
animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1) animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1)
} }
.section-title-summary { .section-title-summary {
display: flex; display: flex;
justify-content: space-between justify-content: space-between
} }
.section-form { .section-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -97,30 +113,36 @@
width: 100%; width: 100%;
padding: 0.6rem padding: 0.6rem
} }
.section-form-legend { .section-form-legend {
margin-top: unset; margin-top: unset;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
font-size: 1.62rem font-size: 1.62rem
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 6px margin-bottom: 6px
} }
.form-group textarea { .form-group textarea {
height: 7rem; height: 7rem;
max-height: 100% max-height: 100%
} }
.help-block { .help-block {
margin-bottom: 6px margin-bottom: 6px
} }
.help-text { .help-text {
font-style: italic; font-style: italic;
font-size: 1rem; font-size: 1rem;
margin-bottom: 6px margin-bottom: 6px
} }
.help-block>.list-unstyled,
.help-block > .list-unstyled,
.alert, .alert,
.alert-danger { .alert-danger {
display: inline-block; display: inline-block;