[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
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
5 changed files with 274 additions and 285 deletions

View File

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

View File

@ -1,5 +1,4 @@
.notes hr {
margin-top: var(--smaller)
}
@ -182,12 +181,15 @@ embed header {
-ms-grid-row-align: center;
align-self: center
}
.note-author-fullname {
font-weight: bold;
}
.note-author-nickname {
opacity: 0.5;
}
.note-author-nickname::before {
content: '@';
}

View File

@ -1,35 +1,34 @@
.section-settings {
margin-bottom: 0.6rem;
border-radius: 0.6rem;
padding: 0.6rem;
margin-bottom: .6rem;
border-radius: .6rem;
padding: .6rem;
box-sizing: border-box;
}
.section-settings hr {
margin-top: 0.6rem;
margin-bottom: 0.6rem;
margin-top: .6rem;
margin-bottom: .6rem;
}
.section-settings,
.section-settings ul {
.section-settings,.section-settings ul {
border: 2px solid var(--border) !important;
background-color: var(--background-card) !important;
}
.section-settings ul {
border-radius: 0.6rem;
padding: 0.6rem;
border-radius: .6rem;
padding: .6rem;
box-sizing: border-box;
}
.section-settings ul li {
border-radius: 0.6rem;
border-radius: .6rem;
}
.form {
display: flex;
border-radius: 0.6rem;
padding: 0.6rem;
border-radius: .6rem;
padding: .6rem;
box-sizing: border-box;
}
@ -40,7 +39,7 @@
.form #save {
display: flex;
flex-direction: column;
padding: 0.6rem;
padding: .6rem;
box-sizing: border-box;
}
@ -53,13 +52,11 @@
font-family: 'Poppins',sans-serif;
}
.form #save div input,
.form #save div textarea {
.form #save div input,.form #save div textarea {
display: inline-block;
position: relative;
border-radius: 0.6rem;
padding: 0.6rem;
border-radius: .6rem;
padding: .6rem;
box-sizing: border-box;
}
@ -76,33 +73,30 @@
}
.section-title-settings section {
margin-top: 0.6rem;
margin-top: .6rem;
}
.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;
}
.section-title-settings summary:focus .icon-details-open,
.section-title-settings summary:hover .icon-details-open {
.section-title-settings summary:focus .icon-details-open,.section-title-settings summary:hover .icon-details-open {
transition: all 200ms cubic-bezier(0,0.55,0.45,1);
}
/* SECTION DETAILS OPENED */
.section-title-settings[open] svg {
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 {
margin-bottom: 0;
}
/* SECTION DETAILS CLOSED */
.section-title-settings:not([open]) svg {
transform: initial;
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);

View File

@ -1,12 +1,113 @@
input {
all: unset;
}
input+label {
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: 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 {
cursor: pointer !important;
float: right !important;
@ -15,63 +116,14 @@ button {
-ms-grid-row-align: end !important;
align-self: end !important;
}
*|*::-moz-button-content {
all: unset !important;
}
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 {
button,label {
font-family: 'Poppins',sans-serif;
font-weight: bold !important;
color: currentColor;
}
button,
input,
select,
textarea {
button,input,select,textarea {
display: -webkit-inline-box !important;
display: -webkit-inline-flex !important;
display: -ms-inline-flexbox !important;
@ -80,9 +132,9 @@ textarea {
overflow: hidden;
font-size: inherit !important;
padding: 6px 8px !important;
-webkit-border-radius: 0.6rem;
-moz-border-radius: 0.6rem;
border-radius: 0.6rem;
-webkit-border-radius: .6rem;
-moz-border-radius: .6rem;
border-radius: .6rem;
background: var(--gradient) !important;
border: 2px solid var(--border) !important;
-webkit-box-shadow: var(--shadow);
@ -95,70 +147,17 @@ select {
-moz-appearance: none !important;
cursor: pointer;
background-repeat: no-repeat;
-webkit-border-radius: 0.6rem;
-moz-border-radius: 0.6rem;
border-radius: 0.6rem;
-webkit-border-radius: .6rem;
-moz-border-radius: .6rem;
border-radius: .6rem;
max-width: 100% !important;
}
select>option {
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=radio] {
input[type=checkbox],input[type=radio] {
border: unset !important;
}
@ -170,14 +169,7 @@ input[type=checkbox] {
background-color: var(--border) !important;
}
button:focus,
button:hover,
input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
button:focus,button:hover,input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {
-webkit-box-shadow: var(--shadow-inset-accent) !important;
-moz-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);
box-shadow: var(--shadow);
}
.profile *[class*="profile-info-"] {
flex: 1;
}
@ -21,18 +22,23 @@
flex-wrap: wrap;
flex-direction: column
}
.profile-info-nickname {
font-size: 1.3rem
}
.profile-info-tags {
margin: unset
}
.profile-info-stats strong {
margin-right: 5px
}
.profile-info-stats {
margin-top: 0.6rem
}
.profile-avatar {
max-width: 4rem;
min-width: 3rem;
@ -41,6 +47,7 @@
margin-right: 5px;
border-radius: 2px
}
.section-widget {
display: flex;
flex-direction: column;
@ -50,17 +57,21 @@
box-shadow: var(--shadow);
border: 2px solid var(--border) !important;
}
.section-widget hr {
margin-bottom: 0.6rem
}
.section-widget-padded {
padding: 0.6rem
}
.section-title {
font-size: 1.3rem;
font-weight: 700;
margin: 0
}
.section-widget-button-like {
border-radius: 0.6rem;
padding: 6px 10px;
@ -71,6 +82,7 @@
font-family: 'Open Sans', sans-serif;
font-weight: 700
}
.section-title-details {
font-size: 1.3rem;
font-weight: 700;
@ -78,18 +90,22 @@
padding: 6px 10px 6px 10px;
background: var(--gradient) !important;
}
.section-title-details[open] svg {
transform: rotate(180deg);
animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1)
}
.section-title-details:not([open]) svg {
transform: initial;
animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1)
}
.section-title-summary {
display: flex;
justify-content: space-between
}
.section-form {
display: flex;
flex-direction: column;
@ -97,29 +113,35 @@
width: 100%;
padding: 0.6rem
}
.section-form-legend {
margin-top: unset;
margin-bottom: 10px;
font-weight: bold;
font-size: 1.62rem
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 6px
}
.form-group textarea {
height: 7rem;
max-height: 100%
}
.help-block {
margin-bottom: 6px
}
.help-text {
font-style: italic;
font-size: 1rem;
margin-bottom: 6px
}
.help-block > .list-unstyled,
.alert,
.alert-danger {