mirror of
https://github.com/documize/community.git
synced 2025-08-04 21:15:24 +02:00
Redesign setting screens
We're using iconography to stylize each setting screen. Imeplemented new color palletes and shades.
This commit is contained in:
parent
02102f9bf3
commit
f442081a41
42 changed files with 563 additions and 548 deletions
8
gui/app/styles/core/bootstrap.scss
vendored
8
gui/app/styles/core/bootstrap.scss
vendored
|
@ -59,19 +59,23 @@ $input-btn-focus-color: rgba($theme-500, .25);
|
|||
// form labels
|
||||
.form-group {
|
||||
> label {
|
||||
color: map-get($gray-shades, 800);
|
||||
color: map-get($gray-shades, 700);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> small, > div[class*="col"] > small {
|
||||
color: map-get($gray-shades, 600);
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
> small.highlight, > div[class*="col"] > small.highlight {
|
||||
font-size: 1rem;
|
||||
color: map-get($yellow-shades, 700) !important;
|
||||
}
|
||||
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
// links
|
||||
|
|
|
@ -394,3 +394,23 @@ icons
|
|||
.dicon-menu-8::before {
|
||||
content: "\ea48";
|
||||
}
|
||||
|
||||
.dicon-send::before {
|
||||
content: "\ea49";
|
||||
}
|
||||
|
||||
.dicon-email::before {
|
||||
content: "\ea4a";
|
||||
}
|
||||
|
||||
.dicon-download::before {
|
||||
content: "\ea4b";
|
||||
}
|
||||
|
||||
.dicon-database::before {
|
||||
content: "\ea4c";
|
||||
}
|
||||
|
||||
.dicon-notification::before {
|
||||
content: "\ea4d";
|
||||
}
|
||||
|
|
|
@ -10,3 +10,22 @@
|
|||
font-weight: 400;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
|
||||
.logo-heading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
> .image {
|
||||
align-self: center;
|
||||
margin-right: 25px;
|
||||
|
||||
> i {
|
||||
font-size: 3.5rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
}
|
||||
|
||||
> .text {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -63,7 +63,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin shadow() {
|
||||
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
|
||||
}
|
||||
|
|
|
@ -1,32 +1,60 @@
|
|||
.product-update {
|
||||
text-align: left;
|
||||
margin: 50px 0;
|
||||
|
||||
> .update-summary {
|
||||
> .update-status {
|
||||
padding: 25px;
|
||||
border: 1px solid map-get($yellow-shades, 700);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
@include border-radius(2px);
|
||||
background-color: map-get($yellow-shades, 100);
|
||||
border: 1px solid map-get($yellow-shades, 200);
|
||||
@include shadow();
|
||||
@include border-radius(3px);
|
||||
|
||||
> .caption {
|
||||
> .title {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
color: map-get($yellow-shades, 700);
|
||||
color: map-get($yellow-shades, 600);
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
display:block;
|
||||
}
|
||||
|
||||
> .instructions {
|
||||
font-weight: normal;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
color: map-get($gray-shades, 800);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
> .links {
|
||||
margin: 30px 0 0 0;
|
||||
|
||||
> p {
|
||||
> .edition-name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 400;
|
||||
color: map-get($yellow-shades, 900);
|
||||
}
|
||||
|
||||
> .link {
|
||||
font-size: 1.3rem;
|
||||
color: map-get($yellow-shades, 800);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .change-log {
|
||||
padding: 25px;
|
||||
background-color: map-get($gray-shades, 100);
|
||||
border: 1px solid map-get($gray-shades, 200);
|
||||
@include shadow();
|
||||
@include border-radius(3px);
|
||||
|
||||
> .version {
|
||||
margin: 30px 0 0 20px;
|
||||
font-size: 1.3rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
color: map-get($yellow-shades, 700);
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .changes {
|
||||
|
@ -41,10 +69,11 @@
|
|||
> .tag-edition {
|
||||
margin: 10px 10px 10px 10px;
|
||||
padding: 5px 10px;
|
||||
background-color: map-get($gray-shades, 300);
|
||||
color: $theme-500;
|
||||
background-color: map-get($green-shades, 200);
|
||||
color: map-get($green-shades, 600);
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,15 +1,4 @@
|
|||
.view-customize {
|
||||
> .admin-heading {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
> .sub-heading {
|
||||
font-size: 1.1rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
|
||||
.user-table {
|
||||
tbody tr td, thead tr th {
|
||||
border-top: none !important;
|
||||
|
@ -157,9 +146,9 @@
|
|||
|
||||
> .backup-zone {
|
||||
@include border-radius(3px);
|
||||
border: 1px solid map-get($gray-shades, 300);
|
||||
border: 1px solid map-get($green-shades, 200);
|
||||
padding: 20px 20px;
|
||||
background-color: map-get($green-shades, 200);
|
||||
background-color: map-get($green-shades, 100);
|
||||
color: $color-black-light-1;
|
||||
|
||||
> .backup-fail {
|
||||
|
@ -175,10 +164,10 @@
|
|||
|
||||
> .restore-zone {
|
||||
@include border-radius(3px);
|
||||
border: 1px solid map-get($gray-shades, 300);
|
||||
border: 1px solid map-get($red-shades, 200);
|
||||
margin: 50px 0;
|
||||
padding: 20px 20px;
|
||||
background-color: map-get($red-shades, 200);
|
||||
background-color: map-get($red-shades, 100);
|
||||
color: $color-black-light-1;
|
||||
|
||||
> .restore-fail {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue